@nypl/design-system-react-components 0.25.5 → 0.25.9

package/src/components/Pagination/Pagination.stories.mdx

@@ -1,12 +1,13 @@
 import {
-  Meta,
-  Story,
   ArgsTable,
   Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 import { withQuery } from "@storybook/addon-queryparams";
+
 import Pagination from "./Pagination";
 import * as stories from "./Pagination.stories.tsx";
 import { getCategory } from "../../utils/componentCategories";
@@ -18,15 +19,16 @@ import { getCategory } from "../../utils/componentCategories";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=17226%3A932",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=17226%3A932",
     },
     jest: ["Pagination.test.tsx"],
   }}
   argTypes={{
-    id: { table: { disable: true } },
-    getPageHref: { table: { disable: true } },
-    onPageChange: { table: { disable: true } },
+    className: { control: false },
+    getPageHref: { control: false },
+    id: { control: false },
+    initialPage: { table: { defaultValue: { summary: 1 } } },
+    onPageChange: { control: false },
   }}
 />
 
@@ -70,7 +72,11 @@ const getPageHref = (selectedPage: number) => {
   <Story
     name="Pagination with URL Updates"
     args={{
+      className: undefined,
+      getPageHref: undefined,
+      id: "pagination-id",
       initialPage: 1,
+      onPageChange: undefined,
       pageCount: 10,
     }}
   >
@@ -103,7 +109,11 @@ const onPageChange = (currentPage: number) => {
   <Story
     name="Pagination with Unchanging URL"
     args={{
+      className: undefined,
+      getPageHref: undefined,
+      id: "pagination-id-2",
       initialPage: 7,
+      onPageChange: undefined,
       pageCount: 100,
     }}
   >

package/src/components/Pagination/Pagination.tsx

@@ -31,9 +31,9 @@ export interface PaginationProps {
 const Pagination: React.FC<PaginationProps> = (props: PaginationProps) => {
   const {
     className,
-    initialPage = 1,
     getPageHref,
     id = generateUUID(),
+    initialPage = 1,
     onPageChange = () => {},
     pageCount,
   } = props;

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

@@ -18,6 +18,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 1`] = `
         className="css-1858g8z"
         href="page=1"
         id="firstPage-1"
+        rel={null}
+        target={null}
       >
         1
       </a>
@@ -29,6 +31,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 1`] = `
         className="css-0"
         href="page=2"
         id="firstPage-2"
+        rel={null}
+        target={null}
       >
         2
       </a>
@@ -40,6 +44,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 1`] = `
         className="css-0"
         href="page=3"
         id="firstPage-3"
+        rel={null}
+        target={null}
       >
         3
       </a>
@@ -51,6 +57,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 1`] = `
         className="css-0"
         href="page=4"
         id="firstPage-4"
+        rel={null}
+        target={null}
       >
         4
       </a>
@@ -62,6 +70,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 1`] = `
         className="css-0"
         href="page=5"
         id="firstPage-5"
+        rel={null}
+        target={null}
       >
         5
       </a>
@@ -76,6 +86,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 1`] = `
         className="css-0"
         href="page=10"
         id="firstPage-10"
+        rel={null}
+        target={null}
       >
         10
       </a>
@@ -86,6 +98,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 1`] = `
         className="css-0"
         href="page=2"
         id="firstPage-Next"
+        rel={null}
+        target={null}
       >
         Next
       </a>
@@ -111,6 +125,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 2`] = `
         className="css-0"
         href="page=9"
         id="lastPage-Previous"
+        rel={null}
+        target={null}
       >
         Previous
       </a>
@@ -122,6 +138,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 2`] = `
         className="css-0"
         href="page=1"
         id="lastPage-1"
+        rel={null}
+        target={null}
       >
         1
       </a>
@@ -136,6 +154,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 2`] = `
         className="css-0"
         href="page=6"
         id="lastPage-6"
+        rel={null}
+        target={null}
       >
         6
       </a>
@@ -147,6 +167,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 2`] = `
         className="css-0"
         href="page=7"
         id="lastPage-7"
+        rel={null}
+        target={null}
       >
         7
       </a>
@@ -158,6 +180,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 2`] = `
         className="css-0"
         href="page=8"
         id="lastPage-8"
+        rel={null}
+        target={null}
       >
         8
       </a>
@@ -169,6 +193,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 2`] = `
         className="css-0"
         href="page=9"
         id="lastPage-9"
+        rel={null}
+        target={null}
       >
         9
       </a>
@@ -180,6 +206,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 2`] = `
         className="css-1858g8z"
         href="page=10"
         id="lastPage-10"
+        rel={null}
+        target={null}
       >
         10
       </a>
@@ -205,6 +233,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 3`] = `
         className="css-0"
         href="page=4"
         id="middlePage-Previous"
+        rel={null}
+        target={null}
       >
         Previous
       </a>
@@ -216,6 +246,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 3`] = `
         className="css-0"
         href="page=1"
         id="middlePage-1"
+        rel={null}
+        target={null}
       >
         1
       </a>
@@ -230,6 +262,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 3`] = `
         className="css-0"
         href="page=4"
         id="middlePage-4"
+        rel={null}
+        target={null}
       >
         4
       </a>
@@ -241,6 +275,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 3`] = `
         className="css-1858g8z"
         href="page=5"
         id="middlePage-5"
+        rel={null}
+        target={null}
       >
         5
       </a>
@@ -252,6 +288,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 3`] = `
         className="css-0"
         href="page=6"
         id="middlePage-6"
+        rel={null}
+        target={null}
       >
         6
       </a>
@@ -266,6 +304,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 3`] = `
         className="css-0"
         href="page=10"
         id="middlePage-10"
+        rel={null}
+        target={null}
       >
         10
       </a>
@@ -276,6 +316,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 3`] = `
         className="css-0"
         href="page=6"
         id="middlePage-Next"
+        rel={null}
+        target={null}
       >
         Next
       </a>

package/src/components/Placeholder/Placeholder.tsx

@@ -1,24 +1,17 @@
 import * as React from "react";
-import bem from "../../utils/bem";
 
 export interface PlaceholderProps {
-  /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-  blockName?: string;
-  /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-  modifiers?: string[];
+  /** Modifier string for the classname. */
+  variant?: string;
 }
 
 /** Creates a gray box with an editable string for dropping in spaces
  * within components or on templates where a component will be but
  * that hasn't been created yet
  */
-export default function Placeholder(
-  props: React.PropsWithChildren<PlaceholderProps>
-) {
-  const { modifiers = [], blockName } = props;
-  return (
-    <div className={bem("placeholder", modifiers, blockName)}>
-      {props.children}
-    </div>
-  );
+export default function Placeholder({
+  children,
+  variant,
+}: React.PropsWithChildren<PlaceholderProps>) {
+  return <div className={`placeholder placeholder-${variant}`}>{children}</div>;
 }

package/src/components/ProgressIndicator/ProgressIndicator.stories.mdx

@@ -1,22 +1,32 @@
+import { Box } from "@chakra-ui/react";
 import {
-  Meta,
-  Story,
   ArgsTable,
   Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
-import { Box } from "@chakra-ui/react";
 
+import { GridGaps } from "../Grid/GridTypes";
 import ProgressIndicator from "./ProgressIndicator";
 import {
   ProgressIndicatorSizes,
   ProgressIndicatorTypes,
 } from "./ProgressIndicatorTypes";
+import SimpleGrid from "../Grid/SimpleGrid";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
-import SimpleGrid from "../Grid/SimpleGrid";
-import { GridGaps } from "../Grid/GridTypes";
+import { getStorybookEnumValues } from "../../utils/utils";
+
+export const sizesEnumValues = getStorybookEnumValues(
+  ProgressIndicatorSizes,
+  "ProgressIndicatorSizes"
+);
+export const typesEnumValues = getStorybookEnumValues(
+  ProgressIndicatorTypes,
+  "ProgressIndicatorTypes"
+);
 
 <Meta
   title={getCategory("ProgressIndicator")}
@@ -25,13 +35,34 @@ import { GridGaps } from "../Grid/GridTypes";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=37638%3A23842",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=37638%3A23842",
     },
     jest: ["ProgressIndicator.test.tsx"],
   }}
   argTypes={{
-    id: { table: { disable: true } },
+    darkMode: {
+      table: { defaultValue: { summary: false } },
+    },
+    id: { control: false },
+    indicatorType: {
+      control: { type: "radio" },
+      table: { defaultValue: { summary: "ProgressIndicatorTypes.Linear" } },
+      options: typesEnumValues.options,
+    },
+    isIndeterminate: {
+      table: { defaultValue: { summary: false } },
+    },
+    showLabel: {
+      table: { defaultValue: { summary: true } },
+    },
+    size: {
+      control: { type: "radio" },
+      table: { defaultValue: { summary: "ProgressIndicatorSizes.Default" } },
+      options: sizesEnumValues.options,
+    },
+    value: {
+      table: { defaultValue: { summary: 0 } },
+    },
   }}
 />
 
@@ -40,28 +71,35 @@ import { GridGaps } from "../Grid/GridTypes";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.4`   |
-| Latest            | `0.25.4`   |
+| Latest            | `0.25.8`   |
 
 <Description of={ProgressIndicator} />
 
 <Canvas withToolbar>
   <Story
-    name="Basic with props"
+    name="ProgressIndicator with Controls"
     args={{
       darkMode: false,
-      indicatorType: ProgressIndicatorTypes.Linear,
+      id: "progressIndicator-id",
+      indicatorType: "ProgressIndicatorTypes.Linear",
       isIndeterminate: false,
       labelText: "Progress",
       showLabel: true,
-      size: ProgressIndicatorSizes.Default,
+      size: "ProgressIndicatorSizes.Default",
       value: 50,
     }}
   >
-    {(args) => <ProgressIndicator {...args} />}
+    {(args) => (
+      <ProgressIndicator
+        {...args}
+        indicatorType={typesEnumValues.getValue(args.indicatorType)}
+        size={sizesEnumValues.getValue(args.size)}
+      />
+    )}
   </Story>
 </Canvas>
 
-<ArgsTable story="Basic with props" />
+<ArgsTable story="ProgressIndicator with Controls" />
 
 ## Linear Type
 
@@ -71,20 +109,15 @@ dialogs, etc.
 <Canvas>
   <Story
     name="Linear Type"
-    args={{
-      darkMode: false,
-      indicatorType: ProgressIndicatorTypes.Linear,
-      isIndeterminate: false,
-      labelText: "Linear Progress Type",
-      showLabel: true,
-      size: ProgressIndicatorSizes.Default,
-      value: 50,
-    }}
     argTypes={{
       indicatorType: { table: { disable: true } },
     }}
   >
-    {(args) => <ProgressIndicator {...args} />}
+    <ProgressIndicator
+      indicatorType={ProgressIndicatorTypes.Linear}
+      labelText="Linear Progress Type"
+      value={50}
+    />
   </Story>
 </Canvas>
 
@@ -97,20 +130,15 @@ full-screen loading. Set the `indicatorType` prop to
 <Canvas>
   <Story
     name="Circular Type"
-    args={{
-      darkMode: false,
-      indicatorType: ProgressIndicatorTypes.Circular,
-      isIndeterminate: false,
-      labelText: "Circular Progress Type",
-      showLabel: true,
-      size: ProgressIndicatorSizes.Default,
-      value: 50,
-    }}
     argTypes={{
       indicatorType: { table: { disable: true } },
     }}
   >
-    {(args) => <ProgressIndicator {...args} />}
+    <ProgressIndicator
+      indicatorType={ProgressIndicatorTypes.Circular}
+      labelText="Linear Progress Type"
+      value={50}
+    />
   </Story>
 </Canvas>
 
@@ -146,13 +174,13 @@ percentage will not displayed.
   <DSProvider>
     <SimpleGrid columns={1} gap={GridGaps.Medium}>
       <ProgressIndicator
-        labelText="Default 48px size"
         indicatorType={ProgressIndicatorTypes.Circular}
+        labelText="Default 48px size"
         value={50}
       />
       <ProgressIndicator
-        labelText="Small 24px size"
         indicatorType={ProgressIndicatorTypes.Circular}
+        labelText="Small 24px size"
         size={ProgressIndicatorSizes.Small}
         value={50}
       />
@@ -175,14 +203,14 @@ the progress element to provide a description of the progress for screen readers
     <SimpleGrid columns={1} gap={GridGaps.Medium}>
       <ProgressIndicator
         labelText="This label will be added through aria-label"
-        value={50}
         showLabel={false}
+        value={50}
       />
       <ProgressIndicator
-        labelText="This label will be added through aria-label"
         indicatorType={ProgressIndicatorTypes.Circular}
-        value={50}
+        labelText="This label will be added through aria-label"
         showLabel={false}
+        value={50}
       />
     </SimpleGrid>
   </DSProvider>
@@ -198,14 +226,14 @@ exact value or progress of the task is unknown.
   <DSProvider>
     <SimpleGrid columns={1} gap={GridGaps.Medium}>
       <ProgressIndicator
-        labelText="Indeterminate state"
         isIndeterminate
+        labelText="Indeterminate state"
         value={50}
       />
       <ProgressIndicator
-        labelText="Indeterminate state"
         indicatorType={ProgressIndicatorTypes.Circular}
         isIndeterminate
+        labelText="Indeterminate state"
         value={50}
       />
     </SimpleGrid>
@@ -225,10 +253,10 @@ Note: the background is manually set to better showcase the `darkMode` prop.
       <SimpleGrid columns={1} gap={GridGaps.Medium}>
         <ProgressIndicator labelText="Dark Mode" value={50} darkMode />
         <ProgressIndicator
-          labelText="Dark Mode"
+          darkMode
           indicatorType={ProgressIndicatorTypes.Circular}
+          labelText="Dark Mode"
           value={50}
-          darkMode
         />
       </SimpleGrid>
     </Box>
@@ -256,8 +284,8 @@ function ProgressIndicatorExample() {
     <SimpleGrid columns={1} gap={GridGaps.Medium}>
       <ProgressIndicator labelText="Progress example" value={value} />
       <ProgressIndicator
-        labelText="Progress example"
         indicatorType={ProgressIndicatorTypes.Circular}
+        labelText="Progress example"
         value={value}
       />
     </SimpleGrid>
@@ -277,8 +305,8 @@ export function ProgressIndicatorExample() {
     <SimpleGrid columns={1} gap={GridGaps.Medium}>
       <ProgressIndicator labelText="Progress example" value={value} />
       <ProgressIndicator
-        labelText="Progress example"
         indicatorType={ProgressIndicatorTypes.Circular}
+        labelText="Progress example"
         value={value}
       />
     </SimpleGrid>

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

@@ -1,16 +1,16 @@
+import { HStack } from "@chakra-ui/react";
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
+  Canvas,
   Description,
+  Meta,
+  Story,
 } from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
-import { HStack } from "@chakra-ui/react";
 
+import Radio from "./Radio";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
-import Radio from "./Radio";
 
 <Meta
   title={getCategory("Radio")}
@@ -19,16 +19,32 @@ import Radio from "./Radio";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11895%3A742",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11895%3A742",
     },
     jest: ["Radio.test.tsx"],
   }}
   argTypes={{
-    className: { table: { disable: true } },
-    id: { table: { disable: true } },
-    isChecked: { table: { disable: true } },
-    onChange: { table: { disable: true } },
+    className: { control: false },
+    id: { control: false },
+    isChecked: { control: false },
+    isDisabled: {
+      table: { defaultValue: { summary: false } },
+    },
+    isInvalid: {
+      table: { defaultValue: { summary: false } },
+    },
+    isRequired: {
+      table: { defaultValue: { summary: false } },
+    },
+    key: { table: { disable: true } },
+    onChange: { control: false },
+    ref: { table: { disable: true } },
+    showHelperInvalidText: {
+      table: { defaultValue: { summary: true } },
+    },
+    showLabel: {
+      table: { defaultValue: { summary: true } },
+    },
   }}
 />
 
@@ -37,7 +53,7 @@ import Radio from "./Radio";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.22.0`   |
-| Latest            | `0.25.0`   |
+| Latest            | `0.25.9`   |
 
 <Description of={Radio} />
 
@@ -50,16 +66,20 @@ component will handle all the states and data management.
   <Story
     name="Radio"
     args={{
+      className: undefined,
+      helperText: "This is the helper text!",
+      id: "radio-id",
+      invalidText: "This is the error text :(",
+      isChecked: undefined,
+      isDisabled: false,
+      isInvalid: false,
+      isRequired: false,
       labelText: "Test Label",
-      showLabel: true,
-      id: "test_id",
       name: "test_name",
+      onChange: undefined,
+      showHelperInvalidText: true,
+      showLabel: true,
       value: "1",
-      isDisabled: false,
-      isRequired: false,
-      isInvalid: false,
-      helperText: "This is the helper text!",
-      invalidText: "This is the error text :(",
     }}
   >
     {(args) => <Radio {...args} />}

package/src/components/Radio/Radio.tsx

@@ -5,20 +5,22 @@ import {
   useMultiStyleConfig,
 } from "@chakra-ui/react";
 
+import HelperErrorText, {
+  HelperErrorTextType,
+} from "../HelperErrorText/HelperErrorText";
 import generateUUID from "../../helpers/generateUUID";
-import HelperErrorText from "../HelperErrorText/HelperErrorText";
 
 export interface RadioProps {
   /** Additional class name. */
   className?: string;
-  /** Optional string to populate the HelperErrorText for the error state
-   * when `isInvalid` is true.
-   */
-  invalidText?: string;
   /** Optional string to populate the HelperErrorText for the standard state. */
-  helperText?: string;
+  helperText?: HelperErrorTextType;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
+  /** Optional string to populate the HelperErrorText for the error state
+   * when `isInvalid` is true.
+   */
+  invalidText?: HelperErrorTextType;
   /** When using the Radio as a "controlled" form element, you can specify the
    * `Radio`'s checked state using this prop. You must also pass an onChange prop.
    * Learn more about controlled and uncontrolled form fields: https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ */
@@ -100,9 +102,11 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>((props, ref?) => {
       </ChakraRadio>
       {footnote && showHelperInvalidText && (
         <Box __css={styles.helper} aria-disabled={isDisabled}>
-          <HelperErrorText isInvalid={isInvalid} id={`${id}-helperText`}>
-            {footnote}
-          </HelperErrorText>
+          <HelperErrorText
+            id={`${id}-helperText`}
+            isInvalid={isInvalid}
+            text={footnote}
+          />
         </Box>
       )}
     </>