@hyphen/hyphen-components 2.9.0

package/src/components/ResponsiveProvider/ResponsiveProvider.stories.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { ResponsiveProvider } from './ResponsiveProvider';
+import type { Meta } from '@storybook/react';
+import { useWindowSize } from '../../hooks/useWindowSize/useWindowSize';
+import { useBreakpoint } from '../../hooks/useBreakpoint/useBreakpoint';
+import { Box } from '../Box/Box';
+
+const meta: Meta<typeof ResponsiveProvider> = {
+  title: 'Providers/ResponsiveProvider',
+  component: ResponsiveProvider,
+};
+
+export default meta;
+
+export const BasicUsage = () =>
+  (() => {
+    const App = () => {
+      const { innerWidth, innerHeight, outerWidth, outerHeight } =
+        useWindowSize();
+      return (
+        <Box gap="md">
+          <p>Inner Width: {innerWidth}</p>
+          <p>Inner Height: {innerHeight}</p>
+          <p>Outer Width: {outerWidth}</p>
+          <p>Outer Height: {outerHeight}</p>
+        </Box>
+      );
+    };
+    return (
+      <ResponsiveProvider>
+        <App />
+      </ResponsiveProvider>
+    );
+  })();
+
+export const Breakpoints = () =>
+  (() => {
+    const App = () => {
+      const { isPhone, isTablet, isDesktop, isHd } = useBreakpoint();
+      return (
+        <Box gap="md">
+          <p>phone: {isPhone ? '✅' : '❌'}</p>
+          <p>tablet: {isTablet ? '✅' : '❌'}</p>
+          <p>desktop: {isDesktop ? '✅' : '❌'}</p>
+          <p>hd: {isHd ? '✅' : '❌'}</p>
+        </Box>
+      );
+    };
+    return (
+      <ResponsiveProvider>
+        <App />
+      </ResponsiveProvider>
+    );
+  })();

package/src/components/ResponsiveProvider/ResponsiveProvider.test.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ResponsiveProvider } from './ResponsiveProvider';
+import { useWindowSize } from '../../hooks/useWindowSize/useWindowSize';
+import { useBreakpoint } from '../../hooks/useBreakpoint/useBreakpoint';
+
+describe('Default', () => {
+  test('calls resize when initially mounted', async () => {
+    const mockEventListener = jest.spyOn(window, 'addEventListener');
+    mockEventListener.mockImplementation(() => {}); // eslint-disable-line
+
+    render(
+      <ResponsiveProvider>
+        <div />
+      </ResponsiveProvider>
+    );
+
+    expect(
+      mockEventListener.mock.calls.filter((call) => call[0] === 'resize').length
+    ).toEqual(1);
+  });
+});
+
+describe('Responsive hooks', () => {
+  it('registers one resize handler with useWindowSize', () => {
+    const mockEventListener = jest.spyOn(window, 'addEventListener');
+    mockEventListener.mockImplementation(() => {}); // eslint-disable-line
+
+    const Component = () => {
+      useWindowSize();
+      return <p />;
+    };
+
+    render(
+      <ResponsiveProvider>
+        <Component />
+        <Component />
+        <Component />
+        <Component />
+        <Component />
+      </ResponsiveProvider>
+    );
+    expect(
+      mockEventListener.mock.calls.filter((call) => call[0] === 'resize').length
+    ).toEqual(1);
+  });
+
+  it('registers one resize handler with useBreakpoint', () => {
+    const mockEventListener = jest.spyOn(window, 'addEventListener');
+    mockEventListener.mockImplementation(() => {}); // eslint-disable-line
+
+    const Component = () => {
+      useBreakpoint();
+      return <p />;
+    };
+
+    render(
+      <ResponsiveProvider>
+        <Component />
+        <Component />
+        <Component />
+        <Component />
+        <Component />
+      </ResponsiveProvider>
+    );
+    expect(
+      mockEventListener.mock.calls.filter((call) => call[0] === 'resize').length
+    ).toEqual(1);
+  });
+});

package/src/components/ResponsiveProvider/ResponsiveProvider.tsx

