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

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

@@ -19,7 +19,6 @@ exports[`ProgressIndicator Renders the UI snapshot correctly 1`] = `
       id="linearBasic"
     >
       <div
-        aria-label={null}
         aria-labelledby="linearBasic-label"
         aria-valuemax={100}
         aria-valuemin={0}
@@ -51,7 +50,6 @@ exports[`ProgressIndicator Renders the UI snapshot correctly 2`] = `
     className="css-0"
   >
     <div
-      aria-label={null}
       aria-labelledby="circularBasic-label"
       aria-valuemax={100}
       aria-valuemin={0}
@@ -112,7 +110,6 @@ exports[`ProgressIndicator Renders the UI snapshot correctly 3`] = `
     >
       <div
         aria-label="Linear"
-        aria-labelledby={null}
         aria-valuemax={100}
         aria-valuemin={0}
         aria-valuenow={50}
@@ -138,7 +135,6 @@ exports[`ProgressIndicator Renders the UI snapshot correctly 4`] = `
   >
     <div
       aria-label="Circular"
-      aria-labelledby={null}
       aria-valuemax={100}
       aria-valuemin={0}
       aria-valuenow={50}
@@ -191,7 +187,6 @@ exports[`ProgressIndicator Renders the UI snapshot correctly 5`] = `
       id="linearIndeterminate"
     >
       <div
-        aria-label={null}
         aria-labelledby="linearIndeterminate-label"
         aria-valuemax={100}
         aria-valuemin={0}
@@ -217,7 +212,6 @@ exports[`ProgressIndicator Renders the UI snapshot correctly 6`] = `
     className="css-0"
   >
     <div
-      aria-label={null}
       aria-labelledby="circularIndeterminate-label"
       aria-valuemax={100}
       aria-valuemin={0}
@@ -276,7 +270,6 @@ exports[`ProgressIndicator Renders the UI snapshot correctly 7`] = `
       id="linearDarkMode"
     >
       <div
-        aria-label={null}
         aria-labelledby="linearDarkMode-label"
         aria-valuemax={100}
         aria-valuemin={0}
@@ -308,7 +301,6 @@ exports[`ProgressIndicator Renders the UI snapshot correctly 8`] = `
     className="css-0"
   >
     <div
-      aria-label={null}
       aria-labelledby="circularDarkMode-label"
       aria-valuemax={100}
       aria-valuemin={0}
@@ -375,7 +367,6 @@ exports[`ProgressIndicator Renders the UI snapshot correctly 9`] = `
       id="chakra"
     >
       <div
-        aria-label={null}
         aria-labelledby="chakra-label"
         aria-valuemax={100}
         aria-valuemin={0}
@@ -419,7 +410,6 @@ exports[`ProgressIndicator Renders the UI snapshot correctly 10`] = `
       id="props"
     >
       <div
-        aria-label={null}
         aria-labelledby="props-label"
         aria-valuemax={100}
         aria-valuemin={0}

package/src/components/Radio/Radio.stories.mdx

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

package/src/components/Radio/Radio.tsx

@@ -4,6 +4,7 @@ import {
   useMultiStyleConfig,
 } from "@chakra-ui/react";
 import * as React from "react";
+import { AriaAttributes } from "../../utils/interfaces";
 
 import HelperErrorText, {
   HelperErrorTextType,
@@ -69,7 +70,7 @@ export const Radio = chakra(
     } = props;
     const styles = useMultiStyleConfig("Radio", {});
     const footnote = isInvalid ? invalidText : helperText;
-    const attributes = {};
+    const ariaAttributes: AriaAttributes = {};
 
     if (!id) {
       console.warn(
@@ -83,10 +84,12 @@ export const Radio = chakra(
           "NYPL Reservoir Radio: `labelText` must be a string when `showLabel` is false."
         );
       }
-      attributes["aria-label"] =
-        labelText && footnote ? `${labelText} - ${footnote}` : labelText;
+      ariaAttributes["aria-label"] =
+        labelText && footnote
+          ? `${labelText} - ${footnote}`
+          : (labelText as string);
     } else if (footnote) {
-      attributes["aria-describedby"] = `${id}-helperText`;
+      ariaAttributes["aria-describedby"] = `${id}-helperText`;
     }
 
     return (
@@ -104,17 +107,17 @@ export const Radio = chakra(
           ref={ref}
           alignItems="flex-start"
           __css={styles}
-          {...attributes}
+          {...ariaAttributes}
           {...rest}
         >
           {showLabel && labelText}
         </ChakraRadio>
         {footnote && showHelperInvalidText && (
           <HelperErrorText
-            additionalStyles={styles.helperErrorText}
             id={`${id}-helperText`}
             isInvalid={isInvalid}
             text={footnote}
+            __css={styles.helperErrorText}
           />
         )}
       </>

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
 
@@ -164,8 +164,8 @@ screenreaders to pick up this entire search form.
 
 Resources:
 
-- [Reservoir Select](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/components-form-elements-select--select-with-controls)
-- [Reservoir TextInput](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/components-form-elements-textinput--text-input-with-controls)
+- [Reservoir Select](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/components-form-elements-select--select-with-controls)
+- [Reservoir TextInput](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/components-form-elements-textinput--text-input-with-controls)
 - [a11ymatters Accessible Search Form](https://www.a11ymatters.com/pattern/accessible-search/)
 - [MDN ARIA: search role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/search_role)
 
@@ -310,7 +310,7 @@ const helperText = "";
 While the Design System does not implement an `Autosuggest` or `Autocomplete`
 component, it does show a pattern for using the `react-autosuggest` package.
 In this example, we're using the `react-autosuggest` example found in the
-[Basic Autosuggest story](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/autosuggest--autosuggest-library)
+[Basic Autosuggest story](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/development-guide-autosuggest--autosuggest-library)
 as the main component inside the `SearchBar` component.
 
 In order to render this custom input element in the `SearchBar` component, pass

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
@@ -214,8 +213,8 @@ exports[`SearchBar renders the UI snapshot correctly 2`] = `
             </svg>
           </div>
         </div>
-        
       </div>
+      
     </div>
     <div
       className="css-1xdhyk6"
@@ -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