@nypl/design-system-react-components 0.23.4 → 0.25.1

package/src/components/Select/Select.tsx

@@ -1,185 +1,145 @@
 import React from "react";
-import bem from "../../utils/bem";
+import {
+  Box,
+  Select as ChakraSelect,
+  useMultiStyleConfig,
+} from "@chakra-ui/react";
+
 import Label from "../Label/Label";
 import HelperErrorText from "../HelperErrorText/HelperErrorText";
 import generateUUID from "../../helpers/generateUUID";
+import { IconNames, IconSizes } from "../Icons/IconTypes";
+import Icon from "../Icons/Icon";
+import { SelectTypes } from "./SelectTypes";
 
 export interface SelectProps {
-  /** DEPRECATED - When passed, will populate the aria-label on the select */
-  ariaLabel?: string;
-  /** Additional attributes passed to the <select> tag */
-  attributes?: { [key: string]: any };
-  /** BlockName for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-  blockName?: string;
-  /** ClassName you can add in addition to 'select' */
+  /** A class name for the `div` parent element. */
   className?: string;
-  children?: React.ReactNode;
-  /** When true, disables the select */
-  disabled?: boolean;
-  /** Helper for modifiers array; adds 'errored' styling */
-  errored?: boolean;
-  /** Populates the HelperErrorText for error state */
-  errorText?: string;
-  /** DEPRECATED - ID of associated HelperText */
-  helperTextId?: string;
-  /** Populates the HelperErrorText for standard state */
+  /** Optional string to populate the `HelperErrorText` for the standard state. */
   helperText?: string;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
-  /** DEPRECATED - Attribute indicating that an option with a non-empty string value must be selected */
+  /** Optional string to populate the `HelperErrorText` for the error state
+   * when `isInvalid` is true. */
+  invalidText?: string;
+  /** Adds the `disabled` and `aria-disabled` attributes to the select when true */
+  isDisabled?: boolean;
+  /** Adds the `aria-invalid` attribute to the select when true. This also makes
+   * the color theme "NYPL error" red for the select and text. */
+  isInvalid?: boolean;
+  /** Adds the `required` and `aria-required` attributes to the input when true. */
   isRequired?: boolean;
-  /** DEPRECATED - ID of associated label */
-  labelId?: string;
-  /** Provides text for a `Label` component if `showLabel` is set to `true`; populates a `aria-label` attribute on the select input if `showLabel` is set to `false`. */
+  /** Provides text for a `Label` component if `showLabel` is set to `true`;
+   * populates an `aria-label` attribute on the select input if `showLabel` is
+   * set to `false`. */
   labelText: string;
-  /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-  modifiers?: string[];
-  /** The name of the select element to use in form submission */
+  /** Used to reference the select element in forms. */
   name: string;
-  /** Passes select's current value to the React state handler */
-  onBlur?: (event: React.FormEvent) => void;
-  /** Passes selects' current value to the React state handler */
+  /** The callback function to get the selected value.
+   * Should be passed along with `value` for controlled components. */
   onChange?: (event: React.FormEvent) => void;
-  /** Will add `aria-required: true` and native HTML `required` attribute to the select input */
-  required?: boolean;
-  /** The value of the selected option */
-  selectedOption?: string;
-  /** Offers the ability to show the label onscreen or hide it. Refer to the `labelText` property for more information. */
+  /** Offers the ability to show the select's label onscreen or hide it. Refer
+   * to the `labelText` property for more information. */
   showLabel?: boolean;
+  /** Whether or not to display the "Required"/"Optional" text in the label text. */
+  showOptReqLabel?: boolean;
+  /** The variant to display. */
+  type?: SelectTypes;
+  /** The value of the selected option.
+   * Should be passed along with `onChange` for controlled components. */
+  value?: string;
 }
 
