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

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/image.ts

@@ -96,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

@@ -8,10 +8,10 @@ const List = {
     padding: noStyling ? "0" : null,
     display: inline ? "flex" : null,
     li: {
-      marginRight: inline ? "xs" : null,
+      marginRight: inline ? "m" : null,
       listStyleType: inline ? "none" : null,
       _notFirst: {
-        marginTop: "xxs",
+        marginTop: inline ? null : "xxs",
       },
     },
   }),
@@ -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

@@ -2,31 +2,34 @@ import { NotificationTypes } from "../../components/Notification/NotificationTyp
 
 const Notification = {
   parts: ["container", "dismissibleButton", "icon"],
-  baseStyle: ({ centered, noMargin, notificationType }) => {
+  baseStyle: ({ centered, dismissible, noMargin, notificationType }) => {
     let bg = "ui.status.primary";
-    if (notificationType === NotificationTypes.Announcement) {
-      bg = "ui.gray.light-cool";
-    } else if (notificationType === NotificationTypes.Warning) {
-      bg = "ui.gray.xx-light-cool";
+    if (
+      notificationType === NotificationTypes.Announcement ||
+      notificationType === NotificationTypes.Warning
+    ) {
+      bg = "ui.gray.x-light-cool";
     }
     return {
       bg,
       display: "flex",
-      fontSize: "-1",
-      padding: "var(--nypl-space-s) var(--nypl-space-l)",
+      fontSize: "-1", // slightly smaller than the default size
       position: "relative",
       textAlign: centered ? "center" : null,
       borderRadius: noMargin ? "0" : "4px",
       margin: noMargin ? "0" : "s",
       container: {
         margin: "auto",
+        maxWidth: "var(--nypl-breakpoint-xl)",
+        padding: "s",
+        paddingRight: dismissible ? "l" : null,
+        paddingLeft: centered && dismissible ? "l" : null,
         width: "100%",
-        maxWidth: "var(--nypl-breakpoint-large)",
       },
       dismissibleButton: {
         border: "none",
-        alignItems: "center",
         bgColor: "inherit",
+        alignItems: "center",
         color: "ui.black",
         display: "flex",
         height: "32px",
@@ -62,6 +65,13 @@ const NotificationContent = {
         ? "calc(var(--nypl-space-m) + var(--nypl-space-s))"
         : null,
       width: "100%",
+      // Links should always be black and underlined.
+      a: {
+        color: "ui.black",
+        _hover: {
+          color: "ui.black",
+        },
+      },
     },
   }),
 };

package/src/theme/components/searchBar.ts

@@ -1,19 +1,17 @@
 const SearchBar = {
-  parts: ["topRow"],
+  parts: ["select"],
   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",
+    },
+    select: {
+      marginBottom: "0",
     },
   },
 };

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,74 @@
+const StructuredContent = {
+  parts: ["image", "imageFigure", "imageWrapper"],
+  baseStyle: ({ hasFigureImage, imageAspectRatio, imagePosition }) => {
+    const styles: { maxWidth?: string } = {};
+    const wrapperStyles = {
+      float: [
+        "none",
+        "none",
+        imagePosition !== "center" ? imagePosition : undefined,
+      ],
+      marginLeft: [
+        "auto",
+        "auto",
+        imagePosition === "center"
+          ? null
+          : imagePosition === "left"
+          ? "0"
+          : "m",
+      ],
+      marginRight: [
+        "auto",
+        "auto",
+        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: [
+          "none",
+          "none",
+          imagePosition !== "center" ? imagePosition : undefined,
+        ],
+        marginLeft: [
+          "auto",
+          "auto",
+          imagePosition === "right" && imageAspectRatio === "original"
+            ? "m"
+            : undefined,
+        ],
+        marginRight: [
+          "auto",
+          "auto",
+          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,9 +1,11 @@
 import { activeFocus, helperTextMargin } from "./global";
 
 const input = {
+  bgColor: "ui.white",
   border: "1px solid",
   borderColor: "ui.gray.medium",
   borderRadius: "sm",
+  fontSize: "text.caption",
   py: "xs",
   px: "s",
   _hover: {

package/src/theme/components/toggle.ts

@@ -4,7 +4,7 @@ const baseStyle = {
   label: { display: "flex", alignItems: "center", width: "fit-content" },
   helper: {
     ...helperTextMargin,
-    marginLeft: "xs",
+    marginLeft: "xxs",
   },
 };
 
@@ -12,24 +12,24 @@ const Switch = {
   baseStyle: {
     opacity: 0.4,
     track: {
-      p: "4px",
       border: "1px solid",
       borderColor: "ui.gray.medium",
+      p: "4px",
       _checked: {
-        borderColor: "ui.link.primary",
         bg: "ui.link.primary",
+        borderColor: "ui.link.primary",
         opacity: 1,
       },
       _invalid: {
-        borderColor: "ui.error.primary",
         bg: "inherit",
+        borderColor: "ui.error.primary",
         "> span": {
           bg: "ui.error.primary",
         },
       },
       _disabled: {
-        borderColor: "ui.gray.medium",
         bg: "ui.gray.medium",
+        borderColor: "ui.gray.medium",
         _checked: {
           opacity: 0.4,
         },
@@ -41,7 +41,11 @@ const Switch = {
         zIndex: "9999",
       },
     },
-    label: { fontSize: -1, marginLeft: "xs" },
+    label: {
+      fontSize: "label.default",
+      marginLeft: "xs",
+      _disabled: { fontStyle: "italic" },
+    },
     thumb: {
       _disabled: {
         bg: "ui.error.primary",

package/src/theme/components/videoPlayer.ts

@@ -19,10 +19,8 @@ const invalid = {
 const VideoPlayer = {
   baseStyle: {
     inside: {
-      //   backgroundColor: isInvalid ? "ui.gray.light.warm" : null,
       height: "0",
       overflow: "hidden",
-      //   padding: isInvalid ? "s" : null,
       paddingBottom: "56.25%",
       position: "relative",
     },

package/src/theme/foundations/global.ts

@@ -11,8 +11,8 @@ const global = {
     bg: "ui.white",
     color: "ui.black",
     fontFamily: "body",
-    fontSize: "0",
-    fontWeight: "300",
+    fontSize: "text.default",
+    fontWeight: "text.default",
     lineHeight: "1.5",
     overflowX: "hidden",
   },