@nypl/design-system-react-components 0.25.8 → 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/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

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

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

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

package/src/theme/foundations/typography.ts

@@ -6,6 +6,24 @@ type Typography = {
   fontWeights: Dict;
 };
 
+const fontSizeValues = {
+  "-3": "0.625rem",
+  "-2": "0.75rem",
+  "-1": "0.875rem",
+  "0": "1rem",
+  "1": "1.125rem",
+  "2": "1.375rem",
+  "3": "1.75rem",
+  "4": "2.25rem",
+};
+
+const fontWeightValues = {
+  light: 300,
+  regular: 400,
+  medium: 500,
+  bold: 700,
+};
+
 const typography: Typography = {
   // Values from "src/styles/02-typography/_typeface.css"
   fonts: {
@@ -14,21 +32,75 @@ const typography: Typography = {
   },
   // Values from "src/styles/02-typography/_type-scale.css"
   fontSizes: {
-    "-3": "0.625rem",
-    "-2": "0.75rem",
-    "-1": "0.875rem",
-    "0": "1rem",
-    "1": "1.125rem",
-    "2": "1.375rem",
-    "3": "1.75rem",
-    "4": "2.25rem",
+    // generic tokens
+    "-3": fontSizeValues["-3"],
+    "-2": fontSizeValues["-2"],
+    "-1": fontSizeValues["-1"],
+    "0": fontSizeValues["0"],
+    "1": fontSizeValues["1"],
+    "2": fontSizeValues["2"],
+    "3": fontSizeValues["3"],
+    "4": fontSizeValues["4"],
+    // specific tokens
+    breadcrumbs: {
+      default: fontSizeValues["-1"],
+    },
+    button: {
+      default: fontSizeValues["-1"],
+    },
+    heading: {
+      primary: fontSizeValues["4"],
+      secondary: fontSizeValues["3"],
+      tertiary: fontSizeValues["2"],
+      callout: fontSizeValues["1"],
+    },
+    helper: {
+      default: fontSizeValues["-1"],
+    },
+    label: {
+      default: fontSizeValues["-1"],
+      secondary: fontSizeValues["-2"],
+    },
+    text: {
+      default: fontSizeValues["0"],
+      caption: fontSizeValues["-1"],
+      tag: fontSizeValues["-2"],
+      mini: fontSizeValues["-3"],
+    },
   },
   // Values from "src/styles/02-typography/_type-weight.css"
   fontWeights: {
-    light: 300,
-    regular: 400,
-    medium: 500,
-    bold: 700,
+    // generic tokens
+    light: fontWeightValues["light"],
+    regular: fontWeightValues["regular"],
+    medium: fontWeightValues["medium"],
+    bold: fontWeightValues["bold"],
+    // specific tokens
+    breadcrumbs: {
+      default: fontWeightValues["regular"],
+      lastChild: fontWeightValues["bold"],
+    },
+    button: {
+      default: fontWeightValues["regular"],
+    },
+    heading: {
+      primary: fontWeightValues["light"],
+      secondary: fontWeightValues["medium"],
+      tertiary: fontWeightValues["medium"],
+      callout: fontWeightValues["medium"],
+    },
+    helper: {
+      default: fontWeightValues["light"],
+    },
+    label: {
+      default: fontWeightValues["medium"],
+    },
+    text: {
+      default: fontWeightValues["light"],
+      caption: fontWeightValues["light"],
+      tag: fontWeightValues["regular"],
+      mini: fontWeightValues["regular"],
+    },
   },
 };
 

package/src/theme/index.ts

@@ -27,6 +27,7 @@ import Icon from "./components/icon";
 import Label from "./components/label";
 import Link from "./components/link";
 import List from "./components/list";
+import Logo from "./components/logo";
 import NotificationStyles from "./components/notification";
 import Pagination from "./components/pagination";
 import ProgressIndicator from "./components/progressIndicator";
@@ -36,7 +37,9 @@ import SearchBar from "./components/searchBar";
 import { Skeleton, SkeletonLoader } from "./components/skeletonLoader";
 import CustomSlider from "./components/slider";
 import StatusBadge from "./components/statusBadge";
+import StructuredContent from "./components/structuredContent";
 import Tabs from "./components/tabs";
+import CustomTable from "./components/customTable";
 import TemplateStyles from "./components/template";
 import Text from "./components/text";
 import TextInput from "./components/textInput";
@@ -94,6 +97,7 @@ const theme = extendTheme({
     Label,
     Link,
     List,
+    Logo,
     ...NotificationStyles,
     Pagination,
     ProgressIndicator,
@@ -104,7 +108,9 @@ const theme = extendTheme({
     SkeletonLoader,
     CustomSlider,
     StatusBadge,
+    StructuredContent,
     Tabs,
+    CustomTable,
     ...TemplateStyles,
     Text,
     TextInput,

package/src/utils/componentCategories.ts

@@ -58,7 +58,7 @@ const categories = {
   layout: {
     title: "Components/Page Layout",
     components: [
-      "BasicPageSection",
+      "StructuredContent",
       "ContentSwitcher",
       "Footer",
       "Grid",

package/src/utils/utils.ts

@@ -27,3 +27,20 @@ export const getVariant = (variant, collection, fallback = null) => {
   }
   return variantMap[variant] || fallback;
 };
+
+/**
+ * Given an enum object and its name, this will return (1) an array `options`
+ * of all values with the enum name as the prefix, and (2) a function that
+ * returns the correct enum value given a string from the `options` array.
+ * @NOTE this is only used for Storybook documentation.
+ */
+export const getStorybookEnumValues = (enumObject, name) => {
+  const options = Object.keys(enumObject).map((key) => `${name}.${key}`);
+  const getValue = (key) => {
+    // In case no value is passed, return the first value from the array above
+    // as the default. Otherwise, remove the dot from the string and get the
+    // last part to be able to get the correct enum value.
+    return !key ? options[0] : enumObject[key.substr(key.indexOf(".") + 1)];
+  };
+  return { options, getValue };
+};

package/dist/__tests__/utils/bem.test.d.ts

@@ -1 +0,0 @@
-export {};