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

package/src/theme/components/globalMixins.ts

@@ -2,6 +2,14 @@
  * These objects are also SCSS mixins but are now JS objects in the
  * context of css-in-js and the custom NYPL-theme.
  */
+const screenreaderOnly = {
+  clip: "rect(1px, 1px, 1px, 1px)",
+  height: "1px",
+  overflow: "hidden",
+  position: "absolute !important",
+  width: "1px",
+  wordWrap: "normal",
+};
 const wrapperStyles = {
   marginY: "0",
   marginX: "auto",
@@ -12,13 +20,5 @@ const wrapperStyles = {
   paddingLeft: "0",
   width: "100%",
 };
-const screenreaderOnly = {
-  clip: "rect(1px, 1px, 1px, 1px)",
-  height: "1px",
-  overflow: "hidden",
-  position: "absolute !important",
-  width: "1px",
-  wordWrap: "normal",
-};
 
 export { screenreaderOnly, wrapperStyles };

package/src/theme/components/list.ts

@@ -1,3 +1,5 @@
+import { textMargin } from "./global";
+
 const List = {
   baseStyle: ({ inline, noStyling }) => ({
     // Browser automatically applies margin, so by default we unset it.
@@ -8,15 +10,16 @@ const List = {
     padding: noStyling ? "0" : null,
     display: inline ? "flex" : null,
     li: {
-      marginRight: inline ? "xs" : null,
+      marginRight: inline ? "m" : null,
       listStyleType: inline ? "none" : null,
       _notFirst: {
-        marginTop: "xxs",
+        marginTop: inline ? null : "xxs",
       },
     },
   }),
   variants: {
     ul: ({ noStyling }) => ({
+      ...textMargin,
       listStyle: "none",
       li: {
         _before: {
@@ -33,6 +36,7 @@ const List = {
         },
       },
     }),
+    ol: textMargin,
     dl: {
       borderBottom: "1px solid",
       borderColor: "ui.gray.light-cool",

package/src/theme/components/notification.ts

@@ -2,31 +2,34 @@ import { NotificationTypes } from "../../components/Notification/NotificationTyp
 
 const Notification = {
   parts: ["container", "dismissibleButton", "icon"],
-  baseStyle: ({ centered, noMargin, notificationType }) => {
+  baseStyle: ({ centered, dismissible, noMargin, notificationType }) => {
     let bg = "ui.status.primary";
-    if (notificationType === NotificationTypes.Announcement) {
-      bg = "ui.gray.light-cool";
-    } else if (notificationType === NotificationTypes.Warning) {
-      bg = "ui.gray.xx-light-cool";
+    if (
+      notificationType === NotificationTypes.Announcement ||
+      notificationType === NotificationTypes.Warning
+    ) {
+      bg = "ui.gray.x-light-cool";
     }
     return {
       bg,
       display: "flex",
       fontSize: "-1", // slightly smaller than the default size
-      padding: "var(--nypl-space-s) var(--nypl-space-l)",
       position: "relative",
       textAlign: centered ? "center" : null,
       borderRadius: noMargin ? "0" : "4px",
       margin: noMargin ? "0" : "s",
       container: {
         margin: "auto",
+        maxWidth: "var(--nypl-breakpoint-xl)",
+        padding: "s",
+        paddingRight: dismissible ? "l" : null,
+        paddingLeft: centered && dismissible ? "l" : null,
         width: "100%",
-        maxWidth: "var(--nypl-breakpoint-large)",
       },
       dismissibleButton: {
         border: "none",
-        alignItems: "center",
         bgColor: "inherit",
+        alignItems: "center",
         color: "ui.black",
         display: "flex",
         height: "32px",
@@ -35,6 +38,9 @@ const Notification = {
         position: "absolute",
         right: "0",
         top: "0",
+        svg: {
+          marginTop: "0",
+        },
         _hover: {
           bg: "inherit",
         },
@@ -62,6 +68,13 @@ const NotificationContent = {
         ? "calc(var(--nypl-space-m) + var(--nypl-space-s))"
         : null,
       width: "100%",
+      // Links should always be black and underlined.
+      a: {
+        color: "ui.black",
+        _hover: {
+          color: "ui.black",
+        },
+      },
     },
   }),
 };

package/src/theme/components/radio.ts

@@ -67,14 +67,10 @@ const baseStyleControl = {
 };
 
 // Style object for the Radio's label
-const baseStyleLabel = {
-  ...checkboxRadioLabelStyles,
-};
+const baseStyleLabel = checkboxRadioLabelStyles;
 
 // Style object for the Radio's helper text
-const baseStyleHelper = {
-  ...checkboxRadioHelperStyle,
-};
+const baseStyleHelper = checkboxRadioHelperStyle;
 
 const baseStyle = {
   // Chakra-inserted elements in the Chakra Radio component
@@ -90,6 +86,7 @@ const sizes = {
     control: {
       ...checkboxRadioControlSize,
     },
+    label: { fontSize: "label.default" },
   },
 };
 

package/src/theme/components/searchBar.ts

@@ -1,4 +1,5 @@
 const SearchBar = {
+  parts: ["select"],
   baseStyle: {
     display: "flex",
     marginBottom: {
@@ -9,6 +10,9 @@ const SearchBar = {
       base: "column nowrap",
       md: "row nowrap",
     },
+    select: {
+      marginBottom: "0",
+    },
   },
 };
 

package/src/theme/components/select.ts

@@ -4,15 +4,15 @@ const select = {
   backgroundColor: "ui.white",
   borderRadius: "sm",
   borderColor: "ui.gray.medium",
+  fontSize: "text.caption",
   paddingTop: "xs",
   paddingRight: "xl",
   paddingBottom: "xs",
   paddingLeft: "s",
   _hover: {
-    borderColor: "ui.gray.medium",
+    borderColor: "ui.gray.dark",
   },
-  _active: activeFocus,
-  _focus: activeFocus,
+  _active: activeFocus(),
   _disabled: {
     color: "ui.gray.xdark",
     bg: "ui.gray.xx-light-cool",

package/src/theme/components/slider.ts

@@ -3,7 +3,7 @@ const staticValues = {
   marginTop: "xs",
   marginBottom: "xs",
   marginRight: "s",
-  marginLeft: "s",
+  marginLeft: "0",
 };
 const CustomSlider = {
   parts: [
@@ -12,11 +12,12 @@ const CustomSlider = {
     "leftValue",
     "rightValue",
     "textInput",
+    "sliderContainer",
     "filledTrack",
     "track",
     "thumb",
   ],
-  baseStyle: ({ isDisabled, isInvalid, isRangeSlider, showBoxes }) => {
+  baseStyle: ({ isDisabled, isInvalid, showBoxes, showValues }) => {
     let baseColor = "ui.link.primary";
     if (isInvalid) {
       baseColor = "ui.error.primary";
@@ -32,15 +33,10 @@ const CustomSlider = {
       helper: {
         marginTop: "xs",
       },
-      leftValue: {
-        ...staticValues,
-        // If the text input boxes are shown, then there already is a
-        // margin, so we can set this static value to "0". But for the
-        // single Slider, we *do* need the margin set.
-        marginLeft: showBoxes && isRangeSlider ? "0" : "s",
-      },
+      leftValue: staticValues,
       rightValue: {
         ...staticValues,
+        marginLeft: "s",
         // If the text input boxes are shown, then there already is
         // a margin, so we can set this static value to "0".
         marginRight: showBoxes ? "0" : "s",
@@ -51,6 +47,13 @@ const CustomSlider = {
         minWidth: "65px",
         color: isInvalid ? "ui.error.primary" : "ui.black",
       },
+      // This is added to the container so that the slider thumbs don't
+      // overflow past the container when the value boxes or min/max values
+      // are not shown.
+      sliderContainer: {
+        marginLeft: !showValues ? "xs" : null,
+        marginRight: !showBoxes && !showValues ? "xs" : null,
+      },
       // Filled track doesn't have a _disabled or _invalid state...
       // so we manually do it through the props.
       filledTrack: {

package/src/theme/components/structuredContent.ts

@@ -3,19 +3,29 @@ const StructuredContent = {
   baseStyle: ({ hasFigureImage, imageAspectRatio, imagePosition }) => {
     const styles: { maxWidth?: string } = {};
     const wrapperStyles = {
-      float: imagePosition !== "center" ? imagePosition : undefined,
-      marginLeft:
+      float: [
+        "none",
+        "none",
+        imagePosition !== "center" ? imagePosition : undefined,
+      ],
+      marginLeft: [
+        "auto",
+        "auto",
         imagePosition === "center"
           ? null
           : imagePosition === "left"
           ? "0"
           : "m",
-      marginRight:
+      ],
+      marginRight: [
+        "auto",
+        "auto",
         imagePosition === "center"
           ? null
           : imagePosition === "left"
           ? "m"
           : "0",
+      ],
       width: imagePosition !== "center" ? "100%" : undefined,
       ...styles,
     };
@@ -34,15 +44,25 @@ const StructuredContent = {
       image: {
         // To handle the case when the image does not have a container,
         // e.g. when there is no image caption or credit.
-        float: imagePosition !== "center" ? imagePosition : undefined,
-        marginLeft:
+        float: [
+          "none",
+          "none",
+          imagePosition !== "center" ? imagePosition : undefined,
+        ],
+        marginLeft: [
+          "auto",
+          "auto",
           imagePosition === "right" && imageAspectRatio === "original"
             ? "m"
             : undefined,
-        marginRight:
+        ],
+        marginRight: [
+          "auto",
+          "auto",
           imagePosition === "left" && imageAspectRatio === "original"
             ? "m"
             : undefined,
+        ],
         marginBottom:
           !hasFigureImage || imageAspectRatio === "original" ? "m" : null,
         ...styles,

package/src/theme/components/textInput.ts

@@ -5,6 +5,7 @@ const input = {
   border: "1px solid",
   borderColor: "ui.gray.medium",
   borderRadius: "sm",
+  fontSize: "text.caption",
   py: "xs",
   px: "s",
   _hover: {
@@ -15,8 +16,8 @@ const input = {
     color: "ui.gray.xdark",
     opacity: "1",
   },
-  _active: activeFocus,
-  _focus: activeFocus,
+  _active: activeFocus(),
+  _focus: activeFocus(),
   _placeholder: {
     color: "ui.gray.dark",
     fontStyle: "italic",

package/src/theme/components/toggle.ts

@@ -1,56 +1,60 @@
 import { helperTextMargin } from "./global";
 
 const baseStyle = {
-  label: { display: "flex", alignItems: "center", width: "fit-content" },
+  label: { alignItems: "start", display: "flex", width: "fit-content" },
   helper: {
     ...helperTextMargin,
-    marginLeft: "xs",
+    marginLeft: "xxs",
   },
 };
 
 const Switch = {
-  baseStyle: {
-    opacity: 0.4,
-    track: {
-      border: "1px solid",
-      borderColor: "ui.gray.medium",
-      p: "4px",
-      _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",
+  baseStyle: ({ size }) => {
+    return {
+      alignItems: "start",
+      opacity: 0.4,
+      track: {
+        border: "1px solid",
         borderColor: "ui.gray.medium",
+        p: "4px",
         _checked: {
-          opacity: 0.4,
+          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",
         },
       },
-      _focus: {
-        outline: "2px solid",
-        outlineColor: "ui.focus",
-        outlineOffset: "2px",
-        zIndex: "9999",
+      label: {
+        fontSize: "label.default",
+        marginLeft: "xs",
+        marginTop: size === "lg" ? "6px" : null,
+        _disabled: { fontStyle: "italic" },
       },
-    },
-    label: {
-      fontSize: "label.default",
-      marginLeft: "xs",
-      _disabled: { fontStyle: "italic" },
-    },
-    thumb: {
-      _disabled: {
-        bg: "ui.error.primary",
+      thumb: {
+        _disabled: {
+          bg: "ui.error.primary",
+        },
       },
-    },
+    };
   },
   defaultProps: {
     colorScheme: "white",

package/src/theme/foundations/colors.ts

@@ -82,30 +82,31 @@ const colors: Colors = {
 
   /** Brand fills for sections on NYPL pages. */
   section: {
-    /** What's On is used for Exhibitions & Events. */
-    "whats-on": {
-      primary: "#242424",
-      secondary: "#000000",
+    /** Blogs is used for the Blogs section. */
+    blogs: {
+      primary: grayLightCool,
+      secondary: grayMedium,
     },
 
     /** 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",
+    /** Education is used for the Education section front and associated
+     * sub-sections. */
+    education: {
+      primary: "#1D62E6",
+      secondary: "#2540A4",
     },
 
     /** 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 is used for the Research Catalog and SCC. */
+    research: {
+      primary: "#00838a",
+      secondary: "#006166",
     },
 
     /** Research libraries with specific brand colors to adhere to. */
@@ -114,6 +115,12 @@ const colors: Colors = {
       schomburg: "#a03e31",
       schwartzman: brandSecondary,
     },
+
+    /** What's On is used for Exhibitions & Events. */
+    "whats-on": {
+      primary: "#242424",
+      secondary: "#000000",
+    },
   },
 
   /**

package/src/theme/foundations/global.ts

@@ -1,8 +1,9 @@
+import { activeFocus } from "../components/global";
+import { textMargin } from "../components/global";
+
 /**
  * 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.
+ * page when the `DSProvider` component is used.
  */
 const global = {
   // styles for the `body` element
@@ -23,8 +24,19 @@ const global = {
   svg: {
     display: "inline",
   },
-  p: {
-    margin: "0 0 var(--nypl-space-s",
+  "button, select, input, textarea": {
+    "&:not([disabled])": {
+      _focus: activeFocus(),
+    },
+  },
+  "iframe, [href], [tabindex], [contentEditable='true']": {
+    _focus: activeFocus(),
+  },
+  p: textMargin,
+  ul: textMargin,
+  ol: textMargin,
+  "*, *::before, &::after": {
+    boxSizing: "inherit",
   },
 };
 

package/src/theme/foundations/typography.ts

@@ -28,7 +28,7 @@ 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",
+    heading: "-apple-system, BlinkMacSystemFont, system-ui, sans-serif",
   },
   // Values from "src/styles/02-typography/_type-scale.css"
   fontSizes: {
@@ -55,7 +55,7 @@ const typography: Typography = {
       callout: fontSizeValues["1"],
     },
     helper: {
-      default: fontSizeValues["-1"],
+      default: fontSizeValues["-2"],
     },
     label: {
       default: fontSizeValues["-1"],

package/src/utils/componentCategories.ts

@@ -90,9 +90,10 @@ const categories = {
     components: ["Breadcrumbs", "Link", "Menu", "Pagination", "Subnavigation"],
   },
   chakra: {
-    title: "Chakra/Layout",
+    title: "Chakra/Chakra COmponent/Layout",
     components: [
       "Box",
+      "Flex",
       "Grid",
       "Center, Circle, Square",
       "Stack, HStack, VStack",

package/src/utils/utils.ts

@@ -44,3 +44,31 @@ export const getStorybookEnumValues = (enumObject, name) => {
   };
   return { options, getValue };
 };
+
+/**
+ * Given a pagination's pageCount, this will return (1) a page number,
+ * derived from the current URL, and (2) a function that, when passed to
+ * Pagination component, makes the URL change and refreshes the page.
+ * @NOTE this is only used for Storybook documentation.
+ */
+export const getStorybookHrefProps = (pageCount) => {
+  // This uses the `addon-queryparams` Storybook addon.
+  const urlParams = new URLSearchParams(document.location.search);
+  const pageParam = urlParams.get("page");
+
+  const getPageNumber = (page: number, pageCount: number) => {
+    return page > 0 && page <= pageCount ? page : 1;
+  };
+  const computedCurrentPage =
+    pageParam &&
+    Number(pageParam) &&
+    getPageNumber(Number(pageParam), pageCount);
+  const location = window.location;
+  // Passing this function into `Pagination` makes the URL to change
+  // and refreshes the page.
+  const getPageHref = (selectedPage) => {
+    return `${location.href}&page=${selectedPage}`;
+  };
+
+  return { computedCurrentPage, getPageHref };
+};

package/dist/components/Pagination/Pagination.stories.d.ts

@@ -1,13 +0,0 @@
-import { Story } from "@storybook/react/types-6-0";
-import { PaginationProps } from "./Pagination";
-/**
- * PaginationGetPageHref will refresh the browser as a new page is selected.
- * In this example, `getPageHref` creates the `href` attribute for each
- * page URL.
- */
-export declare const PaginationGetPageHref: Story<PaginationProps>;
-/**
- * PaginationOnPageChange will update the current page to the value that is
- * selected but will not change the URL or refresh the page.
- */
-export declare const PaginationOnPageChange: Story<PaginationProps>;

package/src/components/Pagination/Pagination.stories.tsx

@@ -1,54 +0,0 @@
-import React from "react";
-import { Story } from "@storybook/react/types-6-0";
-
-import Pagination, { PaginationProps } from "./Pagination";
-
-/**
- * PaginationGetPageHref will refresh the browser as a new page is selected.
- * In this example, `getPageHref` creates the `href` attribute for each
- * page URL.
- */
-export const PaginationGetPageHref: Story<PaginationProps> = (args) => {
-  // This uses the `addon-queryparams` Storybook addon.
-  const urlParams = new URLSearchParams(document.location.search);
-  const pageParam = urlParams.get("page");
-  const getPageNumber = (page: number, pageCount: number) => {
-    return page > 0 && page <= pageCount ? page : 1;
-  };
-  const computedCurrentPage =
-    pageParam &&
-    Number(pageParam) &&
-    getPageNumber(Number(pageParam), args.pageCount);
-  const location = window.location;
-  // Passing this function into `Pagination` makes the URL to change
-  // and refreshes the page.
-  const getPageHref = (selectedPage) => {
-    return `${location.href}&page=${selectedPage}`;
-  };
-
-  return (
-    <Pagination
-      pageCount={args.pageCount}
-      initialPage={computedCurrentPage || args.initialPage}
-      getPageHref={getPageHref}
-    />
-  );
-};
-
-/**
- * PaginationOnPageChange will update the current page to the value that is
- * selected but will not change the URL or refresh the page.
- */
-export const PaginationOnPageChange: Story<PaginationProps> = (args) => {
-  const onPageChange = (currentPage: number) => {
-    console.log(`Current page: ${currentPage}`);
-  };
-
-  return (
-    <Pagination
-      pageCount={args.pageCount}
-      initialPage={args.initialPage}
-      onPageChange={onPageChange}
-    />
-  );
-};

package/src/styles/base/_03-base.scss

@@ -1,25 +0,0 @@
-// Kept for backwards compatibility.
-.nypl-ds {
-  box-sizing: border-box;
-  color: var(--nypl-colors-ui-black);
-  font-family: var(--nypl-fonts-body);
-
-  // Sets up the base font-size, 1rem, for the system
-  font-size: var(--nypl-fontSizes-text-default);
-  font-weight: 300;
-  line-height: 1.5;
-
-  // 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
-  overflow-x: hidden;
-
-  p {
-    margin: 0 0 var(--nypl-space-s);
-  }
-
-  *,
-  *::after,
-  *::before {
-    box-sizing: inherit;
-  }
-}