@nypl/design-system-react-components 1.0.2 → 1.0.3-beta

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

@@ -1,342 +0,0 @@
-// 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

@@ -1,103 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,50 +0,0 @@
-// 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>
-`;