@nypl/design-system-react-components 0.23.4 → 0.25.1

package/src/components/CardEdition/CardEdition.test.tsx

@@ -0,0 +1,395 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import CardEdition from "./CardEdition";
+import Link from "../Link/Link";
+import { LinkTypes } from "../Link/LinkTypes";
+import Heading from "../Heading/Heading";
+import { HeadingLevels } from "../Heading/HeadingTypes";
+import Image from "../Image/Image";
+import Button from "../Button/Button";
+import { ButtonTypes } from "../Button/ButtonTypes";
+import Icon from "../Icons/Icon";
+import { IconRotationTypes, IconNames, IconAlign } from "../Icons/IconTypes";
+
+describe("CardEdition Accessibility", () => {
+  const regularCard = (
+    <CardEdition
+      id="cardID"
+      heading={
+        <Heading
+          level={HeadingLevels.Three}
+          id="heading1"
+          text={"Optional Header"}
+        />
+      }
+      image={<Image src="https://placeimg.com/400/200/arch" alt={""} />}
+      ctas={
+        <Button
+          onClick={function () {
+            console.log(this);
+          }}
+          id="button1"
+          buttonType={ButtonTypes.Primary}
+          type="submit"
+        >
+          Example CTA
+        </Button>
+      }
+      footer={<>Optional footer</>}
+    >
+      middle column content
+    </CardEdition>
+  );
+
+  it("passes axe accessibility test", async () => {
+    const { container } = render(regularCard);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("CardEdition", () => {
+  const regularCard = (
+    <CardEdition
+      id="cardID"
+      heading={
+        <Heading
+          level={HeadingLevels.Three}
+          id="heading1"
+          text={"Optional Header"}
+        />
+      }
+      image={<Image src="https://placeimg.com/400/200/arch" alt={""} />}
+      ctas={
+        <Button
+          onClick={function () {
+            console.log(this);
+          }}
+          id="button1"
+          buttonType={ButtonTypes.Primary}
+          type="submit"
+        >
+          Example CTA
+        </Button>
+      }
+      footer={<>Optional footer</>}
+    >
+      middle column content
+    </CardEdition>
+  );
+
+  const cardWithExtendedStyles = (
+    <CardEdition
+      id="card#1"
+      className="edition-card"
+      heading={
+        <Heading
+          level={HeadingLevels.Two}
+          id="editioncardheading1"
+          text={"2004 Edition"}
+        />
+      }
+      image={<Image src="https://placeimg.com/300/400/arch" alt={""} />}
+      ctas={
+        <div className="edition-card__ctas">
+          <Link type={LinkTypes.Button} href="blah">
+            Read Online
+          </Link>
+          <div className="edition-card__download">
+            <Link href="#url" type={LinkTypes.Action}>
+              <Icon
+                name={IconNames.Download}
+                // blockName="more-link"
+                align={IconAlign.Left}
+                iconRotation={IconRotationTypes.Rotate0}
+              />
+              Download
+            </Link>
+          </div>
+        </div>
+      }
+    >
+      <>
+        <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>
+      </>
+    </CardEdition>
+  );
+
+  const cardWithNoCTAs = (
+    <CardEdition
+      id="card#1"
+      image={<Image src="https://placeimg.com/300/400/arch" alt={""} />}
+      className="edition-card"
+      heading={
+        <Heading
+          level={HeadingLevels.Two}
+          id="editioncardheading1"
+          text={"2004 Edition"}
+        />
+      }
+    >
+      <>
+        <div>Published in New York by Random House</div>
+        <div>Written in English</div>
+        <div>Under Creative Commons License</div>
+      </>
+    </CardEdition>
+  );
+
+  const cardWithNoContent = (
+    <CardEdition
+      id="card#1"
+      className="edition-card"
+      image={<Image src="https://placeimg.com/300/400/arch" alt={""} />}
+      heading={
+        <Heading
+          level={HeadingLevels.Two}
+          id="editioncardheading1"
+          url="#edition-link"
+          text={"2004 Edition"}
+        />
+      }
+      ctas={
+        <div className="edition-card__ctas">
+          <Link type={LinkTypes.Button} href="blah">
+            Read Online
+          </Link>
+          <div className="edition-card__download">
+            <Link href="#url" type={LinkTypes.Action}>
+              <Icon
+                name={IconNames.Download}
+                // blockName="more-link"
+                align={IconAlign.Left}
+                iconRotation={IconRotationTypes.Rotate0}
+              />
+              Download
+            </Link>
+          </div>
+        </div>
+      }
+    ></CardEdition>
+  );
+
+  const cardWithNoImage = (
+    <CardEdition
+      id="card#1"
+      className="edition-card"
+      heading={
+        <Heading
+          level={HeadingLevels.Two}
+          id="editioncardheading1"
+          url="#edition-link"
+          text={"2004 Edition"}
+        />
+      }
+      ctas={
+        <div className="edition-card__ctas">
+          <Link type={LinkTypes.Button} href="blah">
+            Read Online
+          </Link>
+          <div className="edition-card__download">
+            <Link href="#url" type={LinkTypes.Action}>
+              <Icon
+                name={IconNames.Download}
+                align={IconAlign.Left}
+                iconRotation={IconRotationTypes.Rotate0}
+              />
+              Download
+            </Link>
+          </div>
+        </div>
+      }
+    >
+      middle column content
+    </CardEdition>
+  );
+
+  const cardWithNoHeader = (
+    <CardEdition
+      id="card#1"
+      className="edition-card"
+      image={<Image src="https://placeimg.com/300/400/arch" alt={""} />}
+      ctas={
+        <div className="edition-card__ctas">
+          <Link type={LinkTypes.Button} href="blah">
+            Read Online
+          </Link>
+          <div className="edition-card__download">
+            <Link href="#url" type={LinkTypes.Action}>
+              <Icon
+                name={IconNames.Download}
+                align={IconAlign.Left}
+                iconRotation={IconRotationTypes.Rotate0}
+              />
+              Download
+            </Link>
+          </div>
+        </div>
+      }
+      footer={<>Optional footer</>}
+    >
+      middle column content
+    </CardEdition>
+  );
+
+  const cardWithNoFooter = (
+    <CardEdition
+      id="card#1"
+      className="edition-card"
+      heading={
+        <Heading
+          level={HeadingLevels.Two}
+          id="editioncardheading1"
+          url="#edition-link"
+          text={"2004 Edition"}
+        />
+      }
+      image={<Image src="https://placeimg.com/300/400/arch" alt={""} />}
+      ctas={
+        <div className="edition-card__ctas">
+          <Link type={LinkTypes.Button} href="blah">
+            Read Online
+          </Link>
+          <div className="edition-card__download">
+            <Link href="#url" type={LinkTypes.Action}>
+              <Icon
+                name={IconNames.Download}
+                align={IconAlign.Left}
+                iconRotation={IconRotationTypes.Rotate0}
+              />
+              Download
+            </Link>
+          </div>
+        </div>
+      }
+    >
+      middle column content
+    </CardEdition>
+  );
+
+  it("Generates a Card with a header, footer, image, middle content, and CTAs", () => {
+    const card = render(regularCard);
+    expect(
+      card.container.querySelector(".card-edition__heading")
+    ).toBeInTheDocument();
+    expect(
+      card.container.querySelector(".card-edition__image")
+    ).toBeInTheDocument();
+    expect(
+      card.container.querySelector(".card-edition__content")
+    ).toBeInTheDocument();
+    expect(
+      card.container.querySelector(".card-edition__ctas")
+    ).toBeInTheDocument();
+    expect(
+      card.container.querySelector(".card-edition__footer")
+    ).toBeInTheDocument();
+  });
+
+  it("Generates a Card with variable data", () => {
+    const card = render(cardWithExtendedStyles);
+    expect(card.container.querySelector("h2")).toBeInTheDocument();
+    expect(
+      screen.getByText("Published in New York by Random House")
+    ).toBeInTheDocument();
+    expect(screen.getByText("Written in English")).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        "License: Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International"
+      )
+    ).toBeInTheDocument();
+    // expect(screen.findAllByRole("link")).toHaveLength(2);
+  });
+
+  it("Generates a card without a CTA block if one isn't provided", () => {
+    const card = render(cardWithNoCTAs);
+    expect(
+      card.container.querySelector(".card-edition__heading")
+    ).toBeInTheDocument();
+    expect(
+      card.container.querySelector(".card-edition__image")
+    ).toBeInTheDocument();
+    expect(
+      card.container.querySelector(".card-edition__content")
+    ).toBeInTheDocument();
+    expect(
+      card.container.querySelector(".card-edition__ctas")
+    ).not.toBeInTheDocument();
+  });
+
+  it("Generates a card without a content block if one isn't provided", () => {
+    const card = render(cardWithNoContent);
+    expect(
+      card.container.querySelector(".card-edition__heading")
+    ).toBeInTheDocument();
+    expect(
+      card.container.querySelector(".card-edition__image")
+    ).toBeInTheDocument();
+    expect(
+      card.container.querySelector(".card-edition__content")
+    ).not.toBeInTheDocument();
+    expect(
+      card.container.querySelector(".card-edition__ctas")
+    ).toBeInTheDocument();
+  });
+
+  it("Generates a card without an image block if no image is provided", () => {
+    const card = render(cardWithNoImage);
+    expect(
+      card.container.querySelector(".card-edition__heading")
+    ).toBeInTheDocument();
+    expect(
+      card.container.querySelector(".card-edition__image")
+    ).not.toBeInTheDocument();
+    expect(
+      card.container.querySelector(".card-edition__content")
+    ).toBeInTheDocument();
+    expect(
+      card.container.querySelector(".card-edition__ctas")
+    ).toBeInTheDocument();
+  });
+
+  it("Generates a card without a header block if one isn't provided", () => {
+    const card = render(cardWithNoHeader);
+    expect(
+      card.container.querySelector(".card-edition__heading")
+    ).not.toBeInTheDocument();
+    expect(
+      card.container.querySelector(".card-edition__image")
+    ).toBeInTheDocument();
+    expect(
+      card.container.querySelector(".card-edition__content")
+    ).toBeInTheDocument();
+    expect(
+      card.container.querySelector(".card-edition__ctas")
+    ).toBeInTheDocument();
+    expect(
+      card.container.querySelector(".card-edition__footer")
+    ).toBeInTheDocument();
+  });
+
+  it("Generates a card without a footer block if one isn't provided", () => {
+    const card = render(cardWithNoFooter);
+    expect(
+      card.container.querySelector(".card-edition__heading")
+    ).toBeInTheDocument();
+    expect(
+      card.container.querySelector(".card-edition__image")
+    ).toBeInTheDocument();
+    expect(
+      card.container.querySelector(".card-edition__content")
+    ).toBeInTheDocument();
+    expect(
+      card.container.querySelector(".card-edition__ctas")
+    ).toBeInTheDocument();
+    expect(
+      card.container.querySelector(".card-edition__footer")
+    ).not.toBeInTheDocument();
+  });
+});

package/src/components/CardEdition/CardEdition.tsx

@@ -0,0 +1,60 @@
+import * as React from "react";
+import bem from "../../utils/bem";
+
+interface CardEditionProps {
+  /** ClassName that appears in addition to "card" */
+  className?: string;
+  /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
+  blockName?: string;
+  /** Calls to Action for the card, such as "download" on a card for a book */
+  ctas?: React.ReactNode;
+  /** Footer that appears within the card but below the three columns within it */
+  footer?: React.ReactNode;
+  /** Heading that appears within the card but above the three columns within it */
+  heading?: React.ReactNode;
+  /** ID that other components can cross reference for accessibility purposes */
+  id?: string;
+  /** First column within the card */
+  image?: React.ReactNode;
+  /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
+  modifiers?: string[];
+}
+
+export default function CardEdition(
+  props: React.PropsWithChildren<CardEditionProps>
+) {
+  const {
+    blockName,
+    children,
+    className,
+    ctas,
+    footer,
+    heading,
+    id,
+    image,
+    modifiers = [],
+  } = props;
+  const baseClass = "card-edition";
+
+  return (
+    <div className={bem(baseClass, modifiers, blockName, [className])} id={id}>
+      {heading && (
+        <div className={bem("heading", modifiers, baseClass)}>{heading}</div>
+      )}
+      <div className={bem("columns", modifiers, baseClass)}>
+        {image && (
+          <div className={bem("image", modifiers, baseClass)}>{image}</div>
+        )}
+        {children && (
+          <div className={bem("content", modifiers, baseClass)}>{children}</div>
+        )}
+        {ctas && (
+          <div className={bem("ctas", modifiers, baseClass)}>{ctas}</div>
+        )}
+      </div>
+      {footer && (
+        <div className={bem("footer", modifiers, baseClass)}>{footer}</div>
+      )}
+    </div>
+  );
+}

package/src/components/CardEdition/_CardEdition.scss

@@ -0,0 +1,138 @@
+.card-edition {
+  @include space-stack-s;
+
+  align-items: flex-start;
+  border: 1px solid var(--ui-gray-light-cool);
+  border-radius: 5px;
+  display: flex;
+  flex-flow: column wrap;
+  padding: var(--space) var(--space-l);
+
+  &__heading,
+  &__footer {
+    flex: 100%;
+  }
+
+  &__columns {
+    display: flex;
+    flex-flow: column wrap;
+    justify-content: space-between;
+    width: 100%;
+
+    @include breakpoint($breakpoint-medium) {
+      flex-flow: row wrap;
+    }
+  }
+
+  &__columns + &__footer {
+    margin-top: var(--space-xs);
+  }
+
+  &__image {
+    @include space-stack-s;
+
+    align-items: center;
+    background-color: var(--ui-gray-x-light-cool);
+    display: flex;
+    flex: 0 0 150px;
+    height: 150px;
+    justify-content: center;
+
+    .image {
+      max-height: 100%;
+      max-width: 100%;
+    }
+
+    @include breakpoint($breakpoint-medium) {
+      @include space-stack-none;
+      @include space-inline-s;
+
+      align-self: center;
+      width: 150px;
+    }
+  }
+
+  &__content {
+    @include space-stack-s;
+
+    flex: 1 1;
+
+    @include breakpoint($breakpoint-medium) {
+      @include space-inline-s;
+      @include space-stack-none;
+    }
+  }
+
+  &__ctas {
+    flex: 0 1 20%;
+
+    @include breakpoint($breakpoint-medium) {
+      @include space-inline-s;
+    }
+  }
+
+  &__content + &__ctas {
+    @include space-inline-s;
+  }
+}
+
+// Stories-only styles
+.sb-show-main {
+  .var-docs {
+    padding: 0 0 var(--space) 0;
+  }
+
+  .example-card-edition {
+    .card__content {
+      > * {
+        @include space-stack-xxs;
+      }
+    }
+
+    .book__callout {
+      // formerly imported with @include heading-xs;
+      font-size: var(--font-size-1);
+      font-weight: 400;
+      line-height: 1.15;
+      margin: 0 0 0.5em;
+      width: auto;
+
+      &__link {
+        color: inherit;
+
+        &:hover {
+          color: inherit;
+        }
+      }
+
+      /* stylelint-disable */
+      font-style: italic;
+      font-weight: 300;
+      /* stylelint-enable */
+    }
+
+    .card__ctas {
+      align-items: flex-end;
+      display: flex;
+      flex-flow: row wrap;
+      justify-content: center;
+      text-align: center;
+
+      .button {
+        width: 100%;
+      }
+
+      > * {
+        @include space-stack-xxs;
+      }
+    }
+
+    .book__filetype {
+      @include space-stack-s;
+    }
+
+    .book__description {
+      font-style: italic;
+    }
+  }
+}

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

@@ -0,0 +1,57 @@
+import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
+import { Box } from "@chakra-ui/react";
+
+import { getCategory } from "../../utils/componentCategories";
+import VideoPlayer from "../VideoPlayer/VideoPlayer";
+import {
+  VideoPlayerTypes,
+  VideoPlayerAspectRatios,
+} from "../VideoPlayer/VideoPlayerTypes";
+
+<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://github.com/NYPL/nypl-design-system#using-the-design-system-in-your-product)
+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={{
+      p: "5",
+      bg: "var(--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>
+    )}
+  </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>
+</Canvas>