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

package/src/components/Notification/_Notification.scss

@@ -1,110 +0,0 @@
-.notification {
-  border-radius: 4px;
-  display: flex;
-  font-size: var(--font-size--1);
-  margin: var(--space-s);
-  padding: var(--space) var(--space-l);
-  position: relative;
-
-  &__container {
-    margin: auto;
-    max-width: var(--breakpoint-large);
-    width: 100%;
-  }
-
-  .content {
-    &__container {
-      display: flex;
-      justify-content: center;
-    }
-  }
-
-  .notification-content {
-    width: 100%;
-  }
-
-  &--centered {
-    text-align: center;
-
-    header {
-      justify-content: center;
-    }
-
-    .content {
-      display: block;
-    }
-  }
-
-  &--no-margin {
-    border-radius: 0;
-    margin: 0;
-  }
-
-  &--standard {
-    background-color: var(--ui-status-primary);
-  }
-
-  &--announcement {
-    background-color: var(--ui-gray-light-cool);
-
-    .notification-heading {
-      color: var(--section-research-secondary);
-    }
-  }
-
-  &--warning {
-    background-color: var(--ui-gray-xx-light-cool);
-
-    .notification-heading {
-      color: var(--brand-primary);
-    }
-
-    .notification-content {
-      color: var(--brand-primary);
-    }
-  }
-
-  &--align-text {
-    .notification-content {
-      padding-left: calc(var(--space-m) + var(--space-s));
-    }
-  }
-
-  header {
-    display: flex;
-    margin-bottom: var(--space-s);
-
-    .notification-heading {
-      margin-bottom: 0;
-    }
-  }
-
-  .chakra-icon {
-    flex-shrink: 0;
-    margin-right: var(--space-s);
-  }
-
-  .dismissible-button {
-    align-items: center;
-    background-color: inherit;
-    color: var(--ui-black);
-    display: flex;
-    height: var(--space-l);
-    padding: 0;
-    position: absolute;
-    right: var(--space-xs);
-    top: var(--space-xs);
-    width: var(--space-l);
-
-    @include breakpoint($breakpoint-large) {
-      height: var(--space-m);
-      width: var(--space-m);
-    }
-
-    .chakra-icon {
-      height: var(--space-m);
-      margin-right: 0;
-      width: var(--space-m);
-    }
-  }
-}

package/src/components/Pagination/_Pagination.scss

@@ -1,40 +0,0 @@
-.pagination {
-  @include space-stack-l;
-
-  align-items: stretch;
-  display: flex;
-  width: 100%;
-
-  > * {
-    &:not(:last-child) {
-      @include space-inline-xs;
-    }
-  }
-
-  &__list {
-    @include list-reset;
-
-    display: flex;
-  }
-
-  &__item {
-    @include space-inline-xs;
-
-    list-style-type: none;
-  }
-
-  &__link {
-    line-height: 1.15;
-    text-decoration: none;
-
-    &.selected {
-      color: var(--ui-black);
-      pointer-events: none;
-    }
-
-    &.disabled {
-      color: var(--ui-gray-dark);
-      pointer-events: none;
-    }
-  }
-}

package/src/components/SkeletonLoader/_SkeletonLoader.scss

