@nypl/design-system-react-components 0.25.2 → 0.25.6

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

@@ -0,0 +1,410 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card Renders the UI snapshot correctly 1`] = `
+<div
+  className="css-0"
+  id="regularCard"
+>
+  <div
+    className="the-wrap  css-0"
+  >
+    <div
+      className="the-crop css-0"
+    >
+      <img
+        alt="Alt text"
+        className="css-0"
+        src="https://placeimg.com/400/200/arch"
+      />
+    </div>
+  </div>
+  <div
+    className="card-body css-0"
+  >
+    <h3
+      className="chakra-heading css-0"
+      id="heading1"
+    >
+      The Card Heading
+    </h3>
+    <div
+      className="css-0"
+    >
+      middle column content
+    </div>
+    <div
+      className="css-0"
+    >
+      <button
+        className="chakra-button css-0"
+        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-0"
+  id="cardWithExtendedStyles"
+>
+  <div
+    className="the-wrap  css-0"
+  >
+    <div
+      className="the-crop css-0"
+    >
+      <img
+        alt="Alt text"
+        className="css-0"
+        src="https://placeimg.com/300/400/arch"
+      />
+    </div>
+  </div>
+  <div
+    className="card-body css-0"
+  >
+    <h2
+      className="chakra-heading css-0"
+      id="editioncardheading1"
+    >
+      The Card Heading
+    </h2>
+    <div
+      className="css-0"
+    >
+      <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-0"
+    >
+      <a
+        className="css-0"
+        href="online"
+        id="link-online"
+      >
+        Read Online
+      </a>
+      <a
+        className="css-0"
+        href="#url"
+        id="link-icon"
+      >
+        <svg
+          aria-hidden={true}
+          className="chakra-icon css-onkibi"
+          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-0"
+  id="cardWithNoCTAs"
+>
+  <div
+    className="the-wrap  css-0"
+  >
+    <div
+      className="the-crop css-0"
+    >
+      <img
+        alt="Alt text"
+        className="css-0"
+        src="https://placeimg.com/300/400/arch"
+      />
+    </div>
+  </div>
+  <div
+    className="card-body css-0"
+  >
+    <h2
+      className="chakra-heading css-0"
+      id="editioncardheading1"
+    >
+      The Card Heading
+    </h2>
+    <div
+      className="css-0"
+    >
+      <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-0"
+  id="cardWithNoContent"
+>
+  <div
+    className="the-wrap  css-0"
+  >
+    <div
+      className="the-crop css-0"
+    >
+      <img
+        alt="Alt text"
+        className="css-0"
+        src="https://placeimg.com/300/400/arch"
+      />
+    </div>
+  </div>
+  <div
+    className="card-body css-0"
+  >
+    <h2
+      className="chakra-heading css-0"
+      id="editioncardheading1"
+    >
+      <a
+        className="chakra-link css-1xdhyk6"
+        href="#edition-link"
+      >
+        The Card Heading
+      </a>
+    </h2>
+    <div
+      className="css-0"
+    >
+      <a
+        className="css-0"
+        href="online"
+        id="link-online"
+      >
+        Read Online
+      </a>
+      <a
+        className="css-0"
+        href="#url"
+        id="link-icon"
+      >
+        <svg
+          aria-hidden={true}
+          className="chakra-icon css-onkibi"
+          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-0"
+  id="cardWithNoImage"
+>
+  <div
+    className="card-body css-0"
+  >
+    <h2
+      className="chakra-heading css-0"
+      id="editioncardheading1"
+    >
+      <a
+        className="chakra-link css-1xdhyk6"
+        href="#edition-link"
+      >
+        The Card Heading
+      </a>
+    </h2>
+    <div
+      className="css-0"
+    >
+      middle column content
+    </div>
+    <div
+      className="css-0"
+    >
+      <a
+        className="css-0"
+        href="online"
+        id="link-online"
+      >
+        Read Online
+      </a>
+      <a
+        className="css-0"
+        href="#url"
+        id="link-icon"
+      >
+        <svg
+          aria-hidden={true}
+          className="chakra-icon css-onkibi"
+          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-10n1vic"
+>
+  <div
+    className="css-0"
+    id="fullclick"
+  >
+    <div
+      className="the-wrap  css-0"
+    >
+      <div
+        className="the-crop css-0"
+      >
+        <img
+          alt="Alt text"
+          className="css-0"
+          src="https://placeimg.com/400/200/arch"
+        />
+      </div>
+    </div>
+    <div
+      className="card-body css-0"
+    >
+      <h3
+        className="chakra-heading css-0"
+        id="heading1"
+      >
+        <a
+          className="chakra-linkbox__overlay css-1hnz6hu"
+          href="http://nypl.org"
+        >
+          The Card Heading
+        </a>
+      </h3>
+      <div
+        className="css-0"
+      >
+        middle column content
+      </div>
+      <div
+        className="css-0"
+      >
+        <button
+          className="chakra-button css-0"
+          data-testid="button"
+          id="button1"
+          onClick={[Function]}
+          type="submit"
+        >
+          Example CTA
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/CardEdition/CardEdition.stories.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { action } from "@storybook/addon-actions";
-import { text, boolean, select } from "@storybook/addon-knobs";
 
 import CardEdition from "./CardEdition";
 import Heading from "../Heading/Heading";
