@nypl/design-system-react-components 0.25.0 → 0.25.4

package/src/components/Select/Select.tsx

@@ -1,192 +1,148 @@
 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 */
-  invalidText?: 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 hide the helper/invalid text. */
+  showHelperInvalidText?: boolean;
+  /** 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,
-      invalidText,
-      helperText,
-      helperTextId,
-      isRequired,
-      labelId,
-      labelText,
-      onBlur,
-      onChange,
-      name,
-      required,
-      attributes = {},
-      disabled = false,
-      selectedOption,
-      showLabel,
-      showOptReqLabel = true,
-    } = 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 = invalidText
-      ? invalidText
-      : "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,
+    showHelperInvalidText = true,
+    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={showOptReqLabel && 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 && showHelperInvalidText && (
+        <Box __css={styles.helper} aria-disabled={isDisabled}>
+          <HelperErrorText isInvalid={isInvalid} id={id + `-helperText`}>
             {footnote}
           </HelperErrorText>
-        )}
-      </div>
-    );
-  }
-);
-
-Select.displayName = "Select";
+        </Box>
+      )}
+    </Box>
+  );
+});
 
 export default Select;

package/src/components/Select/SelectTypes.tsx

@@ -0,0 +1,5 @@
+// Only used for internal purposes.
+export enum SelectTypes {
+  Default = "default",
+  SearchBar = "searchbar",
+}

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

@@ -3,18 +3,18 @@ import {
   Story,
   Canvas,
   ArgsTable,
-  Preview,
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
+import { action } from "@storybook/addon-actions";
 
+import { getCategory } from "../../utils/componentCategories";
 import SkeletonLoader from "./SkeletonLoader";
 import {
   SkeletonLoaderLayouts,
   SkeletonLoaderImageRatios,
 } from "./SkeletonLoaderTypes";
-import { action } from "@storybook/addon-actions";
-import { getCategory } from "../../utils/componentCategories";
+import SimpleGrid from "../Grid/SimpleGrid";
 
 <Meta
   title={getCategory("SkeletonLoader")}
@@ -29,33 +29,15 @@ import { getCategory } from "../../utils/componentCategories";
     jest: ["SkeletonLoader.test.tsx"],
   }}
   argTypes={{
-    attributes: { table: { disable: true } },
     className: { table: { disable: true } },
-    modifiers: { table: { disable: true } },
-    layout: {
-      table: { defaultValue: { summary: "vertical" } },
-    },
-    showImage: {
-      table: { defaultValue: { summary: "true" } },
-    },
-    showHeading: {
-      table: { defaultValue: { summary: "true" } },
-    },
-    showContent: {
-      table: { defaultValue: { summary: "true" } },
-    },
-    showButton: {
-      table: { defaultValue: { summary: "false" } },
-    },
-    headingSize: {
-      table: { defaultValue: { summary: "1" } },
-    },
-    contentSize: {
-      table: { defaultValue: { summary: "3" } },
-    },
-    imageAspectRatio: {
-      table: { defaultValue: { summary: "square" } },
-    },
+    contentSize: { table: { defaultValue: { summary: "3" } } },
+    headingSize: { table: { defaultValue: { summary: "1" } } },
+    imageAspectRatio: { table: { defaultValue: { summary: "square" } } },
+    layout: { table: { defaultValue: { summary: "column" } } },
+    showButton: { table: { defaultValue: { summary: "false" } } },
+    showContent: { table: { defaultValue: { summary: "true" } } },
+    showHeading: { table: { defaultValue: { summary: "true" } } },
+    showImage: { table: { defaultValue: { summary: "true" } } },
   }}
 />
 
@@ -64,38 +46,34 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.17.3`   |
-| Latest            | `0.23.4`   |
+| Latest            | `0.25.3`   |
 
 <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 `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`
+to better view the example. The default value is `100%`.
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story
-    name="SkeletonLoader"
+    name="Basic with Props"
     args={{
       width: "300px",
     }}
   >
     {(args) => <SkeletonLoader {...args} />}
   </Story>
-</Preview>
+</Canvas>
 
-<ArgsTable story="SkeletonLoader" />
+<ArgsTable story="Basic with Props" />
 
 # Card Placeholders in a Grid
 
-<Preview>
+<Canvas>
   <Story name="Placeholders in a Grid">
-    <div
-      style={{
-        display: "grid",
-        gap: "2rem",
-        "grid-template-columns": "repeat(3, 1fr)",
-      }}
-    >
+    <SimpleGrid columns={3}>
       <SkeletonLoader
         imageAspectRatio={SkeletonLoaderImageRatios.Landscape}
         border
@@ -120,41 +98,20 @@ Please note that the initial rendering below has the `width` prop set to `300px`
         imageAspectRatio={SkeletonLoaderImageRatios.Landscape}
         border
       />
-    </div>
+    </SimpleGrid>
   </Story>
-</Preview>
+</Canvas>
 
 # Text Placeholders in a List
 
-<Preview>
+<Canvas>
   <Story name="Placeholders in a List">
-    <div
-      style={{
-        display: "grid",
-        gap: "2rem",
-        "grid-template-columns": "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}
-      />
-    </div>
+    <SimpleGrid columns={1}>
+      <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} />
+    </SimpleGrid>
   </Story>
-</Preview>
+</Canvas>