-const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
-  (props, ref?) => {
-    const {
-      ariaLabel = null,
-      blockName,
-      children,
-      className,
-      errored,
-      errorText,
-      helperText,
-      helperTextId,
-      isRequired,
-      labelId,
-      labelText,
-      onBlur,
-      onChange,
-      name,
-      required,
-      attributes = {},
-      disabled = false,
-      selectedOption,
-      showLabel,
-    } = props;
-
-    const modifiers = props.modifiers ? props.modifiers : [];
-    const id = props.id || generateUUID();
-    let ariaLabelledBy = null;
-
-    if (!showLabel) attributes["aria-label"] = labelText;
-
-    if (helperText && showLabel)
-      attributes["aria-describedby"] = `${id}-helperText`;
-
-    if (errored) modifiers.push("error");
-
-    const req = isRequired || required;
-    const optReqFlag = req ? "Required" : "Optional";
-
-    const errorOutput = errorText
-      ? errorText
-      : "There is an error related to this field.";
-
-    const footnote = errored ? errorOutput : helperText;
-
-    // Support for deprecated prop
-    if (ariaLabel) attributes["aria-label"] = ariaLabel;
-
-    // Support for deprecated props
-    if (labelId && !helperTextId) {
-      ariaLabelledBy = labelId;
-    } else if (helperTextId && !labelId) {
-      ariaLabelledBy = helperTextId;
-    } else if (labelId && helperTextId) {
-      ariaLabelledBy = labelId + " " + helperTextId;
-    }
-
-    if (React.Children.count(children) > 10) {
-      console.warn(
-        "NYPL DS recommends that <select> fields have no more than 10 options; an auto-complete text input is a good alternative for 11 or more options."
-      );
-    }
-
-    if (React.Children.count(children) < 4) {
-      console.warn(
-        "NYPL DS recommends that <select> fields have at least 4 options; a radio button group is a good alternative for 3 or fewer options."
-      );
-    }
-
-    if (ariaLabel) {
-      console.warn(
-        "The ariaLabel prop has been deprecated in the Select component and will be removed in a future release. Check the documentation for updated props."
-      );
-    }
-
-    if (helperTextId) {
-      console.warn(
-        "The helperTextId prop has been deprecated in the Select component and will be removed in a future release. Check the documentation for updated props."
-      );
-    }
+/**
+ * Component that renders Chakra's `Select` component along with an accessible
+ * `Label` and optional `HelperErrorText` component.
+ */
+const Select = React.forwardRef<
+  HTMLSelectElement,
+  React.PropsWithChildren<SelectProps>
+>((props: React.PropsWithChildren<SelectProps>, ref?) => {
+  const {
+    children,
+    className,
+    helperText,
+    id = generateUUID(),
+    invalidText,
+    isDisabled = false,
+    isInvalid = false,
+    isRequired = false,
+    labelText,
+    name,
+    onChange,
+    showLabel = true,
+    showOptReqLabel = true,
+    type = SelectTypes.Default,
+    value,
+  } = props;
+  const ariaAttributes = {};
+  const optReqFlag = isRequired ? "Required" : "Optional";
+  const styles = useMultiStyleConfig("CustomSelect", { variant: type });
+  const finalInvalidText = invalidText
+    ? invalidText
+    : "There is an error related to this field.";
+  const footnote = isInvalid ? finalInvalidText : helperText;
+  // To control the `Select` component, both `onChange` and `value`
+  // must be passed.
+  const controlledProps = onChange && value ? { onChange, value } : {};
+
+  if (!showLabel) {
+    ariaAttributes["aria-label"] =
+      labelText && footnote ? `${labelText} - ${footnote}` : labelText;
+  } else if (helperText) {
+    ariaAttributes["aria-describedby"] = `${id}-helperText`;
+  }
 
-    if (isRequired === true || isRequired === false) {
-      console.warn(
-        "The isRequired prop has been deprecated in the Select component and will be removed in a future release. Check the documentation for updated props."
-      );
-    }
+  if (React.Children.count(children) > 10) {
+    console.warn(
+      "NYPL DS recommends that <select> fields have no more than 10 options; an auto-complete text input is a good alternative for 11 or more options."
+    );
+  }
 
-    if (labelId) {
-      console.warn(
-        "The labelId prop has been deprecated in the Select component and will be removed in a future release. Check the documentation for updated props."
-      );
-    }
+  if (React.Children.count(children) < 4) {
+    console.warn(
+      "NYPL DS recommends that <select> fields have at least 4 options; a radio button group is a good alternative for 3 or fewer options."
+    );
+  }
 
-    return (
-      <div className="select">
-        {labelText && showLabel && (
-          <Label htmlFor={id} optReqFlag={optReqFlag} id={id + `-label`}>
-            {labelText}
-          </Label>
-        )}
-        <select
-          name={name}
-          id={id}
-          className={bem("selectfield", modifiers, blockName, [className])}
-          aria-required={req}
-          required={req}
-          disabled={disabled}
-          aria-label={ariaLabel}
-          aria-labelledby={ariaLabelledBy}
-          value={selectedOption}
-          ref={ref}
-          onBlur={onBlur}
-          onChange={onChange}
-          {...attributes}
+  return (
+    <Box className={className} __css={styles}>
+      {showLabel && (
+        <Label
+          id={`${id}-label`}
+          htmlFor={id}
+          optReqFlag={showOptReqLabel && optReqFlag}
         >
-          {React.Children.map(children, (child, key) => {
-            return React.cloneElement(child as React.ReactElement<any>, {
-              "aria-selected": children[key]
-                ? children[key].props.children === selectedOption
-                : false,
-            });
-          })}
-        </select>
-        {(helperText || errored) && (
-          <HelperErrorText isError={errored} id={id + `-helperText`}>
+          {labelText}
+        </Label>
+      )}
+      <ChakraSelect
+        id={id}
+        variant="outline"
+        isRequired={isRequired}
+        isDisabled={isDisabled}
+        isInvalid={isInvalid}
+        name={name}
+        ref={ref}
+        {...controlledProps}
+        {...ariaAttributes}
+        icon={<Icon name={IconNames.Arrow} size={IconSizes.Medium} />}
+        __css={styles.select}
+      >
+        {children}
+      </ChakraSelect>
+      {footnote && (
+        <Box __css={styles.helper} aria-disabled={isDisabled}>
+          <HelperErrorText isError={isInvalid} id={id + `-helperText`}>
             {footnote}
           </HelperErrorText>
-        )}
-      </div>
-    );
-  }
-);
-
-Select.displayName = "Select";
+        </Box>
+      )}
+    </Box>
+  );
+});
 
 export default Select;

