@nypl/design-system-react-components 1.0.1 → 1.0.2

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

@@ -0,0 +1,342 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Template components renders the UI snapshot correctly 1`] = `
+<div
+  className="css-1xdhyk6"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      className="placeholder placeholder--short"
+    >
+      Above Header
+    </div>
+  </div>
+  <header
+    className="css-0"
+  >
+    <div
+      className="placeholder placeholder--short"
+    >
+      NYPL Header
+    </div>
+    <div
+      className="css-0"
+    >
+      <div
+        className="placeholder placeholder--short"
+      >
+        Breadcrumbs
+      </div>
+      <div
+        className="placeholder placeholder--short"
+      >
+        Hero
+      </div>
+    </div>
+  </header>
+  <main
+    className="css-0"
+    id="mainContent"
+  >
+    <div
+      className="css-0"
+    >
+      <div
+        className="placeholder placeholder--undefined"
+      >
+        Content Top
+      </div>
+    </div>
+    <div
+      className="css-0"
+    >
+      <div
+        className="placeholder placeholder--undefined"
+      >
+        Left Sidebar
+      </div>
+    </div>
+    <div
+      className="css-0"
+    >
+      <div
+        className="placeholder placeholder--undefined"
+      >
+        Main Content
+      </div>
+      <div
+        className="placeholder placeholder--short"
+      >
+        More Content
+      </div>
+    </div>
+  </main>
+  <footer
+    className="css-0"
+  >
+    <div
+      className="placeholder placeholder--short"
+    >
+      Footer
+    </div>
+  </footer>
+</div>
+`;
+
+exports[`Template components renders the UI snapshot correctly 2`] = `
+<div
+  className="css-1u8qly9"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      className="placeholder placeholder--short"
+    >
+      Above Header
+    </div>
+  </div>
+  <header
+    className="css-0"
+  >
+    <div
+      className="placeholder placeholder--short"
+    >
+      NYPL Header
+    </div>
+    <div
+      className="css-0"
+    >
+      <div
+        className="placeholder placeholder--short"
+      >
+        Breadcrumbs
+      </div>
+      <div
+        className="placeholder placeholder--short"
+      >
+        Hero
+      </div>
+    </div>
+  </header>
+  <main
+    className="css-0"
+    id="mainContent"
+  >
+    <div
+      className="css-0"
+    >
+      <div
+        className="placeholder placeholder--undefined"
+      >
+        Content Top
+      </div>
+    </div>
+    <div
+      className="css-0"
+    >
+      <div
+        className="placeholder placeholder--undefined"
+      >
+        Left Sidebar
+      </div>
+    </div>
+    <div
+      className="css-0"
+    >
+      <div
+        className="placeholder placeholder--undefined"
+      >
+        Main Content
+      </div>
+      <div
+        className="placeholder placeholder--short"
+      >
+        More Content
+      </div>
+    </div>
+  </main>
+  <footer
+    className="css-0"
+  >
+    <div
+      className="placeholder placeholder--short"
+    >
+      Footer
+    </div>
+  </footer>
+</div>
+`;
+
+exports[`Template components renders the UI snapshot correctly 3`] = `
+<div
+  className="css-1y4kn3e"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      className="placeholder placeholder--short"
+    >
+      Above Header
+    </div>
+  </div>
+  <header
+    className="css-0"
+  >
+    <div
+      className="placeholder placeholder--short"
+    >
+      NYPL Header
+    </div>
+    <div
+      className="css-0"
+    >
+      <div
+        className="placeholder placeholder--short"
+      >
+        Breadcrumbs
+      </div>
+      <div
+        className="placeholder placeholder--short"
+      >
+        Hero
+      </div>
+    </div>
+  </header>
+  <main
+    className="css-0"
+    id="mainContent"
+  >
+    <div
+      className="css-0"
+    >
+      <div
+        className="placeholder placeholder--undefined"
+      >
+        Content Top
+      </div>
+    </div>
+    <div
+      className="css-0"
+    >
+      <div
+        className="placeholder placeholder--undefined"
+      >
+        Left Sidebar
+      </div>
+    </div>
+    <div
+      className="css-0"
+    >
+      <div
+        className="placeholder placeholder--undefined"
+      >
+        Main Content
+      </div>
+      <div
+        className="placeholder placeholder--short"
+      >
+        More Content
+      </div>
+    </div>
+  </main>
+  <footer
+    className="css-0"
+  >
+    <div
+      className="placeholder placeholder--short"
+    >
+      Footer
+    </div>
+  </footer>
+</div>
+`;
+
+exports[`Template components renders the UI snapshot correctly 4`] = `
+<div
+  className="css-1u8qly9"
+  data-testid="props"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      className="placeholder placeholder--short"
+    >
+      Above Header
+    </div>
+  </div>
+  <header
+    className="css-0"
+  >
+    <div
+      className="placeholder placeholder--short"
+    >
+      NYPL Header
+    </div>
+    <div
+      className="css-0"
+    >
+      <div
+        className="placeholder placeholder--short"
+      >
+        Breadcrumbs
+      </div>
+      <div
+        className="placeholder placeholder--short"
+      >
+        Hero
+      </div>
+    </div>
+  </header>
+  <main
+    className="css-0"
+    id="mainContent"
+  >
+    <div
+      className="css-0"
+    >
+      <div
+        className="placeholder placeholder--undefined"
+      >
+        Content Top
+      </div>
+    </div>
+    <div
+      className="css-0"
+    >
+      <div
+        className="placeholder placeholder--undefined"
+      >
+        Left Sidebar
+      </div>
+    </div>
+    <div
+      className="css-0"
+    >
+      <div
+        className="placeholder placeholder--undefined"
+      >
+        Main Content
+      </div>
+      <div
+        className="placeholder placeholder--short"
+      >
+        More Content
+      </div>
+    </div>
+  </main>
+  <footer
+    className="css-0"
+  >
+    <div
+      className="placeholder placeholder--short"
+    >
+      Footer
+    </div>
+  </footer>
+</div>
+`;

package/src/components/Text/Text.stories.mdx

@@ -0,0 +1,103 @@
+import {
+  ArgsTable,
+  Canvas,
+  Description,
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
+import { withDesign } from "storybook-addon-designs";
+
+import Text from "./Text";
+import { getCategory } from "../../utils/componentCategories";
+
+<Meta
+  title={getCategory("Text")}
+  component={Text}
+  decorators={[withDesign]}
+  parameters={{
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/?node-id=10733%3A56919",
+    },
+  }}
+  argTypes={{
+    className: { control: false },
+    isBold: { table: { defaultValue: { summary: false } } },
+    isItalic: { table: { defaultValue: { summary: false } } },
+    noSpace: { table: { defaultValue: { summary: false } } },
+    size: {
+      table: { defaultValue: { summary: "default" } },
+    },
+  }}
+/>
+
+# Text
+
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.25.1`   |
+| Latest            | `0.28.0`   |
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component Props](#component-props)
+- [Accessibility](#accessibility)
+
+## Overview
+
+<Description of={Text} />
+
+The `Text` component renders a basic `<p>` element. As its name indicates, the
+`size` prop controls the size of the text rendered in the component.
+
+## Component Props
+
+<Canvas withToolbar>
+  <Story
+    name="Text"
+    args={{
+      className: undefined,
+      size: "default",
+      isBold: false,
+      isItalic: false,
+      noSpace: false,
+    }}
+  >
+    {(args) => (
+      <>
+        <Text {...args}>
+          Animal Crossing[a] is a social simulation video game series developed
+          and published by Nintendo. The series was conceptualized and created
+          by Katsuya Eguchi and Hisashi Nogami. In Animal Crossing, the player
+          character is a human who lives in a village inhabited by various
+          anthropomorphic animals and can do various activities like fishing,
+          bug catching, and fossil hunting. The series is notable for its
+          open-ended gameplay and use of the video game console's internal clock
+          and calendar to simulate real passage of time.
+        </Text>
+        <Text {...args}>
+          Since its initial release in 2001, five Animal Crossing games have
+          been released worldwide, one each for the Nintendo 64/iQue Player
+          (enhanced and reissued for the GameCube), Nintendo DS, Wii, Nintendo
+          3DS and Nintendo Switch. The series has been both critically and
+          commercially successful and has sold over 60 million units worldwide.
+          Three spin-off games have also been released: Animal Crossing: Happy
+          Home Designer for Nintendo 3DS, Animal Crossing: Amiibo Festival for
+          Wii U, and Animal Crossing: Pocket Camp for mobile devices.
+        </Text>
+      </>
+    )}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Text" />
+
+## Accessibility
+
+The `Text` component renders paragraph `p` HTML elements which are inherently
+accessible and will be read by screen readers.
+
+Resources:
+
+- [Chakra UI Text](https://chakra-ui.com/docs/components/typography/text)

package/src/components/Text/Text.test.tsx

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
+
+import Text from "./Text";
+
+describe("Text Accessibility", () => {
+  it("passes axe accessibility test", async () => {
+    const { container } = render(<Text>Animal Crossing is all that!</Text>);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("Text", () => {
+  it("renders a <p> tag and text", () => {
+    render(<Text>Animal Crossing is all that!</Text>);
+    expect(
+      screen.getByText("Animal Crossing is all that!")
+    ).toBeInTheDocument();
+  });
+
+  it("throws a warning when no children are passed", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(<Text></Text>);
+    expect(warn).toHaveBeenCalledWith(
+      "NYPL Reservoir Text: No children were passed and the `Text` component " +
+        "will not render correctly."
+    );
+  });
+
+  it("renders the UI snapshot correctly", () => {
+    const defaultText = renderer
+      .create(<Text>Animal Crossing is all that!</Text>)
+      .toJSON();
+    const caption = renderer
+      .create(<Text size="caption">Animal Crossing is all that!</Text>)
+      .toJSON();
+    const tag = renderer
+      .create(<Text size="tag">Animal Crossing is all that!</Text>)
+      .toJSON();
+    const mini = renderer
+      .create(<Text size="mini">Animal Crossing is all that!</Text>)
+      .toJSON();
+    const withChakraProps = renderer
+      .create(
+        <Text p="20px" color="ui.error.primary">
+          Animal Crossing is all that!
+        </Text>
+      )
+      .toJSON();
+    const withOtherProps = renderer
+      .create(<Text data-testid="props">Animal Crossing is all that!</Text>)
+      .toJSON();
+
+    expect(defaultText).toMatchSnapshot();
+    expect(caption).toMatchSnapshot();
+    expect(tag).toMatchSnapshot();
+    expect(mini).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
+  });
+});

package/src/components/Text/Text.tsx

@@ -0,0 +1,50 @@
+import { Text as ChakraText, chakra, useStyleConfig } from "@chakra-ui/react";
+import * as React from "react";
+
+export type TextSizes = "default" | "caption" | "tag" | "mini";
+
+export interface TextProps {
+  /** Additional class name to render in the `Text` component. */
+  className?: string;
+  /** Optional prop used to show bolded text */
+  isBold?: boolean;
+  /** Optional prop used to show itlicized text */
+  isItalic?: boolean;
+  /** Optional prop used to remove default spacing */
+  noSpace?: boolean;
+  /** Optional prop to control the text styling */
+  size?: TextSizes;
+}
+
+export const Text = chakra((props: React.PropsWithChildren<TextProps>) => {
+  const {
+    children,
+    className = "",
+    isBold,
+    isItalic,
+    noSpace,
+    size = "default",
+    ...rest
+  } = props;
+  const styles = useStyleConfig("Text", {
+    variant: size,
+    isBold,
+    isItalic,
+    noSpace,
+  });
+
+  if (!children) {
+    console.warn(
+      "NYPL Reservoir Text: No children were passed and the `Text` component " +
+        "will not render correctly."
+    );
+  }
+
+  return (
+    <ChakraText className={className} sx={styles} {...rest}>
+      {children}
+    </ChakraText>
+  );
+});
+
+export default Text;

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

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Text renders the UI snapshot correctly 1`] = `
+<p
+  className="chakra-text css-1xdhyk6"
+>
+  Animal Crossing is all that!
+</p>
+`;
+
+exports[`Text renders the UI snapshot correctly 2`] = `
+<p
+  className="chakra-text css-1xdhyk6"
+>
+  Animal Crossing is all that!
+</p>
+`;
+
+exports[`Text renders the UI snapshot correctly 3`] = `
+<p
+  className="chakra-text css-1xdhyk6"
+>
+  Animal Crossing is all that!
+</p>
+`;
+
+exports[`Text renders the UI snapshot correctly 4`] = `
+<p
+  className="chakra-text css-1xdhyk6"
+>
+  Animal Crossing is all that!
+</p>
+`;
+
+exports[`Text renders the UI snapshot correctly 5`] = `
+<p
+  className="chakra-text css-kle7zy"
+>
+  Animal Crossing is all that!
+</p>
+`;
+
+exports[`Text renders the UI snapshot correctly 6`] = `
+<p
+  className="chakra-text css-1xdhyk6"
+  data-testid="props"
+>
+  Animal Crossing is all that!
+</p>
+`;