@nypl/design-system-react-components 0.25.1 → 0.25.5

package/src/components/StyleGuide/Iconography.stories.mdx

@@ -6,6 +6,7 @@ import {
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
+import { Stack } from "@chakra-ui/react";
 
 import { getCategory } from "../../utils/componentCategories";
 import Icon from "../Icons/Icon";
@@ -31,71 +32,64 @@ import DSProvider from "../../theme/provider";
 
 # Iconography
 
-Use the NYPL Design System [Icon](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/icon--control-props) component to render and control icons and NYPL logos as `<svg>` elements within consuming apps.
+| Table of Contents                              |
+| ---------------------------------------------- |
+| 1. [General Information](#general-information) |
+| 2. [Icon Examples](#icon-examples)             |
+| 3. [Icon Sizes](#icon-sizes)                   |
+| 4. [Icon Colors](#icon-colors)                 |
+| 5. [Development Notes](#development-notes)     |
+| 6. [Figma Reference](#figma-reference)         |
 
-The DS utilizes the `Filled` icons available in the [Material UI Design System](https://material-ui.com/components/material-icons/).
+## General Information
 
-## Style Guide Topics
+Use the NYPL Design System [Icon](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/icon--control-props)
+component to render and control icons and NYPL logos as `<svg>` elements within
+consuming apps.
 
-- [Icon Examples](#icon-examples)
-- [Icon Sizes](#icon-sizes)
-- [Icon Colors](#icon-colors)
-- [Development Notes](#development-notes)
-- [Figma Reference](#figma-reference)
+The DS utilizes the `Filled` icons available in the [Material UI Design System](https://material-ui.com/components/material-icons/).
 
 ## Icon Examples
 
-The graphic of the `Icon` component is handled through the `IconNames` and `LogoNames` enums. To see all graphic options for `Icon`, please refer to the [Icon](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/icon--control-props) Storybook page.
+The graphic of the `Icon` component is handled through the `IconNames` and
+`LogoNames` enums. To see all graphic options for `Icon`, please refer to the
+[Icon](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/icon--control-props)
+Storybook page.
 
 <Canvas>
   <DSProvider>
-    <span style={{ marginRight: "1rem" }}>
+    <Stack spacing="s" direction="row">
       <Icon
         decorative
         size={IconSizes.ExtraExtraExtraLarge}
         name={IconNames.Check}
-        style={{ marginRight: "1rem" }}
       />
-    </span>
-    <span style={{ marginRight: "1rem" }}>
       <Icon
         decorative
         size={IconSizes.ExtraExtraExtraLarge}
         name={IconNames.Close}
-        style={{ marginRight: "1rem" }}
       />
-    </span>
-    <span style={{ marginRight: "1rem" }}>
       <Icon
         decorative
         size={IconSizes.ExtraExtraExtraLarge}
         name={IconNames.ErrorOutline}
-        style={{ marginRight: "1rem" }}
       />
-    </span>
-    <span style={{ marginRight: "1rem" }}>
       <Icon
         decorative
         size={IconSizes.ExtraExtraExtraLarge}
         name={IconNames.SpeakerNotes}
-        style={{ marginRight: "1rem" }}
       />
-    </span>
-    <span style={{ marginRight: "1rem" }}>
       <Icon
         decorative
         size={IconSizes.ExtraExtraExtraLarge}
         name={LogoNames.LogoNypl}
-        style={{ marginRight: "1rem" }}
       />
-    </span>
-    <span style={{ marginRight: "1rem" }}>
       <Icon
         decorative
         size={IconSizes.ExtraExtraExtraLarge}
         name={LogoNames.LogoBrooklyn}
       />
-    </span>
+    </Stack>
   </DSProvider>
 </Canvas>
 
@@ -114,89 +108,89 @@ The size of the `Icon` component is handled through the `IconSizes` enum.
 
 <Canvas>
   <DSProvider>
-    <div style={{ display: "flex", alignItems: "center" }}>
-      <span style={{ marginRight: "1rem" }}>
-        <Icon size={IconSizes.Small} name={IconNames.Check} />
-      </span>
-      <span style={{ marginRight: "1rem" }}>
-        <Icon size={IconSizes.Medium} name={IconNames.Check} />
-      </span>
-      <span style={{ marginRight: "1rem" }}>
-        <Icon size={IconSizes.Large} name={IconNames.Check} />
-      </span>
-      <span style={{ marginRight: "1rem" }}>
-        <Icon size={IconSizes.ExtraLarge} name={IconNames.Check} />
-      </span>
-      <span style={{ marginRight: "1rem" }}>
-        <Icon size={IconSizes.ExtraExtraLarge} name={IconNames.Check} />
-      </span>
-      <span style={{ marginRight: "1rem" }}>
-        <Icon size={IconSizes.ExtraExtraExtraLarge} name={IconNames.Check} />
-      </span>
-    </div>
+    <Stack spacing="s" direction="row" alignItems="center">
+      <Icon size={IconSizes.Small} name={IconNames.Check} />
+      <Icon size={IconSizes.Medium} name={IconNames.Check} />
+      <Icon size={IconSizes.Large} name={IconNames.Check} />
+      <Icon size={IconSizes.ExtraLarge} name={IconNames.Check} />
+      <Icon size={IconSizes.ExtraExtraLarge} name={IconNames.Check} />
+      <Icon size={IconSizes.ExtraExtraExtraLarge} name={IconNames.Check} />
+    </Stack>
   </DSProvider>
 </Canvas>
 
-| IconSizes Enum Value             | CSS Value         | CSS Variable  |
-| -------------------------------- | ----------------- | ------------- |
-| `IconSizes.Small`                | `0.875rem` (14px) | n/a           |
-| `IconSizes.Medium`               | `1.125rem` (18px) | n/a           |
-| `IconSizes.Large`                | `1.5rem` (24px)   | `--space-m`   |
-| `IconSizes.ExtraLarge`           | `2rem` (32px)     | `--space-l`   |
-| `IconSizes.ExtraExtraLarge`      | `3rem` (48px)     | `--space-xl`  |
-| `IconSizes.ExtraExtraExtraLarge` | `4rem` (64px)     | `--space-xxl` |
+| IconSizes Enum Value             | CSS Value         | CSS Variable       |
+| -------------------------------- | ----------------- | ------------------ |
+| `IconSizes.Small`                | `0.875rem` (14px) | n/a                |
+| `IconSizes.Medium`               | `1.125rem` (18px) | n/a                |
+| `IconSizes.Large`                | `1.5rem` (24px)   | `--nypl-space-m`   |
+| `IconSizes.ExtraLarge`           | `2rem` (32px)     | `--nypl-space-l`   |
+| `IconSizes.ExtraExtraLarge`      | `3rem` (48px)     | `--nypl-space-xl`  |
+| `IconSizes.ExtraExtraExtraLarge` | `4rem` (64px)     | `--nypl-space-xxl` |
 
 ## Icon Colors
 
-The color of the `Icon` component is handled through the `IconColors` enum. Icons in NYPL projects should always be rendered with one color.
+The color of the `Icon` component is handled through the `IconColors` enum.
+Icons in NYPL projects should always be rendered with one color.
 
 <Canvas>
   <DSProvider>
-    <Icon size={IconSizes.ExtraExtraExtraLarge} name={IconNames.Check} />
-    <Icon
-      name={IconNames.Check}
-      size={IconSizes.ExtraExtraExtraLarge}
-      color={IconColors.BrandPrimary}
-    />
-    <Icon
-      name={IconNames.Check}
-      size={IconSizes.ExtraExtraExtraLarge}
-      color={IconColors.SectionResearchPrimary}
-    />
-    <Icon
-      name={IconNames.Check}
-      size={IconSizes.ExtraExtraExtraLarge}
-      color={IconColors.SectionResearchLibrarySchwartzman}
-    />
-    <Icon
-      name={IconNames.Check}
-      size={IconSizes.ExtraExtraExtraLarge}
-      color={IconColors.SectionResearchLibrarySchomburg}
-    />
+    <Stack spacing="s" direction="row">
+      <Icon size={IconSizes.ExtraExtraExtraLarge} name={IconNames.Check} />
+      <Icon
+        name={IconNames.Check}
+        size={IconSizes.ExtraExtraExtraLarge}
+        color={IconColors.BrandPrimary}
+      />
+      <Icon
+        name={IconNames.Check}
+        size={IconSizes.ExtraExtraExtraLarge}
+        color={IconColors.SectionResearchPrimary}
+      />
+      <Icon
+        name={IconNames.Check}
+        size={IconSizes.ExtraExtraExtraLarge}
+        color={IconColors.SectionResearchLibrarySchwartzman}
+      />
+      <Icon
+        name={IconNames.Check}
+        size={IconSizes.ExtraExtraExtraLarge}
+        color={IconColors.SectionResearchLibrarySchomburg}
+      />
+    </Stack>
   </DSProvider>
 </Canvas>
 
-| IconColors Enum Value                          | CSS Variable                             |
-| ---------------------------------------------- | ---------------------------------------- |
-| `IconColors.UiBlack`                           | `--ui-black`                             |
-| `IconColors.UiWhite`                           | `--ui-white`                             |
-| `IconColors.BrandPrimary`                      | `--brand-primary`                        |
-| `IconColors.BrandSecondary`                    | `--brand-secondary`                      |
-| `IconColors.SectionWhatsOnPrimary`             | `--section-whats-on-primary`             |
-| `IconColors.SectionBooksAndMorePrimary`        | `--section-books-and-more-primary`       |
-| `IconColors.SectionResearchPrimary`            | `--section-research-primary`             |
-| `IconColors.SectionResearchSecondary`          | `--section-research-secondary`           |
-| `IconColors.SectionLocationsPrimary`           | `--section-locations-primary`            |
-| `IconColors.SectionResearchLibraryLpa`         | `--section-research-library-lpa`         |
-| `IconColors.SectionResearchLibrarySchomburg`   | `--section-research-library-schomburg`   |
-| `IconColors.SectionResearchLibrarySchwartzman` | `--section-research-library-schwartzman` |
+| IconColors Enum Value                          | CSS Variable                                         |
+| ---------------------------------------------- | ---------------------------------------------------- |
+| `IconColors.UiBlack`                           | `--nypl-colors-ui-black`                             |
+| `IconColors.UiWhite`                           | `--nypl-colors-ui-white`                             |
+| `IconColors.BrandPrimary`                      | `--nypl-colors-brand-primary`                        |
+| `IconColors.BrandSecondary`                    | `--nypl-colors-brand-secondary`                      |
+| `IconColors.SectionWhatsOnPrimary`             | `--nypl-colors-section-whats-on-primary`             |
+| `IconColors.SectionBooksAndMorePrimary`        | `--nypl-colors-section-books-and-more-primary`       |
+| `IconColors.SectionResearchPrimary`            | `--nypl-colors-section-research-primary`             |
+| `IconColors.SectionResearchSecondary`          | `--nypl-colors-section-research-secondary`           |
+| `IconColors.SectionLocationsPrimary`           | `--nypl-colors-section-locations-primary`            |
+| `IconColors.SectionResearchLibraryLpa`         | `--nypl-colors-section-research-library-lpa`         |
+| `IconColors.SectionResearchLibrarySchomburg`   | `--nypl-colors-section-research-library-schomburg`   |
+| `IconColors.SectionResearchLibrarySchwartzman` | `--nypl-colors-section-research-library-schwartzman` |
 
 ## Development Notes
 
-Icons have been added to the Icon component as they have been needed within NYPL development project, so not all of the [NYPL icons](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/?node-id=10734%3A3945) and [NYPL Brand](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=15454%3A47007) and [NYPL UI](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=14989%3A37) colors are currently available through the DS Icon component. If your project requires an icon or color that is not currently available in the Icon component, please inform your project manager or reach out directly to the NYPL Design System team.
+Icons have been added to the Icon component as they have been needed within NYPL
+development project, so not all of the [NYPL icons](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/?node-id=10734%3A3945)
+and [NYPL Brand](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=15454%3A47007)
+and [NYPL UI](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=14989%3A37)
+colors are currently available through the DS Icon component. If your project
+requires an icon or color that is not currently available in the Icon component,
+please inform your project manager or reach out directly to the NYPL Design
+System team.
 
 ## Figma Reference
 
+For additional spacing information, please refer to the Figma Main file.
+
 - [NYPL Icons](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/?node-id=10734%3A3945)
 - [NYPL Brand Colors](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=15454%3A47007)
 - [NYPL UI Colors](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=14989%3A37)

package/src/components/StyleGuide/Spacing.stories.mdx

@@ -13,6 +13,7 @@ import getCSSVariable from "../../helpers/getCSSVariable";
 import Card from "../Card/Card";
 import List from "../List/List";
 import { ListTypes } from "../List/ListTypes";
+import DSProvider from "../../theme/provider";
 
 <Meta
   title={getCategory("Spacing")}
@@ -28,48 +29,55 @@ import { ListTypes } from "../List/ListTypes";
 
 # Spacing
 
-The DS spacing values are based on a root font size of `16px` (`1rem` = `16px`).
+| Table of Contents                                |
+| ------------------------------------------------ |
+| 1. [General Information](#general-information)   |
+| 2. [CSS Variables](#css-variables)               |
+| 3. [Section Spacing](#section-spacing)           |
+| 4. [Grid Spacing](#grid-spacing)                 |
+| 5. [Tabular Data Spacing](#tabular-data-spacing) |
+| 6. [Form Spacing](#form-spacing)                 |
+| 7. [Figma Reference](#figma-reference)           |
 
-## Style Guide Topics
+## General Information
 
-- [CSS Variables](#css-variables)
-- [Section Spacing](#section-spacing)
-- [Grid Spacing](#grid-spacing)
-- [Tabular Data Spacing](#tabular-data-spacing)
-- [Form Spacing](#form-spacing)
-- [Figma Reference](#figma-reference)
+The DS spacing values are based on a root font size of `16px` (`1rem` = `16px`).
 
 ## CSS Variables
 
+<DSProvider>
 The following CSS variables are available through the DS.
 
-| Variable Name  | Calculation                | Pixel Equivalent | Visual Reference                                                                             |
-| -------------- | -------------------------- | ---------------- | -------------------------------------------------------------------------------------------- |
-| `--space`      | n/a                        | `16px`           | <div style={{ width: "var(--space)", backgroundColor: "var(--ui-focus)" }}>&nbsp;</div>      |
-| `--space-xxs`  | `calc(var(--space) / 4)`   | `4px`            | <div style={{ width: "var(--space-xxs)", backgroundColor: "var(--ui-focus)" }}>&nbsp;</div>  |
-| `--space-xs`   | `calc(var(--space) / 2)`   | `8px`            | <div style={{ width: "var(--space-xs)", backgroundColor: "var(--ui-focus)" }}>&nbsp;</div>   |
-| `--space-s`    | `calc(var(--space) * 1)`   | `16px`           | <div style={{ width: "var(--space-s)", backgroundColor: "var(--ui-focus)" }}>&nbsp;</div>    |
-| `--space-m`    | `calc(var(--space) * 1.5)` | `24px`           | <div style={{ width: "var(--space-m)", backgroundColor: "var(--ui-focus)" }}>&nbsp;</div>    |
-| `--space-l`    | `calc(var(--space) * 2)`   | `32px`           | <div style={{ width: "var(--space-l)", backgroundColor: "var(--ui-focus)" }}>&nbsp;</div>    |
-| `--space-xl`   | `calc(var(--space) * 3)`   | `48px`           | <div style={{ width: "var(--space-xl)", backgroundColor: "var(--ui-focus)" }}>&nbsp;</div>   |
-| `--space-xxl`  | `calc(var(--space) * 4)`   | `64px`           | <div style={{ width: "var(--space-xxl)", backgroundColor: "var(--ui-focus)" }}>&nbsp;</div>  |
-| `--space-xxxl` | `calc(var(--space) * 6)`   | `96px`           | <div style={{ width: "var(--space-xxxl)", backgroundColor: "var(--ui-focus)" }}>&nbsp;</div> |
+
+| Variable Name       | REM Equivalent | Pixel Equivalent | Visual Reference                                                                                              |
+| ------------------- | -------------- | ---------------- | ------------------------------------------------------------------------------------------------------------- |
+| `--nypl-space-xxs`  | `0.25rem`      | `4px`            | <div style={{ width: "var(--nypl-space-xxs)", backgroundColor: "var(--nypl-colors-ui-focus)" }}>&nbsp;</div>  |
+| `--nypl-space-xs`   | `0.5rem`       | `8px`            | <div style={{ width: "var(--nypl-space-xs)", backgroundColor: "var(--nypl-colors-ui-focus)" }}>&nbsp;</div>   |
+| `--nypl-space-s`    | `1rem`         | `16px`           | <div style={{ width: "var(--nypl-space-s)", backgroundColor: "var(--nypl-colors-ui-focus)" }}>&nbsp;</div>    |
+| `--nypl-space-m`    | `1.5rem`       | `24px`           | <div style={{ width: "var(--nypl-space-m)", backgroundColor: "var(--nypl-colors-ui-focus)" }}>&nbsp;</div>    |
+| `--nypl-space-l`    | `2rem`         | `32px`           | <div style={{ width: "var(--nypl-space-l)", backgroundColor: "var(--nypl-colors-ui-focus)" }}>&nbsp;</div>    |
+| `--nypl-space-xl`   | `3rem`         | `48px`           | <div style={{ width: "var(--nypl-space-xl)", backgroundColor: "var(--nypl-colors-ui-focus)" }}>&nbsp;</div>   |
+| `--nypl-space-xxl`  | `4rem`         | `64px`           | <div style={{ width: "var(--nypl-space-xxl)", backgroundColor: "var(--nypl-colors-ui-focus)" }}>&nbsp;</div>  |
+| `--nypl-space-xxxl` | `6rem`         | `96px`           | <div style={{ width: "var(--nypl-space-xxxl)", backgroundColor: "var(--nypl-colors-ui-focus)" }}>&nbsp;</div> |
+
+</DSProvider>
+
 
 ## Section Spacing
 
-In consuming apps, the major page sections should be separated vertically by `3rem` `(--space-xl`). This includes the space after the page global `header` and the space before the global `footer`.
+In consuming apps, the major page sections should be separated vertically by `3rem` `(--nypl-space-xl`). This includes the space after the page global `header` and the space before the global `footer`.
 
 ## Grid Spacing
 
-When elements are displayed in a grid (i.e. Cards, Images, etc.), the space between elements, both horizontal and vertical, should be `2rem` (`--space-l`).
+When elements are displayed in a grid (i.e. Cards, Images, etc.), the space between elements, both horizontal and vertical, should be `2rem` (`--nypl-space-l`).
 
 ## Tabular Data Spacing
 
-When data is displayed in a tabular layout (i.e. rows and columns in a table, a definition list, etc.), the space between data cells in a row should be `1.5rem` (`--space-m`) and the space between rows should be `2rem` (`--space-l`).
+When data is displayed in a tabular layout (i.e. rows and columns in a table, a definition list, etc.), the space between data cells in a row should be `1.5rem` (`--nypl-space-m`) and the space between rows should be `2rem` (`--nypl-space-l`).
 
 ## Form Spacing
 
-Form input components should have a `2rem` (`--space-l`) space between each component. This includes both vertical (column) and horizontal (row) stacking. The DS [Form](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/form-elements-form--form) component has correct spacing incorporated into its UI structure and should always be used when building forms.
+Form input components should have a `2rem` (`--nypl-space-l`) space between each component. This includes both vertical (column) and horizontal (row) stacking. The DS [Form](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/form-elements-form--form) component has correct spacing incorporated into its UI structure and should always be used when building forms.
 
 ## Figma Reference