WAR-20: Add Memorable Date to WarpSpeed

packages/comet-uswds/src/components/index.ts

@@ -20,6 +20,7 @@ export { default as Header } from './header';
 export { default as Icon } from './icon';
 export { default as TextInput } from './text-input';
 export { default as Label } from './label';
+export { default as MemorableDate } from './memorable-date';
 export { default as Modal } from './modal';
 export { default as Pagination } from './pagination';
 export { default as ProcessList } from './process-list';

packages/comet-uswds/src/components/memorable-date/index.ts

@@ -0,0 +1 @@
+export { default } from './memorable-date';

packages/comet-uswds/src/components/memorable-date/memorable-date.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import { MemorableDate } from '../../index';
+import { MemorableDateProps } from './memorable-date';
+
+const meta: Meta<typeof MemorableDate> = {
+  title: 'USWDS/Forms/Memorable Date',
+  component: MemorableDate,
+};
+export default meta;
+
+const Template: StoryFn<typeof MemorableDate> = (args: MemorableDateProps) => (
+  <MemorableDate {...args} />
+);
+
+export const Standard = Template.bind({});
+Standard.args = {
+  id: '1',
+};
+
+export const DefaultValue = Template.bind({});
+DefaultValue.args = {
+  id: '2',
+  defaultMonthValue: 12,
+  defaultDayValue: 30,
+  defaultYearValue: 2000,
+};

packages/comet-uswds/src/components/memorable-date/memorable-date.test.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { /* userEvent, */ render, screen /* fireEvent */ } from '@testing-library/react';
+import { MemorableDate } from './memorable-date';
+import userEvent from '@testing-library/user-event';
+
+describe('Memorable Date', () => {
+  const memorableDate = <MemorableDate id="1" data-testid="memorable-date-1" />;
+
+  test('should render', () => {
+    render(memorableDate);
+    expect(screen.getByTestId('memorable-date-1')).toBeTruthy();
+  });
+
+  test('should render with default value', () => {
+    const { baseElement } = render(
+      <MemorableDate
+        id="1"
+        data-testid="memorable-date-1"
+        defaultMonthValue={12}
+        defaultDayValue={31}
+        defaultYearValue={2023}
+      />,
+    );
+    expect(screen.getByTestId('memorable-date-1')).toBeTruthy();
+    expect(
+      baseElement.querySelector('#memorable-date-month-1 > option:checked')?.getAttribute('value'),
+    ).toEqual('12');
+    expect(baseElement.querySelector('#memorable-date-day-1')?.getAttribute('value')).toEqual('31');
+    expect(baseElement.querySelector('#memorable-date-year-1')?.getAttribute('value')).toEqual(
+      '2023',
+    );
+  });
+
+  it('changing option should trigger onChanged event handler', async () => {
+    const onMonthChange = jest.fn();
+    const onDayChange = jest.fn();
+    const onYearChange = jest.fn();
+    const { baseElement } = render(
+      <MemorableDate
+        id="1"
+        data-testid="memorable-date-1"
+        onMonthChange={onMonthChange}
+        onDayChange={onDayChange}
+        onYearChange={onYearChange}
+      />,
+    );
+    const monthElement = baseElement.querySelector('#memorable-date-month-1') as HTMLSelectElement;
+    const dayElement = baseElement.querySelector('#memorable-date-day-1') as HTMLInputElement;
+    const yearElement = baseElement.querySelector('#memorable-date-year-1') as HTMLInputElement;
+
+    await userEvent.selectOptions(monthElement, '12');
+    await userEvent.type(dayElement, '31');
+    await userEvent.type(yearElement, '2023');
+
+    expect(onMonthChange).toHaveBeenCalled();
+    expect(onDayChange).toHaveBeenCalled();
+    expect(onYearChange).toHaveBeenCalled();
+  });
+});

packages/comet-uswds/src/components/memorable-date/memorable-date.tsx

@@ -0,0 +1,116 @@
+import React, { ChangeEventHandler } from 'react';
+
+export interface MemorableDateProps {
+  /**
+   * The unique identifier for this component
+   */
+  id: string;
+  /**
+   * The default value for the day field
+   */
+  defaultDayValue?: number;
+  /**
+   * The default value for the year field
+   */
+  defaultMonthValue?: number;
+  /**
+   * The default value for the year field
+   */
+  defaultYearValue?: number;
+  /**
+   * Event handler will be triggered when a month value changes
+   */
+  onMonthChange?: ChangeEventHandler<HTMLSelectElement>;
+  /**
+   * Event handler will be triggered when a day value changes
+   */
+  onDayChange?: ChangeEventHandler<HTMLInputElement>;
+  /**
+   * Event handler will be triggered when a year value changes
+   */
+  onYearChange?: ChangeEventHandler<HTMLInputElement>;
+}
+
+/**
+ * A memorable date splits a date into three fields.
+ */
+export const MemorableDate = ({
+  id,
+  defaultMonthValue,
+  defaultDayValue,
+  defaultYearValue,
+  onMonthChange,
+  onDayChange,
+  onYearChange,
+  ...props
+}: MemorableDateProps): React.ReactElement => {
+  return (
+    <div
+      id={`memorable-date-${id}`}
+      className="usa-memorable-date"
+      data-testid="memorable-date"
+      {...props}
+    >
+      <div className="usa-form-group usa-form-group--month usa-form-group--select">
+        <label className="usa-label" htmlFor={`memorable-date-month-${id}`}>
+          Month
+        </label>
+        <select
+          className="usa-select"
+          id={`memorable-date-month-${id}`}
+          name={`memorable-date-month-${id}`}
+          defaultValue={defaultMonthValue}
+          onChange={onMonthChange}
+        >
+          <option value="">- Select -</option>
+          <option value={1}>01 - January</option>
+          <option value={2}>02 - February</option>
+          <option value={3}>03 - March</option>
+          <option value={4}>04 - April</option>
+          <option value={5}>05 - May</option>
+          <option value={6}>06 - June</option>
+          <option value={7}>07 - July</option>
+          <option value={8}>08 - August</option>
+          <option value={9}>09 - September</option>
+          <option value={10}>10 - October</option>
+          <option value={11}>11 - November</option>
+          <option value={12}>12 - December</option>
+        </select>
+      </div>
+      <div className="usa-form-group usa-form-group--day">
+        <label className="usa-label" htmlFor={`memorable-date-day-${id}`}>
+          Day
+        </label>
+        <input
+          className="usa-input"
+          id={`memorable-date-day-${id}`}
+          name={`memorable-date-day-${id}`}
+          minLength={1}
+          maxLength={2}
+          pattern="[0-9]*"
+          inputMode="numeric"
+          defaultValue={defaultDayValue}
+          onChange={onDayChange}
+        />
+      </div>
+      <div className="usa-form-group usa-form-group--year">
+        <label className="usa-label" htmlFor={`memorable-date-year-${id}`}>
+          Year
+        </label>
+        <input
+          className="usa-input"
+          id={`memorable-date-year-${id}`}
+          name={`memorable-date-year-${id}`}
+          minLength={4}
+          maxLength={4}
+          pattern="[0-9]*"
+          inputMode="numeric"
+          defaultValue={defaultYearValue}
+          onChange={onYearChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default MemorableDate;