@nypl/design-system-react-components 0.25.0 → 0.25.4

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, // --nypl-space-l
+  },
+};
+const TemplateBreakout = {
+  baseStyle: {
+    ...breakout,
+    width: "100vw",
+    marginBottom: 8, // --nypl-space-l
+  },
+};
+const TemplateContent = {
+  baseStyle: {
+    ...wrapperStyles,
+    display: "block",
+    marginBottom: 8, // --nypl-space-l
+  },
+  variants: {
+    sidebar: {
+      display: "flex",
+      flexFlow: {
+        base: "column nowrap",
+        md: "row wrap",
+      },
+    },
+  },
+};
+const TemplateContentTop = {
+  baseStyle: {
+    flex: "1 0 100%",
+    marginBottom: 8, // --nypl-space-l
+  },
+};
+const TemplateContentPrimary = {
+  baseStyle: {
+    flex: "1 1",
+    marginBottom: 8, // --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: "1" },
+    marginBottom: 8, // --nypl-space-l
+  },
+  variants: {
+    left: {
+      marginRight: {
+        base: 0,
+        md: 12, // --nypl-space-xl
+      },
+    },
+    right: {
+      marginLeft: {
+        base: 0,
+        md: 12, // --nypl-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,62 @@
+import { activeFocus, helperTextMargin } from "./global";
+
+const input = {
+  border: "1px solid",
+  borderColor: "ui.gray.medium",
+  borderRadius: "sm",
+  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: {
+    helper: {
+      ...helperTextMargin,
+    },
+    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/videoPlayer.ts

@@ -0,0 +1,49 @@
+const fourByThree = {
+  inside: {
+    paddingBottom: "75%",
+  },
+};
+
+const square = {
+  inside: {
+    paddingBottom: "100%",
+  },
+};
+
+const invalid = {
+  backgroundColor: "ui.gray.light-warm",
+  height: "auto",
+  padding: "s",
+};
+
+const VideoPlayer = {
+  baseStyle: {
+    inside: {
+      //   backgroundColor: isInvalid ? "ui.gray.light.warm" : null,
+      height: "0",
+      overflow: "hidden",
+      //   padding: isInvalid ? "s" : null,
+      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,16 +1,16 @@
 import { createBreakpoints } from "@chakra-ui/theme-tools";
 
 /**
- * Breakpoints from "src/styles/base/_02-breakpoints.scss"
+ * 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      | --breakpoint-small   | 20em/320px
- *      md      | --breakpoint-medium  | 38em/600px
- *      lg      | --breakpoint-large   | 60em/960px
- *      xl      | --breakpoint-xl      | 80em/1280px
- *     2xl      |        N/A           | 96em/1536px
+ * 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.

package/src/theme/foundations/colors.ts

@@ -2,10 +2,16 @@ 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/style-guide-colors--colors-utility
+ *   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/style-guide-colors--colors-brand
+ *   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
@@ -14,8 +20,9 @@ import { Colors } from "@chakra-ui/react";
  */
 
 // Reusable variables:
-const grayLight = "#E0E0E0";
-const grayxxlight = "#FAFAFA";
+const grayLightCool = "#E0E0E0";
+const grayxxLightCool = "#FAFAFA";
+const grayMedium = "#BDBDBD";
 const brandPrimary = "#C60917";
 const brandSecondary = "#760000";
 const brandObj = {
@@ -32,10 +39,13 @@ const colors: Colors = {
     white: "#fff",
     /// State and link utilities
     disabled: {
-      primary: grayLight,
-      secondary: grayxxlight,
+      primary: grayLightCool,
+      secondary: grayxxLightCool,
+    },
+    error: {
+      primary: "#97272C",
+      secondary: "#6F0106",
     },
-    error: "#97272C",
     focus: "#4181F1",
     link: {
       primary: "#0576D3",
@@ -58,12 +68,12 @@ const colors: Colors = {
     gray: {
       xdark: "#424242",
       dark: "#616161",
-      medium: "#BDBDBD",
-      light: grayLight,
-      "warm-light": "#EFEDEB",
-      xlight: "#F5F5F5",
-      "warm-xlight": "#F8F8F7",
-      xxlight: grayxxlight,
+      medium: grayMedium,
+      "light-cool": grayLightCool,
+      "light-warm": "#EFEDEB",
+      "x-light-cool": "#F5F5F5",
+      "x-light-warm": "#F8F8F7",
+      "xx-light-cool": grayxxLightCool,
     },
   },
 
@@ -92,6 +102,12 @@ const colors: Colors = {
      * 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",

package/src/theme/foundations/global.ts

@@ -7,9 +7,14 @@
 const global = {
   // styles for the `body` element
   body: {
+    boxSizing: "border-box",
     bg: "ui.white",
     color: "ui.black",
     fontFamily: "body",
+    fontSize: "0",
+    fontWeight: "300",
+    lineHeight: "1.5",
+    overflowX: "hidden",
   },
   // styles for the `a` element
   a: {
@@ -18,6 +23,9 @@ const global = {
   svg: {
     display: "inline",
   },
+  p: {
+    margin: "0 0 var(--nypl-space-s",
+  },
 };
 
 export default global;

package/src/theme/foundations/radii.ts

@@ -0,0 +1,6 @@
+const radii = {
+  pill: "20px",
+  round: "100%",
+};
+
+export default radii;

package/src/theme/foundations/shadows.ts

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

package/src/theme/foundations/spacing.ts

@@ -7,14 +7,14 @@
  * 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
+ *   --nypl-space-xxs = 4px or 0.25rem
+ *   --nypl-space-xs = 8px or 0.5rem
+ *   --nypl-space-s = 16px or 1rem
+ *   --nypl-space-m = 24px or 1.5rem
+ *   --nypl-space-l = 32px or 2rem
+ *   --nypl-space-xl = 48px or 3rem
+ *   --nypl-space-xxl = 64px or 4rem
+ *   --nypl-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
@@ -22,51 +22,51 @@
  *
  * 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
+ *        1            |         xxs       |   --nypl-space-xxs
+ *        2            |         xs        |   --nypl-space-xs
+ *        4            |         s         |   --nypl-space-s
+ *        6            |         m         |   --nypl-space-m
+ *        8            |         l         |   --nypl-space-l
+ *        12           |         xl        |   --nypl-space-xl
+ *        16           |         xxl       |   --nypl-space-xxl
+ *        24           |         xxxl      |   --nypl-space-xxxl
  */
 export const spacing = {
   px: "1px",
   0: "0",
   0.5: "0.125rem",
-  // --space-xxs = 4px
+  // --nypl-space-xxs = 4px
   xxs: "0.25rem",
   1: "0.25rem",
   1.5: "0.375rem",
-  // --space-xs = 8px
+  // --nypl-space-xs = 8px
   xs: "0.5rem",
   2: "0.5rem",
   2.5: "0.625rem",
   3: "0.75rem",
   3.5: "0.875rem",
-  // --space-s = 16px
+  // --nypl-space-s = 16px
   s: "1rem",
   4: "1rem",
   5: "1.25rem",
-  // --space-m = 24px
+  // --nypl-space-m = 24px
   m: "1.5rem",
   6: "1.5rem",
   7: "1.75rem",
-  // --space-l = 32px
+  // --nypl-space-l = 32px
   l: "2rem",
   8: "2rem",
   9: "2.25rem",
   10: "2.5rem",
-  // --space-xl = 48px
+  // --nypl-space-xl = 48px
   xl: "3rem",
   12: "3rem",
   14: "3.5rem",
-  // --space-xxl = 64px
+  // --nypl-space-xxl = 64px
   xxl: "4rem",
   16: "4rem",
   20: "5rem",
-  // --space-xxxl = 96px
+  // --nypl-space-xxxl = 96px
   xxxl: "6rem",
   24: "6rem",
   28: "7rem",

package/src/theme/index.ts

@@ -1,15 +1,46 @@
 import { extendTheme } from "@chakra-ui/react";
-import colors from "./foundations/colors";
+/** Global theme styles */
 import global from "./foundations/global";
-import typography from "./foundations/typography";
-import { spacing } from "./foundations/spacing";
 import breakpoints from "./foundations/breakpoints";
+import colors from "./foundations/colors";
+import radii from "./foundations/radii";
+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 Card from "./components/card";
 import Checkbox from "./components/checkbox";
+import ComponentWrapper from "./components/componentWrapper";
+import CheckboxGroup from "./components/checkboxGroup";
+import { CustomImage, CustomImageWrapper } from "./components/image";
+import CustomSelect from "./components/select";
+import DatePicker from "./components/datePicker";
+import Fieldset from "./components/fieldset";
+import Heading from "./components/heading";
+import HelperErrorText from "./components/helperErrorText";
+import Hero from "./components/hero";
+import HorizontalRule from "./components/horizontalRule";
+import Icon from "./components/icon";
+import Label from "./components/label";
+import Link from "./components/link";
+import List from "./components/list";
+import NotificationStyles from "./components/notification";
+import Pagination from "./components/pagination";
+import ProgressIndicator from "./components/progressIndicator";
 import Radio from "./components/radio";
-import CustomRadioGroup from "./components/customRadioGroup";
+import RadioGroup from "./components/radioGroup";
+import SearchBar from "./components/searchBar";
+import { Skeleton, SkeletonLoader } from "./components/skeletonLoader";
+import CustomSlider from "./components/slider";
+import StatusBadge from "./components/statusBadge";
 import Tabs from "./components/tabs";
-import Heading from "./components/heading";
+import TemplateStyles from "./components/template";
+import Text from "./components/text";
+import TextInput from "./components/textInput";
+import VideoPlayer from "./components/videoPlayer";
 
 /**
  * See Chakra default theme for shape of theme object:
@@ -33,26 +64,56 @@ const theme = extendTheme({
   styles: { global },
   breakpoints,
   colors,
-  ...typography,
+  radii,
+  shadows,
   space: spacing,
+  ...typography,
   /**
    * Chakra documentation on component styles:
    * https://chakra-ui.com/docs/theming/component-style
    */
   components: {
+    Accordion,
+    Breadcrumb,
     Button,
+    ...Card,
     Checkbox,
+    CheckboxGroup,
+    ComponentWrapper,
+    CustomImage,
+    CustomImageWrapper,
+    CustomSelect,
+    DatePicker,
+    Fieldset,
     Heading,
+    HelperErrorText,
+    Hero,
+    HorizontalRule,
+    Icon,
+    Label,
+    Link,
+    List,
+    ...NotificationStyles,
+    Pagination,
+    ProgressIndicator,
     Radio,
-    CustomRadioGroup,
+    RadioGroup,
+    SearchBar,
+    Skeleton,
+    SkeletonLoader,
+    CustomSlider,
+    StatusBadge,
     Tabs,
+    ...TemplateStyles,
+    Text,
+    TextInput,
+    VideoPlayer,
+  },
+  // Use `cssVarPrefix` to set the prefix used on the CSS vars produced by
+  // Chakra. By default, Chakra prefixes its own CSS variables with `--chakra`.
+  config: {
+    cssVarPrefix: "nypl",
   },
-  // 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/utils/componentCategories.ts

@@ -3,7 +3,7 @@
 const categories = {
   basicContent: {
     title: "Components/Basic Elements",
-    components: ["Card", "CardEdition", "Hero", "Promo", "Sponsor", "Table"],
+    components: ["Card", "Hero", "Promo", "Sponsor", "Table"],
   },
   contentDisplay: {
     title: "Components/Content Display",
@@ -19,7 +19,7 @@ const categories = {
   },
   deprecated: {
     title: "Components/Deprecated",
-    components: [],
+    components: ["CardEdition", "Input"],
   },
   feedback: {
     title: "Components/Feedback",
@@ -40,9 +40,9 @@ const categories = {
       "DatePicker",
       "DateRangePicker",
       "Dropdown",
+      "Fieldset",
       "FileUploader",
       "Form",
-      "Input",
       "Label",
       "NumberInput",
       "Radio",
@@ -64,6 +64,7 @@ const categories = {
       "Header",
       "HorizontalRule",
       "Section",
+      "SimpleGrid",
       "Template",
     ],
   },
@@ -88,11 +89,16 @@ const categories = {
   },
   chakra: {
     title: "Chakra/Layout",
-    components: ["Box", "Center, Circle, Square", "Stack, HStack, VStack"],
+    components: [
+      "Box",
+      "Grid",
+      "Center, Circle, Square",
+      "Stack, HStack, VStack",
+    ],
   },
   typography: {
     title: "Components/Typography & Styles",
-    components: ["Heading", "List"],
+    components: ["Heading", "List", "Text"],
   },
   devguide: {
     title: "Documentation/Development Guide",
@@ -105,6 +111,7 @@ const categories = {
       "Breakpoints",
       "Buttons",
       "Colors",
+      "Design Tokens",
       "Forms",
       "Iconography",
       "Spacing",

package/src/utils/utils.ts

@@ -14,3 +14,16 @@ export const range = (start: number, stop: number, step = 1): number[] => {
     .fill(start)
     .map((x, y) => x + y * step);
 };
+
+/**
+ * Map an enum value to a component's Chakra theme variant object. If a wrong
+ * value is passed (typically in non-Typescript scenarios), then the "fallback"
+ * value, if provided, will be used.
+ */
+export const getVariant = (variant, collection, fallback = null) => {
+  const variantMap = {};
+  for (const type in collection) {
+    variantMap[collection[type]] = collection[type];
+  }
+  return variantMap[variant] || fallback;
+};