@nypl/design-system-react-components 0.25.11 → 0.26.0

package/src/theme/components/structuredContent.ts

@@ -1,3 +1,14 @@
+import { baseTDStyles, baseTHStyles } from "./customTable";
+import { textMargin } from "./global";
+import { headings } from "./heading";
+import { baseLinkStyles } from "./link";
+import {
+  baseDefinitionStyles,
+  baseListStyles,
+  baseSectionDefinitionStyles,
+  baseUnorderedStyles,
+} from "./list";
+
 const StructuredContent = {
   parts: ["image", "imageFigure", "imageWrapper"],
   baseStyle: ({ hasFigureImage, imageAspectRatio, imagePosition }) => {
@@ -15,7 +26,7 @@ const StructuredContent = {
           ? null
           : imagePosition === "left"
           ? "0"
-          : "m",
+          : "l",
       ],
       marginRight: [
         "auto",
@@ -67,6 +78,60 @@ const StructuredContent = {
           !hasFigureImage || imageAspectRatio === "original" ? "m" : null,
         ...styles,
       },
+      /** The following styles are meant to target HTML elements that are
+       * not rendered from the Reservoir DS. Typically, these HTML elements
+       * are added from an API response.
+       */
+      // This gives Chakra `Box` styles to divs inside the
+      // main `StructuredContent` content area.
+      ".structuredcontent-body > div": {
+        marginTop: "var(--nypl-space-l)",
+        marginInlineEnd: "var(--nypl-space-0)",
+        marginBottom: "var(--nypl-space-0)",
+        marginInlineStart: "var(--nypl-space-0)",
+      },
+      a: baseLinkStyles,
+      ul: {
+        ...baseListStyles(),
+        listStyle: "none",
+        ...baseUnorderedStyles(),
+      },
+      ol: {
+        ...baseListStyles(),
+        ...textMargin,
+      },
+      // For section, h2 in the definition list.
+      section: baseSectionDefinitionStyles,
+      dl: baseDefinitionStyles.dl,
+      dt: baseDefinitionStyles.dt,
+      dd: baseDefinitionStyles.dd,
+      table: {
+        width: "100%",
+        th: {
+          // These styles, except for `baseTHStyles`, are set from
+          // Chakra so they are copied explicitly.
+          textAlign: "start",
+          paddingInlineStart: "var(--nypl-space-6)",
+          paddingInlineEnd: "var(--nypl-space-6)",
+          paddingTop: "var(--nypl-space-3)",
+          paddingBottom: "var(--nypl-space-3)",
+          lineHeight: "var(--nypl-lineHeights-4)",
+          ...baseTHStyles(),
+        },
+        td: {
+          // These styles, except for `baseTDStyles`, are set from
+          // Chakra so they are copied explicitly.
+          textAlign: "start",
+          paddingInlineStart: "var(--nypl-space-6)",
+          paddingInlineEnd: "var(--nypl-space-6)",
+          paddingTop: "var(--nypl-space-4)",
+          paddingBottom: "var(--nypl-space-4)",
+          lineHeight: "var(--nypl-lineHeights-5)",
+          ...baseTDStyles(),
+        },
+      },
+      // h1, h2, h3, h4, h5, h6
+      ...headings,
     };
   },
 };

package/src/theme/components/tabs.ts

