@nypl/design-system-react-components 1.0.0 → 1.0.3-beta

package/src/theme/components/structuredContent.ts

@@ -1,149 +0,0 @@
-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

@@ -1,109 +0,0 @@
-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

@@ -1,114 +0,0 @@
-// 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

@@ -1,38 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,109 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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",
-});