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

package/src/theme/components/hero.ts

@@ -5,8 +5,8 @@ const secondaryBase = {
   overflowX: "hidden",
   content: {
     ...wrapperStyles,
-    paddingRight: "s",
-    paddingLeft: "s",
+    paddingRight: "inset.default",
+    paddingLeft: "inset.default",
     display: "flex",
     flexFlow: {
       base: "column nowrap",
@@ -25,8 +25,9 @@ const secondaryBase = {
     },
   },
   bodyText: {
-    marginTop: "xs",
-    marginRight: { md: "xs" },
+    paddingBottom: "inset.default",
+    paddingTop: "inset.default",
+    paddingRight: { md: "inset.default" },
     flex: { md: "1 1 50%" },
     order: { md: "2" },
   },
@@ -83,10 +84,10 @@ const primary = {
       md: "0 0 60%",
     },
     maxWidth: { md: "960px" },
-    paddingTop: "xxl",
-    paddingBottom: "xxl",
-    paddingRight: "l",
-    paddingLeft: "l",
+    paddingTop: "inset.extrawide",
+    paddingBottom: "inset.extrawide",
+    paddingRight: "inset.wide",
+    paddingLeft: "inset.wide",
     a: {
       color: "inherit",
       display: "inline-block",
@@ -120,10 +121,7 @@ const tertiary = {
     color: "ui.white",
     display: "flex",
     flexFlow: "column nowrap",
-    paddingTop: "m",
-    paddingBottom: "m",
-    paddingRight: "s",
-    paddingLeft: "s",
+    padding: "inset.default",
     p: {
       marginBottom: "0",
       marginTop: "s",
@@ -143,11 +141,11 @@ const campaign = {
   alignItems: "center",
   display: "flex",
   justifyContent: "center",
-  marginBottom: "xxl",
+  marginBottom: ["0", "0", "xxl"],
   minHeight: "300px",
   overflow: "visible",
   padding: {
-    base: "l",
+    base: "inset.wide",
     md: "0",
   },
   position: "relative",
@@ -185,7 +183,7 @@ const campaign = {
       base: "0 0 100%",
       md: "0 0 50%",
     },
-    padding: "l",
+    padding: "inset.wide",
     maxWidth: { md: "960px" },
   },
 };
@@ -221,7 +219,7 @@ const fiftyfifty = {
 };
 const Hero = {
   baseStyle: {
-    bg: "ui.gray.x-light-warm",
+    bg: "ui.gray.x-light-cool",
   },
   // Available variants:
   variants: {

package/src/theme/components/icon.ts

@@ -1,8 +1,8 @@
 const svgBase = {
   display: "inline-block",
   fill: "currentColor",
-  width: "24px",
-  height: "24px",
+  width: "auto",
+  height: "100%",
 };
 const align = {
   none: {},
@@ -40,6 +40,9 @@ const size = {
     height: "var(--nypl-space-m)",
     width: "var(--nypl-space-m)",
   },
+  default: {
+    width: "100%",
+  },
   medium: {
     height: "1.125rem",
     width: "1.125rem",

package/src/theme/components/image.ts

@@ -85,6 +85,7 @@ const CustomImage = {
     },
     figcaption: {
       fontStyle: "italic",
+      fontSize: "text.tag",
     },
     img: {
       display: "block",
@@ -96,7 +97,6 @@ const CustomImage = {
     },
     captionWrappers: {
       marginBottom: "xxs",
-      fontSize: "text.caption",
     },
   }),
 };

package/src/theme/components/label.ts

@@ -1,10 +1,11 @@
 import { labelLegendText } from "./global";
 
 const Label = {
-  parts: ["helper"],
-  baseStyle: {
+  baseStyle: ({ isInlined }) => ({
     ...labelLegendText,
-  },
+    flex: isInlined ? "1" : null,
+    whiteSpace: isInlined ? "nowrap" : null,
+  }),
 };
 
 export default Label;

package/src/theme/components/list.ts

@@ -1,71 +1,82 @@
-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 ? "m" : null,
-      listStyleType: inline ? "none" : null,
-      _notFirst: {
-        marginTop: inline ? null : "xxs",
-      },
+import { textMargin } from "./global";
+
+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",
     },
-  }),
-  variants: {
-    ul: ({ noStyling }) => ({
-      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",
-        },
-      },
-    }),
-    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" },
-      },
+  },
+});
+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 }) => baseUnorderedStyles(noStyling),
+    ol: textMargin,
+    dl: baseDefinitionStyles,
+  },
 };
 
 export default List;

