@nypl/design-system-react-components 0.27.0 → 0.28.0

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,21 +77,21 @@ 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,
@@ -100,9 +99,7 @@ export const Select = chakra(
       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 } : {};
@@ -125,7 +122,7 @@ export const Select = chakra(
       }
 
       useEffect(() => {
-        if (labelPosition === LabelPositions.Inline) {
+        if (labelPosition === "inline") {
           if (labelRef.current) {
             const width = labelRef.current.clientWidth + labelSelectGap;
             setLabelWidth(width);
@@ -136,12 +133,8 @@ export const Select = chakra(
       }, [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
@@ -165,13 +158,7 @@ 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}

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

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

@@ -29,7 +29,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 1`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -45,7 +45,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 1`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -57,7 +57,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 1`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -108,7 +108,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 2`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -124,7 +124,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 2`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -136,7 +136,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 2`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -187,7 +187,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 3`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -203,7 +203,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 3`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -215,7 +215,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 3`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -259,7 +259,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 4`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -275,7 +275,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 4`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -287,7 +287,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 4`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -338,7 +338,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 5`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -350,7 +350,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 5`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -401,7 +401,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 6`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -440,7 +440,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 7`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -456,7 +456,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 7`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -468,7 +468,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 7`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -530,7 +530,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 8`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -546,7 +546,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 8`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -558,7 +558,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 8`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -609,7 +609,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 9`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -625,7 +625,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 9`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -637,7 +637,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 9`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -688,7 +688,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 10`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -704,7 +704,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 10`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -716,7 +716,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 10`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -767,7 +767,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 11`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -783,7 +783,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 11`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -795,7 +795,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 11`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -847,7 +847,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 12`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -863,7 +863,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 12`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -875,7 +875,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 12`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />