@nypl/design-system-react-components 0.23.4 → 0.25.1

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: 0,
+  paddingLeft: 0,
+  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: 8, // --space-l
+  },
+};
+const TemplateBreakout = {
+  baseStyle: {
+    ...breakout,
+    width: "100vw",
+    marginBottom: 8, // --space-l
+  },
+};
+const TemplateContent = {
+  baseStyle: {
+    ...wrapperStyles,
+    display: "block",
+    marginBottom: 8, // --space-l
+  },
+  variants: {
+    sidebar: {
+      display: "flex",
+      flexFlow: {
+        base: "column nowrap",
+        md: "row wrap",
+      },
+    },
+  },
+};
+const TemplateContentTop = {
+  baseStyle: {
+    flex: "1 0 100%",
+    marginBottom: 8, // --space-l
+  },
+};
+const TemplateContentPrimary = {
+  baseStyle: {
+    flex: "1 1",
+    marginBottom: 8, // --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: "1" },
+    marginBottom: 8, // --space-l
+  },
+  variants: {
+    left: {
+      marginRight: {
+        base: 0,
+        md: 12, // --space-xl
+      },
+    },
+    right: {
+      marginLeft: {
+        base: 0,
+        md: 12, // --space-xl
+      },
+    },
+  },
+};
+
+export default {
+  Template,
+  TemplateHeader,
+  TemplateBreakout,
+  TemplateContent,
+  TemplateContentTop,
+  TemplateContentPrimary,
+  TemplateContentSidebar,
+};

package/src/theme/components/text.ts

@@ -0,0 +1,31 @@
+const variants = {
+  default: {},
+  caption: {
+    fontSize: "-1",
+  },
+  tag: {
+    fontSize: "-2",
+  },
+  mini: {
+    fontSize: "-3",
+  },
+};
+const Text = {
+  baseStyle: (props) => {
+    const fontWeight = props.isBold
+      ? "bold"
+      : props.variant === "tag" || props.variant === "min"
+      ? "regular"
+      : null;
+    const fontStyle = props.isItalic ? "italic" : null;
+
+    return {
+      fontStyle: fontStyle,
+      fontWeight: fontWeight,
+      marginBottom: props.noSpace ? "0 !important" : null,
+    };
+  },
+  variants,
+};
+
+export default Text;

package/src/theme/components/textInput.ts

@@ -0,0 +1,61 @@
+import { activeFocus, helperTextMargin } from "./global";
+
+const input = {
+  border: "1px solid",
+  borderColor: "ui.gray.medium",
+  borderRadius: "2px",
+  py: "xs",
+  px: "s",
+  _hover: {
+    borderColor: "ui.gray.dark",
+  },
+  _disabled: {
+    bgColor: "ui.gray.xx-light-cool",
+    color: "ui.gray.xdark",
+    opacity: "1",
+  },
+  _active: activeFocus,
+  _focus: activeFocus,
+  _placeholder: {
+    color: "ui.gray.dark",
+    fontStyle: "italic",
+    lineHeight: "21px",
+  },
+  _invalid: {
+    border: "1px solid",
+    borderColor: "ui.error.primary",
+    boxShadow: "none",
+  },
+};
+
+const TextInput = {
+  parts: ["helper", "input", "textarea"],
+  baseStyle: {
+    marginBottom: "xs",
+    helper: {
+      ...helperTextMargin,
+    },
+    input,
+    textarea: {
+      ...input,
+      lineheight: "1.5",
+      minHeight: "xxl",
+    },
+  },
+  variants: {
+    searchBar: {
+      flex: "1 1 80%",
+      input: {
+        borderRightRadius: "0",
+      },
+    },
+    searchBarSelect: {
+      flex: "1 1 80%",
+      input: {
+        borderRadius: "0",
+      },
+    },
+  },
+};
+
+export default TextInput;

package/src/theme/foundations/breakpoints.ts

