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

package/dist/index.d.ts

@@ -39,6 +39,7 @@ export { default as Modal } from "./components/Modal/Modal";
 export { default as Notification } from "./components/Notification/Notification";
 export { NotificationTypes } from "./components/Notification/NotificationTypes";
 export { default as Pagination } from "./components/Pagination/Pagination";
+export { default as ProgressIndicator } from "./components/ProgressIndicator/ProgressIndicator";
 export { default as Radio } from "./components/Radio/Radio";
 export { default as RadioGroup } from "./components/RadioGroup/RadioGroup";
 export { RadioGroupLayoutTypes } from "./components/RadioGroup/RadioGroupLayoutTypes";
@@ -47,6 +48,7 @@ export { default as Select } from "./components/Select/Select";
 export { default as SimpleGrid } from "./components/Grid/SimpleGrid";
 export { default as SkeletonLoader } from "./components/SkeletonLoader/SkeletonLoader";
 export { SkeletonLoaderImageRatios, SkeletonLoaderLayouts, } from "./components/SkeletonLoader/SkeletonLoaderTypes";
+export { default as Slider } from "./components/Slider/Slider";
 export { default as StatusBadge } from "./components/StatusBadge/StatusBadge";
 export { StatusBadgeTypes } from "./components/StatusBadge/StatusBadgeTypes";
 export { Tabs, TabList, Tab, TabPanels, TabPanel, } from "./components/Tabs/Tabs";

package/dist/theme/components/breadcrumb.d.ts

