@nypl/design-system-react-components 0.25.3 → 0.25.7

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

@@ -0,0 +1,357 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProgressIndicator Renders the UI snapshot correctly 1`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="linearBasic"
+    id="linearBasic-label"
+  >
+    Linear
+  </label>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-kdwx3d"
+      id="linearBasic"
+    >
+      <div
+        aria-label={null}
+        aria-labelledby="linearBasic-label"
+        aria-valuemax={100}
+        aria-valuemin={0}
+        aria-valuenow={50}
+        className="css-1jy0d03"
+        role="progressbar"
+        style={
+          Object {
+            "width": "50%",
+          }
+        }
+      />
+    </div>
+    <div
+      className="css-0"
+    >
+      50
+      %
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ProgressIndicator Renders the UI snapshot correctly 2`] = `
+<div
+  className="css-0"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      aria-label={null}
+      aria-labelledby="circularBasic-label"
+      aria-valuemax={100}
+      aria-valuemin={0}
+      aria-valuenow={50}
+      className="chakra-progress css-120wkjd"
+      id="circularBasic"
+      role="progressbar"
+    >
+      <svg
+        className="css-kn46u7"
+        viewBox="0 0 100 100"
+      >
+        <circle
+          className="chakra-progress__track css-1bhxzgy"
+          cx={50}
+          cy={50}
+          r={42}
+          strokeWidth="10px"
+        />
+        <circle
+          className="chakra-progress__indicator css-5hfhx0"
+          cx={50}
+          cy={50}
+          r={42}
+          strokeDasharray="132 132"
+          strokeDashoffset={66}
+          strokeWidth="10px"
+        />
+      </svg>
+      <div
+        className="css-f1j64i"
+      >
+        50
+        %
+      </div>
+    </div>
+    <label
+      className="css-0"
+      htmlFor="circularBasic"
+      id="circularBasic-label"
+    >
+      Circular
+    </label>
+  </div>
+</div>
+`;
+
+exports[`ProgressIndicator Renders the UI snapshot correctly 3`] = `
+<div
+  className="css-0"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-kdwx3d"
+      id="linearNoLabel"
+    >
+      <div
+        aria-label="Linear"
+        aria-labelledby={null}
+        aria-valuemax={100}
+        aria-valuemin={0}
+        aria-valuenow={50}
+        className="css-1jy0d03"
+        role="progressbar"
+        style={
+          Object {
+            "width": "50%",
+          }
+        }
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ProgressIndicator Renders the UI snapshot correctly 4`] = `
+<div
+  className="css-0"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      aria-label="Circular"
+      aria-labelledby={null}
+      aria-valuemax={100}
+      aria-valuemin={0}
+      aria-valuenow={50}
+      className="chakra-progress css-120wkjd"
+      id="circularNoLabel"
+      role="progressbar"
+    >
+      <svg
+        className="css-kn46u7"
+        viewBox="0 0 100 100"
+      >
+        <circle
+          className="chakra-progress__track css-1bhxzgy"
+          cx={50}
+          cy={50}
+          r={42}
+          strokeWidth="10px"
+        />
+        <circle
+          className="chakra-progress__indicator css-5hfhx0"
+          cx={50}
+          cy={50}
+          r={42}
+          strokeDasharray="132 132"
+          strokeDashoffset={66}
+          strokeWidth="10px"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ProgressIndicator Renders the UI snapshot correctly 5`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="linearIndeterminate"
+    id="linearIndeterminate-label"
+  >
+    Linear
+  </label>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-kdwx3d"
+      id="linearIndeterminate"
+    >
+      <div
+        aria-label={null}
+        aria-labelledby="linearIndeterminate-label"
+        aria-valuemax={100}
+        aria-valuemin={0}
+        className="css-1demtxk"
+        data-indeterminate=""
+        role="progressbar"
+        style={
+          Object {
+            "width": "0%",
+          }
+        }
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ProgressIndicator Renders the UI snapshot correctly 6`] = `
+<div
+  className="css-0"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      aria-label={null}
+      aria-labelledby="circularIndeterminate-label"
+      aria-valuemax={100}
+      aria-valuemin={0}
+      className="chakra-progress css-120wkjd"
+      data-indeterminate=""
+      id="circularIndeterminate"
+      role="progressbar"
+    >
+      <svg
+        className="css-jf70f3"
+        viewBox="0 0 100 100"
+      >
+        <circle
+          className="chakra-progress__track css-1bhxzgy"
+          cx={50}
+          cy={50}
+          r={42}
+          strokeWidth="10px"
+        />
+        <circle
+          className="chakra-progress__indicator css-tueqm1"
+          cx={50}
+          cy={50}
+          r={42}
+          strokeWidth="10px"
+        />
+      </svg>
+    </div>
+    <label
+      className="css-0"
+      htmlFor="circularIndeterminate"
+      id="circularIndeterminate-label"
+    >
+      Circular
+    </label>
+  </div>
+</div>
+`;
+
+exports[`ProgressIndicator Renders the UI snapshot correctly 7`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="linearDarkMode"
+    id="linearDarkMode-label"
+  >
+    Linear
+  </label>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-kdwx3d"
+      id="linearDarkMode"
+    >
+      <div
+        aria-label={null}
+        aria-labelledby="linearDarkMode-label"
+        aria-valuemax={100}
+        aria-valuemin={0}
+        aria-valuenow={50}
+        className="css-1jy0d03"
+        role="progressbar"
+        style={
+          Object {
+            "width": "50%",
+          }
+        }
+      />
+    </div>
+    <div
+      className="css-0"
+    >
+      50
+      %
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ProgressIndicator Renders the UI snapshot correctly 8`] = `
+<div
+  className="css-0"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      aria-label={null}
+      aria-labelledby="circularDarkMode-label"
+      aria-valuemax={100}
+      aria-valuemin={0}
+      aria-valuenow={50}
+      className="chakra-progress css-120wkjd"
+      id="circularDarkMode"
+      role="progressbar"
+    >
+      <svg
+        className="css-kn46u7"
+        viewBox="0 0 100 100"
+      >
+        <circle
+          className="chakra-progress__track css-1bhxzgy"
+          cx={50}
+          cy={50}
+          r={42}
+          strokeWidth="10px"
+        />
+        <circle
+          className="chakra-progress__indicator css-5hfhx0"
+          cx={50}
+          cy={50}
+          r={42}
+          strokeDasharray="132 132"
+          strokeDashoffset={66}
+          strokeWidth="10px"
+        />
+      </svg>
+      <div
+        className="css-f1j64i"
+      >
+        50
+        %
+      </div>
+    </div>
+    <label
+      className="css-0"
+      htmlFor="circularDarkMode"
+      id="circularDarkMode-label"
+    >
+      Circular
+    </label>
+  </div>
+</div>
+`;

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