@@ -0,0 +1,24 @@
+import { createBreakpoints } from "@chakra-ui/theme-tools";
+
+/**
+ * Breakpoints from "src/styles/base/_02-breakpoints.scss"
+ * How to use Chakra responsive styles: https://chakra-ui.com/docs/features/responsive-styles
+ *
+ * Chakra Value |     DS Variable      | EM/PX value
+ * --------------------------------------------------
+ *      sm      | --breakpoint-small   | 20em/320px
+ *      md      | --breakpoint-medium  | 38em/600px
+ *      lg      | --breakpoint-large   | 60em/960px
+ *      xl      | --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",
+});

package/src/theme/foundations/colors.ts

@@ -0,0 +1,208 @@
+import { Colors } from "@chakra-ui/react";
+
+/**
+ * Colors taken from "../../styles/01-colors/*.scss"
+ *
+ * All UI colors can be found in Storybook:
+ *   https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/documentation-style-guide-colors--colors-utility
+ * and in Figma:
+ *   https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=14989%3A37
+ *
+ * All Brand colors can be found in Storybook:
+ *   https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/documentation-style-guide-colors--colors-brand
+ * and in Figma:
+ *   https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=15454%3A47007
+ *
+ * At the end of this file, there are objects that extend Chakra's default
+ * color shade palette for individual colors. WE DO NOT RECOMMEND to use them
+ * and only recommend to use the colors defined by the Design System such as the
+ * following "ui", "brand", and "section" colors below.
+ */
+
+// Reusable variables:
+const grayLightCool = "#E0E0E0";
+const grayxxLightCool = "#FAFAFA";
+const grayMedium = "#BDBDBD";
+const brandPrimary = "#C60917";
+const brandSecondary = "#760000";
+const brandObj = {
+  primary: brandPrimary,
+  secondary: brandSecondary,
+};
+
+const colors: Colors = {
+  transparent: "transparent",
+
+  // ui fills
+  ui: {
+    black: "#000",
+    white: "#fff",
+    /// State and link utilities
+    disabled: {
+      primary: grayLightCool,
+      secondary: grayxxLightCool,
+    },
+    error: {
+      primary: "#97272C",
+      secondary: "#6F0106",
+    },
+    focus: "#4181F1",
+    link: {
+      primary: "#0576D3",
+      secondary: "#004B98",
+    },
+    status: {
+      primary: "#F9E08E",
+      secondary: "#FBE7E1",
+    },
+    success: {
+      primary: "#077719",
+      secondary: "#095212",
+    },
+    test: "#FF6347",
+    warning: {
+      primary: "#F0974E",
+      secondary: "#EC7B1F",
+    },
+    // Grayscale
+    gray: {
+      xdark: "#424242",
+      dark: "#616161",
+      medium: grayMedium,
+      "light-cool": grayLightCool,
+      "light-warm": "#EFEDEB",
+      "x-light-cool": "#F5F5F5",
+      "x-light-warm": "#F8F8F7",
+      "xx-light-cool": grayxxLightCool,
+    },
+  },
+
+  /** Brand fills are the NYPL primary and secondary colors. */
+  brand: brandObj,
+
+  /** Brand fills for sections on NYPL pages. */
+  section: {
+    /** What's On is used for Exhibitions & Events. */
+    "whats-on": {
+      primary: "#242424",
+      secondary: "#000000",
+    },
+
+    /** Books and More is used for the Catalog, Staff Picks, Recommendations,
+     * New Arrivals, and E-Book Central. */
+    "books-and-more": brandObj,
+
+    /** Research is used for the Research Catalog and SCC. */
+    research: {
+      primary: "#00838a",
+      secondary: "#006166",
+    },
+
+    /** Locations is used for Location Finder and all branch pages with
+     * the exceptions of some research libraries. */
+    locations: brandObj,
+
+    /** Blogs is used for the Blogs section. */
+    blogs: {
+      primary: grayLightCool,
+      secondary: grayMedium,
+    },
+
+    /** Research libraries with specific brand colors to adhere to. */
+    "research-library": {
+      lpa: "#005d53",
+      schomburg: "#a03e31",
+      schwartzman: brandSecondary,
+    },
+  },
+
+  /**
+   * The following color scales are useful for color edge cases where a
+   * distinct named ui or brand color doesn't quite work. These are used by
+   * Chakra and have been generated through https://themera.vercel.app/.
+   * While these colors are available, WE DO NOT RECOMMEND using them. Stick
+   * with the utility colors declared above.
+   * @Note If you do need to use a color variant, please contant the DS team.
+   */
+
+  /** based on ui.gray.medium = #DBDBDB */
+  gray: {
+    50: "#F2F2F2",
+    100: "#DBDBDB",
+    200: "#C4C4C4",
+    300: "#ADADAD",
+    400: "#969696",
+    500: "#808080",
+    600: "#666666",
+    700: "#4D4D4D",
+    800: "#333333",
+    900: "#1A1A1A",
+  },
+  /** based on ui.brand.primary = #C60917 */
+  red: {
+    50: "#FEE7E8",
+    100: "#FCBBC0",
+    200: "#FA8F97",
+    300: "#F8636E",
+    400: "#F63745",
+    500: "#F40B1C",
+    600: "#C30917",
+    700: "#920711",
+    800: "#62040B",
+    900: "#310206",
+  },
+  /** based on ui.warning.secondary = #F0974E */
+  orange: {
+    50: "#FDF1E7",
+    100: "#F9D8BD",
+    200: "#F6BF93",
+    300: "#F2A769",
+    400: "#EF8E3E",
+    500: "#EB7514",
+    600: "#BC5E10",
+    700: "#8D460C",
+    800: "#5E2F08",
+    900: "#2F1704",
+  },
+  /** based on ui.status.primary = #F9E08E */
+  yellow: {
+    50: "#FEF8E7",
+    100: "#FBECBB",
+    200: "#F9E090",
+    300: "#F7D464",
+    400: "#F4C938",
+    500: "#F2BD0D",
+    600: "#C2970A",
+    700: "#917108",
+    800: "#614B05",
+    900: "#302603",
+  },
+  /** based on ui.success.primary = #077719 */
+  green: {
+    50: "#E7FEEB",
+    100: "#BCFBC6",
+    200: "#90F8A1",
+    300: "#65F67C",
+    400: "#3AF357",
+    500: "#0EF133",
+    600: "#0BC128",
+    700: "#08911E",
+    800: "#066014",
+    900: "#03300A",
+  },
+  /** based on ui.link.primary = #0576D3 */
+  blue: {
+    50: "#E6F3FE",
+    100: "#B9DFFD",
+    200: "#8CCAFC",
+    300: "#60B5FB",
+    400: "#33A0FA",
+    500: "#068BF9",
+    600: "#056FC7",
+    700: "#045495",
+    800: "#023864",
+    900: "#011C32",
+  },
+};
+
+export default colors;

