@nypl/design-system-react-components 1.0.1 → 1.0.2

package/src/theme/components/structuredContent.ts

@@ -0,0 +1,149 @@
+import { baseTDStyles, baseTHStyles } from "./customTable";
+import { textMargin } from "./global";
+import { headings } from "./heading";
+import { baseLinkStyles } from "./link";
+import {
+  baseDefinitionStyles,
+  baseListStyles,
+  baseSectionDefinitionStyles,
+  baseUnorderedStyles,
+} from "./list";
+
+interface StructuredContentBaseStyle {
+  hasFigureImage: boolean;
+  imageAspectRatio: string;
+  imagePosition: string;
+}
+
+const StructuredContent = {
+  parts: ["image", "imageFigure", "imageWrapper"],
+  baseStyle: ({
+    hasFigureImage,
+    imageAspectRatio,
+    imagePosition,
+  }: StructuredContentBaseStyle) => {
+    const styles: { maxWidth?: string } = {};
+    const wrapperStyles = {
+      float: [
+        "none",
+        "none",
+        imagePosition !== "center" ? imagePosition : undefined,
+      ],
+      marginLeft: [
+        "auto",
+        "auto",
+        imagePosition === "center"
+          ? null
+          : imagePosition === "left"
+          ? "0"
+          : "l",
+      ],
+      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,
+      },
+      /** The following styles are meant to target HTML elements that are
+       * not rendered from the Reservoir DS. Typically, these HTML elements
+       * are added from an API response.
+       */
+      // This gives Chakra `Box` styles to divs inside the
+      // main `StructuredContent` content area.
+      ".structuredcontent-body > div": {
+        marginTop: "var(--nypl-space-l)",
+        marginInlineEnd: "var(--nypl-space-0)",
+        marginBottom: "var(--nypl-space-0)",
+        marginInlineStart: "var(--nypl-space-0)",
+      },
+      a: baseLinkStyles,
+      ul: {
+        ...baseListStyles(),
+        listStyle: "none",
+        ...baseUnorderedStyles(),
+      },
+      ol: {
+        ...baseListStyles(),
+        ...textMargin,
+      },
+      // For section, h2 in the definition list.
+      section: baseSectionDefinitionStyles,
+      dl: baseDefinitionStyles.dl,
+      dt: baseDefinitionStyles.dt,
+      dd: baseDefinitionStyles.dd,
+      table: {
+        width: "100%",
+        th: {
+          // These styles, except for `baseTHStyles`, are set from
+          // Chakra so they are copied explicitly.
+          textAlign: "start",
+          paddingInlineStart: "var(--nypl-space-6)",
+          paddingInlineEnd: "var(--nypl-space-6)",
+          paddingTop: "var(--nypl-space-3)",
+          paddingBottom: "var(--nypl-space-3)",
+          lineHeight: "var(--nypl-lineHeights-4)",
+          ...baseTHStyles(),
+        },
+        td: {
+          // These styles, except for `baseTDStyles`, are set from
+          // Chakra so they are copied explicitly.
+          textAlign: "start",
+          paddingInlineStart: "var(--nypl-space-6)",
+          paddingInlineEnd: "var(--nypl-space-6)",
+          paddingTop: "var(--nypl-space-4)",
+          paddingBottom: "var(--nypl-space-4)",
+          lineHeight: "var(--nypl-lineHeights-5)",
+          ...baseTDStyles(),
+        },
+      },
+      // h1, h2, h3, h4, h5, h6
+      ...headings,
+    };
+  },
+};
+
+export default StructuredContent;

package/src/theme/components/tabs.ts

