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

package/src/components/Template/_Template.scss

@@ -1,63 +0,0 @@
-$sidebar-width: 25%;
-$sidebar-width-s: calc(25% - calc(4 * var(--space-s)));
-
-.main {
-  @include wrapper;
-
-  display: block; // Fix for IE weirdness
-
-  &--with-sidebar {
-    display: flex;
-    flex-flow: column nowrap;
-
-    @include breakpoint($breakpoint-medium) {
-      flex-flow: row wrap;
-    }
-  }
-}
-
-.content-header {
-  @include breakout;
-
-  width: 100vw;
-}
-
-.content-top {
-  flex: 1 0 100%;
-}
-
-.content-primary {
-  flex: 1 1;
-  width: 100%;
-
-  &--with-sidebar-left {
-    display: flex;
-    flex-flow: column nowrap;
-    order: 1;
-
-    @include breakpoint($breakpoint-medium) {
-      @include space-inline-none;
-
-      min-width: 0;
-    }
-  }
-}
-
-.content-secondary {
-  flex: 0 0 $sidebar-width;
-
-  @include breakpoint($breakpoint-medium) {
-    order: 1;
-
-    &--with-sidebar-left {
-      @include space-inline-l;
-
-      flex-basis: $sidebar-width-s;
-    }
-
-    &--with-sidebar-right {
-      flex-basis: $sidebar-width-s;
-      margin-left: var(--space-l);
-    }
-  }
-}

package/src/components/TextInput/_TextInput.scss

@@ -1,59 +0,0 @@
-$break-input-mobile: 400px;
-
-.textinput {
-  @include space-stack-xs;
-
-  .inputfield {
-    @include placeholder {
-      color: var(--ui-gray-dark);
-      font-style: italic;
-      line-height: 21px;
-    }
-
-    border: 1px solid var(--ui-gray-medium);
-    padding: var(--space-xs) var(--space-s);
-    width: 100%;
-
-    &--textarea {
-      line-height: 1.5;
-      min-height: var(--space-xxl);
-    }
-
-    &:hover {
-      border-color: var(--ui-gray-dark);
-    }
-
-    &:disabled {
-      background-color: var(--ui-gray-xxlight);
-      color: var(--ui-gray-xdark);
-      pointer-events: none;
-    }
-
-    &:active,
-    &:focus,
-    &:active:hover,
-    &:focus:hover {
-      border: 1px solid var(--ui-focus);
-      box-shadow: 0;
-      outline: 1px solid var(--ui-focus);
-      z-index: 9999;
-    }
-
-    &--error {
-      border: 1px solid var(--ui-error);
-
-      &:hover,
-      &:active,
-      &:focus,
-      &:active:hover,
-      &:focus:hover {
-        border: 1px solid var(--ui-error);
-      }
-    }
-  }
-
-  > .helper-text {
-    margin-bottom: 0;
-    margin-top: var(--space-xs);
-  }
-}

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-warm-light);
-      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,56 +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;
-
-// 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,
-  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,65 +0,0 @@
-/** Utility Colors */
-
-// SASS Color Variables
-
-$black: #000000;
-$white: #ffffff;
-
-// Grayscale
-$gray-xdark: #424242;
-$gray-dark: #616161;
-$gray-medium: #bdbdbd;
-$gray-light: #e0e0e0;
-$gray-warm-light: #efedeb;
-$gray-xlight: #f5f5f5;
-$gray-warm-xlight: #f8f8f7;
-$gray-xxlight: #fafafa;
-
-// State and link utilities
-$disabled-primary: #e0e0e0;
-$disabled-secondary: #fafafa;
-$error: #97272c;
-$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: $gray-light,
-  gray-warm-light: $gray-warm-light,
-  gray-xlight: $gray-xlight,
-  gray-warm-xlight: $gray-warm-xlight,
-  gray-xxlight: $gray-xxlight,
-  disabled-primary: $disabled-primary,
-  disabled-secondary: $disabled-secondary,
-  error: $error,
-  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/_04-base.scss

@@ -1,19 +0,0 @@
-.nypl-ds {
-  box-sizing: border-box;
-  color: var(--ui-black);
-  font-family: var(--typeface-body);
-
-  // Sets up the base font-size, 1rem, for the system
-  font-size: 16px;
-  font-weight: 300;
-  line-height: 1.5;
-
-  // Users with non-overlay scrollbars have a small horiznotal scrollbar from our breakout mixin. Fix identified here: https://cloudfour.com/thinks/breaking-out-with-viewport-units-and-calc/#one-big-dumb-caveat
-  overflow-x: hidden;
-
-  *,
-  *::after,
-  *::before {
-    box-sizing: inherit;
-  }
-}

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;
-      }
-    }
-  }
-}

package/src/styles/base/_typography.scss

@@ -1,11 +0,0 @@
-// Create a mixin for paragraph styles that can be implemented
-// in components with other classnames.
-@mixin paragraph($margin: 0 0 var(--space)) {
-  margin: #{$margin};
-}
-
-.nypl-ds {
-  p {
-    @include paragraph;
-  }
-}

package/src/theme/components/customRadioGroup.ts

@@ -1,18 +0,0 @@
-const CustomRadioGroup = {
-  parts: ["required", "helper"],
-  baseStyle: {
-    legend: {
-      marginBottom: 4,
-    },
-    required: {
-      marginLeft: 6,
-    },
-    helper: {
-      marginTop: 4,
-    },
-  },
-  sizes: {},
-  defaultProps: {},
-};
-
-export default CustomRadioGroup;