package/src/theme/foundations/global.ts

@@ -0,0 +1,26 @@
+/**
+ * These rules affect all the global elements on the `body` element of the
+ * page when the `DSProvider` component is used. This means that even if the
+ * `nypl-ds` CSS class name is not used in a consuming application, these
+ * rules will still take effect.
+ */
+const global = {
+  // styles for the `body` element
+  body: {
+    bg: "ui.white",
+    color: "ui.black",
+    fontFamily: "body",
+    fontSize: 0,
+    fontWeight: "300",
+    lineHeight: "1.5",
+  },
+  // styles for the `a` element
+  a: {
+    color: "ui.link.primary",
+  },
+  svg: {
+    display: "inline",
+  },
+};
+
+export default global;

package/src/theme/foundations/shadows.ts

@@ -0,0 +1,5 @@
+const shadows = {
+  outline: "none",
+};
+
+export default shadows;

package/src/theme/foundations/spacing.ts

@@ -0,0 +1,85 @@
+/**
+ * This is based on:
+ *   root size of 16px or 1rem
+ *   1 spacing unit is 4px or 0.25rem
+ *
+ * Chakra's mental model: If you need a spacing of 40px, divide it by 4.
+ * That'll give you 10. Then use it in your component.
+ *
+ * The DS uses eight CSS variables/values found in "src/styles/03-space/_space.css":
+ *   --space-xxs = 4px or 0.25rem
+ *   --space-xs = 8px or 0.5rem
+ *   --space-s = 16px or 1rem
+ *   --space-m = 24px or 1.5rem
+ *   --space-l = 32px or 2rem
+ *   --space-xl = 48px or 3rem
+ *   --space-xxl = 64px or 4rem
+ *   --space-xxxl = 96px or 6rem
+ *
+ * @note Even though all the following values are available through Chakra,
+ * we recommend to only use the spacing values that map to the DS values
+ * declared above.
+ *
+ * Chakra Number Value | Chakra Name value | DS Variable
+ * ------------------- | ----------------- | -----------------
+ *        1            |         xxs       |   --space-xxs
+ *        2            |         xs        |   --space-xs
+ *        4            |         s         |   --space-s
+ *        6            |         m         |   --space-m
+ *        8            |         l         |   --space-l
+ *        12           |         xl        |   --space-xl
+ *        16           |         xxl       |   --space-xxl
+ *        24           |         xxxl      |   --space-xxxl
+ */
+export const spacing = {
+  px: "1px",
+  0: "0",
+  0.5: "0.125rem",
+  // --space-xxs = 4px
+  xxs: "0.25rem",
+  1: "0.25rem",
+  1.5: "0.375rem",
+  // --space-xs = 8px
+  xs: "0.5rem",
+  2: "0.5rem",
+  2.5: "0.625rem",
+  3: "0.75rem",
+  3.5: "0.875rem",
+  // --space-s = 16px
+  s: "1rem",
+  4: "1rem",
+  5: "1.25rem",
+  // --space-m = 24px
+  m: "1.5rem",
+  6: "1.5rem",
+  7: "1.75rem",
+  // --space-l = 32px
+  l: "2rem",
+  8: "2rem",
+  9: "2.25rem",
+  10: "2.5rem",
+  // --space-xl = 48px
+  xl: "3rem",
+  12: "3rem",
+  14: "3.5rem",
+  // --space-xxl = 64px
+  xxl: "4rem",
+  16: "4rem",
+  20: "5rem",
+  // --space-xxxl = 96px
+  xxxl: "6rem",
+  24: "6rem",
+  28: "7rem",
+  32: "8rem",
+  36: "9rem",
+  40: "10rem",
+  44: "11rem",
+  48: "12rem",
+  52: "13rem",
+  56: "14rem",
+  60: "15rem",
+  64: "16rem",
+  72: "18rem",
+  80: "20rem",
+  96: "24rem",
+};

