@simplybusiness/mobius-datepicker 3.11.0

package/src/components/DatePicker/DatePicker.mdx

@@ -0,0 +1,508 @@
+import { Meta, ArgTypes, Canvas, Story } from "@storybook/blocks";
+import { parseDate } from "@internationalized/date";
+import { I18nProvider } from "@react-aria/i18n";
+import { DatePicker } from "./DatePicker";
+import * as DatePickerStories from "./DatePicker.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 { DatePicker } from "@simplybusiness/mobius-datepicker";
+import { I18nProvider } from "@react-aria/i18n";
+import { parseDate } from "@internationalized/date";
+
+<I18nProvider locale="en-GB">
+  <DatePicker minValue={parseDate("2022-05-05")} label="Start date" />
+</I18nProvider>
+```
+
+# Localising
+
+## Props
+
+<ArgTypes of={DatePicker} />
+
+## 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/Calendar">
+  <div class="mobius/CalendarHeader">
+    <button
+      type="button"
+      aria-label="Previous"
+      class="mobius mobius/CalendarButton mobius/CalendarPreviousButton"
+    >
+      <div>&lt;</div>
+    </button>
+    <h2 class="mobius/CalendarTitle">June 2022</h2>
+    <button
+      type="button"
+      aria-label="Next"
+      class="mobius mobius/CalendarButton mobius/CalendarNextButton"
+    >
+      <div>&gt;</div>
+    </button>
+  </div>
+  <table class="mobius/CalendarGrid">
+    <thead aria-hidden="true" class="mobius/CalendarGridHead">
+      <tr>
+        <th class="mobius/CalendarGridHeadCell">S</th>
+        <th class="mobius/CalendarGridHeadCell">M</th>
+        <th class="mobius/CalendarGridHeadCell">T</th>
+        <th class="mobius/CalendarGridHeadCell">W</th>
+        <th class="mobius/CalendarGridHeadCell">T</th>
+        <th class="mobius/CalendarGridHeadCell">F</th>
+        <th class="mobius/CalendarGridHeadCell">S</th>
+      </tr>
+    </thead>
+    <tbody class="mobius/CalendarGridBody">
+      <tr>
+        <td
+          class="mobius/CalendarCell --is-outside-visible-range --is-disabled"
+          role="gridcell"
+          aria-disabled="true"
+        >
+          <div
+            role="button"
+            aria-disabled="true"
+            aria-label="Sunday, May 29, 2022"
+            class="mobius/CalendarCellInner"
+            hidden=""
+          >
+            29
+          </div>
+        </td>
+        <td
+          class="mobius/CalendarCell --is-outside-visible-range --is-disabled"
+          role="gridcell"
+          aria-disabled="true"
+        >
+          <div
+            role="button"
+            aria-disabled="true"
+            aria-label="Monday, May 30, 2022"
+            class="mobius/CalendarCellInner"
+            hidden=""
+          >
+            30
+          </div>
+        </td>
+        <td
+          class="mobius/CalendarCell --is-outside-visible-range --is-disabled"
+          role="gridcell"
+          aria-disabled="true"
+        >
+          <div
+            role="button"
+            aria-disabled="true"
+            aria-label="Tuesday, May 31, 2022"
+            class="mobius/CalendarCellInner"
+            hidden=""
+          >
+            31
+          </div>
+        </td>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="-1"
+            role="button"
+            aria-label="Wednesday, June 1, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            1
+          </div>
+        </td>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="-1"
+            role="button"
+            aria-label="Thursday, June 2, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            2
+          </div>
+        </td>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="-1"
+            role="button"
+            aria-label="Friday, June 3, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            3
+          </div>
+        </td>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="-1"
+            role="button"
+            aria-label="Saturday, June 4, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            4
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="-1"
+            role="button"
+            aria-label="Sunday, June 5, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            5
+          </div>
+        </td>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="-1"
+            role="button"
+            aria-label="Monday, June 6, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            6
+          </div>
+        </td>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="-1"
+            role="button"
+            aria-label="Tuesday, June 7, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            7
+          </div>
+        </td>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="-1"
+            role="button"
+            aria-label="Wednesday, June 8, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            8
+          </div>
+        </td>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="-1"
+            role="button"
+            aria-label="Thursday, June 9, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            9
+          </div>
+        </td>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="-1"
+            role="button"
+            aria-label="Friday, June 10, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            10
+          </div>
+        </td>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="-1"
+            role="button"
+            aria-label="Saturday, June 11, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            11
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="-1"
+            role="button"
+            aria-label="Sunday, June 12, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            12
+          </div>
+        </td>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="-1"
+            role="button"
+            aria-label="Monday, June 13, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            13
+          </div>
+        </td>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="-1"
+            role="button"
+            aria-label="Tuesday, June 14, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            14
+          </div>
+        </td>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="-1"
+            role="button"
+            aria-label="Wednesday, June 15, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            15
+          </div>
+        </td>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="-1"
+            role="button"
+            aria-label="Thursday, June 16, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            16
+          </div>
+        </td>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="-1"
+            role="button"
+            aria-label="Friday, June 17, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            17
+          </div>
+        </td>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="-1"
+            role="button"
+            aria-label="Saturday, June 18, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            18
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="-1"
+            role="button"
+            aria-label="Sunday, June 19, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            19
+          </div>
+        </td>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="-1"
+            role="button"
+            aria-label="Monday, June 20, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            20
+          </div>
+        </td>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="0"
+            role="button"
+            aria-label="Today, Tuesday, June 21, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            21
+          </div>
+        </td>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="-1"
+            role="button"
+            aria-label="Wednesday, June 22, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            22
+          </div>
+        </td>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="-1"
+            role="button"
+            aria-label="Thursday, June 23, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            23
+          </div>
+        </td>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="-1"
+            role="button"
+            aria-label="Friday, June 24, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            24
+          </div>
+        </td>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="-1"
+            role="button"
+            aria-label="Saturday, June 25, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            25
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="-1"
+            role="button"
+            aria-label="Sunday, June 26, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            26
+          </div>
+        </td>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="-1"
+            role="button"
+            aria-label="Monday, June 27, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            27
+          </div>
+        </td>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="-1"
+            role="button"
+            aria-label="Tuesday, June 28, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            28
+          </div>
+        </td>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="-1"
+            role="button"
+            aria-label="Wednesday, June 29, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            29
+          </div>
+        </td>
+        <td class="mobius/CalendarCell" role="gridcell">
+          <div
+            tabindex="-1"
+            role="button"
+            aria-label="Thursday, June 30, 2022"
+            class="mobius/CalendarCellInner"
+          >
+            30
+          </div>
+        </td>
+        <td
+          class="mobius/CalendarCell --is-outside-visible-range --is-disabled"
+          role="gridcell"
+          aria-disabled="true"
+        >
+          <div
+            role="button"
+            aria-disabled="true"
+            aria-label="Friday, July 1, 2022"
+            class="mobius/CalendarCellInner"
+            hidden=""
+          >
+            1
+          </div>
+        </td>
+        <td
+          class="mobius/CalendarCell --is-outside-visible-range --is-disabled"
+          role="gridcell"
+          aria-disabled="true"
+        >
+          <div
+            role="button"
+            aria-disabled="true"
+            aria-label="Saturday, July 2, 2022"
+            class="mobius/CalendarCellInner"
+            hidden=""
+          >
+            2
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</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/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta } from "@storybook/react";
+import { parseDate } from "@internationalized/date";
+import { I18nProvider } from "@react-aria/i18n";
+import { DatePicker, DatePickerProps } from "./DatePicker";
+
+export default {
+  title: "Forms/DatePicker",
+  component: DatePicker,
+  argTypes: {
+    locale: {
+      control: { type: "select" },
+      options: ["", "en-GB", "en-US"],
+    },
+  },
+};
+
+export const Normal: Meta<typeof DatePicker> = {
+  render: (args: DatePickerProps) => (
+    <DatePicker minValue={parseDate("2022-05-05")} {...args} />
+  ),
+  args: {
+    label: "Start date",
+    isRequired: false,
+  },
+  decorators: [
+    (Story, context) => (
+      <I18nProvider locale={context.allArgs.locale}>
+        <Story />
+      </I18nProvider>
+    ),
+  ],
+};

package/src/components/DatePicker/DatePicker.test.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { I18nProvider } from "@react-aria/i18n";
+import { parseDate } from "@internationalized/date";
+import { DatePicker } from ".";
+
+describe("DatePicker", () => {
+  it("should render without errors", () => {
+    const component = render(
+      <I18nProvider locale="en-GB">
+        <DatePicker minValue={parseDate("2022-05-05")} label="Start date" />
+      </I18nProvider>,
+    );
+    expect(component).toBeTruthy();
+  });
+});

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import {
+  DatePickerStateOptions,
+  useDatePickerState,
+} from "@react-stately/datepicker";
+import { AriaDatePickerProps, useDatePicker } from "@react-aria/datepicker";
+import { useRef } from "react";
+import { ModalProvider } from "@react-aria/overlays";
+import { DateValue } from "@internationalized/date";
+import { useHover } from "@react-aria/interactions";
+import { useFocusRing } from "@react-aria/focus";
+import clsx from "clsx";
+import { VisuallyHidden } from "@react-aria/visually-hidden";
+import { Button, Label } from "@simplybusiness/mobius";
+import { DateField } from "./DateField";
+import { Popover } from "./Popover";
+import { Calendar } from "./Calendar";
+
+export interface DatePickerProps
+  extends AriaDatePickerProps<DateValue>,
+    DatePickerStateOptions<DateValue> {
+  label: string;
+}
+
+export function DatePicker(props: DatePickerProps) {
+  const { label, isRequired } = props;
+  const state = useDatePickerState(props);
+  const ref = useRef<HTMLDivElement | null>(null);
+  const {
+    groupProps,
+    labelProps,
+    fieldProps,
+    buttonProps,
+    dialogProps,
+    calendarProps,
+  } = useDatePicker(props, state, ref);
+
+  const classes = clsx("mobius/DatePicker", {
+    "--is-valid": state.validationState === "valid",
+    "--is-invalid": state.validationState === "invalid",
+    "--is-required": typeof isRequired === "boolean" && isRequired,
+    "--is-optional": typeof isRequired === "boolean" && !isRequired,
+  });
+
+  const { hoverProps, isHovered } = useHover({
+    ...props,
+  });
+
+  const { focusProps, isFocusVisible } = useFocusRing(props);
+
+  const dateFieldGroupClasses = clsx("mobius/DateFieldGroup", {
+    "--is-hovered": isHovered,
+    "--is-focused": isFocusVisible,
+  });
+
+  const dateFieldClasses = clsx("mobius/DateField", {
+    "--is-hovered": isHovered,
+    "--is-focused": isFocusVisible,
+  });
+
+  const buttonClasses = clsx("mobius/DateFieldButton", {
+    "--is-hovered": isHovered,
+    "--is-focused": isFocusVisible,
+  });
+
+  return (
+    <ModalProvider>
+      <div className={classes} style={{ position: "relative" }}>
+        <Label {...labelProps}>{label}</Label>
+        <div
+          {...groupProps}
+          {...hoverProps}
+          {...focusProps}
+          ref={ref}
+          className={dateFieldGroupClasses}
+        >
+          <DateField {...fieldProps} className={dateFieldClasses} />
+          {/* @ts-expect-error wrong type for onPress */}
+          <Button
+            variant="secondary"
+            {...buttonProps}
+            className={buttonClasses}
+          >
+            <VisuallyHidden>Pick date</VisuallyHidden>
+          </Button>
+        </div>
+        {state.isOpen && (
+          /* @ts-expect-error */
+          <Popover
+            {...dialogProps}
+            isOpen={state.isOpen}
+            onClose={() => state.setOpen(false)}
+          >
+            <Calendar {...calendarProps} />
+          </Popover>
+        )}
+      </div>
+    </ModalProvider>
+  );
+}

package/src/components/DatePicker/DateSegment.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useDateSegment } from "@react-aria/datepicker";
+import { useFocusRing } from "@react-aria/focus";
+import {
+  DateFieldState,
+  DateSegment as DateSegmentType,
+} from "@react-stately/datepicker";
+import clsx from "clsx";
+import { useRef } from "react";
+
+export interface DateSegmentProps {
+  segment: DateSegmentType;
+  state: DateFieldState;
+}
+
+export function DateSegment({ segment, state }: DateSegmentProps) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const { segmentProps } = useDateSegment(segment, state, ref);
+
+  const { focusProps, isFocusVisible } = useFocusRing();
+
+  const classes = clsx("mobius/DateSegment", {
+    "--is-literal": segment.type === "literal",
+    "--is-placeholder": segment.isPlaceholder,
+    "--is-focused": isFocusVisible,
+  });
+
+  return (
+    <div {...segmentProps} {...focusProps} ref={ref} className={classes}>
+      {segment.text}
+    </div>
+  );
+}