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

package/src/components/StatusBadge/StatusBadge.tsx

@@ -1,37 +1,36 @@
 import * as React from "react";
-import bem from "../../utils/bem";
+import { Box, useStyleConfig } from "@chakra-ui/react";
+
+import { StatusBadgeTypes } from "./StatusBadgeTypes";
+import generateUUID from "../../helpers/generateUUID";
 
 export interface StatusBadgeProps {
-  /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-  blockName?: string;
-  /** ClassName that appears in addition to "status-badge" */
+  /** Additional class for the component */
   className?: string;
-  /** Level of badge **/
-  level?: "low" | "medium" | "high";
+  /** ID that other components can cross reference for accessibility purposes */
+  id?: string;
+  /** Level of the status badge through StatusBadgeTypes. */
+  level?: StatusBadgeTypes;
 }
 
-export default function StatusBadge(
-  props: React.PropsWithChildren<StatusBadgeProps>
-) {
-  const { blockName, className, level } = props;
-
-  const baseClass = "status-badge";
-
-  let statusBadgeModifiers = ["low"];
+function StatusBadge(props: React.PropsWithChildren<StatusBadgeProps>) {
+  const {
+    children,
+    className,
+    id = generateUUID(),
+    level = StatusBadgeTypes.Low,
+  } = props;
+  const styles = useStyleConfig("StatusBadge", { variant: level });
 
-  if (!props.children) {
-    console.warn("Status Badge has no children");
-  }
-
-  if (level) {
-    statusBadgeModifiers = [level];
+  if (!children) {
+    console.warn("Status Badge has no children.");
   }
 
   return (
-    <div
-      className={bem(baseClass, statusBadgeModifiers, blockName, [className])}
-    >
-      {props.children}
-    </div>
+    <Box id={id} className={className} __css={styles}>
+      {children}
+    </Box>
   );
 }
+
+export default StatusBadge;

package/src/components/StatusBadge/StatusBadgeTypes.tsx

@@ -0,0 +1,5 @@
+export enum StatusBadgeTypes {
+  Low = "low",
+  Medium = "medium",
+  High = "high",
+}

package/src/components/StatusBadge/__snapshots__/StatusBadge.test.tsx.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StatusBadge renders the UI snapshot correctly 1`] = `
+<div
+  className="css-0"
+  id="low"
+>
+  Registration Required
+</div>
+`;
+
+exports[`StatusBadge renders the UI snapshot correctly 2`] = `
+<div
+  className="css-0"
+  id="medium"
+>
+  Registration Required
+</div>
+`;
+
+exports[`StatusBadge renders the UI snapshot correctly 3`] = `
+<div
+  className="css-0"
+  id="high"
+>
+  Registration Required
+</div>
+`;

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

@@ -4,7 +4,7 @@ import SearchBar from "../SearchBar/SearchBar";
 import Input from "../Input/Input";
 import { InputTypes } from "../Input/InputTypes";
 import Icon from "../Icons/Icon";
-import { IconNames } from "../Icons/IconTypes";
+import { IconNames, IconSizes, IconAlign } from "../Icons/IconTypes";
 import Button from "../Button/Button";
 import { ButtonTypes } from "../Button/ButtonTypes";
 import HelperErrorText from "../HelperErrorText/HelperErrorText";
@@ -132,9 +132,9 @@ won't hurt.
         />
         <Button buttonType={ButtonTypes.Primary} id="button-ex1" type="submit">
           <Icon
-            name={IconNames.search}
-            decorative={true}
-            modifiers={["small", "icon-left"]}
+            name={IconNames.Search}
+            size={IconSizes.Small}
+            align={IconAlign.Left}
           />
           Search
         </Button>
@@ -170,9 +170,9 @@ block to see its code implementation.
             type="submit"
           >
             <Icon
-              name={IconNames.search}
-              decorative={true}
-              modifiers={["small", "icon-left"]}
+              name={IconNames.Search}
+              size={IconSizes.Small}
+              align={IconAlign.Left}
             />
             يبحث
           </Button>
@@ -209,9 +209,9 @@ block to see its code implementation.
             type="submit"
           >
             <Icon
-              name={IconNames.search}
-              decorative={true}
-              modifiers={["small", "icon-left"]}
+              name={IconNames.Search}
+              size={IconSizes.Small}
+              align={IconAlign.Left}
             />
             يبحث
           </Button>
@@ -242,9 +242,9 @@ help reduce any visual mistakes.
         A regular button:
         <Button buttonType={ButtonTypes.Primary} id="button-ex4" type="submit">
           <Icon
-            name={IconNames.search}
-            decorative={true}
-            modifiers={["small", "icon-left"]}
+            name={IconNames.Search}
+            size={IconSizes.Small}
+            align={IconAlign.Left}
           />
           Search
         </Button>
@@ -258,9 +258,9 @@ help reduce any visual mistakes.
             type="submit"
           >
             <Icon
-              name={IconNames.search}
-              decorative={true}
-              modifiers={["small", "icon-left"]}
+              name={IconNames.Search}
+              size={IconSizes.Small}
+              align={IconAlign.Left}
             />
             Search
           </Button>

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

@@ -12,10 +12,10 @@ import Button, { ButtonGroup } from "../Button/Button";
 import { ButtonTypes } from "../Button/ButtonTypes";
 import Icon from "../Icons/Icon";
 import {
-  IconColors,
   IconNames,
   IconRotationTypes,
   IconSizes,
+  IconAlign,
 } from "../Icons/IconTypes";
 import getCSSVariable from "../../helpers/getCSSVariable";
 import DSProvider from "../../theme/provider";
@@ -87,7 +87,11 @@ Buttons should use `--space-xs` (0.5rem) for spacing in situations where multipl
           },
         }}
       >
-        <Icon decorative modifiers={["small", "icon-left"]} name="search" />
+        <Icon
+          name={IconNames.Search}
+          size={IconSizes.Small}
+          align={IconAlign.Left}
+        />
         Button Text
       </Button>
       <Button
@@ -98,11 +102,7 @@ Buttons should use `--space-xs` (0.5rem) for spacing in situations where multipl
           },
         }}
       >
-        <Icon
-          name={IconNames.close}
-          decorative={true}
-          size={IconSizes.medium}
-        />
+        <Icon name={IconNames.Close} size={IconSizes.Medium} />
       </Button>
       <Button
         buttonType={ButtonTypes.Primary}
@@ -118,10 +118,10 @@ Buttons should use `--space-xs` (0.5rem) for spacing in situations where multipl
       <Button buttonType={ButtonTypes.Secondary}>
         Back to Top
         <Icon
-          name={IconNames.arrow}
-          decorative={true}
-          iconRotation={IconRotationTypes.rotate180}
-          modifiers={["small", "icon-right"]}
+          name={IconNames.Arrow}
+          size={IconSizes.Small}
+          align={IconAlign.Right}
+          iconRotation={IconRotationTypes.Rotate180}
         />
       </Button>
     </ButtonGroup>
@@ -186,10 +186,10 @@ The "Back to Top" button must be of `ButtonTypes` `Secondary` and must include a
       <Button buttonType={ButtonTypes.Secondary}>
         Back to Top
         <Icon
-          name={IconNames.arrow}
-          decorative={true}
-          iconRotation={IconRotationTypes.rotate180}
-          modifiers={["small", "icon-right"]}
+          name={IconNames.Arrow}
+          iconRotation={IconRotationTypes.Rotate180}
+          size={IconSizes.Small}
+          align={IconAlign.Right}
         />
       </Button>
     </ButtonGroup>

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>