package/src/theme/foundations/typography.ts

@@ -0,0 +1,35 @@
+import { Dict } from "../types";
+
+type Typography = {
+  fonts: Dict;
+  fontSizes: Dict;
+  fontWeights: Dict;
+};
+
+const typography: Typography = {
+  // Values from "src/styles/02-typography/_typeface.css"
+  fonts: {
+    body: "-apple-system, BlinkMacSystemFont, system-ui, sans-serif",
+    heading: "-apple-system, BlinkMacSystemFont, system-ui, sans-seri",
+  },
+  // 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",
+  },
+  // Values from "src/styles/02-typography/_type-weight.css"
+  fontWeights: {
+    light: 300,
+    regular: 400,
+    medium: 500,
+    bold: 700,
+  },
+};
+
+export default typography;

package/src/theme/index.ts

@@ -0,0 +1,88 @@
+import { extendTheme } from "@chakra-ui/react";
+/** Global theme styles */
+import global from "./foundations/global";
+import breakpoints from "./foundations/breakpoints";
+import colors from "./foundations/colors";
+import shadows from "./foundations/shadows";
+import { spacing } from "./foundations/spacing";
+import typography from "./foundations/typography";
+/** Component styles */
+import Accordion from "./components/accordion";
+import Breadcrumb from "./components/breadcrumb";
+import Button from "./components/button";
+import Checkbox from "./components/checkbox";
+import CustomCheckboxGroup from "./components/customCheckboxGroup";
+import CustomRadioGroup from "./components/customRadioGroup";
+import CustomSelect from "./components/select";
+import Heading from "./components/heading";
+import Hero from "./components/hero";
+import Icon from "./components/icon";
+import Label from "./components/label";
+import Link from "./components/link";
+import Radio from "./components/radio";
+import SearchBar from "./components/searchBar";
+import StatusBadge from "./components/statusBadge";
+import Tabs from "./components/tabs";
+import TemplateStyles from "./components/template";
+import Text from "./components/text";
+import TextInput from "./components/textInput";
+
+/**
+ * See Chakra default theme for shape of theme object:
+ * https://github.com/chakra-ui/chakra-ui/tree/main/packages/theme
+ *
+ * The following are using the default configuration from Chakra:
+ *   - z-indices
+ *   - radii
+ *   - blur
+ *   - shadows
+ *   - borders
+ *   - transitions
+ *
+ * Theme extensions exist for:
+ *   - breakpoints
+ *   - colors
+ *   - typography (font, font size, font weight)
+ *   - spacing
+ */
+const theme = extendTheme({
+  styles: { global },
+  breakpoints,
+  colors,
+  shadows,
+  space: spacing,
+  ...typography,
+  /**
+   * Chakra documentation on component styles:
+   * https://chakra-ui.com/docs/theming/component-style
+   */
+  components: {
+    Accordion,
+    Breadcrumb,
+    Button,
+    Checkbox,
+    CustomCheckboxGroup,
+    CustomRadioGroup,
+    CustomSelect,
+    Heading,
+    Hero,
+    Icon,
+    Label,
+    Link,
+    Radio,
+    SearchBar,
+    StatusBadge,
+    Tabs,
+    ...TemplateStyles,
+    Text,
+    TextInput,
+  },
+  // Chakra prefixes its own CSS variables with `--chakra` by default but this
+  // can be updated to be anything we want. This can be "nypl" to have the
+  // `--nypl` prefix or even "" to have no prefix.
+  // config: {
+  //   cssVarPrefix: "nypl",
+  // },
+});
+
+export default theme;

package/src/theme/provider.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { ChakraProvider } from "@chakra-ui/react";
+import theme from "./index";
+
+const DSProvider = ({ children }) => (
+  <ChakraProvider theme={theme}>{children}</ChakraProvider>
+);
+
+export default DSProvider;

package/src/theme/types.ts

@@ -0,0 +1 @@
+export type Dict<T = any> = Record<string, T>;