@hyphen/hyphen-components 7.10.0 → 8.0.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/Toggle/Toggle.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 .item {
   line-height: 1;

package/src/components/ToggleGroup/ToggleGroup.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 .item {
   line-height: 1;

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/styles/display.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables.scss';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 .display-inherit {
   display: inherit;

package/src/styles/flex.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables.scss';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 // min-width and min-height needed because of this
 // https://stackoverflow.com/questions/36247140/why-doesnt-flex-item-shrink-past-content-size

package/src/styles/overflow.scss

@@ -1,3 +1,5 @@
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
+
 .overflow-visible { overflow: visible; }
 .overflow-hidden { overflow: hidden; }
 .overflow-clip { overflow: clip; }

package/src/styles/position.scss

@@ -1,3 +1,5 @@
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
+
 .position-absolute { position: absolute; }
 .position-fixed { position: fixed; }
 .position-relative { position: relative; }

package/src/styles/text-align.scss

@@ -1,3 +1,5 @@
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
+
 .text-align-left { text-align: left; }
 .text-align-right { text-align: right; }
 .text-align-center { text-align: center; }

package/src/styles/utilities.scss

@@ -1,13 +1,14 @@
+@use './animation';
+@use './cursor';
+@use './display';
+@use './flex';
+@use './overflow';
+@use './text-align';
+@use './white-space';
+@use './position';
+@use './transform';
+
 @import '@hyphen/hyphen-design-tokens/build/utilities/utilities.css';
-@import './animation';
-@import './cursor';
-@import './display';
-@import './flex';
-@import './overflow';
-@import './text-align';
-@import './white-space';
-@import './position';
-@import './transform';
 
 .sr-only {
   position: absolute;

package/src/styles/variables/index.scss

@@ -1,3 +1,4 @@
+@use './forms';
+
 @import '@hyphen/hyphen-design-tokens/build/css/variables.css';
 @import '@hyphen/hyphen-design-tokens/build/css/variables-root-dark.css';
-@import './forms';

package/src/styles/white-space.scss

@@ -1,3 +1,5 @@
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
+
 .ws-normal { white-space: normal; }
 .ws-nowrap { white-space: nowrap; }
 .ws-pre { white-space: pre; }

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

package/src/components/TimePickerNative/TimePickerNative.mdx

@@ -1,67 +0,0 @@
-import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
-import { TimePickerNative } from './TimePickerNative';
-import * as Stories from './TimePickerNative.stories';
-
-<Meta of={Stories} />
-
-# TimePickerNative
-
-Use a TimePickerNative when you want users to select from a list of a available times agnostic of date.
-
-_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:_ The value returned will always be a JS ISO date string, like this: `2016-07-13T18:46:01.933Z`.
-
-## Props
-
-<ArgTypes of={TimePickerNative} />
-
-## Default
-
-<Canvas of={Stories.Default} />
-
-## With A Specific Interval
-
-Pass an `interval` (seconds) value to determine how many times get generated as options.
-The example below uses `3600` --> 1 Hour Intervals
-
-<Canvas of={Stories.WithASpecificInterval} />
-
-## With Min and Max Times
-
-You can determine the range of times to be shown by capping the start and end times.
-Use `startTime` and `endTime` for this. The expected values for `hour` and `minute` properties
-are `0-24` and `0-60` respectively.
-
-IMPORTANT: `startTime` is inclusive, and `endTime` is exclusive. This is to avoid
-the options showing the startTime twice when using a 24-hour cycle.
-
-See example below where we want to show 15 minute increments starting at 9:00AM and ending at 3:30PM.
-
-<Canvas of={Stories.WithMinAndMaxTimes} />
-
-## With Custom Date Display
-
-The labels for the dropdwon options are governed by JS `toLocaleTimeString`, and as such
-options are available to customize these.
-
-NOTE: that the option values are always returned as ISO strings regardless of the label display option.
-
-The example below is shown in military (24-hour) time.
-
-<Canvas of={Stories.WithCustomDateDisplay} />
-
-## Help Text
-
-<Canvas of={Stories.HelpText} />
-
-## Sizes
-
-Set the size of the input to `sm`, `md` or `lg`. `md` is the default size.
-
-<Canvas of={Stories.Sizes} />
-
-## Component Design Tokens
-
-This component shares component design tokens with all form controls. For a complete list of tokens, see the [Theming Form Controls documentation](/docs/theming-form-controls--custom-theme-form).

package/src/components/TimePickerNative/TimePickerNative.stories.tsx

@@ -1,150 +0,0 @@
-import type { Meta } from '@storybook/react-vite';
-import React, { ChangeEvent, useState } from 'react';
-import { TimePickerNative } from './TimePickerNative';
-import { Box } from '../Box/Box';
-
-const meta: Meta<typeof TimePickerNative> = {
-  title: 'Components/TimePickerNative',
-  component: TimePickerNative,
-  parameters: {
-    controls: { hideNoControlsWarning: true },
-  },
-};
-
-export default meta;
-
-export const Default = () => {
-  const [value, setValue] = useState<string | null>(null);
-  return (
-    <Box>
-      <TimePickerNative
-        id="defaultTimePickerNative"
-        name="defaultTimePickerNative"
-        onChange={(event: ChangeEvent<HTMLInputElement>) => {
-          setValue(event.target.value);
-        }}
-        label="Pick a Time"
-        value={value}
-      />
-    </Box>
-  );
-};
-
-export const WithASpecificInterval = () => {
-  const [value, setValue] = useState<string | null>(null);
-  return (
-    <Box>
-      <TimePickerNative
-        id="intervalTimePickerNative"
-        name="intervalTimePickerNative"
-        onChange={(event: ChangeEvent<HTMLInputElement>) =>
-          setValue(event.target.value)
-        }
-        value={value}
-        label="Pick a Time"
-        interval={3600}
-      />
-    </Box>
-  );
-};
-
-export const WithMinAndMaxTimes = () => {
-  const [value, setValue] = useState<string | null>(null);
-  return (
-    <Box>
-      <TimePickerNative
-        id="startEnd"
-        name="startEnd"
-        onChange={(event: ChangeEvent<HTMLInputElement>) =>
-          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>
-      <TimePickerNative
-        id="customDate"
-        name="customDate"
-        onChange={(event: ChangeEvent<HTMLInputElement>) =>
-          setValue(event.target.value)
-        }
-        value={value}
-        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 HelpText = () => {
-  const [value, setValue] = useState<string | null>(null);
-  return (
-    <Box>
-      <TimePickerNative
-        id="helpText"
-        name="helpText"
-        onChange={(event: ChangeEvent<HTMLInputElement>) => {
-          setValue(event.target.value);
-        }}
-        label="Pick a Time"
-        value={value}
-        helpText="pick a time, any time..."
-      />
-    </Box>
-  );
-};
-
-export const Sizes = () => {
-  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">
-      <TimePickerNative
-        id="smTimePickerNative"
-        name="smTimePickerNative"
-        onChange={(event: ChangeEvent<HTMLInputElement>) => {
-          setValue(event.target.value);
-        }}
-        label="Small"
-        value={value}
-        size="sm"
-      />
-      <TimePickerNative
-        id="mdTimePickerNative"
-        name="mdTimePickerNative"
-        onChange={(event: ChangeEvent<HTMLInputElement>) => {
-          setValue1(event.target.value);
-        }}
-        label="Medium"
-        value={value1}
-        size="md"
-      />
-      <TimePickerNative
-        id="lgTimePickerNative"
-        name="lgTimePickerNative"
-        onChange={(event: ChangeEvent<HTMLInputElement>) => {
-          setValue2(event.target.value);
-        }}
-        label="Large"
-        value={value2}
-        size="lg"
-      />
-    </Box>
-  );
-};