@nypl/design-system-react-components 0.25.0 → 0.25.4

package/src/components/Card/_Card.scss

@@ -1,308 +0,0 @@
-.card {
-  align-items: flex-start;
-  display: flex;
-  flex-flow: column wrap;
-
-  .card__image {
-    margin-bottom: var(--space-s);
-    width: 100%;
-
-    &--small {
-      margin-left: auto;
-      margin-right: auto;
-      max-width: 165px;
-    }
-
-    &--medium {
-      margin-left: auto;
-      margin-right: auto;
-      max-width: 225px;
-    }
-
-    &--large {
-      margin-left: auto;
-      margin-right: auto;
-      max-width: 360px;
-    }
-
-    .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 {
-      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) {
-      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;
-
-      &: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);
-      }
-    }
-  }
-
-  &--center {
-    text-align: center;
-
-    /* stylelint-disable */
-    .card-actions {
-      justify-content: center;
-    }
-    /* stylelint-enable */
-    .card__body {
-      margin: auto;
-    }
-  }
-
-  &--with-border {
-    border: 1px solid var(--ui-gray-medium);
-
-    .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;
-    }
-  }
-
-  &.card--horizontal {
-    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) {
-      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);
-        }
-      }
-    }
-
-    &.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);
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-// Stories-only styles
-.sb-show-main {
-  .var-docs {
-    padding: 0 0 var(--space) 0;
-  }
-
-  .example-card {
-    .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;
-
-      .button {
-        width: 100%;
-      }
-
-      > * {
-        @include space-stack-xxs;
-      }
-    }
-
-    .book__filetype {
-      @include space-stack-s;
-    }
-
-    .book__description {
-      font-style: italic;
-    }
-  }
-}

package/src/components/Form/_Form.scss

