@hyphen/hyphen-components 7.10.0 → 8.0.1

package/src/components/Formik/FormikTimePicker/FormikTimePicker.test.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
 import { render, fireEvent, screen, waitFor } from '@testing-library/react';
-import selectEvent from 'react-select-event';
 import { Formik, Form, Field, FormikValues, getIn, setIn } from 'formik';
 import { FormikTimePicker } from './FormikTimePicker';
 
 const testLabelName = 'test select';
 
-type Option = { value: string; label: string };
 const handleValidation = (testValueKey: string) => (values: FormikValues) =>
   getIn(values, testValueKey)?.length > 1
     ? {}
@@ -17,10 +15,9 @@ const renderForm = (
   props: {
     placeholder?: string;
     hideLabel?: boolean;
-    isMulti?: boolean;
     isRequired?: unknown;
     isDisabled?: boolean;
-    onChange?: jest.Mock<void, [any]>; // eslint-disable-line
+    onChange?: jest.Mock<void, [React.ChangeEvent<HTMLSelectElement>]>; // eslint-disable-line
     interval?: number;
   },
   testValueKey = testLabelName
@@ -33,7 +30,7 @@ const renderForm = (
     onSubmit={() => {}} // eslint-disable-line
   >
     {() => (
-      <Form>
+      <Form noValidate>
         <Field
           label={testValueKey}
           name={testValueKey}
@@ -93,62 +90,39 @@ describe('FormikTimePicker', () => {
 
     describe('Single select, pre-selected', () => {
       test('it renders with value pre-selected', () => {
-        render(
-          renderForm(
-            { label: '12:00 AM', value: '2020-10-23T04:30:00.120Z' },
-            {}
-          )
-        );
+        const initialValue = new Date(2020, 0, 1, 0, 0, 0, 120).toISOString();
+        const expectedValue = new Date();
+        expectedValue.setHours(0, 0, 0, 0);
 
-        expect(screen.getByText('12:00 AM')).toBeInTheDocument();
-      });
-    });
-
-    describe('Multi select, no selection', () => {
-      test('it renders input with a label, and with a default placeholder', () => {
-        render(renderForm(undefined, { isMulti: true }));
+        render(renderForm(initialValue, {}));
 
-        expect(screen.getByLabelText(testLabelName)).toBeInTheDocument();
-        expect(screen.getByText('HH:MM')).toBeInTheDocument();
+        expect(screen.getByLabelText(testLabelName)).toHaveValue(
+          expectedValue.toISOString()
+        );
       });
     });
 
-    describe('Multi select, with multiple items selected', () => {
-      test('it renders input with a label, and with two items selected', () => {
-        render(
-          renderForm(
-            [
-              { label: '12:00 AM', value: '2020-10-23T04:30:00.120Z' },
-              { label: '12:15 AM', value: '2020-10-23T04:45:00.120Z' },
-            ],
-            { isMulti: true }
-          )
-        );
-
-        expect(screen.getByLabelText(testLabelName)).toBeInTheDocument();
-        expect(screen.queryByText('HH:MM')).toBeNull();
-        expect(screen.getByText('12:00 AM')).toBeInTheDocument();
-        expect(screen.getByText('12:15 AM')).toBeInTheDocument();
+    describe('Is Required', () => {
+      test('it sets aria-required on the input', () => {
+        render(renderForm(undefined, { isRequired: true }));
+        const inputElement = screen.getByLabelText(testLabelName);
+        expect(inputElement).toHaveAttribute('aria-required', 'true');
       });
     });
 
     describe('Is Disabled', () => {
       test('it disables the input', () => {
-        const { container } = render(
-          renderForm(undefined, { isDisabled: true })
-        );
-
-        const disabledInput = container.querySelector(
-          '.react-select__control[aria-disabled="true"]'
-        );
+        render(renderForm(undefined, { isDisabled: true }));
 
-        expect(disabledInput).toBeInTheDocument();
+        expect(screen.getByLabelText(testLabelName)).toBeDisabled();
       });
     });
 
     describe('Is Invalid, with a helpful message', () => {
       test('it renders the helpful message', async () => {
-        const { getByText } = render(renderForm([], { isRequired: true }));
+        const { getByText } = render(
+          renderForm(undefined, { isRequired: true })
+        );
         const submitButton = getByText('submit');
 
         fireEvent.click(submitButton);
@@ -178,34 +152,17 @@ describe('FormikTimePicker', () => {
   describe('Callback Handling', () => {
     describe('onChange', () => {
       test("Custom onChange event fires callback function, overwriting Formik's onChange", async () => {
-        let value: Option | undefined;
+        let value: string | undefined;
         const mockedHandleChange = jest.fn((event) => {
-          value = event.target.value;
+          event.persist();
         });
 
-        const { getByLabelText, container, getByText } = render(
+        const { getByLabelText } = render(
           renderForm(value, { onChange: mockedHandleChange })
         );
         const selectInput = getByLabelText(testLabelName);
-        /**
-         * This class is specific to react-select, combined with our custom classNamePrefix prop.
-         * While this is an implementation detail there appears to be
-         * no clearer path to test our own component which depends on react-select
-         */
-        const selectInputWrapper = container.querySelector(
-          '.react-select__control'
-        );
-
-        fireEvent.focus(selectInput);
-        if (selectInputWrapper) {
-          fireEvent.mouseDown(selectInputWrapper);
-        }
-        const option = await waitFor(() => getByText('12:00 AM'), {
-          container,
-        });
-        fireEvent.click(option);
+        fireEvent.change(selectInput, { target: { value: 'hello' } });
         expect(mockedHandleChange).toHaveBeenCalledTimes(1);
-        expect(value?.label).toEqual('12:00 AM');
       });
 
       test('it fires onChange callback on change', async () => {
@@ -215,10 +172,20 @@ describe('FormikTimePicker', () => {
           renderForm(undefined, { onChange: mockedHandleChange })
         );
 
-        await selectEvent.select(getByLabelText(testLabelName), '12:00 AM');
+        await fireEvent.change(getByLabelText(testLabelName));
 
         expect(mockedHandleChange).toBeCalledTimes(1);
       });
+
+      test('it uses Formik onChange when no custom callback is provided', () => {
+        render(renderForm(undefined, {}));
+        const select = screen.getByLabelText(testLabelName);
+        const option = screen.getByText('12:15 AM') as HTMLOptionElement;
+
+        fireEvent.change(select, { target: { value: option.value } });
+
+        expect(select).toHaveValue(option.value);
+      });
     });
   });
 });

package/src/components/Formik/FormikTimePicker/FormikTimePicker.tsx

@@ -21,7 +21,6 @@ export interface FormikTimePickerProps
 export const FormikTimePicker: FC<FormikTimePickerProps> = ({
   field: { name, onBlur, onChange: formikOnChange, value },
   form: { touched, errors },
-  options,
   onChange,
   ...props
 }) => (
@@ -32,6 +31,5 @@ export const FormikTimePicker: FC<FormikTimePickerProps> = ({
     onChange={onChange ?? formikOnChange}
     value={value}
     error={getIn(touched, name) && getIn(errors, name)}
-    options={options}
   />
 );

package/src/components/Modal/Modal.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 .modal-close {
   border: none;

package/src/components/RadioGroup/RadioInput/RadioInput.module.scss

@@ -1,5 +1,5 @@
-@import '../../../styles/mixins';
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '../../../styles/mixins' as *;
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 $sm-dimension: 16px;
 $md-dimension: 20px;

package/src/components/SelectInput/SelectInput.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 // The following styles required the :global tag since they need to be applied to react-select elements for which we do not own the markup
 
 @mixin react-select-icon {

package/src/components/SelectInputInset/SelectInputInset.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 @mixin floating-label-minimize-md {
   opacity: 0.75;

package/src/components/SelectInputNative/SelectInputNative.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 %disabled-base {
   background-color: var(--color-background-disabled);

package/src/components/Switch/Switch.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 @mixin thumb-size-sm {
   width: calc(var(--size-spacing-2xl) - 4px);

package/src/components/Table/Table.stories.tsx

@@ -903,19 +903,19 @@ export const ComponentAsColumnHeader = () =>
     const columnConfig: ColumnType[] = [
       { heading: 'ID', dataKey: 'id' },
       { heading: 'Color', dataKey: 'color' },
-      { heading: <Badge message="Status" />, dataKey: 'status' },
+      { heading: <Badge>Status</Badge>, dataKey: 'status' },
     ];
     const tableData = [
       {
         id: 1,
         color: 'red',
-        status: <Badge variant="red">danger</Badge>,
+        status: <Badge color="danger">danger</Badge>,
       },
-      { id: 2, color: 'blue', status: <Badge variant="blue">info</Badge> },
+      { id: 2, color: 'blue', status: <Badge color="info">info</Badge> },
       {
         id: 3,
         color: 'green',
-        status: <Badge variant="green">success</Badge>,
+        status: <Badge color="success">success</Badge>,
       },
     ];
     return <Table rowKey="id" columns={columnConfig} rows={tableData} />;

package/src/components/TextInput/TextInput.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 @mixin size-sm {
   border-radius: var(

package/src/components/TextInputInset/TextInputInset.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 @mixin floating-label-minimize-md {
   opacity: 0.75;

package/src/components/TextareaInput/TextareaInput.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 @mixin size-sm {
   border-radius: var(

package/src/components/TextareaInputInset/TextareaInputInset.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 @mixin floating-label-minimize-md {
   opacity: 0.75;

package/src/components/TimePicker/TimePicker.mdx

@@ -6,13 +6,12 @@ import * as Stories from './TimePicker.stories';
 
 # TimePicker
 
-Use a TimePicker when you want users to select from a list of a available times agnostic of date.
+Use a TimePicker when you want users to select from a list of available times, agnostic of date.
 
-_NOTE:_ This component is abstracted from the [SelectInput](?path=/docs/components-selectinput-overview--default-story)
+_NOTE:_ This component is abstracted from the [SelectInputNative](?path=/docs/components-selectinputnative-overview--default-story)
 and as such includes the same underlying props interface with an added method for generating the time options automatically.
 
-_ABOUT TIME FORMAT:_ While the `value` prop technically returns `{ label: string; value: string; }` the value returned will always
-be a JS ISO date string, like this: `2016-07-13T18:46:01.933Z`.
+_ABOUT TIME FORMAT:_ The value returned will always be a JS ISO date string, like this: `2016-07-13T18:46:01.933Z`.
 
 ## Props
 
@@ -53,13 +52,6 @@ The example below is shown in military (24-hour) time.
 
 <Canvas of={Stories.WithCustomDateDisplay} />
 
-## With Open Menu
-
-The menu can be rendered open with the `menuIsOpen` prop. We do this here to confirm option generation
-via our UI visual snapshot testing (Chromatic).
-
-<Canvas of={Stories.WithOpenMenu} />
-
 ## Help Text
 
 <Canvas of={Stories.HelpText} />

package/src/components/TimePicker/TimePicker.stories.tsx

@@ -16,11 +16,11 @@ export default meta;
 export const Default = () => {
   const [value, setValue] = useState<string | null>(null);
   return (
-    <Box height="360px">
+    <Box>
       <TimePicker
         id="defaultTimePicker"
         name="defaultTimePicker"
-        onChange={(event: ChangeEvent<HTMLInputElement>) => {
+        onChange={(event: ChangeEvent<HTMLSelectElement>) => {
           setValue(event.target.value);
         }}
         label="Pick a Time"
@@ -30,74 +30,75 @@ export const Default = () => {
   );
 };
 
-export const WithASpecificInterval = () => (
-  <Box height="360px">
-    <TimePicker
-      id="intervalTimePicker"
-      name="intervalTimePicker"
-      onChange={() => {}}
-      label="Pick a Time"
-      interval={3600}
-    />
-  </Box>
-);
-
-export const WithMinAndMaxTimes = () => (
-  <Box height="360px">
-    <TimePicker
-      id="startEnd"
-      name="startEnd"
-      onChange={() => {}}
-      label="Pick a Time"
-      startTime={{ hour: 9, minute: 0 }}
-      endTime={{ hour: 15, minute: 31 }}
-    />
-  </Box>
-);
-
-export const WithCustomDateDisplay = () => (
-  <Box height="360px">
-    <TimePicker
-      id="customDate"
-      name="customDate"
-      onChange={() => {}}
-      label="Pick a Time"
-      startTime={{ hour: 9, minute: 0 }}
-      endTime={{ hour: 15, minute: 31 }}
-      dateDisplayOptions={{ hour12: false, hour: '2-digit', minute: '2-digit' }}
-    />
-  </Box>
-);
+export const WithASpecificInterval = () => {
+  const [value, setValue] = useState<string | null>(null);
+  return (
+    <Box>
+      <TimePicker
+        id="intervalTimePicker"
+        name="intervalTimePicker"
+        onChange={(event: ChangeEvent<HTMLSelectElement>) =>
+          setValue(event.target.value)
+        }
+        value={value}
+        label="Pick a Time"
+        interval={3600}
+      />
+    </Box>
+  );
+};
 
-export const WithOpenMenu = () => {
+export const WithMinAndMaxTimes = () => {
   const [value, setValue] = useState<string | null>(null);
   return (
-    <Box height="260px">
+    <Box>
       <TimePicker
-        id="openMenu"
-        name="openMenu"
-        onChange={(event: ChangeEvent<HTMLInputElement>) => {
-          setValue(event.target.value);
-        }}
+        id="startEnd"
+        name="startEnd"
+        onChange={(event: ChangeEvent<HTMLSelectElement>) =>
+          setValue(event.target.value)
+        }
+        value={value}
         label="Pick a Time"
+        startTime={{ hour: 9, minute: 0 }}
+        endTime={{ hour: 15, minute: 31 }}
+      />
+    </Box>
+  );
+};
+
+export const WithCustomDateDisplay = () => {
+  const [value, setValue] = useState<string | null>(null);
+  return (
+    <Box>
+      <TimePicker
+        id="customDate"
+        name="customDate"
+        onChange={(event: ChangeEvent<HTMLSelectElement>) =>
+          setValue(event.target.value)
+        }
         value={value}
-        menuIsOpen
-        interval={3600}
+        label="Pick a Time"
         startTime={{ hour: 9, minute: 0 }}
-        endTime={{ hour: 13, minute: 1 }}
+        endTime={{ hour: 15, minute: 31 }}
+        dateDisplayOptions={{
+          hour12: false,
+          hour: '2-digit',
+          minute: '2-digit',
+        }}
       />
     </Box>
   );
 };
 
 export const HelpText = () => {
-  const [value, setValue] = useState<string>('');
+  const [value, setValue] = useState<string | null>(null);
   return (
-    <Box height="360px">
+    <Box>
       <TimePicker
         id="helpText"
         name="helpText"
-        onChange={(event: ChangeEvent<HTMLInputElement>) => {
+        onChange={(event: ChangeEvent<HTMLSelectElement>) => {
           setValue(event.target.value);
         }}
         label="Pick a Time"
@@ -109,15 +110,15 @@ export const HelpText = () => {
 };
 
 export const Sizes = () => {
-  const [value, setValue] = useState<string>();
-  const [value1, setValue1] = useState<string>();
-  const [value2, setValue2] = useState<string>();
+  const [value, setValue] = useState<string | null>(null);
+  const [value1, setValue1] = useState<string | null>(null);
+  const [value2, setValue2] = useState<string | null>(null);
   return (
-    <Box gap="md" height="360px">
+    <Box gap="md">
       <TimePicker
         id="smTimePicker"
         name="smTimePicker"
-        onChange={(event: ChangeEvent<HTMLInputElement>) => {
+        onChange={(event: ChangeEvent<HTMLSelectElement>) => {
           setValue(event.target.value);
         }}
         label="Small"
@@ -127,7 +128,7 @@ export const Sizes = () => {
       <TimePicker
         id="mdTimePicker"
         name="mdTimePicker"
-        onChange={(event: ChangeEvent<HTMLInputElement>) => {
+        onChange={(event: ChangeEvent<HTMLSelectElement>) => {
           setValue1(event.target.value);
         }}
         label="Medium"
@@ -137,7 +138,7 @@ export const Sizes = () => {
       <TimePicker
         id="lgTimePicker"
         name="lgTimePicker"
-        onChange={(event: ChangeEvent<HTMLInputElement>) => {
+        onChange={(event: ChangeEvent<HTMLSelectElement>) => {
           setValue2(event.target.value);
         }}
         label="Large"

package/src/components/TimePicker/TimePicker.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { screen, render } from '@testing-library/react';
+import { screen, render, fireEvent } from '@testing-library/react';
 import { TimePicker } from './TimePicker';
 
 describe('TimePicker', () => {
@@ -12,8 +12,6 @@ describe('TimePicker', () => {
           onChange={() => null}
           value={null}
           label="Select Time"
-          menuIsOpen
-          maxMenuHeight={2000}
         />
       );
 
@@ -43,8 +41,6 @@ describe('TimePicker', () => {
           onChange={() => null}
           value={null}
           label="Select Time"
-          menuIsOpen
-          maxMenuHeight={2000}
           interval={3600}
           startTime={{ hour: 9, minute: 0 }}
           endTime={{ hour: 12, minute: 0 }}
@@ -65,6 +61,55 @@ describe('TimePicker', () => {
         expect(screen.queryByText(time)).toBe(null);
       });
     });
+
+    it('supports intervals shorter than one minute', () => {
+      render(
+        <TimePicker
+          name="timePicker"
+          id="timePicker"
+          onChange={() => null}
+          value={null}
+          label="Select Time"
+          interval={45}
+          startTime={{ hour: 1, minute: 0 }}
+          endTime={{ hour: 1, minute: 2 }}
+          dateDisplayOptions={{
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+            hour12: false,
+          }}
+        />
+      );
+
+      expect(screen.getByText('01:00:00')).toBeInTheDocument();
+      expect(screen.getByText('01:00:45')).toBeInTheDocument();
+      expect(screen.getByText('01:01:30')).toBeInTheDocument();
+    });
+  });
+
+  describe('Selected value', () => {
+    it('selects a matching time from a previous date', () => {
+      const savedValue = new Date(2020, 0, 1, 13, 0, 0, 123).toISOString();
+      const expectedValue = new Date();
+      expectedValue.setHours(13, 0, 0, 0);
+
+      render(
+        <TimePicker
+          name="timePicker"
+          id="timePicker"
+          onChange={() => null}
+          value={savedValue}
+          label="Select Time"
+          startTime={{ hour: 13, minute: 0 }}
+          endTime={{ hour: 14, minute: 0 }}
+        />
+      );
+
+      expect(screen.getByLabelText('Select Time')).toHaveValue(
+        expectedValue.toISOString()
+      );
+    });
   });
 
   describe('Custom Date Display', () => {
@@ -76,8 +121,6 @@ describe('TimePicker', () => {
           onChange={() => null}
           value={null}
           label="Select Time"
-          menuIsOpen
-          maxMenuHeight={2000}
           dateDisplayOptions={{ hour12: false }}
           startTime={{ hour: 13, minute: 0 }}
           endTime={{ hour: 15, minute: 1 }}
@@ -94,4 +137,30 @@ describe('TimePicker', () => {
       });
     });
   });
+
+  describe('Callback Handling', () => {
+    it('it fires an onchange callback with the correct value', async () => {
+      const mockedHandleChange = jest.fn(() => {}); // eslint-disable-line
+
+      render(
+        <TimePicker
+          name="timePicker"
+          id="timePicker"
+          onChange={mockedHandleChange}
+          value={null}
+          label="Select Time"
+          dateDisplayOptions={{ hour12: false }}
+          startTime={{ hour: 13, minute: 0 }}
+          endTime={{ hour: 15, minute: 1 }}
+          interval={3600}
+        />
+      );
+
+      const timePicker = screen.getByLabelText('Select Time');
+
+      fireEvent.change(timePicker, { target: { value: 'hello' } });
+
+      expect(mockedHandleChange).toBeCalledTimes(1);
+    });
+  });
 });