@@ -0,0 +1,109 @@
+const tablist = {
+  borderColor: "ui.black",
+};
+const tab = {
+  color: "black !important",
+  paddingInlineStart: "s",
+  paddingLeft: "s",
+  background: "transparent",
+  border: "0",
+  borderBottom: "1px solid",
+  borderColor: "red",
+  height: { base: "44px" },
+  marginRight: {
+    base: "0",
+    md: "1px",
+  },
+  paddingRight: {
+    base: "s",
+    md: "l",
+    lg: "xl",
+  },
+  whiteSpace: "nowrap",
+  _hover: {
+    bg: "ui.gray.x-light-cool",
+    borderTopRadius: "sm",
+    borderBottom: "1px solid",
+    borderBottomColor: "ui.black",
+  },
+  _selected: {
+    fontWeight: "bold",
+    bg: "ui.gray.light-cool",
+    border: "0",
+    borderTopRadius: "sm",
+    borderBottom: "3px solid",
+    borderBottomColor: "ui.black",
+    paddingBottom: "5px",
+  },
+  _focus: {
+    boxShadow: "0",
+  },
+};
+// Only display the previous/next arrow buttons on mobile.
+const buttonArrows = {
+  border: "0",
+  borderRadius: "0",
+  display: {
+    // After 38em/600px, don't display the arrow button anymore.
+    md: "none",
+  },
+  height: "44px",
+  width: "44px !important",
+  top: "8px",
+  marginLeft: "4px",
+  marginRight: "4px",
+  // Code from https://codesandbox.io/s/fxjeo for the mobile carousel
+  pos: "absolute",
+  transition: "0.6s ease",
+  zIndex: "9999",
+};
+const tablistWrapper = {
+  display: "flex",
+  alignItems: "center",
+  borderBottom: {
+    base: "0",
+    md: "1px solid black",
+  },
+  height: { base: "58px", md: "auto" },
+  margin: "0",
+  overflowX: { base: "auto", md: "visible" },
+  paddingBottom: { base: "5px", md: "0" },
+  paddingLeft: { base: "4px", md: "0" },
+  paddingRight: { base: "4px", md: "0" },
+  paddingTop: { base: "4px", md: "0" },
+  position: "relative",
+};
+const tabpanels = {
+  paddingTop: "2px",
+};
+
+const carouselParent = {
+  position: { base: "absolute", md: "relative" },
+  left: { base: "50px", md: "auto" },
+  paddingBottom: { base: "5px", md: "0" },
+  paddingLeft: { base: "4px", md: "0" },
+  paddingRight: "0",
+  paddingTop: { base: "4px", md: "0" },
+  right: { base: "52px", md: "auto" },
+  top: { base: "4px", md: "0" },
+  overflowX: { base: "hidden", md: "visible" },
+};
+
+const CustomTabs = {
+  // tablist, tab, and tabpanels are existing keys which are extended but
+  // buttonArrows, tablistWrapper, and carouselParent are custom elements
+  // in the `Tabs` component.
+  parts: ["buttonArrows", "tablistWrapper", "carouselParent"],
+  baseStyle: {
+    tablist,
+    tab,
+    // Only display the previous/next arrow buttons on mobile.
+    buttonArrows,
+    // To better align the mobile arrow buttons with the tablist.
+    tablistWrapper,
+    tabpanels,
+    carouselParent,
+  },
+};
+
+export default CustomTabs;

package/src/theme/components/template.ts

@@ -0,0 +1,114 @@
+// From @mixin breakout:
+// Used for elements that should be edge-to-edge.
+const breakout = {
+  marginLeft: "calc(-50vw + 50%)",
+  marginRight: "calc(-50vw + 50%)",
+};
+// From the `wrapper` SCSS mixin.
+// TODO: Eventually we may be able to put shared JS style objects
+// into a utils file for other mixins that are shared.
+const wrapperStyles = {
+  marginY: 0,
+  marginX: "auto",
+  maxWidth: "1280px",
+  paddingTop: 0,
+  paddingBottom: 0,
+  paddingRight: "s",
+  paddingLeft: "s",
+  width: "100%",
+};
+
+const Template = {
+  baseStyle: {
+    boxSizing: "border-box",
+    color: "ui.black",
+    // Users with non-overlay scrollbars have a small horizontal scrollbar from
+    // our breakout mixin. Fix identified here: https://cloudfour.com/thinks/breaking-out-with-viewport-units-and-calc/#one-big-dumb-caveat
+    overflowX: "hidden",
+    "*": { boxSizing: "inherit" },
+    "*::after": { boxSizing: "inherit" },
+    "*::before": { boxSizing: "inherit" },
+  },
+  sizes: {},
+  defaultProps: {},
+};
+const TemplateHeader = {
+  baseStyle: {
+    marginBottom: "page.hstack", // --nypl-space-l
+  },
+};
+const TemplateBreakout = {
+  baseStyle: {
+    ...breakout,
+    width: "100vw",
+    marginBottom: "page.hstack", // --nypl-space-l
+  },
+};
+const TemplateContent = {
+  baseStyle: {
+    ...wrapperStyles,
+    display: "block",
+    marginBottom: "page.hstack", // --nypl-space-l
+  },
+  variants: {
+    sidebar: {
+      display: "flex",
+      flexFlow: {
+        base: "column nowrap",
+        md: "row wrap",
+      },
+    },
+  },
+};
+const TemplateContentTop = {
+  baseStyle: {
+    flex: "1 0 100%",
+    marginBottom: "page.hstack", // --nypl-space-l
+  },
+};
+const TemplateContentPrimary = {
+  baseStyle: {
+    flex: "1 1",
+    marginBottom: "page.hstack", // --nypl-space-l
+  },
+  variants: {
+    left: {
+      display: "flex",
+      flexFlow: "column nowrap",
+      order: "1",
+      marginRight: { md: 0 },
+      minWidth: { md: 0 },
+    },
+  },
+};
+const TemplateContentSidebar = {
+  baseStyle: {
+    flex: "0 0 255px",
+    order: { md: "page.vstack" },
+    marginBottom: "page.hstack", // --nypl-space-l
+  },
+  variants: {
+    left: {
+      marginRight: {
+        base: 0,
+        md: "page.vstack", // --nypl-space-xl
+      },
+    },
+    right: {
+      marginLeft: {
+        base: 0,
+        md: "page.vstack", // --nypl-space-xl
+      },
+    },
+  },
+};
+
+export default {
+  Template,
+  TemplateHeader,
+  TemplateBreakout,
+  TemplateContent,
+  TemplateContentTop,
+  TemplateContentPrimary,
+  TemplateContentSidebar,
+};

