@nypl/design-system-react-components 0.25.4 → 0.25.8

package/dist/index.d.ts

@@ -39,6 +39,8 @@ 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 { ProgressIndicatorSizes, ProgressIndicatorTypes, } from "./components/ProgressIndicator/ProgressIndicatorTypes";
 export { default as Radio } from "./components/Radio/Radio";
 export { default as RadioGroup } from "./components/RadioGroup/RadioGroup";
 export { RadioGroupLayoutTypes } from "./components/RadioGroup/RadioGroupLayoutTypes";
@@ -47,6 +49,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";
@@ -55,6 +58,8 @@ export { default as Text } from "./components/Text/Text";
 export { TextDisplaySizes } from "./components/Text/TextTypes";
 export { default as TextInput, TextInputRefType, } from "./components/TextInput/TextInput";
 export { TextInputTypes } from "./components/TextInput/TextInputTypes";
+export { default as Toggle } from "./components/Toggle/Toggle";
+export { ToggleSizes } from "./components/Toggle/ToggleSizes";
 export { default as useNYPLTheme } from "./hooks/useNYPLTheme";
 export { default as VideoPlayer } from "./components/VideoPlayer/VideoPlayer";
 export { VideoPlayerAspectRatios, VideoPlayerTypes, } from "./components/VideoPlayer/VideoPlayerTypes";

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/dist/theme/components/notification.d.ts