package/src/components/Select/SelectTypes.tsx

@@ -0,0 +1,4 @@
+export enum SelectTypes {
+  Default = "default",
+  SearchBar = "searchbar",
+}

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

@@ -14,9 +14,10 @@ import {
   SkeletonLoaderImageRatios,
 } from "./SkeletonLoaderTypes";
 import { action } from "@storybook/addon-actions";
+import { getCategory } from "../../utils/componentCategories";
 
 <Meta
-  title="Skeleton Loader"
+  title={getCategory("SkeletonLoader")}
   component={SkeletonLoader}
   decorators={[withDesign]}
   parameters={{
@@ -32,7 +33,7 @@ import { action } from "@storybook/addon-actions";
     className: { table: { disable: true } },
     modifiers: { table: { disable: true } },
     layout: {
-      table: { defaultValue: { summary: "vertical" } },
+      table: { defaultValue: { summary: "column" } },
     },
     showImage: {
       table: { defaultValue: { summary: "true" } },
@@ -58,7 +59,7 @@ import { action } from "@storybook/addon-actions";
   }}
 />
 
-# Skeleton Loader
+# SkeletonLoader
 
 | Component Version | DS Version |
 | ----------------- | ---------- |
@@ -67,13 +68,16 @@ import { action } from "@storybook/addon-actions";
 
 <Description of={SkeletonLoader} />
 
-The `SkeletonLoader` component renders a placeholder to be used while dynamic content is loading. The `layout`, `width` and placeholder elements within the `SkeletonLoader` can be customized.
+The `SkeletonLoader` component renders a placeholder to be used while dynamic
+content is loading. The `layout`, `width` and placeholder elements within the
+`SkeletonLoader` can be customized.
 
-Please note that the initial rendering below has the `width` prop set to `300px`. The default value is `100%`.
+Please note that the initial rendering below has the `width` prop set to `300px`.
+The default value is `100%`.
 
 <Preview withToolbar>
   <Story
-    name="Skeleton Loader"
+    name="SkeletonLoader"
     args={{
       width: "300px",
     }}
@@ -82,7 +86,7 @@ Please note that the initial rendering below has the `width` prop set to `300px`
   </Story>
 </Preview>
 
-<ArgsTable story="Skeleton Loader" />
+<ArgsTable story="SkeletonLoader" />
 
 # Card Placeholders in a Grid
 
@@ -92,7 +96,7 @@ Please note that the initial rendering below has the `width` prop set to `300px`
       style={{
         display: "grid",
         gap: "2rem",
-        "grid-template-columns": "repeat(3, 1fr)",
+        gridTemplateColumns: "repeat(3, 1fr)",
       }}
     >
       <SkeletonLoader
@@ -131,29 +135,14 @@ Please note that the initial rendering below has the `width` prop set to `300px`
       style={{
         display: "grid",
         gap: "2rem",
-        "grid-template-columns": "repeat(1, 1fr)",
+        gridTemplateColumns: "repeat(1, 1fr)",
       }}
     >
-      <SkeletonLoader
-        layout={SkeletonLoaderLayouts.Horizontal}
-        showImage={false}
-      />
-      <SkeletonLoader
-        layout={SkeletonLoaderLayouts.Horizontal}
-        showImage={false}
-      />
-      <SkeletonLoader
-        layout={SkeletonLoaderLayouts.Horizontal}
-        showImage={false}
-      />
-      <SkeletonLoader
-        layout={SkeletonLoaderLayouts.Horizontal}
-        showImage={false}
-      />
-      <SkeletonLoader
-        layout={SkeletonLoaderLayouts.Horizontal}
-        showImage={false}
-      />
+      <SkeletonLoader layout={SkeletonLoaderLayouts.Row} showImage={false} />
+      <SkeletonLoader layout={SkeletonLoaderLayouts.Row} showImage={false} />
+      <SkeletonLoader layout={SkeletonLoaderLayouts.Row} showImage={false} />
+      <SkeletonLoader layout={SkeletonLoaderLayouts.Row} showImage={false} />
+      <SkeletonLoader layout={SkeletonLoaderLayouts.Row} showImage={false} />
     </div>
   </Story>
 </Preview>

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

@@ -26,7 +26,7 @@ describe("SkeletonLoader", () => {
       expect(container.querySelector(".skeleton-loader")).toBeInTheDocument();
       expect(container.querySelector(".skeleton-loader")).toHaveAttribute(
         "class",
-        "skeleton-loader skeleton-loader--vertical "
+        "skeleton-loader skeleton-loader--column "
       );
       expect(container.querySelector(".skeleton-loader")).not.toHaveAttribute(
         "class",
@@ -34,27 +34,27 @@ describe("SkeletonLoader", () => {
       );
     });
 
-    it("renders vertical layout", () => {
+    it("renders column layout", () => {
       const utils = render(
-        <SkeletonLoader layout={SkeletonLoaderLayouts.Vertical} />
+        <SkeletonLoader layout={SkeletonLoaderLayouts.Column} />
       );
       container = utils.container;
 
       expect(container.querySelector(".skeleton-loader")).toBeInTheDocument();
       expect(
-        container.querySelector(".skeleton-loader--vertical")
+        container.querySelector(".skeleton-loader--column")
       ).toBeInTheDocument();
     });
 
-    it("renders horizontal layout", () => {
+    it("renders row layout", () => {
       const utils = render(
-        <SkeletonLoader layout={SkeletonLoaderLayouts.Horizontal} />
+        <SkeletonLoader layout={SkeletonLoaderLayouts.Row} />
       );
       container = utils.container;
 
       expect(container.querySelector(".skeleton-loader")).toBeInTheDocument();
       expect(
-        container.querySelector(".skeleton-loader--horizontal")
+        container.querySelector(".skeleton-loader--row")
       ).toBeInTheDocument();
     });
   });

package/src/components/SkeletonLoader/SkeletonLoader.tsx

@@ -16,7 +16,7 @@ export interface SkeletonLoaderProps {
   headingSize?: number;
   /** Optional value to control the aspect ratio of the image placeholder; default value is `square` */
   imageAspectRatio?: SkeletonLoaderImageRatios;
-  /** Optional value to control the position of the image placeholder; default value is `vertical` */
+  /** Optional value to control the position of the image placeholder; default value is `column` */
   layout?: SkeletonLoaderLayouts;
   /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
   modifiers?: string[];
@@ -41,7 +41,7 @@ export default function SkeletonLoader(
     contentSize = 3,
     headingSize = 1,
     imageAspectRatio = SkeletonLoaderImageRatios.Square,
-    layout = SkeletonLoaderLayouts.Vertical,
+    layout = SkeletonLoaderLayouts.Column,
     showButton = false,
     showContent = true,
     showImage = true,
@@ -61,6 +61,7 @@ export default function SkeletonLoader(
   for (let i = 0; i < headingSize; i++) {
     headingItems.push(
       <div
+        key={`heading-${i}`}
         className={bem("skeleton-loader-heading", imageModifiers, "", [
           "skeleton-element",
         ])}
@@ -72,6 +73,7 @@ export default function SkeletonLoader(
   for (let i = 0; i < contentSize; i++) {
     contentItems.push(
       <div
+        key={`content-${i}`}
         className={bem("skeleton-loader-content", imageModifiers, "", [
           "skeleton-element",
         ])}

package/src/components/SkeletonLoader/SkeletonLoaderTypes.tsx

@@ -1,6 +1,6 @@
 export enum SkeletonLoaderLayouts {
-  Horizontal = "horizontal",
-  Vertical = "vertical",
+  Row = "row",
+  Column = "column",
 }
 
 export enum SkeletonLoaderImageRatios {

package/src/components/SkeletonLoader/_SkeletonLoader.scss

@@ -1,6 +1,6 @@
 @mixin skeleton-highlight {
   animation: Pulsate 1000ms cubic-bezier(0.25, -0.5, 1, 0) infinite;
-  background: var(--ui-gray-warm-light);
+  background: var(--ui-gray-light-warm);
 }
 
 .skeleton-loader {
@@ -79,11 +79,11 @@
   }
 
   &--border {
-    border: 1px solid var(--ui-gray-light);
+    border: 1px solid var(--ui-gray-light-cool);
     padding: var(--space-s);
   }
 
-  &--horizontal {
+  &--row {
     @include breakpoint($breakpoint-medium) {
       display: flex;
 

package/src/components/StatusBadge/StatusBadge.stories.mdx

@@ -0,0 +1,91 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  ArgsTable,
+  Description,
+} from "@storybook/addon-docs/blocks";
+import { withDesign } from "storybook-addon-designs";
+import { VStack } from "@chakra-ui/react";
+
+import StatusBadge from "./StatusBadge";
+import { StatusBadgeTypes } from "./StatusBadgeTypes";
+import getCSSVariable from "../../helpers/getCSSVariable";
+import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
+
+<Meta
+  title={getCategory("StatusBadge")}
+  component={StatusBadge}
+  decorators={[withDesign]}
+  parameters={{
+    design: {
+      type: "figma",
+      url:
+        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=11256%3A0",
+    },
+    jest: ["StatusBadge.test.tsx"],
+  }}
+  argTypes={{
+    className: { table: { disable: true } },
+    id: { table: { disable: true } },
+    level: {
+      control: {
+        type: "select",
+      },
+      options: Object.values(StatusBadgeTypes).map((value) => value),
+    },
+  }}
+/>
+
+# StatusBadge
+
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.18.7`   |
+| Latest            | `0.25.1`   |
+
+<Description of={StatusBadge} />
+
+<Canvas withToolbar>
+  <Story
+    name="Basic with props"
+    args={{ level: StatusBadgeTypes.Low, text: "Registration Required" }}
+  >
+    {(args) => <StatusBadge {...args}>{args.text}</StatusBadge>}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Basic with props" />
+
+## Patterns
+
+### Higher Barrier
+
+Used in instances where the associated message is the highest barrier. Use
+`"high"` and `"medium"` for these levels.
+
+<Canvas>
+  <DSProvider>
+    <VStack spacing="s" align="stretch">
+      <StatusBadge level={StatusBadgeTypes.High}>
+        On-Site Access Only
+      </StatusBadge>
+      <StatusBadge level={StatusBadgeTypes.Medium}>Cancelled</StatusBadge>
+    </VStack>
+  </DSProvider>
+</Canvas>
+
+### Lower Barrier
+
+Used in instances where the associated message is the lower barrier. Use
+`"low"` for this level which is the default.
+
+<Canvas>
+  <DSProvider>
+    <VStack spacing="s" align="stretch">
+      <StatusBadge>Library Card Required</StatusBadge>
+      <StatusBadge>Registration Required</StatusBadge>
+    </VStack>
+  </DSProvider>
+</Canvas>