@@ -1,142 +0,0 @@
-@mixin skeleton-highlight {
-  animation: Pulsate 1000ms cubic-bezier(0.25, -0.5, 1, 0) infinite;
-  background: var(--ui-gray-light-warm);
-}
-
-.skeleton-loader {
-  margin: auto;
-  width: 100%;
-
-  .skeleton-section {
-    margin-bottom: var(--space-s);
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .skeleton-element {
-    border-radius: 2px;
-    box-sizing: border-box;
-    margin-bottom: var(--space-xs);
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .skeleton-loader-image {
-    @include skeleton-highlight;
-
-    box-sizing: border-box;
-    height: 0;
-    overflow: hidden;
-    padding-bottom: 100%;
-    position: relative;
-    width: 100%;
-
-    &--square {
-      padding-bottom: 100%;
-    }
-
-    &--portrait {
-      padding-bottom: 200%;
-    }
-
-    &--landscape {
-      padding-bottom: 50%;
-    }
-  }
-
-  .skeleton-loader-heading {
-    @include skeleton-highlight;
-
-    height: 32px;
-
-    &:last-child {
-      width: 80%;
-    }
-  }
-
-  .skeleton-loader-content {
-    @include skeleton-highlight;
-
-    height: 20px;
-
-    &:last-child {
-      width: 30%;
-    }
-  }
-
-  .skeleton-loader-button {
-    @include skeleton-highlight;
-
-    border-radius: 16px;
-    height: 32px;
-    margin: auto;
-    max-width: 160px;
-    width: 100%;
-  }
-
-  &--border {
-    border: 1px solid var(--ui-gray-light-cool);
-    padding: var(--space-s);
-  }
-
-  &--row {
-    @include breakpoint($breakpoint-medium) {
-      display: flex;
-
-      /* stylelint-disable */
-      .skeleton-section {
-        margin-right: var(--space-m);
-
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-
-      > .skeleton-section:first-child {
-        margin-bottom: 0;
-      }
-
-      .skeleton-loader-image {
-        height: 0;
-        overflow: visible;
-        padding-bottom: 0;
-        position: relative;
-        width: 220px;
-
-        &--square {
-          height: 220px;
-        }
-
-        &--portrait {
-          height: 440px;
-        }
-
-        &--landscape {
-          height: 110px;
-        }
-      }
-
-      .skeleton-loader-button {
-        margin: 0;
-      }
-    }
-  }
-}
-
-@keyframes Pulsate {
-  from {
-    opacity: 0.9;
-  }
-
-  50% {
-    opacity: 0.6;
-  }
-
-  to {
-    opacity: 0.9;
-  }
-}

package/src/components/VideoPlayer/_VideoPlayer.scss

@@ -1,38 +0,0 @@
-.video-player {
-  &__inside {
-    height: 0;
-    overflow: hidden;
-    padding-bottom: 56.25%;
-    position: relative;
-
-    &--four-by-three {
-      padding-bottom: 75%;
-    }
-
-    &--square {
-      padding-bottom: 100%;
-    }
-
-    &--errored {
-      background-color: var(--ui-gray-light-warm);
-      height: auto;
-      padding: var(--space-s);
-    }
-
-    iframe,
-    object,
-    embed {
-      height: 100%;
-      left: 0;
-      margin: auto;
-      position: absolute;
-      top: 0;
-      width: 100%;
-    }
-  }
-
-  > .helper-text {
-    margin-bottom: 0;
-    margin-top: var(--space-xs);
-  }
-}

package/src/styles/01-colors/_colors-brand.scss

@@ -1,62 +0,0 @@
-/** Brand Colors */
-
-// SASS Color Variables
-
-/* Brand fills are the NYPL primary and secondary colors */
-$brand-primary: #c60917;
-$brand-secondary: #760000;
-
-// What's On is used for Exhibitions & Events.
-$whats-on-primary: #242424;
-$whats-on-secondary: #000000;
-
-// Books and More is used for the Catalog, Staff Picks, Recommendations, New Arrivals, and E-Book Central.
-$books-and-more-primary: $brand-primary;
-$books-and-more-secondary: $brand-secondary;
-
-// Research is used for the Research Catalog and SCC.
-$research-primary: #00838a;
-$research-secondary: #006166;
-
-// Locations is used for Location Finder and all branch pages with the exceptions of some research libraries.
-$locations-primary: $brand-primary;
-$locations-secondary: $brand-secondary;
-
-// Blogs is used for Blog pages.
-$blogs-primary: #e0e0e0;
-$blogs-secondary: #bdbdbd;
-
-// Research libraries with specific brand colors to adhere to.
-$research-library-lpa: #005d53;
-$research-library-schomburg: #a03e31;
-$research-library-schwartzman: $brand-secondary;
-
-//Mapping where we associate a name string with each SASS var
-$colors_brand: (
-  primary: $brand-primary,
-  secondary: $brand-secondary,
-);
-
-$colors: (
-  brand-primary: $brand-primary,
-  brand-secondary: $brand-secondary,
-  whats-on-primary: $whats-on-primary,
-  whats-on-secondary: $whats-on-secondary,
-  books-and-more-primary: $books-and-more-primary,
-  books-and-more-secondary: $books-and-more-secondary,
-  research-primary: $research-primary,
-  research-secondary: $research-secondary,
-  locations-primary: $locations-primary,
-  locations-secondary: $locations-secondary,
-  blogs-primary: $blogs-primary,
-  blogs-secondary: $blogs-secondary,
-  research-library-lpa: $research-library-lpa,
-  research-library-schomburg: $research-library-schomburg,
-  research-library-schwartzman: $research-library-schwartzman,
-);
-
-/* CSS Variables/Custom Properties */
-:root {
-  @include css-vars($colors_brand, "brand");
-  @include css-vars($colors, "section");
-}

package/src/styles/01-colors/_colors-utility.scss

@@ -1,67 +0,0 @@
-/** Utility Colors */
-
-// SASS Color Variables
-
-$black: #000000;
-$white: #ffffff;
-
-// Grayscale
-$gray-xdark: #424242;
-$gray-dark: #616161;
-$gray-medium: #bdbdbd;
-$gray-light-cool: #e0e0e0;
-$gray-light-warm: #efedeb;
-$gray-x-light-cool: #f5f5f5;
-$gray-x-light-warm: #f8f8f7;
-$gray-xx-light-cool: #fafafa;
-
-// State and link utilities
-$disabled-primary: #e0e0e0;
-$disabled-secondary: #fafafa;
-$error-primary: #97272c;
-$error-secondary: #6f0106;
-$focus: #4181f1;
-$link-primary: #0576d3;
-$link-secondary: #004b98;
-$status-primary: #f9e08e;
-$status-secondary: #fbe7e1;
-$success-primary: #077719;
-$success-secondary: #095212;
-$test: #ff6347;
-$warning-primary: #f0974e;
-$warning-secondary: #ec7b1f;
-
-// Mapping where we associate a name string with each SASS var.
-// Quotes around "black" and "white" are required to force SASS to treat
-// these as string values and not CSS color values to convert to HEX format.
-$colors: (
-  "black": $black,
-  "white": $white,
-  gray-xdark: $gray-xdark,
-  gray-dark: $gray-dark,
-  gray-medium: $gray-medium,
-  gray-light-cool: $gray-light-cool,
-  gray-light-warm: $gray-light-warm,
-  gray-x-light-cool: $gray-x-light-cool,
-  gray-x-light-warm: $gray-x-light-warm,
-  gray-xx-light-cool: $gray-xx-light-cool,
-  disabled-primary: $disabled-primary,
-  disabled-secondary: $disabled-secondary,
-  error-primary: $error-primary,
-  error-secondary: $error-secondary,
-  focus: $focus,
-  link-primary: $link-primary,
-  link-secondary: $link-secondary,
-  status-primary: $status-primary,
-  status-secondary: $status-secondary,
-  success-primary: $success-primary,
-  success-secondary: $success-secondary,
-  test: $test,
-  warning-primary: $warning-primary,
-  warning-secondary: $warning-secondary,
-);
-
-/* CSS Variables/Custom Properties */
-:root {
-  @include css-vars($colors, "ui");
-}

package/src/styles/02-typography/_type-scale.css

@@ -1,11 +0,0 @@
-/** Type scale information to keep our font-sizes consistent across the system */
-:root {
-  --font-size--3: 0.625rem;
-  --font-size--2: 0.75rem;
-  --font-size--1: 0.875rem;
-  --font-size-0: 1rem;
-  --font-size-1: 1.125rem;
-  --font-size-2: 1.375rem;
-  --font-size-3: 1.75rem;
-  --font-size-4: 2.25rem;
-}

package/src/styles/02-typography/_type-weight.css

@@ -1,7 +0,0 @@
-/** Type weight information to keep font-weight values consistent across the system */
-:root {
-  --font-weight-light: 300;
-  --font-weight-regular: 400;
-  --font-weight-medium: 500;
-  --font-weight-bold: 700;
-}

package/src/styles/02-typography/_typefaces.css

@@ -1,4 +0,0 @@
-:root {
-  --typeface-body: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
-  --typeface-heading: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
-}

package/src/styles/03-space/_space-stack.scss

@@ -1,116 +0,0 @@
-/**
- * --space-xxs: calc(--space / 4);   //  4px
- * --space-xs: calc(--space / 2);    //  8px
- * --space-s: calc(--space * 1);     // 16px
- * --space-m: calc(--space * 1.5);   // 24px
- * --space-l: calc(--space * 2);     // 32px
- * --space-xl: calc(--space * 3);    // 48px
- * --space-xxl: calc(--space * 4);   // 64px
- * --space-xxxl: -calc(-space * 6);  // 96px
- */
-
-@mixin space-stack-none {
-  margin-bottom: 0;
-}
-
-@mixin space-stack-xxs {
-  margin-bottom: var(--space-xxs);
-}
-
-@mixin space-stack-xs {
-  margin-bottom: var(--space-xs);
-}
-
-@mixin space-stack-s {
-  margin-bottom: var(--space-s);
-}
-
-@mixin space-stack-m {
-  margin-bottom: var(--space-m);
-}
-
-@mixin space-stack-l {
-  margin-bottom: var(--space-l);
-}
-
-@mixin space-stack-xl {
-  margin-bottom: var(--space-xl);
-}
-
-@mixin space-stack-xxl {
-  margin-bottom: var(--space-xxl);
-}
-
-@mixin space-stack-xxxl {
-  margin-bottom: var(--space-xxxl);
-}
-
-@mixin space-stack-page {
-  @include space-stack-l;
-
-  @include breakpoint($breakpoint-large) {
-    @include space-stack-xl;
-  }
-
-  &--full {
-    @include space-stack-xxl;
-
-    @include breakpoint($breakpoint-large) {
-      @include space-stack-xxxl;
-    }
-  }
-}
-
-@mixin remove-stack-page {
-  margin-top: calc(-1 * #{$space-l});
-
-  @include breakpoint($breakpoint-large) {
-    margin-top: calc(-1 * #{$space-xl});
-  }
-
-  &--full {
-    margin-top: calc(-1 * #{$space-xxl});
-
-    @include breakpoint($breakpoint-large) {
-      margin-top: calc(-1 * #{$space-xxxl});
-    }
-  }
-}
-
-@mixin get-space-stack($id) {
-  @if $id == "none" {
-    @include space-stack-none;
-  }
-
-  @if $id == "xxs" {
-    @include space-stack-xxs;
-  }
-
-  @if $id == "xs" {
-    @include space-stack-xs;
-  }
-
-  @if $id == "s" {
-    @include space-stack-s;
-  }
-
-  @if $id == "m" {
-    @include space-stack-m;
-  }
-
-  @if $id == "l" {
-    @include space-stack-l;
-  }
-
-  @if $id == "xl" {
-    @include space-stack-xl;
-  }
-
-  @if $id == "xxl" {
-    @include space-stack-xxl;
-  }
-
-  @if $id == "xxxl" {
-    @include space-stack-xxxl;
-  }
-}

package/src/styles/03-space/_space.css

@@ -1,30 +0,0 @@
-:root {
-  /** Spacing */
-  --space: 1rem;
-
-  /** Spacing variants */
-
-  /** 4px */
-  --space-xxs: calc(var(--space) / 4);
-
-  /** 8px */
-  --space-xs: calc(var(--space) / 2);
-
-  /** 16px */
-  --space-s: calc(var(--space) * 1);
-
-  /** 24px */
-  --space-m: calc(var(--space) * 1.5);
-
-  /** 32px */
-  --space-l: calc(var(--space) * 2);
-
-  /** 48px */
-  --space-xl: calc(var(--space) * 3);
-
-  /** 64px */
-  --space-xxl: calc(var(--space) * 4);
-
-  /** 96px */
-  --space-xxxl: calc(var(--space) * 6);
-}

package/src/styles/base/_card-grid.scss

@@ -1,78 +0,0 @@
-@mixin cards--spacing {
-  // Select all immediate children except the last
-  > *:not(:last-child) {
-    @include space-stack-s;
-
-    @include breakpoint($breakpoint-large) {
-      @include space-stack-none;
-
-      // Now, also remove children that are a multiple of 3.
-      // Add margin between columns.
-      &:not(:nth-child(3n)) {
-        @include space-inline-l;
-      }
-
-      // Now, also remove the second and third-to-last items from selection.
-      // Then add margin between rows.
-      &:not(:nth-last-child(2)):not(:nth-last-child(3)) {
-        @include space-stack-l;
-      }
-    }
-  }
-
-  &--full {
-    @include breakpoint($breakpoint-large) {
-      > *:nth-child(3n) {
-        @include space-stack-xxl;
-      }
-
-      > *:not(:last-child):not(:nth-last-child(2)):not(:nth-last-child(3)) {
-        @include space-stack-xxl;
-      }
-
-      > *:nth-child(3n
-          + 2):not(:last-child):not(:nth-child(3n)):not(:nth-last-child(2)) {
-        @include space-stack-xxl;
-      }
-    }
-  }
-}
-
-.card-grid {
-  @include space-stack-page;
-
-  &__cards {
-    @include list-reset;
-    @include cards--spacing;
-
-    display: flex;
-    flex-flow: column nowrap;
-
-    @include breakpoint($breakpoint-large) {
-      flex-flow: row wrap;
-
-      > * {
-        flex: 0 0 30%;
-      }
-
-      > .featured-card {
-        flex: 1 0 31%;
-      }
-    }
-
-    &--bg-color {
-      @include wrapper($v-padding: var(--space-s), $h-padding: var(--space-s));
-
-      @include breakpoint($breakpoint-large) {
-        @include wrapper(
-          $v-padding: var(--space-xxl),
-          $h-padding: var(--space-xxl)
-        );
-      }
-
-      > *:last-child {
-        @include space-stack-none;
-      }
-    }
-  }
-}