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

package/src/components/Logo/Logo.stories.mdx

@@ -0,0 +1,220 @@
+import {
+  ArgsTable,
+  Canvas,
+  Description,
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
+import { withDesign } from "storybook-addon-designs";
+
+import Logo from "./Logo";
+import { LogoNames, LogoSizes } from "./LogoTypes";
+import logoSvgs from "./LogoSvgs";
+import Heading from "../Heading/Heading";
+import { HeadingLevels } from "../Heading/HeadingTypes";
+import List from "../List/List";
+import { ListTypes } from "../List/ListTypes";
+import SimpleGrid from "../Grid/SimpleGrid";
+import { getCategory } from "../../utils/componentCategories";
+import { getStorybookEnumValues } from "../../utils/utils";
+
+export const namesEnumValues = getStorybookEnumValues(LogoNames, "LogoNames");
+export const sizesEnumValues = getStorybookEnumValues(LogoSizes, "LogoSizes");
+
+<Meta
+  title={getCategory("Logo")}
+  component={Logo}
+  decorators={[withDesign]}
+  parameters={{
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10734%3A3945",
+    },
+    jest: ["Logo.test.tsx"],
+  }}
+  argTypes={{
+    children: { table: { disable: true } },
+    className: { control: false },
+    id: { control: false },
+    name: {
+      control: { type: "select" },
+      options: namesEnumValues.options,
+    },
+    size: {
+      control: { type: "select" },
+      table: { defaultValue: { summary: "LogoSizes.Medium" } },
+      options: sizesEnumValues.options,
+    },
+    title: {
+      control: false,
+      table: { defaultValue: { summary: "`${name} logo`" } },
+    },
+  }}
+/>
+
+# Logo
+
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.25.9`   |
+| Latest            | `0.25.9`   |
+
+<Description of={Logo} />
+
+<Canvas withToolbar>
+  <Story
+    name="Logo with Controls"
+    args={{
+      additionalStyles: undefined,
+      className: undefined,
+      decorative: true,
+      id: "logo-id",
+      name: "LogoNames.NYPLBlack",
+      size: "LogoSizes.Large",
+      title: undefined,
+    }}
+  >
+    {(args) => (
+      <div
+        style={
+          args.name.indexOf("White") !== -1
+            ? {
+                backgroundColor: "var(--nypl-colors-ui-gray-xdark)",
+                display: "inline-block",
+                padding: "var(--nypl-space-l)",
+              }
+            : undefined
+        }
+      >
+        <Logo
+          name={namesEnumValues.getValue(args.name)}
+          size={sizesEnumValues.getValue(args.size)}
+          title={args.title}
+        />
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Logo with Controls" />
+
+export const logoRow = (logo, opts = {}) => {
+  // We'll use this setup function to render all the logos in a list item.
+  // Some logos display better with a dark background.
+  const styles = { textAlign: "center" };
+  const { size = LogoSizes.Large, displayValue } = opts;
+  let key = logo;
+  if (logo.indexOf("White") !== -1) {
+    styles.backgroundColor = "var(--nypl-colors-ui-gray-xdark)";
+    styles.paddingBottom = "32px";
+    styles.paddingTop = "32px";
+    styles.color = "var(--nypl-colors-ui-white)";
+  }
+  if (size !== LogoSizes.Large) {
+    key += `-${size}`;
+  }
+  return (
+    <div style={styles} key={key}>
+      <Heading level={HeadingLevels.Four}>{displayValue}</Heading>
+      <Logo name={LogoNames[logo]} size={size} />
+    </div>
+  );
+};
+export const logos = [];
+export const sizes = [];
+for (const logo in LogoNames) {
+  logos.push(logoRow(logo, { displayValue: `LogoNames.${logo}` }));
+}
+for (const logoSize in LogoSizes) {
+  sizes.push(
+    logoRow("NYPLBlack", {
+      displayValue: `LogoSizes.${logoSize}`,
+      size: LogoSizes[logoSize],
+    })
+  );
+}
+
+export const allLogosGrid = (list) => (
+  <SimpleGrid columns={1}>{list}</SimpleGrid>
+);
+
+## Accessibility
+
+For accessibility purposes, every DS `Logo` will render the `svg` element with
+its `svg` file name in the `title` element. The default text in the `title` element
+is the logo's code name. Pass in better descriptive text in the `title` prop
+when using the `Logo` component in your application. This will give screenreaders
+a better descriptive title for the `svg` graphic.
+
+## All Logos
+
+The `Logo` component contains the logos most commonly used by are listed available
+logos are listed in the `LogoNames` enum in `src/components/Logos/LogoTypes.tsx`.
+
+If you feel a necessary logo should be added to the `Logo` component, please reach out
+to the DS team.
+
+<Canvas withToolbar>
+  <Story name="All Logos">{allLogosGrid(logos)}</Story>
+</Canvas>
+
+## Logo Sizes
+
+Update the size of the `Logo` component by passing the `size` prop with a value from
+`LogoSizes`. The `LogoSizes` enum can be found in`src/components/Logo/LogoTypes.tsx`.
+
+Note: `LogoSizes.Default` sets the width to `100%` and the logo will expand to
+fill the full width of the parent element.
+
+```jsx
+// Example
+<Logo name={LogoNames.NYPLBlack} size={LogoSizes.Large} />
+```
+
+<Canvas>
+  <Story name="Logo Sizes">{allLogosGrid(sizes)}</Story>
+</Canvas>
+
+## Custom Logos
+
+If you'd like to pass a custom `svg` to your application, you can pass it a
+child to the `Logo` component.
+
+```jsx
+<Logo {...props}>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192.756 192.756">
+    <g fill-rule="evenodd" clip-rule="evenodd">
+      <path fill="#fff" d="M0 0h192.756v192.756H0V0z" />
+      <path
+        d="M59.73 117.578c-9.859-4.912-23.261-15.887-23.413-27.06C36.149 78.129 44.451 75.087 50 75.087c5.701 0 8.286 3.345 10.637 5.777 2.352-2.433 4.936-5.777 10.637-5.777 5.549 0 13.851 3.042 13.682 15.431-.151 11.173-13.553 22.148-23.412 27.06-.35.174-.629.262-.907.262s-.557-.088-.907-.262z"
+        fill="#c23c40"
+      />
+      <path d="M184.252 78.225c-.027 1.111-.355 1.921-.799 2.399-.871.945-3.1 1.067-4.283.854-.668-.12-1.309-.167-1.66-.137-1.551.136-2.398 1.115-3.242 2.45l-10.377 16.423-.154 6.727c-.033 1.535.287 2.881 2.066 2.799l2.865-.135c1.725-.08 3.35 1.029 3.4 2.867.064 2.359-1.807 3.393-3.943 3.275-1.338-.072-2.559-.275-3.666-.477-2.355-.428-3.977-.279-6.332 0-2.189.262-3.879.43-5.055.4-1.895-.045-3.725-.988-3.91-2.957-.178-1.898 1.297-3.191 3.186-3.041l2.5.199c.963.076 2.232-.406 2.256-1.533l.152-7.555-10.803-17.373c-.588-.948-1.52-1.538-2.42-1.877-1.156-.435-2.35-.464-3.568-.309-.988.125-1.16.01-1.414-.001-2.166-.093-3.1-1.048-2.988-3.064.139-2.505 1.543-2.885 3.936-2.885.412 0 1.391.005 3.344.285 1.43.206 2.609.099 3.531.067 2.436-.083 4.973-.545 7.377-.479 1.334.037 2.285.338 2.943.667.92.459 1.506 1.161 1.473 2.348-.031 1.144-.484 2.161-1.139 2.645-.496.367-1.848.417-2.902.417-1.92-.046-1.844 1.094-1.24 1.651l7.008 11.204 7.336-11.487c.148-.59.916-1.602-1.146-1.365-.637.073-.715.087-1.48.064-1.1-.033-1.854-.247-2.266-.544-1.348-.974-1.18-1.916-.943-3.322.17-1.019.986-1.48 1.877-1.744.928-.275 1.896-.259 2.871-.267 1.105-.009 2.221.111 3.295.272 1.99.297 3.414.306 5.398.066 1.379-.167 3.006-.5 4.559-.488 1.062.008 2.092.056 2.984.551.867.484 1.4 1.278 1.373 2.41zM31.561 112.531c-.116 2.684-2.242 2.799-4.345 2.799-2.14 0-4.302-.387-6.455-.387-2.396 0-4.788.17-7.178.396-2.739.262-4.681-.342-4.576-2.869.07-1.703 1.047-2.818 3.117-2.814l2.783.004c1.497.002 2.085-1.572 2.082-2.721l-.098-23.305c-.004-1.258-.422-2.46-1.917-2.431l-3.169.064c-2.091.042-3.322-1.33-3.301-3.214.026-2.372 1.934-2.958 3.873-2.897.678.021 2.127.043 3.023.136 1.53.157 3.13.141 4.67.141 2.369 0 4.682-.372 7.012-.372 2.197 0 4.145.564 4.274 3.233.078 1.624-1.636 2.807-3.479 2.776l-2.155-.035c-1.634-.027-2.604 1.158-2.587 2.501l.294 23.462c.028 2.24 1.216 2.869 3.008 2.85l2.109-.025c1.58-.02 3.098.777 3.015 2.708zM135.311 78.065c-.084 2.73-1.73 3.344-4.244 3.344 0-.041-4.09-.461-4.09 1.686v26.908c0 3.244-1.57 6.314-5.01 6.314-2.217 0-4.641-1.143-5.557-3.271l-12.846-29.84-.061 23.363c-.004 1.895.496 2.963 2.393 2.908l2.344-.066c2.098-.061 3.543 1.082 3.482 3.266-.066 2.418-1.879 2.932-3.93 2.932-2.467 0-4.818-.783-7.248-.666-2.58.123-5.081.484-7.668.484-2.227 0-3.915-.693-3.915-3.283 0-2.166 1.352-2.596 3.254-2.637l2.58-.055c1.54-.031 2.489-.662 2.489-1.975V82.78c0-1.262-.493-1.895-2.204-1.835l-2.213.079c-2.608.092-3.612-.421-3.543-3.023.061-2.28 1.595-3.273 4.478-3.052 1.569.12 3.148.301 4.722.301 1.721 0 3.434-.042 5.148-.042 2.891 0 4.029 1.753 5.182 4.37l11.777 26.751V83.664c0-1.012-.412-1.794-.732-2.11-.322-.316-.822-.481-1.475-.478l-2.693.019c-1.971.012-3.658-.844-3.623-2.685.055-3.006 2.82-3.496 5.285-3.399 2.385.094 4.965.742 7.32.667 2.227-.071 4.461-.646 6.697-.533 2.885.147 3.951 1.244 3.901 2.92zM179.455 107.746c1.111 0 2.096.396 2.951 1.186.896.832 1.346 1.836 1.346 3.012 0 1.426-.506 2.523-1.518 3.297a4.258 4.258 0 0 1-2.643.902h-.211c-1.004 0-1.926-.42-2.766-1.26-.838-.84-1.258-1.791-1.258-2.852v-.174c0-1.16.398-2.135 1.197-2.926.801-.788 1.767-1.185 2.902-1.185zm.408 3.951c.346 0 .615-.082.809-.246.193-.166.291-.363.291-.594a.77.77 0 0 0-.266-.58c-.178-.164-.422-.246-.736-.246h-1.543v1.666h1.445zm-.308-3.345c-.814 0-1.576.279-2.283.84-.891.699-1.334 1.646-1.334 2.84 0 .914.359 1.742 1.08 2.486.721.746 1.533 1.117 2.438 1.117h.148c.906 0 1.723-.367 2.451-1.104s1.092-1.6 1.092-2.588c0-.971-.359-1.812-1.08-2.523-.719-.713-1.557-1.068-2.512-1.068zm-1.741 1.171h2.221c.504 0 .902.141 1.199.42.264.256.395.561.395.914 0 .338-.125.633-.377.883-.25.252-.6.377-1.043.377l-.174-.012 1.408 2.172h-.703l-1.359-2.074h-.963v2.074h-.604v-4.754z" />
+    </g>
+  </svg>
+</Logo>
+```
+
+<Canvas>
+  <Story
+    name="Custom Logos"
+    args={{
+      size: LogoSizes.Large,
+    }}
+  >
+    {(args) => (
+      <Logo {...args}>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192.756 192.756">
+          <g fill-rule="evenodd" clip-rule="evenodd">
+            <path fill="#fff" d="M0 0h192.756v192.756H0V0z" />
+            <path
+              d="M59.73 117.578c-9.859-4.912-23.261-15.887-23.413-27.06C36.149 78.129 44.451 75.087 50 75.087c5.701 0 8.286 3.345 10.637 5.777 2.352-2.433 4.936-5.777 10.637-5.777 5.549 0 13.851 3.042 13.682 15.431-.151 11.173-13.553 22.148-23.412 27.06-.35.174-.629.262-.907.262s-.557-.088-.907-.262z"
+              fill="#c23c40"
+            />
+            <path d="M184.252 78.225c-.027 1.111-.355 1.921-.799 2.399-.871.945-3.1 1.067-4.283.854-.668-.12-1.309-.167-1.66-.137-1.551.136-2.398 1.115-3.242 2.45l-10.377 16.423-.154 6.727c-.033 1.535.287 2.881 2.066 2.799l2.865-.135c1.725-.08 3.35 1.029 3.4 2.867.064 2.359-1.807 3.393-3.943 3.275-1.338-.072-2.559-.275-3.666-.477-2.355-.428-3.977-.279-6.332 0-2.189.262-3.879.43-5.055.4-1.895-.045-3.725-.988-3.91-2.957-.178-1.898 1.297-3.191 3.186-3.041l2.5.199c.963.076 2.232-.406 2.256-1.533l.152-7.555-10.803-17.373c-.588-.948-1.52-1.538-2.42-1.877-1.156-.435-2.35-.464-3.568-.309-.988.125-1.16.01-1.414-.001-2.166-.093-3.1-1.048-2.988-3.064.139-2.505 1.543-2.885 3.936-2.885.412 0 1.391.005 3.344.285 1.43.206 2.609.099 3.531.067 2.436-.083 4.973-.545 7.377-.479 1.334.037 2.285.338 2.943.667.92.459 1.506 1.161 1.473 2.348-.031 1.144-.484 2.161-1.139 2.645-.496.367-1.848.417-2.902.417-1.92-.046-1.844 1.094-1.24 1.651l7.008 11.204 7.336-11.487c.148-.59.916-1.602-1.146-1.365-.637.073-.715.087-1.48.064-1.1-.033-1.854-.247-2.266-.544-1.348-.974-1.18-1.916-.943-3.322.17-1.019.986-1.48 1.877-1.744.928-.275 1.896-.259 2.871-.267 1.105-.009 2.221.111 3.295.272 1.99.297 3.414.306 5.398.066 1.379-.167 3.006-.5 4.559-.488 1.062.008 2.092.056 2.984.551.867.484 1.4 1.278 1.373 2.41zM31.561 112.531c-.116 2.684-2.242 2.799-4.345 2.799-2.14 0-4.302-.387-6.455-.387-2.396 0-4.788.17-7.178.396-2.739.262-4.681-.342-4.576-2.869.07-1.703 1.047-2.818 3.117-2.814l2.783.004c1.497.002 2.085-1.572 2.082-2.721l-.098-23.305c-.004-1.258-.422-2.46-1.917-2.431l-3.169.064c-2.091.042-3.322-1.33-3.301-3.214.026-2.372 1.934-2.958 3.873-2.897.678.021 2.127.043 3.023.136 1.53.157 3.13.141 4.67.141 2.369 0 4.682-.372 7.012-.372 2.197 0 4.145.564 4.274 3.233.078 1.624-1.636 2.807-3.479 2.776l-2.155-.035c-1.634-.027-2.604 1.158-2.587 2.501l.294 23.462c.028 2.24 1.216 2.869 3.008 2.85l2.109-.025c1.58-.02 3.098.777 3.015 2.708zM135.311 78.065c-.084 2.73-1.73 3.344-4.244 3.344 0-.041-4.09-.461-4.09 1.686v26.908c0 3.244-1.57 6.314-5.01 6.314-2.217 0-4.641-1.143-5.557-3.271l-12.846-29.84-.061 23.363c-.004 1.895.496 2.963 2.393 2.908l2.344-.066c2.098-.061 3.543 1.082 3.482 3.266-.066 2.418-1.879 2.932-3.93 2.932-2.467 0-4.818-.783-7.248-.666-2.58.123-5.081.484-7.668.484-2.227 0-3.915-.693-3.915-3.283 0-2.166 1.352-2.596 3.254-2.637l2.58-.055c1.54-.031 2.489-.662 2.489-1.975V82.78c0-1.262-.493-1.895-2.204-1.835l-2.213.079c-2.608.092-3.612-.421-3.543-3.023.061-2.28 1.595-3.273 4.478-3.052 1.569.12 3.148.301 4.722.301 1.721 0 3.434-.042 5.148-.042 2.891 0 4.029 1.753 5.182 4.37l11.777 26.751V83.664c0-1.012-.412-1.794-.732-2.11-.322-.316-.822-.481-1.475-.478l-2.693.019c-1.971.012-3.658-.844-3.623-2.685.055-3.006 2.82-3.496 5.285-3.399 2.385.094 4.965.742 7.32.667 2.227-.071 4.461-.646 6.697-.533 2.885.147 3.951 1.244 3.901 2.92zM179.455 107.746c1.111 0 2.096.396 2.951 1.186.896.832 1.346 1.836 1.346 3.012 0 1.426-.506 2.523-1.518 3.297a4.258 4.258 0 0 1-2.643.902h-.211c-1.004 0-1.926-.42-2.766-1.26-.838-.84-1.258-1.791-1.258-2.852v-.174c0-1.16.398-2.135 1.197-2.926.801-.788 1.767-1.185 2.902-1.185zm.408 3.951c.346 0 .615-.082.809-.246.193-.166.291-.363.291-.594a.77.77 0 0 0-.266-.58c-.178-.164-.422-.246-.736-.246h-1.543v1.666h1.445zm-.308-3.345c-.814 0-1.576.279-2.283.84-.891.699-1.334 1.646-1.334 2.84 0 .914.359 1.742 1.08 2.486.721.746 1.533 1.117 2.438 1.117h.148c.906 0 1.723-.367 2.451-1.104s1.092-1.6 1.092-2.588c0-.971-.359-1.812-1.08-2.523-.719-.713-1.557-1.068-2.512-1.068zm-1.741 1.171h2.221c.504 0 .902.141 1.199.42.264.256.395.561.395.914 0 .338-.125.633-.377.883-.25.252-.6.377-1.043.377l-.174-.012 1.408 2.172h-.703l-1.359-2.074h-.963v2.074h-.604v-4.754z" />
+          </g>
+        </svg>
+      </Logo>
+    )}
+  </Story>
+</Canvas>

package/src/components/Logo/Logo.test.tsx

@@ -0,0 +1,98 @@
+import * as React from "react";
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
+
+import Logo from "./Logo";
+import { LogoNames, LogoSizes } from "./LogoTypes";
+
+describe("Logo Accessibility", () => {
+  it("passes axe accessibility test", async () => {
+    const { container } = render(<Logo name={LogoNames.NYPLBlack} />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("Logo", () => {
+  it("consoles a warning if both name and children are passed to Logo", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(
+      <Logo name={LogoNames.NYPLBlack}>
+        <svg viewBox="0 0 24 14" xmlns="http://www.w3.org/2000/svg">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M10.526 12.871L.263 1.676 1.737.324 12 11.52 22.263.324l1.474 1.352L13.474 12.87a2 2 0 01-2.948 0z"
+          />
+        </svg>
+      </Logo>
+    );
+    expect(warn).toHaveBeenCalledWith(
+      "Logo accepts either a `name` prop or an `svg` element child. It can not accept both."
+    );
+  });
+
+  it("consoles a warning if both name and children are not passed", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(<Logo />);
+    expect(warn).toHaveBeenCalledWith(
+      "Pass a logo `name` prop or an SVG child to `Logo` to ensure a logo appears."
+    );
+  });
+
+  it("renders a logo based on the logo `name` prop", () => {
+    const { container } = render(<Logo name={LogoNames.NYPLBlack} />);
+    expect(container.querySelector("svg")).toBeInTheDocument();
+  });
+
+  // NOTE: the svg logo is dynamically generated by the "svgr" package. At build
+  // time, it generate the `title` element but it doesn't generate it for tests.
+  // In order to test this, we can check the `title` attribute in the svg
+  // element itself. Inspect the `Logo` in Storybook to see the `title` element.
+  it("renders a title element", () => {
+    const { container, rerender } = render(<Logo name={LogoNames.NYPLBlack} />);
+    expect(container.querySelector("svg")).toHaveAttribute(
+      "title",
+      "logo_nypl_full_black logo"
+    );
+
+    rerender(<Logo name={LogoNames.NYPLBlack} title="title content" />);
+    expect(container.querySelector("svg")).toHaveAttribute(
+      "title",
+      "title content"
+    );
+  });
+
+  it("renders a logo based on the child", () => {
+    const { container } = render(
+      <Logo>
+        <svg viewBox="0 0 24 14" xmlns="http://www.w3.org/2000/svg">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M10.526 12.871L.263 1.676 1.737.324 12 11.52 22.263.324l1.474 1.352L13.474 12.87a2 2 0 01-2.948 0z"
+          />
+        </svg>
+      </Logo>
+    );
+    expect(container.querySelector("svg")).toBeInTheDocument();
+  });
+
+  it("renders the UI snapshot correctly", () => {
+    const standard = renderer
+      .create(<Logo id="test-logo" name={LogoNames.NYPLBlack} />)
+      .toJSON();
+    const withCustomSize = renderer
+      .create(
+        <Logo
+          id="test-logo-size"
+          name={LogoNames.NYPLBlack}
+          size={LogoSizes.Large}
+        />
+      )
+      .toJSON();
+
+    expect(standard).toMatchSnapshot();
+    expect(withCustomSize).toMatchSnapshot();
+  });
+});

package/src/components/Logo/Logo.tsx

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { Icon as ChakraIcon, Box, useStyleConfig } from "@chakra-ui/react";
+
+import generateUUID from "../../helpers/generateUUID";
+import { LogoNames, LogoSizes } from "./LogoTypes";
+import logoSvgs from "./LogoSvgs";
+
+export interface LogoProps {
+  /** Optionally pass in additional Chakra-based styles. */
+  additionalStyles?: { [key: string]: any };
+  /** Optional className that will be added to the parent element */
+  className?: string;
+  /** Logos designated as decorative will be ignored by screenreaders. False
+   * by default. */
+  decorative?: boolean;
+  /** ID that other components can cross reference for accessibility purposes */
+  id?: string;
+  /** The name of the logo you want to use. */
+  name?: LogoNames;
+  /** Sets the logo size. */
+  size?: LogoSizes;
+  /** For accessibility purposes, the text passed in the `title` prop gets
+   * rendered in a `title` element in the SVG. This descriptive text is not
+   * visible but is needed for screenreaders to describe the graphic. */
+  title?: string;
+}
+
+/**
+ * The `Logo` component renders SVG-based logos and color variants that are
+ * commonly used by the New York Public Library.
+ */
+export default function Logo(props: React.PropsWithChildren<LogoProps>) {
+  const {
+    additionalStyles = {},
+    children,
+    className,
+    decorative = false,
+    id = generateUUID(),
+    name,
+    size = LogoSizes.Medium,
+    title = `${name} logo`,
+  } = props;
+  const styles = useStyleConfig("Logo", {
+    size,
+  });
+  const logoProps = {
+    "aria-hidden": decorative,
+    className,
+    id,
+    role: "img",
+    title,
+  };
+  let childSVG = null;
+
+  // Component prop validation
+  if (name && children) {
+    console.warn(
+      "Logo accepts either a `name` prop or an `svg` element child. It can not accept both."
+    );
+    return null;
+  } else if (!name && !children) {
+    console.warn(
+      "Pass a logo `name` prop or an SVG child to `Logo` to ensure a logo appears."
+    );
+    return null;
+  }
+
+  // The user wants to render an existing logo. Load the logo and render it
+  // as a component through Chakra's Icon component. Otherwise, we're going to
+  // render the SVG child with NYPL-theme styling.
+  if (name) {
+    const SvgComponent: any = logoSvgs[name];
+    return (
+      <ChakraIcon
+        as={SvgComponent}
+        {...logoProps}
+        __css={{ ...styles, ...additionalStyles }}
+      />
+    );
+  }
+
+  // If no `name` prop was passed, we expect a child SVG element to be passed.
+  // Apply logo props to the SVG child.
+  if (
+    (children as JSX.Element).type === "svg" ||
+    (children as JSX.Element).props.type === "svg" ||
+    (children as JSX.Element).props.mdxType === "svg"
+  ) {
+    childSVG = React.cloneElement(children as JSX.Element, {
+      ...logoProps,
+    });
+  } else {
+    console.warn("You must pass an `svg` element to the `Logo` component.");
+  }
+
+  return <Box __css={styles}>{childSVG}</Box>;
+}

package/src/components/Logo/LogoSvgs.tsx

@@ -0,0 +1,34 @@
+/* eslint-disable camelcase */
+import logo_bpl_black from "../../../icons/svg/logo_bpl_black.svg";
+import logo_lpa_color from "../../../icons/svg/logo_lpa_color.svg";
+import logo_lpa_white from "../../../icons/svg/logo_lpa_white.svg";
+import logo_nypl_full_black from "../../../icons/svg/logo_nypl_full_black.svg";
+import logo_nypl_full_white from "../../../icons/svg/logo_nypl_full_white.svg";
+import logo_nypl_lion_black from "../../../icons/svg/logo_nypl_lion_black.svg";
+import logo_nypl_lion_white from "../../../icons/svg/logo_nypl_lion_white.svg";
+import logo_qpl_alt_black from "../../../icons/svg/logo_qpl_alt_black.svg";
+import logo_qpl_color from "../../../icons/svg/logo_qpl_color.svg";
+import logo_schomburg_circle_color from "../../../icons/svg/logo_schomburg_circle_color.svg";
+import logo_schomburg_color from "../../../icons/svg/logo_schomburg_color.svg";
+import logo_simplye_black from "../../../icons/svg/logo_simplye_black.svg";
+import logo_simplye_color from "../../../icons/svg/logo_simplye_color.svg";
+import logo_snfl_black from "../../../icons/svg/logo_snfl_black.svg";
+import logo_snfl_white from "../../../icons/svg/logo_snfl_white.svg";
+
+export default {
+  logo_bpl_black,
+  logo_lpa_color,
+  logo_lpa_white,
+  logo_nypl_full_black,
+  logo_nypl_full_white,
+  logo_nypl_lion_white,
+  logo_nypl_lion_black,
+  logo_qpl_alt_black,
+  logo_qpl_color,
+  logo_schomburg_circle_color,
+  logo_schomburg_color,
+  logo_simplye_black,
+  logo_simplye_color,
+  logo_snfl_black,
+  logo_snfl_white,
+};

package/src/components/Logo/LogoTypes.tsx

@@ -0,0 +1,32 @@
+export enum LogoColors {
+  Default = "",
+  UiBlack = "ui.black",
+  UiWhite = "ui.white",
+}
+
+export enum LogoSizes {
+  ExtraExtraSmall = "xxsmall",
+  ExtraSmall = "xsmall",
+  Small = "small",
+  Medium = "medium",
+  Large = "large",
+  Default = "default",
+}
+
+export enum LogoNames {
+  BrooklynPublicLibraryBlack = "logo_bpl_black",
+  LPAColor = "logo_lpa_color",
+  LPAWhite = "logo_lpa_white",
+  NYPLBlack = "logo_nypl_full_black",
+  NYPLWhite = "logo_nypl_full_white",
+  NYPLLionBlack = "logo_nypl_lion_black",
+  NYPLLionWhite = "logo_nypl_lion_white",
+  QueensPublicLibraryColor = "logo_qpl_color",
+  QueensPublicLibraryAltBlack = "logo_qpl_alt_black",
+  SchomburgColor = "logo_schomburg_color",
+  SchomburgCircleColor = "logo_schomburg_circle_color",
+  SimplyEColor = "logo_simplye_color",
+  SimplyEBlack = "logo_simplye_black",
+  SNFLBlack = "logo_snfl_black",
+  SNFLWhite = "logo_snfl_white",
+}

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

@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Logo renders the UI snapshot correctly 1`] = `
+<svg
+  aria-hidden={false}
+  className="chakra-icon css-onkibi"
+  focusable={false}
+  id="test-logo"
+  role="img"
+  title="logo_nypl_full_black logo"
+  viewBox="0 0 24 24"
+>
+  <g
+    stroke="currentColor"
+    strokeWidth="1.5"
+  >
+    <path
+      d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+      fill="none"
+      strokeLinecap="round"
+    />
+    <path
+      d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+      fill="currentColor"
+      strokeLinecap="round"
+    />
+    <circle
+      cx="12"
+      cy="12"
+      fill="none"
+      r="11.25"
+      strokeMiterlimit="10"
+    />
+  </g>
+</svg>
+`;
+
+exports[`Logo renders the UI snapshot correctly 2`] = `
+<svg
+  aria-hidden={false}
+  className="chakra-icon css-onkibi"
+  focusable={false}
+  id="test-logo-size"
+  role="img"
+  title="logo_nypl_full_black logo"
+  viewBox="0 0 24 24"
+>
+  <g
+    stroke="currentColor"
+    strokeWidth="1.5"
+  >
+    <path
+      d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+      fill="none"
+      strokeLinecap="round"
+    />
+    <path
+      d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+      fill="currentColor"
+      strokeLinecap="round"
+    />
+    <circle
+      cx="12"
+      cy="12"
+      fill="none"
+      r="11.25"
+      strokeMiterlimit="10"
+    />
+  </g>
+</svg>
+`;

