@nypl/design-system-react-components 0.25.12 → 0.26.1

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: {
@@ -72,13 +74,13 @@ const baseStyleControl = {
 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.
@@ -87,7 +89,7 @@ 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: "label.default" },
@@ -95,7 +97,7 @@ const sizes = {
 };
 
 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,9 +2,9 @@ import { labelLegendText } from "./global";
 import { screenreaderOnly } from "./globalMixins";
 
 const Fieldset = {
-  parts: ["helper"],
   baseStyle: ({ isLegendHidden }) => {
     const screenreaderStyles = isLegendHidden ? screenreaderOnly : {};
+
     return {
       border: 0,
       padding: 0,
@@ -12,7 +12,6 @@ const Fieldset = {
         ...labelLegendText,
         ...screenreaderStyles,
       },
-      helper: { ...labelLegendText.helper },
     };
   },
 };

package/src/theme/components/global.ts

@@ -5,22 +5,19 @@ export { wrapperStyles } from "./globalMixins";
 
 // Used in `Select` and `TextInput`.
 const activeFocus = (darkMode = false) => ({
+  boxShadow: "none",
   outline: "2px solid",
   outlineOffset: "2px",
   outlineColor: darkMode ? "ui.white" : "ui.focus",
   zIndex: "9999",
 });
-// Used in `Select` and `TextInput`.
-const helperTextMargin = {
-  marginTop: "xxs",
-  marginBottom: "0",
-};
 // Used in `Checkbox` and `Radio`.
 const checkboxRadioLabelStyles = {
   userSelect: "none",
   fontWeight: "text.default",
   marginBottom: "0",
   marginLeft: "xs",
+  width: "100%",
   _disabled: {
     color: "ui.gray.dark",
     opacity: 1,
@@ -37,36 +34,44 @@ 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 = {
-  helper: {
-    marginTop: "s",
+const checkboxRadioGroupStyles = (isFullWidth = false) => ({
+  helperErrorText: {
+    marginTop: "xs",
   },
   stack: {
-    width: "fit-content",
+    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",
   },
 };
+// 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",
@@ -77,9 +82,10 @@ export {
   activeFocus,
   checkboxRadioControlSize,
   checkboxRadioGroupStyles,
-  checkboxRadioHelperStyle,
+  checkboxRadioHelperErrorTextStyle,
   checkboxRadioLabelStyles,
-  helperTextMargin,
   labelLegendText,
+  selectTextInputDisabledStyles,
+  selectTextInputFocusStyles,
   textMargin,
 };

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",

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;