@nypl/design-system-react-components 0.26.1 → 1.0.0

package/src/components/Select/Select.stories.mdx

@@ -11,19 +11,8 @@ import { withDesign } from "storybook-addon-designs";
 import Button from "../Button/Button";
 import Form, { FormField } from "../Form/Form";
 import Select from "./Select";
-import { SelectTypes, LabelPositions } from "./SelectTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
-import { getStorybookEnumValues } from "../../utils/utils";
-
-export const selectTypesEnumValues = getStorybookEnumValues(
-  SelectTypes,
-  "SelectTypes"
-);
-export const labelPositionsEnumValues = getStorybookEnumValues(
-  LabelPositions,
-  "LabelPositions"
-);
 
 <Meta
   title={getCategory("Select")}
@@ -49,9 +38,7 @@ export const labelPositionsEnumValues = getStorybookEnumValues(
       table: { defaultValue: { summary: false } },
     },
     labelPosition: {
-      control: { type: "select" },
-      table: { defaultValue: { summary: "LabelPositions.Default" } },
-      options: labelPositionsEnumValues.options,
+      table: { defaultValue: { summary: "default" } },
     },
     name: { control: false },
     key: { table: { disable: true } },
@@ -68,7 +55,7 @@ export const labelPositionsEnumValues = getStorybookEnumValues(
     },
     selectType: {
       control: false,
-      table: { defaultValue: { summary: "SelectTypes.Default" } },
+      table: { defaultValue: { summary: "default" } },
     },
     value: { control: false },
   }}
