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

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

@@ -10,7 +10,7 @@ import { withDesign } from "storybook-addon-designs";
 
 import { getCategory } from "../../utils/componentCategories";
 import Heading from "../Heading/Heading";
-import { HeadingDisplaySizes } from "../Heading/HeadingDisplaySizes";
+import { HeadingDisplaySizes, HeadingLevels } from "../Heading/HeadingTypes";
 import List from "../List/List";
 
 <Meta
@@ -31,6 +31,16 @@ Consuming applications should utilize the DS standard text components as much as
 
 The sizing of all text elements in the Design System is based on `1rem` being equal to `16px`.
 
+## Style Guide Topics
+
+- [Standard Text Component](#standard-text-components)
+- [Font Family](#font-family)
+- [Font Color](#font-color)
+- [Font Weight](#font-weight)
+- [Font Sizes](#font-sizes)
+- [Text Case](#text-case)
+- [Character Count](#character-count)
+
 ## Standard Text Components
 
 ### Headings
@@ -38,19 +48,19 @@ The sizing of all text elements in the Design System is based on `1rem` being eq
 Use the NYPL Design System [Heading](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/heading--basic) component to render a standard HTML `<h>` tag. The `level` prop can be used to set the specific `<h>` tag that you require.
 
 <Preview>
-  <Story name="Standard Text Components">
-    <Heading level={1}>Heading Level 1</Heading>
-    <Heading level={2}>Heading Level 2</Heading>
-    <Heading level={3}>Heading Level 3</Heading>
-    <Heading level={4}>Heading Level 4</Heading>
-  </Story>
+  <>
+    <Heading level={HeadingLevels.One}>Heading Level 1</Heading>
+    <Heading level={HeadingLevels.Two}>Heading Level 2</Heading>
+    <Heading level={HeadingLevels.Three}>Heading Level 3</Heading>
+    <Heading level={HeadingLevels.Four}>Heading Level 4</Heading>
+  </>
 </Preview>
 
 #### Heading Display Sizes
 
 Each heading level has a default style and size, but those styles can be overridden using the `displaySize` prop. The display sizes are separate from semantic elements and may be used to override the default size and styling of the semantic HTML heading elements. For example, the `h1` element has the `Primary` style applied by default, but a new style can be applied through the `displaySize` prop. Any `displaySize` style can be applied to any `Heading` element.
 
-<Heading level={1} displaySize={HeadingDisplaySizes.Primary}>
+<Heading level={HeadingLevels.One} displaySize={HeadingDisplaySizes.Primary}>
   Primary Heading
 </Heading>
 
@@ -60,7 +70,7 @@ Each heading level has a default style and size, but those styles can be overrid
 | `font-weight` | `300`     | `--font-weight-light` |
 | `line-height` | `1.1`     | n/a                   |
 
-<Heading level={1} displaySize={HeadingDisplaySizes.Secondary}>
+<Heading level={HeadingLevels.One} displaySize={HeadingDisplaySizes.Secondary}>
   Secondary Heading
 </Heading>
 
@@ -70,7 +80,7 @@ Each heading level has a default style and size, but those styles can be overrid
 | `font-weight` | `500`     | `--font-weight-medium` |
 | `line-height` | `1.25`    | n/a                    |
 
-<Heading level={1} displaySize={HeadingDisplaySizes.Tertiary}>
+<Heading level={HeadingLevels.One} displaySize={HeadingDisplaySizes.Tertiary}>
   Tertiary Heading
 </Heading>
 
@@ -80,7 +90,7 @@ Each heading level has a default style and size, but those styles can be overrid
 | `font-weight` | `500`      | `--font-weight-medium` |
 | `line-height` | `1.25`     | n/a                    |
 
-<Heading level={1} displaySize={HeadingDisplaySizes.Callout}>
+<Heading level={HeadingLevels.One} displaySize={HeadingDisplaySizes.Callout}>
   Callout Heading
 </Heading>
 
@@ -158,17 +168,15 @@ The `displaySize` prop can be used to render a specific style from the DS defaul
 With website accessibility in mind, font choices for the DS were made with an eye toward clarity and readability. Headings and body content use the following font family assignment:
 
 <Preview>
-  <Story name="Font Family">
-    <p
-      style={{
-        fontSize: "var(--font-size--0)",
-        fontWeight: "var(--font-weight-light)",
-        fontFamily: "var(--typeface-body)",
-      }}
-    >
-      system-ui, sans-serif
-    </p>
-  </Story>
+  <p
+    style={{
+      fontSize: "var(--font-size--0)",
+      fontWeight: "var(--font-weight-light)",
+      fontFamily: "var(--typeface-body)",
+    }}
+  >
+    system-ui, sans-serif
+  </p>
 </Preview>
 
 The following CSS variables are available through the DS.
@@ -181,23 +189,21 @@ The following CSS variables are available through the DS.
 > **RECOMMENDATIONS**  
 > When making font selections for project based components outside the DS, sans serif fonts display better on computers and mobile devices. Avoid decorative or overly stylized fonts, as they are often difficult to read even for users without visual impairments or reading Standard Text Default
 
-## Font Colors
+## Font Color
 
 All text within a project, unless specifically noted in mockups, should be black on a white background.
 
 <Preview>
-  <Story name="Font Colors">
-    <>
-      <Heading level={3}>Default Heading Color</Heading>
-      <p>
-        This paragraph shows the default body text color. Curabitur blandit
-        tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl
-        consectetur et. Integer posuere erat a ante venenatis dapibus posuere
-        velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor
-        ligula, eget lacinia odio sem nec elit.
-      </p>
-    </>
-  </Story>
+  <>
+    <Heading level={HeadingLevels.Three}>Default Heading Color</Heading>
+    <p>
+      This paragraph shows the default body text color. Curabitur blandit tempus
+      porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur
+      et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
+      Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget
+      lacinia odio sem nec elit.
+    </p>
+  </>
 </Preview>
 
 In cases where specific colors must be applied to text elements, the DS provides CSS variables for the full NYPL color palette. Refer to the [Colors](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/style-guide-colors--colors-brand) section of the Style Guide for details.
@@ -207,46 +213,44 @@ In cases where specific colors must be applied to text elements, the DS provides
 The DS uses four font weights to render text. The default font-weight is 300.
 
 <Preview>
-  <Story name="Font Weight">
-    <>
-      <p
-        style={{
-          fontSize: "1rem",
-          fontWeight: "var(--font-weight-light)",
-          fontFamily: "system-ui, sans-serif",
-        }}
-      >
-        Light / 300
-      </p>
-      <p
-        style={{
-          fontSize: "1rem",
-          fontWeight: "var(--font-weight-regular)",
-          fontFamily: "system-ui, sans-serif",
-        }}
-      >
-        Regular / 400
-      </p>
-      <p
-        style={{
-          fontSize: "1rem",
-          fontWeight: "var(--font-weight-medium)",
-          fontFamily: "system-ui, sans-serif",
-        }}
-      >
-        Medium / 500
-      </p>
-      <p
-        style={{
-          fontSize: "1rem",
-          fontWeight: "var(--font-weight-bold)",
-          fontFamily: "system-ui, sans-serif",
-        }}
-      >
-        Bold / 700
-      </p>
-    </>
-  </Story>
+  <>
+    <p
+      style={{
+        fontSize: "1rem",
+        fontWeight: "var(--font-weight-light)",
+        fontFamily: "system-ui, sans-serif",
+      }}
+    >
+      Light / 300
+    </p>
+    <p
+      style={{
+        fontSize: "1rem",
+        fontWeight: "var(--font-weight-regular)",
+        fontFamily: "system-ui, sans-serif",
+      }}
+    >
+      Regular / 400
+    </p>
+    <p
+      style={{
+        fontSize: "1rem",
+        fontWeight: "var(--font-weight-medium)",
+        fontFamily: "system-ui, sans-serif",
+      }}
+    >
+      Medium / 500
+    </p>
+    <p
+      style={{
+        fontSize: "1rem",
+        fontWeight: "var(--font-weight-bold)",
+        fontFamily: "system-ui, sans-serif",
+      }}
+    >
+      Bold / 700
+    </p>
+  </>
 </Preview>
 
 The following CSS variables are available through the DS.
@@ -258,87 +262,85 @@ The following CSS variables are available through the DS.
 --font-weight-bold: 700;
 ```
 
-## Font Sizing
+## Font Sizes
 
 Font sizing is based on a root font size of 16px (1rem = 16px).
 
 <Preview>
-  <Story name="Font Sizing">
-    <>
-      <p
-        style={{
-          fontSize: "var(--font-size--3)",
-          fontWeight: "var(--font-weight-light)",
-          fontFamily: "var(--typeface-body)",
-        }}
-      >
-        Font size -3
-      </p>
-      <p
-        style={{
-          fontSize: "var(--font-size--2)",
-          fontWeight: "var(--font-weight-light)",
-          fontFamily: "var(--typeface-body)",
-        }}
-      >
-        Font size -2
-      </p>
-      <p
-        style={{
-          fontSize: "var(--font-size--1)",
-          fontWeight: "var(--font-weight-light)",
-          fontFamily: "var(--typeface-body)",
-        }}
-      >
-        Font size -1
-      </p>
-      <p
-        style={{
-          fontSize: "var(--font-size--0)",
-          fontWeight: "var(--font-weight-light)",
-          fontFamily: "var(--typeface-body)",
-        }}
-      >
-        Font size 0
-      </p>
-      <p
-        style={{
-          fontSize: "var(--font-size-1)",
-          fontWeight: "var(--font-weight-light)",
-          fontFamily: "var(--typeface-body)",
-        }}
-      >
-        Font size 1
-      </p>
-      <p
-        style={{
-          fontSize: "var(--font-size-2)",
-          fontWeight: "var(--font-weight-light)",
-          fontFamily: "var(--typeface-body)",
-        }}
-      >
-        Font size 2
-      </p>
-      <p
-        style={{
-          fontSize: "var(--font-size-3)",
-          fontWeight: "var(--font-weight-light)",
-          fontFamily: "var(--typeface-body)",
-        }}
-      >
-        Font size 3
-      </p>
-      <p
-        style={{
-          fontSize: "var(--font-size-4)",
-          fontWeight: "var(--font-weight-light)",
-          fontFamily: "var(--typeface-body)",
-        }}
-      >
-        Font size 4
-      </p>
-    </>
-  </Story>
+  <>
+    <p
+      style={{
+        fontSize: "var(--font-size--3)",
+        fontWeight: "var(--font-weight-light)",
+        fontFamily: "var(--typeface-body)",
+      }}
+    >
+      Font size -3
+    </p>
+    <p
+      style={{
+        fontSize: "var(--font-size--2)",
+        fontWeight: "var(--font-weight-light)",
+        fontFamily: "var(--typeface-body)",
+      }}
+    >
+      Font size -2
+    </p>
+    <p
+      style={{
+        fontSize: "var(--font-size--1)",
+        fontWeight: "var(--font-weight-light)",
+        fontFamily: "var(--typeface-body)",
+      }}
+    >
+      Font size -1
+    </p>
+    <p
+      style={{
+        fontSize: "var(--font-size--0)",
+        fontWeight: "var(--font-weight-light)",
+        fontFamily: "var(--typeface-body)",
+      }}
+    >
+      Font size 0
+    </p>
+    <p
+      style={{
+        fontSize: "var(--font-size-1)",
+        fontWeight: "var(--font-weight-light)",
+        fontFamily: "var(--typeface-body)",
+      }}
+    >
+      Font size 1
+    </p>
+    <p
+      style={{
+        fontSize: "var(--font-size-2)",
+        fontWeight: "var(--font-weight-light)",
+        fontFamily: "var(--typeface-body)",
+      }}
+    >
+      Font size 2
+    </p>
+    <p
+      style={{
+        fontSize: "var(--font-size-3)",
+        fontWeight: "var(--font-weight-light)",
+        fontFamily: "var(--typeface-body)",
+      }}
+    >
+      Font size 3
+    </p>
+    <p
+      style={{
+        fontSize: "var(--font-size-4)",
+        fontWeight: "var(--font-weight-light)",
+        fontFamily: "var(--typeface-body)",
+      }}
+    >
+      Font size 4
+    </p>
+  </>
 </Preview>
 
 The following CSS variables are available through the DS.
@@ -359,15 +361,13 @@ The following CSS variables are available through the DS.
 In general, the New York Public Library uses Title Case for titles. This means only using capital letters for the principal words. Articles, conjunctions, and prepositions do not get capital letters unless they start the title. For example:
 
 <Preview>
-  <Story name="Text Case">
-    <ul>
-      <li>Snow White and the Seven Dwarfs</li>
-      <li>The Last of the Mohicans</li>
-      <li>Spooky Books for Kids: The Ultimate Creepy Guide</li>
-      <li>The Future Teen Stars of America Live on TikTok</li>
-      <li>How Jacqueline Woodson Captures Every Side of Brooklyn</li>
-    </ul>
-  </Story>
+  <ul>
+    <li>Snow White and the Seven Dwarfs</li>
+    <li>The Last of the Mohicans</li>
+    <li>Spooky Books for Kids: The Ultimate Creepy Guide</li>
+    <li>The Future Teen Stars of America Live on TikTok</li>
+    <li>How Jacqueline Woodson Captures Every Side of Brooklyn</li>
+  </ul>
 </Preview>
 
 ## Character Count
@@ -377,11 +377,9 @@ In general, the New York Public Library uses Title Case for titles. This means o
 80 characters max, 60 characters recommended
 
 <Preview>
-  <Story name="Character Count">
-    <Heading level={4}>
-      This is a Long Title to Show What 58 Characters Looks Like
-    </Heading>
-  </Story>
+  <Heading level={HeadingLevels.Four}>
+    This is a Long Title to Show What 58 Characters Looks Like
+  </Heading>
 </Preview>
 
 ### Summaries

package/src/components/StyleGuide/UIDocCard.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import Card from "../Card/Card";
+import CardEdition from "../CardEdition/CardEdition";
 
 interface UIDocCardProps {
   /** backgroundColor of the doc card */
@@ -16,12 +16,12 @@ export default function UIDocCard(
   const { backgroundColor, children } = props;
 
   return (
-    <Card className="var-docs">
+    <CardEdition className="var-docs">
       <div
         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",
@@ -31,6 +31,6 @@ export default function UIDocCard(
         }}
       ></div>
       {children}
-    </Card>
+    </CardEdition>
   );
 }

package/src/components/Tabs/Tabs.stories.mdx

@@ -0,0 +1,221 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  ArgsTable,
+  Description,
+} from "@storybook/addon-docs/blocks";
+import { withDesign } from "storybook-addon-designs";
+
+import { Tabs, TabList, Tab, TabPanels, TabPanel } from "./Tabs";
+import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
+
+<Meta
+  title={getCategory("Tabs")}
+  component={Tabs}
+  decorators={[withDesign]}
+  parameters={{
+    design: {
+      type: "figma",
+      url:
+        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=36835%3A26464",
+    },
+    jest: ["Tabs.test.tsx"],
+  }}
+  argTypes={{
+    children: { table: { disable: true } },
+    id: { table: { disable: true } },
+    className: { table: { disable: true } },
+    data: { table: { disable: true } },
+    onChange: { table: { disable: true } },
+  }}
+/>
+
+# Tabs
+
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.24.0`   |
+| Latest            | `0.25.0`   |
+
+<Description of={Tabs} />
+
+export const animalCrossing = [
+  {
+    label: "Tom Nook",
+    content: (
+      <p>
+        Tom Nook, <b>known in Japan as Tanukichi</b>, is a fictional character
+        in the Animal Crossing series who operates the village store.
+      </p>
+    ),
+  },
+  {
+    label: "Isabelle",
+    content:
+      "Isabelle, known as Shizue in Japan, is a fictional character " +
+      "from the Animal Crossing series of video games. She is a kindly Shih " +
+      "Tzu that debuted in the 2012 release Animal Crossing: New Leaf, where " +
+      "she serves as the secretary to the player character.",
+  },
+  {
+    label: "K.K. Slider",
+    content:
+      "<p>Totakeke, more commonly known as <b>K.K. Slider or K.K.</b>, is a " +
+      "fictional character within the Animal Crossing franchise. One of the " +
+      "franchise's most popular characters, he debuted in the title Animal " +
+      "Crossing, and has appeared in every installment since.</p>",
+  },
+  {
+    label: "Mr. Resetti",
+    content:
+      "<strong>Mr. Resetti</strong>, full name Sonny Resetti, is a fictional character from the Animal Crossing series of video games by Nintendo. His first appearance was in the Nintendo 64 game Dōbutsu no Mori, released in Europe and North America on the GameCube as Animal Crossing.",
+  },
+  {
+    label: "Zucker",
+    content:
+      "<strong>Zucker</strong> is a lazy octopus villager who first appeared in New Leaf. His Japanese name and general appearance refers to the Japanese snack takoyaki, which is a fried ball of dough commonly filled with minced octopus. His catchphrase is a reference to how he is an underwater animal. He has the same initial phrase as Bertha. He has the nature hobby.",
+  },
+];
+
+<Canvas withToolbar>
+  <Story
+    name="Basic with props"
+    args={{
+      defaultIndex: 0,
+      useHash: false,
+      contentData: animalCrossing,
+    }}
+  >
+    {(args) => <Tabs {...args} />}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Basic with props" />
+
+## Composing with a Data Object
+
+_Note: this is the recommended approach._
+
+We recommended passing in the data for the `Tabs` component through the `data`
+prop. This allows the consumer to pass in well-formed data and always generate
+the correct DOM. Internally in the DS `Tabs` component, we map through the data
+array and generate the appropriate components needed for the layout.
+
+Note that HTML is allowed in the `content` property in each object as part of the
+string or as straight HTML.
+
+```jsx
+import { Tabs } from "@nypl/design-system-react-components";
+
+const animalCrossing = [
+  {
+    label: "Tom Nook",
+    content: <p>Tom Nook, <b>known in Japan as Tanukichi</b>, is a ...,
+  {
+    label: "Isabelle",
+    content: "Isabelle, known as Shizue in Japan, is a fictional ...",
+  },
+  {
+    label: "K.K. Slider",
+    content:
+      "<p>Totakeke, more commonly known as <b>K.K. Slider or K.K.</b>, is ...",
+  },
+];
+
+// ...
+<Tabs contentData={animalCrossing} />;
+```
+
+## With Callback Event Function
+
+If you need to keep track of the index of current tab that was selected, pass
+an `onChange` event handler to the `onChange` prop. This will return the index
+(0-based) of the tab selected.
+
+```jsx
+export const onChange = (value) => {
+  window.alert(`Tab index selected was ${value}`);
+};
+
+// ...
+<Tabs contentData={animalCrossing} onChange={onChange} />;
+```
+
+export const onChange = (value) => {
+  window.alert(`Tab index selected was ${value}`);
+};
+
+<Canvas>
+  <Story name="With Callback Event Function">
+    <Tabs contentData={animalCrossing} onChange={onChange} />
+  </Story>
+</Canvas>
+
+## With URL Hash Option
+
+In some situations, each selected tab should update the URL with a hash value.
+To enable this, set the `useHash` prop to true.
+
+<Canvas>
+  <Story name="With URL Hash Option">
+    <Tabs contentData={animalCrossing} useHash={true} />
+  </Story>
+</Canvas>
+
+## With Children Components
+
+_Note: not recommended but available._
+
+There are five components that make up the Design System `Tabs` component:
+`Tabs`, `TabList`, `Tab`, `TabPanels`, `TabPanel`. The general layout is always
+the same such that the `Tabs` component has `TabList` and `TabPanels` as children.
+
+`TabList` only takes `Tab` components as children and `TabPanels` only take
+`TabPanel` as children. While you can compose the DS `Tabs` components with these
+available components, you will probably have to iterate or map through an array
+to get the desired outcome. The DS `Tabs` component does this internally for
+you so this should be a last resort option.
+
+Make sure all five components are imported to use this approach.
+
+```jsx
+import {
+  Tabs,
+  TabList,
+  Tab,
+  TabPanels,
+  TabPanel,
+} from "@nypl/design-system-react-components";
+```
+
+<Canvas>
+  <Story name="With Children Components">
+    <Tabs>
+      <TabList>
+        <Tab>Tom Nook</Tab>
+        <Tab>Isabelle</Tab>
+        <Tab>K.K. Slider</Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>
+          Tom Nook, known in Japan as Tanukichi, is a fictional character in the
+          Animal Crossing series who operates the village store.
+        </TabPanel>
+        <TabPanel>
+          Isabelle, known as Shizue in Japan, is a fictional character from the
+          Animal Crossing series of video games. She is a kindly Shih Tzu that
+          debuted in the 2012 release Animal Crossing: New Leaf, where she
+          serves as the secretary to the player character.
+        </TabPanel>
+        <TabPanel>
+          Totakeke, more commonly known as K.K. Slider or K.K., is a fictional
+          character within the Animal Crossing franchise. One of the franchise's
+          most popular characters, he debuted in the title Animal Crossing, and
+          has appeared in every installment since.
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  </Story>
+</Canvas>