@@ -21,14 +21,14 @@ const tab = {
   },
   whiteSpace: "nowrap",
   _hover: {
-    bg: "ui.gray.x-light-warm",
+    bg: "ui.gray.x-light-cool",
     borderTopRadius: "sm",
     borderBottom: "1px solid",
     borderBottomColor: "ui.black",
   },
   _selected: {
     fontWeight: "bold",
-    bg: "ui.gray.light-warm",
+    bg: "ui.gray.light-cool",
     border: "0",
     borderTopRadius: "sm",
     borderBottom: "3px solid",

package/src/theme/components/template.ts

@@ -34,21 +34,21 @@ const Template = {
 };
 const TemplateHeader = {
   baseStyle: {
-    marginBottom: "l", // --nypl-space-l
+    marginBottom: "page.hstack", // --nypl-space-l
   },
 };
 const TemplateBreakout = {
   baseStyle: {
     ...breakout,
     width: "100vw",
-    marginBottom: "l", // --nypl-space-l
+    marginBottom: "page.hstack", // --nypl-space-l
   },
 };
 const TemplateContent = {
   baseStyle: {
     ...wrapperStyles,
     display: "block",
-    marginBottom: "l", // --nypl-space-l
+    marginBottom: "page.hstack", // --nypl-space-l
   },
   variants: {
     sidebar: {
@@ -63,13 +63,13 @@ const TemplateContent = {
 const TemplateContentTop = {
   baseStyle: {
     flex: "1 0 100%",
-    marginBottom: "l", // --nypl-space-l
+    marginBottom: "page.hstack", // --nypl-space-l
   },
 };
 const TemplateContentPrimary = {
   baseStyle: {
     flex: "1 1",
-    marginBottom: "l", // --nypl-space-l
+    marginBottom: "page.hstack", // --nypl-space-l
   },
   variants: {
     left: {
@@ -84,20 +84,20 @@ const TemplateContentPrimary = {
 const TemplateContentSidebar = {
   baseStyle: {
     flex: "0 0 255px",
-    order: { md: "1" },
-    marginBottom: "l", // --nypl-space-l
+    order: { md: "page.vstack" },
+    marginBottom: "page.hstack", // --nypl-space-l
   },
   variants: {
     left: {
       marginRight: {
         base: 0,
-        md: "xl", // --nypl-space-xl
+        md: "page.vstack", // --nypl-space-xl
       },
     },
     right: {
       marginLeft: {
         base: 0,
-        md: "xl", // --nypl-space-xl
+        md: "page.vstack", // --nypl-space-xl
       },
     },
   },

package/src/theme/components/textInput.ts

@@ -1,4 +1,7 @@
-import { activeFocus, helperTextMargin } from "./global";
+import {
+  selectTextInputDisabledStyles,
+  selectTextInputFocusStyles,
+} from "./global";
 
 const input = {
   bgColor: "ui.white",
@@ -6,18 +9,19 @@ const input = {
   borderColor: "ui.gray.medium",
   borderRadius: "sm",
   fontSize: "text.caption",
-  py: "xs",
-  px: "s",
+  py: "inset.narrow",
+  px: "inset.default",
   _hover: {
     borderColor: "ui.gray.dark",
   },
   _disabled: {
-    bgColor: "ui.gray.xx-light-cool",
-    color: "ui.gray.xdark",
-    opacity: "1",
+    ...selectTextInputDisabledStyles,
+    _placeholder: {
+      color: "ui.gray.medium",
+    },
   },
-  _active: activeFocus,
-  _focus: activeFocus,
+  _active: selectTextInputFocusStyles,
+  _focus: selectTextInputFocusStyles,
   _placeholder: {
     color: "ui.gray.dark",
     fontStyle: "italic",
@@ -31,11 +35,8 @@ const input = {
 };
 
 const TextInput = {
-  parts: ["helper", "input", "textarea"],
+  parts: ["input", "textarea"],
   baseStyle: {
-    helper: {
-      ...helperTextMargin,
-    },
     input,
     textarea: {
       ...input,

package/src/theme/components/toggle.ts

@@ -1,54 +1,88 @@
-import { helperTextMargin } from "./global";
+import { cssVar } from "@chakra-ui/theme-tools";
+import { ToggleSizes } from "../../components/Toggle/ToggleTypes";
 
-const baseStyle = {
-  label: { display: "flex", alignItems: "center", width: "fit-content" },
-  helper: {
-    ...helperTextMargin,
-    marginLeft: "xxs",
-  },
+const toggleBaseStyle = ({ isDisabled, size }) => {
+  const label = { alignItems: "start", display: "flex", width: "fit-content" };
+  const helperErrorText = {
+    marginLeft: size === ToggleSizes.Default ? "xxl" : "xl",
+    fontStyle: isDisabled ? "italic" : null,
+  };
+  return {
+    label,
+    helperErrorText,
+  };
 };
+const $width = cssVar("switch-track-width");
+const $height = cssVar("switch-track-height");
 
 const Switch = {
-  baseStyle: {
-    opacity: 0.4,
-    track: {
-      border: "1px solid",
-      borderColor: "ui.gray.medium",
-      p: "4px",
-      _checked: {
-        bg: "ui.link.primary",
-        borderColor: "ui.link.primary",
-        opacity: 1,
+  baseStyle: ({ size }: { size: string }) => {
+    return {
+      alignItems: "start",
+      opacity: 0.4,
+      track: {
+        border: "1px solid",
+        borderColor: "ui.gray.medium",
+        p: "1px",
+        _checked: {
+          bg: "ui.link.primary",
+          borderColor: "ui.link.primary",
+          opacity: 1,
+        },
+        _invalid: {
+          bg: "inherit",
+          borderColor: "ui.error.primary",
+          "> span": {
+            bg: "ui.error.primary",
+          },
+        },
+        _disabled: {
+          bg: "ui.gray.medium",
+          borderColor: "ui.gray.medium",
+          _checked: {
+            opacity: 0.4,
+          },
+        },
+        _focus: {
+          outline: "2px solid",
+          outlineColor: "ui.focus",
+          outlineOffset: "2px",
+          zIndex: "9999",
+        },
       },
-      _invalid: {
-        bg: "inherit",
-        borderColor: "ui.error.primary",
-        "> span": {
-          bg: "ui.error.primary",
+      label: {
+        fontSize: "label.default",
+        marginLeft: "xs",
+        marginTop: size === "lg" ? "xxxs" : null,
+        _disabled: {
+          color: "ui.gray.dark",
+          fontStyle: "italic",
         },
       },
-      _disabled: {
-        bg: "ui.gray.medium",
-        borderColor: "ui.gray.medium",
-        _checked: {
-          opacity: 0.4,
+      thumb: {
+        _disabled: {
+          bg: "ui.error.primary",
         },
       },
-      _focus: {
-        outline: "2px solid",
-        outlineColor: "ui.focus",
-        outlineOffset: "2px",
-        zIndex: "9999",
+    };
+  },
+  sizes: {
+    sm: {
+      container: {
+        // Chakra defaults for `sm`:
+        // width: 1.375rem
+        // height: 0.75rem
+        [$width.variable]: "2.25rem",
+        [$height.variable]: "1rem",
       },
     },
-    label: {
-      fontSize: "label.default",
-      marginLeft: "xs",
-      _disabled: { fontStyle: "italic" },
-    },
-    thumb: {
-      _disabled: {
-        bg: "ui.error.primary",
+    lg: {
+      container: {
+        // Chakra defaults for `lg`:
+        // width: 2.875rem
+        // height: 1.5rem
+        [$width.variable]: "3.25rem",
+        [$height.variable]: "1.5rem",
       },
     },
   },
@@ -58,8 +92,8 @@ const Switch = {
 };
 
 const Toggle = {
-  parts: ["helper"],
-  baseStyle,
+  parts: ["helperErrorText"],
+  baseStyle: toggleBaseStyle,
   // Default values
   defaultProps: {
     size: "lg",

package/src/theme/components/videoPlayer.ts

@@ -11,7 +11,7 @@ const square = {
 };
 
 const invalid = {
-  backgroundColor: "ui.gray.light-warm",
+  backgroundColor: "ui.gray.light-cool",
   height: "auto",
   padding: "s",
 };

package/src/theme/foundations/colors.ts

@@ -20,7 +20,7 @@ import { Colors } from "@chakra-ui/react";
  */
 
 // Reusable variables:
-const grayLightCool = "#E0E0E0";
+const grayLightCool = "#E9E9E9";
 const grayxxLightCool = "#FAFAFA";
 const grayMedium = "#BDBDBD";
 const brandPrimary = "#C60917";
@@ -82,30 +82,31 @@ const colors: Colors = {
 
   /** Brand fills for sections on NYPL pages. */
   section: {
-    /** What's On is used for Exhibitions & Events. */
-    "whats-on": {
-      primary: "#242424",
-      secondary: "#000000",
+    /** Blogs is used for the Blogs section. */
+    blogs: {
+      primary: grayLightCool,
+      secondary: grayMedium,
     },
 
     /** Books and More is used for the Catalog, Staff Picks, Recommendations,
      * New Arrivals, and E-Book Central. */
     "books-and-more": brandObj,
 
-    /** Research is used for the Research Catalog and SCC. */
-    research: {
-      primary: "#00838a",
-      secondary: "#006166",
+    /** Education is used for the Education section front and associated
+     * sub-sections. */
+    education: {
+      primary: "#1D62E6",
+      secondary: "#2540A4",
     },
 
     /** Locations is used for Location Finder and all branch pages with
      * the exceptions of some research libraries. */
     locations: brandObj,
 
-    /** Blogs is used for the Blogs section. */
-    blogs: {
-      primary: grayLightCool,
-      secondary: grayMedium,
+    /** Research is used for the Research Catalog and SCC. */
+    research: {
+      primary: "#00838a",
+      secondary: "#006166",
     },
 
     /** Research libraries with specific brand colors to adhere to. */
@@ -114,6 +115,12 @@ const colors: Colors = {
       schomburg: "#a03e31",
       schwartzman: brandSecondary,
     },
+
+    /** What's On is used for Exhibitions & Events. */
+    "whats-on": {
+      primary: "#242424",
+      secondary: "#000000",
+    },
   },
 
   /**

package/src/theme/foundations/global.ts

@@ -1,8 +1,9 @@
+import { activeFocus } from "../components/global";
+import { textMargin } from "../components/global";
+
 /**
  * These rules affect all the global elements on the `body` element of the
- * page when the `DSProvider` component is used. This means that even if the
- * `nypl-ds` CSS class name is not used in a consuming application, these
- * rules will still take effect.
+ * page when the `DSProvider` component is used.
  */
 const global = {
   // styles for the `body` element
@@ -23,8 +24,19 @@ const global = {
   svg: {
     display: "inline",
   },
-  p: {
-    margin: "0 0 var(--nypl-space-s",
+  "button, select, input, textarea": {
+    "&:not([disabled])": {
+      _focus: activeFocus(),
+    },
+  },
+  "iframe, [href], [tabindex], [contentEditable='true']": {
+    _focus: activeFocus(),
+  },
+  p: textMargin,
+  ul: textMargin,
+  ol: textMargin,
+  "*, *::before, &::after": {
+    boxSizing: "inherit",
   },
 };
 

package/src/theme/foundations/radii.ts

@@ -1,4 +1,5 @@
 const radii = {
+  checkbox: "3px",
   pill: "20px",
   round: "100%",
 };

package/src/theme/foundations/spacing.ts

@@ -1,12 +1,13 @@
 /**
- * This is based on:
+ * Chakra spacing values are based on:
  *   root size of 16px or 1rem
  *   1 spacing unit is 4px or 0.25rem
  *
  * Chakra's mental model: If you need a spacing of 40px, divide it by 4.
  * That'll give you 10. Then use it in your component.
  *
- * The DS uses eight CSS variables/values found in "src/styles/03-space/_space.css":
+ * The DS uses nine CSS variables/values found in "src/styles/03-space/_space.css":
+ *   --nypl-space-xxxs = 2px or 0.125rem
  *   --nypl-space-xxs = 4px or 0.25rem
  *   --nypl-space-xs = 8px or 0.5rem
  *   --nypl-space-s = 16px or 1rem
@@ -22,7 +23,7 @@
  *
  * Chakra Number Value | Chakra Name value | DS Variable
  * ------------------- | ----------------- | -----------------
- *        0.5            |         xxxs       |   --nypl-space-xxxs
+ *        0.5          |         xxxs      |   --nypl-space-xxxs
  *        1            |         xxs       |   --nypl-space-xxs
  *        2            |         xs        |   --nypl-space-xs
  *        4            |         s         |   --nypl-space-s
@@ -32,45 +33,27 @@
  *        16           |         xxl       |   --nypl-space-xxl
  *        24           |         xxxl      |   --nypl-space-xxxl
  */
-export const spacing = {
+const chakraSpacingTokens = {
   px: "1px",
   0: "0",
-  // --nypl-space-xxxs = 2px
-  xxxs: "0.125rem",
   0.5: "0.125rem",
-  // --nypl-space-xxs = 4px
-  xxs: "0.25rem",
   1: "0.25rem",
   1.5: "0.375rem",
-  // --nypl-space-xs = 8px
-  xs: "0.5rem",
   2: "0.5rem",
   2.5: "0.625rem",
   3: "0.75rem",
   3.5: "0.875rem",
-  // --nypl-space-s = 16px
-  s: "1rem",
   4: "1rem",
   5: "1.25rem",
-  // --nypl-space-m = 24px
-  m: "1.5rem",
   6: "1.5rem",
   7: "1.75rem",
-  // --nypl-space-l = 32px
-  l: "2rem",
   8: "2rem",
   9: "2.25rem",
   10: "2.5rem",
-  // --nypl-space-xl = 48px
-  xl: "3rem",
   12: "3rem",
   14: "3.5rem",
-  // --nypl-space-xxl = 64px
-  xxl: "4rem",
   16: "4rem",
   20: "5rem",
-  // --nypl-space-xxxl = 96px
-  xxxl: "6rem",
   24: "6rem",
   28: "7rem",
   32: "8rem",
@@ -86,3 +69,68 @@ export const spacing = {
   80: "20rem",
   96: "24rem",
 };
+const reservoirSpacingValues = {
+  xxxs: "0.125rem", // 2px
+  xxs: "0.25rem", // 4px
+  xs: "0.5rem", // 8px
+  s: "1rem", // 16px
+  m: "1.5rem", // 24px
+  l: "2rem", // 32px
+  xl: "3rem", // 48px
+  xxl: "4rem", // 64px
+  xxxl: "6rem", // 96px
+};
+const reservoirSpacingTokens = {
+  // Reservoir generic tokens
+  xxxs: reservoirSpacingValues["xxxs"],
+  xxs: reservoirSpacingValues["xxs"],
+  xs: reservoirSpacingValues["xs"],
+  s: reservoirSpacingValues["s"],
+  m: reservoirSpacingValues["m"],
+  l: reservoirSpacingValues["l"],
+  xl: reservoirSpacingValues["xl"],
+  xxl: reservoirSpacingValues["xxl"],
+  xxxl: reservoirSpacingValues["xxxl"],
+  // Reservoir semantic tokens
+  input: {
+    group: {
+      button: {
+        hstack: reservoirSpacingValues["xs"],
+        vstack: reservoirSpacingValues["xs"],
+      },
+      default: {
+        hstack: reservoirSpacingValues["l"],
+        vstack: reservoirSpacingValues["s"],
+      },
+    },
+  },
+  inset: {
+    default: reservoirSpacingValues["s"],
+    extranarrow: reservoirSpacingValues["xxs"],
+    extrawide: reservoirSpacingValues["xl"],
+    narrow: reservoirSpacingValues["xs"],
+    wide: reservoirSpacingValues["l"],
+  },
+  grid: {
+    default: reservoirSpacingValues["l"],
+    xxs: reservoirSpacingValues["xxs"],
+    xs: reservoirSpacingValues["xs"],
+    s: reservoirSpacingValues["s"],
+    m: reservoirSpacingValues["m"],
+    l: reservoirSpacingValues["l"],
+    xl: reservoirSpacingValues["xl"],
+    xxl: reservoirSpacingValues["xxl"],
+  },
+  page: {
+    hstack: reservoirSpacingValues["l"],
+    vstack: reservoirSpacingValues["l"],
+  },
+  table: {
+    column: reservoirSpacingValues["m"],
+    row: reservoirSpacingValues["l"],
+  },
+};
+export const spacing = {
+  ...chakraSpacingTokens,
+  ...reservoirSpacingTokens,
+};

package/src/theme/foundations/typography.ts

@@ -28,7 +28,7 @@ const typography: Typography = {
   // Values from "src/styles/02-typography/_typeface.css"
   fonts: {
     body: "-apple-system, BlinkMacSystemFont, system-ui, sans-serif",
-    heading: "-apple-system, BlinkMacSystemFont, system-ui, sans-seri",
+    heading: "-apple-system, BlinkMacSystemFont, system-ui, sans-serif",
   },
   // Values from "src/styles/02-typography/_type-scale.css"
   fontSizes: {
@@ -41,7 +41,7 @@ const typography: Typography = {
     "2": fontSizeValues["2"],
     "3": fontSizeValues["3"],
     "4": fontSizeValues["4"],
-    // specific tokens
+    // semantic tokens
     breadcrumbs: {
       default: fontSizeValues["-1"],
     },
@@ -75,7 +75,7 @@ const typography: Typography = {
     regular: fontWeightValues["regular"],
     medium: fontWeightValues["medium"],
     bold: fontWeightValues["bold"],
-    // specific tokens
+    // semantic tokens
     breadcrumbs: {
       default: fontWeightValues["regular"],
       lastChild: fontWeightValues["bold"],