feat(calendar): today design

Author: k-tada

Diff for: packages/styles/bases/calendar.css.ts

@@ -125,3 +125,8 @@ export const calendarItemInteractiveStyle = style([
     },
   },
 ]);
+export const calendarItemInteractiveTodayStyle = style({
+  border: `1px solid ${THEME.color.green[800]}`,
+  borderRadius: "50%",
+  boxSizing: "border-box",
+});

Diff for: packages/wiz-ui-react/src/components/base/calendar/components/calendar.tsx

@@ -93,6 +93,7 @@ type Props = BaseProps & {
   currentMonth?: Date;
   activeDates?: DateStatus[];
   filledWeeks?: boolean;
+  _today?: Date;
   onClickDate?: (selectedValue: Date) => void;
   /**
    * @description 日付が無効かどうかを判定する関数です。無効な日付はクリック不可になります。
@@ -108,6 +109,7 @@ const Calendar: FC<Props> = ({
   currentMonth = new Date(),
   activeDates,
   filledWeeks,
+  _today,
   onClickDate,
   disabledDate,
 }) => {
@@ -126,6 +128,18 @@ const Calendar: FC<Props> = ({
     });
   }
 
+  function getItemDate(item: CalendarDataItem) {
+    return new Date(
+      currentMonth.getFullYear(),
+      currentMonth.getMonth(),
+      Number(item.label)
+    );
+  }
+
+  function getIsToday(a: Date) {
+    return a.toDateString() === (_today || new Date()).toDateString();
+  }
+
   function getItemStyleState(
     item: CalendarDataItem,
     dateStatus?: DateStatus
@@ -139,13 +153,7 @@ const Calendar: FC<Props> = ({
     if (item.isOutOfCurrentMonth) {
       return;
     }
-    onClickDate?.(
-      new Date(
-        currentMonth.getFullYear(),
-        currentMonth.getMonth(),
-        Number(item.label)
-      )
-    );
+    onClickDate?.(getItemDate(item));
   }
   const calendarItems = calendarData.map((weekDateItems) => {
     return weekDateItems.map((item) => {
@@ -214,6 +222,7 @@ const Calendar: FC<Props> = ({
               const item = adjacent.current.item;
               const itemStyle = adjacent.current.itemStyle;
               const activeDateStatus = adjacent.current.activeDateStatus;
+              const isToday = getIsToday(getItemDate(item));
               return (
                 <td
                   key={`${item.label}-${col}`}
@@ -244,7 +253,14 @@ const Calendar: FC<Props> = ({
                           adjacent.current.itemStyle === "primary"
                         )}
                       >
-                        <div className={styles.calendarItemInteractiveStyle}>
+                        <div
+                          className={clsx(
+                            styles.calendarItemInteractiveStyle,
+                            !item.isOutOfCurrentMonth &&
+                              isToday &&
+                              styles.calendarItemInteractiveTodayStyle
+                          )}
+                        >
                           {item.label}
                         </div>
                       </div>

Diff for: packages/wiz-ui-react/src/components/base/calendar/stories/calendar.stories.tsx

@@ -107,3 +107,29 @@ export const FilledWeeks: Story = {
     },
   },
 };
+
+export const Today: Story = {
+  ...Template,
+  args: {
+    currentMonth: new Date("2023-03"),
+    _today: new Date("2023-03-05"),
+  },
+};
+
+export const DisabledToday: Story = {
+  ...Template,
+  args: {
+    currentMonth: new Date("2023-03"),
+    _today: new Date("2023-03-05"),
+    disabledDate: (date: Date) => date.getDate() === 5,
+  },
+};
+
+export const SelectedToday: Story = {
+  ...Template,
+  args: {
+    currentMonth: new Date("2023-03"),
+    _today: new Date("2023-03-05"),
+    activeDates: [{ date: new Date("2023-03-05"), state: "primary" }],
+  },
+};

Diff for: packages/wiz-ui-react/src/components/base/inputs/date-picker/components/date-picker.tsx

@@ -26,6 +26,7 @@ type Props = BaseProps & {
   disabled?: boolean;
   error?: boolean;
   isDirectionFixed?: boolean;
+  _today?: Date;
   onChangeDate: (selectedValue: Date | null) => void;
   /**
    * @description 日付が無効かどうかを判定する関数です。無効な日付はクリック不可になります。
@@ -60,6 +61,7 @@ const DatePicker: FC<Props> = ({
   formatYear = (year) => `${year}`,
   formatDate = (date) =>
     `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`,
+  _today,
 }: Props) => {
   const [isOpen, setIsOpen] = useState(false);
   const cancelButtonVisible = !disabled && !!date;
@@ -243,6 +245,7 @@ const DatePicker: FC<Props> = ({
             onClickDate={(date) => onChangeDate(date)}
             currentMonth={currentMonth}
             filledWeeks
+            _today={_today || new Date()}
             disabledDate={disabledDate}
           />
         </div>

Diff for: packages/wiz-ui-react/src/components/base/inputs/date-picker/stories/date-picker.stories.tsx

@@ -98,3 +98,26 @@ export const Playground: Story = {
     return <WizDatePicker {...args} date={date} onChangeDate={setDate} />;
   },
 };
+
+export const Today: Story = {
+  args: {
+    date: new Date(2023, 0, 1),
+    _today: new Date("2023-01-15"),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    canvas.getByLabelText(ARIA_LABELS.DATE_PICKER_INPUT).click();
+  },
+};
+
+export const DisabledToday: Story = {
+  args: {
+    date: new Date(2023, 0, 1),
+    disabledDate: (date: Date) => date.getDate() >= 10 && date.getDate() < 17,
+    _today: new Date("2023-01-15"),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    canvas.getByLabelText(ARIA_LABELS.DATE_PICKER_INPUT).click();
+  },
+};

Diff for: packages/wiz-ui-react/src/components/base/inputs/date-range-picker/components/date-range-picker.tsx

@@ -40,6 +40,7 @@ type Props = BaseProps & {
   selectBoxValue?: string;
   isDirectionFixed?: boolean;
   error?: boolean;
+  _today?: Date;
   onChangeDateRange: (dateRange: DateRange) => void;
   onChangeSelectBoxValue?: (value: string) => void;
   disabledDate?: (date: Date) => boolean;
@@ -60,6 +61,7 @@ const DateRangePicker: FC<Props> = ({
   selectBoxValue,
   isDirectionFixed = false,
   error,
+  _today,
   onChangeDateRange,
   onChangeSelectBoxValue,
   disabledDate = () => false,
@@ -316,6 +318,7 @@ const DateRangePicker: FC<Props> = ({
                   onClickDate={onClickDate}
                   disabledDate={disabledDate}
                   filledWeeks={true}
+                  _today={_today || new Date()}
                 />
               </div>
               <div className={styles.popupCalendarContainerStyle["right"]}>
@@ -345,6 +348,7 @@ const DateRangePicker: FC<Props> = ({
                   onClickDate={onClickDate}
                   disabledDate={disabledDate}
                   filledWeeks={true}
+                  _today={_today || new Date()}
                 />
               </div>
             </div>

Diff for: packages/wiz-ui-react/src/components/base/inputs/date-range-picker/stories/date-range-picker.stories.tsx

@@ -185,3 +185,32 @@ export const Playground: Story = {
     );
   },
 };
+
+export const Today: Story = {
+  args: {
+    dateRange: {
+      start: new Date("2021-01-15"),
+      end: new Date("2021-02-15"),
+    },
+    _today: new Date("2021-01-28"),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    canvas.getByLabelText(ARIA_LABELS.RANGE_DATE_PICKER_INPUT).click();
+  },
+};
+
+export const DisabledWithToday: Story = {
+  args: {
+    dateRange: {
+      start: new Date("2021-01-01"),
+      end: new Date("2021-01-31"),
+    },
+    disabledDate: (date: Date) => date.getDate() >= 10 && date.getDate() < 17,
+    _today: new Date("2021-01-15"),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    canvas.getByLabelText(ARIA_LABELS.RANGE_DATE_PICKER_INPUT).click();
+  },
+};