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

package/src/components/VideoPlayer/VideoPlayer.tsx

@@ -1,31 +1,43 @@
-import * as React from "react";
 import { Box, useMultiStyleConfig } from "@chakra-ui/react";
+import * as React from "react";
+
 import ComponentWrapper from "../ComponentWrapper/ComponentWrapper";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+import { VideoPlayerAspectRatios, VideoPlayerTypes } from "./VideoPlayerTypes";
 import generateUUID from "../../helpers/generateUUID";
 import { getVariant } from "../../utils/utils";
-import { VideoPlayerAspectRatios, VideoPlayerTypes } from "./VideoPlayerTypes";
 
 export interface VideoPlayerProps {
-  /** Optional aspect ratio prop to control the sizing of the video player; if omitted, the video player defaults to `sixteen-by-nine` */
+  /** Optional aspect ratio prop to control the sizing of the video player; if
+   * omitted, the video player defaults to `sixteen-by-nine` */
   aspectRatio?: VideoPlayerAspectRatios;
   /** Optional className you can add in addition to `video-player` */
   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;
+  helperText?: HelperErrorTextType;
   /** 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;
+  /** Required YouTube or Vimeo video ID. This value can be pulled from a
+   * video's YouTube or Vimeo URL. */
+  videoId?: string;
   /** Required. Used to specify which video service is being used. */
-  videoType: VideoPlayerTypes;
+  videoType?: VideoPlayerTypes;
 }
 
 export default function VideoPlayer(
@@ -35,6 +47,7 @@ export default function VideoPlayer(
     aspectRatio,
     className,
     descriptionText,
+    embedCode,
     headingText,
     helperText,
     id = generateUUID(),
@@ -54,29 +67,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 (!videoType) {
-    console.warn("VideoPlayer requires the `videoType` prop");
+  } else if (!embedCodeFinal && !videoType) {
+    console.warn(
+      "VideoPlayer also requires the `videoType` prop. You have only set the `videoId` prop."
+    );
     isInvalid = true;
-  } else if (!videoId) {
-    console.warn("VideoPlayer requires the `videoId` prop");
+  } else if (!embedCodeFinal && !videoId) {
+    console.warn(
+      "VideoPlayer also requires the `videoId` prop. You have only set the `videoType` prop."
+    );
+    isInvalid = true;
+  } 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;
+  }
+
+  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 +133,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 +163,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

@@ -64,17 +64,71 @@ exports[`VideoPlayer renders the UI snapshot correctly 2`] = `
         aria-atomic={true}
         aria-live="off"
         className=" css-0"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "VideoPlayer helper test.",
+          }
+        }
         data-isinvalid={false}
         id="video-player-with-text-componentWrapper-helperText"
-      >
-        VideoPlayer helper test.
-      </div>
+      />
     </div>
   </div>
 </div>
 `;
 
 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"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "VideoPlayer helper test.",
+          }
+        }
+        data-isinvalid={false}
+        id="video-player-with-text-componentWrapper-helperText"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VideoPlayer renders the UI snapshot correctly 4`] = `
 <div
   className="css-0"
   data-testid="video-player-component"

package/src/docs/Chakra.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs/blocks";
+import { Meta } from "@storybook/addon-docs";
 
 <Meta title="Chakra UI" />
 