package/src/components/Modal/Modal.stories.mdx

@@ -1,11 +1,12 @@
 import { useState } from "react";
 import {
-  Meta,
-  Story,
   ArgsTable,
   Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
+
 import Modal from "./Modal";
 import Button from "../Button/Button";
 import { getCategory } from "../../utils/componentCategories";
@@ -14,7 +15,12 @@ import { getCategory } from "../../utils/componentCategories";
   title={getCategory("Modal")}
   component={Modal}
   argTypes={{
+    blockName: { control: false },
     children: { table: { disable: true } },
+    className: { control: false },
+    id: { control: false },
+    modifiers: { control: false },
+    open: { description: "Only used in Storybook." },
   }}
   parameters={{
     jest: ["Modal.test.tsx"],
@@ -119,12 +125,21 @@ export const ModalStory = (args) => {
 };
 
 <Canvas withToolbar>
-  <Story name="Basic" args={{ open: false }}>
+  <Story
+    name="Modal"
+    args={{
+      blockName: undefined,
+      className: undefined,
+      id: "modal-id",
+      modifiers: undefined,
+      open: false,
+    }}
+  >
     {(args) => <ModalStory {...args} />}
   </Story>
 </Canvas>
 
-<ArgsTable story="Basic" />
+<ArgsTable story="Modal" />
 
 ## Code Implementation
 

package/src/components/Modal/Modal.tsx

@@ -1,15 +1,10 @@
 import * as React from "react";
-import bem from "../../utils/bem";
 
 export interface ModalProps {
-  /** 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 "modal" */
   className?: string;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
-  /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-  modifiers?: string[];
 }
 
 /** Full-screen modal that appears on top of the body of the page. */
@@ -23,14 +18,13 @@ export default class Modal extends React.Component<ModalProps, any> {
   }
 
   render() {
-    const { modifiers = [], blockName, id, className } = this.props;
-    const baseClass = "modal";
+    const { id, className } = this.props;
 
     return (
       <div
         // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
         tabIndex={0}
-        className={bem(baseClass, modifiers, blockName, [className])}
+        className={`modal ${className}`}
         id={id}
       >
         {this.props.children}