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

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

@@ -0,0 +1,336 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  ArgsTable,
+  Description,
+} from "@storybook/addon-docs/blocks";
+import { withDesign } from "storybook-addon-designs";
+import { select } from "@storybook/addon-knobs";
+
+import { getCategory } from "../../utils/componentCategories";
+import cssVariables from "../../helpers/CSSVariablesHelper";
+import getCSSVariable from "../../helpers/getCSSVariable";
+import UIDocCard from "./UIDocCard";
+import Breadcrumbs from "../Breadcrumbs/Breadcrumbs";
+import List from "../List/List";
+import Heading from "../Heading/Heading";
+import { HeadingLevels } from "../Heading/HeadingTypes";
+import { ListTypes } from "../List/ListTypes";
+import sections from "../../utils/siteSections";
+import DSProvider from "../../theme/provider";
+
+<Meta title={getCategory("Colors")} decorators={[withDesign]} />
+
+# NYPL Colors
+
+export const sectionDefault = sections[3];
+
+<Canvas>
+  <Story
+    name="Colors-Brand"
+    parameters={{
+      design: {
+        type: "figma",
+        url:
+          "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=15454%3A47007",
+      },
+    }}
+    args={{
+      section: sectionDefault,
+    }}
+    argTypes={{
+      section: {
+        control: {
+          type: "select",
+        },
+        options: sections,
+      },
+    }}
+  >
+    {(args) => (
+      <>
+        <Heading level={HeadingLevels.One}>Brand</Heading>
+        <p>Brand fills are the NYPL primary and secondary colors.</p>
+        <List
+          type={ListTypes.Unordered}
+          modifiers={["no-list-styling"]}
+          className="card-grid__cards"
+        >
+          <li style={{ textAlign: "center" }}>
+            <UIDocCard backgroundColor={getCSSVariable("--brand-primary")}>
+              --brand-primary: {getCSSVariable("--brand-primary")}
+            </UIDocCard>
+          </li>
+          <li style={{ textAlign: "center" }}>
+            <UIDocCard backgroundColor={getCSSVariable("--brand-secondary")}>
+              --brand-secondary: {getCSSVariable("--brand-secondary")}
+            </UIDocCard>
+          </li>
+        </List>
+        <Heading level={HeadingLevels.One}>Section Colors</Heading>
+        <Heading level={HeadingLevels.Two}>What's On</Heading>
+        <p>
+          Section colors are branding colors only in use at NYPL. Certain
+          components, such as Breadcrumbs below, change color based on the
+          modifier applied the body tag.
+        </p>
+        <div
+          className={`${args.section} storybook-breadcrumbsExample`}
+          style={{ marginBottom: "2%", display: "flex", width: "100%" }}
+        >
+          <Breadcrumbs
+            breadcrumbs={[
+              { url: "#", text: "Parent" },
+              { url: "#", text: "Home" },
+            ]}
+          />
+          <div
+            style={{
+              flex: "1 1 50%",
+              backgroundColor: "var(--ui-gray-x-light-cool)",
+              padding: "2%",
+            }}
+          >
+            <pre>
+              <code>
+                {"<div className="}
+                {"'" + args.section + "'"}
+                {">\n"}
+                {"    <Breadcrumbs...></Breadcrumbs>"}
+                {"\n"}
+                {"</div>"}
+              </code>
+            </pre>
+          </div>
+        </div>
+        <p>What's On is used for Events, Exhibitions & Audio Guides.</p>
+        <List
+          type={ListTypes.Unordered}
+          modifiers={["no-list-styling"]}
+          className="card-grid__cards"
+        >
+          <li style={{ textAlign: "center" }}>
+            <UIDocCard
+              backgroundColor={getCSSVariable("--section-whats-on-primary")}
+            >
+              --section-whats-on-primary:{" "}
+              {getCSSVariable("--section-whats-on-primary")}
+            </UIDocCard>
+          </li>
+          <li style={{ textAlign: "center" }}>
+            <UIDocCard
+              backgroundColor={getCSSVariable("--section-whats-on-secondary")}
+            >
+              --section-whats-on-secondary:{" "}
+              {getCSSVariable("--section-whats-on-secondary")}
+            </UIDocCard>
+          </li>
+        </List>
+        <Heading level={HeadingLevels.Two}>Books and More</Heading>
+        <p>
+          Books and More is used for the Catalog, Staff Picks, Recommendations,
+          New Arrivals, and E-Book Central.
+        </p>
+        <List
+          type={ListTypes.Unordered}
+          modifiers={["no-list-styling"]}
+          className="card-grid__cards"
+        >
+          <li style={{ textAlign: "center" }}>
+            <UIDocCard
+              backgroundColor={getCSSVariable(
+                "--section-books-and-more-primary"
+              )}
+            >
+              --section-books-and-more-primary:{" "}
+              {getCSSVariable("--section-books-and-more-primary")}
+            </UIDocCard>
+          </li>
+          <li style={{ textAlign: "center" }}>
+            <UIDocCard
+              backgroundColor={getCSSVariable(
+                "--section-books-and-more-secondary"
+              )}
+            >
+              --section-books-and-more-secondary:{" "}
+              {getCSSVariable("--section-books-and-more-secondary")}
+            </UIDocCard>
+          </li>
+        </List>
+        <Heading level={HeadingLevels.Two}>Research</Heading>
+        <p>Research is used for the Research Catalog and SCC.</p>
+        <List
+          type={ListTypes.Unordered}
+          modifiers={["no-list-styling"]}
+          className="card-grid__cards"
+        >
+          <li style={{ textAlign: "center" }}>
+            <UIDocCard
+              backgroundColor={getCSSVariable("--section-research-primary")}
+            >
+              --section-research-primary:{" "}
+              {getCSSVariable("--section-research-primary")}
+            </UIDocCard>
+          </li>
+          <li style={{ textAlign: "center" }}>
+            <UIDocCard
+              backgroundColor={getCSSVariable("--section-research-secondary")}
+            >
+              --section-research-secondary:{" "}
+              {getCSSVariable("--section-research-secondary")}
+            </UIDocCard>
+          </li>
+        </List>
+        <Heading level={HeadingLevels.Two}>Locations</Heading>
+        <p>
+          Locations is used for Location Finder and all branch pages with the
+          exceptions of some research libraries.
+        </p>
+        <List
+          type={ListTypes.Unordered}
+          modifiers={["no-list-styling"]}
+          className="card-grid__cards"
+        >
+          <li style={{ textAlign: "center" }}>
+            <UIDocCard
+              backgroundColor={getCSSVariable("--section-locations-primary")}
+            >
+              --section-locations-primary:{" "}
+              {getCSSVariable("--section-locations-primary")}
+            </UIDocCard>
+          </li>
+          <li style={{ textAlign: "center" }}>
+            <UIDocCard
+              backgroundColor={getCSSVariable("--section-locations-secondary")}
+            >
+              --section-locations-secondary:{" "}
+              {getCSSVariable("--section-locations-secondary")}
+            </UIDocCard>
+          </li>
+        </List>
+        <Heading level={HeadingLevels.Two}>Blogs</Heading>
+        <p>Blogs is used for the Blogs section.</p>
+        <List
+          type={ListTypes.Unordered}
+          modifiers={["no-list-styling"]}
+          className="card-grid__cards"
+        >
+          <li style={{ textAlign: "center" }}>
+            <UIDocCard
+              backgroundColor={getCSSVariable("--section-blogs-primary")}
+            >
+              --section-blogs-primary:{" "}
+              {getCSSVariable("--section-blogs-primary")}
+            </UIDocCard>
+          </li>
+          <li style={{ textAlign: "center" }}>
+            <UIDocCard
+              backgroundColor={getCSSVariable("--section-blogs-secondary")}
+            >
+              --section-blogs-secondary:{" "}
+              {getCSSVariable("--section-blogs-secondary")}
+            </UIDocCard>
+          </li>
+        </List>
+        <Heading level={HeadingLevels.Two}>Research Libraries</Heading>
+        <p>Research libraries with specific brand colors to adhere to.</p>
+        <List
+          type={ListTypes.Unordered}
+          modifiers={["no-list-styling"]}
+          className="card-grid__cards"
+        >
+          <li style={{ textAlign: "center" }}>
+            <UIDocCard
+              backgroundColor={getCSSVariable("--section-research-library-lpa")}
+            >
+              --section-research-library-lpa:{" "}
+              {getCSSVariable("--section-research-library-lpa")}
+            </UIDocCard>
+          </li>
+          <li style={{ textAlign: "center" }}>
+            <UIDocCard
+              backgroundColor={getCSSVariable(
+                "--section-research-library-schomburg"
+              )}
+            >
+              --section-research-library-schomburg:{" "}
+              {getCSSVariable("--section-research-library-schomburg")}
+            </UIDocCard>
+          </li>
+          <li style={{ textAlign: "center" }}>
+            <UIDocCard
+              backgroundColor={getCSSVariable(
+                "--section-research-library-schwartzman"
+              )}
+            >
+              --section-research-library-schwartzman:{" "}
+              {getCSSVariable("--section-research-library-schwartzman")}
+            </UIDocCard>
+          </li>
+        </List>
+      </>
+    )}
+  </Story>
+</Canvas>
+
+# Utility Colors
+
+export const uiVariables = {};
+export const grayScaleVariables = {};
+for (const [key, value] of Object.entries(cssVariables)) {
+  if (key.startsWith(" --ui-gray")) {
+    grayScaleVariables[key] = value;
+  } else if (key.startsWith(" --ui")) {
+    uiVariables[key] = value;
+  }
+}
+export const uiVariableDocs = [];
+export const grayscaleDocs = [];
+export const makeUIDocCard = function (key, value, docArray) {
+  docArray.push(
+    <li style={{ textAlign: "center" }}>
+      <UIDocCard backgroundColor={value}>
+        {key}: {value}
+      </UIDocCard>
+    </li>
+  );
+};
+for (const [key, value] of Object.entries(uiVariables)) {
+  makeUIDocCard(key, value, uiVariableDocs);
+}
+for (const [key, value] of Object.entries(grayScaleVariables)) {
+  makeUIDocCard(key, value, grayscaleDocs);
+}
+
+<Canvas>
+  <Story
+    name="Colors-Utility"
+    parameters={{
+      design: {
+        type: "figma",
+        url:
+          "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=14989%3A37",
+      },
+    }}
+  >
+    <>
+      <Heading level={HeadingLevels.One}>Utility Colors</Heading>
+      <List
+        type={ListTypes.Unordered}
+        modifiers={["no-list-styling"]}
+        className="card-grid__cards"
+      >
+        {uiVariableDocs}
+      </List>
+      <Heading level={HeadingLevels.One}>Grayscale</Heading>
+      <List
+        type={ListTypes.Unordered}
+        modifiers={["no-list-styling"]}
+        className="card-grid__cards"
+      >
+        {grayscaleDocs}
+      </List>
+    </>
+  </Story>
+</Canvas>

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

