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

package/src/theme/components/list.ts

@@ -1,74 +1,81 @@
 import { textMargin } from "./global";
 
-const List = {
-  baseStyle: ({ inline, noStyling }) => ({
-    // Browser automatically applies margin, so by default we unset it.
-    margin: noStyling ? "0" : "unset",
-    listStyle: noStyling ? "none" : null,
-    marginInlineStart: "unset",
-    paddingLeft: noStyling ? "0" : "l",
-    padding: noStyling ? "0" : null,
-    display: inline ? "flex" : null,
-    li: {
-      marginRight: inline ? "xs" : null,
-      listStyleType: inline ? "none" : null,
-      _notFirst: {
-        marginTop: inline ? null : "xxs",
-      },
+export const baseListStyles = (inline = false, noStyling = false) => ({
+  // Browser automatically applies margin, so by default we unset it.
+  margin: noStyling ? "0" : "unset",
+  listStyle: noStyling ? "none" : null,
+  marginInlineStart: "unset",
+  paddingLeft: noStyling ? "0" : "l",
+  padding: noStyling ? "0" : null,
+  display: inline ? "flex" : null,
+  li: {
+    marginRight: inline ? "xs" : null,
+    listStyleType: inline ? "none" : null,
+    _notFirst: {
+      marginTop: inline ? null : "xxs",
+    },
+  },
+});
+export const baseUnorderedStyles = (noStyling = false) => ({
+  ...textMargin,
+  listStyle: "none",
+  li: {
+    _before: {
+      color: "ui.gray.medium",
+      // \2022 is the CSS Code/unicode for a bullet.
+      content: noStyling ? "unset" : `"\\2022"`,
+      // Needed to add space between the bullet and the text.
+      display: "inline-block",
+      fontWeight: "bold",
+      fontSize: "2",
+      lineHeight: "0.9",
+      marginLeft: "-1rem",
+      width: "1rem",
     },
-  }),
+  },
+});
+export const baseSectionDefinitionStyles = {
+  borderBottom: "1px solid",
+  borderColor: "ui.gray.light-cool",
+  paddingLeft: "0",
+  h2: {
+    borderTop: "3px solid",
+    borderColor: "section.research.primary",
+    margin: "0",
+    padding: "var(--nypl-space-xs) 0 0",
+  },
+};
+export const baseDefinitionStyles = {
+  ...baseSectionDefinitionStyles,
+  dl: {
+    display: "grid",
+    gridTemplateColumns: { base: "100%", md: "max(250px) 1fr" },
+    gridTemplateRows: "1fr",
+    margin: "var(--nypl-space-xs) 0 0",
+  },
+  dt: {
+    borderTop: "1px solid",
+    borderColor: "ui.gray.light-cool",
+    fontWeight: "label.default",
+    paddingBottom: { base: "0", md: "s" },
+    paddingTop: "s",
+    paddingRight: { md: "table.column" },
+  },
+  dd: {
+    margin: "0",
+    paddingBottom: "s",
+    borderTop: { base: "none", md: "1px solid" },
+    borderColor: { md: "ui.gray.light-cool" },
+    paddingTop: { md: "s" },
+  },
+};
+
+const List = {
+  baseStyle: ({ inline, noStyling }) => baseListStyles(inline, noStyling),
   variants: {
-    ul: ({ noStyling }) => ({
-      ...textMargin,
-      listStyle: "none",
-      li: {
-        _before: {
-          color: "ui.gray.medium",
-          // \2022 is the CSS Code/unicode for a bullet.
-          content: noStyling ? "unset" : `"\\2022"`,
-          // Needed to add space between the bullet and the text.
-          display: "inline-block",
-          fontWeight: "bold",
-          fontSize: "2",
-          lineHeight: "0.9",
-          marginLeft: "-1rem",
-          width: "1rem",
-        },
-      },
-    }),
+    ul: ({ noStyling }) => baseUnorderedStyles(noStyling),
     ol: textMargin,
-    dl: {
-      borderBottom: "1px solid",
-      borderColor: "ui.gray.light-cool",
-      paddingLeft: "0",
-      h2: {
-        borderTop: "3px solid",
-        borderColor: "section.research.primary",
-        margin: "0",
-        padding: "var(--nypl-space-xs) 0 0",
-      },
-      dl: {
-        display: "grid",
-        gridTemplateColumns: { base: "100%", md: "max(250px) 1fr" },
-        gridTemplateRows: "1fr",
-        margin: "var(--nypl-space-xs) 0 0",
-      },
-      dt: {
-        borderTop: "1px solid",
-        borderColor: "ui.gray.light-cool",
-        fontWeight: "label.default",
-        paddingBottom: { base: "0", md: "s" },
-        paddingTop: "s",
-        paddingRight: { md: "m" },
-      },
-      dd: {
-        margin: "0",
-        paddingBottom: "s",
-        borderTop: { base: "none", md: "1px solid" },
-        borderColor: { md: "ui.gray.light-cool" },
-        paddingTop: { md: "s" },
-      },
-    },
+    dl: baseDefinitionStyles,
   },
 };
 

package/src/theme/components/notification.ts

@@ -13,7 +13,7 @@ const Notification = {
     return {
       bg,
       display: "flex",
-      fontSize: "-1", // slightly smaller than the default size
+      fontSize: "text.caption", // slightly smaller than the default size
       position: "relative",
       textAlign: isCentered ? "center" : null,
       borderRadius: noMargin ? "0" : "4px",
@@ -21,7 +21,7 @@ const Notification = {
       container: {
         margin: "auto",
         maxWidth: "var(--nypl-breakpoint-xl)",
-        padding: "s",
+        padding: "inset.default",
         paddingRight: dismissible ? "l" : null,
         paddingLeft: isCentered && dismissible ? "l" : null,
         width: "100%",

package/src/theme/components/radio.ts

@@ -1,7 +1,8 @@
 import {
+  activeFocus,
   checkboxRadioLabelStyles,
   checkboxRadioControlSize,
-  checkboxRadioHelperStyle,
+  checkboxRadioHelperErrorTextStyle,
 } from "./global";
 
 // Style object for the Radio's "control" or visual icon.
@@ -19,12 +20,10 @@ const baseStyleControl = {
     borderColor: "ui.focus",
     color: "ui.white",
     _disabled: {
-      color: "ui.gray.medium",
-      borderColor: "ui.gray.medium",
+      borderColor: "ui.disabled.primary",
       bg: "ui.white",
-
       _before: {
-        bg: "ui.gray.medium",
+        bg: "ui.disabled.primary",
       },
     },
     _invalid: {
@@ -49,10 +48,11 @@ const baseStyleControl = {
     },
   },
   _disabled: {
-    borderColor: "ui.gray.medium",
+    borderColor: "ui.disabled.primary",
     bg: "ui.white",
   },
   _focus: {
+    ...activeFocus(),
     boxShadow: "outline",
     borderColor: "ui.focus",
   },
@@ -70,14 +70,14 @@ const baseStyleControl = {
 const baseStyleLabel = checkboxRadioLabelStyles;
 
 // Style object for the Radio's helper text
-const baseStyleHelper = checkboxRadioHelperStyle;
+const baseStyleHelperErrorText = checkboxRadioHelperErrorTextStyle;
 
 const baseStyle = {
   // Chakra-inserted elements in the Chakra Radio component
   control: baseStyleControl,
   label: baseStyleLabel,
   // Custom element in the DS Radio component.
-  helper: baseStyleHelper,
+  helperErrorText: baseStyleHelperErrorText,
 };
 
 // Sticking to "md" for the default size.
@@ -91,7 +91,7 @@ const sizes = {
 };
 
 const Radio = {
-  parts: ["control", "label", "helper"],
+  parts: ["control", "helperErrorText", "label"],
   baseStyle,
   sizes,
   // Default values

package/src/theme/components/radioGroup.ts

@@ -1,7 +1,7 @@
 import { checkboxRadioGroupStyles } from "./global";
 
 const RadioGroup = {
-  parts: ["helper", "stack"],
+  parts: ["helperErrorText", "stack"],
   baseStyle: ({ isFullWidth = false }) => ({
     ...checkboxRadioGroupStyles(isFullWidth),
   }),

package/src/theme/components/select.ts

@@ -1,23 +1,25 @@
-import { activeFocus, helperTextMargin } from "./global";
+import {
+  selectTextInputDisabledStyles,
+  selectTextInputFocusStyles,
+} from "./global";
 
 const select = {
   backgroundColor: "ui.white",
   borderRadius: "sm",
   borderColor: "ui.gray.medium",
   fontSize: "text.caption",
-  paddingTop: "xs",
-  paddingRight: "xl",
-  paddingBottom: "xs",
-  paddingLeft: "s",
+  paddingTop: "inset.narrow",
+  paddingRight: "inset.extrawide",
+  paddingBottom: "inset.narrow",
+  paddingLeft: "inset.default",
   _hover: {
     borderColor: "ui.gray.dark",
   },
-  _active: activeFocus(),
+  _active: selectTextInputFocusStyles,
   _disabled: {
-    color: "ui.gray.xdark",
-    bg: "ui.gray.xx-light-cool",
-    opacity: "1",
+    ...selectTextInputDisabledStyles,
   },
+  _focus: selectTextInputFocusStyles,
   _invalid: {
     border: "1px solid",
     borderColor: "ui.error.primary",
@@ -26,19 +28,30 @@ const select = {
 };
 
 const Select = {
-  parts: ["select", "helper"],
-  baseStyle: {
-    marginBottom: "xs",
-    // The backgroundColor set to "ui.white" hides the arrow SVG icon when
-    // the component is focused. The background is added for dark mode and
-    // so we need to add specific selector.
-    ".chakra-select__icon-wrapper": {
-      zIndex: "9999",
-    },
-    helper: {
-      ...helperTextMargin,
-    },
-    select,
+  parts: ["helperText", "inline", "select"],
+  baseStyle: ({ labelPosition, labelWidth }) => {
+    return {
+      marginBottom: "xs",
+      // The backgroundColor set to "ui.white" hides the arrow SVG icon when
+      // the component is focused. The background is added for dark mode and
+      // so we need to add specific selector.
+      ".chakra-select__icon-wrapper": {
+        zIndex: "9999",
+      },
+      helperText: {
+        marginLeft:
+          labelPosition === "inline" ? { md: `${labelWidth}px` } : null,
+      },
+      inline: {
+        display: { md: "flex" },
+        gap: { md: "var(--nypl-space-xs)" },
+        alignItems: { md: "flex-end" },
+      },
+      select: {
+        ...select,
+        flex: labelPosition === "inline" ? { md: "1" } : null,
+      },
+    };
   },
   variants: {
     searchbar: {

package/src/theme/components/skeletonLoader.ts

@@ -23,8 +23,8 @@ const imageRowHeightStyles = {
 // NYPL's skeleton loader component.
 const SkeletonLoader = {
   parts: ["section", "image", "container", "heading", "content", "button"],
-  baseStyle: ({ border, imageAspectRatio }) => {
-    const borderStyles = border ? { ...borderRules } : {};
+  baseStyle: ({ imageAspectRatio, isBordered }) => {
+    const borderStyles = isBordered ? { ...borderRules } : {};
 
     return {
       margin: "auto",
@@ -99,7 +99,7 @@ const fade = () =>
 const Skeleton = {
   baseStyle: {
     borderRadius: "2px",
-    background: "ui.gray.light-warm",
+    background: "ui.gray.light-cool",
     animation: `${fade()} 1000ms cubic-bezier(0.25, -0.5, 1, 0) infinite`,
   },
 };

package/src/theme/components/slider.ts

@@ -8,7 +8,6 @@ const staticValues = {
 const CustomSlider = {
   parts: [
     "container",
-    "helper",
     "leftValue",
     "rightValue",
     "textInput",
@@ -22,7 +21,7 @@ const CustomSlider = {
     if (isInvalid) {
       baseColor = "ui.error.primary";
     } else if (isDisabled) {
-      baseColor = "ui.gray.light-cool";
+      baseColor = "ui.disabled.primary";
     }
 
     return {
@@ -30,16 +29,14 @@ const CustomSlider = {
         display: "flex",
         alignItems: "center",
       },
-      helper: {
-        marginTop: "xs",
-      },
-      leftValue: staticValues,
+      leftValue: { ...staticValues, color: isDisabled ? "ui.gray.dark" : null },
       rightValue: {
         ...staticValues,
         marginLeft: "s",
         // If the text input boxes are shown, then there already is
         // a margin, so we can set this static value to "0".
         marginRight: showBoxes ? "0" : "s",
+        color: isDisabled ? "ui.gray.dark" : null,
       },
       textInput: {
         // Allows for three or more digits present in the
@@ -62,7 +59,7 @@ const CustomSlider = {
       track: {
         bgColor: "ui.gray.light-cool",
         _disabled: {
-          bgColor: "ui.gray.light-cool",
+          bgColor: "ui.disabled.primary",
         },
       },
       thumb: {
@@ -74,6 +71,10 @@ const CustomSlider = {
         _active: {
           transform: "translateY(-50%) scale(1.0)",
         },
+        _disabled: {
+          bgColor: "ui.disabled.secondary",
+          borderColor: "ui.disabled.primary",
+        },
       },
     };
   },

package/src/theme/components/statusBadge.ts

@@ -5,8 +5,8 @@ const StatusBadge = {
     display: "block",
     fontSize: "-1", // slightly smaller than the default size
     fontStyle: "italic",
-    py: "xxs",
-    px: "xs",
+    py: "inset.extranarrow",
+    px: "inset.narrow",
     textAlign: "center",
     width: "fit-content",
   },

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,12 +1,16 @@
-import { helperTextMargin } from "./global";
 import { cssVar } from "@chakra-ui/theme-tools";
+import { ToggleSizes } from "../../components/Toggle/ToggleTypes";
 
-const baseStyle = {
-  label: { alignItems: "start", display: "flex", 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");
@@ -50,7 +54,10 @@ const Switch = {
         fontSize: "label.default",
         marginLeft: "xs",
         marginTop: size === "lg" ? "xxxs" : null,
-        _disabled: { fontStyle: "italic" },
+        _disabled: {
+          color: "ui.gray.dark",
+          fontStyle: "italic",
+        },
       },
       thumb: {
         _disabled: {
@@ -85,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",
 };