style(RangeCalendarStyled): 💄 convert story to vanilla css

Fixes adaptui#377
mcnaveen · Nov 10, 2022 · 806eef0 · 806eef0
1 parent 2f2e97e
commit 806eef0
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 77 deletions.
diff --git 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
@@ -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
@@ -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