@@ -79,7 +66,7 @@ export const labelPositionsEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.7.0`    |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -115,22 +102,19 @@ is left blank, a value will be generated for you.
       isDisabled: false,
       isInvalid: false,
       isRequired: false,
-      labelPosition: "LabelPositions.Default",
+      labelPosition: "default",
       labelText: "What is your favorite color?",
       name: "color",
       onChange: undefined,
       showHelperInvalidText: undefined,
       showLabel: true,
       showRequiredLabel: true,
-      selectType: SelectTypes.Default,
+      selectType: "default",
       value: undefined,
     }}
   >
     {(args) => (
-      <Select
-        {...args}
-        labelPosition={labelPositionsEnumValues.getValue(args.labelPosition)}
-      >
+      <Select {...args}>
         <option value="red">Red</option>
         <option value="green">Green</option>
         <option value="blue">Blue</option>
@@ -248,10 +232,11 @@ can be used to show or hide the "Required" text within the `label` element.
       </Select>
       <Select
         helperText="Display the label inline"
+        id="label-example5"
         isRequired
         labelText="What is your favorite color?"
         name="color"
-        labelPosition={LabelPositions.Inline}
+        labelPosition="inline"
       >
         <option value="red">Red</option>
         <option value="green">Green</option>
@@ -309,9 +294,9 @@ can be used to show or hide the "Required" text within the `label` element.
 
 ### Controlled Component using `value` and `onChange` props
 
-If your application uses controlled React components and the Reservoir Design 
+If your application uses controlled React components and the Reservoir Design
 System (DS) `Select` component must be controlled, you can pass and extract the
-value through the `value` and `onChange` props. This will be called every time 
+value through the `value` and `onChange` props. This will be called every time
 a new `option` value is selected.
 
 Try it out: open up the browser's console to see new values being logged on

package/src/components/Select/Select.test.tsx

@@ -4,7 +4,6 @@ import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
 import Select from "./Select";
-import { LabelPositions } from "./SelectTypes";
 
 const baseProps = {
   helperText: "This is the helper text.",
@@ -178,23 +177,23 @@ describe("Select", () => {
       </Select>
     );
 
-    expect(selectRef.current.value).toEqual("red");
+    expect(selectRef.current?.value).toEqual("red");
 
     fireEvent.change(screen.getByRole("combobox"), {
       target: { value: "blue" },
     });
-    expect(selectRef.current.value).toEqual("blue");
+    expect(selectRef.current?.value).toEqual("blue");
 
     fireEvent.change(screen.getByRole("combobox"), {
       target: { value: "white" },
     });
-    expect(selectRef.current.value).toEqual("white");
+    expect(selectRef.current?.value).toEqual("white");
   });
 
   it("calls the onChange callback function", () => {
     let value = "";
-    const changeCallback = (e) => {
-      value = e.target.value;
+    const changeCallback = (e: React.FormEvent) => {
+      value = (e.target as HTMLInputElement).value;
     };
     render(
       <Select {...baseProps} onChange={changeCallback} value={value}>
@@ -300,7 +299,7 @@ describe("Select", () => {
         <Select
           id="select"
           isRequired
-          labelPosition={LabelPositions.Inline}
+          labelPosition="inline"
           labelText="Which Succession sibling are you?"
           name="succession-sibling"
         >

package/src/components/Select/Select.tsx

@@ -10,12 +10,12 @@ import HelperErrorText, {
   HelperErrorTextType,
 } from "../HelperErrorText/HelperErrorText";
 import Icon from "../Icons/Icon";
-import { IconNames, IconSizes } from "../Icons/IconTypes";
 import Label from "../Label/Label";
-import { SelectTypes, LabelPositions } from "./SelectTypes";
+import { AriaAttributes } from "../../utils/interfaces";
+
+export type SelectTypes = "default" | "searchbar";
+export type LabelPositions = "default" | "inline";
 export interface SelectProps {
-  /** Optionally pass in additional Chakra-based styles. */
-  additionalStyles?: { [key: string]: any };
   /** A class name for the `div` parent element. */
   className?: string;
   /** Optional string to populate the `HelperErrorText` for the standard state. */
@@ -69,7 +69,6 @@ export const Select = chakra(
   React.forwardRef<HTMLSelectElement, React.PropsWithChildren<SelectProps>>(
     (props: React.PropsWithChildren<SelectProps>, ref?) => {
       const {
-        additionalStyles = {},
         children,
         className,
         helperText,
@@ -78,36 +77,37 @@ export const Select = chakra(
         isDisabled = false,
         isInvalid = false,
         isRequired = false,
-        labelPosition = LabelPositions.Default,
+        labelPosition = "default",
         labelText,
         name,
         onChange,
         placeholder,
-        selectType = SelectTypes.Default,
+        selectType = "default",
         showHelperInvalidText = true,
         showLabel = true,
         showRequiredLabel = true,
         value = "",
         ...rest
       } = props;
-      const ariaAttributes = {};
+      const ariaAttributes: AriaAttributes = {};
       const [labelWidth, setLabelWidth] = useState<number>(0);
-      const labelRef = useRef<HTMLInputElement>();
+      const labelRef = useRef<HTMLDivElement>(null);
       const styles = useMultiStyleConfig("CustomSelect", {
         variant: selectType,
         labelPosition,
-        labelWidth,
       });
       const finalInvalidText = invalidText
         ? invalidText
         : "There is an error related to this field.";
-      const footnote: HelperErrorTextType = isInvalid
-        ? finalInvalidText
-        : helperText;
+      const footnote = isInvalid ? finalInvalidText : helperText;
       // To control the `Select` component, both `onChange` and `value`
       // must be passed.
       const controlledProps = onChange ? { onChange, value } : {};
 
+      // The number of pixels between the label and select elements
+      // when the labelPosition is inline (equivalent to --nypl-space-xs).
+      const labelSelectGap = 8;
+
       if (!showLabel) {
         ariaAttributes["aria-label"] =
           labelText && footnote ? `${labelText} - ${footnote}` : labelText;
@@ -122,21 +122,19 @@ export const Select = chakra(
       }
 
       useEffect(() => {
-        if (labelPosition === LabelPositions.Inline) {
+        if (labelPosition === "inline") {
           if (labelRef.current) {
-            const width = labelRef.current.clientWidth + 8;
+            const width = labelRef.current.clientWidth + labelSelectGap;
             setLabelWidth(width);
           }
+        } else {
+          setLabelWidth(0);
         }
       }, [labelPosition]);
 
       return (
-        <Box
-          className={className}
-          __css={{ ...styles, ...additionalStyles }}
-          {...rest}
-        >
-          <Box __css={labelPosition === LabelPositions.Inline && styles.inline}>
+        <Box className={className} __css={styles} {...rest}>
+          <Box __css={labelPosition === "inline" && styles.inline}>
             {showLabel && (
               <Box ref={labelRef}>
                 <Label
@@ -160,25 +158,20 @@ export const Select = chakra(
               ref={ref}
               {...controlledProps}
               {...ariaAttributes}
-              icon={
-                <Icon
-                  id={`${id}-icon`}
-                  name={IconNames.Arrow}
-                  size={IconSizes.Medium}
-                />
-              }
+              icon={<Icon id={`${id}-icon`} name="arrow" size="medium" />}
               __css={styles.select}
             >
               {children}
             </ChakraSelect>
-            {footnote && showHelperInvalidText && (
-              <HelperErrorText
-                id={`${id}-helperText`}
-                isInvalid={isInvalid}
-                text={footnote}
-              />
-            )}
           </Box>
+          {footnote && showHelperInvalidText && (
+            <HelperErrorText
+              id={`${id}-helperText`}
+              isInvalid={isInvalid}
+              text={footnote}
+              ml={{ sm: "auto", md: `${labelWidth}px` }}
+            />
+          )}
         </Box>
       );
     }

package/src/components/Select/__snapshots__/Select.test.tsx.snap

@@ -280,19 +280,19 @@ exports[`Select Renders the UI snapshot correctly 3`] = `
         </svg>
       </div>
     </div>