@@ -43,23 +43,26 @@ declare const _default: {
     };
     NotificationContent: {
         parts: string[];
-        baseStyle: ({ alignText, notificationType }: {
+        baseStyle: ({ alignText, icon, notificationType }: {
             alignText: any;
+            icon: any;
             notificationType: any;
         }) => {
             display: string;
             justifyContent: string;
             content: {
-                width: string;
-                paddingLeft: string;
                 color: string;
+                marginTop: string;
+                paddingLeft: string;
+                width: string;
             };
         };
     };
     NotificationHeading: {
         parts: string[];
-        baseStyle: ({ centered, notificationType }: {
+        baseStyle: ({ centered, icon, notificationType }: {
             centered: any;
+            icon: any;
             notificationType: any;
         }) => {
             display: string;
@@ -67,6 +70,7 @@ declare const _default: {
             justifyContent: string;
             heading: {
                 marginBottom: string;
+                marginTop: string;
                 color: string;
             };
         };

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

@@ -0,0 +1,68 @@
+declare const _default: {
+    Toggle: {
+        parts: string[];
+        baseStyle: {
+            label: {
+                display: string;
+                alignItems: string;
+                width: string;
+            };
+            helper: {
+                marginLeft: string;
+                marginTop: string;
+                marginBottom: string;
+            };
+        };
+        defaultProps: {
+            size: string;
+        };
+    };
+    Switch: {
+        baseStyle: {
+            opacity: number;
+            track: {
+                p: string;
+                border: string;
+                borderColor: string;
+                _checked: {
+                    borderColor: string;
+                    bg: string;
+                    opacity: number;
+                };
+                _invalid: {
+                    borderColor: string;
+                    bg: string;
+                    "> span": {
+                        bg: string;
+                    };
+                };
+                _disabled: {
+                    borderColor: string;
+                    bg: string;
+                    _checked: {
+                        opacity: number;
+                    };
+                };
+                _focus: {
+                    outline: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                    zIndex: string;
+                };
+            };
+            label: {
+                fontSize: number;
+                marginLeft: string;
+            };
+            thumb: {
+                _disabled: {
+                    bg: string;
+                };
+            };
+        };
+        defaultProps: {
+            colorScheme: string;
+        };
+    };
+};
+export default _default;

package/dist/theme/foundations/spacing.d.ts

@@ -22,6 +22,7 @@
  *
  * Chakra Number Value | Chakra Name value | DS Variable
  * ------------------- | ----------------- | -----------------
+ *        0.5            |         xxxs       |   --nypl-space-xxxs
  *        1            |         xxs       |   --nypl-space-xxs
  *        2            |         xs        |   --nypl-space-xs
  *        4            |         s         |   --nypl-space-s
@@ -34,6 +35,7 @@
 export declare const spacing: {
     px: string;
     0: string;
+    xxxs: string;
     0.5: string;
     xxs: string;
     1: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "0.25.4",
+  "version": "0.25.8",
   "description": "Design System React Components",
   "repository": {
     "type": "git",
@@ -14,7 +14,7 @@
     "src"
   ],
   "engines": {
-    "node": ">10 <=12.22"
+    "node": ">10"
   },
   "author": "NYPL",
   "license": "Apache-2.0",

package/src/components/Accordion/Accordion.stories.mdx

@@ -22,8 +22,7 @@ import { getCategory } from "../../utils/componentCategories";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=10734%3A2520",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=10734%3A2520",
     },
     jest: ["Accordion.test.tsx"],
   }}

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.8`   |
 
 <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,24 @@ describe("Breadcrumbs Snapshot", () => {
         />
       )
       .toJSON();
+    const breadcrumbsBlogsVariant = renderer
+      .create(
+        <Breadcrumbs
+          breadcrumbsData={breadcrumbsData}
+          colorVariant={ColorVariants.Blogs}
+          id="breadcrumbs-test"
+        />
+      )
+      .toJSON();
+    const breadcrumbsLocationsVariant = renderer
+      .create(
+        <Breadcrumbs
+          breadcrumbsData={breadcrumbsData}
+          colorVariant={ColorVariants.Blogs}
+          id="breadcrumbs-test"
+        />
+      )
+      .toJSON();
     const breadcrumbsAdditionalStyles = renderer
       .create(
         <Breadcrumbs
@@ -55,6 +73,8 @@ describe("Breadcrumbs Snapshot", () => {
 
     expect(breadcrumbsSnapshot).toMatchSnapshot();
     expect(breadcrumbsVariantColor).toMatchSnapshot();
+    expect(breadcrumbsBlogsVariant).toMatchSnapshot();
+    expect(breadcrumbsLocationsVariant).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,204 @@ 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-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 5`] = `
 <nav
   aria-label="breadcrumb"
   className="chakra-breadcrumb css-1f2fw9u"

package/src/components/Button/Button.tsx

@@ -71,7 +71,6 @@ function Button(props: React.PropsWithChildren<ButtonProps>) {
   }
 
   styles = useStyleConfig("Button", { variant });
-
   return (
     <ChakraButton
       id={id}

package/src/components/Card/Card.stories.mdx

@@ -31,8 +31,7 @@ import DSProvider from "../../theme/provider";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=36835%3A25747",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=36835%3A25747",
     },
   }}
   argTypes={{
@@ -49,7 +48,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
-| Latest            | `0.25.3`   |
+| Latest            | `0.25.8`   |
 
 <Description of={Card} />
 
@@ -221,6 +220,44 @@ prop to override the default width.
 <Canvas>
   <Story name="Card Image Size">
     <SimpleGrid columns={1}>
+      <Card
+        center
+        imageSrc="https://placeimg.com/400/200/animals"
+        imageAlt="Alt text"
+        imageAspectRatio={ImageRatios.Square}
+        imageSize={ImageSizes.ExtraExtraSmall}
+      >
+        <CardHeading level={HeadingLevels.Three} id="column-heading1">
+          Extra Extra Small Image
+        </CardHeading>
+        <CardHeading level={HeadingLevels.Four} id="column-heading2">
+          Max-Width: 64px
+        </CardHeading>
+        <CardContent>
+          Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
+          libero, a pharetra augue.
+        </CardContent>
+      </Card>
+      <HorizontalRule />
+      <Card
+        center
+        imageSrc="https://placeimg.com/400/200/animals"
+        imageAlt="Alt text"
+        imageAspectRatio={ImageRatios.Square}
+        imageSize={ImageSizes.ExtraSmall}
+      >
+        <CardHeading level={HeadingLevels.Three} id="column-heading1">
+          Extra Small Image
+        </CardHeading>
+        <CardHeading level={HeadingLevels.Four} id="column-heading2">
+          Max-Width: 96px
+        </CardHeading>
+        <CardContent>
+          Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
+          libero, a pharetra augue.
+        </CardContent>
+      </Card>
+      <HorizontalRule />
       <Card
         center
         imageSrc="https://placeimg.com/400/200/animals"
@@ -306,7 +343,40 @@ prop to override the default width.
     <SimpleGrid columns={1}>
       <Card
         layout={CardLayouts.Row}
-        center
+        imageSrc="https://placeimg.com/400/200/animals"
+        imageAlt="Alt text"
+        imageAspectRatio={ImageRatios.TwoByOne}
+        imageSize={ImageSizes.ExtraExtraSmall}
+      >
+        <CardHeading level={HeadingLevels.Three} id="row2-heading1">
+          Extra Extra Small Image
+        </CardHeading>
+        <CardHeading level={HeadingLevels.Four} id="row2-heading2">
+          Max-Width: 64px
+        </CardHeading>
+        <CardContent>
+          Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+        </CardContent>
+      </Card>
+      <Card
+        layout={CardLayouts.Row}
+        imageSrc="https://placeimg.com/400/200/animals"
+        imageAlt="Alt text"
+        imageAspectRatio={ImageRatios.TwoByOne}
+        imageSize={ImageSizes.ExtraSmall}
+      >
+        <CardHeading level={HeadingLevels.Three} id="row2-heading1">
+          Extra Small Image
+        </CardHeading>
+        <CardHeading level={HeadingLevels.Four} id="row2-heading2">
+          Max-Width: 96px
+        </CardHeading>
+        <CardContent>
+          Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+        </CardContent>
+      </Card>
+      <Card
+        layout={CardLayouts.Row}
         imageSrc="https://placeimg.com/400/200/animals"
         imageAlt="Alt text"
         imageAspectRatio={ImageRatios.TwoByOne}
@@ -324,7 +394,6 @@ prop to override the default width.
       </Card>
       <Card
         layout={CardLayouts.Row}
-        center
         imageSrc="https://placeimg.com/410/210/animals"
         imageAlt="Alt text"
         imageAspectRatio={ImageRatios.TwoByOne}
@@ -343,7 +412,6 @@ prop to override the default width.
       </Card>
       <Card
         layout={CardLayouts.Row}
-        center
         imageSrc="https://placeimg.com/400/250/animals"
         imageAlt="Alt text"
         imageAspectRatio={ImageRatios.TwoByOne}
@@ -363,7 +431,6 @@ prop to override the default width.
       </Card>
       <Card
         layout={CardLayouts.Row}
-        center
         imageSrc="https://placeimg.com/450/250/animals"
         imageAlt="Alt text"
         imageAspectRatio={ImageRatios.TwoByOne}

package/src/components/Card/Card.tsx

@@ -91,14 +91,15 @@ function CardImage(props: React.ComponentProps<"img"> & CardImageProps) {
     layout,
   });
   return (
-    <Image
-      alt={alt}
-      component={component}
-      imageAspectRatio={imageAspectRatio}
-      imageSize={imageSize}
-      src={src}
-      additionalStyles={styles}
-    />
+    <Box __css={styles}>
+      <Image
+        alt={alt}
+        component={component}
+        imageAspectRatio={imageAspectRatio}
+        imageSize={imageSize}
+        src={src}
+      />
+    </Box>
   );
 }