package/src/theme/components/notification.ts

@@ -2,7 +2,7 @@ import { NotificationTypes } from "../../components/Notification/NotificationTyp
 
 const Notification = {
   parts: ["container", "dismissibleButton", "icon"],
-  baseStyle: ({ centered, dismissible, noMargin, notificationType }) => {
+  baseStyle: ({ dismissible, isCentered, noMargin, notificationType }) => {
     let bg = "ui.status.primary";
     if (
       notificationType === NotificationTypes.Announcement ||
@@ -13,17 +13,17 @@ 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: centered ? "center" : null,
+      textAlign: isCentered ? "center" : null,
       borderRadius: noMargin ? "0" : "4px",
       margin: noMargin ? "0" : "s",
       container: {
         margin: "auto",
         maxWidth: "var(--nypl-breakpoint-xl)",
-        padding: "s",
+        padding: "inset.default",
         paddingRight: dismissible ? "l" : null,
-        paddingLeft: centered && dismissible ? "l" : null,
+        paddingLeft: isCentered && dismissible ? "l" : null,
         width: "100%",
       },
       dismissibleButton: {
@@ -38,6 +38,9 @@ const Notification = {
         position: "absolute",
         right: "0",
         top: "0",
+        svg: {
+          marginTop: "0",
+        },
         _hover: {
           bg: "inherit",
         },
@@ -78,7 +81,7 @@ const NotificationContent = {
 
 const NotificationHeading = {
   parts: ["heading"],
-  baseStyle: ({ centered, icon, notificationType }) => {
+  baseStyle: ({ icon, isCentered, notificationType }) => {
     let color = "ui.black";
     if (notificationType === NotificationTypes.Announcement) {
       color = "section.research.secondary";
@@ -88,7 +91,7 @@ const NotificationHeading = {
     return {
       display: "flex",
       marginBottom: "xxs",
-      justifyContent: centered ? "center" : null,
+      justifyContent: isCentered ? "center" : null,
       heading: {
         marginBottom: "0",
         marginTop: icon ? "xxxs" : "0",

package/src/theme/components/pagination.ts

@@ -1,7 +1,6 @@
 const Pagination = {
   parts: ["link"],
   baseStyle: {
-    marginBottom: "l",
     alignItems: "stretch",
     display: "flex",
     width: "100%",
@@ -9,10 +8,8 @@ const Pagination = {
       lineHeight: "1.15",
       textDecoration: "none",
     },
-    li: {
-      _first: {
-        marginTop: "xxs",
-      },
+    ul: {
+      marginBottom: "0",
     },
   },
 };

package/src/theme/components/progressIndicator.ts

@@ -15,8 +15,8 @@ const ProgressIndicator = {
         // Note: we have to target the SVG HTMl elements in order
         // to override the default styles.
         svg: {
-          height: size === ProgressIndicatorSizes.Small ? "24px" : "48px",
-          width: size === ProgressIndicatorSizes.Small ? "24px" : "48px",
+          height: size === ProgressIndicatorSizes.Default ? "48px" : "24px",
+          width: size === ProgressIndicatorSizes.Default ? "48px" : "24px",
           display: "block",
           circle: {
             _first: {
@@ -44,7 +44,7 @@ const ProgressIndicator = {
         bg: darkMode ? "ui.gray.dark" : "ui.gray.light-cool",
         height: {
           base: "4px",
-          md: size === ProgressIndicatorSizes.Small ? "4px" : "8px",
+          md: size === ProgressIndicatorSizes.Default ? "8px" : "4px",
         },
       },
       linearContainer: {

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",
   },
@@ -67,21 +67,17 @@ const baseStyleControl = {
 };
 
 // Style object for the Radio's label
-const baseStyleLabel = {
-  ...checkboxRadioLabelStyles,
-};
+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.
@@ -90,11 +86,12 @@ const sizes = {
     control: {
       ...checkboxRadioControlSize,
     },
+    label: { fontSize: "label.default" },
   },
 };
 
 const Radio = {
-  parts: ["control", "label", "helper"],
+  parts: ["control", "helperErrorText", "label"],
   baseStyle,
   sizes,
   // Default values

package/src/theme/components/radioGroup.ts

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

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",
-  paddingTop: "xs",
-  paddingRight: "xl",
-  paddingBottom: "xs",
-  paddingLeft: "s",
+  fontSize: "text.caption",
+  paddingTop: "inset.narrow",
+  paddingRight: "inset.extrawide",
+  paddingBottom: "inset.narrow",
+  paddingLeft: "inset.default",
   _hover: {
-    borderColor: "ui.gray.medium",
+    borderColor: "ui.gray.dark",
   },
-  _active: activeFocus,
-  _focus: 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,13 +28,30 @@ const select = {
 };
 
 const Select = {
-  parts: ["select", "helper"],
-  baseStyle: {
-    marginBottom: "xs",
-    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

@@ -3,25 +3,25 @@ const staticValues = {
   marginTop: "xs",
   marginBottom: "xs",
   marginRight: "s",
-  marginLeft: "s",
+  marginLeft: "0",
 };
 const CustomSlider = {
   parts: [
     "container",
-    "helper",
     "leftValue",
     "rightValue",
     "textInput",
+    "sliderContainer",
     "filledTrack",
     "track",
     "thumb",
   ],
-  baseStyle: ({ isDisabled, isInvalid, isRangeSlider, showBoxes }) => {
+  baseStyle: ({ isDisabled, isInvalid, showBoxes, showValues }) => {
     let baseColor = "ui.link.primary";
     if (isInvalid) {
       baseColor = "ui.error.primary";
     } else if (isDisabled) {
-      baseColor = "ui.gray.light-cool";
+      baseColor = "ui.disabled.primary";
     }
 
     return {
@@ -29,21 +29,14 @@ const CustomSlider = {
         display: "flex",
         alignItems: "center",
       },
-      helper: {
-        marginTop: "xs",
-      },
-      leftValue: {
-        ...staticValues,
-        // If the text input boxes are shown, then there already is a
-        // margin, so we can set this static value to "0". But for the
-        // single Slider, we *do* need the margin set.
-        marginLeft: showBoxes && isRangeSlider ? "0" : "s",
-      },
+      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
@@ -51,6 +44,13 @@ const CustomSlider = {
         minWidth: "65px",
         color: isInvalid ? "ui.error.primary" : "ui.black",
       },
+      // This is added to the container so that the slider thumbs don't
+      // overflow past the container when the value boxes or min/max values
+      // are not shown.
+      sliderContainer: {
+        marginLeft: !showValues ? "xs" : null,
+        marginRight: !showBoxes && !showValues ? "xs" : null,
+      },
       // Filled track doesn't have a _disabled or _invalid state...
       // so we manually do it through the props.
       filledTrack: {
@@ -59,7 +59,7 @@ const CustomSlider = {
       track: {
         bgColor: "ui.gray.light-cool",
         _disabled: {
-          bgColor: "ui.gray.light-cool",
+          bgColor: "ui.disabled.primary",
         },
       },
       thumb: {
@@ -71,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",
   },