-    <div
-      aria-atomic={true}
-      aria-live="polite"
-      className="css-1xdhyk6"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "Tom doesn't count as a sibling :(.",
-        }
-      }
-      data-isinvalid={true}
-      id="select-helperText"
-    />
   </div>
+  <div
+    aria-atomic={true}
+    aria-live="polite"
+    className="css-1mpebub"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "Tom doesn't count as a sibling :(.",
+      }
+    }
+    data-isinvalid={true}
+    id="select-helperText"
+  />
 </div>
 `;
 
@@ -387,19 +387,19 @@ exports[`Select Renders the UI snapshot correctly 4`] = `
         </svg>
       </div>
     </div>
-    <div
-      aria-atomic={true}
-      aria-live="off"
-      className="css-1xdhyk6"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "Remember, Logan will judge you no matter who you pick.",
-        }
-      }
-      data-isinvalid={false}
-      id="select-helperText"
-    />
   </div>
+  <div
+    aria-atomic={true}
+    aria-live="off"
+    className="css-1mpebub"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "Remember, Logan will judge you no matter who you pick.",
+      }
+    }
+    data-isinvalid={false}
+    id="select-helperText"
+  />
 </div>
 `;
 

package/src/components/SkeletonLoader/SkeletonLoader.stories.mdx

@@ -10,19 +10,7 @@ import { withDesign } from "storybook-addon-designs";
 
 import SimpleGrid from "../Grid/SimpleGrid";
 import SkeletonLoader from "./SkeletonLoader";
-import { SkeletonLoaderImageRatios } from "./SkeletonLoaderTypes";
-import { LayoutTypes } from "../../helpers/enums";
 import { getCategory } from "../../utils/componentCategories";
-import { getStorybookEnumValues } from "../../utils/utils";
-
-export const imageRatiosEnumValues = getStorybookEnumValues(
-  SkeletonLoaderImageRatios,
-  "SkeletonLoaderImageRatios"
-);
-export const layoutsEnumValues = getStorybookEnumValues(
-  LayoutTypes,
-  "LayoutTypes"
-);
 
 <Meta
   title={getCategory("SkeletonLoader")}
@@ -40,16 +28,13 @@ export const layoutsEnumValues = getStorybookEnumValues(
     contentSize: { table: { defaultValue: { summary: "3" } } },
     headingSize: { table: { defaultValue: { summary: "1" } } },
     imageAspectRatio: {
-      control: { type: "select" },
       table: {
-        defaultValue: { summary: "SkeletonLoaderImageRatios.Square" },
+        defaultValue: { summary: "square" },
       },
-      options: imageRatiosEnumValues.options,
     },
     isBordered: { table: { defaultValue: { summary: "false" } } },
     layout: {
-      table: { defaultValue: { summary: "LayoutTypes.Column" } },
-      options: layoutsEnumValues.options,
+      table: { defaultValue: { summary: "column" } },
     },
     showButton: { table: { defaultValue: { summary: "false" } } },
     showContent: { table: { defaultValue: { summary: "true" } } },
@@ -63,7 +48,7 @@ export const layoutsEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.17.3`   |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -92,9 +77,9 @@ to better view the example. The default value is `100%`.
       className: undefined,
       contentSize: 3,
       headingSize: 1,
