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

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

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

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

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