package/src/theme/components/text.ts

@@ -0,0 +1,38 @@
+interface TextBaseStyle {
+  isBold: boolean;
+  isItalic: boolean;
+  noSpace: boolean;
+  variant: string;
+}
+
+const variants = {
+  default: {},
+  caption: {
+    fontSize: "text.caption",
+  },
+  tag: {
+    fontSize: "text.tag",
+  },
+  mini: {
+    fontSize: "text.mini",
+  },
+};
+const Text = {
+  baseStyle: ({ isBold, isItalic, noSpace, variant }: TextBaseStyle) => {
+    const fontWeight = isBold
+      ? variant === "tag" || variant === "mini"
+        ? "medium"
+        : "bold"
+      : null;
+    const fontStyle = isItalic ? "italic" : null;
+
+    return {
+      fontStyle: fontStyle,
+      fontWeight: fontWeight,
+      marginBottom: noSpace ? "0 !important" : null,
+    };
+  },
+  variants,
+};
+
+export default Text;

package/src/theme/components/textInput.ts

@@ -0,0 +1,65 @@
+import {
+  selectTextInputDisabledStyles,
+  selectTextInputFocusStyles,
+} from "./global";
+
+const input = {
+  bgColor: "ui.white",
+  border: "1px solid",
+  borderColor: "ui.gray.medium",
+  borderRadius: "sm",
+  fontSize: "text.caption",
+  py: "inset.narrow",
+  px: "inset.default",
+  _hover: {
+    borderColor: "ui.gray.dark",
+  },
+  _disabled: {
+    ...selectTextInputDisabledStyles,
+    _placeholder: {
+      color: "ui.gray.medium",
+    },
+  },
+  _active: selectTextInputFocusStyles,
+  _focus: selectTextInputFocusStyles,
+  _placeholder: {
+    color: "ui.gray.dark",
+    fontStyle: "italic",
+    lineHeight: "21px",
+  },
+  _invalid: {
+    border: "1px solid",
+    borderColor: "ui.error.primary",
+    boxShadow: "none",
+  },
+};
+
+const TextInput = {
+  parts: ["input", "textarea"],
+  baseStyle: {
+    input,
+    textarea: {
+      ...input,
+      lineheight: "1.5",
+      minHeight: "xxl",
+    },
+  },
+  variants: {
+    searchBar: {
+      flex: "1 1 80%",
+      input: {
+        borderRightRadius: "none",
+      },
+    },
+    searchBarSelect: {
+      flex: "1 1 80%",
+      input: {
+        borderRadius: "none",
+        borderTopLeftRadius: { base: "sm", md: "none" },
+        borderTopRightRadius: { base: "sm", md: "none" },
+      },
+    },
+  },
+};
+
+export default TextInput;

