From 7f98c8c24b77b98e95462ebe58960d8e2432a050 Mon Sep 17 00:00:00 2001
From: mcnaveen <8493007+mcnaveen@users.noreply.github.com>
Date: Mon, 7 Nov 2022 12:28:05 +0530
Subject: [PATCH 1/6] =?UTF-8?q?style(calendarStyled):=20=F0=9F=92=84=20=20?=
 =?UTF-8?q?Convert=20calendarStyled=20Story=20to=20Vanilla=20CSS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #378
---
 .../stories/CalendarStyled.component.tsx      | 28 ++++-------
 src/calendar/stories/CalendarStyled.css       | 48 +++++++++++++++++++
 .../stories/CalendarStyled.stories.tsx        |  8 ----
 3 files changed, 57 insertions(+), 27 deletions(-)
 create mode 100644 src/calendar/stories/CalendarStyled.css

diff --git a/src/calendar/stories/CalendarStyled.component.tsx b/src/calendar/stories/CalendarStyled.component.tsx
index f8a9fcb38..6b764427f 100644
--- a/src/calendar/stories/CalendarStyled.component.tsx
+++ b/src/calendar/stories/CalendarStyled.component.tsx
@@ -22,6 +22,8 @@ import {
 
 import { ChevronLeft, ChevronRight } from "./Utils.component";
 
+import "./CalendarStyled.css";
+
 export type CalendarStyledProps = Omit<
   CalendarBaseStateProps,
   "locale" | "createCalendar"
@@ -34,26 +36,14 @@ export const CalendarStyled: React.FC<CalendarStyledProps> = props => {
   const calendar = useCalendarState({ ...props, state });
 
   return (
-    <Calendar
-      state={calendar}
-      className="p-3 bg-white rounded-md shadow-lg styled-datepicker calendar w-max"
-    >
-      <div className="flex justify-between">
-        <CalendarPreviousButton
-          state={calendar}
-          className="text-gray-700 px-2 py-1 rounded-md focus:outline-none focus:ring-2 focus:ring-border-400"
-        >
-          <ChevronLeft className="flex-shrink-0 w-4" />
+    <Calendar state={calendar} className="calendar">
+      <div className="calendar--wrapper">
+        <CalendarPreviousButton state={calendar} className="calendar__button">
+          <ChevronLeft className="calendar__button_chevron" />
         </CalendarPreviousButton>
-        <CalendarTitle
-          state={calendar}
-          className="text-sm font-bold text-gray-700 px-2 py-1"
-        />
-        <CalendarNextButton
-          state={calendar}
-          className="text-gray-700 px-2 py-1 rounded-md focus:outline-none focus:ring-2 focus:ring-border-400"
-        >
-          <ChevronRight className="flex-shrink-0 w-4" />
+        <CalendarTitle state={calendar} className="calendar__title" />
+        <CalendarNextButton state={calendar} className="calendar__button">
+          <ChevronRight className="calendar__button_chevron" />
         </CalendarNextButton>
       </div>
       <CalendarGridComp state={state} />
diff --git a/src/calendar/stories/CalendarStyled.css b/src/calendar/stories/CalendarStyled.css
new file mode 100644
index 000000000..f2216dd17
--- /dev/null
+++ b/src/calendar/stories/CalendarStyled.css
@@ -0,0 +1,48 @@
+.calendar {
+  padding: 1rem;
+  background-color: #ffffff;
+  width: max-content;
+  border-radius: 0.375rem;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+.calendar--wrapper {
+  display: flex;
+  justify-content: space-between;
+}
+
+.calendar__button {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  color: #374151;
+  background-color: #ffffff !important;
+  border-radius: 0.375rem;
+  border: none !important;
+}
+
+.calendar__button:focus {
+  outline: none;
+}
+
+.calendar__button_chevron {
+  flex-shrink: 0;
+  width: 1rem;
+}
+
+.calendar__title {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  color: #374151;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 700;
+}
+
+.dates {
+  padding: 0.75rem;
+}
diff --git a/src/calendar/stories/CalendarStyled.stories.tsx b/src/calendar/stories/CalendarStyled.stories.tsx
index 0fce93a1f..91d475acd 100644
--- a/src/calendar/stories/CalendarStyled.stories.tsx
+++ b/src/calendar/stories/CalendarStyled.stories.tsx
@@ -9,8 +9,6 @@ import jsUtils from "./templates/UtilsJsx";
 import tsUtils from "./templates/UtilsTsx";
 import { CalendarStyled } from "./CalendarStyled.component";
 
-import "./tailwind.css";
-
 type Meta = ComponentMeta<typeof CalendarStyled>;
 // type Story = ComponentStoryObj<typeof CalendarStyled>;
 
@@ -21,12 +19,6 @@ export default {
     layout: "centered",
     preview: createPreviewTabs({ js, ts, jsUtils, tsUtils }),
   },
-  decorators: [
-    Story => {
-      document.body.id = "tailwind";
-      return <Story />;
-    },
-  ],
 } as Meta;
 
 export const Default = () => {

From 3193476fe82f96d1cfbbae90e292acb277603157 Mon Sep 17 00:00:00 2001
From: mcnaveen <8493007+mcnaveen@users.noreply.github.com>
Date: Mon, 7 Nov 2022 15:19:47 +0530
Subject: [PATCH 2/6] =?UTF-8?q?style(styledCalender):=20=F0=9F=92=84=20=20?=
 =?UTF-8?q?Make=20cursor=20as=20pointer=20on=20chevron=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/calendar/stories/CalendarStyled.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/calendar/stories/CalendarStyled.css b/src/calendar/stories/CalendarStyled.css
index f2216dd17..3d34537ba 100644
--- a/src/calendar/stories/CalendarStyled.css
+++ b/src/calendar/stories/CalendarStyled.css
@@ -30,6 +30,7 @@
 .calendar__button_chevron {
   flex-shrink: 0;
   width: 1rem;
+  cursor: pointer;
 }
 
 .calendar__title {
@@ -46,3 +47,8 @@
 .dates {
   padding: 0.75rem;
 }
+
+.dates__date:hover {
+  background-color: #f7fafc;
+  border-radius: 0.375rem;
+}

From 58158b91a6c28b5357d7a1be61b8ec9dcfe50954 Mon Sep 17 00:00:00 2001
From: mcnaveen <8493007+mcnaveen@users.noreply.github.com>
Date: Mon, 7 Nov 2022 16:06:57 +0530
Subject: [PATCH 3/6] =?UTF-8?q?style(calendarStyled):=20=F0=9F=92=84=20=20?=
 =?UTF-8?q?Changes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/calendar/stories/CalendarStyled.css | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/calendar/stories/CalendarStyled.css b/src/calendar/stories/CalendarStyled.css
index 3d34537ba..bb72215bc 100644
--- a/src/calendar/stories/CalendarStyled.css
+++ b/src/calendar/stories/CalendarStyled.css
@@ -47,8 +47,3 @@
 .dates {
   padding: 0.75rem;
 }
-
-.dates__date:hover {
-  background-color: #f7fafc;
-  border-radius: 0.375rem;
-}

From 274c6e3f30ccd504d723d2a4f1a81445adbd5c51 Mon Sep 17 00:00:00 2001
From: mcnaveen <8493007+mcnaveen@users.noreply.github.com>
Date: Thu, 10 Nov 2022 10:09:14 +0530
Subject: [PATCH 4/6] =?UTF-8?q?fix(styledCalendar):=20=F0=9F=90=9B=20=20fi?=
 =?UTF-8?q?xes=20aria-selected=20and=20deleted=20attr?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/calendar/stories/CalendarStyled.css | 31 +++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/src/calendar/stories/CalendarStyled.css b/src/calendar/stories/CalendarStyled.css
index bb72215bc..c87bd944c 100644
--- a/src/calendar/stories/CalendarStyled.css
+++ b/src/calendar/stories/CalendarStyled.css
@@ -47,3 +47,34 @@
 .dates {
   padding: 0.75rem;
 }
+
+.calendar [data-weekend] {
+  color: #dc2626;
+}
+
+.calendar [aria-selected="true"] {
+  color: #ffffff;
+  background-color: #3b82f6;
+}
+
+.calendar [aria-selected="true"] {
+  color: #ffffff;
+  background-color: #3b82f6;
+}
+
+.calendar [aria-selected]:focus-within {
+  background-color: #f3f4f6;
+}
+
+.calendar [aria-selected="true"]:focus-within {
+  color: #ffffff;
+  background-color: #3b82f6;
+}
+
+.calendar [aria-disabled="true"] {
+  color: #6b7280;
+}
+
+.calendar span {
+  outline: none;
+}

From 2f2e97e6aef29f27dbf6613c5c2d93acaa2524d8 Mon Sep 17 00:00:00 2001
From: mcnaveen <8493007+mcnaveen@users.noreply.github.com>
Date: Thu, 10 Nov 2022 10:29:43 +0530
Subject: [PATCH 5/6] chore(calendarStyled): :fire: remove tailwind.css

---
 src/calendar/stories/CalendarStyled.css |  2 +
 src/calendar/stories/tailwind.css       | 53 -------------------------
 2 files changed, 2 insertions(+), 53 deletions(-)
 delete mode 100644 src/calendar/stories/tailwind.css

diff --git a/src/calendar/stories/CalendarStyled.css b/src/calendar/stories/CalendarStyled.css
index c87bd944c..97d09c950 100644
--- a/src/calendar/stories/CalendarStyled.css
+++ b/src/calendar/stories/CalendarStyled.css
@@ -24,6 +24,7 @@
 }
 
 .calendar__button:focus {
+  cursor: pointer;
   outline: none;
 }
 
@@ -77,4 +78,5 @@
 
 .calendar span {
   outline: none;
+  cursor: pointer;
 }
diff --git a/src/calendar/stories/tailwind.css b/src/calendar/stories/tailwind.css
deleted file mode 100644
index a7de9a2d9..000000000
--- a/src/calendar/stories/tailwind.css
+++ /dev/null
@@ -1,53 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer components {
-  .styled-datepicker .calendar__cell {
-    height: 32px;
-    width: 32px;
-    max-height: 32px;
-    max-width: 32px;
-    @apply text-sm text-center rounded-lg;
-  }
-  .styled-datepicker .calendar__cell[data-is-range-selection] {
-    @apply bg-blue-100 rounded-none text-gray-800 !important;
-  }
-  .styled-datepicker .calendar__cell[data-is-selection-start] {
-    @apply bg-blue-500 rounded-l-lg text-white !important;
-  }
-  .styled-datepicker .calendar__cell[data-is-selection-end] {
-    @apply bg-blue-500 rounded-r-lg text-white !important;
-  }
-
-  .styled-datepicker .calendar__cell[data-is-range-selection]:focus-within {
-    @apply bg-blue-400 text-white !important;
-  }
-  .styled-datepicker .calendar__cell:focus-within {
-    @apply bg-gray-100;
-  }
-
-  .styled-datepicker.calendar [data-weekend] {
-    @apply text-red-600;
-  }
-
-  .styled-datepicker.calendar [aria-selected="true"] {
-    @apply text-white bg-blue-500;
-  }
-
-  .styled-datepicker.calendar [aria-selected]:focus-within {
-    @apply bg-gray-100;
-  }
-
-  .styled-datepicker.calendar [aria-selected="true"]:focus-within {
-    @apply text-white bg-blue-400;
-  }
-
-  .styled-datepicker.calendar [aria-disabled="true"] {
-    @apply text-gray-500;
-  }
-
-  .styled-datepicker.calendar span {
-    outline: none;
-  }
-}

From 806eef058f64ec1dd0873d2c816d9c6551c5a6fd Mon Sep 17 00:00:00 2001
From: mcnaveen <8493007+mcnaveen@users.noreply.github.com>
Date: Thu, 10 Nov 2022 11:25:27 +0530
Subject: [PATCH 6/6] style(RangeCalendarStyled): :lipstick: convert story to
 vanilla css

Fixes #377
---
 .../stories/RangeCalendarStyled.component.tsx | 25 ++---
 .../stories/RangeCalendarStyled.css           | 99 +++++++++++++++++++
 .../stories/RangeCalendarStyled.stories.tsx   |  8 --
 src/range-calendar/stories/tailwind.css       | 53 ----------
 4 files changed, 108 insertions(+), 77 deletions(-)
 create mode 100644 src/range-calendar/stories/RangeCalendarStyled.css
 delete mode 100644 src/range-calendar/stories/tailwind.css

diff --git a/src/range-calendar/stories/RangeCalendarStyled.component.tsx b/src/range-calendar/stories/RangeCalendarStyled.component.tsx
index fe897c92c..6c9116611 100644
--- a/src/range-calendar/stories/RangeCalendarStyled.component.tsx
+++ b/src/range-calendar/stories/RangeCalendarStyled.component.tsx
@@ -24,6 +24,8 @@ import {
   useRangeCalendarState,
 } from "../../index";
 
+import "./RangeCalendarStyled.css";
+
 export type RangeCalendarStyledProps = Omit<
   RangeCalendarBaseStateProps,
   "locale" | "createCalendar"
@@ -38,26 +40,17 @@ export const RangeCalendarStyled: React.FC<
   const calendar = useRangeCalendarState({ ...props, state });
 
   return (
-    <RangeCalendar
-      state={calendar}
-      className="p-3 bg-white rounded-md shadow-lg styled-datepicker calendar w-max"
-    >
-      <div className="flex justify-between">
+    <RangeCalendar state={calendar} className="rangecalendar">
+      <div className="rangecalendar--wrapper">
         <CalendarPreviousButton
           state={calendar}
-          className="text-gray-700 px-2 py-1 rounded-md focus:outline-none focus:ring-2 focus:ring-border-400"
+          className="rangecalendar__button"
         >
-          <ChevronLeft className="flex-shrink-0 w-4" />
+          <ChevronLeft className="rangecalendar__button_chevron" />
         </CalendarPreviousButton>
-        <CalendarTitle
-          state={calendar}
-          className="text-sm font-bold text-gray-700 px-2 py-1"
-        />
-        <CalendarNextButton
-          state={calendar}
-          className="text-gray-700 px-2 py-1 rounded-md focus:outline-none focus:ring-2 focus:ring-border-400"
-        >
-          <ChevronRight className="flex-shrink-0 w-4" />
+        <CalendarTitle state={calendar} className="rangecalendar__title" />
+        <CalendarNextButton state={calendar} className="rangecalendar__button">
+          <ChevronRight className="rangecalendar__button_chevron" />
         </CalendarNextButton>
       </div>
       <CalendarGridComp state={state} />
diff --git a/src/range-calendar/stories/RangeCalendarStyled.css b/src/range-calendar/stories/RangeCalendarStyled.css
new file mode 100644
index 000000000..d19306794
--- /dev/null
+++ b/src/range-calendar/stories/RangeCalendarStyled.css
@@ -0,0 +1,99 @@
+.rangecalendar {
+  padding: 1rem;
+  background-color: #ffffff;
+  width: max-content;
+  border-radius: 0.375rem;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+.rangecalendar--wrapper {
+  display: flex;
+  justify-content: space-between;
+}
+
+.rangecalendar__button {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  color: #374151;
+  background-color: #ffffff !important;
+  border-radius: 0.375rem;
+  border: none !important;
+}
+
+.rangecalendar__button:focus {
+  cursor: pointer;
+  outline: none;
+}
+
+.rangecalendar__button_chevron {
+  flex-shrink: 0;
+  width: 1rem;
+  cursor: pointer;
+}
+
+.rangecalendar__title {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  color: #374151;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 700;
+}
+
+.dates {
+  padding: 0.75rem;
+}
+
+.rangecalendar[data-is-range-selection] {
+  background-color: #dbeafe;
+  color: #1f2937;
+  border-radius: 0;
+}
+.rangecalendar[data-is-selection-start] {
+  color: #ffffff !important;
+  background-color: #3b82f6 !important;
+}
+.rangecalendar[data-is-selection-end] {
+  color: #ffffff !important;
+  background-color: #3b82f6 !important;
+}
+
+.rangecalendar[data-is-range-selection]:focus-within {
+  color: #ffffff !important;
+  background-color: #3b82f6 !important;
+}
+.rangecalendar:focus-within {
+  color: #6b7280;
+}
+
+.rangecalendar [data-weekend] {
+  color: #dc2626;
+}
+
+.rangecalendar [aria-selected="true"] {
+  color: #ffffff;
+  background-color: #3b82f6;
+}
+
+.rangecalendar [aria-selected]:focus-within {
+  color: #6b7280;
+}
+
+.rangecalendar [aria-selected="true"]:focus-within {
+  color: #ffffff;
+  background-color: #3b82f6;
+}
+
+.rangecalendar [aria-disabled="true"] {
+  color: #6b7280;
+}
+
+.rangecalendar span {
+  outline: none;
+  cursor: pointer;
+}
diff --git a/src/range-calendar/stories/RangeCalendarStyled.stories.tsx b/src/range-calendar/stories/RangeCalendarStyled.stories.tsx
index be5a4feba..fd471b9fa 100644
--- a/src/range-calendar/stories/RangeCalendarStyled.stories.tsx
+++ b/src/range-calendar/stories/RangeCalendarStyled.stories.tsx
@@ -9,8 +9,6 @@ import jsUtils from "./templates/UtilsJsx";
 import tsUtils from "./templates/UtilsTsx";
 import { RangeCalendarStyled } from "./RangeCalendarStyled.component";
 
-import "./tailwind.css";
-
 type Meta = ComponentMeta<typeof RangeCalendarStyled>;
 
 export default {
@@ -20,12 +18,6 @@ export default {
     layout: "centered",
     preview: createPreviewTabs({ js, ts, jsUtils, tsUtils }),
   },
-  decorators: [
-    Story => {
-      document.body.id = "tailwind";
-      return <Story />;
-    },
-  ],
 } as Meta;
 
 export const Default = () => {
diff --git a/src/range-calendar/stories/tailwind.css b/src/range-calendar/stories/tailwind.css
deleted file mode 100644
index a7de9a2d9..000000000
--- a/src/range-calendar/stories/tailwind.css
+++ /dev/null
@@ -1,53 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer components {
-  .styled-datepicker .calendar__cell {
-    height: 32px;
-    width: 32px;
-    max-height: 32px;
-    max-width: 32px;
-    @apply text-sm text-center rounded-lg;
-  }
-  .styled-datepicker .calendar__cell[data-is-range-selection] {
-    @apply bg-blue-100 rounded-none text-gray-800 !important;
-  }
-  .styled-datepicker .calendar__cell[data-is-selection-start] {
-    @apply bg-blue-500 rounded-l-lg text-white !important;
-  }
-  .styled-datepicker .calendar__cell[data-is-selection-end] {
-    @apply bg-blue-500 rounded-r-lg text-white !important;
-  }
-
-  .styled-datepicker .calendar__cell[data-is-range-selection]:focus-within {
-    @apply bg-blue-400 text-white !important;
-  }
-  .styled-datepicker .calendar__cell:focus-within {
-    @apply bg-gray-100;
-  }
-
-  .styled-datepicker.calendar [data-weekend] {
-    @apply text-red-600;
-  }
-
-  .styled-datepicker.calendar [aria-selected="true"] {
-    @apply text-white bg-blue-500;
-  }
-
-  .styled-datepicker.calendar [aria-selected]:focus-within {
-    @apply bg-gray-100;
-  }
-
-  .styled-datepicker.calendar [aria-selected="true"]:focus-within {
-    @apply text-white bg-blue-400;
-  }
-
-  .styled-datepicker.calendar [aria-disabled="true"] {
-    @apply text-gray-500;
-  }
-
-  .styled-datepicker.calendar span {
-    outline: none;
-  }
-}