@@ -0,0 +1,85 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  ArgsTable,
+  Preview,
+  Description,
+} from "@storybook/addon-docs/blocks";
+import { withDesign } from "storybook-addon-designs";
+
+import { getCategory } from "../../utils/componentCategories";
+import getCSSVariable from "../../helpers/getCSSVariable";
+import Card from "../Card/Card";
+import List from "../List/List";
+import { ListTypes } from "../List/ListTypes";
+
+<Meta title={getCategory("Forms")} />
+
+# Forms
+
+Use the NYPL Design System [Form](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/form-elements-form--form) component to control the placement and spacing for standard HTML forms.
+
+## Style Guide Topics
+
+- [Form Layout](#form-layout)
+- [Form Input Components](#form-input-components)
+- [Input Labelling](#input-labelling)
+- [Input States](#input-states)
+- [Figma Reference](#figma-reference)
+
+## Form Layout
+
+The `Form` component offers two child-components to assist with layout: `FormRow` and `FormField`.
+
+The `FormField` component is used as a parent for all input components from the NYPL Design System (`Button`, `Select`, `TextInput`, etc.). When using the `Form` is it is necessary to wrap each individual form input component within a `FormField` component to ensure proper spacing and responsiveness.
+
+The `FormRow` component is used as a parent of multiple `FormField` components when you need to render more than one input component in a horizontal row.
+
+The recommended layout and spacing within individual form input components is built into the components. Consuming apps should rely on the components to handle NYPL best practices for layout and responsiveness.
+
+## Form Input Components
+
+The list of form input fields available in the DS includes, but is not limited to, the following:
+
+- Button
+- Checkbox
+- CheckboxGroup
+- DatePicker
+- Dropdown \*\*\*
+- FileUploader \*\*\*
+- Label
+- Radio
+- RadioGroup
+- SearchBar
+- Select
+- Slider \*\*\*
+- TextInput (text, tel, url, number, password, textarea)
+- Toggle \*\*\*
+
+\*\*\* currently under development
+
+## Input Labelling
+
+Most form components in the NYPL Design System will have the option to show a label, basic helper text and error text.
+
+For accessibility compliance, a text value for the label is always required. If necessary, the label can be hidden from the screen. In cases where the label is hidden, appropriate ARIA tags will be added to the form input component.
+
+When the label is visible, `CheckboxGroup`, `DatePicker`, `FileUploader`, `RadioGroup`, `Select`, `Slider` and `TextInput` will show the label at the top of the rendered component. While `Checkbox`, `Radio` and `Toggle` will show the label to the right of the input field.
+
+The helper and error text will always be rendered below the input field.
+
+## Input States
+
+All form input fields offer styling for the following states:
+
+- static
+- focused
+- errored
+- disabled
+
+## Figma Reference
+
+For additional spacing information, please refer to the Figma Main file.
+
+- [General Forms Page](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/?node-id=10734%3A2768)