@simplybusiness/mobius 3.0.0

package/src/components/DatePicker/CalendarCell.tsx

@@ -0,0 +1,46 @@
+import { AriaCalendarCellProps, useCalendarCell } from "@react-aria/calendar";
+import { useFocusRing } from "@react-aria/focus";
+import { CalendarState } from "@react-stately/calendar";
+import clsx from "clsx";
+import { useRef } from "react";
+
+export interface CalendarCellProps extends AriaCalendarCellProps {
+  state: CalendarState;
+}
+
+export function CalendarCell({ state, date }: CalendarCellProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const {
+    cellProps,
+    buttonProps,
+    isSelected,
+    isOutsideVisibleRange,
+    isDisabled,
+    isUnavailable,
+    formattedDate,
+  } = useCalendarCell({ date }, state, ref);
+
+  const { focusProps, isFocusVisible } = useFocusRing();
+
+  const classes = clsx("mobius/CalendarCell", {
+    "--is-selected": isSelected,
+    "--is-outside-visible-range": isOutsideVisibleRange,
+    "--is-disabled": isDisabled,
+    "--is-unavailable": isUnavailable,
+    "--is-focused": isFocusVisible,
+  });
+
+  return (
+    <td className={classes} {...cellProps}>
+      <div
+        {...buttonProps}
+        ref={ref}
+        hidden={isOutsideVisibleRange}
+        className="mobius/CalendarCellInner"
+        {...focusProps}
+      >
+        {formattedDate}
+      </div>
+    </td>
+  );
+}

package/src/components/DatePicker/CalendarGrid.tsx

@@ -0,0 +1,58 @@
+import {
+  AriaCalendarGridProps,
+  CalendarProps,
+  useCalendarGrid,
+} from "@react-aria/calendar";
+import {
+  startOfWeek,
+  getWeeksInMonth,
+  CalendarDate,
+} from "@internationalized/date";
+import { useLocale } from "@react-aria/i18n";
+import { CalendarState } from "@react-stately/calendar";
+import { CalendarCell } from "./CalendarCell";
+
+export interface CalendarGridProps
+  extends AriaCalendarGridProps,
+    CalendarProps<CalendarDate> {
+  state: CalendarState;
+}
+
+export function CalendarGrid({ state, ...props }: CalendarGridProps) {
+  const { locale } = useLocale();
+  const { gridProps, headerProps, weekDays } = useCalendarGrid(props, state);
+
+  // Find the start date of the grid, which is the beginning
+  // of the week the month starts in. Also get the number of
+  // weeks in the month so we can render the proper number of rows.
+  const monthStart = startOfWeek(state.visibleRange.start, locale);
+  const weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
+
+  return (
+    <table className="mobius/CalendarGrid" {...gridProps}>
+      <thead {...headerProps} className="mobius/CalendarGridHead">
+        <tr>
+          {weekDays.map((day, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <th className="mobius/CalendarGridHeadCell" key={index}>
+              {day}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody className="mobius/CalendarGridBody">
+        {[...new Array(weeksInMonth).keys()].map(weekIndex => (
+          <tr key={weekIndex}>
+            {[...new Array(7).keys()].map(dayIndex => (
+              <CalendarCell
+                key={dayIndex}
+                state={state}
+                date={monthStart.add({ weeks: weekIndex, days: dayIndex })}
+              />
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

package/src/components/DatePicker/DateField.tsx

@@ -0,0 +1,43 @@
+import { useLocale } from "@react-aria/i18n";
+import { useDateFieldState } from "@react-stately/datepicker";
+import { AriaDateFieldProps, useDateField } from "@react-aria/datepicker";
+import { createCalendar, DateValue } from "@internationalized/date";
+import { useRef } from "react";
+import { DateSegment } from "./DateSegment";
+
+export interface DateFieldProps extends AriaDateFieldProps<DateValue> {
+  className: string;
+}
+
+export function DateField(props: DateFieldProps) {
+  const { label, className } = props;
+  const { locale } = useLocale();
+  const state = useDateFieldState({
+    ...props,
+    locale,
+    createCalendar,
+  });
+
+  const ref = useRef<HTMLDivElement | null>(null);
+  const { labelProps, fieldProps } = useDateField(props, state, ref);
+
+  // ID is duplicated with DateFieldGroup - Spectrum bug?
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { id, ...filteredFieldProps } = fieldProps;
+
+  return (
+    <div className={className}>
+      <span {...labelProps}>{label}</span>
+      <div {...filteredFieldProps} ref={ref} className="mobius/DateSegments">
+        {state.segments.map((segment, i) => (
+          <DateSegment
+            // eslint-disable-next-line react/no-array-index-key
+            key={i}
+            segment={segment}
+            state={state}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/DatePicker/DatePicker.story.mdx

@@ -0,0 +1,529 @@
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { DatePicker } from "./DatePicker";
+import { Button } from "../Button";
+import { parseDate } from "@internationalized/date";
+import { I18nProvider } from "@react-aria/i18n";
+
+<Meta
+  title="Forms/DatePicker"
+  component={DatePicker}
+  argTypes={{
+    locale: {
+      control: {
+        type: "select",
+        options: ["en-GB", "en-US"],
+      },
+    },
+  }}
+/>
+
+# DatePicker
+
+DatePicker allows you to display a date picker.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { DatePicker } from "@simplybusiness/mobius";
+```
+
+## Normal
+
+<Story name="Normal" args={{ locale: "en-GB", label: "Start date" }}>
+  {args => (
+    <I18nProvider locale={args.locale}>
+      <DatePicker
+        minValue={parseDate("2022-05-05")}
+        label="Start date"
+        {...args}
+      />
+    </I18nProvider>
+  )}
+</Story>
+
+<!-- prettier-ignore -->
+```jsx
+import { DatePicker } from "@simplybusiness/mobius";
+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
+
+<ArgsTable 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)