@@ -141,9 +141,7 @@ function Tabs(props) {
 
 #### Patterns
 
-The NYPL DS uses the [CSS BEM](http://getbem.com/introduction/) pattern to
-structure and write CSS, but it is slowly being phased out. We are moving away
-from this and re-writing SCSS classes into Javascript objects that work with
+We are writing CSS style object rules into Javascript objects that work with
 Chakra's theme. Instead of creating a variant for a component with a class name,
 now different props or internal logic are used to get the appropriate variant.
 Internally, the right variant will be mapped to a Chakra theme variant that will
@@ -172,10 +170,6 @@ to test them ourselves.
 
 ## Styling
 
-As mentioned in the [Components composed with Chakra](#components-composed-with-chakra)
-section, we are moving away from using the BEM structure to using Javascript
-objects to extend Chakra's theme.
-
 The NYPL DS' theme file can be found at `src/theme/index.ts`. This creates a new
 theme that extends Chakra's theme and is set in the `DSProvider` component. Note
 that the example below is the general structure of the `theme` object but the DS
@@ -183,6 +177,9 @@ that the example below is the general structure of the `theme` object but the DS
 only work and add new object values in the `components` obejct key for new
 components and their theme or variants.
 
+_Note_: There are some SCSS files used to style third party plugins and to
+generate SCSS mixins.
+
 ```ts
 const theme = extendTheme({
   styles: { ... },

package/src/docs/Intro.stories.mdx

@@ -1,9 +1,9 @@
-import { Meta } from "@storybook/addon-docs/blocks";
+import { Meta } from "@storybook/addon-docs";
+
 import Hero from "../components/Hero/Hero.tsx";
 import { HeroTypes } from "../components/Hero/HeroTypes.tsx";
 import Heading from "../components/Heading/Heading.tsx";
 import Image from "../components/Image/Image.tsx";
-import getCSSVariable from "../helpers/getCSSVariable";
 import DSProvider from "../theme/provider";
 
 <Meta title="Introduction" />

package/src/index.ts

@@ -26,7 +26,6 @@ export {
   CardHeading,
 } from "./components/Card/Card";
 export { CardLayouts } from "./components/Card/CardTypes";
-export { default as CardEdition } from "./components/CardEdition/CardEdition";
 export { default as Checkbox } from "./components/Checkbox/Checkbox";
 export { default as CheckboxGroup } from "./components/CheckboxGroup/CheckboxGroup";
 export { CheckboxGroupLayoutTypes } from "./components/CheckboxGroup/CheckboxGroupLayoutTypes";
@@ -54,7 +53,6 @@ export {
   IconRotationTypes,
   IconSizes,
   IconTypes,
-  LogoNames,
 } from "./components/Icons/IconTypes";
 export { default as Image } from "./components/Image/Image";
 export {
@@ -62,17 +60,22 @@ export {
   ImageSizes,
   ImageTypes,
 } from "./components/Image/ImageTypes";
-export { default as Input } from "./components/Input/Input";
-export { InputTypes } from "./components/Input/InputTypes";
 export { default as Label } from "./components/Label/Label";
 export { default as Link } from "./components/Link/Link";
 export { LinkTypes } from "./components/Link/LinkTypes";
 export { default as List } from "./components/List/List";
 export { ListTypes } from "./components/List/ListTypes";
+export { default as Logo } from "./components/Logo/Logo";
+export { LogoColors, LogoNames, LogoSizes } from "./components/Logo/LogoTypes";
 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";
@@ -84,8 +87,11 @@ 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 { default as StructuredContent } from "./components/StructuredContent/StructuredContent";
+export { StructuredContentImagePosition } from "./components/StructuredContent/StructuredContentTypes";
 export {
   Tabs,
   TabList,
@@ -111,9 +117,12 @@ 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 {
   VideoPlayerAspectRatios,
   VideoPlayerTypes,
 } from "./components/VideoPlayer/VideoPlayerTypes";
+export { default as Table } from "./components/Table/Table";

package/src/styles/base/_03-base.scss

@@ -5,7 +5,7 @@
   font-family: var(--nypl-fonts-body);
 
   // Sets up the base font-size, 1rem, for the system
-  font-size: 16px;
+  font-size: var(--nypl-fontSizes-text-default);
   font-weight: 300;
   line-height: 1.5;
 

package/src/styles/base/_place-holder.scss

@@ -6,13 +6,6 @@
     margin-bottom: var(--nypl-space-xl);
   }
 
-  &--full {
-    margin-bottom: var(--nypl-space-xxl);
-    @include breakpoint($nypl-breakpoint-large) {
-      margin-bottom: var(--nypl-space-xxxl);
-    }
-  }
-
   padding: var(--nypl-space-s);
 
   align-items: center;
@@ -25,6 +18,13 @@
   padding: 4rem 1rem;
   width: 100%;
 
+  &--full {
+    margin-bottom: var(--nypl-space-xxl);
+    @include breakpoint($nypl-breakpoint-large) {
+      margin-bottom: var(--nypl-space-xxxl);
+    }
+  }
+
   &--short {
     padding: 1rem 1rem;
   }

package/src/styles.scss

@@ -20,11 +20,7 @@
 @import "./styles/space/_space-inset";
 @import "./styles/space/_space-stack";
 
-// Legacy/deprecated components:
-@import "./components/CardEdition/_CardEdition.scss";
-@import "./components/Input/_Input.scss";
-
 // Components.
-@import "./components/Autosuggest/_Autosuggest.scss"; // Depends on _Input.scss
+@import "./components/Autosuggest/_Autosuggest.scss";
 @import "./components/DatePicker/_DatePicker.scss";
 @import "./components/Modal/_Modal.scss";

package/src/theme/components/breadcrumb.ts

@@ -1,9 +1,18 @@
 // 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",
 };
 const locations = {
-  bg: "section.locations.secondary",
+  bg: "section.locations.primary",
 };
 const research = {
   bg: "section.research.secondary",
@@ -16,8 +25,8 @@ const Breadcrumb = {
   baseStyle: {
     bg: "ui.black",
     color: "ui.white",
-    fontSize: "-1",
-    fontWeight: "regular",
+    fontSize: "breadcrumbs.default",
+    fontWeight: "breadcrumbs.default",
     paddingBottom: "xs",
     paddingTop: "xs",
     ol: {
@@ -34,7 +43,7 @@ const Breadcrumb = {
       },
     },
     "li:last-child": {
-      fontWeight: { base: "regular", md: "bold" },
+      fontWeight: { base: "breadcrumbs.default", md: "breadcrumbs.lastChild" },
       ".chakra-breadcrumb__link": {
         _hover: {
           cursor: "default",
@@ -67,6 +76,7 @@ const Breadcrumb = {
   },
   // Available variants:
   variants: {
+    blogs,
     booksAndMore,
     locations,
     research,

package/src/theme/components/button.ts

@@ -10,7 +10,7 @@ const baseStyle = {
   px: "s",
   textDecoration: "none",
   wordWrap: "normal",
-  fontWeight: "regular",
+  fontWeight: "button.default",
   svg: {
     fill: "currentColor",
     marginTop: "xxs",
@@ -34,14 +34,14 @@ const primary = {
   bg: "ui.link.primary",
   minWidth: "none",
   height: "none",
-  fontSize: "-1",
+  fontSize: "button.default",
 };
 const secondary = {
   bg: "ui.white",
   border: "1px solid",
   borderColor: "ui.gray.light-cool",
   color: "inherit",
-  fontSize: "-1",
+  fontSize: "button.default",
   _hover: {
     bg: "ui.gray.xx-light-cool",
   },
@@ -68,7 +68,7 @@ const pill = {
   py: "xs",
   paddingInlineStart: "m",
   paddingInlineEnd: "m",
-  fontSize: "-1",
+  fontSize: "button.default",
   _hover: {
     bg: "ui.gray.xx-light-cool",
   },
@@ -86,7 +86,7 @@ const iconOnly = {
 };
 const callout = {
   bg: "brand.primary",
-  fontSize: "-1",
+  fontSize: "button.default",
   _hover: {
     bg: "brand.secondary",
   },
@@ -94,12 +94,6 @@ const callout = {
     bg: "brand.secondary",
   },
 };
-const searchBar = {
-  ...primary,
-  borderLeftRadius: "none",
-  borderRightRadius: { base: "none", md: "sm" },
-  lineHeight: "1.75",
-};
 const noBrand = {
   ...primary,
   bg: "ui.black",
@@ -119,7 +113,6 @@ const Button = {
     pill,
     iconOnly,
     callout,
-    searchBar,
     noBrand,
   },
   // Default values

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" } },
@@ -32,7 +34,8 @@ const getBodyPaddingStyles = ({ border, hasImage, imageAtEnd, isRow }) => {
 const Card = {
   parts: ["body", "heading"],
   baseStyle: (props) => {
-    const { border, center, hasImage, imageAtEnd, layout } = props;
+    const { border, center, hasImage, imageAtEnd, layout, mainActionLink } =
+      props;
     const isRow = layout === "row";
     const layoutStyles = isRow
       ? {
@@ -72,6 +75,7 @@ const Card = {
       textAlign: center ? "center" : null,
       heading: {
         marginBottom: "xs",
+        a: mainActionLink ? { color: "ui.black" } : null,
       },
       body: {
         display: { md: "block" },
@@ -131,17 +135,12 @@ const CardContent = {
 };
 
 const CardImage = {
-  baseStyle: ({ center, imageSize, imageAtEnd, layout }) => {
+  baseStyle: ({ center, imageAtEnd, imageSize, layout }) => {
     // These sizes are only for the "row" layout.
     const size = imageSizes[imageSize] || {};
     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 +151,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
       ? {
@@ -164,6 +165,7 @@ const CardImage = {
           order: "2",
         }
       : {};
+
     return {
       ...imageAtEndStyles,
       ...layoutStyles,

package/src/theme/components/checkbox.ts

@@ -94,7 +94,7 @@ const sizes = {
       borderRadius: "sm",
     },
     // Controls the font-size of the label only.
-    label: { fontSize: "md" },
+    label: { fontSize: "text.default" },
   },
 };
 

package/src/theme/components/customTable.ts

@@ -0,0 +1,50 @@
+const baseStyle = ({
+  columnHeadersTextColor,
+  showRowDividers,
+  useRowHeaders,
+}) => ({
+  th: {
+    border: showRowDividers ? undefined : "none",
+    borderBottom: showRowDividers ? undefined : "0px",
+    color: columnHeadersTextColor ? columnHeadersTextColor : "ui.black",
+    fontSize: "0",
+    fontWeight: "bold",
+    letterSpacing: "0",
+    paddingLeft: 0,
+    paddingRight: "m",
+    textTransform: "capitalize",
+    _first: {
+      paddingLeft: showRowDividers ? "m" : null,
+    },
+    _last: {
+      paddingRight: showRowDividers ? "m" : "0",
+    },
+  },
+  td: {
+    border: showRowDividers ? undefined : "none",
+    borderBottom: showRowDividers ? undefined : "0px",
+    letterSpacing: "0",
+    paddingLeft: 0,
+    paddingRight: "m",
+    _first: {
+      paddingLeft: showRowDividers && !useRowHeaders ? "m" : null,
+    },
+    _last: {
+      paddingRight: showRowDividers ? "m" : "0",
+    },
+  },
+  caption: {
+    captionSide: "top",
+    textAlign: "left",
+    fontSize: "heading.secondary",
+    color: "ui.black",
+    textTransform: "capitalize",
+    fontWeight: "heading.secondary",
+  },
+});
+
+const CustomTable = {
+  baseStyle,
+};
+
+export default CustomTable;

package/src/theme/components/datePicker.ts

@@ -7,7 +7,7 @@ const DatePicker = {
   baseStyle: {
     subLabels: {
       label: {
-        fontSize: "12px",
+        fontSize: "label.secondary",
         marginBottom: "0",
       },
     },

package/src/theme/components/global.ts

@@ -19,8 +19,8 @@ const helperTextMargin = {
 // Used in `Checkbox` and `Radio`.
 const checkboxRadioLabelStyles = {
   userSelect: "none",
-  fontSize: "0",
-  fontWeight: "light",
+  fontSize: "text.default",
+  fontWeight: "text.default",
   marginBottom: "0",
   marginLeft: "xs",
   verticalAlign: "middle",
@@ -51,15 +51,15 @@ const checkboxRadioHelperStyle = {
 const labelLegendText = {
   alignItems: "baseline",
   width: "100%",
-  marginBottom: "s",
-  fontSize: "14px",
-  fontWeight: "medium",
+  marginBottom: "xs",
+  fontSize: "label.default",
+  fontWeight: "label.default",
   display: "flex",
   justifyContent: "space-between",
   helper: {
     marginLeft: "m",
-    fontWeight: "300",
-    fontSize: "-1",
+    fontSize: "helper.default",
+    fontWeight: "helper.default",
   },
 };
 const checkboxRadioGroupStyles = {