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

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

@@ -3,7 +3,6 @@ import {
   Story,
   Canvas,
   ArgsTable,
-  Preview,
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
@@ -16,6 +15,7 @@ import {
   IconNames,
   LogoNames,
 } from "../Icons/IconTypes";
+import DSProvider from "../../theme/provider";
 
 <Meta
   title={getCategory("Iconography")}
@@ -35,174 +35,167 @@ Use the NYPL Design System [Icon](https://nypl.github.io/nypl-design-system/stor
 
 The DS utilizes the `Filled` icons available in the [Material UI Design System](https://material-ui.com/components/material-icons/).
 
-```jsx
-import {
-  Icon,
-  IconNames,
-  LogoNames,
-  IconColors,
-  IconSizes,
-  IconRotationTypes,
-} from "@nypl/design-system-react-components";
-```
+## Style Guide Topics
+
+- [Icon Examples](#icon-examples)
+- [Icon Sizes](#icon-sizes)
+- [Icon Colors](#icon-colors)
+- [Development Notes](#development-notes)
+- [Figma Reference](#figma-reference)
 
-### Icon Examples
+## 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.
 
-<Preview>
-  <Story name="Icon Examples">
+<Canvas>
+  <DSProvider>
     <span style={{ marginRight: "1rem" }}>
       <Icon
         decorative
-        size={IconSizes.xxxlarge}
-        name={IconNames.check}
+        size={IconSizes.ExtraExtraExtraLarge}
+        name={IconNames.Check}
         style={{ marginRight: "1rem" }}
       />
     </span>
     <span style={{ marginRight: "1rem" }}>
       <Icon
         decorative
-        size={IconSizes.xxxlarge}
-        name={IconNames.close}
+        size={IconSizes.ExtraExtraExtraLarge}
+        name={IconNames.Close}
         style={{ marginRight: "1rem" }}
       />
     </span>
     <span style={{ marginRight: "1rem" }}>
       <Icon
         decorative
-        size={IconSizes.xxxlarge}
-        name={IconNames.error_outline}
+        size={IconSizes.ExtraExtraExtraLarge}
+        name={IconNames.ErrorOutline}
         style={{ marginRight: "1rem" }}
       />
     </span>
     <span style={{ marginRight: "1rem" }}>
       <Icon
         decorative
-        size={IconSizes.xxxlarge}
-        name={IconNames.speaker_notes}
+        size={IconSizes.ExtraExtraExtraLarge}
+        name={IconNames.SpeakerNotes}
         style={{ marginRight: "1rem" }}
       />
     </span>
     <span style={{ marginRight: "1rem" }}>
       <Icon
         decorative
-        size={IconSizes.xxxlarge}
-        name={LogoNames.logo_nypl}
+        size={IconSizes.ExtraExtraExtraLarge}
+        name={LogoNames.LogoNypl}
         style={{ marginRight: "1rem" }}
       />
     </span>
     <span style={{ marginRight: "1rem" }}>
       <Icon
         decorative
-        size={IconSizes.xxxlarge}
-        name={LogoNames.logo_brooklyn}
+        size={IconSizes.ExtraExtraExtraLarge}
+        name={LogoNames.LogoBrooklyn}
       />
     </span>
-  </Story>
-</Preview>
+  </DSProvider>
+</Canvas>
 
 | Enum Values for Examples Above |
 | ------------------------------ |
-| `IconNames.check`              |
-| `IconNames.close`              |
-| `IconNames.error_outline`      |
-| `IconNames.speaker_notes`      |
-| `LogoNames.logo_nypl`          |
-| `LogoNames.logo_brooklyn`      |
+| `IconNames.Check`              |
+| `IconNames.Close`              |
+| `IconNames.ErrorOutline`       |
+| `IconNames.SpeakerNotes`       |
+| `LogoNames.LogoNypl`           |
+| `LogoNames.LogoBrooklyn`       |
 
-### Size
+## Icon Sizes
 
 The size of the `Icon` component is handled through the `IconSizes` enum.
 
-<Preview>
-  <Story name="Size">
+<Canvas>
+  <DSProvider>
     <div style={{ display: "flex", alignItems: "center" }}>
       <span style={{ marginRight: "1rem" }}>
-        <Icon decorative size={IconSizes.small} name="check" />
+        <Icon size={IconSizes.Small} name={IconNames.Check} />
       </span>
       <span style={{ marginRight: "1rem" }}>
-        <Icon decorative size={IconSizes.medium} name="check" />
+        <Icon size={IconSizes.Medium} name={IconNames.Check} />
       </span>
       <span style={{ marginRight: "1rem" }}>
-        <Icon decorative size={IconSizes.large} name="check" />
+        <Icon size={IconSizes.Large} name={IconNames.Check} />
       </span>
       <span style={{ marginRight: "1rem" }}>
-        <Icon decorative size={IconSizes.xlarge} name="check" />
+        <Icon size={IconSizes.ExtraLarge} name={IconNames.Check} />
       </span>
       <span style={{ marginRight: "1rem" }}>
-        <Icon decorative size={IconSizes.xxlarge} name="check" />
+        <Icon size={IconSizes.ExtraExtraLarge} name={IconNames.Check} />
       </span>
       <span style={{ marginRight: "1rem" }}>
-        <Icon decorative size={IconSizes.xxxlarge} name="check" />
+        <Icon size={IconSizes.ExtraExtraExtraLarge} name={IconNames.Check} />
       </span>
     </div>
-  </Story>
-</Preview>
+  </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.xlarge`   | `2rem` (32px)     | `--space-l`   |
-| `IconSizes.xxlarge`  | `3rem` (48px)     | `--space-xl`  |
-| `IconSizes.xxxlarge` | `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)   | `--space-m`   |
+| `IconSizes.ExtraLarge`           | `2rem` (32px)     | `--space-l`   |
+| `IconSizes.ExtraExtraLarge`      | `3rem` (48px)     | `--space-xl`  |
+| `IconSizes.ExtraExtraExtraLarge` | `4rem` (64px)     | `--space-xxl` |
 
-### Color
+## 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.
 
-<Preview>
-  <Story name="Color">
-    <Icon decorative size={IconSizes.xxxlarge} name="check" />
+<Canvas>
+  <DSProvider>
+    <Icon size={IconSizes.ExtraExtraExtraLarge} name={IconNames.Check} />
     <Icon
-      decorative
-      size={IconSizes.xxxlarge}
-      color={IconColors.brand_primary}
-      name="check"
+      name={IconNames.Check}
+      size={IconSizes.ExtraExtraExtraLarge}
+      color={IconColors.BrandPrimary}
     />
     <Icon
-      decorative
-      size={IconSizes.xxxlarge}
-      color={IconColors.section_research_primary}
-      name="check"
+      name={IconNames.Check}
+      size={IconSizes.ExtraExtraExtraLarge}
+      color={IconColors.SectionResearchPrimary}
     />
     <Icon
-      decorative
-      size={IconSizes.xxxlarge}
-      color={IconColors.section_research_library_schwartzman}
-      name="check"
+      name={IconNames.Check}
+      size={IconSizes.ExtraExtraExtraLarge}
+      color={IconColors.SectionResearchLibrarySchwartzman}
     />
     <Icon
-      decorative
-      size={IconSizes.xxxlarge}
-      color={IconColors.section_research_library_schomburg}
-      name="check"
+      name={IconNames.Check}
+      size={IconSizes.ExtraExtraExtraLarge}
+      color={IconColors.SectionResearchLibrarySchomburg}
     />
-  </Story>
-</Preview>
-
-| IconColors Enum Value                             | CSS Variable                             |
-| ------------------------------------------------- | ---------------------------------------- |
-| `IconColors.ui_black`                             | `--ui-black`                             |
-| `IconColors.ui_white`                             | `--ui-white`                             |
-| `IconColors.brand_primary`                        | `--brand-primary`                        |
-| `IconColors.brand_secondary`                      | `--brand-secondary`                      |
-| `IconColors.section_whats_on_primary`             | `--section-whats-on-primary`             |
-| `IconColors.section_books_and_more_primary`       | `--section-books-and-more-primary`       |
-| `IconColors.section_research_primary`             | `--section-research-primary`             |
-| `IconColors.section_research_secondary`           | `--section-research-secondary`           |
-| `IconColors.section_locations_primary`            | `--section-locations-primary`            |
-| `IconColors.section_research_library_lpa`         | `--section-research-library-lpa`         |
-| `IconColors.section_research_library_schomburg`   | `--section-research-library-schomburg`   |
-| `IconColors.section_research_library_schwartzman` | `--section-research-library-schwartzman` |
-
-### Development Note
+  </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` |
+
+## 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.
 
-### Design System Figma Reference
+## Figma Reference
 
 - [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)

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

@@ -11,7 +11,6 @@ import { withDesign } from "storybook-addon-designs";
 import { getCategory } from "../../utils/componentCategories";
 import getCSSVariable from "../../helpers/getCSSVariable";
 import Card from "../Card/Card";
-import { ExampleCard } from "../Card/Card.stories";
 import List from "../List/List";
 import { ListTypes } from "../List/ListTypes";