@@ -51,6 +51,7 @@ exports[`Radio Button renders the UI snapshot correctly 1`] = `
 exports[`Radio Button renders the UI snapshot correctly 2`] = `
 <label
   className="chakra-radio css-78joka"
+  data-checked=""
 >
   <input
     checked={true}
@@ -150,6 +151,7 @@ exports[`Radio Button renders the UI snapshot correctly 3`] = `
 exports[`Radio Button renders the UI snapshot correctly 4`] = `
 <label
   className="chakra-radio css-78joka"
+  data-invalid=""
 >
   <input
     aria-invalid={true}
@@ -201,6 +203,7 @@ exports[`Radio Button renders the UI snapshot correctly 4`] = `
 exports[`Radio Button renders the UI snapshot correctly 5`] = `
 <label
   className="chakra-radio css-78joka"
+  data-disabled=""
 >
   <input
     aria-disabled={true}

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

@@ -3,7 +3,6 @@ import {
   Story,
   Canvas,
   ArgsTable,
-  Preview,
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
@@ -43,7 +42,7 @@ import Radio from "../Radio/Radio";
 
 <Description of={RadioGroup} />
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story
     name="RadioGroup"
     args={{
@@ -69,7 +68,7 @@ import Radio from "../Radio/Radio";
       </RadioGroup>
     )}
   </Story>
-</Preview>
+</Canvas>
 
 <ArgsTable story="RadioGroup" />
 

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

@@ -842,6 +842,7 @@ exports[`Radio Button renders the UI snapshot correctly 8`] = `
   >
     <label
       className="chakra-radio css-78joka"
+      data-invalid=""
     >
       <input
         aria-invalid={true}
@@ -892,6 +893,7 @@ exports[`Radio Button renders the UI snapshot correctly 8`] = `
     </label>
     <label
       className="chakra-radio css-78joka"
+      data-invalid=""
     >
       <input
         aria-invalid={true}
@@ -964,6 +966,7 @@ exports[`Radio Button renders the UI snapshot correctly 9`] = `
   >
     <label
       className="chakra-radio css-78joka"
+      data-disabled=""
     >
       <input
         aria-disabled={true}
@@ -1014,6 +1017,7 @@ exports[`Radio Button renders the UI snapshot correctly 9`] = `
     </label>
     <label
       className="chakra-radio css-78joka"
+      data-disabled=""
     >
       <input
         aria-disabled={true}

package/src/components/SearchBar/SearchBar.Test.tsx

@@ -19,12 +19,13 @@ const optionsGroup = [
   "Villagers",
 ];
 const selectProps = {
-  name: "nhItemSearch",
+  name: "selectName",
   labelText: "Select a category",
   optionsData: optionsGroup,
 };
 const textInputProps = {
   labelText: "Item Search",
+  name: "textInputName",
   placeholder: "Item Search",
 };
 const helperErrorText = "Search for items in Animal Crossing New Horizons";
@@ -34,13 +35,13 @@ describe("SearchBar Accessibility", () => {
   it("passes axe accessibility test", async () => {
     const { container } = render(
       <SearchBar
+        helperErrorText={helperErrorText}
         id="id"
+        invalidText={invalidText}
         labelText="Searchbar"
         onSubmit={jest.fn()}
         selectProps={selectProps}
         textInputProps={textInputProps}
-        helperErrorText={helperErrorText}
-        invalidText={invalidText}
       />
     );
     expect(await axe(container)).toHaveNoViolations();
@@ -54,11 +55,11 @@ describe("SearchBar", () => {
   it("renders the basic form", () => {
     render(
       <SearchBar
+        helperErrorText={helperErrorText}
         id="id"
         labelText="searchbar"
         onSubmit={searchBarSubmit}
         textInputProps={textInputProps}
-        helperErrorText={helperErrorText}
       />
     );
     expect(screen.getByRole("search")).toBeInTheDocument();
@@ -73,12 +74,12 @@ describe("SearchBar", () => {
   it("renders an optional Select component", () => {
     render(
       <SearchBar
+        helperErrorText={helperErrorText}
         id="id"
         labelText="searchbar"
         onSubmit={searchBarSubmit}
         selectProps={selectProps}
         textInputProps={textInputProps}
-        helperErrorText={helperErrorText}
       />
     );
     expect(screen.getByRole("combobox")).toBeInTheDocument();
@@ -88,14 +89,14 @@ describe("SearchBar", () => {
   it("renders the invalid text in the invalid state", () => {
     render(
       <SearchBar
+        helperErrorText={helperErrorText}
         id="id"
+        invalidText={invalidText}
+        isInvalid
         labelText="searchbar"
         onSubmit={searchBarSubmit}
         selectProps={selectProps}
         textInputProps={textInputProps}
-        helperErrorText={helperErrorText}
-        invalidText={invalidText}
-        isInvalid
       />
     );
     expect(screen.getByText(invalidText)).toBeInTheDocument();
@@ -105,14 +106,14 @@ describe("SearchBar", () => {
   it("does not render the default invalid text from the Select or TextInput components", () => {
     render(
       <SearchBar
+        helperErrorText={helperErrorText}
         id="id"
+        invalidText={invalidText}
+        isInvalid
         labelText="searchbar"
         onSubmit={searchBarSubmit}
         selectProps={selectProps}
         textInputProps={textInputProps}
-        helperErrorText={helperErrorText}
-        invalidText={invalidText}
-        isInvalid
       />
     );
     expect(
@@ -123,12 +124,12 @@ describe("SearchBar", () => {
   it("calls the callback function on submit ", () => {
     render(
       <SearchBar
-        labelText="searchBar"
+        helperErrorText={helperErrorText}
         id="id"
+        labelText="searchBar"
         onSubmit={searchBarSubmit}
         selectProps={selectProps}
         textInputProps={textInputProps}
-        helperErrorText={helperErrorText}
       />
     );
     expect(searchBarSubmit).toHaveBeenCalledTimes(0);
@@ -138,34 +139,65 @@ describe("SearchBar", () => {
     expect(buttonCallback).toHaveBeenCalledTimes(1);
   });
 
+  it("Renders 'required' in the placeholder text", () => {
+    const { rerender } = render(
+      <SearchBar
+        id="requiredState"
+        isDisabled
+        isRequired
+        labelText="searchbar"
+        onSubmit={jest.fn()}
+        textInputProps={textInputProps}
+      />
+    );
+
+    expect(
+      screen.getByPlaceholderText("Item Search (Required)")
+    ).not.toBeInTheDocument();
+
+    rerender(
+      <SearchBar
+        id="requiredState"
+        isDisabled
+        isRequired
+        labelText="searchbar"
+        onSubmit={jest.fn()}
+        textInputProps={textInputProps}
+      />
+    );
+    expect(
+      screen.getByPlaceholderText("Item Search (Required)")
+    ).toBeInTheDocument();
+  });
+
   it("Renders the UI snapshot correctly", () => {
     const basic = renderer
       .create(
         <SearchBar
-          id="id"
+          helperErrorText={helperErrorText}
+          id="basic"
           labelText="searchbar"
           onSubmit={jest.fn()}
           textInputProps={textInputProps}
-          helperErrorText={helperErrorText}
         />
       )
       .toJSON();
     const withSelect = renderer
       .create(
         <SearchBar
-          id="id"
+          helperErrorText={helperErrorText}
+          id="withSelect"
           labelText="searchbar"
           onSubmit={jest.fn()}
           selectProps={selectProps}
           textInputProps={textInputProps}
-          helperErrorText={helperErrorText}
         />
       )
       .toJSON();
     const withoutHelperText = renderer
       .create(
         <SearchBar
-          id="id"
+          id="withoutHelperText"
           labelText="searchbar"
           onSubmit={jest.fn()}
           textInputProps={textInputProps}
@@ -175,22 +207,34 @@ describe("SearchBar", () => {
     const invalidState = renderer
       .create(
         <SearchBar
-          id="id"
+          id="invalidState"
+          isInvalid
           labelText="searchbar"
           onSubmit={jest.fn()}
           textInputProps={textInputProps}
-          isInvalid
         />
       )
       .toJSON();
     const disabledState = renderer
       .create(
         <SearchBar
-          id="id"
+          id="disabledState"
+          isDisabled
           labelText="searchbar"
           onSubmit={jest.fn()}
           textInputProps={textInputProps}
+        />
+      )
+      .toJSON();
+    const requiredState = renderer
+      .create(
+        <SearchBar
+          id="requiredState"
           isDisabled
+          isRequired
+          labelText="searchbar"
+          onSubmit={jest.fn()}
+          textInputProps={textInputProps}
         />
       )
       .toJSON();
@@ -200,5 +244,6 @@ describe("SearchBar", () => {
     expect(withoutHelperText).toMatchSnapshot();
     expect(invalidState).toMatchSnapshot();
     expect(disabledState).toMatchSnapshot();
+    expect(requiredState).toMatchSnapshot();
   });
 });