@@ -24,10 +23,6 @@ export default {
   component: CardEdition,
 };
 
-let showCTAs, showImage, showHeader, showFooter;
-
-const headerLevels = [1, 2, 3, 4, 5, 6];
-
 const imageRatios = {
   "1x1": "https://placeimg.com/100/100/animals",
   "2x1": "https://placeimg.com/200/100/animals",
@@ -39,48 +34,23 @@ const imageRatios = {
 
 export const cardEdition = () => (
   <>
-    {boolean("Show Header", true) ? (showHeader = true) : (showHeader = false)}
-    {boolean("Show Image", true) ? (showImage = true) : (showImage = false)}
-    {boolean("Show CTAs", true) ? (showCTAs = true) : (showCTAs = false)}
-    {boolean("Show Footer", true) ? (showFooter = true) : (showFooter = false)}
     <CardEdition
       id="cardID"
-      heading={
-        showHeader ? (
-          <Heading
-            level={select("Header Level", headerLevels, headerLevels[2])}
-            id="heading1"
-            text={text("Header Content", "Optional Header")}
-          />
-        ) : (
-          false
-        )
-      }
-      image={
-        showImage ? (
-          <Image
-            src={select("Image Ratio", imageRatios, imageRatios[2])}
-            alt={""}
-          />
-        ) : null
-      }
+      heading={<Heading level={2} id="heading1" text="Header Content" />}
+      image={<Image src={imageRatios[2]} alt="" />}
       ctas={
-        showCTAs ? (
-          <Button
-            onClick={action("clicked")}
-            id="button1"
-            buttonType={ButtonTypes.Primary}
-            type="submit"
-          >
-            {text("CTA Button Text: ", "Example CTA")}
-          </Button>
-        ) : null
-      }
-      footer={
-        showFooter ? <>{text("Footer content: ", "Optional footer")}</> : null
+        <Button
+          onClick={action("clicked")}
+          id="button1"
+          buttonType={ButtonTypes.Primary}
+          type="submit"
+        >
+          CTA Button Text
+        </Button>
       }
+      footer={<>Footer content: </>}
     >
-      {text("Card Content: ", "Middle column content")}
+      Card Content:
     </CardEdition>
   </>
 );
@@ -90,8 +60,7 @@ cardEdition.storyName = "CardEdition";
 cardEdition.parameters = {
   design: {
     type: "figma",
-    url:
-      "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=17167%3A58131",
+    url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=17167%3A58131",
   },
 };
 
@@ -117,7 +86,7 @@ export const ExampleCardEdition = () => (
       <Heading
         level={HeadingLevels.Two}
         id="heading1"
-        text={"The Year of Magical Thinking"}
+        text="The Year of Magical Thinking"
       />
       <div className="book__callout">A portrait of loss and grief</div>
       <div>
@@ -148,7 +117,6 @@ ExampleCardEdition.storyName = "Example Card Edition";
 ExampleCardEdition.parameters = {
   design: {
     type: "figma",
-    url:
-      "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=17167%3A58131",
+    url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=17167%3A58131",
   },
 };

package/src/components/CardEdition/_CardEdition.scss

@@ -1,12 +1,12 @@
 .card-edition {
-  @include space-stack-s;
+  margin-bottom: var(--nypl-space-s);
 
   align-items: flex-start;
-  border: 1px solid var(--ui-gray-light-cool);
+  border: 1px solid var(--nypl-colors-ui-gray-light-cool);
   border-radius: 5px;
   display: flex;
   flex-flow: column wrap;
-  padding: var(--space) var(--space-l);
+  padding: var(--nypl-space-s) var(--nypl-space-l);
 
   &__heading,
   &__footer {
@@ -19,20 +19,20 @@
     justify-content: space-between;
     width: 100%;
 
-    @include breakpoint($breakpoint-medium) {
+    @include breakpoint($nypl-breakpoint-medium) {
       flex-flow: row wrap;
     }
   }
 
   &__columns + &__footer {
-    margin-top: var(--space-xs);
+    margin-top: var(--nypl-space-xs);
   }
 
   &__image {
-    @include space-stack-s;
+    margin-bottom: var(--nypl-space-s);
 
     align-items: center;
-    background-color: var(--ui-gray-x-light-cool);
+    background-color: var(--nypl-colors-ui-gray-x-light-cool);
     display: flex;
     flex: 0 0 150px;
     height: 150px;
@@ -43,9 +43,9 @@
       max-width: 100%;
     }
 
-    @include breakpoint($breakpoint-medium) {
-      @include space-stack-none;
-      @include space-inline-s;
+    @include breakpoint($nypl-breakpoint-medium) {
+      margin-bottom: 0;
+      margin-right: var(--nypl-space-s);
 
       align-self: center;
       width: 150px;
@@ -53,45 +53,44 @@
   }
 
   &__content {
-    @include space-stack-s;
+    margin-bottom: var(--nypl-space-s);
 
     flex: 1 1;
 
-    @include breakpoint($breakpoint-medium) {
-      @include space-inline-s;
-      @include space-stack-none;
+    @include breakpoint($nypl-breakpoint-medium) {
+      margin-right: var(--nypl-space-s);
+      margin-bottom: 0;
     }
   }
 
   &__ctas {
     flex: 0 1 20%;
 
-    @include breakpoint($breakpoint-medium) {
-      @include space-inline-s;
+    @include breakpoint($nypl-breakpoint-medium) {
+      margin-right: var(--nypl-space-s);
     }
   }
 
   &__content + &__ctas {
-    @include space-inline-s;
+    margin-right: var(--nypl-space-s);
   }
 }
 
 // Stories-only styles
 .sb-show-main {
   .var-docs {
-    padding: 0 0 var(--space) 0;
+    padding: 0 0 var(--nypl-space-s) 0;
   }
 
   .example-card-edition {
     .card__content {
       > * {
-        @include space-stack-xxs;
+        margin-bottom: var(--nypl-space-xxs);
       }
     }
 
     .book__callout {
-      // formerly imported with @include heading-xs;
-      font-size: var(--font-size-1);
+      font-size: var(--nypl-fontSizes-1);
       font-weight: 400;
       line-height: 1.15;
       margin: 0 0 0.5em;
@@ -123,12 +122,12 @@
       }
 
       > * {
-        @include space-stack-xxs;
+        margin-bottom: var(--nypl-space-xxs);
       }
     }
 
     .book__filetype {
-      @include space-stack-s;
+      margin-bottom: var(--nypl-space-s);
     }
 
     .book__description {

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

@@ -7,6 +7,7 @@ import {
   VideoPlayerTypes,
   VideoPlayerAspectRatios,
 } from "../VideoPlayer/VideoPlayerTypes";
+import DSProvider from "../../theme/provider";
 
 <Meta title={getCategory("Box")} component={Box} />
 
@@ -16,7 +17,8 @@ import {
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
 
-Note: This needs the use of the `DSProvider` component. See the [README](https://github.com/NYPL/nypl-design-system#using-the-design-system-in-your-product)
+Note: This needs the use of the `DSProvider` component. See the
+[README](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/chakra-ui--page#dsprovider)
 for more information.
 
 This component is directly exported from Chakra UI. The `Box` is a simple and
@@ -30,28 +32,25 @@ guide on the Chakra UI site.
   <Story
     name="Box"
     args={{
-      p: "5",
+      padding: "s",
       bg: "var(--nypl-colors-brand-primary)",
       color: "white",
     }}
   >
-    {(args) => (
-      <Box {...args}>
-        So when I look up at the stars, I just wonder...what will they all
-        become someday?
-      </Box>
-    )}
+    {(args) => <Box {...args}>This text is inside a `Box` component.</Box>}
   </Story>
 </Canvas>
 
 ## With VideoPlayer Component Example
 
 <Canvas>
-  <Box borderWidth="3px" padding="6" borderRadius="lg" overflow="hidden">
-    <VideoPlayer
-      videoId="nm-dD2tx6bk"
-      videoType={VideoPlayerTypes.YouTube}
-      aspectRatio={VideoPlayerAspectRatios.SixteenByNine}
-    />
-  </Box>
+  <DSProvider>
+    <Box borderWidth="3px" padding="s" borderRadius="lg" overflow="hidden">
+      <VideoPlayer
+        videoId="nm-dD2tx6bk"
+        videoType={VideoPlayerTypes.YouTube}
+        aspectRatio={VideoPlayerAspectRatios.SixteenByNine}
+      />
+    </Box>
+  </DSProvider>
 </Canvas>