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

package/src/components/Toggle/Toggle.tsx

@@ -1,13 +1,16 @@
-import * as React from "react";
 import {
   Box,
   Switch,
   useMultiStyleConfig,
   useStyleConfig,
 } from "@chakra-ui/react";
-import generateUUID from "../../helpers/generateUUID";
+import * as React from "react";
+
+import HelperErrorText, {
+  HelperErrorTextType,
+} from "../HelperErrorText/HelperErrorText";
 import { ToggleSizes } from "./ToggleSizes";
-import HelperErrorText from "../HelperErrorText/HelperErrorText";
+import generateUUID from "../../helpers/generateUUID";
 
 export interface ToggleProps {
   /** Optionally pass in additional Chakra-based styles. */
@@ -16,12 +19,12 @@ export interface ToggleProps {
    *   If true, the toggle will be initially set to the "on" position. */
   defaultChecked?: boolean;
   /** Optional string to populate the HelperErrorText for standard state */
-  helperText?: string;
+  helperText?: HelperErrorTextType;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
   /** Optional string to populate the HelperErrorText for the error state
    * when `isInvalid` is true. */
-  invalidText?: string;
+  invalidText?: HelperErrorTextType;
   /** When using the Toggle as a "controlled" form element, you can specify
    * the Toggle's checked state using this prop.
    * Learn more about controlled and uncontrolled form fields:
@@ -71,7 +74,7 @@ const Toggle = React.forwardRef<HTMLInputElement, ToggleProps>(
       onChange = onChangeDefault,
       size = ToggleSizes.Large,
     } = props;
-    const footnote = isInvalid ? invalidText : helperText;
+    const footnote: HelperErrorTextType = isInvalid ? invalidText : helperText;
     const ariaAttributes = {};
     const styles = useMultiStyleConfig("Toggle", {});
     const switchStyles = useStyleConfig("Switch");
@@ -105,9 +108,11 @@ const Toggle = React.forwardRef<HTMLInputElement, ToggleProps>(
         </Box>
         {footnote && (
           <Box __css={styles.helper}>
-            <HelperErrorText isInvalid={isInvalid} id={`${id}-helperText`}>
-              {footnote}
-            </HelperErrorText>
+            <HelperErrorText
+              id={`${id}-helperText`}
+              isInvalid={isInvalid}
+              text={footnote}
+            />
           </Box>
         )}
       </>

package/src/components/VideoPlayer/VideoPlayer.stories.mdx

@@ -1,17 +1,27 @@
+import { action } from "@storybook/addon-actions";
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
+  Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 
-import DSProvider from "../../theme/provider";
 import VideoPlayer from "./VideoPlayer";
-import { VideoPlayerTypes } from "./VideoPlayerTypes";
-import { action } from "@storybook/addon-actions";
+import { VideoPlayerAspectRatios, VideoPlayerTypes } from "./VideoPlayerTypes";
 import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
+import { getStorybookEnumValues } from "../../utils/utils";
+
+export const ratiosEnumValues = getStorybookEnumValues(
+  VideoPlayerAspectRatios,
+  "VideoPlayerAspectRatios"
+);
+export const typesEnumValues = getStorybookEnumValues(
+  VideoPlayerTypes,
+  "VideoPlayerTypes"
+);
 
 <Meta
   title={getCategory("VideoPlayer")}
@@ -20,15 +30,27 @@ import { getCategory } from "../../utils/componentCategories";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10968%3A3680",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10968%3A3680",
     },
     jest: ["VideoPlayer.test.tsx"],
   }}
   argTypes={{
-    attributes: { table: { disable: true } },
-    className: { table: { disable: true } },
-    modifiers: { table: { disable: true } },
+    aspectRatio: {
+      control: { type: "select" },
+      table: {
+        defaultValue: { summary: "VideoPlayerAspectRatios.SixteenByNine" },
+      },
+      options: ratiosEnumValues.options,
+    },
+    className: { control: false },
+    id: { control: false },
+    showHelperInvalidText: {
+      table: { defaultValue: { summary: true } },
+    },
+    videoType: {
+      control: { type: "select" },
+      options: typesEnumValues.options,
+    },
   }}
 />
 
@@ -37,7 +59,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.23.2`   |
-| Latest            | `0.25.8`   |
+| Latest            | `0.25.9`   |
 
 <Description of={VideoPlayer} />
 
@@ -51,15 +73,29 @@ The `aspectRatio` prop is used to control the sizing of the space allotted for t
   <Story
     name="VideoPlayer"
     args={{
+      aspectRatio: "VideoPlayerAspectRatios.SixteenByNine",
+      className: undefined,
       descriptionText:
         "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",
       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: "NYPL Video",
       helperText:
         "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.",
+      id: "videoPlayer-id",
+      iframeTitle: undefined,
+      showHelperInvalidText: true,
+      videoId: undefined,
+      videoType: undefined,
     }}
   >
-    {(args) => <VideoPlayer {...args} />}
+    {(args) => (
+      <VideoPlayer
+        {...args}
+        aspectRatio={ratiosEnumValues.getValue(args.aspectRatio)}
+        embedCode={args.embedCode}
+        videoType={args.videoType && typesEnumValues.getValue(args.videoType)}
+      />
+    )}
   </Story>
 </Canvas>
 
@@ -127,3 +163,17 @@ If the necessary props are not passed to the `VideoPlayer` component, the compon
     />
   </DSProvider>
 </Canvas>
+
+## HTML in Helper Text
+
+It's possible to include HTML in the `helperText` prop.
+
+<Canvas>
+  <DSProvider>
+    <VideoPlayer
+      helperText="This helper text <b>contains HTML</b>."
+      videoId="474719268"
+      videoType={VideoPlayerTypes.Vimeo}
+    />
+  </DSProvider>
+</Canvas>

package/src/components/VideoPlayer/VideoPlayer.tsx

@@ -1,30 +1,40 @@
-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 */
+  /** 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; if a `title` attribute is already present in the `embedCode` prop, this prop will be ignored */
+  /** 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. */
+  /** 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;

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

@@ -64,11 +64,14 @@ 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>
@@ -112,11 +115,14 @@ exports[`VideoPlayer renders the UI snapshot correctly 3`] = `
         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>

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,13 +60,13 @@ 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";
@@ -92,6 +90,8 @@ export {
 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,
@@ -125,3 +125,4 @@ 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

@@ -25,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: {
@@ -43,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",

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

@@ -34,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
       ? {
@@ -74,6 +75,7 @@ const Card = {
       textAlign: center ? "center" : null,
       heading: {
         marginBottom: "xs",
+        a: mainActionLink ? { color: "ui.black" } : null,
       },
       body: {
         display: { md: "block" },
@@ -133,7 +135,7 @@ 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 =
@@ -163,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",
@@ -52,14 +52,14 @@ const labelLegendText = {
   alignItems: "baseline",
   width: "100%",
   marginBottom: "xs",
-  fontSize: "14px",
-  fontWeight: "medium",
+  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 = {