@@ -0,0 +1,73 @@
+import React, { useState, createContext } from 'react';
+import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayouEffect';
+
+export interface ResponsiveContextShape {
+  isCreated: boolean;
+  innerWidth?: number;
+  innerHeight?: number;
+  outerWidth?: number;
+  outerHeight?: number;
+}
+
+export const ResponsiveContext = createContext<ResponsiveContextShape>({
+  isCreated: false,
+});
+
+export interface ResponsiveProviderProps {
+  children?: React.ReactNode;
+  /**
+   * Time (in milliseconds) to delay execution of resize handler. Default is 50.
+   */
+  throttle?: number;
+}
+
+export const ResponsiveProvider: React.FC<ResponsiveProviderProps> = ({
+  children = null,
+  throttle = 50,
+}) => {
+  const [innerWidth, setInnerWidth] = useState(0);
+  const [innerHeight, setInnerHeight] = useState(0);
+  const [outerWidth, setOuterWidth] = useState(0);
+  const [outerHeight, setOuterHeight] = useState(0);
+
+  const handleWindowResize = () => {
+    setInnerWidth(window?.innerWidth ?? 0);
+    setInnerHeight(window?.innerHeight ?? 0);
+    setOuterWidth(window?.outerWidth ?? 0);
+    setOuterHeight(window?.outerHeight ?? 0);
+  };
+
+  useIsomorphicLayoutEffect(() => {
+    // eslint-disable-line consistent-return
+    if (typeof window !== 'undefined') {
+      // Set values on render if window wasn't available for useState initialization.
+      handleWindowResize();
+
+      let timeoutId: any; // eslint-disable-line
+      const throttledResize = () => {
+        // prevent execution of previous setTimeout
+        clearTimeout(timeoutId);
+        // change width from the state object after throttle time has elapsed.
+        timeoutId = setTimeout(handleWindowResize, throttle);
+      };
+
+      window.addEventListener('resize', throttledResize);
+
+      return () => window.removeEventListener('resize', throttledResize);
+    }
+  }, [throttle]);
+
+  return (
+    <ResponsiveContext.Provider
+      value={{
+        innerWidth,
+        innerHeight,
+        outerHeight,
+        outerWidth,
+        isCreated: true,
+      }}
+    >
+      {children}
+    </ResponsiveContext.Provider>
+  );
+};

package/src/components/SelectInput/SelectInput.mdx

