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

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/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/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/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/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/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/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/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();
-}

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