@@ -1,67 +0,0 @@
-@mixin form-space-classes($map) {
-  @each $name, $id in $map {
-    &--spacing-#{$name} {
-      .form-field {
-        @include get-space-stack($id);
-      }
-
-      .form-row {
-        @include get-space-stack($id);
-
-        .form-field {
-          @include breakpoint($breakpoint-medium) {
-            &:not(:last-child) {
-              @include get-space-inline($id);
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-$sizes: (
-  "extra-extra-small": "xxs",
-  "extra-small": "xs",
-  "small": "s",
-  "medium": "m",
-  "large": "l",
-  "extra-large": "xl",
-);
-
-.form {
-  > .form-field {
-    &:not(:last-child) {
-      @include space-stack-l;
-    }
-  }
-
-  > .form-row {
-    &:not(:last-child) {
-      @include space-stack-l;
-    }
-
-    display: block;
-
-    @include breakpoint($breakpoint-medium) {
-      display: flex;
-    }
-
-    .form-field {
-      &:not(:last-child) {
-        @include space-stack-l;
-      }
-
-      @include breakpoint($breakpoint-medium) {
-        flex: 1 0;
-
-        &:not(:last-child) {
-          @include space-inline-l;
-          @include space-stack-none;
-        }
-      }
-    }
-  }
-
-  @include form-space-classes($sizes);
-}

package/src/components/HelperErrorText/HelperErrorText.stories.tsx

@@ -1,48 +0,0 @@
-import * as React from "react";
-
-import HelperErrorText from "./HelperErrorText";
-import { boolean } from "@storybook/addon-knobs";
-import { getCategory } from "../../utils/componentCategories";
-
-export default {
-  title: getCategory("HelperErrorText"),
-  component: HelperErrorText,
-};
-
-export const helperTextWithLink = () => (
-  <HelperErrorText id="helperTextWithLink" isError={false}>
-    {"If you're unsure of your size, please view the "}
-    <a href="#sizing-chart">Sizing Chart</a>
-  </HelperErrorText>
-);
-helperTextWithLink.parameters = {
-  jest: ["HelperErrorText.test.tsx"],
-};
-
-export const errorText = () => (
-  <HelperErrorText id="helpertextWithError" isError={true}>
-    Error Message
-  </HelperErrorText>
-);
-
-export const longHelperText = () => (
-  <HelperErrorText id="longHelperText" isError={false}>
-    {"Soufflé jujubes cupcake chocolate bar topping. Lollipop sesame snaps " +
-      "tootsie roll liquorice sweet chupa chups. Gummi bears tart sweet roll " +
-      "tiramisu biscuit cookie cake. Cookie chocolate jelly-o topping. Halvah " +
-      "bear claw wafer cupcake tiramisu ice cream tart gummi bears. Lemon drops " +
-      "chocolate cake croissant lemon drops gummies ice cream sugar plum."}
-  </HelperErrorText>
-);
-
-export const withAriaProps = () => (
-  <HelperErrorText
-    id="withAriaProps"
-    isError={true}
-    ariaAtomic={boolean("ariaAtomic", false)}
-    ariaLive="assertive"
-  >
-    {"We'll be making a water landing, "}
-    <span>{"but that's OK because this is a seaplane."}</span>
-  </HelperErrorText>
-);

package/src/components/HelperErrorText/_HelperErrorText.scss

@@ -1,9 +0,0 @@
-.helper-text {
-  @include space-stack-xs;
-
-  font-size: var(--font-size--1);
-
-  &--error {
-    color: var(--ui-error);
-  }
-}

package/src/components/Hero/_Hero.scss

@@ -1,256 +0,0 @@
-.hero {
-  background-color: var(--ui-gray-warm-xlight);
-}
-
-.hero--50-50 {
-  .hero__content {
-    @include wrapper;
-
-    align-items: center;
-    display: flex;
-    flex-flow: column nowrap;
-    padding: 0 var(--space) var(--space) var(--space);
-
-    @include breakpoint($breakpoint-large) {
-      flex-flow: row nowrap;
-      padding: unset;
-    }
-  }
-
-  .hero__image {
-    margin-bottom: var(--space-s);
-
-    @include breakpoint($breakpoint-large) {
-      margin-bottom: unset;
-      margin-right: var(--space-s);
-      max-width: 50%;
-    }
-  }
-}
-
-.hero--primary {
-  align-items: center;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  min-height: 350px;
-
-  @include breakpoint($breakpoint-medium) {
-    flex-flow: row nowrap;
-  }
-
-  .hero__content {
-    background-color: var(--ui-black);
-    color: var(--ui-white);
-    flex: 0 0 100%;
-    padding: var(--space-xxl) var(--space-l);
-
-    a {
-      color: inherit;
-      display: inline-block;
-    }
-
-    @include breakpoint($breakpoint-medium) {
-      flex: 0 0 60%;
-      max-width: 960px;
-    }
-
-    + .placeholder {
-      flex: 0 1 200px;
-      margin-left: var(--space-xl);
-    }
-  }
-
-  .hero__heading,
-  .hero__body-text {
-    @include space-stack-none;
-  }
-}
-
-.hero--secondary {
-  overflow-x: hidden;
-
-  .hero__content {
-    @include wrapper;
-
-    display: flex;
-    flex-flow: column nowrap;
-
-    @include breakpoint($breakpoint-medium) {
-      flex-flow: row wrap;
-    }
-
-    .hero__heading {
-      @include space-stack-none;
-
-      background-color: var(--ui-black);
-      color: var(--ui-white);
-      flex: 1 1 100%;
-      margin-top: 0;
-      padding-bottom: var(--space-xxs);
-      position: relative;
-      z-index: 0;
-
-      &::before {
-        background-color: var(--ui-black);
-        content: "";
-        height: 100%;
-        left: -2000px;
-        position: absolute;
-        width: 4000px;
-        z-index: -1;
-      }
-
-      @include breakpoint($breakpoint-medium) {
-        order: 1;
-      }
-
-      .nypl--books-and-more & {
-        background-color: var(--section-books-and-more-primary);
-
-        &::before {
-          background-color: var(--section-books-and-more-primary);
-        }
-      }
-
-      .nypl--locations & {
-        background-color: var(--section-locations-primary);
-
-        &::before {
-          background-color: var(--section-locations-primary);
-        }
-      }
-
-      .nypl--research & {
-        background-color: var(--section-research-primary);
-
-        &::before {
-          background-color: var(--section-research-primary);
-        }
-      }
-
-      .nypl--whats-on & {
-        background-color: var(--section-whats-on-primary);
-
-        &::before {
-          background-color: var(--section-whats-on-primary);
-        }
-      }
-    }
-
-    .hero__body-text {
-      margin-top: var(--space-xs);
-
-      @include breakpoint($breakpoint-medium) {
-        @include space-inline-xs;
-
-        flex: 1 1 50%;
-        order: 2;
-      }
-    }
-
-    .hero__image {
-      flex: 1 1 100%;
-      height: 150px;
-      min-width: 0; // https://github.com/philipwalton/flexbugs/issues/41
-      object-fit: cover;
-      width: 100%;
-
-      @include breakpoint($breakpoint-medium) {
-        flex: 0 0 250px;
-        order: 3;
-      }
-    }
-  }
-}
-
-.hero--tertiary {
-  background-color: var(--ui-gray-xdark);
-
-  .hero__content {
-    @include wrapper;
-
-    color: var(--ui-white);
-    display: flex;
-    flex-flow: column nowrap;
-    padding: var(--space-l) var(--space);
-
-    /* stylelint-disable */
-    .hero__heading {
-      @include space-stack-s;
-
-      &:last-child {
-        @include space-stack-none;
-      }
-    }
-    /* stylelint-enable */
-    p {
-      @include space-stack-none;
-    }
-  }
-}
-
-.hero--campaign {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  margin-bottom: var(--space-xxl);
-  min-height: 300px;
-  overflow: visible;
-  padding: var(--space-l);
-  position: relative;
-
-  @include breakpoint($breakpoint-medium) {
-    padding: 0;
-  }
-
-  .hero__content {
-    align-items: center;
-    background-color: var(--ui-black);
-    color: var(--ui-white);
-    display: flex;
-    flex-flow: column nowrap;
-    min-height: 320px;
-
-    .interior {
-      flex: 0 0 100%;
-      padding: var(--space-l);
-
-      @include breakpoint($breakpoint-medium) {
-        flex: 0 0 50%;
-        max-width: 960px;
-      }
-    }
-
-    a {
-      color: inherit;
-      display: inline-block;
-    }
-
-    @include breakpoint($breakpoint-medium) {
-      flex: 0 0 90%;
-      flex-flow: row nowrap;
-      max-width: var(--breakpoint-xl);
-      position: relative;
-      top: var(--space-xxl);
-    }
-
-    + .placeholder {
-      flex: 0 1 200px;
-      margin-left: var(--space-xl);
-    }
-  }
-
-  /* stylelint-disable */
-  .hero__image {
-    flex: 1 1 100%;
-    min-width: 0; // https://github.com/philipwalton/flexbugs/issues/41
-    object-fit: cover;
-    width: 100%;
-
-    @include breakpoint($breakpoint-medium) {
-      flex: 0 0 50%;
-      height: 320px;
-    }
-  }
-}

package/src/components/HorizontalRule/_HorizontalRule.scss

@@ -1,15 +0,0 @@
-.horizontal-rule {
-  background-color: $gray-light;
-  border: 0;
-  height: 2px;
-  margin-bottom: var(--space-s);
-  margin-top: var(--space-s);
-
-  &--left {
-    margin-left: 0;
-  }
-
-  &--right {
-    margin-right: 0;
-  }
-}