@hyphen/hyphen-components 7.10.0 → 8.0.0

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);
+    });
+  });
 });

package/src/components/TimePicker/TimePicker.tsx

@@ -1,7 +1,11 @@
 import React, { FC } from 'react';
-import { SelectInput, SelectInputProps } from '../SelectInput/SelectInput';
+import {
+  SelectInputNative,
+  SelectInputNativeProps,
+} from '../SelectInputNative/SelectInputNative';
 
-export type TimePickerProps = Omit<SelectInputProps, 'options'> & {
+export interface TimePickerProps
+  extends Omit<SelectInputNativeProps, 'options'> {
   /**
    * Options to govern the display of the option labels in the select.
    * This is a direct passthrough to the second argument of JS `toLocaleTimeString`.
@@ -26,7 +30,11 @@ export type TimePickerProps = Omit<SelectInputProps, 'options'> & {
    * Start hour and minute
    */
   startTime?: { hour: number; minute: number };
-};
+  /**
+   *  Should be ISO timestamp as returned by `onChange`, and matching value of option object.
+   */
+  value: SelectInputNativeProps['value'];
+}
 
 export const TimePicker: FC<TimePickerProps> = ({
   id,
@@ -62,22 +70,44 @@ export const TimePicker: FC<TimePickerProps> = ({
         value: currentTime.toISOString(),
         label: currentTime.toLocaleTimeString(locales, dateDisplayOptions),
       });
-      currentTime.setSeconds(first.getSeconds() + interval);
+      currentTime.setSeconds(currentTime.getSeconds() + interval);
     }
 
     return timeOptions;
   };
 
+  const options = generateTimes();
+  let valueDate: Date | undefined;
+
+  if (typeof value === 'string') {
+    valueDate = new Date(value);
+  } else if (typeof value === 'number') {
+    valueDate = new Date(value);
+  }
+
+  const matchingOption =
+    valueDate && !Number.isNaN(valueDate.getTime())
+      ? options.find(({ value: optionValue }) => {
+          const optionDate = new Date(optionValue);
+
+          return (
+            optionDate.getHours() === valueDate.getHours() &&
+            optionDate.getMinutes() === valueDate.getMinutes() &&
+            optionDate.getSeconds() === valueDate.getSeconds()
+          );
+        })
+      : undefined;
+
   return (
-    <SelectInput
+    <SelectInputNative
       {...restProps}
       id={id}
       name={name}
       label={label}
       onChange={onChange}
-      options={generateTimes()}
+      options={options}
       placeholder={placeholder}
-      value={value}
+      value={matchingOption?.value ?? value}
     />
   );
 };

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -45,7 +45,7 @@ export const BadgeTooltip = () => (
   <TooltipProvider delayDuration={100}>
     <Tooltip>
       <TooltipTrigger asChild>
-        <Badge as="button" variant="blue">
+        <Badge as="button" color="blue">
           hover
         </Badge>
       </TooltipTrigger>

package/src/docs/Colors.mdx

@@ -54,6 +54,19 @@ import designTokens from '@hyphen/hyphen-design-tokens/build/json/variables.json
       {}
     )}
   />
+  <ColorItem
+    title="color-base-orange"
+    subtitle="Orange"
+    colors={Object.keys(designTokens.color.base.orange).reduce(
+      (acc, item, i) => {
+        acc[item] = Object.keys(designTokens.color.base.orange).map(
+          (g) => designTokens.color.base.orange[g].value
+        )[i];
+        return acc;
+      },
+      {}
+    )}
+  />
   <ColorItem
     title="color-base-green"
     subtitle="Green"

package/src/index.ts

@@ -23,7 +23,6 @@ export * from './components/Formik/FormikSelectInputNative/FormikSelectInputNati
 export * from './components/Formik/FormikTextInput/FormikTextInput';
 export * from './components/Formik/FormikTextareaInput/FormikTextareaInput';
 export * from './components/Formik/FormikTimePicker/FormikTimePicker';
-export * from './components/Formik/FormikTimePickerNative/FormikTimePickerNative';
 export * from './components/Formik/FormikSwitch/FormikSwitch';
 export * from './components/Formik/FormikToggleGroup/FormikToggleGroup';
 export * from './components/Formik/FormikToggleGroupMulti/FormikToggleGroupMulti';
@@ -49,7 +48,6 @@ export * from './components/TextInput/TextInput';
 export * from './components/TextInputInset/TextInputInset';
 export * from './components/ThemeProvider/ThemeProvider';
 export * from './components/TimePicker/TimePicker';
-export * from './components/TimePickerNative/TimePickerNative';
 export * from './components/Toast';
 export * from './components/Toggle/Toggle';
 export * from './components/ToggleGroup/ToggleGroup';

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

