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

package/dist/index.d.ts

@@ -40,6 +40,7 @@ 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";
@@ -57,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/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.7",
+  "version": "0.25.8",
   "description": "Design System React Components",
   "repository": {
     "type": "git",

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.6`   |
+| Latest            | `0.25.8`   |
 
 <Description of={Breadcrumbs} />
 

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

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

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

@@ -298,6 +298,105 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 3`] = `
 `;
 
 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>
   );
 }
 

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

@@ -6,16 +6,20 @@ exports[`Card Renders the UI snapshot correctly 1`] = `
   id="regularCard"
 >
   <div
-    className="the-wrap  css-0"
+    className="css-0"
   >
     <div
-      className="the-crop css-0"
+      className="the-wrap  css-0"
     >
-      <img
-        alt="Alt text"
-        className="css-0"
-        src="https://placeimg.com/400/200/arch"
-      />
+      <div
+        className="the-crop css-0"
+      >
+        <img
+          alt="Alt text"
+          className="css-0"
+          src="https://placeimg.com/400/200/arch"
+        />
+      </div>
     </div>
   </div>
   <div
@@ -55,16 +59,20 @@ exports[`Card Renders the UI snapshot correctly 2`] = `
   id="cardWithExtendedStyles"
 >
   <div
-    className="the-wrap  css-0"
+    className="css-0"
   >
     <div
-      className="the-crop css-0"
+      className="the-wrap  css-0"
     >
-      <img
-        alt="Alt text"
-        className="css-0"
-        src="https://placeimg.com/300/400/arch"
-      />
+      <div
+        className="the-crop css-0"
+      >
+        <img
+          alt="Alt text"
+          className="css-0"
+          src="https://placeimg.com/300/400/arch"
+        />
+      </div>
     </div>
   </div>
   <div
@@ -96,6 +104,8 @@ exports[`Card Renders the UI snapshot correctly 2`] = `
         className="css-0"
         href="online"
         id="link-online"
+        rel={null}
+        target={null}
       >
         Read Online
       </a>
@@ -103,6 +113,8 @@ exports[`Card Renders the UI snapshot correctly 2`] = `
         className="css-0"
         href="#url"
         id="link-icon"
+        rel={null}
+        target={null}
       >
         <svg
           aria-hidden={true}
@@ -149,16 +161,20 @@ exports[`Card Renders the UI snapshot correctly 3`] = `
   id="cardWithNoCTAs"
 >
   <div
-    className="the-wrap  css-0"
+    className="css-0"
   >
     <div
-      className="the-crop css-0"
+      className="the-wrap  css-0"
     >
-      <img
-        alt="Alt text"
-        className="css-0"
-        src="https://placeimg.com/300/400/arch"
-      />
+      <div
+        className="the-crop css-0"
+      >
+        <img
+          alt="Alt text"
+          className="css-0"
+          src="https://placeimg.com/300/400/arch"
+        />
+      </div>
     </div>
   </div>
   <div
@@ -193,16 +209,20 @@ exports[`Card Renders the UI snapshot correctly 4`] = `
   id="cardWithNoContent"
 >
   <div
-    className="the-wrap  css-0"
+    className="css-0"
   >
     <div
-      className="the-crop css-0"
+      className="the-wrap  css-0"
     >
-      <img
-        alt="Alt text"
-        className="css-0"
-        src="https://placeimg.com/300/400/arch"
-      />
+      <div
+        className="the-crop css-0"
+      >
+        <img
+          alt="Alt text"
+          className="css-0"
+          src="https://placeimg.com/300/400/arch"
+        />
+      </div>
     </div>
   </div>
   <div
@@ -226,6 +246,8 @@ exports[`Card Renders the UI snapshot correctly 4`] = `
         className="css-0"
         href="online"
         id="link-online"
+        rel={null}
+        target={null}
       >
         Read Online
       </a>
@@ -233,6 +255,8 @@ exports[`Card Renders the UI snapshot correctly 4`] = `
         className="css-0"
         href="#url"
         id="link-icon"
+        rel={null}
+        target={null}
       >
         <svg
           aria-hidden={true}
@@ -304,6 +328,8 @@ exports[`Card Renders the UI snapshot correctly 5`] = `
         className="css-0"
         href="online"
         id="link-online"
+        rel={null}
+        target={null}
       >
         Read Online
       </a>
@@ -311,6 +337,8 @@ exports[`Card Renders the UI snapshot correctly 5`] = `
         className="css-0"
         href="#url"
         id="link-icon"
+        rel={null}
+        target={null}
       >
         <svg
           aria-hidden={true}
@@ -360,16 +388,20 @@ exports[`Card Renders the UI snapshot correctly 6`] = `
     id="fullclick"
   >
     <div
-      className="the-wrap  css-0"
+      className="css-0"
     >
       <div
-        className="the-crop css-0"
+        className="the-wrap  css-0"
       >
-        <img
-          alt="Alt text"
-          className="css-0"
-          src="https://placeimg.com/400/200/arch"
-        />
+        <div
+          className="the-crop css-0"
+        >
+          <img
+            alt="Alt text"
+            className="css-0"
+            src="https://placeimg.com/400/200/arch"
+          />
+        </div>
       </div>
     </div>
     <div