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

package/src/components/VideoPlayer/VideoPlayer.test.tsx

@@ -63,6 +63,46 @@ describe("VideoPlayer", () => {
     });
   });
 
+  describe("using embedCode prop", () => {
+    const embedCode = `<iframe src="https://player.vimeo.com/video/421404144?h=5467db7edd" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>`;
+    const embedCodeWithTitle = `<iframe title="Pre-Existing iFrame Title" src="https://player.vimeo.com/video/421404144?h=5467db7edd" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>`;
+
+    it("Renders custom embed code", () => {
+      render(<VideoPlayer embedCode={embedCode} />);
+      expect(screen.getByTitle("Video player")).toBeInTheDocument();
+      expect(screen.getByTitle("Video player")).toHaveAttribute(
+        "src",
+        `https://player.vimeo.com/video/421404144?h=5467db7edd`
+      );
+    });
+
+    it("Renders custom embed code with custom iframe title", () => {
+      render(
+        <VideoPlayer embedCode={embedCode} iframeTitle="Custom iFrame Title" />
+      );
+      expect(screen.getByTitle("Custom iFrame Title")).toBeInTheDocument();
+    });
+
+    it("Renders custom embed code with pre-existing title", () => {
+      render(<VideoPlayer embedCode={embedCodeWithTitle} />);
+      expect(
+        screen.getByTitle("Pre-Existing iFrame Title")
+      ).toBeInTheDocument();
+    });
+
+    it("Renders custom embed code with pre-existing title and ignores `iframeTitle` prop", () => {
+      render(
+        <VideoPlayer
+          embedCode={embedCodeWithTitle}
+          iframeTitle="Custom iFrame Title"
+        />
+      );
+      expect(
+        screen.getByTitle("Pre-Existing iFrame Title")
+      ).toBeInTheDocument();
+    });
+  });
+
   describe("text elements", () => {
     beforeEach(() => {
       utils = render(
@@ -121,7 +161,7 @@ describe("VideoPlayer", () => {
   });
 
   describe("prop validation", () => {
-    it("Throws error if videoId not formatted properly", () => {
+    it("Throws error if the videoId prop not is formatted properly", () => {
       render(
         <VideoPlayer
           videoType={VideoPlayerTypes.Vimeo}
@@ -135,6 +175,56 @@ describe("VideoPlayer", () => {
         )
       ).toBeInTheDocument();
     });
+
+    it("Throws appropriate error if VideoPlayer props are not configured properly", () => {
+      const warn = jest.spyOn(console, "warn");
+
+      render(<VideoPlayer />);
+      expect(warn).toHaveBeenCalledWith(
+        "VideoPlayer requires either the `embedCode` prop or both the `videoType` and `videoId` props."
+      );
+
+      render(<VideoPlayer videoId="http://vimeo.com/474719268" />);
+      expect(warn).toHaveBeenCalledWith(
+        "VideoPlayer also requires the `videoType` prop. You have only set the `videoId` prop."
+      );
+
+      render(<VideoPlayer videoType={VideoPlayerTypes.Vimeo} />);
+      expect(warn).toHaveBeenCalledWith(
+        "VideoPlayer also requires the `videoId` prop. You have only set the `videoType` prop."
+      );
+
+      render(
+        <VideoPlayer
+          embedCode="<iframe src='https://player.vimeo.com/video/421404144?h=5467db7edd' width='640' height='360' frameborder='0' allow='autoplay; fullscreen; picture-in-picture' allowfullscreen></iframe>"
+          videoType={VideoPlayerTypes.Vimeo}
+          videoId="http://vimeo.com/474719268"
+        />
+      );
+      expect(warn).toHaveBeenCalledWith(
+        "VideoPlayer can accept the `embedCode` prop or the `videoType` and `videoId` props. You have set both."
+      );
+
+      render(
+        <VideoPlayer
+          embedCode="<iframe src='https://player.vimeo.com/video/421404144?h=5467db7edd' width='640' height='360' frameborder='0' allow='autoplay; fullscreen; picture-in-picture' allowfullscreen></iframe>"
+          videoType={VideoPlayerTypes.Vimeo}
+        />
+      );
+      expect(warn).toHaveBeenCalledWith(
+        "VideoPlayer can accept the `embedCode` prop or the `videoType` and `videoId` props. You have set both."
+      );
+
+      render(
+        <VideoPlayer
+          embedCode="<iframe src='https://player.vimeo.com/video/421404144?h=5467db7edd' width='640' height='360' frameborder='0' allow='autoplay; fullscreen; picture-in-picture' allowfullscreen></iframe>"
+          videoId="http://vimeo.com/474719268"
+        />
+      );
+      expect(warn).toHaveBeenCalledWith(
+        "VideoPlayer can accept the `embedCode` prop or the `videoType` and `videoId` props. You have set both."
+      );
+    });
   });
 
   it("renders the UI snapshot correctly", () => {
@@ -159,6 +249,17 @@ describe("VideoPlayer", () => {
         />
       )
       .toJSON();
+    const videoPlayerUsingEmbedCode = renderer
+      .create(
+        <VideoPlayer
+          descriptionText="VideoPlayer description"
+          embedCode="<iframe src='https://player.vimeo.com/video/421404144?h=5467db7edd' width='640' height='360' frameborder='0' allow='autoplay; fullscreen; picture-in-picture' allowfullscreen></iframe>"
+          headingText="VideoPlayer Heading"
+          id="video-player-with-text"
+          helperText="VideoPlayer helper test."
+        />
+      )
+      .toJSON();
     const videoPlayerError = renderer
       .create(
         <VideoPlayer
@@ -171,6 +272,7 @@ describe("VideoPlayer", () => {
 
     expect(videoPlayerWithoutText).toMatchSnapshot();
     expect(videoPlayerWithText).toMatchSnapshot();
+    expect(videoPlayerUsingEmbedCode).toMatchSnapshot();
     expect(videoPlayerError).toMatchSnapshot();
   });
 });

package/src/components/VideoPlayer/VideoPlayer.tsx

@@ -12,20 +12,22 @@ export interface VideoPlayerProps {
   className?: string;
   /** Optional string to set the text for a video description */
   descriptionText?: string;
+  /** Optional string to set a code snippet provided by YouTube or Vimeo; the `videoPlayer` component will accept the `embedCode` prop or the `videoId` and `videoType` props */
+  embedCode?: string;
   /** Optional string to set the text for a `Heading` component */
   headingText?: string;
   /** Optional string to set the text for a `HelperErrorText` component */
   helperText?: string;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
-  /** Optional title to be added to the `<iframe>` element for improved accessibility; this title should describe in a few words the content of the video; if omitted, a generic title will be added */
+  /** Optional title to be added to the `<iframe>` element for improved accessibility; this title should describe in a few words the content of the video; if omitted, a generic title will be added; if a `title` attribute is already present in the `embedCode` prop, this prop will be ignored */
   iframeTitle?: string;
   /** Offers the ability to hide the helper/invalid text. */
   showHelperInvalidText?: boolean;
   /** Required YouTube or Vimeo video ID. This value can be pulled from a video's YouTube or Vimeo URL. */
-  videoId: string;
+  videoId?: string;
   /** Required. Used to specify which video service is being used. */
-  videoType: VideoPlayerTypes;
+  videoType?: VideoPlayerTypes;
 }
 
 export default function VideoPlayer(
@@ -35,6 +37,7 @@ export default function VideoPlayer(
     aspectRatio,
     className,
     descriptionText,
+    embedCode,
     headingText,
     helperText,
     id = generateUUID(),
@@ -54,29 +57,64 @@ export default function VideoPlayer(
       ? `https://player.vimeo.com/video/${videoId}?autoplay=0&loop=0`
       : `https://www.youtube.com/embed/${videoId}?disablekb=1&autoplay=0&fs=1&modestbranding=0`;
 
+  const iFrameTitleEmbedCode = iframeTitle ? `${iframeTitle}` : `Video player`;
+
+  const embedCodeFinal =
+    embedCode && embedCode.includes("<iframe") && !embedCode.includes("title=")
+      ? embedCode.replace(
+          `<iframe `,
+          `<iframe title="${iFrameTitleEmbedCode}" `
+        )
+      : embedCode;
+
   const errorMessage =
     "<strong>Error:</strong> This video player has not been configured properly. Please contact the site administrator.";
 
   let isInvalid = false;
-  if (!videoType && !videoId) {
-    console.warn("VideoPlayer requires the `videoType` and `videoId` props");
+  if (!embedCodeFinal && !videoType && !videoId) {
+    console.warn(
+      "VideoPlayer requires either the `embedCode` prop or both the `videoType` and `videoId` props."
+    );
+    isInvalid = true;
+  } else if (!embedCodeFinal && !videoType) {
+    console.warn(
+      "VideoPlayer also requires the `videoType` prop. You have only set the `videoId` prop."
+    );
+    isInvalid = true;
+  } else if (!embedCodeFinal && !videoId) {
+    console.warn(
+      "VideoPlayer also requires the `videoId` prop. You have only set the `videoType` prop."
+    );
     isInvalid = true;
-  } else if (!videoType) {
-    console.warn("VideoPlayer requires the `videoType` prop");
+  } else if (embedCodeFinal && (videoType || videoId)) {
+    console.warn(
+      "VideoPlayer can accept the `embedCode` prop or the `videoType` and `videoId` props. You have set both."
+    );
     isInvalid = true;
-  } else if (!videoId) {
-    console.warn("VideoPlayer requires the `videoId` prop");
+  }
+
+  if (
+    videoId &&
+    (videoId.includes("://") ||
+      videoId.includes("http") ||
+      videoId.includes(".") ||
+      videoId.includes("youtube") ||
+      videoId.includes("vimeo"))
+  ) {
+    console.warn("The VideoPlayer `videoId` prop is not configured properly.");
     isInvalid = true;
   }
 
   if (
-    videoId.includes("://") ||
-    videoId.includes("http") ||
-    videoId.includes(".") ||
-    videoId.includes("youtube") ||
-    videoId.includes("vimeo")
+    embedCodeFinal &&
+    ((!embedCodeFinal.includes("vimeo.com") &&
+      !embedCodeFinal.includes("youtube.com")) ||
+      !embedCodeFinal.includes("<iframe") ||
+      !embedCodeFinal.includes("</iframe"))
   ) {
-    console.warn("VideoPlayer `videoId` prop is not configured properly");
+    console.warn(
+      "The VideoPlayer `embedCode` prop is not configured properly."
+    );
     isInvalid = true;
   }
 
@@ -85,7 +123,9 @@ export default function VideoPlayer(
     : getVariant(aspectRatio, VideoPlayerAspectRatios);
   const styles = useMultiStyleConfig("VideoPlayer", { variant });
 
-  const embedCode = (
+  const embedElement = embedCodeFinal ? (
+    <span dangerouslySetInnerHTML={{ __html: embedCodeFinal }} />
+  ) : (
     <Box
       as="iframe"
       src={videoSrc}
@@ -113,7 +153,7 @@ export default function VideoPlayer(
           helperText={helperText && showHelperInvalidText ? helperText : null}
           id={`${id}-componentWrapper`}
         >
-          <Box __css={styles.inside}>{embedCode}</Box>
+          <Box __css={styles.inside}>{embedElement}</Box>
         </ComponentWrapper>
       )}
     </Box>

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

@@ -75,6 +75,54 @@ exports[`VideoPlayer renders the UI snapshot correctly 2`] = `
 `;
 
 exports[`VideoPlayer renders the UI snapshot correctly 3`] = `
+<div
+  className="css-0"
+  data-testid="video-player-component"
+  id="video-player-with-text"
+>
+  <div
+    className="css-0"
+  >
+    <h2
+      className="chakra-heading css-0"
+      id="video-player-with-text-componentWrapper-heading"
+    >
+      VideoPlayer Heading
+    </h2>
+    <p
+      className="chakra-text css-0"
+    >
+      VideoPlayer description
+    </p>
+    <div
+      className="css-0"
+    >
+      <span
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "<iframe title=\\"Video player\\" src='https://player.vimeo.com/video/421404144?h=5467db7edd' width='640' height='360' frameborder='0' allow='autoplay; fullscreen; picture-in-picture' allowfullscreen></iframe>",
+          }
+        }
+      />
+    </div>
+    <div
+      className="css-0"
+    >
+      <div
+        aria-atomic={true}
+        aria-live="off"
+        className=" css-0"
+        data-isinvalid={false}
+        id="video-player-with-text-componentWrapper-helperText"
+      >
+        VideoPlayer helper test.
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VideoPlayer renders the UI snapshot correctly 4`] = `
 <div
   className="css-0"
   data-testid="video-player-component"

package/src/index.ts

@@ -74,6 +74,10 @@ 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";
@@ -113,6 +117,8 @@ export {
   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 {

package/src/theme/components/breadcrumb.ts

@@ -12,7 +12,7 @@ const booksAndMore = {
   bg: "section.books-and-more.secondary",
 };
 const locations = {
-  bg: "section.locations.secondary",
+  bg: "section.locations.primary",
 };
 const research = {
   bg: "section.research.secondary",

package/src/theme/components/card.ts

@@ -1,4 +1,6 @@
 const imageSizes = {
+  xxsmall: { flex: { base: "0 0 100%", md: "0 0 64px" }, width: "100%" },
+  xsmall: { flex: { md: "0 0 96px" } },
   small: { flex: { md: "0 0 165px" } },
   medium: { flex: { md: "0 0 225px" } },
   large: { flex: { md: "0 0 360px" } },
@@ -137,11 +139,6 @@ const CardImage = {
     const layoutStyles =
       layout === "row"
         ? {
-            display: "flex",
-            flexFlow: {
-              base: "column nowrap",
-              md: "row",
-            },
             flex: { md: "0 0 225px" },
             maxWidth: { base: "100%", md: "50%" },
             textAlign: "left",
@@ -152,10 +149,12 @@ const CardImage = {
                 ? "0 0 0 var(--nypl-space-m)"
                 : "0 var(--nypl-space-m) 0 0",
             },
+            width: { base: "100%", md: null },
             ...size,
           }
         : {
             marginBottom: "xs",
+            width: "100%",
           };
     const imageAtEndStyles = imageAtEnd
       ? {

package/src/theme/components/global.ts

@@ -51,7 +51,7 @@ const checkboxRadioHelperStyle = {
 const labelLegendText = {
   alignItems: "baseline",
   width: "100%",
-  marginBottom: "s",
+  marginBottom: "xs",
   fontSize: "14px",
   fontWeight: "medium",
   display: "flex",

package/src/theme/components/icon.ts

@@ -6,8 +6,8 @@ const svgBase = {
 };
 const align = {
   none: {},
-  left: { marginRight: "xs" },
-  right: { marginLeft: "xs" },
+  left: { marginRight: "xxs" },
+  right: { marginLeft: "xxs" },
 };
 const iconRotation = {
   rotate180: {

package/src/theme/components/image.ts

@@ -12,6 +12,14 @@ const imageSizes = {
   default: {
     maxWidth: "100%",
   },
+  xxsmall: {
+    ...sideMarginsAuto,
+    maxWidth: "64px",
+  },
+  xsmall: {
+    ...sideMarginsAuto,
+    maxWidth: "96px",
+  },
   small: {
     ...sideMarginsAuto,
     maxWidth: "165px",

package/src/theme/components/notification.ts

@@ -49,25 +49,26 @@ const Notification = {
 
 const NotificationContent = {
   parts: ["content"],
-  baseStyle: ({ alignText, notificationType }) => ({
+  baseStyle: ({ alignText, icon, notificationType }) => ({
     display: "flex",
     justifyContent: "center",
     content: {
-      width: "100%",
-      paddingLeft: alignText
-        ? "calc(var(--nypl-space-m) + var(--nypl-space-s))"
-        : null,
       color:
         notificationType === NotificationTypes.Warning
           ? "brand.primary"
           : "currentColor",
+      marginTop: icon ? "xxxs" : "0",
+      paddingLeft: alignText
+        ? "calc(var(--nypl-space-m) + var(--nypl-space-s))"
+        : null,
+      width: "100%",
     },
   }),
 };
 
 const NotificationHeading = {
   parts: ["heading"],
-  baseStyle: ({ centered, notificationType }) => {
+  baseStyle: ({ centered, icon, notificationType }) => {
     let color = "ui.black";
     if (notificationType === NotificationTypes.Announcement) {
       color = "section.research.secondary";
@@ -80,6 +81,7 @@ const NotificationHeading = {
       justifyContent: centered ? "center" : null,
       heading: {
         marginBottom: "0",
+        marginTop: icon ? "xxxs" : "0",
         color,
       },
     };

package/src/theme/components/toggle.ts

@@ -0,0 +1,65 @@
+import { helperTextMargin } from "./global";
+
+const baseStyle = {
+  label: { display: "flex", alignItems: "center", width: "fit-content" },
+  helper: {
+    ...helperTextMargin,
+    marginLeft: "xs",
+  },
+};
+
+const Switch = {
+  baseStyle: {
+    opacity: 0.4,
+    track: {
+      p: "4px",
+      border: "1px solid",
+      borderColor: "ui.gray.medium",
+      _checked: {
+        borderColor: "ui.link.primary",
+        bg: "ui.link.primary",
+        opacity: 1,
+      },
+      _invalid: {
+        borderColor: "ui.error.primary",
+        bg: "inherit",
+        "> span": {
+          bg: "ui.error.primary",
+        },
+      },
+      _disabled: {
+        borderColor: "ui.gray.medium",
+        bg: "ui.gray.medium",
+        _checked: {
+          opacity: 0.4,
+        },
+      },
+      _focus: {
+        outline: "2px solid",
+        outlineColor: "ui.focus",
+        outlineOffset: "2px",
+        zIndex: "9999",
+      },
+    },
+    label: { fontSize: -1, marginLeft: "xs" },
+    thumb: {
+      _disabled: {
+        bg: "ui.error.primary",
+      },
+    },
+  },
+  defaultProps: {
+    colorScheme: "white",
+  },
+};
+
+const Toggle = {
+  parts: ["helper"],
+  baseStyle,
+  // Default values
+  defaultProps: {
+    size: "lg",
+  },
+};
+
+export default { Toggle, Switch };

package/src/theme/foundations/spacing.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,8 @@
 export const spacing = {
   px: "1px",
   0: "0",
+  // --nypl-space-xxxs = 2px
+  xxxs: "0.125rem",
   0.5: "0.125rem",
   // --nypl-space-xxs = 4px
   xxs: "0.25rem",

package/src/theme/index.ts

@@ -40,6 +40,7 @@ import Tabs from "./components/tabs";
 import TemplateStyles from "./components/template";
 import Text from "./components/text";
 import TextInput from "./components/textInput";
+import Toggle from "./components/toggle";
 import VideoPlayer from "./components/videoPlayer";
 
 /**
@@ -107,6 +108,7 @@ const theme = extendTheme({
     ...TemplateStyles,
     Text,
     TextInput,
+    ...Toggle,
     VideoPlayer,
   },
   // Use `cssVarPrefix` to set the prefix used on the CSS vars produced by

package/src/utils/componentCategories.ts

@@ -3,7 +3,7 @@
 const categories = {
   basicContent: {
     title: "Components/Basic Elements",
-    components: ["Card", "Hero", "Promo", "Sponsor", "Table"],
+    components: ["Card", "Hero", "Promo", "Sponsor"],
   },
   contentDisplay: {
     title: "Components/Content Display",
@@ -52,6 +52,7 @@ const categories = {
       "Slider",
       "Textarea",
       "TextInput",
+      "Toggle",
     ],
   },
   layout: {
@@ -65,6 +66,7 @@ const categories = {
       "HorizontalRule",
       "Section",
       "SimpleGrid",
+      "Table",
       "Template",
     ],
   },