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

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: {

package/src/utils/componentCategories.ts

@@ -90,7 +90,7 @@ const categories = {
     components: ["Breadcrumbs", "Link", "Menu", "Pagination", "Subnavigation"],
   },
   chakra: {
-    title: "Chakra/Layout",
+    title: "Chakra/Chakra COmponent/Layout",
     components: [
       "Box",
       "Flex",

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;
-  }
-}

package/src/styles/base/_04-focus.scss

@@ -1,22 +0,0 @@
-// Apply :focus behavior to focusable elements only (For IE 11)
-.nypl-ds {
-  input,
-  select,
-  textarea,
-  button {
-    &:not([disabled]) {
-      &:focus {
-        @include focus-outline;
-      }
-    }
-  }
-
-  iframe,
-  [href],
-  [tabindex],
-  [contentEditable="true"] {
-    &:focus {
-      @include focus-outline;
-    }
-  }
-}