-      imageAspectRatio: "SkeletonLoaderImageRatios.Square",
+      imageAspectRatio: "square",
       isBordered: false,
-      layout: "LayoutTypes.Column",
+      layout: "column",
       showButton: false,
       showContent: true,
       showHeading: true,
@@ -102,13 +87,7 @@ to better view the example. The default value is `100%`.
       width: "300px",
     }}
   >
-    {(args) => (
-      <SkeletonLoader
-        {...args}
-        imageAspectRatio={imageRatiosEnumValues.getValue(args.imageAspectRatio)}
-        layout={layoutsEnumValues.getValue(args.layout)}
-      />
-    )}
+    {(args) => <SkeletonLoader {...args} />}
   </Story>
 </Canvas>
 
@@ -138,30 +117,12 @@ Resources:
 <Canvas>
   <Story name="Placeholders in a Grid">
     <SimpleGrid columns={3}>
-      <SkeletonLoader
-        imageAspectRatio={SkeletonLoaderImageRatios.Landscape}
-        isBordered
-      />
-      <SkeletonLoader
-        imageAspectRatio={SkeletonLoaderImageRatios.Landscape}
-        isBordered
-      />
-      <SkeletonLoader
-        imageAspectRatio={SkeletonLoaderImageRatios.Landscape}
-        isBordered
-      />
-      <SkeletonLoader
-        imageAspectRatio={SkeletonLoaderImageRatios.Landscape}
-        isBordered
-      />
-      <SkeletonLoader
-        imageAspectRatio={SkeletonLoaderImageRatios.Landscape}
-        isBordered
-      />
-      <SkeletonLoader
-        imageAspectRatio={SkeletonLoaderImageRatios.Landscape}
-        isBordered
-      />
+      <SkeletonLoader imageAspectRatio="landscape" isBordered />
+      <SkeletonLoader imageAspectRatio="landscape" isBordered />
+      <SkeletonLoader imageAspectRatio="landscape" isBordered />
+      <SkeletonLoader imageAspectRatio="landscape" isBordered />
+      <SkeletonLoader imageAspectRatio="landscape" isBordered />
+      <SkeletonLoader imageAspectRatio="landscape" isBordered />
     </SimpleGrid>
   </Story>
 </Canvas>
@@ -171,11 +132,11 @@ Resources:
 <Canvas>
   <Story name="Placeholders in a List">
     <SimpleGrid columns={1}>
-      <SkeletonLoader layout={LayoutTypes.Row} showImage={false} />
-      <SkeletonLoader layout={LayoutTypes.Row} showImage={false} />
-      <SkeletonLoader layout={LayoutTypes.Row} showImage={false} />
-      <SkeletonLoader layout={LayoutTypes.Row} showImage={false} />
-      <SkeletonLoader layout={LayoutTypes.Row} showImage={false} />
+      <SkeletonLoader layout="row" showImage={false} />
+      <SkeletonLoader layout="row" showImage={false} />
+      <SkeletonLoader layout="row" showImage={false} />
+      <SkeletonLoader layout="row" showImage={false} />
+      <SkeletonLoader layout="row" showImage={false} />
     </SimpleGrid>
   </Story>
 </Canvas>

package/src/components/SkeletonLoader/SkeletonLoader.test.tsx

@@ -4,8 +4,6 @@ import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
 import SkeletonLoader from "./SkeletonLoader";
