@nypl/design-system-react-components 0.25.3 → 0.25.7

package/src/theme/foundations/breakpoints.ts

@@ -1,16 +1,16 @@
 import { createBreakpoints } from "@chakra-ui/theme-tools";
 
 /**
- * Breakpoints from "src/styles/base/_02-breakpoints.scss"
+ * Breakpoints from "src/styles/base/_01-breakpoints.scss"
  * How to use Chakra responsive styles: https://chakra-ui.com/docs/features/responsive-styles
  *
- * Chakra Value |     DS Variable      | EM/PX value
- * --------------------------------------------------
- *      sm      | --breakpoint-small   | 20em/320px
- *      md      | --breakpoint-medium  | 38em/600px
- *      lg      | --breakpoint-large   | 60em/960px
- *      xl      | --breakpoint-xl      | 80em/1280px
- *     2xl      |        N/A           | 96em/1536px
+ * Chakra Value |     DS Variable           | EM/PX value
+ * ------------------------------------------------------
+ *      sm      | --nypl-breakpoint-small   | 20em/320px
+ *      md      | --nypl-breakpoint-medium  | 38em/600px
+ *      lg      | --nypl-breakpoint-large   | 60em/960px
+ *      xl      | --nypl-breakpoint-xl      | 80em/1280px
+ *     2xl      |        N/A                | 96em/1536px
  *
  * @Note Chakra provides a 2xl option while the DS does not. We don't
  * recommend using this value until further notice.

package/src/theme/foundations/global.ts

@@ -7,12 +7,14 @@
 const global = {
   // styles for the `body` element
   body: {
+    boxSizing: "border-box",
     bg: "ui.white",
     color: "ui.black",
     fontFamily: "body",
-    fontSize: 0,
+    fontSize: "0",
     fontWeight: "300",
     lineHeight: "1.5",
+    overflowX: "hidden",
   },
   // styles for the `a` element
   a: {
@@ -21,6 +23,9 @@ const global = {
   svg: {
     display: "inline",
   },
+  p: {
+    margin: "0 0 var(--nypl-space-s",
+  },
 };
 
 export default global;

package/src/theme/index.ts

@@ -29,10 +29,12 @@ import Link from "./components/link";
 import List from "./components/list";
 import NotificationStyles from "./components/notification";
 import Pagination from "./components/pagination";
+import ProgressIndicator from "./components/progressIndicator";
 import Radio from "./components/radio";
 import RadioGroup from "./components/radioGroup";
 import SearchBar from "./components/searchBar";
 import { Skeleton, SkeletonLoader } from "./components/skeletonLoader";
+import CustomSlider from "./components/slider";
 import StatusBadge from "./components/statusBadge";
 import Tabs from "./components/tabs";
 import TemplateStyles from "./components/template";
@@ -93,11 +95,13 @@ const theme = extendTheme({
     List,
     ...NotificationStyles,
     Pagination,
+    ProgressIndicator,
     Radio,
     RadioGroup,
     SearchBar,
     Skeleton,
     SkeletonLoader,
+    CustomSlider,
     StatusBadge,
     Tabs,
     ...TemplateStyles,

package/src/utils/componentCategories.ts

@@ -3,7 +3,7 @@
 const categories = {
   basicContent: {
     title: "Components/Basic Elements",
-    components: ["Card", "CardEdition", "Hero", "Promo", "Sponsor", "Table"],
+    components: ["Card", "Hero", "Promo", "Sponsor", "Table"],
   },
   contentDisplay: {
     title: "Components/Content Display",
@@ -19,7 +19,7 @@ const categories = {
   },
   deprecated: {
     title: "Components/Deprecated",
-    components: [],
+    components: ["CardEdition", "Input"],
   },
   feedback: {
     title: "Components/Feedback",
@@ -43,7 +43,6 @@ const categories = {
       "Fieldset",
       "FileUploader",
       "Form",
-      "Input",
       "Label",
       "NumberInput",
       "Radio",
@@ -112,6 +111,7 @@ const categories = {
       "Breakpoints",
       "Buttons",
       "Colors",
+      "Design Tokens",
       "Forms",
       "Iconography",
       "Spacing",

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,77 +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 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;
-  }
-}