@nypl/design-system-react-components 0.25.0 → 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")}
@@ -47,151 +47,149 @@ The DS utilizes the `Filled` icons available in the [Material UI Design System](
 
 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>
-  <>
+<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>
-  </>
-</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`       |
 
 ## Icon Sizes
 
 The size of the `Icon` component is handled through the `IconSizes` enum.
 
-<Preview>
-  <div style={{ display: "flex", alignItems: "center" }}>
-    <span style={{ marginRight: "1rem" }}>
-      <Icon decorative size={IconSizes.small} name="check" />
-    </span>
-    <span style={{ marginRight: "1rem" }}>
-      <Icon decorative size={IconSizes.medium} name="check" />
-    </span>
-    <span style={{ marginRight: "1rem" }}>
-      <Icon decorative size={IconSizes.large} name="check" />
-    </span>
-    <span style={{ marginRight: "1rem" }}>
-      <Icon decorative size={IconSizes.xlarge} name="check" />
-    </span>
-    <span style={{ marginRight: "1rem" }}>
-      <Icon decorative size={IconSizes.xxlarge} name="check" />
-    </span>
-    <span style={{ marginRight: "1rem" }}>
-      <Icon decorative size={IconSizes.xxxlarge} name="check" />
-    </span>
-  </div>
-</Preview>
-
-| 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` |
+<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>
+  </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` |
 
 ## 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>
-  <>
-    <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}
     />
-  </>
-</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` |
+  </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
 

package/src/components/StyleGuide/UIDocCard.tsx

@@ -21,7 +21,7 @@ export default function UIDocCard(
         style={{
           alignItems: "center",
           backgroundColor: backgroundColor,
-          borderBottom: "1px solid var(--ui-gray-light)",
+          borderBottom: "1px solid var(--ui-gray-light-cool)",
           color: "white",
           display: "flex",
           height: "100px",

package/src/components/Tabs/Tabs.tsx

@@ -10,7 +10,7 @@ import {
 } from "@chakra-ui/react";
 
 import generateUUID from "../../helpers/generateUUID";
-import { IconNames, IconRotationTypes } from "../Icons/IconTypes";
+import { IconNames, IconRotationTypes, IconSizes } from "../Icons/IconTypes";
 import Icon from "../Icons/Icon";
 import { ButtonTypes } from "../Button/ButtonTypes";
 import Button from "../Button/Button";
@@ -176,10 +176,9 @@ function Tabs(props: React.PropsWithChildren<TabsProps>) {
               }}
             >
               <Icon
-                name={IconNames.arrow}
-                decorative={true}
-                iconRotation={IconRotationTypes.rotate90}
-                modifiers={["small"]}
+                name={IconNames.Arrow}
+                iconRotation={IconRotationTypes.Rotate90}
+                size={IconSizes.Small}
               />
             </Button>
             <TabList>{tabs}</TabList>
@@ -191,10 +190,9 @@ function Tabs(props: React.PropsWithChildren<TabsProps>) {
               }}
             >
               <Icon
-                name={IconNames.arrow}
-                decorative={true}
-                iconRotation={IconRotationTypes.rotate270}
-                modifiers={["small"]}
+                name={IconNames.Arrow}
+                iconRotation={IconRotationTypes.Rotate270}
+                size={IconSizes.Small}
               />
             </Button>
           </Box>