@@ -1,175 +0,0 @@
-import React from 'react';
-import { render, fireEvent, screen, waitFor } from '@testing-library/react';
-import { Formik, Form, Field, FormikValues, getIn, setIn } from 'formik';
-import { FormikTimePickerNative } from './FormikTimePickerNative';
-
-const testLabelName = 'test select';
-
-const handleValidation = (testValueKey: string) => (values: FormikValues) =>
-  getIn(values, testValueKey)?.length > 1
-    ? {}
-    : setIn({}, testValueKey, 'input is required');
-
-const renderForm = (
-  initialValue: any, // eslint-disable-line
-  props: {
-    placeholder?: string;
-    hideLabel?: boolean;
-    isRequired?: unknown;
-    isDisabled?: boolean;
-    onChange?: jest.Mock<void, [React.ChangeEvent<HTMLSelectElement>]>; // eslint-disable-line
-    interval?: number;
-  },
-  testValueKey = testLabelName
-) => (
-  <Formik
-    initialValues={{
-      [testLabelName]: initialValue,
-    }}
-    validate={props.isRequired ? handleValidation(testValueKey) : undefined} // eslint-disable-line
-    onSubmit={() => {}} // eslint-disable-line
-  >
-    {() => (
-      <Form noValidate>
-        <Field
-          label={testValueKey}
-          name={testValueKey}
-          id={testValueKey}
-          component={FormikTimePickerNative}
-          {...props}
-        />
-        <button type="submit">submit</button>
-      </Form>
-    )}
-  </Formik>
-);
-
-describe('FormikTimePickerNative', () => {
-  describe('States', () => {
-    describe('Hidden label, with a placeholder', () => {
-      test('it renders input without a visual label, and with a placeholder', () => {
-        render(
-          renderForm(undefined, {
-            placeholder: 'Test Placeholder',
-            hideLabel: true,
-          })
-        );
-        expect(screen.queryByText(testLabelName)).toBeNull();
-        expect(screen.getByText('Test Placeholder')).toBeInTheDocument();
-      });
-    });
-
-    describe('No Aria-labelledby', () => {
-      test('does not assign "aria-labelledby" attribute when a label is hidden', () => {
-        render(renderForm(undefined, { hideLabel: true }));
-        const inputElement = screen.getByLabelText(testLabelName);
-        expect(inputElement).not.toHaveAttribute('aria-labelledby');
-      });
-    });
-
-    describe('With a label, and no custom placeholder', () => {
-      test('it renders input with a label, and with a default placeholder', () => {
-        render(renderForm(undefined, {}));
-
-        expect(screen.getByLabelText(testLabelName)).toBeInTheDocument();
-        expect(screen.getByText('HH:MM')).toBeInTheDocument();
-      });
-
-      test('assigns the "aria-labelledby" attribute and renders label with correct id, when label is provided', () => {
-        render(renderForm(undefined, {}));
-        const inputElement = screen.getByLabelText(testLabelName);
-        expect(inputElement).toHaveAttribute(
-          'aria-labelledby',
-          `${testLabelName}Label`
-        );
-        expect(
-          document.getElementById(`${testLabelName}Label`)
-        ).toBeInTheDocument();
-      });
-    });
-
-    describe('Single select, pre-selected', () => {
-      test('it renders with value pre-selected', () => {
-        render(renderForm('2020-10-23T04:30:00.120Z', {}));
-
-        expect(screen.getByText('12:00 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', () => {
-        render(renderForm(undefined, { isDisabled: true }));
-
-        expect(screen.getByLabelText(testLabelName)).toBeDisabled();
-      });
-    });
-
-    describe('Is Invalid, with a helpful message', () => {
-      test('it renders the helpful message', async () => {
-        const { getByText } = render(
-          renderForm(undefined, { isRequired: true })
-        );
-        const submitButton = getByText('submit');
-
-        fireEvent.click(submitButton);
-        await waitFor(() =>
-          expect(screen.getByText('input is required')).toBeInTheDocument()
-        );
-      });
-
-      test('it renders the error message from nested object', async () => {
-        const { getByText } = render(
-          renderForm(
-            { outer: { nested: [] } },
-            { isRequired: true },
-            `${testLabelName}.outer.nested`
-          )
-        );
-        const submitButton = getByText('submit');
-
-        fireEvent.click(submitButton);
-        await waitFor(() =>
-          expect(screen.getByText('input is required')).toBeInTheDocument()
-        );
-      });
-    });
-  });
-
-  describe('Callback Handling', () => {
-    describe('onChange', () => {
-      test("Custom onChange event fires callback function, overwriting Formik's onChange", async () => {
-        let value: string | undefined;
-        const mockedHandleChange = jest.fn((event) => {
-          event.persist();
-        });
-
-        const { getByLabelText } = render(
-          renderForm(value, { onChange: mockedHandleChange })
-        );
-        const selectInput = getByLabelText(testLabelName);
-        fireEvent.change(selectInput, { target: { value: 'hello' } });
-        expect(mockedHandleChange).toHaveBeenCalledTimes(1);
-      });
-
-      test('it fires onChange callback on change', async () => {
-        const mockedHandleChange = jest.fn();
-
-        const { getByLabelText } = render(
-          renderForm(undefined, { onChange: mockedHandleChange })
-        );
-
-        await fireEvent.change(getByLabelText(testLabelName));
-
-        expect(mockedHandleChange).toBeCalledTimes(1);
-      });
-    });
-  });
-});

package/src/components/Formik/FormikTimePickerNative/FormikTimePickerNative.tsx

@@ -1,38 +0,0 @@
-import React, { FC } from 'react';
-import {
-  FormikTouched,
-  FormikErrors,
-  FormikValues,
-  FieldAttributes,
-  getIn,
-} from 'formik';
-import {
-  TimePickerNative,
-  TimePickerNativeProps,
-} from '../../TimePickerNative/TimePickerNative';
-
-export interface FormikTimePickerNativeProps
-  extends Omit<TimePickerNativeProps, 'onChange'> {
-  field: FieldAttributes<HTMLTextAreaElement>;
-  form: {
-    touched: FormikTouched<FormikValues>;
-    errors: FormikErrors<FormikValues>;
-  };
-  onChange: TimePickerNativeProps['onChange'];
-}
-
-export const FormikTimePickerNative: FC<FormikTimePickerNativeProps> = ({
-  field: { name, onBlur, onChange: formikOnChange, value },
-  form: { touched, errors },
-  onChange,
-  ...props
-}) => (
-  <TimePickerNative
-    {...props}
-    name={name}
-    onBlur={onBlur}
-    onChange={onChange ?? formikOnChange}
-    value={value}
-    error={getIn(touched, name) && getIn(errors, name)}
-  />
-);