-import { SkeletonLoaderImageRatios } from "./SkeletonLoaderTypes";
-import { LayoutTypes } from "../../helpers/enums";
 
 describe("SkeletonLoader Accessibility", () => {
   it("passes axe accessibility test", async () => {
@@ -24,13 +22,11 @@ describe("SkeletonLoader", () => {
   });
 
   it("renders in the column or row layout", () => {
-    const { container, rerender } = render(
-      <SkeletonLoader layout={LayoutTypes.Column} />
-    );
+    const { container, rerender } = render(<SkeletonLoader layout="column" />);
 
     expect(container.querySelector(".column")).toBeInTheDocument();
 
-    rerender(<SkeletonLoader layout={LayoutTypes.Row} />);
+    rerender(<SkeletonLoader layout="row" />);
     expect(container.querySelector(".row")).toBeInTheDocument();
   });
 
@@ -72,11 +68,9 @@ describe("SkeletonLoader", () => {
 
   it("renders the UI snapshot correctly", () => {
     const basic = renderer.create(<SkeletonLoader />).toJSON();
-    const rowLayout = renderer
-      .create(<SkeletonLoader layout={LayoutTypes.Row} />)
-      .toJSON();
+    const rowLayout = renderer.create(<SkeletonLoader layout="row" />).toJSON();
     const columnLayout = renderer
-      .create(<SkeletonLoader layout={LayoutTypes.Column} />)
+      .create(<SkeletonLoader layout="column" />)
       .toJSON();
     const noImage = renderer
       .create(<SkeletonLoader showImage={false} />)
@@ -91,21 +85,13 @@ describe("SkeletonLoader", () => {
       .create(<SkeletonLoader showButton={true} />)
       .toJSON();
     const landscape = renderer
-      .create(
-        <SkeletonLoader
-          imageAspectRatio={SkeletonLoaderImageRatios.Landscape}
-        />
-      )
+      .create(<SkeletonLoader imageAspectRatio="landscape" />)
       .toJSON();
     const portrait = renderer
-      .create(
-        <SkeletonLoader imageAspectRatio={SkeletonLoaderImageRatios.Portrait} />
-      )
+      .create(<SkeletonLoader imageAspectRatio="portrait" />)
       .toJSON();
     const square = renderer
-      .create(
-        <SkeletonLoader imageAspectRatio={SkeletonLoaderImageRatios.Square} />
-      )
+      .create(<SkeletonLoader imageAspectRatio="square" />)
       .toJSON();
     const withChakraProps = renderer
       .create(<SkeletonLoader p="20px" color="ui.error.primary" />)

package/src/components/SkeletonLoader/SkeletonLoader.tsx

@@ -6,8 +6,9 @@ import {
 } from "@chakra-ui/react";
 import * as React from "react";
 
-import { SkeletonLoaderImageRatios } from "./SkeletonLoaderTypes";
-import { LayoutTypes } from "../../helpers/enums";
+import { LayoutTypes } from "../../helpers/types";
+
+export type SkeletonLoaderImageRatios = "landscape" | "portrait" | "square";
 
 export interface SkeletonLoaderProps {
   /** Additional class name for the Skeleton component. */
@@ -19,12 +20,12 @@ export interface SkeletonLoaderProps {
    * placeholder; default value is `1`. */
   headingSize?: number;
   /** Optional value to control the aspect ratio of the image placeholder;
-   * default value is `SkeletonLoaderImageRatios.Square`. */
+   * default value is `"square"`. */
   imageAspectRatio?: SkeletonLoaderImageRatios;
   /** Optional boolean value to control visibility of border around skeleton loader. */
   isBordered?: boolean;
   /** Optional value to control the position of the image placeholder;
-   * default value is `LayoutTypes.Column`. */
+   * default value is `"column"`. */
   layout?: LayoutTypes;
   /** Optional boolean value to control visibility of button placeholder. */
   showButton?: boolean;
@@ -50,9 +51,9 @@ export const SkeletonLoader = chakra(
       className,
       contentSize = 3,
       headingSize = 1,
-      imageAspectRatio = SkeletonLoaderImageRatios.Square,
+      imageAspectRatio = "square",
       isBordered = false,
-      layout = LayoutTypes.Column,
+      layout = "column",
       showButton = false,
       showContent = true,
       showHeading = true,
@@ -72,11 +73,11 @@ export const SkeletonLoader = chakra(
      * "heading" and "content" areas defined by the `type` argument. The last
      * element will have width of `lastWidth`.
      */
-    const getSkeletonElements = (type, size = 1, lastWidth = "80%") => {
+    const getSkeletonElements = (type: string, size = 1, lastWidth = "80%") => {
       return new Array(size).fill(null).map((_, i) => {
         const width = i === size - 1 ? lastWidth : "100%";
         const marginBottomValue =
-          i === size - 1 && type === "content" ? "0" : null;
+          i === size - 1 && type === "content" ? "0" : undefined;
         return (
           <ChakraSkeleton key={`${type}-${i}`} width={width}>
             <Box