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

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

@@ -6,331 +6,191 @@ import {
   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 ColorCard from "./ColorCard";
+import DSProvider from "../../theme/provider";
 import getCSSVariable from "../../helpers/getCSSVariable";
-import UIDocCard from "./UIDocCard";
-import Breadcrumbs from "../Breadcrumbs/Breadcrumbs";
-import List from "../List/List";
+import { getCategory } from "../../utils/componentCategories";
 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";
+import SimpleGrid from "../Grid/SimpleGrid";
+
+export const cssVars = {
+  brand: ["--nypl-colors-brand-primary", "--nypl-colors-brand-secondary"],
+  whatsOn: [
+    "--nypl-colors-section-whats-on-primary",
+    "--nypl-colors-section-whats-on-secondary",
+  ],
+  booksAndMore: [
+    "--nypl-colors-section-books-and-more-primary",
+    "--nypl-colors-section-books-and-more-secondary",
+  ],
+  research: [
+    "--nypl-colors-section-research-primary",
+    "--nypl-colors-section-research-secondary",
+  ],
+  locations: [
+    "--nypl-colors-section-locations-primary",
+    "--nypl-colors-section-locations-secondary",
+  ],
+  blogs: [
+    "--nypl-colors-section-blogs-primary",
+    "--nypl-colors-section-blogs-secondary",
+  ],
+  researchLibraries: [
+    "--nypl-colors-section-research-library-lpa",
+    "--nypl-colors-section-research-library-schomburg",
+    "--nypl-colors-section-research-library-schwartzman",
+  ],
+  ui: [
+    "--nypl-colors-ui-black",
+    "--nypl-colors-ui-white",
+    "--nypl-colors-ui-disabled-primary",
+    "--nypl-colors-ui-disabled-secondary",
+    "--nypl-colors-ui-error-primary",
+    "--nypl-colors-ui-error-secondary",
+    "--nypl-colors-ui-focus",
+    "--nypl-colors-ui-link-primary",
+    "--nypl-colors-ui-link-secondary",
+    "--nypl-colors-ui-status-primary",
+    "--nypl-colors-ui-status-secondary",
+    "--nypl-colors-ui-success-primary",
+    "--nypl-colors-ui-success-secondary",
+    "--nypl-colors-ui-test",
+    "--nypl-colors-ui-warning-primary",
+    "--nypl-colors-ui-warning-secondary",
+  ],
+  grayscale: [
+    "--nypl-colors-ui-gray-xdark",
+    "--nypl-colors-ui-gray-dark",
+    "--nypl-colors-ui-gray-medium",
+    "--nypl-colors-ui-gray-light-cool",
+    "--nypl-colors-ui-gray-light-warm",
+    "--nypl-colors-ui-gray-x-light-cool",
+    "--nypl-colors-ui-gray-x-light-warm",
+    "--nypl-colors-ui-gray-xx-light-cool",
+  ],
+};
+
+export const makeColorCard = function (key) {
+  // const cssValue = getCSSVariable(key);
+  const cssValue = `var(${key})`;
+  const card = (
+    <ColorCard backgroundColor={cssValue} colorName={key} key={key} />
+  );
+  return card;
+};
+
+export const getColorCards = (cat) => {
+  const cards = [];
+  const catArr = cssVars[cat];
+  for (let i = 0; i < catArr.length; i++) {
+    const varName = catArr[i];
+    const card = makeColorCard(varName);
+    cards.push(card);
+  }
+  return cards;
+};
 
 <Meta title={getCategory("Colors")} decorators={[withDesign]} />
 
 # NYPL Colors
 
-export const sectionDefault = sections[3];
+| Table of Contents                        |
+| ---------------------------------------- |
+| 1. [Brand Colors](#brand-colors)         |
+| 2. [Section Colors](#section-colors)     |
+| 3. [Utility Colors](#utility-colors)     |
+| 3. [Grayscale Colors](#grayscale-colors) |
+| 4. [Figma Reference](#figma-reference)   |
+
+## Brand Colors
+
+Brand fills are the NYPL primary and secondary colors.
 
 <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>
+  <DSProvider>
+    <SimpleGrid columns={1}>{getColorCards("brand")}</SimpleGrid>
+  </DSProvider>
 </Canvas>
 
-# Utility Colors
+## Section 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);
-}
+Section colors are branding colors only in use at NYPL.
 
 <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>
+  <DSProvider>
+    <Heading level={HeadingLevels.Two}>What's On</Heading>
+    <p>What's On is used for Events, Exhibitions &amp; Audio Guides.</p>
+    <SimpleGrid columns={1}>{getColorCards("whatsOn")}</SimpleGrid>
+  </DSProvider>
 </Canvas>
+
+<Canvas>
+  <DSProvider>
+    <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>
+    <SimpleGrid columns={1}>{getColorCards("booksAndMore")}</SimpleGrid>
+  </DSProvider>
+</Canvas>
+
+<Canvas>
+  <DSProvider>
+    <Heading level={HeadingLevels.Two}>Research</Heading>
+    <p>Research is used for the Research Catalog and SCC.</p>
+    <SimpleGrid columns={1}>{getColorCards("research")}</SimpleGrid>
+  </DSProvider>
+</Canvas>
+
+<Canvas>
+  <DSProvider>
+    <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>
+    <SimpleGrid columns={1}>{getColorCards("locations")}</SimpleGrid>
+  </DSProvider>
+</Canvas>
+
+<Canvas>
+  <DSProvider>
+    <Heading level={HeadingLevels.Two}>Blogs</Heading>
+    <p>Blogs is used for the Blogs section.</p>
+    <SimpleGrid columns={1}>{getColorCards("blogs")}</SimpleGrid>
+  </DSProvider>
+</Canvas>
+
+<Canvas>
+  <DSProvider>
+    <Heading level={HeadingLevels.Two}>Research Libraries</Heading>
+    <p>Research libraries with specific brand colors to adhere to.</p>
+    <SimpleGrid columns={1}>{getColorCards("researchLibraries")}</SimpleGrid>
+  </DSProvider>
+</Canvas>
+
+## Utility Colors
+
+<Canvas>
+  <DSProvider>
+    <SimpleGrid columns={1}>{getColorCards("ui")}</SimpleGrid>
+  </DSProvider>
+</Canvas>
+
+## Grayscale Colors
+
+<Canvas>
+  <DSProvider>
+    <SimpleGrid columns={1}>{getColorCards("grayscale")}</SimpleGrid>
+  </DSProvider>
+</Canvas>
+
+## Figma Reference
+
+For additional spacing information, please refer to the Figma Main file.
+
+- [NYPL Brand Colors](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=15454%3A47007)
+- [NYPL UI Colors](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=14989%3A37)

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

@@ -0,0 +1,170 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  ArgsTable,
+  Description,
+} from "@storybook/addon-docs/blocks";
+import { withDesign } from "storybook-addon-designs";
+import { getCategory } from "../../utils/componentCategories";
+
+<Meta title={getCategory("Design Tokens")} />
+
+# Design Tokens
+
+| Table of Contents                                                                    |
+| ------------------------------------------------------------------------------------ |
+| 1. [What are Design Tokens?](#what-are-design-tokens)                                |
+| 2. [Why Use Design Tokens?](#why-use-design-tokens)                                  |
+| 3. [How to Use the NYPL Design Tokens](#figma-reference)                             |
+| 4. [Using NYPL Design Tokens in CSS](#using-nypl-design-tokens-in-css)               |
+| 5. [Using NYPL Design Tokens in Javascript](#using-nypl-design-tokens-in-javascript) |
+| 6. [NYPL Design Token Categories](#nypl-design-token-categories)                     |
+
+## What are Design Tokens?
+
+Design tokens are the style values that define a design system. These values can include, but may not be limited to, spacing, color, typography, breakpoints and object styles. Ultimately, these values are used to construct and maintain the components that make up our system.
+
+## Why Use Design Tokens?
+
+_"With design tokens, you can capture low-level values and then use them to create the styles for your product or app. You can maintain a scalable and consistent visual system for UI development."_ – Jina Bolton, Lead Designer for the Salesforce Design System
+
+Design tokens are a single source of truth when it comes to styles. They allow an organization to more easily build multiple applications – web and/or native – that feel and look the same without slowing down the development team.
+
+## How to Use the NYPL Design Tokens
+
+The NYPL design tokens are built into the NYPL Design System (the DS) and are offered in two formats for consumption: CSS variables and javascript data objects. To access either of these formats, the DS v0.25.2 or higher needs to be properly installed in a consuming React application.
+
+## Using NYPL Design Tokens in CSS
+
+If your app uses CSS or SCSS to handle styles, the DS creates standard CSS custom properties (e.g. variables) for consumption in your stylesheets. If the DS is properly installed, the CSS custom properties will be available for you to use. Nothing more needs to be done to your app.
+
+To assist with CSS scope isolation, all of the CSS custom properties created by the DS are prefixed with "nypl." Please see the examples below.
+
+```css
+--nypl-colors-brand-primary
+--nypl-colors-brand-secondary
+--nypl-fontSizes-sm
+--nypl-fontSizes-md
+--nypl-fontSizes-lg
+--nypl-fontSizes-xl
+--nypl-space-xxs
+--nypl-space-xs
+--nypl-space-s
+--nypl-space-m
+--nypl-space-l
+```
+
+The CSS custom properties are defined on the :root pseudo-class and should be implemented using standard CSS custom properties conventions.
+
+```css
+/* Property Declaration in the DS */
+:root {
+  --nypl-colors-brand-primary: #c60917;
+}
+
+/* Property Usage in Your Application */
+.custom-button {
+  background: var(--nypl-colors-brand-primary);
+}
+```
+
+## Using NYPL Design Tokens in Javascript
+
+If you would like to use CSS-in-JS styles in your React components, the `useNYPLTheme` hook will provide you with NYPL design token values. The hook depends on the `DSProvider` component and will not work properly outside of the `DSProvider` wrapper component.
+
+After importing and implementing the `DSProvider` wrapper component, as explained in the `DSProvider` section of the [DS Chakra UI](?path=/story/chakra-ui--page#dsprovider) document, your children components can use this hook function.
+
+```tsx
+import { useNYPLTheme } from "@nypl/design-system-react-components";
+const theme = useNYPLTheme();
+```
+
+The theme variable will be a javascript object containing the NYPL design token style values. This will allow you to use design token values in your components through CSS-in-JS.
+
+```tsx
+// theme
+{
+  breakpoints: { ... },
+  colors: {
+    brand: { ... },
+    section: { ... },
+    transparent: { ... },
+    ui: { ... },
+  },
+  fontSizes: { ... },
+  fontWeights: { ... },
+  fonts: { ... },
+  radii: { ... },
+  space: { ... },
+}
+```
+
+#### Using in DS Components
+
+The general rule of thumb is that DS components and the available variants should be used with the styles and variants as they are shown in Storybook, but there may be rare times when a component does require a modification. That said, if a DS component does need an updated style, first contact the Design System and UX teams about this update.
+
+If you receive approval to make a change in a consuming app, then you can add styles directly to the `additionalStyles` prop. For example, if the `Heading` component needs to render text in NYPL's "success primary" green color and add a bold font weight, then you can do the following:
+
+```tsx
+const theme = useNYPLTheme();
+
+// ...
+return (
+  <div>
+    <Heading
+      level={2}
+      additionalStyles={{
+        color: theme.colors.ui.success.primary,
+        fontWeight: theme.fontWeights.bold,
+      }}
+    >
+      Get a Digital Library Card Today in a Few Easy Steps
+    </Heading>
+  </div>
+);
+```
+
+IMPORTANT: At the moment, not all DS components have this prop or feature.
+
+#### Using in HTML Components
+
+For styling standard HTML elements, use the `style` attribute to add inline styles.
+
+```html
+<p style={{ color: theme.colors.ui.success.primary }}>
+  If you are 13 or older and live, work, attend school, or pay property
+  taxes in New York State, you can get a free digital library card right
+  now using this online form. Visitors to New York State can also use this
+  form to apply for a temporary card.
+</p>
+```
+
+#### Using in Styled Components
+
+For adding theme styles to styled-objects, use the theme object as a standard javascript variable.
+
+```tsx
+const CustomButton = styled.button`
+  background: ${theme.colors.brand.primary};
+`;
+```
+
+## NYPL Design Token Categories
+
+The DS design tokens are broken into the following categories:
+
+- [breakpoints](?path=/story/documentation-style-guide-breakpoints--page)
+- [colors](?path=/story/documentation-style-guide-colors--page)
+  - brand
+  - section
+  - transparent
+  - ui
+- radii
+- [spacing](?path=/story/documentation-style-guide-spacing--page)
+- [typography](?path=/story/documentation-style-guide-typography--page)
+  - font families
+  - font sizes
+  - font weights
+
+For details related to a specific category, please refer to the corresponding section in the Style Guide available in the DS Storybook.

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

@@ -18,15 +18,17 @@ import { ListTypes } from "../List/ListTypes";
 
 # 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.
+| Table of Contents                                  |
+| -------------------------------------------------- |
+| 1. [General Information](#general-information)     |
+| 2. [Form Input Components](#form-input-components) |
+| 3. [Input Labelling](#input-labelling)             |
+| 4. [Input States](#input-states)                   |
+| 5. [Figma Reference](#figma-reference)             |
 
-## Style Guide Topics
+## General Information
 
-- [Form Layout](#form-layout)
-- [Form Input Components](#form-input-components)
-- [Input Labelling](#input-labelling)
-- [Input States](#input-states)
-- [Figma Reference](#figma-reference)
+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.
 
 ## Form Layout