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

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

@@ -1,568 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Card Renders the UI snapshot correctly 1`] = `
-<div
-  className="css-1xdhyk6"
-  id="regularCard"
->
-  <div
-    className="css-0"
-  >
-    <img
-      alt="Alt text"
-      className="css-0"
-      src="https://placeimg.com/400/200/arch"
-    />
-  </div>
-  <div
-    className="card-body css-0"
-  >
-    <h3
-      className="chakra-heading css-1xdhyk6"
-      id="heading1"
-      layout="column"
-    >
-      The Card Heading
-    </h3>
-    <div
-      className="css-1xdhyk6"
-    >
-      middle column content
-    </div>
-    <div
-      className="css-1xdhyk6"
-    >
-      <button
-        className="chakra-button css-1xdhyk6"
-        data-testid="button"
-        id="button1"
-        onClick={[Function]}
-        type="submit"
-      >
-        Example CTA
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Card Renders the UI snapshot correctly 2`] = `
-<div
-  className="edition-card css-1xdhyk6"
-  id="cardWithExtendedStyles"
->
-  <div
-    className="css-0"
-  >
-    <img
-      alt="Alt text"
-      className="css-0"
-      src="https://placeimg.com/300/400/arch"
-    />
-  </div>
-  <div
-    className="card-body css-0"
-  >
-    <h2
-      className="chakra-heading css-1xdhyk6"
-      id="editioncardheading1"
-      layout="column"
-    >
-      The Card Heading
-    </h2>
-    <div
-      className="css-1xdhyk6"
-    >
-      <div>
-        Published in New York by Random House
-      </div>
-      <div>
-        Written in English
-      </div>
-      <div>
-        License: Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International
-      </div>
-    </div>
-    <div
-      className="css-1xdhyk6"
-    >
-      <a
-        className="css-1xdhyk6"
-        href="online"
-        id="link-online"
-        rel={null}
-        target={null}
-      >
-        Read Online
-      </a>
-      <a
-        className="css-1xdhyk6"
-        href="#url"
-        id="link-icon"
-        rel={null}
-        target={null}
-      >
-        <svg
-          aria-hidden={true}
-          className="chakra-icon css-1grhd2q"
-          focusable={false}
-          id="icon-cardWithExtendedStyles"
-          role="img"
-          title="download icon"
-          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>
-        Download
-      </a>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Card Renders the UI snapshot correctly 3`] = `
-<div
-  className="edition-card css-1xdhyk6"
-  id="cardWithNoCTAs"
->
-  <div
-    className="css-0"
-  >
-    <img
-      alt="Alt text"
-      className="css-0"
-      src="https://placeimg.com/300/400/arch"
-    />
-  </div>
-  <div
-    className="card-body css-0"
-  >
-    <h2
-      className="chakra-heading css-1xdhyk6"
-      id="editioncardheading1"
-      layout="column"
-    >
-      The Card Heading
-    </h2>
-    <div
-      className="css-1xdhyk6"
-    >
-      <p>
-        Published in New York by Random House
-      </p>
-      <p>
-        Written in English
-      </p>
-      <p>
-        Under Creative Commons License
-      </p>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Card Renders the UI snapshot correctly 4`] = `
-<div
-  className="edition-card css-1xdhyk6"
-  id="cardWithNoContent"
->
-  <div
-    className="css-0"
-  >
-    <img
-      alt="Alt text"
-      className="css-0"
-      src="https://placeimg.com/300/400/arch"
-    />
-  </div>
-  <div
-    className="card-body css-0"
-  >
-    <h2
-      className="chakra-heading css-1xdhyk6"
-      id="editioncardheading1"
-      layout="column"
-    >
-      <a
-        className="css-1xdhyk6"
-        href="#edition-link"
-        id="editioncardheading1-link"
-        rel={null}
-        target={null}
-      >
-        The Card Heading
-      </a>
-    </h2>
-    <div
-      className="css-1xdhyk6"
-    >
-      <a
-        className="css-1xdhyk6"
-        href="online"
-        id="link-online"
-        rel={null}
-        target={null}
-      >
-        Read Online
-      </a>
-      <a
-        className="css-1xdhyk6"
-        href="#url"
-        id="link-icon"
-        rel={null}
-        target={null}
-      >
-        <svg
-          aria-hidden={true}
-          className="chakra-icon css-1grhd2q"
-          focusable={false}
-          id="icon-cardWithNoContent"
-          role="img"
-          title="download icon"
-          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>
-        Download
-      </a>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Card Renders the UI snapshot correctly 5`] = `
-<div
-  className="edition-card css-1xdhyk6"
-  id="cardWithNoImage"
->
-  <div
-    className="card-body css-0"
-  >
-    <h2
-      className="chakra-heading css-1xdhyk6"
-      id="editioncardheading1"
-      layout="column"
-    >
-      <a
-        className="css-1xdhyk6"
-        href="#edition-link"
-        id="editioncardheading1-link"
-        rel={null}
-        target={null}
-      >
-        The Card Heading
-      </a>
-    </h2>
-    <div
-      className="css-1xdhyk6"
-    >
-      middle column content
-    </div>
-    <div
-      className="css-1xdhyk6"
-    >
-      <a
-        className="css-1xdhyk6"
-        href="online"
-        id="link-online"
-        rel={null}
-        target={null}
-      >
-        Read Online
-      </a>
-      <a
-        className="css-1xdhyk6"
-        href="#url"
-        id="link-icon"
-        rel={null}
-        target={null}
-      >
-        <svg
-          aria-hidden={true}
-          className="chakra-icon css-1grhd2q"
-          focusable={false}
-          id="icon-cardWithNoImage"
-          role="img"
-          title="download icon"
-          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>
-        Download
-      </a>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Card Renders the UI snapshot correctly 6`] = `
-<div
-  className="chakra-linkbox css-hng3kb"
->
-  <div
-    className="css-1xdhyk6"
-    id="fullclick"
-  >
-    <div
-      className="css-0"
-    >
-      <img
-        alt="Alt text"
-        className="css-0"
-        src="https://placeimg.com/400/200/arch"
-      />
-    </div>
-    <div
-      className="card-body css-0"
-    >
-      <h3
-        className="chakra-heading css-1xdhyk6"
-        id="heading1"
-        layout="column"
-      >
-        <a
-          className="chakra-linkbox__overlay css-kvj8dg"
-          href="http://nypl.org"
-        >
-          The Card Heading
-        </a>
-      </h3>
-      <div
-        className="css-1xdhyk6"
-      >
-        middle column content
-      </div>
-      <div
-        className="css-1xdhyk6"
-      >
-        <button
-          className="chakra-button css-1xdhyk6"
-          data-testid="button"
-          id="button1"
-          onClick={[Function]}
-          type="submit"
-        >
-          Example CTA
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Card Renders the UI snapshot correctly 7`] = `
-<div
-  className="css-1xdhyk6"
-  id="cardID"
->
-  <div
-    className="css-0"
-  >
-    <img
-      alt="Alt text"
-      className="css-0"
-      src="https://placeimg.com/400/200/arch"
-    />
-  </div>
-  <div
-    className="card-body css-0"
-  >
-    <h3
-      className="chakra-heading css-1xdhyk6"
-      id="heading1"
-      layout="column"
-    >
-      The Card Heading
-    </h3>
-    <div
-      className="css-1xdhyk6"
-    >
-      middle column content
-    </div>
-    <div
-      className="css-1xdhyk6"
-    >
-      <button
-        className="chakra-button css-1xdhyk6"
-        data-testid="button"
-        id="button1"
-        onClick={[Function]}
-        type="submit"
-      >
-        Example CTA
-      </button>
-    </div>
-    <div
-      className="css-1xdhyk6"
-    >
-      <button
-        className="chakra-button css-1xdhyk6"
-        data-testid="button"
-        id="button2"
-        onClick={[Function]}
-        type="submit"
-      >
-        Example CTA
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Card Renders the UI snapshot correctly 8`] = `
-<div
-  className="css-1t0bvx9"
-  id="chakraProps"
->
-  <div
-    className="css-0"
-  >
-    <img
-      alt="Alt text"
-      className="css-0"
-      src="https://placeimg.com/400/200/arch"
-    />
-  </div>
-  <div
-    className="card-body css-0"
-  >
-    <h3
-      className="chakra-heading css-1ss7kwh"
-      id="heading1"
-      layout="column"
-    >
-      The Card Heading
-    </h3>
-    <div
-      className="css-1rn2qcq"
-    >
-      middle column content
-    </div>
-    <div
-      className="css-1avkygu"
-    >
-      <button
-        className="chakra-button css-1xdhyk6"
-        data-testid="button"
-        id="button1"
-        onClick={[Function]}
-        type="submit"
-      >
-        Example CTA
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Card Renders the UI snapshot correctly 9`] = `
-<div
-  className="css-1xdhyk6"
-  data-testid="card-testid"
-  id="otherProps"
->
-  <div
-    className="css-0"
-  >
-    <img
-      alt="Alt text"
-      className="css-0"
-      src="https://placeimg.com/400/200/arch"
-    />
-  </div>
-  <div
-    className="card-body css-0"
-  >
-    <h3
-      className="chakra-heading css-1ss7kwh"
-      id="heading1"
-      layout="column"
-    >
-      The Card Heading
-    </h3>
-    <div
-      className="css-1xdhyk6"
-      data-testid="cardcontent-testid"
-    >
-      middle column content
-    </div>
-    <div
-      className="css-1xdhyk6"
-      data-testid="cardaction-testid"
-    >
-      <button
-        className="chakra-button css-1xdhyk6"
-        data-testid="button"
-        id="button1"
-        onClick={[Function]}
-        type="submit"
-      >
-        Example CTA
-      </button>
-    </div>
-  </div>
-</div>
-`;

package/src/components/Chakra/Box.stories.mdx

@@ -1,52 +0,0 @@
-import { Box } from "@chakra-ui/react";
-import { Canvas, Meta, Story } from "@storybook/addon-docs";
-
-import VideoPlayer from "../VideoPlayer/VideoPlayer";
-import { getCategory } from "../../utils/componentCategories";
-import DSProvider from "../../theme/provider";
-
-<Meta title={getCategory("Box")} component={Box} />
-
-# Box
-
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `0.24.0`   |
-
-Note: This needs the use of the `DSProvider` component. See the
-[README](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/story/chakra-ui--page#dsprovider)
-for more information.
-
-This component is directly exported from Chakra UI. The `Box` is a simple and
-composable component that can be used for many situations. By default it renders
-a `div` but can render another element using the `as` prop.
-
-All available props can be found on the [Style Props](https://chakra-ui.com/docs/features/style-props)
-guide on the Chakra UI site.
-
-<Canvas>
-  <Story
-    name="Box"
-    args={{
-      padding: "s",
-      bg: "var(--nypl-colors-brand-primary)",
-      color: "white",
-    }}
-  >
-    {(args) => <Box {...args}>This text is inside a `Box` component.</Box>}
-  </Story>
-</Canvas>
-
-## With VideoPlayer Component Example
-
-<Canvas>
-  <DSProvider>
-    <Box borderWidth="3px" padding="s" borderRadius="lg" overflow="hidden">
-      <VideoPlayer
-        videoId="nm-dD2tx6bk"
-        videoType="youTube"
-        aspectRatio="sixteenByNine"
-      />
-    </Box>
-  </DSProvider>
-</Canvas>

package/src/components/Chakra/Center.stories.mdx

@@ -1,96 +0,0 @@
-import { Box, Center, Circle, HStack, Square } from "@chakra-ui/react";
-import { Canvas, Meta, Story } from "@storybook/addon-docs";
-
-import Icon from "../Icons/Icon";
-import Image from "../Image/Image";
-import { getCategory } from "../../utils/componentCategories";
-import DSProvider from "../../theme/provider";
-
-<Meta title={getCategory("Center, Circle, Square")} component={Center} />
-
-# Center, Circle, Square
-
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `0.24.0`   |
-
-Note: This needs the use of the `DSProvider` component. See the
-[README](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/story/chakra-ui--page#dsprovider)
-for more information.
-
-These components are directly exported from Chakra UI. The `Center`, `Circle`,
-and `Square` are layout component that center their child.
-
-All available props can be found on the [Style Props](https://chakra-ui.com/docs/features/style-props)
-guide on the Chakra UI site.
-
-## Center
-
-<Canvas>
-  <Story
-    name="Center, Circle, Square"
-    args={{
-      padding: "s",
-      bg: "var(--nypl-colors-brand-primary)",
-      color: "var(--nypl-colors-ui-white)",
-    }}
-  >
-    {(args) => (
-      <Box>
-        Some text at the beginning.
-        <Center {...args}>
-          This text is centered inside a `Center` component.
-        </Center>
-        Some text at the end.
-      </Box>
-    )}
-  </Story>
-</Canvas>
-
-<Canvas>
-  <DSProvider>
-    <Center border="1px solid" borderColor="var(--nypl-colors-ui-gray-medium)">
-      <Image
-        alt="Centered Image"
-        size="medium"
-        src="https://placeimg.com/300/400/arch"
-      />
-    </Center>
-  </DSProvider>
-</Canvas>
-
-## Circle
-
-This component is similar to the `Center` component but it is always rendered as
-a circle.
-
-<Canvas>
-  <DSProvider>
-    <HStack spacing="s">
-      <Circle size="50px" bg="var(--nypl-colors-brand-secondary)">
-        <Icon name="download" color="ui.white" size="large" />
-      </Circle>
-      <Circle size="50px" bg="var(--nypl-colors-ui-link-primary)">
-        <Icon name="check" color="ui.white" size="large" />
-      </Circle>
-    </HStack>
-  </DSProvider>
-</Canvas>
-
-## Square
-
-This component is similar to the `Circle` component but always has equal height
-and width.
-
-<Canvas>
-  <DSProvider>
-    <HStack spacing="s">
-      <Square size="50px" bg="var(--nypl-colors-brand-secondary)">
-        <Icon name="download" color="ui.white" size="large" />
-      </Square>
-      <Square size="50px" bg="var(--nypl-colors-ui-link-primary)">
-        <Icon name="check" color="ui.white" size="large" />
-      </Square>
-    </HStack>
-  </DSProvider>
-</Canvas>