@nypl/design-system-react-components 0.25.8 → 0.25.11

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

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

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

@@ -1,137 +0,0 @@
-.card-edition {
-  margin-bottom: var(--nypl-space-s);
-
-  align-items: flex-start;
-  border: 1px solid var(--nypl-colors-ui-gray-light-cool);
-  border-radius: 5px;
-  display: flex;
-  flex-flow: column wrap;
-  padding: var(--nypl-space-s) var(--nypl-space-l);
-
-  &__heading,
-  &__footer {
-    flex: 100%;
-  }
-
-  &__columns {
-    display: flex;
-    flex-flow: column wrap;
-    justify-content: space-between;
-    width: 100%;
-
-    @include breakpoint($nypl-breakpoint-medium) {
-      flex-flow: row wrap;
-    }
-  }
-
-  &__columns + &__footer {
-    margin-top: var(--nypl-space-xs);
-  }
-
-  &__image {
-    margin-bottom: var(--nypl-space-s);
-
-    align-items: center;
-    background-color: var(--nypl-colors-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($nypl-breakpoint-medium) {
-      margin-bottom: 0;
-      margin-right: var(--nypl-space-s);
-
-      align-self: center;
-      width: 150px;
-    }
-  }
-
-  &__content {
-    margin-bottom: var(--nypl-space-s);
-
-    flex: 1 1;
-
-    @include breakpoint($nypl-breakpoint-medium) {
-      margin-right: var(--nypl-space-s);
-      margin-bottom: 0;
-    }
-  }
-
-  &__ctas {
-    flex: 0 1 20%;
-
-    @include breakpoint($nypl-breakpoint-medium) {
-      margin-right: var(--nypl-space-s);
-    }
-  }
-
-  &__content + &__ctas {
-    margin-right: var(--nypl-space-s);
-  }
-}
-
-// Stories-only styles
-.sb-show-main {
-  .var-docs {
-    padding: 0 0 var(--nypl-space-s) 0;
-  }
-
-  .example-card-edition {
-    .card__content {
-      > * {
-        margin-bottom: var(--nypl-space-xxs);
-      }
-    }
-
-    .book__callout {
-      font-size: var(--nypl-fontSizes-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%;
-      }
-
-      > * {
-        margin-bottom: var(--nypl-space-xxs);
-      }
-    }
-
-    .book__filetype {
-      margin-bottom: var(--nypl-space-s);
-    }
-
-    .book__description {
-      font-style: italic;
-    }
-  }
-}