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

package/src/theme/components/breadcrumb.ts

@@ -7,10 +7,16 @@ const blogs = {
       color: "ui.gray.xdark",
     },
   },
+  svg: {
+    fill: "ui.black",
+  },
 };
 const booksAndMore = {
   bg: "section.books-and-more.secondary",
 };
+const education = {
+  bg: "section.education.secondary",
+};
 const locations = {
   bg: "section.locations.primary",
 };
@@ -78,6 +84,7 @@ const Breadcrumb = {
   variants: {
     blogs,
     booksAndMore,
+    education,
     locations,
     research,
     whatsOn,

package/src/theme/components/button.ts

@@ -6,8 +6,9 @@ const baseStyle = {
   cursor: "pointer",
   color: "ui.white",
   justifyContent: "center",
-  py: "xs",
-  px: "s",
+  maxHeight: "2.5rem",
+  py: "inset.narrow",
+  px: "inset.default",
   textDecoration: "none",
   wordWrap: "normal",
   fontWeight: "button.default",
@@ -44,6 +45,10 @@ const secondary = {
   fontSize: "button.default",
   _hover: {
     bg: "ui.gray.xx-light-cool",
+    borderColor: "ui.gray.medium",
+  },
+  _disabled: {
+    bg: "ui.gray.x-light-cool",
   },
 };
 const link = {
@@ -65,12 +70,15 @@ const pill = {
   borderColor: "ui.gray.light-cool",
   color: "inherit",
   borderRadius: "pill",
-  py: "xs",
-  paddingInlineStart: "m",
-  paddingInlineEnd: "m",
+  py: "inset.narrow",
+  px: "inset.wide",
   fontSize: "button.default",
   _hover: {
     bg: "ui.gray.xx-light-cool",
+    borderColor: "ui.gray.medium",
+  },
+  _disabled: {
+    bg: "ui.gray.x-light-cool",
   },
 };
 const iconOnly = {
@@ -81,8 +89,8 @@ const iconOnly = {
   _hover: {
     bg: "ui.gray.xx-light-cool",
   },
-  paddingInlineStart: "xs",
-  paddingInlineEnd: "xs",
+  paddingInlineStart: "inset.narrow",
+  paddingInlineEnd: "inset.narrow",
 };
 const callout = {
   bg: "brand.primary",

package/src/theme/components/card.ts

@@ -6,36 +6,48 @@ const imageSizes = {
   large: { flex: { md: "0 0 360px" } },
 };
 // This is complicated and can be refactored later...
-const getBodyPaddingStyles = ({ border, hasImage, imageAtEnd, isRow }) => {
+const getBodyPaddingStyles = ({
+  hasImage,
+  isBordered,
+  imageIsAtEnd,
+  isRow,
+}) => {
   let bodyPadding = null;
-  if (border) {
-    bodyPadding = "s";
+  if (isBordered) {
+    bodyPadding = "inset.default";
     if (hasImage) {
-      bodyPadding = "0 var(--nypl-space-s) var(--nypl-space-s)";
+      bodyPadding =
+        "0 var(--nypl-space-inset-default) var(--nypl-space-inset-default)";
     }
   }
-  if (isRow && border) {
-    bodyPadding = "var(--nypl-space-s)";
+  if (isRow && isBordered) {
+    bodyPadding = "inset.default";
   }
-  if (isRow && border && hasImage) {
+  if (isRow && isBordered && hasImage) {
     bodyPadding = {
-      base: "0 var(--nypl-space-s) var(--nypl-space-s)",
-      md: "var(--nypl-space-s) var(--nypl-space-s) var(--nypl-space-s) 0",
+      base: "0 var(--nypl-space-inset-default) var(--nypl-space-inset-default)",
+      md: "var(--nypl-space-inset-default) var(--nypl-space-inset-default) var(--nypl-space-inset-default) 0",
     };
-    if (imageAtEnd) {
+    if (imageIsAtEnd) {
       bodyPadding = {
-        base: "var(--nypl-space-s) var(--nypl-space-s) 0",
-        md: "var(--nypl-space-s) 0 var(--nypl-space-s) var(--nypl-space-s)",
+        base: "var(--nypl-space-inset-default) var(--nypl-space-inset-default) 0",
+        md: "var(--nypl-space-inset-default) 0 var(--nypl-space-inset-default) var(--nypl-space-inset-default)",
       };
     }
   }
   return bodyPadding;
 };
 const Card = {
-  parts: ["body", "heading"],
+  parts: ["actions", "body", "heading"],
   baseStyle: (props) => {
-    const { border, center, hasImage, imageAtEnd, layout, mainActionLink } =
-      props;
+    const {
+      hasImage,
+      imageIsAtEnd,
+      isBordered,
+      isCentered,
+      layout,
+      mainActionLink,
+    } = props;
     const isRow = layout === "row";
     const layoutStyles = isRow
       ? {
@@ -46,23 +58,23 @@ const Card = {
           },
           maxWidth: "100%",
           textAlign: "left",
-          alignItems: center ? "center" : null,
+          alignItems: isCentered ? "center" : null,
         }
       : {};
-    const baseBorderStyles = border
+    const baseBorderStyles = isBordered
       ? {
           border: "1px solid",
           borderColor: "ui.gray.medium",
         }
       : {};
     const bodyPadding = getBodyPaddingStyles({
-      border,
+      isBordered,
       hasImage,
-      imageAtEnd,
+      imageIsAtEnd,
       isRow,
     });
     let bodyMargin = null;
-    if (center) {
+    if (isCentered) {
       bodyMargin = "auto";
       if (isRow) {
         bodyMargin = "0";
@@ -72,10 +84,11 @@ const Card = {
       alignItems: "flex-start",
       display: "flex",
       flexFlow: "column wrap",
-      textAlign: center ? "center" : null,
-      heading: {
-        marginBottom: "xs",
-        a: mainActionLink ? { color: "ui.black" } : null,
+      textAlign: isCentered ? "center" : null,
+      actions: {
+        width: ["100%", "100%", "180px"],
+        marginLeft: ["0", "0", "m"],
+        marginTop: ["xs", "xs", "0"],
       },
       body: {
         display: { md: "block" },
@@ -83,6 +96,10 @@ const Card = {
         margin: bodyMargin,
         padding: bodyPadding,
       },
+      heading: {
+        marginBottom: "xs",
+        a: mainActionLink ? { color: "ui.black" } : null,
+      },
       ...baseBorderStyles,
       ...layoutStyles,
     };
@@ -91,13 +108,15 @@ const Card = {
 
 const CardActions = {
   baseStyle: (props) => {
-    const { bottomBorder, center, layout, topBorder } = props;
+    const { bottomBorder, isCentered, layout, topBorder } = props;
     let justifyContent = null;
-    if (center) {
-      justifyContent = "center";
-    } else if (layout === "row") {
+    // Only center in the column layout.
+    if (layout === "row") {
       justifyContent = "left";
+    } else if (isCentered) {
+      justifyContent = "center";
     }
+
     const topBorderStyles = topBorder
       ? {
           borderTop: "1px solid",
@@ -135,30 +154,31 @@ const CardContent = {
 };
 
 const CardImage = {
-  baseStyle: ({ center, imageAtEnd, imageSize, layout }) => {
+  baseStyle: ({ imageIsAtEnd, isCentered, layout, size }) => {
     // These sizes are only for the "row" layout.
-    const size = imageSizes[imageSize] || {};
+    const imageSize = imageSizes[size] || {};
     const layoutStyles =
       layout === "row"
         ? {
             flex: { md: "0 0 225px" },
             maxWidth: { base: "100%", md: "50%" },
             textAlign: "left",
-            alignItems: center ? "center" : null,
+            alignItems: isCentered ? "center" : null,
             margin: {
-              base: imageAtEnd ? "var(--nypl-space-m) 0 0" : null,
-              md: imageAtEnd
+              base: imageIsAtEnd ? "var(--nypl-space-m) 0 0" : null,
+              md: imageIsAtEnd
                 ? "0 0 0 var(--nypl-space-m)"
                 : "0 var(--nypl-space-m) 0 0",
             },
             width: { base: "100%", md: null },
-            ...size,
+            marginBottom: ["xs", "xs"],
+            ...imageSize,
           }
         : {
             marginBottom: "xs",
             width: "100%",
           };
-    const imageAtEndStyles = imageAtEnd
+    const imageIsAtEndStyles = imageIsAtEnd
       ? {
           marginBottom: "0",
           marginTop: "s",
@@ -167,7 +187,7 @@ const CardImage = {
       : {};
 
     return {
-      ...imageAtEndStyles,
+      ...imageIsAtEndStyles,
       ...layoutStyles,
     };
   },

package/src/theme/components/checkbox.ts

@@ -4,7 +4,7 @@
 import {
   checkboxRadioLabelStyles,
   checkboxRadioControlSize,
-  checkboxRadioHelperStyle,
+  checkboxRadioHelperErrorTextStyle,
 } from "./global";
 
 // Style object for the Checkbox's visual icon.
@@ -36,8 +36,10 @@ const baseStyleControl = {
 
     _disabled: {
       bg: "ui.white",
-      borderColor: "ui.gray.medium",
-      color: "ui.gray.medium",
+      borderColor: "ui.disabled.primary",
+      svg: {
+        color: "ui.disabled.primary",
+      },
     },
 
     _indeterminate: {
@@ -53,7 +55,7 @@ const baseStyleControl = {
 
   _disabled: {
     bg: "ui.white",
-    borderColor: "ui.gray.medium",
+    borderColor: "ui.disabled.primary",
   },
 
   _focus: {
@@ -69,20 +71,16 @@ const baseStyleControl = {
 };
 
 // Style object for the Checkbox's label
-const baseStyleLabel = {
-  ...checkboxRadioLabelStyles,
-};
+const baseStyleLabel = checkboxRadioLabelStyles;
 
 // Style object for the Checkbox's helper text
-const baseStyleHelper = {
-  ...checkboxRadioHelperStyle,
-};
+const baseStyleHelperErrorText = checkboxRadioHelperErrorTextStyle;
 
 const baseStyle = {
   icon: baseStyleIcon,
   control: baseStyleControl,
   label: baseStyleLabel,
-  helper: baseStyleHelper,
+  helperErrorText: baseStyleHelperErrorText,
 };
 
 // Sticking to "lg" for the default size.
@@ -91,15 +89,15 @@ const sizes = {
     // Controls the width/height of the checkbox itself.
     control: {
       ...checkboxRadioControlSize,
-      borderRadius: "sm",
+      borderRadius: "checkbox",
     },
     // Controls the font-size of the label only.
-    label: { fontSize: "text.default" },
+    label: { fontSize: "label.default" },
   },
 };
 
 const Checkbox = {
-  parts: ["icon", "control", "label", "helper"],
+  parts: ["helperErrorText", "icon", "control", "label"],
   baseStyle,
   sizes,
   // Default values

package/src/theme/components/checkboxGroup.ts

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

package/src/theme/components/componentWrapper.ts

@@ -1,7 +1,7 @@
 const ComponentWrapper = {
+  parts: ["helperErrorText"],
   baseStyle: ({ hasChildren }) => ({
-    helperText: {
-      marginBottom: "0",
+    helperErrorText: {
       marginTop: hasChildren ? "xs" : "0",
     },
   }),

package/src/theme/components/customTable.ts

@@ -1,4 +1,40 @@
-const baseStyle = ({
+export const baseTHStyles = (
+  showRowDividers = false,
+  columnHeadersTextColor = false
+) => ({
+  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",
+  },
+});
+export const baseTDStyles = (
+  showRowDividers = false,
+  useRowHeaders = false
+) => ({
+  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",
+  },
+});
+export const baseStyle = ({
   columnHeadersTextColor,
   showRowDividers,
   useRowHeaders,
@@ -12,36 +48,8 @@ const baseStyle = ({
       color: "var(--nypl-colors-ui-black)",
     },
   },
-  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",
-    },
-  },
+  th: baseTHStyles(showRowDividers, columnHeadersTextColor),
+  td: baseTDStyles(showRowDividers, useRowHeaders),
   caption: {
     captionSide: "top",
     color: "ui.black",

package/src/theme/components/fieldset.ts

@@ -2,15 +2,16 @@ import { labelLegendText } from "./global";
 import { screenreaderOnly } from "./globalMixins";
 
 const Fieldset = {
-  parts: ["helper"],
   baseStyle: ({ isLegendHidden }) => {
     const screenreaderStyles = isLegendHidden ? screenreaderOnly : {};
+
     return {
+      border: 0,
+      padding: 0,
       legend: {
         ...labelLegendText,
         ...screenreaderStyles,
       },
-      helper: { ...labelLegendText.helper },
     };
   },
 };

package/src/theme/components/global.ts

@@ -4,26 +4,20 @@ export { wrapperStyles } from "./globalMixins";
 /** Reusable component styles. */
 
 // Used in `Select` and `TextInput`.
-const activeFocus = {
-  border: "1px solid",
-  borderColor: "ui.focus",
+const activeFocus = (darkMode = false) => ({
+  boxShadow: "none",
+  outline: "2px solid",
+  outlineOffset: "2px",
+  outlineColor: darkMode ? "ui.white" : "ui.focus",
   zIndex: "9999",
-  outline: "1px solid",
-  outlineColor: "ui.focus",
-};
-// Used in `Select` and `TextInput`.
-const helperTextMargin = {
-  marginTop: "xxs",
-  marginBottom: "0",
-};
+});
 // Used in `Checkbox` and `Radio`.
 const checkboxRadioLabelStyles = {
   userSelect: "none",
-  fontSize: "text.default",
   fontWeight: "text.default",
   marginBottom: "0",
   marginLeft: "xs",
-  verticalAlign: "middle",
+  width: "100%",
   _disabled: {
     color: "ui.gray.dark",
     opacity: 1,
@@ -40,43 +34,58 @@ const checkboxRadioControlSize = {
   w: "1.375rem",
 };
 // Used in `Checkbox` and `Radio`.
-const checkboxRadioHelperStyle = {
-  ...helperTextMargin,
+const checkboxRadioHelperErrorTextStyle = {
   marginLeft: "30px", // calc(22px + var(--nypl-space-xs))
   _disabled: {
+    color: "ui.gray.dark",
     fontStyle: "italic",
   },
 };
+const checkboxRadioGroupStyles = (isFullWidth = false) => ({
+  helperErrorText: {
+    marginTop: "xs",
+  },
+  stack: {
+    width: isFullWidth ? "100%" : "fit-content",
+  },
+});
 // Used in `Label` and `Fieldset`.
 const labelLegendText = {
-  alignItems: "baseline",
-  width: "100%",
-  marginBottom: "xs",
+  display: "inline-block",
   fontSize: "label.default",
   fontWeight: "label.default",
-  display: "flex",
-  justifyContent: "space-between",
-  helper: {
-    marginLeft: "m",
-    fontSize: "helper.default",
-    fontWeight: "helper.default",
+  marginBottom: "xs",
+  width: "100%",
+  span: {
+    fontWeight: "regular",
   },
 };
-const checkboxRadioGroupStyles = {
-  helper: {
-    marginTop: "s",
-  },
-  stack: {
-    width: "fit-content",
-  },
+// Used for the disabled state of Select and TextInput
+const selectTextInputDisabledStyles = {
+  bg: "ui.disabled.secondary",
+  borderColor: "ui.disabled.primary",
+  color: "ui.gray.dark",
+  opacity: "1",
+};
+// Used for the focus state of Select and TextInput
+const selectTextInputFocusStyles = {
+  ...activeFocus(),
+  borderColor: "ui.focus",
+};
+// Used for p, ul, and ol
+const textMargin = {
+  margin: "0",
+  marginBottom: "s",
 };
 
 export {
   activeFocus,
   checkboxRadioControlSize,
   checkboxRadioGroupStyles,
-  checkboxRadioHelperStyle,
+  checkboxRadioHelperErrorTextStyle,
   checkboxRadioLabelStyles,
-  helperTextMargin,
   labelLegendText,
+  selectTextInputDisabledStyles,
+  selectTextInputFocusStyles,
+  textMargin,
 };

package/src/theme/components/globalMixins.ts

@@ -2,6 +2,14 @@
  * These objects are also SCSS mixins but are now JS objects in the
  * context of css-in-js and the custom NYPL-theme.
  */
+const screenreaderOnly = {
+  clip: "rect(1px, 1px, 1px, 1px)",
+  height: "1px",
+  overflow: "hidden",
+  position: "absolute !important",
+  width: "1px",
+  wordWrap: "normal",
+};
 const wrapperStyles = {
   marginY: "0",
   marginX: "auto",
@@ -12,13 +20,5 @@ const wrapperStyles = {
   paddingLeft: "0",
   width: "100%",
 };
-const screenreaderOnly = {
-  clip: "rect(1px, 1px, 1px, 1px)",
-  height: "1px",
-  overflow: "hidden",
-  position: "absolute !important",
-  width: "1px",
-  wordWrap: "normal",
-};
 
 export { screenreaderOnly, wrapperStyles };

package/src/theme/components/heading.ts

@@ -8,7 +8,7 @@ const margins = {
 };
 
 // Heading Styles
-const headings = {
+export const headings = {
   h1: {
     fontSize: "heading.primary", // var(--nypl-fontSizes-4);
     fontWeight: "heading.primary",

package/src/theme/components/helperErrorText.ts

@@ -1,5 +1,6 @@
 const helperErrorText = {
   baseStyle: ({ isInvalid }) => ({
+    marginTop: "xxs",
     marginBottom: "0",
     fontSize: "helper.default",
     color: isInvalid ? "ui.error.primary" : "ui.black",