WAR-20: Complete the component

Begin adding specs
MetroStar · Apr 27, 2023 · b6397ab · b6397ab
1 parent 03a53c9
commit b6397ab
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 35 deletions.
diff --git a/packages/warpspeed/src/components/memorable-date/memorable-date.stories.tsx b/packages/warpspeed/src/components/memorable-date/memorable-date.stories.tsx
@@ -4,23 +4,34 @@ import { MemorableDate } from '../../index';
 import { MemorableDateProps } from './memorable-date';
 
 const meta: Meta<typeof MemorableDate> = {
-  title: 'USWDS/MemorableDate',
-  component: MemorableDate,
-  argTypes: {
-    id: { required: true },
-    monthId: { required: true },
-    dayId: { required: true },
-    yearId: { required: true }
-  },
+  title: 'USWDS/Forms/Memorable Date',
+  component: MemorableDate
 };
 export default meta;
 
-const Template: StoryFn<typeof MemorableDate> = (args: MemorableDateProps) => <MemorableDate {...args}>MemorableDate</MemorableDate>;
+const Template: StoryFn<typeof MemorableDate> = (args: MemorableDateProps) => <MemorableDate {...args} />;
 
-export const Default = Template.bind({});
-Default.args = {
+export const Standard = Template.bind({});
+Standard.args = {
   id: 'memorable-date-1',
-  monthId: 'memorable-date-month-1',
-  dayId: 'memorable-date-day-1',
-  yearId: 'memorable-date-year-1'
+  monthId: 'month-1',
+  dayId: 'day-1',
+  yearId: 'year-1',
+  monthName: 'month-1',
+  dayName: 'day-1',
+  yearName: 'year-1'
 };
+
+export const DefaultValue = Template.bind({});
+DefaultValue.args = {
+  id: 'memorable-date-2',
+  monthId: 'month-2',
+  dayId: 'day-2',
+  yearId: 'year-2',
+  monthName: 'month-2',
+  dayName: 'day-2',
+  yearName: 'year-2',
+  monthValue: 12,
+  dayValue: 30,
+  yearValue: 2000
+};
diff --git a/packages/warpspeed/src/components/memorable-date/memorable-date.test.tsx b/packages/warpspeed/src/components/memorable-date/memorable-date.test.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import userEvent, { render, screen, fireEvent } from '@testing-library/react';
+import { MemorableDate } from './memorable-date';
+
+describe('Memorable Date', () => {
+  const memorableDate = <MemorableDate id="memorable-date" monthId='month' dayId='day' yearId='year' />;
+
+  test('should render', () => {
+    render(memorableDate);
+    expect(screen.getByTestId('memorable-date')).toBeTruthy();
+  });
+
+  // it('should set date to Jan 2 2020 using keyboard', async () => {
+  //   const { baseElement } = render(memorableDate);
+  //   const monthInput = baseElement.querySelector(`input[id="month"]`) as HTMLInputElement;
+  //   const dayInput = baseElement.querySelector(`input[id="day"]`) as HTMLInputElement;
+  //   const yearInput = baseElement.querySelector(`input[id="year"]`) as HTMLInputElement;
+
+  //   await userEvent.type(monthInput, "1");
+  //   await userEvent.type(dayInput, "2");
+  //   await userEvent.type(yearInput, "2020");
+
+  //   // fireEvent.change(monthInput, {target: {value: '1'}});
+  //   // fireEvent.change(dayInput, {target: {value: '2'}});
+  //   // fireEvent.change(yearInput, {target: {value: '2020'}});
+
+  //   expect(monthInput.value).toEqual('1');
+  //   expect(dayInput.value).toEqual('2');
+  //   expect(yearInput.value).toEqual('2020');
+  // });
+});
diff --git a/packages/warpspeed/src/components/memorable-date/memorable-date.tsx b/packages/warpspeed/src/components/memorable-date/memorable-date.tsx
@@ -1,66 +1,113 @@
 import React from 'react';
 
 export interface MemorableDateProps {
+    /**
+     * The unique identifier for this component
+     */
     id: string;
+    /**
+     * The unique identifier for the month field
+     */
     monthId: string;
+    /**
+     * The unique identifier for the day field
+     */
     dayId: string;
+    /**
+     * The unique identifier for the year field
+     */
     yearId: string;
+    /**
+     * The name for the month field
+     */
+    monthName?: string;
+    /**
+     * The name for the day field
+     */
+    dayName?: string;
+    /**
+     * The name for the year field
+     */
+    yearName?: string;
+    /**
+     * The default value for the day field
+     */
+    dayValue?: number;
+    /**
+     * The default value for the year field
+     */
+    monthValue?: number;
+    /**
+     * The default value for the year field
+     */
+    yearValue?: number;
   }
-
+
+  /**
+   * A memorable date splits a date into three fields.
+   */
   export const MemorableDate = ({
     id,
     monthId,
     dayId,
     yearId,
-    // ...props
-  }: MemorableDateProps & JSX.IntrinsicElements['memorabledate']): React.ReactElement => {
+    monthName,
+    dayName,
+    yearName,
+    monthValue,
+    dayValue,
+    yearValue,
+    ...props
+  }: MemorableDateProps): React.ReactElement => {
     return (
-      <div id={id} className="usa-memorable-date" data-testid="memorable-date">
+      <div id={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={monthId}>Month</label>
           <select
             className="usa-select"
             id={monthId}
-            name={monthId}
+            name={monthName}
+            value={monthValue}
           >
             <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>
+            <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={dayId}>Day</label>
           <input
             className="usa-input"
             id={dayId}
-            name={dayId}
+            name={dayName}
+            minLength={1}
             maxLength={2}
             pattern="[0-9]*"
             inputMode="numeric"
-            value=""
+            value={dayValue}
           />
         </div>
         <div className="usa-form-group usa-form-group--year">
           <label className="usa-label" htmlFor={yearId}>Year</label>
           <input
             className="usa-input"
             id={yearId}
-            name={yearId}
+            name={yearName}
             minLength={4}
             maxLength={4}
             pattern="[0-9]*"
             inputMode="numeric"
-            value=""
+            value={yearValue}
           />
         </div>
       </div>