@nypl/design-system-react-components 0.25.7 → 0.25.10

package/src/theme/components/card.ts

@@ -1,4 +1,6 @@
 const imageSizes = {
+  xxsmall: { flex: { base: "0 0 100%", md: "0 0 64px" }, width: "100%" },
+  xsmall: { flex: { md: "0 0 96px" } },
   small: { flex: { md: "0 0 165px" } },
   medium: { flex: { md: "0 0 225px" } },
   large: { flex: { md: "0 0 360px" } },
@@ -32,7 +34,8 @@ const getBodyPaddingStyles = ({ border, hasImage, imageAtEnd, isRow }) => {
 const Card = {
   parts: ["body", "heading"],
   baseStyle: (props) => {
-    const { border, center, hasImage, imageAtEnd, layout } = props;
+    const { border, center, hasImage, imageAtEnd, layout, mainActionLink } =
+      props;
     const isRow = layout === "row";
     const layoutStyles = isRow
       ? {
@@ -72,6 +75,7 @@ const Card = {
       textAlign: center ? "center" : null,
       heading: {
         marginBottom: "xs",
+        a: mainActionLink ? { color: "ui.black" } : null,
       },
       body: {
         display: { md: "block" },
@@ -131,17 +135,12 @@ const CardContent = {
 };
 
 const CardImage = {
-  baseStyle: ({ center, imageSize, imageAtEnd, layout }) => {
+  baseStyle: ({ center, imageAtEnd, imageSize, layout }) => {
     // These sizes are only for the "row" layout.
     const size = imageSizes[imageSize] || {};
     const layoutStyles =
       layout === "row"
         ? {
-            display: "flex",
-            flexFlow: {
-              base: "column nowrap",
-              md: "row",
-            },
             flex: { md: "0 0 225px" },
             maxWidth: { base: "100%", md: "50%" },
             textAlign: "left",
@@ -152,10 +151,12 @@ const CardImage = {
                 ? "0 0 0 var(--nypl-space-m)"
                 : "0 var(--nypl-space-m) 0 0",
             },
+            width: { base: "100%", md: null },
             ...size,
           }
         : {
             marginBottom: "xs",
+            width: "100%",
           };
     const imageAtEndStyles = imageAtEnd
       ? {
@@ -164,6 +165,7 @@ const CardImage = {
           order: "2",
         }
       : {};
+
     return {
       ...imageAtEndStyles,
       ...layoutStyles,

package/src/theme/components/checkbox.ts

@@ -94,7 +94,7 @@ const sizes = {
       borderRadius: "sm",
     },
     // Controls the font-size of the label only.
-    label: { fontSize: "md" },
+    label: { fontSize: "text.default" },
   },
 };
 

package/src/theme/components/customTable.ts

@@ -0,0 +1,63 @@
+const baseStyle = ({
+  columnHeadersTextColor,
+  showRowDividers,
+  useRowHeaders,
+}) => ({
+  // Headers `th` can be rendered as the first cell in every row through the
+  // `useRowHeaders`. Whereas the header `th` in the `thead` can be rendered
+  // with a custom color, the row header `th` in the `tbody` should always
+  // have text color black.
+  tbody: {
+    th: {
+      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",
+    },
+  },
+  caption: {
+    captionSide: "top",
+    color: "ui.black",
+    fontSize: "heading.secondary",
+    fontWeight: "heading.secondary",
+    marginBottom: "s",
+    marginLeft: "0",
+    marginRight: "0",
+    marginTop: "0",
+    padding: "0",
+    textAlign: "left",
+  },
+});
+
+const CustomTable = {
+  baseStyle,
+};
+
+export default CustomTable;

package/src/theme/components/datePicker.ts

@@ -7,7 +7,7 @@ const DatePicker = {
   baseStyle: {
     subLabels: {
       label: {
-        fontSize: "12px",
+        fontSize: "label.secondary",
         marginBottom: "0",
       },
     },

package/src/theme/components/global.ts

@@ -19,8 +19,8 @@ const helperTextMargin = {
 // Used in `Checkbox` and `Radio`.
 const checkboxRadioLabelStyles = {
   userSelect: "none",
-  fontSize: "0",
-  fontWeight: "light",
+  fontSize: "text.default",
+  fontWeight: "text.default",
   marginBottom: "0",
   marginLeft: "xs",
   verticalAlign: "middle",
@@ -51,15 +51,15 @@ const checkboxRadioHelperStyle = {
 const labelLegendText = {
   alignItems: "baseline",
   width: "100%",
-  marginBottom: "s",
-  fontSize: "14px",
-  fontWeight: "medium",
+  marginBottom: "xs",
+  fontSize: "label.default",
+  fontWeight: "label.default",
   display: "flex",
   justifyContent: "space-between",
   helper: {
     marginLeft: "m",
-    fontWeight: "300",
-    fontSize: "-1",
+    fontSize: "helper.default",
+    fontWeight: "helper.default",
   },
 };
 const checkboxRadioGroupStyles = {

package/src/theme/components/heading.ts

@@ -1,3 +1,5 @@
+import { baseLinkStyles } from "./link";
+
 const margins = {
   marginTop: "0",
   marginLeft: "0",
@@ -8,30 +10,30 @@ const margins = {
 // Heading Styles
 const headings = {
   h1: {
-    fontSize: "4", // var(--nypl-fontSizes-4);
-    fontWeight: "light",
+    fontSize: "heading.primary", // var(--nypl-fontSizes-4);
+    fontWeight: "heading.primary",
     letterSpacing: "0",
     lineHeight: "1.1",
     ...margins,
     width: "auto",
   },
   h2: {
-    fontSize: "3", // var(--nypl-fontSizes-3);
-    fontWeight: "medium",
+    fontSize: "heading.secondary", // var(--nypl-fontSizes-3);
+    fontWeight: "heading.secondary",
     lineHeight: "1.25",
     ...margins,
     width: "auto",
   },
   h3: {
-    fontSize: "2", // var(--nypl-fontSizes-2);
-    fontWeight: "medium",
+    fontSize: "heading.tertiary", // var(--nypl-fontSizes-2);
+    fontWeight: "heading.tertiary",
     lineHeight: "1.25",
     ...margins,
     width: "auto",
   },
   h4: {
-    fontSize: "1", // var(--nypl-fontSizes-1);
-    fontWeight: "medium",
+    fontSize: "heading.callout", // var(--nypl-fontSizes-1);
+    fontWeight: "heading.callout",
     lineHeight: "1.15",
     ...margins,
     width: "auto",
@@ -61,9 +63,9 @@ const variants = {
 
 const Heading = {
   baseStyle: {
-    a: {
-      color: "ui.black",
-    },
+    // This is to help target custom anchor elements
+    // passed as children to the Heading component.
+    a: baseLinkStyles,
   },
   // Available variants:
   // h1, h2, h3, h4, h5, h6,

package/src/theme/components/helperErrorText.ts

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

package/src/theme/components/icon.ts

@@ -6,8 +6,8 @@ const svgBase = {
 };
 const align = {
   none: {},
-  left: { marginRight: "xs" },
-  right: { marginLeft: "xs" },
+  left: { marginRight: "xxs" },
+  right: { marginLeft: "xxs" },
 };
 const iconRotation = {
   rotate180: {

package/src/theme/components/image.ts

@@ -12,6 +12,14 @@ const imageSizes = {
   default: {
     maxWidth: "100%",
   },
+  xxsmall: {
+    ...sideMarginsAuto,
+    maxWidth: "64px",
+  },
+  xsmall: {
+    ...sideMarginsAuto,
+    maxWidth: "96px",
+  },
   small: {
     ...sideMarginsAuto,
     maxWidth: "165px",
@@ -88,7 +96,7 @@ const CustomImage = {
     },
     captionWrappers: {
       marginBottom: "xxs",
-      fontSize: "-1",
+      fontSize: "text.caption",
     },
   }),
 };

package/src/theme/components/link.ts

@@ -1,3 +1,11 @@
+export const baseLinkStyles = {
+  color: "ui.link.primary",
+  textDecoration: "underline",
+  _hover: {
+    color: "ui.link.secondary",
+  },
+};
+
 const variants = {
   link: {},
   disabled: {
@@ -14,6 +22,7 @@ const variants = {
       fill: "currentColor",
     },
     _hover: {
+      color: "ui.link.secondary",
       textDecoration: "underline",
     },
   },
@@ -28,7 +37,7 @@ const variants = {
     py: "xs",
     px: "xs",
     textDecoration: "none",
-    fontWeight: 500,
+    fontWeight: "button.default",
     bg: "ui.link.primary",
     _hover: {
       color: "ui.white",
@@ -39,10 +48,13 @@ const variants = {
 };
 const Link = {
   baseStyle: {
-    color: "ui.link.primary",
-    textDecoration: "underline",
-    _hover: {
-      color: "ui.link.secondary",
+    ...baseLinkStyles,
+    // This is needed for custom anchor elements or link components
+    // that are passed as children to the `Link` component.
+    a: {
+      _hover: {
+        color: "ui.link.secondary",
+      },
     },
   },
   variants,

package/src/theme/components/list.ts

@@ -52,14 +52,12 @@ const List = {
       dt: {
         borderTop: "1px solid",
         borderColor: "ui.gray.light-cool",
-        fontSize: "0",
-        fontWeight: "bold",
+        fontWeight: "label.default",
         paddingBottom: { base: "0", md: "s" },
         paddingTop: "s",
         paddingRight: { md: "m" },
       },
       dd: {
-        fontSize: "0",
         margin: "0",
         paddingBottom: "s",
         borderTop: { base: "none", md: "1px solid" },

package/src/theme/components/logo.ts

@@ -0,0 +1,54 @@
+const svgBase = {
+  display: "inline-block",
+  height: "auto",
+  width: "100%",
+};
+const size = {
+  default: {
+    maxWidth: "100%",
+  },
+  xxsmall: {
+    maxWidth: "64px",
+  },
+  xsmall: {
+    maxWidth: "96px",
+  },
+  small: {
+    maxWidth: "165px",
+  },
+  medium: {
+    maxWidth: "225px",
+  },
+  large: {
+    maxWidth: "360px",
+  },
+  xlarge: {
+    maxWidth: "360px",
+  },
+  xxlarge: {
+    height: "var(--nypl-space-xl)",
+    width: "var(--nypl-space-xl)",
+  },
+  xxxlarge: {
+    height: "var(--nypl-space-xxl)",
+    width: "var(--nypl-space-xxl)",
+  },
+};
+const Logo = {
+  baseStyle: (props) => {
+    const allStyles = {
+      ...svgBase,
+      ...size[props.size],
+    };
+    return {
+      ...allStyles,
+      // We still want to style any custom SVG element that was
+      // passed to the `Logo` component.
+      svg: {
+        ...allStyles,
+      },
+    };
+  },
+};
+
+export default Logo;

package/src/theme/components/notification.ts

@@ -12,7 +12,7 @@ const Notification = {
     return {
       bg,
       display: "flex",
-      fontSize: "-1",
+      fontSize: "-1", // slightly smaller than the default size
       padding: "var(--nypl-space-s) var(--nypl-space-l)",
       position: "relative",
       textAlign: centered ? "center" : null,
@@ -49,25 +49,26 @@ const Notification = {
 
 const NotificationContent = {
   parts: ["content"],
-  baseStyle: ({ alignText, notificationType }) => ({
+  baseStyle: ({ alignText, icon, notificationType }) => ({
     display: "flex",
     justifyContent: "center",
     content: {
-      width: "100%",
-      paddingLeft: alignText
-        ? "calc(var(--nypl-space-m) + var(--nypl-space-s))"
-        : null,
       color:
         notificationType === NotificationTypes.Warning
           ? "brand.primary"
           : "currentColor",
+      marginTop: icon ? "xxxs" : "0",
+      paddingLeft: alignText
+        ? "calc(var(--nypl-space-m) + var(--nypl-space-s))"
+        : null,
+      width: "100%",
     },
   }),
 };
 
 const NotificationHeading = {
   parts: ["heading"],
-  baseStyle: ({ centered, notificationType }) => {
+  baseStyle: ({ centered, icon, notificationType }) => {
     let color = "ui.black";
     if (notificationType === NotificationTypes.Announcement) {
       color = "section.research.secondary";
@@ -80,6 +81,7 @@ const NotificationHeading = {
       justifyContent: centered ? "center" : null,
       heading: {
         marginBottom: "0",
+        marginTop: icon ? "xxxs" : "0",
         color,
       },
     };

package/src/theme/components/searchBar.ts

@@ -1,19 +1,13 @@
 const SearchBar = {
-  parts: ["topRow"],
   baseStyle: {
-    topRow: {
-      display: "flex",
-      marginBottom: {
-        base: "xs",
-        md: "auto",
-      },
-      flexFlow: {
-        base: "column nowrap",
-        md: "row nowrap",
-      },
+    display: "flex",
+    marginBottom: {
+      base: "xs",
+      md: "auto",
     },
-    button: {
-      marginBottom: "auto",
+    flexFlow: {
+      base: "column nowrap",
+      md: "row nowrap",
     },
   },
 };

package/src/theme/components/select.ts

@@ -1,6 +1,7 @@
 import { activeFocus, helperTextMargin } from "./global";
 
 const select = {
+  backgroundColor: "ui.white",
   borderRadius: "sm",
   borderColor: "ui.gray.medium",
   paddingTop: "xs",

package/src/theme/components/statusBadge.ts

@@ -3,7 +3,7 @@ const StatusBadge = {
     borderRadius: "base",
     color: "ui.black",
     display: "block",
-    fontSize: "-1",
+    fontSize: "-1", // slightly smaller than the default size
     fontStyle: "italic",
     py: "xxs",
     px: "xs",

package/src/theme/components/structuredContent.ts

@@ -0,0 +1,54 @@
+const StructuredContent = {
+  parts: ["image", "imageFigure", "imageWrapper"],
+  baseStyle: ({ hasFigureImage, imageAspectRatio, imagePosition }) => {
+    const styles: { maxWidth?: string } = {};
+    const wrapperStyles = {
+      float: imagePosition !== "center" ? imagePosition : undefined,
+      marginLeft:
+        imagePosition === "center"
+          ? null
+          : imagePosition === "left"
+          ? "0"
+          : "m",
+      marginRight:
+        imagePosition === "center"
+          ? null
+          : imagePosition === "left"
+          ? "m"
+          : "0",
+      width: imagePosition !== "center" ? "100%" : undefined,
+      ...styles,
+    };
+    if (imagePosition === "center") {
+      styles.maxWidth = "100%";
+    }
+    return {
+      imageFigure: {
+        ...wrapperStyles,
+        marginBottom: "m",
+      },
+      imageWrapper: {
+        ...wrapperStyles,
+        marginBottom: !hasFigureImage ? "m" : null,
+      },
+      image: {
+        // To handle the case when the image does not have a container,
+        // e.g. when there is no image caption or credit.
+        float: imagePosition !== "center" ? imagePosition : undefined,
+        marginLeft:
+          imagePosition === "right" && imageAspectRatio === "original"
+            ? "m"
+            : undefined,
+        marginRight:
+          imagePosition === "left" && imageAspectRatio === "original"
+            ? "m"
+            : undefined,
+        marginBottom:
+          !hasFigureImage || imageAspectRatio === "original" ? "m" : null,
+        ...styles,
+      },
+    };
+  },
+};
+
+export default StructuredContent;

package/src/theme/components/template.ts

@@ -13,8 +13,8 @@ const wrapperStyles = {
   maxWidth: "1280px",
   paddingTop: 0,
   paddingBottom: 0,
-  paddingRight: 0,
-  paddingLeft: 0,
+  paddingRight: "s",
+  paddingLeft: "s",
   width: "100%",
 };
 
@@ -34,21 +34,21 @@ const Template = {
 };
 const TemplateHeader = {
   baseStyle: {
-    marginBottom: 8, // --nypl-space-l
+    marginBottom: "l", // --nypl-space-l
   },
 };
 const TemplateBreakout = {
   baseStyle: {
     ...breakout,
     width: "100vw",
-    marginBottom: 8, // --nypl-space-l
+    marginBottom: "l", // --nypl-space-l
   },
 };
 const TemplateContent = {
   baseStyle: {
     ...wrapperStyles,
     display: "block",
-    marginBottom: 8, // --nypl-space-l
+    marginBottom: "l", // --nypl-space-l
   },
   variants: {
     sidebar: {
@@ -63,13 +63,13 @@ const TemplateContent = {
 const TemplateContentTop = {
   baseStyle: {
     flex: "1 0 100%",
-    marginBottom: 8, // --nypl-space-l
+    marginBottom: "l", // --nypl-space-l
   },
 };
 const TemplateContentPrimary = {
   baseStyle: {
     flex: "1 1",
-    marginBottom: 8, // --nypl-space-l
+    marginBottom: "l", // --nypl-space-l
   },
   variants: {
     left: {
@@ -85,19 +85,19 @@ const TemplateContentSidebar = {
   baseStyle: {
     flex: "0 0 255px",
     order: { md: "1" },
-    marginBottom: 8, // --nypl-space-l
+    marginBottom: "l", // --nypl-space-l
   },
   variants: {
     left: {
       marginRight: {
         base: 0,
-        md: 12, // --nypl-space-xl
+        md: "xl", // --nypl-space-xl
       },
     },
     right: {
       marginLeft: {
         base: 0,
-        md: 12, // --nypl-space-xl
+        md: "xl", // --nypl-space-xl
       },
     },
   },

package/src/theme/components/text.ts

@@ -1,21 +1,21 @@
 const variants = {
   default: {},
   caption: {
-    fontSize: "-1",
+    fontSize: "text.caption",
   },
   tag: {
-    fontSize: "-2",
+    fontSize: "text.tag",
   },
   mini: {
-    fontSize: "-3",
+    fontSize: "text.mini",
   },
 };
 const Text = {
   baseStyle: (props) => {
     const fontWeight = props.isBold
-      ? "bold"
-      : props.variant === "tag" || props.variant === "min"
-      ? "regular"
+      ? props.variant === "tag" || props.variant === "mini"
+        ? "medium"
+        : "bold"
       : null;
     const fontStyle = props.isItalic ? "italic" : null;
 

package/src/theme/components/textInput.ts

@@ -1,6 +1,7 @@
 import { activeFocus, helperTextMargin } from "./global";
 
 const input = {
+  bgColor: "ui.white",
   border: "1px solid",
   borderColor: "ui.gray.medium",
   borderRadius: "sm",