@@ -0,0 +1,115 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import { SelectInput } from './SelectInput';
+import * as Stories from './SelectInput.stories';
+
+<Meta of={Stories} />
+
+# SelectInput
+
+Allows users to pick a value from a predefined list of options. Ideally, it should be used when there are 5 or more options, otherwise you should consider using a radio group instead.
+
+_NOTE:_ This component is build on top of `react-select` and as such you can use any available prop from that component here as well. For a full list
+of react-select props, [Click Here](https://react-select.com/props).
+
+## Props
+
+<ArgTypes of={SelectInput} />
+
+## Default
+
+All that is required to render a basic version of the SelectInput is a unique `id`, a `label`, a list of options passed to the `options` prop, a `value`, and an onchange event handler passed to the `onChange` prop.
+
+<Canvas of={Stories.Default} />
+
+## Pre-Selected
+
+Pre-select an option by passing its value to the `value` prop.
+
+<Canvas of={Stories.PreSelected} />
+
+## Help Text
+
+Use the `helpText` prop to add clarifying text beneath the input label.
+
+<Canvas of={Stories.HelpText} />
+
+## Placeholder
+
+Use the `placeholder` prop to add a custom placeholder.
+
+<Canvas of={Stories.Placeholder} />
+
+## Hidden Label
+
+Use the `hideLabel` prop to not render the label.
+
+<Canvas of={Stories.HiddenLabel} />
+
+## Multi-Select
+
+Use the `isMulti` prop to allow the selection of multiple options.
+
+<Canvas of={Stories.MultiSelect} />
+
+## Multi-Select and Pre-Selected
+
+Use the `isMulti` prop combined with passing one or more options in an array to the `value` prop to pre-select option(s).
+
+<Canvas of={Stories.MultiSelectAndPreSelected} />
+
+## Autofocus
+
+Use the `autoFocus` prop to autofocus a SelectInput.
+
+<Canvas of={Stories.Autofocus} />
+
+## Required
+
+Use the `isRequired` prop to mark the input as required.
+
+<Canvas of={Stories.Required} />
+
+## Disabled
+
+Use the `isDisabled` prop to mark the input as disabled.
+
+<Canvas of={Stories.Disabled} />
+
+## Clearable
+
+Use the `isClearable` prop to allow clearing of the input selected option. NOTE: this works by passing `null`
+to the `onChange` handler.
+
+<Canvas of={Stories.Clearable} />
+
+## Error
+
+Use the `error` prop to mark the input as invalid. `error` accepts a `boolean`, `string`, or `node`. If either a `string` or `node` is passed, a validation message is displayed below it.
+
+<Canvas of={Stories.Error} />
+
+## Sizes
+
+Set the size of the input to `sm`, `md` or `lg`. `md` is the default size.
+The `size` prop is also a `ResponsiveProp`, so it can be sized differently at each [breakpoint](?path=/docs/design-tokens-design-tokens--page#breakpoints) by passing an object.
+
+<Canvas of={Stories.Sizes} />
+
+## With Portal
+
+In many cases it is helpful to render the select dropdown in a portal to avoid cutoff from a smaller container.
+We maintain the react-select API here where the `menuPortalTarget` prop is used. This is a ref to the element
+being portaled to. In the example below we would see our dropdown menu be cutoff by the storybook story container,
+if we did not portal it to the body element.
+
+<Canvas of={Stories.WithPortal} />
+
+## Custom Classes
+
+Use the `className` prop to add a custom class, or classes to an input.
+
+<Canvas of={Stories.CustomClasses} />
+
+## 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/SelectInput/SelectInput.module.scss

@@ -0,0 +1,357 @@
+@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+// 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 {
+  padding: 0;
+  padding-right: 2px;
+  color: var(
+    --form-control-icon-color,
+    var(--INTERNAL_form-control-icon-color)
+  );
+
+  &:hover {
+    color: var(
+      --form-control-icon-color-hover,
+      var(--INTERNAL_form-control-icon-color-hover)
+    );
+  }
+}
+
+%react-select-icon {
+  @include react-select-icon;
+}
+
+.react-select-icon {
+  @extend %react-select-icon;
+}
+
+// stylelint-disable
+@mixin size-sm {
+  :global(.react-select__control) {
+    border-radius: var(
+      --form-control-size-sm-border-radius,
+      var(--INTERNAL_form-control-size-sm-border-radius)
+    );
+    padding: 0 8px;
+    min-height: 32px;
+  }
+
+  :global(.react-select__option),
+  :global(.react-select__placeholder),
+  :global(.react-select__single-value) {
+    font-size: var(
+      --form-control-size-sm-font-size,
+      var(--INTERNAL_form-control-size-sm-font-size)
+    );
+  }
+
+  :global(.react-select__multi-value__label) {
+    font-size: var(
+      --form-control-size-sm-font-size,
+      var(--INTERNAL_form-control-size-sm-font-size)
+    );
+  }
+
+  :global(.react-select__dropdown-indicator) {
+    padding: 0;
+  }
+
+  :global(.react-select__dropdown-indicator) {
+    @include react-select-icon;
+
+    svg {
+      width: var(
+        --form-control-select-sm-icon-size,
+        var(--INTERNAL_form-control-select-sm-icon-size)
+      );
+      height: var(
+        --form-control-select-sm-icon-size,
+        var(--INTERNAL_form-control-select-sm-icon-size)
+      );
+    }
+  }
+}
+
+%size-sm {
+  @include size-sm;
+}
+
+.size-sm {
+  @extend %size-sm;
+}
+
+@mixin size-md {
+  :global(.react-select__control) {
+    border-radius: var(
+      --form-control-size-md-border-radius,
+      var(--INTERNAL_form-control-size-md-border-radius)
+    );
+    padding: 4px 8px;
+  }
+
+  :global(.react-select__single-value) {
+    font-size: var(
+      --form-control-size-md-font-size,
+      var(--INTERNAL_form-control-size-md-font-size)
+    );
+  }
+
+  :global(.react-select__multi-value__label) {
+    font-size: var(
+      --form-control-size-md-font-size,
+      var(--INTERNAL_form-control-size-md-font-size)
+    );
+  }
+
+  :global(.react-select__dropdown-indicator) {
+    padding: 0;
+  }
+
+  :global(.react-select__dropdown-indicator) {
+    @include react-select-icon;
+
+    svg {
+      width: var(
+        --form-control-select-md-icon-size,
+        var(--INTERNAL_form-control-select-md-icon-size)
+      );
+      height: var(
+        --form-control-select-md-icon-size,
+        var(--INTERNAL_form-control-select-md-icon-size)
+      );
+    }
+  }
+}
+
+%size-md {
+  @include size-md;
+}
+
+.size-md {
+  @extend %size-md;
+}
+
+@mixin size-lg {
+  :global(.react-select__control) {
+    padding: 9px 8px 10px;
+    border-radius: var(
+      --form-control-size-md-border-radius,
+      var(--INTERNAL_form-control-size-md-border-radius)
+    );
+  }
+
+  :global(.react-select__option),
+  :global(.react-select__placeholder),
+  :global(.react-select__single-value) {
+    font-size: var(
+      --form-control-size-lg-font-size,
+      var(--INTERNAL_form-control-size-lg-font-size)
+    );
+  }
+
+  :global(.react-select__multi-value__label) {
+    font-size: var(
+      --form-control-size-lg-font-size,
+      var(--INTERNAL_form-control-size-lg-font-size)
+    );
+    padding: 2px 6px 3px;
+  }
+
+  :global(.react-select__dropdown-indicator) {
+    padding: 0;
+  }
+
+  :global(.react-select__dropdown-indicator) {
+    @include react-select-icon;
+
+    svg {
+      width: var(
+        --form-control-select-md-icon-size,
+        var(--INTERNAL_form-control-select-md-icon-size)
+      );
+      height: var(
+        --form-control-select-md-icon-size,
+        var(--INTERNAL_form-control-select-md-icon-size)
+      );
+    }
+  }
+}
+
+%size-lg {
+  @include size-lg;
+}
+
+.size-lg {
+  @extend %size-lg;
+}
+
+:global(.select-input-wrapper) {
+  font-family: var(
+    --form-control-font-family,
+    var(--INTERNAL_form-control-font-family)
+  );
+
+  :global(.react-select) {
+    &:hover {
+      :global(.react-select__dropdown-indicator) {
+        color: var(
+          --form-control-border-color-focus,
+          var(--INTERNAL_form-control-border-color-focus)
+        );
+      }
+    }
+
+    :global(.react-select__control) {
+      line-height: var(
+        --form-control-line-height,
+        var(--INTERNAL_form-control-line-height)
+      );
+      border-color: var(
+        --form-control-border-color,
+        var(--INTERNAL_form-control-border-color)
+      );
+      background-color: var(
+        --form-control-background-color,
+        var(--INTERNAL_form-control-background-color)
+      );
+
+      :global(.react-select__value-container) {
+        padding: 0;
+      }
+
+      :global(.react-select__placeholder) {
+        color: var(
+          --form-control-placeholder-color,
+          var(--INTERNAL_form-control-placeholder-color)
+        );
+      }
+
+      :global(.react-select__clear-indicator) {
+        padding: 7px;
+      }
+
+      :global(.react-select__indicator-separator) {
+        display: none;
+      }
+
+      :global(.react-select__clear-indicator) {
+        @extend .react-select-icon;
+
+        margin-right: var(
+          --form-control-select-clear-icon-margin,
+          var(--INTERNAL_form-control-select-clear-icon-margin)
+        );
+      }
+
+      &:global(.react-select__control--is-focused) {
+        border: 1px solid var(--color-border-active);
+        box-shadow: var(
+          --form-control-box-shadow,
+          var(--INTERNAL_form-control-box-shadow-focus)
+        );
+      }
+
+      &:global(.react-select__control--is-disabled) {
+        :global(.react-select__dropdown-indicator) {
+          color: var(
+            --form-control-placeholder-color,
+            var(--INTERNAL_form-control-placeholder-color)
+          );
+        }
+      }
+    }
+
+    :global(.react-select__menu) {
+      z-index: var(--size-z-index-popover);
+    }
+
+    &.error {
+      :global(.react-select__control) {
+        border-color: var(
+          --form-control-border-color-error,
+          var(--INTERNAL_form-control-border-color-error)
+        );
+        background-color: var(
+          --form-control-background-color-error,
+          var(--INTERNAL_form-control-background-color-error)
+        );
+
+        &:global(.react-select__control--is-focused) {
+          outline: none;
+          border-color: var(
+            --form-control-border-color,
+            var(--INTERNAL_form-control-border-color)
+          );
+          background-color: var(
+            --form-control-background-color,
+            var(--INTERNAL_form-control-background-color)
+          );
+        }
+      }
+    }
+  }
+
+  &.size-sm {
+    @extend %size-sm;
+  }
+  &.size-md {
+    @extend %size-md;
+  }
+  &.size-lg {
+    @extend %size-lg;
+  }
+
+  @media (min-width: $size-breakpoint-tablet) {
+    &.size-sm-tablet {
+      @include size-sm;
+    }
+    &.size-md-tablet {
+      @include size-md;
+    }
+    &.size-lg-tablet {
+      @include size-lg;
+    }
+  }
+
+  @media (min-width: $size-breakpoint-desktop) {
+    &.size-sm-desktop {
+      @include size-sm;
+    }
+    &.size-md-desktop {
+      @include size-md;
+    }
+    &.size-lg-desktop {
+      @include size-lg;
+    }
+  }
+
+  @media (min-width: $size-breakpoint-hd) {
+    &.size-sm-hd {
+      @include size-sm;
+    }
+    &.size-md-hd {
+      @include size-md;
+    }
+    &.size-lg-hd {
+      @include size-lg;
+    }
+  }
+
+  &.disabled {
+    :global(.react-select__control--is-disabled) {
+      background-color: var(
+        --form-control-background-color-disabled,
+        var(--INTERNAL_form-control-background-color-disabled)
+      );
+    }
+  }
+}
+// stylelint-enable
+
+// while we try to avoid important statements, this one is necessary to override bootstrap utilities that are currently in use by some of our teams
+.select-input-label {
+  margin-bottom: var(
+    --form-control-label-margin,
+    var(--INTERNAL_form-control-label-margin)
+  ) !important;
+}