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

package/src/components/Card/_Card.scss

@@ -1,78 +1,250 @@
 .card {
-  @include space-stack-s;
-
   align-items: flex-start;
-  border: 1px solid var(--ui-gray-light);
-  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;
+  .card__image {
+    margin-bottom: var(--space-s);
     width: 100%;
 
-    @include breakpoint($breakpoint-medium) {
-      flex-flow: row wrap;
+    &--small {
+      margin-left: auto;
+      margin-right: auto;
+      max-width: 165px;
     }
-  }
 
-  &__columns + &__footer {
-    margin-top: var(--space-xs);
-  }
+    &--medium {
+      margin-left: auto;
+      margin-right: auto;
+      max-width: 225px;
+    }
 
-  &__image {
-    @include space-stack-s;
+    &--large {
+      margin-left: auto;
+      margin-right: auto;
+      max-width: 360px;
+    }
 
-    align-items: center;
-    background-color: var(--ui-gray-xlight);
-    display: flex;
-    flex: 0 0 150px;
-    height: 150px;
-    justify-content: center;
+    .image-wrap {
+      box-sizing: border-box;
+      height: 0;
+      overflow: hidden;
+      padding-bottom: 100%;
+      position: relative;
+      width: 100%;
+
+      &--sixteen-by-nine {
+        padding-bottom: 56.25%;
+      }
+
+      &--three-by-two {
+        padding-bottom: 66.66%;
+      }
+
+      &--two-by-one {
+        padding-bottom: 50%;
+      }
+
+      &--four-by-three {
+        padding-bottom: 75%;
+      }
+
+      &--square {
+        padding-bottom: 100%;
+      }
+
+      &--three-by-four {
+        padding-bottom: 133.33%;
+      }
+
+      &--one-by-two {
+        padding-bottom: 200%;
+      }
+    }
+
+    .image-crop {
+      box-sizing: border-box;
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
 
     .image {
-      max-height: 100%;
-      max-width: 100%;
+      box-sizing: border-box;
+      display: block;
+      height: 100%;
+      object-fit: cover;
+      position: relative;
+      width: 100%;
+    }
+
+    &--original {
+      height: auto;
+      overflow: hidden;
+      padding-bottom: 0;
+
+      .image-crop {
+        height: auto;
+        position: relative;
+      }
+
+      .image {
+        object-fit: none;
+      }
     }
+  }
 
+  .card__body {
     @include breakpoint($breakpoint-medium) {
-      @include space-stack-none;
-      @include space-inline-s;
+      display: block;
+      flex-flow: row nowrap;
+    }
+
+    .card-content {
+      @include space-stack-s;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .card-actions {
+      @include space-stack-s;
+
+      column-gap: var(--space-xs);
+      display: flex;
 
-      align-self: center;
-      width: 150px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      &--top-border {
+        border-top: 1px solid var(--ui-gray-medium);
+        padding-top: var(--space-xs);
+      }
+
+      &--bottom-border {
+        border-bottom: 1px solid var(--ui-gray-medium);
+        padding-bottom: var(--space-xs);
+      }
     }
   }
 
-  &__content {
-    @include space-stack-s;
+  &--center {
+    text-align: center;
+
+    /* stylelint-disable */
+    .card-actions {
+      justify-content: center;
+    }
+    /* stylelint-enable */
+    .card__body {
+      margin: auto;
+    }
+  }
 
-    flex: 1 1;
+  &--with-border {
+    border: 1px solid var(--ui-gray-medium);
 
-    @include breakpoint($breakpoint-medium) {
-      @include space-inline-s;
-      @include space-stack-none;
+    .card__body {
+      padding: var(--space-s);
+    }
+
+    &.card--has-image {
+      .card__body {
+        padding: 0 var(--space-s) var(--space-s);
+      }
+    }
+  }
+
+  &--at-end {
+    .card__image {
+      margin-bottom: 0;
+      margin-top: var(--space-s);
+      order: 2;
     }
   }
 
-  &__ctas {
-    flex: 0 1 20%;
+  &.card--row {
+    display: flex;
+    flex-flow: column nowrap;
+    max-width: 100%;
+    text-align: left;
+
+    /* stylelint-disable */
+    .card-actions {
+      justify-content: left;
+    }
+    /* stylelint-enable */
+    &.card--center {
+      align-items: center;
+
+      .card__body {
+        margin: 0;
+      }
+    }
 
     @include breakpoint($breakpoint-medium) {
-      @include space-inline-s;
+      flex-flow: row;
+    }
+
+    .card__image {
+      @include breakpoint($breakpoint-medium) {
+        flex: 0 0 225px;
+        margin: 0 var(--space-m) 0 0;
+        max-width: 50%;
+
+        &--small {
+          flex: 0 0 165px;
+        }
+
+        &--medium {
+          flex: 0 0 225px;
+        }
+
+        &--large {
+          flex: 0 0 360px;
+        }
+      }
+    }
+
+    &.card--at-end {
+      .card__image {
+        margin: var(--space-m) 0 0;
+
+        @include breakpoint($breakpoint-medium) {
+          margin: 0 0 0 var(--space-m);
+        }
+      }
     }
-  }
 
-  &__content + &__ctas {
-    @include space-inline-s;
+    &.card--with-border {
+      .card__body {
+        padding: var(--space-s);
+      }
+
+      &.card--has-image {
+        .card__body {
+          padding: 0 var(--space-s) var(--space-s);
+
+          @include breakpoint($breakpoint-medium) {
+            padding: var(--space-s) var(--space-s) var(--space-s) 0;
+          }
+        }
+
+        &.card--at-end {
+          .card__body {
+            padding: var(--space-s) var(--space-s) 0;
+
+            @include breakpoint($breakpoint-medium) {
+              padding: var(--space-s) 0 var(--space-s) var(--space-s);
+            }
+          }
+        }
+      }
+    }
   }
 }
 
@@ -90,18 +262,31 @@
     }
 
     .book__callout {
-      @include heading-xs;
+      // 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%;

package/src/components/{Card/Card.stories.tsx → CardEdition/CardEdition.stories.tsx}

@@ -2,19 +2,26 @@ import * as React from "react";
 import { action } from "@storybook/addon-actions";
 import { text, boolean, select } from "@storybook/addon-knobs";
 
-import Card from "./Card";
+import CardEdition from "./CardEdition";
 import Heading from "../Heading/Heading";
+import { HeadingLevels } from "../Heading/HeadingTypes";
 import Image from "../Image/Image";
 import Button from "../Button/Button";
 import Link from "../Link/Link";
 import Icon from "../Icons/Icon";
-import { IconRotationTypes, IconNames } from "../Icons/IconTypes";
+import {
+  IconRotationTypes,
+  IconNames,
+  IconSizes,
+  IconAlign,
+} from "../Icons/IconTypes";
 import { LinkTypes } from "../Link/LinkTypes";
 import { ButtonTypes } from "../Button/ButtonTypes";
+import { getCategory } from "../../utils/componentCategories";
 
 export default {
-  title: "Card",
-  component: Card,
+  title: getCategory("CardEdition"),
+  component: CardEdition,
 };
 
 let showCTAs, showImage, showHeader, showFooter;
@@ -30,13 +37,13 @@ const imageRatios = {
   "16x9": "https://placeimg.com/400/225/animals",
 };
 
-export const card = () => (
+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)}
-    <Card
+    <CardEdition
       id="cardID"
       heading={
         showHeader ? (
@@ -74,13 +81,13 @@ export const card = () => (
       }
     >
       {text("Card Content: ", "Middle column content")}
-    </Card>
+    </CardEdition>
   </>
 );
 
-card.storyName = "Card";
+cardEdition.storyName = "CardEdition";
 
-card.parameters = {
+cardEdition.parameters = {
   design: {
     type: "figma",
     url:
@@ -88,9 +95,9 @@ card.parameters = {
   },
 };
 
-export const ExampleCard = () => (
-  <Card
-    className="example-card"
+export const ExampleCardEdition = () => (
+  <CardEdition
+    className="example-card-edition"
     image={<Image src="https://placeimg.com/300/400/arch" alt={""} />}
     ctas={
       <>
@@ -107,7 +114,11 @@ export const ExampleCard = () => (
     }
   >
     <>
-      <Heading level={2} id="heading1" text={"The Year of Magical Thinking"} />
+      <Heading
+        level={HeadingLevels.Two}
+        id="heading1"
+        text={"The Year of Magical Thinking"}
+      />
       <div className="book__callout">A portrait of loss and grief</div>
       <div>
         By <Link href="#joan-didion">Joan Didion</Link>,{" "}
@@ -116,11 +127,11 @@ export const ExampleCard = () => (
       </div>
       <div className="book__filetype">
         <Icon
-          name={IconNames.headset}
-          decorative={true}
-          modifiers={["left", "small"]}
-          iconRotation={IconRotationTypes.rotate0}
-        ></Icon>
+          name={IconNames.Headset}
+          size={IconSizes.Small}
+          align={IconAlign.Left}
+          iconRotation={IconRotationTypes.Rotate0}
+        />
         Audiobook
       </div>
       <div className="book__description">
@@ -129,16 +140,15 @@ export const ExampleCard = () => (
         <Link href="#">Read More</Link>
       </div>
     </>
-  </Card>
+  </CardEdition>
 );
 
-ExampleCard.storyName = "Example Card";
+ExampleCardEdition.storyName = "Example Card Edition";
 
-ExampleCard.parameters = {
+ExampleCardEdition.parameters = {
   design: {
     type: "figma",
     url:
       "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=17167%3A58131",
   },
-  jest: ["Card.test.tsx"],
 };