@nypl/design-system-react-components 0.25.12 → 0.26.1

package/src/theme/components/textInput.ts

@@ -1,4 +1,7 @@
-import { activeFocus, helperTextMargin } from "./global";
+import {
+  selectTextInputDisabledStyles,
+  selectTextInputFocusStyles,
+} from "./global";
 
 const input = {
   bgColor: "ui.white",
@@ -6,18 +9,19 @@ const input = {
   borderColor: "ui.gray.medium",
   borderRadius: "sm",
   fontSize: "text.caption",
-  py: "xs",
-  px: "s",
+  py: "inset.narrow",
+  px: "inset.default",
   _hover: {
     borderColor: "ui.gray.dark",
   },
   _disabled: {
-    bgColor: "ui.gray.xx-light-cool",
-    color: "ui.gray.xdark",
-    opacity: "1",
+    ...selectTextInputDisabledStyles,
+    _placeholder: {
+      color: "ui.gray.medium",
+    },
   },
-  _active: activeFocus(),
-  _focus: activeFocus(),
+  _active: selectTextInputFocusStyles,
+  _focus: selectTextInputFocusStyles,
   _placeholder: {
     color: "ui.gray.dark",
     fontStyle: "italic",
@@ -31,11 +35,8 @@ const input = {
 };
 
 const TextInput = {
-  parts: ["helper", "input", "textarea"],
+  parts: ["input", "textarea"],
   baseStyle: {
-    helper: {
-      ...helperTextMargin,
-    },
     input,
     textarea: {
       ...input,

package/src/theme/components/toggle.ts

@@ -1,22 +1,29 @@
-import { helperTextMargin } from "./global";
+import { cssVar } from "@chakra-ui/theme-tools";
+import { ToggleSizes } from "../../components/Toggle/ToggleTypes";
 
-const baseStyle = {
-  label: { alignItems: "start", display: "flex", width: "fit-content" },
-  helper: {
-    ...helperTextMargin,
-    marginLeft: "xxs",
-  },
+const toggleBaseStyle = ({ isDisabled, size }) => {
+  const label = { alignItems: "start", display: "flex", width: "fit-content" };
+  const helperErrorText = {
+    marginLeft: size === ToggleSizes.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 }) => {
+  baseStyle: ({ size }: { size: string }) => {
     return {
       alignItems: "start",
       opacity: 0.4,
       track: {
         border: "1px solid",
         borderColor: "ui.gray.medium",
-        p: "4px",
+        p: "1px",
         _checked: {
           bg: "ui.link.primary",
           borderColor: "ui.link.primary",
@@ -46,8 +53,11 @@ const Switch = {
       label: {
         fontSize: "label.default",
         marginLeft: "xs",
-        marginTop: size === "lg" ? "6px" : null,
-        _disabled: { fontStyle: "italic" },
+        marginTop: size === "lg" ? "xxxs" : null,
+        _disabled: {
+          color: "ui.gray.dark",
+          fontStyle: "italic",
+        },
       },
       thumb: {
         _disabled: {
@@ -56,14 +66,34 @@ const Switch = {
       },
     };
   },
+  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: ["helper"],
-  baseStyle,
+  parts: ["helperErrorText"],
+  baseStyle: toggleBaseStyle,
   // Default values
   defaultProps: {
     size: "lg",

package/src/theme/components/videoPlayer.ts

@@ -11,7 +11,7 @@ const square = {
 };
 
 const invalid = {
-  backgroundColor: "ui.gray.light-warm",
+  backgroundColor: "ui.gray.light-cool",
   height: "auto",
   padding: "s",
 };

package/src/theme/foundations/colors.ts

@@ -20,7 +20,7 @@ import { Colors } from "@chakra-ui/react";
  */
 
 // Reusable variables:
-const grayLightCool = "#E0E0E0";
+const grayLightCool = "#E9E9E9";
 const grayxxLightCool = "#FAFAFA";
 const grayMedium = "#BDBDBD";
 const brandPrimary = "#C60917";

package/src/theme/foundations/radii.ts

@@ -1,4 +1,5 @@
 const radii = {
+  checkbox: "3px",
   pill: "20px",
   round: "100%",
 };

package/src/theme/foundations/spacing.ts

@@ -1,12 +1,13 @@
 /**
- * This is based on:
+ * Chakra spacing values are 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":
+ * The DS uses nine CSS variables/values found in "src/styles/03-space/_space.css":
+ *   --nypl-space-xxxs = 2px or 0.125rem
  *   --nypl-space-xxs = 4px or 0.25rem
  *   --nypl-space-xs = 8px or 0.5rem
  *   --nypl-space-s = 16px or 1rem
@@ -22,7 +23,7 @@
  *
  * Chakra Number Value | Chakra Name value | DS Variable
  * ------------------- | ----------------- | -----------------
- *        0.5            |         xxxs       |   --nypl-space-xxxs
+ *        0.5          |         xxxs      |   --nypl-space-xxxs
  *        1            |         xxs       |   --nypl-space-xxs
  *        2            |         xs        |   --nypl-space-xs
  *        4            |         s         |   --nypl-space-s
@@ -32,45 +33,27 @@
  *        16           |         xxl       |   --nypl-space-xxl
  *        24           |         xxxl      |   --nypl-space-xxxl
  */
-export const spacing = {
+const chakraSpacingTokens = {
   px: "1px",
   0: "0",
-  // --nypl-space-xxxs = 2px
-  xxxs: "0.125rem",
   0.5: "0.125rem",
-  // --nypl-space-xxs = 4px
-  xxs: "0.25rem",
   1: "0.25rem",
   1.5: "0.375rem",
-  // --nypl-space-xs = 8px
-  xs: "0.5rem",
   2: "0.5rem",
   2.5: "0.625rem",
   3: "0.75rem",
   3.5: "0.875rem",
-  // --nypl-space-s = 16px
-  s: "1rem",
   4: "1rem",
   5: "1.25rem",
-  // --nypl-space-m = 24px
-  m: "1.5rem",
   6: "1.5rem",
   7: "1.75rem",
-  // --nypl-space-l = 32px
-  l: "2rem",
   8: "2rem",
   9: "2.25rem",
   10: "2.5rem",
-  // --nypl-space-xl = 48px
-  xl: "3rem",
   12: "3rem",
   14: "3.5rem",
-  // --nypl-space-xxl = 64px
-  xxl: "4rem",
   16: "4rem",
   20: "5rem",
-  // --nypl-space-xxxl = 96px
-  xxxl: "6rem",
   24: "6rem",
   28: "7rem",
   32: "8rem",
@@ -86,3 +69,68 @@ export const spacing = {
   80: "20rem",
   96: "24rem",
 };
+const reservoirSpacingValues = {
+  xxxs: "0.125rem", // 2px
+  xxs: "0.25rem", // 4px
+  xs: "0.5rem", // 8px
+  s: "1rem", // 16px
+  m: "1.5rem", // 24px
+  l: "2rem", // 32px
+  xl: "3rem", // 48px
+  xxl: "4rem", // 64px
+  xxxl: "6rem", // 96px
+};
+const reservoirSpacingTokens = {
+  // Reservoir generic tokens
+  xxxs: reservoirSpacingValues["xxxs"],
+  xxs: reservoirSpacingValues["xxs"],
+  xs: reservoirSpacingValues["xs"],
+  s: reservoirSpacingValues["s"],
+  m: reservoirSpacingValues["m"],
+  l: reservoirSpacingValues["l"],
+  xl: reservoirSpacingValues["xl"],
+  xxl: reservoirSpacingValues["xxl"],
+  xxxl: reservoirSpacingValues["xxxl"],
+  // Reservoir semantic tokens
+  input: {
+    group: {
+      button: {
+        hstack: reservoirSpacingValues["xs"],
+        vstack: reservoirSpacingValues["xs"],
+      },
+      default: {
+        hstack: reservoirSpacingValues["l"],
+        vstack: reservoirSpacingValues["s"],
+      },
+    },
+  },
+  inset: {
+    default: reservoirSpacingValues["s"],
+    extranarrow: reservoirSpacingValues["xxs"],
+    extrawide: reservoirSpacingValues["xl"],
+    narrow: reservoirSpacingValues["xs"],
+    wide: reservoirSpacingValues["l"],
+  },
+  grid: {
+    default: reservoirSpacingValues["l"],
+    xxs: reservoirSpacingValues["xxs"],
+    xs: reservoirSpacingValues["xs"],
+    s: reservoirSpacingValues["s"],
+    m: reservoirSpacingValues["m"],
+    l: reservoirSpacingValues["l"],
+    xl: reservoirSpacingValues["xl"],
+    xxl: reservoirSpacingValues["xxl"],
+  },
+  page: {
+    hstack: reservoirSpacingValues["l"],
+    vstack: reservoirSpacingValues["l"],
+  },
+  table: {
+    column: reservoirSpacingValues["m"],
+    row: reservoirSpacingValues["l"],
+  },
+};
+export const spacing = {
+  ...chakraSpacingTokens,
+  ...reservoirSpacingTokens,
+};

package/src/theme/foundations/typography.ts

@@ -41,7 +41,7 @@ const typography: Typography = {
     "2": fontSizeValues["2"],
     "3": fontSizeValues["3"],
     "4": fontSizeValues["4"],
-    // specific tokens
+    // semantic tokens
     breadcrumbs: {
       default: fontSizeValues["-1"],
     },
@@ -75,7 +75,7 @@ const typography: Typography = {
     regular: fontWeightValues["regular"],
     medium: fontWeightValues["medium"],
     bold: fontWeightValues["bold"],
-    // specific tokens
+    // semantic tokens
     breadcrumbs: {
       default: fontWeightValues["regular"],
       lastChild: fontWeightValues["bold"],

package/src/utils/componentCategories.ts

@@ -1,10 +1,24 @@
-// NYPL Design System Component Categories
+// NYPL Reservoir Design System Component Categories
 
 const categories = {
+  accessibility: {
+    title: "Accessibility Guide",
+    components: ["Skip Navigation"],
+  },
   basicContent: {
     title: "Components/Basic Elements",
     components: ["Card", "Hero", "Promo", "Sponsor"],
   },
+  chakra: {
+    title: "Components/Chakra Exports/Layout",
+    components: [
+      "Box",
+      "Flex",
+      "Grid",
+      "Center, Circle, Square",
+      "Stack, HStack, VStack",
+    ],
+  },
   contentDisplay: {
     title: "Components/Content Display",
     components: [
@@ -21,6 +35,10 @@ const categories = {
     title: "Components/Deprecated",
     components: ["CardEdition", "Input"],
   },
+  devguide: {
+    title: "Development Guide",
+    components: ["Autosuggest"],
+  },
   feedback: {
     title: "Components/Feedback",
     components: [
@@ -55,13 +73,16 @@ const categories = {
       "Toggle",
     ],
   },
+  hooks: {
+    title: "Hooks",
+    components: ["useCarouselStyles", "useNYPLTheme", "useWindowSize"],
+  },
   layout: {
     title: "Components/Page Layout",
     components: [
       "StructuredContent",
       "ContentSwitcher",
       "Footer",
-      "Grid",
       "Header",
       "HorizontalRule",
       "Section",
@@ -89,26 +110,8 @@ const categories = {
     title: "Components/Navigation",
     components: ["Breadcrumbs", "Link", "Menu", "Pagination", "Subnavigation"],
   },
-  chakra: {
-    title: "Chakra/Chakra COmponent/Layout",
-    components: [
-      "Box",
-      "Flex",
-      "Grid",
-      "Center, Circle, Square",
-      "Stack, HStack, VStack",
-    ],
-  },
-  typography: {
-    title: "Components/Typography & Styles",
-    components: ["Heading", "List", "Text"],
-  },
-  devguide: {
-    title: "Documentation/Development Guide",
-    components: ["Autosuggest"],
-  },
   styleguide: {
-    title: "Documentation/Style Guide",
+    title: "Style Guide",
     components: [
       "Bidirectionality",
       "Breakpoints",
@@ -122,6 +125,10 @@ const categories = {
       "Typography",
     ],
   },
+  typography: {
+    title: "Components/Typography & Styles",
+    components: ["Heading", "List", "Text"],
+  },
 };
 
 export const getCategory = (component) => {

package/dist/components/Card/CardTypes.d.ts

@@ -1,4 +0,0 @@
-export declare enum CardLayouts {
-    Row = "row",
-    Column = "column"
-}

package/dist/components/CheckboxGroup/CheckboxGroupLayoutTypes.d.ts

@@ -1,4 +0,0 @@
-export declare enum CheckboxGroupLayoutTypes {
-    Column = "column",
-    Row = "row"
-}

package/dist/components/RadioGroup/RadioGroupLayoutTypes.d.ts

@@ -1,4 +0,0 @@
-export declare enum RadioGroupLayoutTypes {
-    Column = "column",
-    Row = "row"
-}

package/dist/components/SearchBar/SearchBar.Test.d.ts

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

package/dist/helpers/generateUUID.d.ts

@@ -1 +0,0 @@
-export default function generateUUID(): any;

package/src/components/CheckboxGroup/CheckboxGroupLayoutTypes.tsx

@@ -1,4 +0,0 @@
-export enum CheckboxGroupLayoutTypes {
-  Column = "column",
-  Row = "row",
-}

package/src/components/RadioGroup/RadioGroupLayoutTypes.tsx

@@ -1,4 +0,0 @@
-export enum RadioGroupLayoutTypes {
-  Column = "column",
-  Row = "row",
-}

package/src/docs/Intro.stories.mdx

@@ -1,53 +0,0 @@
-import { Meta } from "@storybook/addon-docs";
-
-import Hero from "../components/Hero/Hero.tsx";
-import { HeroTypes } from "../components/Hero/HeroTypes.tsx";
-import Heading from "../components/Heading/Heading.tsx";
-import Image from "../components/Image/Image.tsx";
-import DSProvider from "../theme/provider";
-
-<Meta title="Introduction" />
-
-# NYPL Design System
-
-export const heroBackgroundColor = `var(--nypl-colors-section-books-and-more-primary)`;
-export const heroForegroundColor = `var(--nypl-colors-ui-white)`;
-
-<DSProvider>
-  <Hero
-    heroType={HeroTypes.FiftyFifty}
-    subHeaderText="With 92 locations across the Bronx, Manhattan, and Staten Island, The New York Public Library is an essential part of neighborhoods across the city. Visit us today."
-    image={
-      <Image
-        src="https://cdn-d8.nypl.org/s3fs-public/styles/2_1_960/public/2020-07/SASB_06_29_2020_Lions_mask-00207%20copy_0.jpeg?h=c8e955ed&itok=n_GLQgoe"
-        alt=""
-      />
-    }
-    backgroundColor={heroBackgroundColor}
-    foregroundColor={heroForegroundColor}
-  />
-</DSProvider>
-
-<br />
-
-Welcome to the New York Public Library's Design System React component library.
-This design system is NYPL's open-source extensible React library for products
-and experiences, with accessibility as its foundation. It ships functional components
-with consistent NYPL styling. You can learn more about the project and its goals
-[on our Confluence page](https://confluence.nypl.org/display/DIGTL/NYPL+Design+System)
-(needs a log in).
-
-The best way to get started is through the [Design System's Wiki](https://github.com/NYPL/nypl-design-system/wiki)
-to learn about design and implementation at NYPL. The Hero above is just
-one example of how we use the NYPL Design System on NYPL.org.
-
-For your convenience, the DS components have been organized into logical categories
-based on both form and function. Please refer to the **COMPONENTS** section in the
-Storybook sidebar.
-
-## @nypl/design-system-react-components
-
-This React design system library is currently published on [npm](https://www.npmjs.com/package/@nypl/design-system-react-components).
-If you're looking to contribute to this project, checkout the
-[nypl-design-system](https://github.com/NYPL/nypl-design-system) repo on Github
-for more information.

package/src/helpers/generateUUID.tsx

@@ -1,5 +0,0 @@
-import { v4 as uuidv4 } from "uuid";
-
-export default function generateUUID() {
-  return uuidv4();
-}