@nypl/design-system-react-components 0.25.5 → 0.25.9

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

package/src/theme/components/toggle.ts

@@ -0,0 +1,69 @@
+import { helperTextMargin } from "./global";
+
+const baseStyle = {
+  label: { display: "flex", alignItems: "center", width: "fit-content" },
+  helper: {
+    ...helperTextMargin,
+    marginLeft: "xs",
+  },
+};
+
+const Switch = {
+  baseStyle: {
+    opacity: 0.4,
+    track: {
+      border: "1px solid",
+      borderColor: "ui.gray.medium",
+      p: "4px",
+      _checked: {
+        bg: "ui.link.primary",
+        borderColor: "ui.link.primary",
+        opacity: 1,
+      },
+      _invalid: {
+        bg: "inherit",
+        borderColor: "ui.error.primary",
+        "> span": {
+          bg: "ui.error.primary",
+        },
+      },
+      _disabled: {
+        bg: "ui.gray.medium",
+        borderColor: "ui.gray.medium",
+        _checked: {
+          opacity: 0.4,
+        },
+      },
+      _focus: {
+        outline: "2px solid",
+        outlineColor: "ui.focus",
+        outlineOffset: "2px",
+        zIndex: "9999",
+      },
+    },
+    label: {
+      fontSize: "label.default",
+      marginLeft: "xs",
+      _disabled: { fontStyle: "italic" },
+    },
+    thumb: {
+      _disabled: {
+        bg: "ui.error.primary",
+      },
+    },
+  },
+  defaultProps: {
+    colorScheme: "white",
+  },
+};
+
+const Toggle = {
+  parts: ["helper"],
+  baseStyle,
+  // Default values
+  defaultProps: {
+    size: "lg",
+  },
+};
+
+export default { Toggle, Switch };

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

package/src/theme/foundations/spacing.ts

@@ -22,6 +22,7 @@
  *
  * Chakra Number Value | Chakra Name value | DS Variable
  * ------------------- | ----------------- | -----------------
+ *        0.5            |         xxxs       |   --nypl-space-xxxs
  *        1            |         xxs       |   --nypl-space-xxs
  *        2            |         xs        |   --nypl-space-xs
  *        4            |         s         |   --nypl-space-s
@@ -34,6 +35,8 @@
 export const spacing = {
   px: "1px",
   0: "0",
+  // --nypl-space-xxxs = 2px
+  xxxs: "0.125rem",
   0.5: "0.125rem",
   // --nypl-space-xxs = 4px
   xxs: "0.25rem",