package/src/theme/components/toggle.ts

@@ -0,0 +1,109 @@
+import { cssVar } from "@chakra-ui/theme-tools";
+
+import { ToggleSizes } from "../../components/Toggle/Toggle";
+
+interface ToggleBaseStyle {
+  isDisabled: boolean;
+  size: ToggleSizes;
+}
+
+const toggleBaseStyle = ({ isDisabled, size }: ToggleBaseStyle) => {
+  const label = { alignItems: "start", display: "flex", width: "fit-content" };
+  const helperErrorText = {
+    marginLeft: size === "default" ? "xxl" : "xl",
+    fontStyle: isDisabled ? "italic" : null,
+  };
+  return {
+    label,
+    helperErrorText,
+  };
+};
+const $width = cssVar("switch-track-width");
+const $height = cssVar("switch-track-height");
+
+const Switch = {
+  baseStyle: ({ size }: { size: string }) => {
+    return {
+      alignItems: "start",
+      opacity: 0.4,
+      track: {
+        border: "1px solid",
+        borderColor: "ui.gray.medium",
+        p: "1px",
+        _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",
+        marginTop: size === "lg" ? "xxxs" : null,
+        _disabled: {
+          color: "ui.gray.dark",
+          fontStyle: "italic",
+        },
+      },
+      thumb: {
+        _disabled: {
+          bg: "ui.error.primary",
+        },
+      },
+    };
+  },
+  sizes: {
+    sm: {
+      container: {
+        // Chakra defaults for `sm`:
+        // width: 1.375rem
+        // height: 0.75rem
+        [$width.variable]: "2.25rem",
+        [$height.variable]: "1rem",
+      },
+    },
+    lg: {
+      container: {
+        // Chakra defaults for `lg`:
+        // width: 2.875rem
+        // height: 1.5rem
+        [$width.variable]: "3.25rem",
+        [$height.variable]: "1.5rem",
+      },
+    },
+  },
+  defaultProps: {
+    colorScheme: "white",
+  },
+};
+
+const Toggle = {
+  parts: ["helperErrorText"],
+  baseStyle: toggleBaseStyle,
+  // Default values
+  defaultProps: {
+    size: "lg",
+  },
+};
+
+export default { Toggle, Switch };

package/src/theme/components/videoPlayer.ts

@@ -0,0 +1,47 @@
+const fourByThree = {
+  inside: {
+    paddingBottom: "75%",
+  },
+};
+
+const square = {
+  inside: {
+    paddingBottom: "100%",
+  },
+};
+
+const invalid = {
+  backgroundColor: "ui.gray.light-cool",
+  height: "auto",
+  padding: "s",
+};
+
+const VideoPlayer = {
+  baseStyle: {
+    inside: {
+      height: "0",
+      overflow: "hidden",
+      paddingBottom: "56.25%",
+      position: "relative",
+    },
+    iframe: {
+      height: "100%",
+      left: "0",
+      margin: "auto",
+      position: "absolute",
+      top: "0",
+      width: "100%",
+    },
+    helperText: {
+      marginBottom: "0",
+      marginTop: "xs",
+    },
+  },
+  variants: {
+    fourByThree,
+    invalid,
+    square,
+  },
+};
+
+export default VideoPlayer;

package/src/theme/foundations/breakpoints.ts

@@ -0,0 +1,24 @@
+import { createBreakpoints } from "@chakra-ui/theme-tools";
+
+/**
+ * Breakpoints from "src/styles/base/_01-breakpoints.scss"
+ * How to use Chakra responsive styles: https://chakra-ui.com/docs/features/responsive-styles
+ *
+ * Chakra Value |     DS Variable           | EM/PX value
+ * ------------------------------------------------------
+ *      sm      | --nypl-breakpoint-small   | 20em/320px
+ *      md      | --nypl-breakpoint-medium  | 38em/600px
+ *      lg      | --nypl-breakpoint-large   | 60em/960px
+ *      xl      | --nypl-breakpoint-xl      | 80em/1280px
+ *     2xl      |        N/A                | 96em/1536px
+ *
+ * @Note Chakra provides a 2xl option while the DS does not. We don't
+ * recommend using this value until further notice.
+ */
+export default createBreakpoints({
+  sm: "20em",
+  md: "38em",
+  lg: "60em",
+  xl: "80em",
+  "2xl": "96em",
+});