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

package/src/components/RadioGroup/RadioGroup.stories.mdx

@@ -1,4 +1,4 @@
-import { ButtonGroup, Flex, Spacer } from "@chakra-ui/react";
+import { Flex, Spacer } from "@chakra-ui/react";
 import {
   ArgsTable,
   Canvas,
@@ -9,16 +9,13 @@ import {
 import { withDesign } from "storybook-addon-designs";
 
 import Button from "../Button/Button";
+import ButtonGroup from "../ButtonGroup/ButtonGroup";
 import Form from "../Form/Form";
 import Radio from "../Radio/Radio";
 import RadioGroup from "./RadioGroup";
-import { LayoutTypes } from "../../helpers/enums";
 import SimpleGrid from "../Grid/SimpleGrid";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
-import { getStorybookEnumValues } from "../../utils/utils";
-
-export const enumValues = getStorybookEnumValues(LayoutTypes, "LayoutTypes");
 
 <Meta
   title={getCategory("RadioGroup")}
@@ -48,9 +45,7 @@ export const enumValues = getStorybookEnumValues(LayoutTypes, "LayoutTypes");
       table: { defaultValue: { summary: false } },
     },
     layout: {
-      control: { type: "select" },
-      table: { defaultValue: { summary: "LayoutTypes.Column" } },
-      options: enumValues.options,
+      table: { defaultValue: { summary: "column" } },
     },
     key: { table: { disable: true } },
     onChange: { control: false },
@@ -72,7 +67,7 @@ export const enumValues = getStorybookEnumValues(LayoutTypes, "LayoutTypes");
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.0`   |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -106,7 +101,7 @@ export const enumValues = getStorybookEnumValues(LayoutTypes, "LayoutTypes");
       isInvalid: false,
       isRequired: false,
       labelText: "Standard Radio Group",
-      layout: "LayoutTypes.Column",
+      layout: "column",
       name: "radio-story",
       onChange: undefined,
       showHelperInvalidText: true,
@@ -115,7 +110,7 @@ export const enumValues = getStorybookEnumValues(LayoutTypes, "LayoutTypes");
     }}
   >
     {(args) => (
-      <RadioGroup {...args} layout={enumValues.getValue(args.layout)}>
+      <RadioGroup {...args}>
         <Radio id="main-2" labelText="Radio 2" value="2" />
         <Radio id="main-3" labelText="Radio 3" value="3" />
         <Radio id="main-4" labelText="Radio 4" value="4" />
@@ -163,7 +158,7 @@ a row.
       id="row"
       labelText="Row"
       name="row-example"
-      layout={LayoutTypes.Row}
+      layout="row"
     >
       <Radio id="row-2" labelText="Radio 2" value="2" />
       <Radio id="row-3" labelText="Radio 3" value="3" />
@@ -420,7 +415,7 @@ export function RadioGroupUncontrolledExample() {
     console.log(`Uncontrolled example. Selected: ${radioGroupValue}`);
   };
   return (
-    <Form onSubmit={onSubmit}>
+    <Form id="form" onSubmit={onSubmit}>
       <SimpleGrid columns="1">
         <RadioGroup
           defaultValue="3"
@@ -434,7 +429,9 @@ export function RadioGroupUncontrolledExample() {
           <Radio id="4" labelText="Radio 4" value="4" />
         </RadioGroup>
         <ButtonGroup>
-          <Button type="submit">Submit</Button>
+          <Button id="submit" type="submit">
+            Submit
+          </Button>
         </ButtonGroup>
       </SimpleGrid>
     </Form>
@@ -451,7 +448,7 @@ export function RadioGroupUncontrolledExample() {
     console.log(`Uncontrolled example. Selected: ${radioGroupValue}`);
   };
   return (
-    <Form onSubmit={onSubmit}>
+    <Form id="form" onSubmit={onSubmit}>
       <SimpleGrid columns="1">
         <RadioGroup
           defaultValue="3"
@@ -465,7 +462,9 @@ export function RadioGroupUncontrolledExample() {
           <Radio id="4" labelText="Radio 4" value="4" />
         </RadioGroup>
         <ButtonGroup>
-          <Button type="submit">Submit</Button>
+          <Button id="submit" type="submit">
+            Submit
+          </Button>
         </ButtonGroup>
       </SimpleGrid>
     </Form>

package/src/components/RadioGroup/RadioGroup.test.tsx

@@ -7,7 +7,6 @@ import renderer from "react-test-renderer";
 
 import Radio from "../Radio/Radio";
 import RadioGroup from "./RadioGroup";
-import { LayoutTypes } from "../../helpers/enums";
 
 describe("Radio Accessibility", () => {
   it("passes axe accessibility with string labels", async () => {
@@ -154,7 +153,7 @@ describe("Radio Button", () => {
 
   it("sets the next value through the onChange function", () => {
     let newValue = "";
-    const onChange = (value) => {
+    const onChange = (value: string) => {
       newValue = value;
     };
     render(
@@ -275,12 +274,7 @@ describe("Radio Button", () => {
       .toJSON();
     const row = renderer
       .create(
-        <RadioGroup
-          labelText="row"
-          name="row"
-          id="row"
-          layout={LayoutTypes.Row}
-        >
+        <RadioGroup labelText="row" name="row" id="row" layout="row">
           <Radio value="2" labelText="Radio 2" id="radio-2" />
           <Radio value="3" labelText="Radio 3" id="radio-3" />
         </RadioGroup>

package/src/components/RadioGroup/RadioGroup.tsx

@@ -12,7 +12,8 @@ import HelperErrorText, {
 } from "../HelperErrorText/HelperErrorText";
 import { spacing } from "../../theme/foundations/spacing";
 import Radio from "../Radio/Radio";
-import { LayoutTypes } from "../../helpers/enums";
+import { LayoutTypes } from "../../helpers/types";
+
 export interface RadioGroupProps {
   /** Additional class name. */
   className?: string;
@@ -75,7 +76,7 @@ export const RadioGroup = chakra(
         isInvalid = false,
         isRequired = false,
         labelText,
-        layout = LayoutTypes.Column,
+        layout = "column",
         name,
         onChange,
         showHelperInvalidText = true,
@@ -87,7 +88,7 @@ export const RadioGroup = chakra(
       const footnote: HelperErrorTextType = isInvalid
         ? invalidText
         : helperText;
-      const spacingProp = layout === LayoutTypes.Column ? spacing.s : spacing.l;
+      const spacingProp = layout === "column" ? spacing.s : spacing.l;
       const newChildren: JSX.Element[] = [];
       // Get the Chakra-based styles for the custom elements in this component.
       const styles = useMultiStyleConfig("RadioGroup", { isFullWidth });
@@ -110,29 +111,32 @@ export const RadioGroup = chakra(
       }
 
       // Go through the Radio children and update them as needed.
-      React.Children.map(children, (child: React.ReactElement, key) => {
-        if (child?.type !== Radio) {
-          // Special case for Storybook MDX documentation.
-          if (child.props?.mdxType && child.props?.mdxType === "Radio") {
-            noop();
-          } else {
-            console.warn(
-              "NYPL Reservoir RadioGroup: Only `Radio` components are allowed " +
-                "inside the `RadioGroup` component."
-            );
+      React.Children.map(
+        children as JSX.Element,
+        (child: React.ReactElement, key) => {
+          if (child?.type !== Radio) {
+            // Special case for Storybook MDX documentation.
+            if (child.props?.mdxType && child.props?.mdxType === "Radio") {
+              noop();
+            } else {
+              console.warn(
+                "NYPL Reservoir RadioGroup: Only `Radio` components are allowed " +
+                  "inside the `RadioGroup` component."
+              );
+            }
           }
-        }
 
-        if (child !== undefined && child !== null) {
-          const newProps = {
-            key,
-            isDisabled,
-            isInvalid,
-            isRequired,
-          };
-          newChildren.push(React.cloneElement(child, newProps));
+          if (child !== undefined && child !== null) {
+            const newProps = {
+              key,
+              isDisabled,
+              isInvalid,
+              isRequired,
+            };
+            newChildren.push(React.cloneElement(child, newProps));
+          }
         }
-      });
+      );
 
       return (
         <Fieldset
@@ -151,10 +155,10 @@ export const RadioGroup = chakra(
           </ChakraRadioGroup>
           {footnote && showHelperInvalidText && (
             <HelperErrorText
-              additionalStyles={styles.helperErrorText}
               id={`${id}-helperErrorText`}
               isInvalid={isInvalid}
               text={footnote}
+              __css={styles.helperErrorText}
             />
           )}
         </Fieldset>

package/src/components/SearchBar/SearchBar.stories.mdx

@@ -60,7 +60,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 

package/src/components/SearchBar/SearchBar.test.tsx

@@ -164,7 +164,7 @@ describe("SearchBar", () => {
 
   it("calls the Select onChange callback function", () => {
     let selectValue = "Songs";
-    selectProps.onChange = (e) => (selectValue = e.target.value);
+    selectProps.onChange = (e) => (selectValue = (e.target as any).value);
     selectProps.value = selectValue;
 
     render(

package/src/components/SearchBar/SearchBar.tsx

@@ -2,15 +2,12 @@ import { Box, chakra, useMultiStyleConfig } from "@chakra-ui/react";
 import * as React from "react";
 
 import Button from "../Button/Button";
-import { ButtonTypes } from "../Button/ButtonTypes";
 import ComponentWrapper from "../ComponentWrapper/ComponentWrapper";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 import Icon from "../Icons/Icon";
-import { IconAlign, IconNames, IconSizes } from "../Icons/IconTypes";
 import Select from "../Select/Select";
-import { SelectTypes } from "../Select/SelectTypes";
 import TextInput from "../TextInput/TextInput";
-import { TextInputTypes, TextInputVariants } from "../TextInput/TextInputTypes";
+
 interface BaseProps {
   labelText: string;
   name: string;
@@ -24,6 +21,7 @@ interface BaseProps {
 // Internal interfaces that are used only for `SearchBar` props.
 export interface SelectProps extends BaseProps {
   optionsData: string[];
+  onChange?: (event: React.FormEvent) => void;
 }
 export interface TextInputProps extends BaseProps {
   placeholder?: string;
@@ -57,8 +55,8 @@ export interface SearchBarProps {
   labelText: string;
   /** Adds 'method' property to the `form` element. */
   method?: string;
-  /** Sets the `Button` variant type to `ButtonTypes.NoBrand` when true;
-   * false by default which sets the type to `ButtonTypes.Primary`. */
+  /** Sets the `Button` variant type to `noBrand` when true;
+   * false by default which sets the type to `primary`. */
   noBrandButtonType?: boolean;
   /** Handler function when the form is submitted. */
   onSubmit: (event: React.FormEvent) => void;
@@ -77,7 +75,7 @@ export interface SearchBarProps {
 export const SearchBar = chakra((props: SearchBarProps) => {
   const {
     action,
-    buttonOnClick = null,
+    buttonOnClick,
     className,
     descriptionText,
     headingText,
@@ -111,9 +109,7 @@ export const SearchBar = chakra((props: SearchBarProps) => {
   const textInputPlaceholder = `${inputPlaceholder} ${
     isRequired ? "(Required)" : ""
   }`;
-  const buttonType = noBrandButtonType
-    ? ButtonTypes.NoBrand
-    : ButtonTypes.Primary;
+  const buttonType = noBrandButtonType ? "noBrand" : "primary";
   const searchBarButtonStyles = {
     borderLeftRadius: "none",
     borderRightRadius: { base: "none", md: "sm" },
@@ -129,13 +125,13 @@ export const SearchBar = chakra((props: SearchBarProps) => {
   // Render the `Select` component.
   const selectElem = selectProps && (
     <Select
-      additionalStyles={styles.select}
       id={`searchbar-select-${id}`}
       labelText={selectProps?.labelText}
       name={selectProps?.name}
       onChange={selectProps?.onChange}
-      selectType={SelectTypes.SearchBar}
+      selectType="searchbar"
       value={selectProps?.value}
+      __css={styles.select}
       {...stateProps}
     >
       {selectProps?.optionsData.map((option) => (
@@ -153,12 +149,8 @@ export const SearchBar = chakra((props: SearchBarProps) => {
       name={textInputProps?.name}
       onChange={textInputProps?.onChange}
       placeholder={textInputPlaceholder}
-      textInputType={
-        selectElem
-          ? TextInputVariants.SearchBarSelect
-          : TextInputVariants.SearchBar
-      }
-      type={TextInputTypes.text}
+      textInputType={selectElem ? "searchBarSelect" : "searchBar"}
+      type="text"
       value={textInputProps?.value}
       {...stateProps}
     />
@@ -166,18 +158,18 @@ export const SearchBar = chakra((props: SearchBarProps) => {
   // Render the `Button` component.
   const buttonElem = (
     <Button
-      additionalStyles={searchBarButtonStyles}
       buttonType={buttonType}
       id={`searchbar-button-${id}`}
       isDisabled={isDisabled}
       onClick={buttonOnClick}
       type="submit"
+      __css={searchBarButtonStyles}
     >
       <Icon
-        align={IconAlign.Left}
+        align="left"
         id={`searchbar-icon-${id}`}
-        name={IconNames.Search}
-        size={IconSizes.Small}
+        name="search"
+        size="small"
       />
       Search
     </Button>

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

@@ -34,7 +34,6 @@ exports[`SearchBar renders the UI snapshot correctly 1`] = `
       className="chakra-button css-1me3d5y"
       data-testid="button"
       id="searchbar-button-basic"
-      onClick={null}
       type="submit"
     >
       <svg
@@ -240,7 +239,6 @@ exports[`SearchBar renders the UI snapshot correctly 2`] = `
       className="chakra-button css-1me3d5y"
       data-testid="button"
       id="searchbar-button-withSelect"
-      onClick={null}
       type="submit"
     >
       <svg
@@ -327,7 +325,6 @@ exports[`SearchBar renders the UI snapshot correctly 3`] = `
       className="chakra-button css-1me3d5y"
       data-testid="button"
       id="searchbar-button-withoutHelperText"
-      onClick={null}
       type="submit"
     >
       <svg
@@ -402,7 +399,6 @@ exports[`SearchBar renders the UI snapshot correctly 4`] = `
       className="chakra-button css-1me3d5y"
       data-testid="button"
       id="searchbar-button-invalidState"
-      onClick={null}
       type="submit"
     >
       <svg
@@ -478,7 +474,6 @@ exports[`SearchBar renders the UI snapshot correctly 5`] = `
       data-testid="button"
       disabled={true}
       id="searchbar-button-disabledState"
-      onClick={null}
       type="submit"
     >
       <svg
@@ -555,7 +550,6 @@ exports[`SearchBar renders the UI snapshot correctly 6`] = `
       data-testid="button"
       disabled={true}
       id="searchbar-button-requiredState"
-      onClick={null}
       type="submit"
     >
       <svg
@@ -632,7 +626,6 @@ exports[`SearchBar renders the UI snapshot correctly 7`] = `
       data-testid="button"
       disabled={true}
       id="searchbar-button-noBrandButtonType"
-      onClick={null}
       type="submit"
     >
       <svg
@@ -694,7 +687,6 @@ exports[`SearchBar renders the UI snapshot correctly 8`] = `
       className="chakra-button css-1me3d5y"
       data-testid="button"
       id="searchbar-button-withHeading"
-      onClick={null}
       type="submit"
     >
       <svg
@@ -755,7 +747,6 @@ exports[`SearchBar renders the UI snapshot correctly 9`] = `
       className="chakra-button css-1me3d5y"
       data-testid="button"
       id="searchbar-button-withDescription"
-      onClick={null}
       type="submit"
     >
       <svg
@@ -822,7 +813,6 @@ exports[`SearchBar renders the UI snapshot correctly 10`] = `
       className="chakra-button css-1me3d5y"
       data-testid="button"
       id="searchbar-button-withHeadingAndDescription"
-      onClick={null}
       type="submit"
     >
       <svg
@@ -897,7 +887,6 @@ exports[`SearchBar renders the UI snapshot correctly 11`] = `
       className="chakra-button css-1me3d5y"
       data-testid="button"
       id="searchbar-button-chakra"
-      onClick={null}
       type="submit"
     >
       <svg
@@ -985,7 +974,6 @@ exports[`SearchBar renders the UI snapshot correctly 12`] = `
       className="chakra-button css-1me3d5y"
       data-testid="button"
       id="searchbar-button-props"
-      onClick={null}
       type="submit"
     >
       <svg

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.27.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>

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"
         >