@@ -73,6 +73,15 @@ declare const Breadcrumb: {
         };
     };
     variants: {
+        blogs: {
+            bg: string;
+            color: string;
+            a: {
+                _hover: {
+                    color: string;
+                };
+            };
+        };
         booksAndMore: {
             bg: string;
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "0.25.5",
+  "version": "0.25.6",
   "description": "Design System React Components",
   "repository": {
     "type": "git",

package/src/components/Breadcrumbs/Breadcrumbs.stories.mdx

@@ -38,7 +38,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.3`    |
-| Latest            | `0.25.4`   |
+| Latest            | `0.25.6`   |
 
 <Description of={Breadcrumbs} />
 
@@ -91,12 +91,12 @@ The `Breadcrumbs` component background color can be set using the `colorVariant`
   <Story
     name="Color Variations"
     args={{
-      colorVariant: ColorVariants.BooksAndMore,
+      colorVariant: ColorVariants.Blogs,
     }}
   >
     {(args) => (
       <>
-        <Heading level={HeadingLevels.Three}>Books and More</Heading>
+        <Heading level={HeadingLevels.Three}>Blogs</Heading>
         <Breadcrumbs
           breadcrumbsData={[
             { url: "#", text: "Parent" },
@@ -113,6 +113,23 @@ The `Breadcrumbs` component background color can be set using the `colorVariant`
   </Story>
 </Canvas>
 
+<Canvas>
+  <DSProvider>
+    <Heading level={HeadingLevels.Three}>Books and More</Heading>
+    <Breadcrumbs
+      breadcrumbsData={[
+        { url: "#", text: "Parent" },
+        { url: "#", text: "Child" },
+        {
+          url: "#",
+          text: "Grandchild",
+        },
+      ]}
+      colorVariant={ColorVariants.BooksAndMore}
+    />
+  </DSProvider>
+</Canvas>
+
 <Canvas>
   <DSProvider>
     <Heading level={HeadingLevels.Three}>Locations</Heading>

package/src/components/Breadcrumbs/Breadcrumbs.test.tsx

@@ -41,6 +41,15 @@ describe("Breadcrumbs Snapshot", () => {
         />
       )
       .toJSON();
+    const breadcrumbsBlogsVariant = renderer
+      .create(
+        <Breadcrumbs
+          breadcrumbsData={breadcrumbsData}
+          colorVariant={ColorVariants.Blogs}
+          id="breadcrumbs-test"
+        />
+      )
+      .toJSON();
     const breadcrumbsAdditionalStyles = renderer
       .create(
         <Breadcrumbs
@@ -55,6 +64,7 @@ describe("Breadcrumbs Snapshot", () => {
 
     expect(breadcrumbsSnapshot).toMatchSnapshot();
     expect(breadcrumbsVariantColor).toMatchSnapshot();
+    expect(breadcrumbsBlogsVariant).toMatchSnapshot();
     expect(breadcrumbsAdditionalStyles).toMatchSnapshot();
   });
 });

package/src/components/Breadcrumbs/BreadcrumbsTypes.tsx

@@ -1,4 +1,5 @@
 export enum ColorVariants {
+  Blogs = "blogs",
   BooksAndMore = "booksAndMore",
   Locations = "locations",
   Research = "research",

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

@@ -199,6 +199,105 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 2`] = `
 `;
 
 exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 3`] = `
+<nav
+  aria-label="breadcrumb"
+  className="chakra-breadcrumb css-0"
+  id="breadcrumbs-test"
+>
+  <ol
+    className="chakra-breadcrumb__list css-0"
+  >
+    <li
+      className="chakra-breadcrumb__list-item css-18biwo"
+    >
+      <a
+        className="chakra-breadcrumb__link css-0"
+        href="#string1"
+      >
+        <span
+          className="breadcrumb-label"
+        >
+          string1
+        </span>
+      </a>
+      <span
+        className="css-t4q1nq"
+        role="presentation"
+      >
+        /
+      </span>
+    </li>
+    <li
+      className="chakra-breadcrumb__list-item css-18biwo"
+    >
+      <a
+        className="chakra-breadcrumb__link css-0"
+        href="#string2"
+      >
+        <svg
+          aria-hidden={true}
+          className="chakra-icon breadcrumbs-icon css-onkibi"
+          focusable={false}
+          id="breadcrumbs-test__backarrow"
+          role="img"
+          title="arrow icon"
+          viewBox="0 0 24 24"
+        >
+          <g
+            stroke="currentColor"
+            strokeWidth="1.5"
+          >
+            <path
+              d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+              fill="none"
+              strokeLinecap="round"
+            />
+            <path
+              d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+              fill="currentColor"
+              strokeLinecap="round"
+            />
+            <circle
+              cx="12"
+              cy="12"
+              fill="none"
+              r="11.25"
+              strokeMiterlimit="10"
+            />
+          </g>
+        </svg>
+        <span
+          className="breadcrumb-label"
+        >
+          string2
+        </span>
+      </a>
+      <span
+        className="css-t4q1nq"
+        role="presentation"
+      >
+        /
+      </span>
+    </li>
+    <li
+      className="chakra-breadcrumb__list-item css-18biwo"
+    >
+      <span
+        aria-current="page"
+        className="chakra-breadcrumb__link css-0"
+      >
+        <span
+          className="breadcrumb-label"
+        >
+          string3
+        </span>
+      </span>
+    </li>
+  </ol>
+</nav>
+`;
+
+exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 4`] = `
 <nav
   aria-label="breadcrumb"
   className="chakra-breadcrumb css-1f2fw9u"

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

@@ -35,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();
@@ -55,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();
@@ -74,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();
@@ -89,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();
@@ -106,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(
@@ -124,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);
@@ -139,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}
@@ -176,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();
@@ -201,5 +244,6 @@ describe("SearchBar", () => {
     expect(withoutHelperText).toMatchSnapshot();
     expect(invalidState).toMatchSnapshot();
     expect(disabledState).toMatchSnapshot();
+    expect(requiredState).toMatchSnapshot();
   });
 });

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

@@ -19,8 +19,7 @@ import DSProvider from "../../theme/provider";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11689%3A423",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11689%3A423",
     },
     jest: ["SearchBar.test.tsx"],
   }}
@@ -43,7 +42,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.25.4`   |
+| Latest            | `0.25.6`   |
 
 <Description of={SearchBar} />
 

package/src/components/SearchBar/SearchBar.tsx

@@ -99,6 +99,9 @@ export default function SearchBar(props: SearchBarProps) {
   const ariaDescribedby = helperErrorTextID;
   const footnote = isInvalid ? invalidText : helperErrorText;
   const finalAriaLabel = footnote ? `${labelText} - ${footnote}` : labelText;
+  const textInputPlaceholder = `${textInputProps?.placeholder} ${
+    isRequired ? "(Required)" : ""
+  }`;
   // Render the `Select` component.
   const selectElem = selectProps && (
     <Select
@@ -120,7 +123,7 @@ export default function SearchBar(props: SearchBarProps) {
     <TextInput
       id={generateUUID()}
       labelText={textInputProps?.labelText}
-      placeholder={textInputProps?.placeholder}
+      placeholder={textInputPlaceholder}
       onChange={textInputProps?.onChange}
       name={textInputProps?.name}
       type={TextInputTypes.text}

package/src/index.ts

@@ -73,6 +73,7 @@ export { default as Modal } from "./components/Modal/Modal";
 export { default as Notification } from "./components/Notification/Notification";
 export { NotificationTypes } from "./components/Notification/NotificationTypes";
 export { default as Pagination } from "./components/Pagination/Pagination";
+export { default as ProgressIndicator } from "./components/ProgressIndicator/ProgressIndicator";
 export { default as Radio } from "./components/Radio/Radio";
 export { default as RadioGroup } from "./components/RadioGroup/RadioGroup";
 export { RadioGroupLayoutTypes } from "./components/RadioGroup/RadioGroupLayoutTypes";
@@ -84,6 +85,7 @@ export {
   SkeletonLoaderImageRatios,
   SkeletonLoaderLayouts,
 } from "./components/SkeletonLoader/SkeletonLoaderTypes";
+export { default as Slider } from "./components/Slider/Slider";
 export { default as StatusBadge } from "./components/StatusBadge/StatusBadge";
 export { StatusBadgeTypes } from "./components/StatusBadge/StatusBadgeTypes";
 export {

package/src/theme/components/breadcrumb.ts

@@ -1,4 +1,13 @@
 // Variant styling
+const blogs = {
+  bg: "section.blogs.secondary",
+  color: "ui.black",
+  a: {
+    _hover: {
+      color: "ui.gray.xdark",
+    },
+  },
+};
 const booksAndMore = {
   bg: "section.books-and-more.secondary",
 };
@@ -67,6 +76,7 @@ const Breadcrumb = {
   },
   // Available variants:
   variants: {
+    blogs,
     booksAndMore,
     locations,
     research,