@simplybusiness/mobius-datepicker 4.0.0-beta.7 → 4.0.0-beta.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius-datepicker",
   "license": "UNLICENSED",
-  "version": "4.0.0-beta.7",
+  "version": "4.0.0-beta.9",
   "description": "Mobius date picker component",
   "repository": {
     "type": "git",
@@ -91,10 +91,12 @@
     "@react-aria/visually-hidden": "^3.8.6",
     "@react-stately/calendar": "^3.4.1",
     "@react-stately/datepicker": "^3.8.0",
-    "@simplybusiness/icons": "^4.0.0-beta.7",
-    "@simplybusiness/mobius": "^4.0.0-beta.7",
+    "@simplybusiness/icons": "^4.0.0-beta.9",
+    "@simplybusiness/mobius": "^4.0.0-beta.9",
     "classnames": "^2.3.2",
-    "lodash.debounce": "^4.0.8"
+    "date-fns": "^2.30.0",
+    "lodash.debounce": "^4.0.8",
+    "react-day-picker": "^8.9.1"
   },
   "lint-staged": {
     "*.{js,ts,jsx,tsx}": "eslint --ext .tsx,.ts,.js,.jsx,.mjs --fix"

package/src/components/NewDatePicker/DatePickerIcon.tsx

@@ -0,0 +1 @@
+export const DatePickerIcon = () => <> </>;

package/src/components/NewDatePicker/DatePickerModal.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { VisuallyHidden } from "@simplybusiness/mobius";
+import classNames from "classnames/dedupe";
+import { useRef } from "react";
+import { DayPicker } from "react-day-picker";
+import FocusTrap from "../../hooks/useFocusTrap";
+import { DatePickerIcon } from "./DatePickerIcon";
+import { MONDAY_AS_NUMBER } from "./constants";
+import { dateObjToString } from "./dateObjToString";
+import { weekdayAsOneLetter } from "./weekdayAsOneLetter";
+
+export type DatePickerModalProps = {
+  date?: string; // yyyy-mm-dd
+  isOpen: boolean;
+  onSelected: (date: string) => void;
+  top: number;
+};
+
+export const DatePickerModal = ({
+  date,
+  isOpen,
+  onSelected,
+  top,
+}: DatePickerModalProps) => {
+  const modalRef = useRef<HTMLDivElement>(null);
+  const initialDate = date ? new Date(date) : new Date();
+
+  const handleDayPickerSelect = (selectedDate: Date | undefined) => {
+    if (!selectedDate) return;
+
+    onSelected(dateObjToString(selectedDate));
+  };
+
+  const modalClasses = classNames("mobius/DatePickerModal", {
+    "--is-open": isOpen,
+  });
+
+  return (
+    <FocusTrap>
+      <div
+        ref={modalRef}
+        className={modalClasses}
+        style={{ top }}
+        aria-describedby="screen-reader-title"
+      >
+        <VisuallyHidden>
+          <div id="screen-reader-title">
+            Please select a date from the calendar
+          </div>
+        </VisuallyHidden>
+        <DayPicker
+          mode="single"
+          selected={initialDate}
+          defaultMonth={initialDate}
+          onSelect={handleDayPickerSelect}
+          pagedNavigation
+          showOutsideDays
+          weekStartsOn={MONDAY_AS_NUMBER}
+          formatters={{ formatWeekdayName: weekdayAsOneLetter }}
+          components={{
+            IconLeft: DatePickerIcon,
+            IconRight: DatePickerIcon,
+          }}
+        />
+      </div>
+    </FocusTrap>
+  );
+};

package/src/components/NewDatePicker/NewDatePicker.mdx

@@ -0,0 +1,521 @@
+import { Meta, ArgTypes, Canvas, Story } from "@storybook/blocks";
+import { NewDatePicker } from "./NewDatePicker";
+import * as DatePickerStories from "./NewDatePicker.stories";
+
+<Meta of={DatePickerStories} />
+
+# DatePicker
+
+DatePicker allows you to display a date picker.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius-datepicker
+```
+
+## Usage
+
+```js
+import { DatePicker } from "@simplybusiness/mobius-datepicker";
+```
+
+## Normal
+
+<Story of={DatePickerStories.Normal} />
+
+{/* prettier-ignore */}
+```jsx
+import { NewDatePicker } from "@simplybusiness/mobius-datepicker";
+
+<DatePicker defaultValue="2023-11-13" label="Start date" />
+```
+
+# Localising
+
+## Props
+
+<ArgTypes of={NewDatePicker} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a DatePicker:
+
+### DateField
+
+```html
+<div class="mobius/DateFieldGroup">
+  <div class="mobius/DateField">
+    <span></span>
+    <div role="presentation" class="mobius/DateSegments">
+      <div class="mobius/DateSegment --is-placeholder">mm</div>
+      <div aria-hidden="true" class="mobius/DateSegment --is-literal">/</div>
+      <div class="mobius/DateSegment --is-placeholder">dd</div>
+      <div aria-hidden="true" class="mobius/DateSegment --is-literal">/</div>
+      <div class="mobius/DateSegment --is-placeholder">yyyy</div>
+    </div>
+  </div>
+  <button
+    type="button"
+    class="mobius mobius/Button --variant-secondary --size-medium mobius/DateFieldButton"
+  >
+    <span>
+      <div>Pick date</div>
+    </span>
+  </button>
+</div>
+```
+
+### Calendar
+
+```html
+<div class="mobius/DatePickerContainer">
+  <div class="mobius mobius/Flex mobius/TextField mobius/DatePicker">
+    <label class="mobius mobius/Label">Start date</label>
+    <div class="mobius/TextFieldInputWrapper">
+      <input
+        aria-invalid="false"
+        type="date"
+        class="mobius mobius/TextInput mobius/DatePicker"
+      />
+    </div>
+  </div>
+  <button
+    tabindex="0"
+    type="button"
+    class="mobius mobius/Button --variant-primary --size-medium mobius/DateFieldButton"
+  >
+    <div>Pick date</div>
+  </button>
+  <div class="mobius/DatePickerModal --is-open" style="top: 74px;">
+    <div class="rdp">
+      <div class="rdp-months">
+        <div class="rdp-month rdp-caption_start rdp-caption_end">
+          <div class="rdp-caption">
+            <div
+              class="rdp-caption_label"
+              aria-live="polite"
+              role="presentation"
+              id="react-day-picker-1"
+            >
+              November 2023
+            </div>
+            <div class="rdp-nav">
+              <button
+                name="previous-month"
+                aria-label="Go to previous month"
+                class="rdp-button_reset rdp-button rdp-nav_button rdp-nav_button_previous"
+                type="button"
+              ></button
+              ><button
+                name="next-month"
+                aria-label="Go to next month"
+                class="rdp-button_reset rdp-button rdp-nav_button rdp-nav_button_next"
+                type="button"
+              ></button>
+            </div>
+          </div>
+          <table
+            class="rdp-table"
+            role="grid"
+            aria-labelledby="react-day-picker-1"
+          >
+            <thead class="rdp-head">
+              <tr class="rdp-head_row">
+                <th scope="col" class="rdp-head_cell" aria-label="Monday">M</th>
+                <th scope="col" class="rdp-head_cell" aria-label="Tuesday">
+                  T
+                </th>
+                <th scope="col" class="rdp-head_cell" aria-label="Wednesday">
+                  W
+                </th>
+                <th scope="col" class="rdp-head_cell" aria-label="Thursday">
+                  T
+                </th>
+                <th scope="col" class="rdp-head_cell" aria-label="Friday">F</th>
+                <th scope="col" class="rdp-head_cell" aria-label="Saturday">
+                  S
+                </th>
+                <th scope="col" class="rdp-head_cell" aria-label="Sunday">S</th>
+              </tr>
+            </thead>
+            <tbody class="rdp-tbody">
+              <tr class="rdp-row">
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day rdp-day_outside"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    30
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day rdp-day_outside"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    31
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    1
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    2
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    3
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    4
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    5
+                  </button>
+                </td>
+              </tr>
+              <tr class="rdp-row">
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    6
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    7
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    8
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    9
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    10
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    11
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    12
+                  </button>
+                </td>
+              </tr>
+              <tr class="rdp-row">
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day rdp-day_today"
+                    role="gridcell"
+                    tabindex="0"
+                  >
+                    13
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    14
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    15
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    16
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    17
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    18
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    19
+                  </button>
+                </td>
+              </tr>
+              <tr class="rdp-row">
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    20
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    21
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    22
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    23
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    24
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    25
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    26
+                  </button>
+                </td>
+              </tr>
+              <tr class="rdp-row">
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    27
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    28
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    29
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    30
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day rdp-day_outside"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    1
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day rdp-day_outside"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    2
+                  </button>
+                </td>
+                <td class="rdp-cell" role="presentation">
+                  <button
+                    name="day"
+                    class="rdp-button_reset rdp-button rdp-day rdp-day_outside"
+                    role="gridcell"
+                    tabindex="-1"
+                  >
+                    3
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+Class names are augmented with the following flags if true:
+
+- \--is-valid
+- \--is-invalid
+- \--is-required
+- \--is-optional
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/DatePicker) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/NewDatePicker/NewDatePicker.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta } from "@storybook/react";
+import { excludeControls } from "../../utils/excludeControls";
+import { NewDatePicker, NewDatePickerProps } from "./NewDatePicker";
+
+export default {
+  title: "Forms/NewDatePicker",
+  component: NewDatePicker,
+  argTypes: {
+    validationState: {
+      options: ["valid", "invalid", "neither"],
+      control: { type: "radio" },
+      mapping: {
+        valid: "valid",
+        invalid: "invalid",
+        neither: "",
+      },
+    },
+    ...excludeControls(
+      "onChange",
+      "id",
+      "className",
+      "description",
+      "type",
+      "aria-label",
+      "aria-labelledby",
+      "labelElementType",
+      "inputElementType",
+      "isReadOnly",
+      "aria-describedby",
+      "aria-errormessage",
+    ),
+  },
+  args: {
+    defaultValue: "",
+    errorMessage: "",
+    isDisabled: false,
+    isRequired: false,
+  },
+};
+
+export const Normal: Meta<typeof NewDatePicker> = {
+  render: (args: NewDatePickerProps) => <NewDatePicker {...args} />,
+  args: {
+    label: "Start date",
+  },
+};