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

package/src/components/Heading/_Heading.scss

@@ -1,163 +0,0 @@
-//
-// Generic header styles:
-// All arguments are optional. If not defined, the defaults below will be used
-//
-
-@mixin heading-xl($color: inherit) {
-  color: #{$color};
-  font-size: var(--font-size-4);
-  font-weight: 300;
-  letter-spacing: 0;
-  line-height: 1.1;
-  margin: 0 0 0.5em;
-  width: auto;
-
-  &__link {
-    color: inherit;
-
-    &:hover {
-      color: inherit;
-    }
-  }
-}
-
-@mixin heading-large($color: inherit) {
-  color: #{$color};
-  font-size: var(--font-size-3);
-  font-weight: 500;
-  line-height: 1.25;
-  margin: 0 0 0.5em;
-  width: auto;
-
-  &__link {
-    color: inherit;
-
-    &:hover {
-      color: inherit;
-    }
-  }
-}
-
-@mixin heading-medium($color: inherit) {
-  color: #{$color};
-  font-size: var(--font-size-2);
-  font-weight: 500;
-  line-height: 1.25;
-  margin: 0 0 0.5em;
-  width: auto;
-
-  &__link {
-    color: inherit;
-
-    &:hover {
-      color: inherit;
-    }
-  }
-}
-
-@mixin heading-small($color: inherit) {
-  color: #{$color};
-  font-size: var(--font-size-1);
-  font-weight: 500;
-  line-height: 1.25;
-  margin: 0 0 0.5em;
-  width: auto;
-
-  &__link {
-    color: inherit;
-
-    &:hover {
-      color: inherit;
-    }
-  }
-}
-
-@mixin heading-xs($color: inherit) {
-  color: #{$color};
-  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;
-    }
-  }
-}
-
-.nypl-ds {
-  h1 {
-    @include heading-xl;
-  }
-
-  h2 {
-    @include heading-large;
-  }
-
-  h3 {
-    @include heading-medium;
-  }
-
-  h4 {
-    @include heading-small;
-  }
-
-  h5,
-  h6 {
-    @include heading-xs;
-  }
-
-  .heading {
-    &--primary {
-      @include heading-xl;
-    }
-
-    &--secondary {
-      @include heading-large;
-    }
-
-    &--tertiary {
-      @include heading-medium;
-    }
-
-    &--callout {
-      @include heading-xs;
-    }
-  }
-}
-
-.heading__link {
-  color: inherit;
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.heading-section {
-  &__more-link {
-    @include more-link;
-  }
-
-  &__heading {
-    &--has-link {
-      display: inline;
-    }
-
-    margin-right: var(--space-xs);
-  }
-}
-
-.page-title {
-  &__heading {
-    &--block-color {
-      background-color: var(--section-research-primary);
-      color: var(--ui-white);
-    }
-  }
-}

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/Icons/_Icons.scss

@@ -1,116 +0,0 @@
-@mixin icon {
-  display: inline-block;
-  fill: currentColor;
-  height: 24px;
-  width: 24px;
-
-  // ROTATION
-  &--rotate-180 {
-    transform: rotate(180deg);
-  }
-
-  &--rotate-270 {
-    transform: rotate(270deg);
-  }
-
-  &--rotate-0 {
-    transform: rotate(0deg);
-  }
-
-  &--rotate-90 {
-    transform: rotate(90deg);
-  }
-
-  // ALIGNMENT SPACING
-  &--left {
-    margin-right: var(--space-xxs);
-  }
-
-  &--right {
-    margin-left: var(--space-xxs);
-  }
-
-  // SIZE
-  &--xxxlarge {
-    height: var(--space-xxl);
-    width: var(--space-xxl);
-  }
-
-  &--xxlarge {
-    height: var(--space-xl);
-    width: var(--space-xl);
-  }
-
-  &--xlarge {
-    height: var(--space-l);
-    width: var(--space-l);
-  }
-
-  &--large {
-    height: var(--space-m);
-    width: var(--space-m);
-  }
-
-  &--medium {
-    height: 1.125rem;
-    width: 1.125rem;
-  }
-
-  &--small {
-    height: 0.875rem;
-    width: 0.875rem;
-  }
-
-  // FILL COLOR
-  &--ui-black {
-    fill: $black;
-  }
-
-  &--ui-white {
-    fill: $white;
-  }
-
-  &--brand-primary {
-    fill: $brand-primary;
-  }
-
-  &--brand-secondary {
-    fill: $brand-secondary;
-  }
-
-  &--section-whats-on-primary {
-    fill: $whats-on-primary;
-  }
-
-  &--section-books-and-more-primary {
-    fill: $books-and-more-primary;
-  }
-
-  &--section-research-primary {
-    fill: $research-primary;
-  }
-
-  &--section-research-secondary {
-    fill: $research-secondary;
-  }
-
-  &--section-locations-primary {
-    fill: $locations-primary;
-  }
-
-  &--section-research-library-lpa {
-    fill: $research-library-lpa;
-  }
-
-  &--section-research-library-schomburg {
-    fill: $research-library-schomburg;
-  }
-
-  &--section-research-library-schwartzman {
-    fill: $research-library-schwartzman;
-  }
-}
-
-.icon {
-  @include icon;
-}

package/src/components/Label/Label.stories.tsx

@@ -1,30 +0,0 @@
-import * as React from "react";
-
-import Label from "../Label/Label";
-import { text, select } from "@storybook/addon-knobs";
-import { getCategory } from "../../utils/componentCategories";
-
-export default {
-  title: getCategory("Label"),
-  component: Label,
-};
-
-export const label = () => (
-  <div style={{ width: "500px" }}>
-    <Label
-      htmlFor="some-input-element"
-      optReqFlag={select(
-        "Optional/Required Flag",
-        ["Required", "Optional", ""],
-        "Required"
-      )}
-      id="label"
-    >
-      {text("Input Label", "A label for a villager.")}
-    </Label>
-  </div>
-);
-
-label.parameters = {
-  jest: ["Label.test.tsx"],
-};

package/src/components/Label/_Label.scss

@@ -1,22 +0,0 @@
-.label {
-  @include space-stack-xs;
-
-  align-items: baseline;
-  display: flex;
-  font-weight: 500;
-  justify-content: space-between;
-
-  &__required-helper {
-    font-size: var(--font-size--1);
-    font-weight: 300;
-  }
-}
-
-.fieldset {
-  @include fieldset-reset;
-}
-
-.legend {
-  border: 0;
-  font-weight: 500;
-}

package/src/components/Link/_Link.scss

@@ -1,73 +0,0 @@
-@mixin link {
-  color: var(--ui-link-primary);
-
-  &--no-underline {
-    text-decoration: none;
-  }
-
-  &:hover {
-    color: var(--ui-link-secondary);
-  }
-
-  // .button links have a blue background
-  &.button {
-    color: var(--ui-white);
-  }
-
-  &[role="button"] {
-    cursor: pointer;
-  }
-
-  &--dark-background {
-    color: var(--ui-white);
-
-    &:hover {
-      color: var(--ui-gray-light);
-    }
-  }
-}
-
-@mixin more-link {
-  align-items: center;
-  color: var(--ui-link-primary);
-  display: inline-flex;
-  justify-content: space-between;
-  text-decoration: underline;
-
-  &:hover {
-    color: var(--ui-link-secondary);
-    text-decoration: underline;
-  }
-
-  &__icon {
-    @include icon;
-
-    height: var(--space-s);
-    text-decoration: none;
-    width: var(--space-s);
-
-    &--left {
-      margin-right: var(--space-xs);
-    }
-
-    &--right {
-      margin-left: var(--space-xs);
-    }
-
-    svg {
-      height: 100%;
-      width: 100%;
-    }
-  }
-}
-
-.nypl-ds {
-  a,
-  .link {
-    @include link;
-  }
-}
-
-.more-link {
-  @include more-link;
-}