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

package/src/docs/Intro.stories.mdx

@@ -4,40 +4,47 @@ import { HeroTypes } from "../components/Hero/HeroTypes.tsx";
 import Heading from "../components/Heading/Heading.tsx";
 import Image from "../components/Image/Image.tsx";
 import getCSSVariable from "../helpers/getCSSVariable";
+import DSProvider from "../theme/provider";
 
 <Meta title="Introduction" />
 
 # NYPL Design System
 
-## @nypl/design-system-react-components
+<DSProvider>
+  <Hero
+    heroType={HeroTypes.FiftyFifty}
+    subHeaderText="With 92 locations across the Bronx, Manhattan, and Staten Island, The New York Public Library is an essential part of neighborhoods across the city. Visit us today."
+    image={
+      <Image
+        src="https://cdn-d8.nypl.org/s3fs-public/styles/2_1_960/public/2020-07/SASB_06_29_2020_Lions_mask-00207%20copy_0.jpeg?h=c8e955ed&itok=n_GLQgoe"
+        alt=""
+      />
+    }
+    backgroundColor={getCSSVariable("--section-books-and-more-primary")}
+    foregroundColor={getCSSVariable("--ui-white")}
+  />
+</DSProvider>
+
+<br />
 
 Welcome to the New York Public Library's Design System React component library.
-This design system is NYPL’s open-source extensible React library for products
-and experiences with accessibility as its foundation. It ships functional,
-stateless components with consistent NYPL styling. You can learn more about the
-project and its goals [here](https://confluence.nypl.org/display/DIGTL/NYPL+Design+System).
+This design system is NYPL's open-source extensible React library for products
+and experiences, with accessibility as its foundation. It ships functional components
+with consistent NYPL styling. You can learn more about the project and its goals
+[on our Confluence page](https://confluence.nypl.org/display/DIGTL/NYPL+Design+System)
+(needs a log in).
 
 The best way to get started is through the [Design System's Wiki](https://github.com/NYPL/nypl-design-system/wiki)
-to learn how about design and implementation at NYPL. The following Hero is just
+to learn about design and implementation at NYPL. The Hero above is just
 one example of how we use the NYPL Design System on NYPL.org.
 
-<Hero
-  heroType={HeroTypes.FiftyFifty}
-  subHeaderText="With 92 locations across the Bronx, Manhattan, and Staten Island, The New York Public Library is an essential part of neighborhoods across the city. Visit us today."
-  image={
-    <Image
-      src="https://cdn-d8.nypl.org/s3fs-public/styles/2_1_960/public/2020-07/SASB_06_29_2020_Lions_mask-00207%20copy_0.jpeg?h=c8e955ed&itok=n_GLQgoe"
-      blockName={"hero"}
-      alt={""}
-    />
-  }
-  backgroundColor={getCSSVariable("--section-books-and-more-primary")}
-  foregroundColor={getCSSVariable("--ui-white")}
-/>
+For your convenience, the DS components have been organized into logical categories
+based on both form and function. Please refer to the **COMPONENTS** section in the
+Storybook sidebar.
 
-<br />
-
-### For Developers
+## @nypl/design-system-react-components
 
-If you're looking to contribute, checkout the [nypl-design-system](https://github.com/NYPL/nypl-design-system)
-repo on Github for more information.
+This React design system library is currently published on [npm](https://www.npmjs.com/package/@nypl/design-system-react-components).
+If you're looking to contribute to this project, checkout the
+[nypl-design-system](https://github.com/NYPL/nypl-design-system) repo on Github
+for more information.

package/src/index.ts

@@ -1,14 +1,47 @@
 import "./styles.scss";
 
+// Note that the NYPL Design System directly re-exports the following
+// components for usage in consuming applications.
+export {
+  Box,
+  Center,
+  Circle,
+  Grid,
+  GridItem,
+  Square,
+  Stack,
+  HStack,
+  VStack,
+} from "@chakra-ui/react";
 export { default as Accordion } from "./components/Accordion/Accordion";
 export { default as Breadcrumbs } from "./components/Breadcrumbs/Breadcrumbs";
-export { default as Button } from "./components/Button/Button";
+export { default as Button, ButtonGroup } from "./components/Button/Button";
 export { ButtonTypes } from "./components/Button/ButtonTypes";
-export { default as Card } from "./components/Card/Card";
+export {
+  default as Card,
+  CardActions,
+  CardContent,
+  CardHeading,
+} from "./components/Card/Card";
+export {
+  CardImageRatios,
+  CardImageSizes,
+  CardLayouts,
+} from "./components/Card/CardTypes";
+export { default as CardEdition } from "./components/CardEdition/CardEdition";
 export { default as Checkbox } from "./components/Checkbox/Checkbox";
+export { default as CheckboxGroup } from "./components/CheckboxGroup/CheckboxGroup";
+export { CheckboxGroupLayoutTypes } from "./components/CheckboxGroup/CheckboxGroupLayoutTypes";
+export { default as DatePicker } from "./components/DatePicker/DatePicker";
+export { DatePickerTypes } from "./components/DatePicker/DatePickerTypes";
 export { default as Form, FormField, FormRow } from "./components/Form/Form";
+export { FormSpacing } from "./components/Form/FormTypes";
+export { GridGaps } from "./components/Grid/GridTypes";
 export { default as Heading } from "./components/Heading/Heading";
-export { HeadingDisplaySizes } from "./components/Heading/HeadingDisplaySizes";
+export {
+  HeadingDisplaySizes,
+  HeadingLevels,
+} from "./components/Heading/HeadingTypes";
 export { default as HelperErrorText } from "./components/HelperErrorText/HelperErrorText";
 export { default as Hero } from "./components/Hero/Hero";
 export { HeroTypes } from "./components/Hero/HeroTypes";
@@ -38,7 +71,10 @@ export {
 export { NotificationTypes } from "./components/Notification/NotificationTypes";
 export { default as Pagination } from "./components/Pagination/Pagination";
 export { default as Radio } from "./components/Radio/Radio";
+export { default as RadioGroup } from "./components/RadioGroup/RadioGroup";
+export { RadioGroupLayoutTypes } from "./components/RadioGroup/RadioGroupLayoutTypes";
 export { default as SearchBar } from "./components/SearchBar/SearchBar";
+export { default as SimpleGrid } from "./components/Grid/SimpleGrid";
 export { default as SkeletonLoader } from "./components/SkeletonLoader/SkeletonLoader";
 export {
   SkeletonLoaderImageRatios,
@@ -46,6 +82,35 @@ export {
 } from "./components/SkeletonLoader/SkeletonLoaderTypes";
 export { default as Select } from "./components/Select/Select";
 export { default as StatusBadge } from "./components/StatusBadge/StatusBadge";
-export { default as TextInput } from "./components/TextInput/TextInput";
+export {
+  Tabs,
+  TabList,
+  Tab,
+  TabPanels,
+  TabPanel,
+} from "./components/Tabs/Tabs";
+export { default as Text } from "./components/Text/Text";
+export { TextDisplaySizes } from "./components/Text/TextTypes";
+export {
+  TemplateAppContainer,
+  Template,
+  TemplateHeader,
+  TemplateBreakout,
+  TemplateContent,
+  TemplateContentTop,
+  TemplateContentPrimary,
+  TemplateContentSidebar,
+  TemplateFooter,
+} from "./components/Template/Template";
+
+export {
+  default as TextInput,
+  TextInputRefType,
+} from "./components/TextInput/TextInput";
+export { TextInputTypes } from "./components/TextInput/TextInputTypes";
 export { default as VideoPlayer } from "./components/VideoPlayer/VideoPlayer";
-export { VideoPlayerTypes } from "./components/VideoPlayer/VideoPlayerTypes";
+export {
+  VideoPlayerAspectRatios,
+  VideoPlayerTypes,
+} from "./components/VideoPlayer/VideoPlayerTypes";
+export { default as DSProvider } from "./theme/provider";

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

@@ -22,6 +22,10 @@ $research-secondary: #006166;
 $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;
@@ -44,15 +48,13 @@ $colors: (
   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 Color Classes*/
-@include color-classes($colors_brand);
-@include color-classes($colors);
-
 /* CSS Variables/Custom Properties */
 :root {
   @include css-vars($colors_brand, "brand");

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

@@ -9,16 +9,17 @@ $white: #ffffff;
 $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;
+$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: #97272c;
+$error-primary: #97272c;
+$error-secondary: #6f0106;
 $focus: #4181f1;
 $link-primary: #0576d3;
 $link-secondary: #004b98;
@@ -39,14 +40,15 @@ $colors: (
   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,
+  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: $error,
+  error-primary: $error-primary,
+  error-secondary: $error-secondary,
   focus: $focus,
   link-primary: $link-primary,
   link-secondary: $link-secondary,
@@ -59,9 +61,6 @@ $colors: (
   warning-secondary: $warning-secondary,
 );
 
-/* Color Classes*/
-@include color-classes($colors);
-
 /* CSS Variables/Custom Properties */
 :root {
   @include css-vars($colors, "ui");

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

@@ -1,10 +1,12 @@
-// $space-xxs: $space/4;   //  4px
-// $space-xs: $space/2;    //  8px
-// $space-s: $space*1;     // 16px
-// $space-m: $space*1.5;   // 24px
-// $space-l: $space*2;     // 32px
-// $space-xl: $space*3;    // 48px
-// $space-xxl: $space*4;   // 64px
+/**
+ * $space-xxs: $space / 4;   //  4px
+ * $space-xs: $space / 2;    //  8px
+ * $space-s: $space * 1;     // 16px
+ * $space-m: $space * 1.5;   // 24px
+ * $space-l: $space * 2;     // 32px
+ * $space-xl: $space * 3;    // 48px
+ * $space-xxl: $space * 4;   // 64px
+ */
 
 @mixin space-inline-none {
   margin-right: 0;
@@ -37,3 +39,41 @@
 @mixin space-inline-xxl {
   margin-right: var(--space-xxl);
 }
+
+@mixin get-space-inline($id) {
+  @if $id == "none" {
+    @include space-inline-none;
+  }
+
+  @if $id == "xxs" {
+    @include space-inline-xxs;
+  }
+
+  @if $id == "xs" {
+    @include space-inline-xs;
+  }
+
+  @if $id == "s" {
+    @include space-inline-s;
+  }
+
+  @if $id == "m" {
+    @include space-inline-m;
+  }
+
+  @if $id == "l" {
+    @include space-inline-l;
+  }
+
+  @if $id == "xl" {
+    @include space-inline-xl;
+  }
+
+  @if $id == "xxl" {
+    @include space-inline-xxl;
+  }
+
+  @if $id == "xxxl" {
+    @include space-inline-xxxl;
+  }
+}

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

@@ -1,8 +1,10 @@
-// $space-xs: $space/2;    //  8px
-// $space-s: $space*1;     // 16px
-// $space-m: $space*1.5;   // 24px
-// $space-l: $space*2;     // 32px
-// $space-xl: $space*3;    // 48px
+/**
+ * $space-xs: $space / 2;    //  8px
+ * $space-s: $space * 1;     // 16px
+ * $space-m: $space * 1.5;   // 24px
+ * $space-l: $space * 2;     // 32px
+ * $space-xl: $space * 3;    // 48px
+ */
 
 @mixin space-inset-none {
   padding: 0;
@@ -27,3 +29,29 @@
 @mixin space-inset-xl {
   padding: var(--space-xl);
 }
+
+@mixin get-space-inset($id) {
+  @if $id == "none" {
+    @include space-inset-none;
+  }
+
+  @if $id == "xs" {
+    @include space-inset-xs;
+  }
+
+  @if $id == "s" {
+    @include space-inset-s;
+  }
+
+  @if $id == "m" {
+    @include space-inset-m;
+  }
+
+  @if $id == "l" {
+    @include space-inset-l;
+  }
+
+  @if $id == "xl" {
+    @include space-inset-xl;
+  }
+}

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

@@ -1,11 +1,13 @@
-// --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
+/**
+ * --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;
@@ -74,3 +76,41 @@
     }
   }
 }
+
+@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/base/_02-breakpoints.scss

@@ -4,11 +4,11 @@
  *
  */
 
-/////////////////////
 // Global Breakpoints
 
 // Avoid using in favor of atomic, content-specific, breakpoints.
-// These should be used for generic code, like layouts and typography, only. The CSS variables and the Sass variables below need to stay in sync.
+// These should be used for generic code, like layouts and typography, only.
+// The CSS variables and the Sass variables below need to stay in sync.
 // Sass' breakpoint() mixin doesn't work without Sass variables.
 // CSS variables expose the breakpoint variables to consumers.
 :root {
@@ -22,6 +22,7 @@ $breakpoint-small: 320px;
 $breakpoint-medium: 600px;
 $breakpoint-large: 960px;
 $breakpoint-xl: 1280px;
-// The max-width breakpoint is used when the design should be applied at whatever the
-// largest breakpoint is regardless of actual pixel value. e.g. removing outer margin on body wrapper
+// The max-width breakpoint is used when the design should be applied at
+// whatever the largest breakpoint is regardless of actual pixel value,
+// e.g. removing outer margin on body wrapper.
 $max-width: $breakpoint-xl;

package/src/styles/base/_04-base.scss

@@ -8,7 +8,8 @@
   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
+  // Users with non-overlay scrollbars have a small horizontal 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;
 
   *,

package/src/styles/base/_place-holder.scss

@@ -1,5 +1,5 @@
 .placeholder {
-  --color-place-holder: var(--ui-gray-light);
+  --color-place-holder: var(--ui-gray-light-cool);
 
   @include space-stack-page;
   @include space-inset-s;

package/src/styles/base/_typography.scss

@@ -5,35 +5,7 @@
 }
 
 .nypl-ds {
-  p,
-  .paragraph {
+  p {
     @include paragraph;
   }
 }
-
-.blockquote {
-  border-left: solid 3px var(--ui-gray-light);
-  font-style: italic;
-  margin-left: 1em;
-  padding-left: 1em;
-}
-
-.hr {
-  border-style: solid;
-  border-width: 1px 0 0;
-  color: currentColor;
-}
-
-.long-description {
-  @include screenreader-only();
-}
-
-.text-long {
-  blockquote {
-    @extend .blockquote;
-  }
-
-  hr {
-    @extend .hr;
-  }
-}

package/src/styles.scss

@@ -6,22 +6,16 @@
 // A cleaner way to do breakpoints/media queries, http://breakpoint-sass.com/
 @import "~breakpoint-sass/stylesheets/breakpoint";
 @import "~system-font-css/_system-font.scss";
+
+// For the React DatePicker package.
+@import "~react-datepicker/dist/react-datepicker.css";
 // End libs
 
 /*
- * The `color-classes` and `css-vars` mixins have been included here 
+ * The `css-vars` mixins have been included here 
  * because they are utilized in the colors SCSS files.
  */
 
-// generates a series of color classes that can be used anywhere
-@mixin color-classes($map) {
-  @each $name, $color in $map {
-    .cl-#{$name} {
-      color: $color;
-    }
-  }
-}
-
 // generates a collection of CSS vars
 @mixin css-vars($map, $prefix) {
   $prefix: str-insert($prefix, "-", str-length($prefix) + 1);
@@ -48,33 +42,36 @@
 @import "./styles/base/_card-grid";
 @import "./styles/base/_place-holder";
 @import "./styles/base/_typography";
-@import "./components/Icons/_Icons.scss";
 @import "./components/Button/_Button.scss";
-@import "./components/Link/_Link.scss";
-@import "./components/Heading/_Heading.scss";
 @import "./components/Input/_Input.scss";
-@import "./components/TextInput/_TextInput.scss";
 @import "./components/Autosuggest/_Autosuggest.scss";
 
+fieldset {
+  .sr-only {
+    @include screenreader-only();
+  }
+}
+
+// Copied over from Label.scss
+.fieldset {
+  @include fieldset-reset;
+}
+
+.legend {
+  border: 0;
+  font-weight: 500;
+}
+
 // Order not important
-@import "./components/Accordion/_Accordion.scss";
-@import "./components/Breadcrumbs/_Breadcrumbs.scss";
 @import "./components/Card/_Card.scss";
-@import "./components/Form/_Form.scss";
+@import "./components/CardEdition/_CardEdition.scss";
+@import "./components/DatePicker/_DatePicker.scss";
 @import "./components/HelperErrorText/_HelperErrorText.scss";
-@import "./components/Hero/_Hero.scss";
 @import "./components/HorizontalRule/_HorizontalRule.scss";
 @import "./components/Image/_Image.scss";
-@import "./components/Label/_Label.scss";
 @import "./components/List/_List.scss";
 @import "./components/Modal/_Modal.scss";
 @import "./components/Notification/_Notification.scss";
 @import "./components/Pagination/_Pagination.scss";
-@import "./components/Radio/_Radio.scss";
-@import "./components/Checkbox/_Checkbox.scss";
-@import "./components/SearchBar/_SearchBar.scss";
-@import "./components/Select/_Select.scss";
 @import "./components/SkeletonLoader/_SkeletonLoader.scss";
-@import "./components/StatusBadge/_StatusBadge.scss";
-@import "./components/Template/_Template.scss";
 @import "./components/VideoPlayer/_VideoPlayer.scss";

package/src/theme/components/accordion.ts

@@ -0,0 +1,30 @@
+const containerStyles = {
+  borderLeftWidth: "1px",
+  borderRightWidth: "1px",
+  borderColor: "ui.gray.medium",
+  width: "100%",
+};
+const buttonStyles = {
+  border: "none",
+  fontWeight: 500,
+  _hover: {
+    bg: "ui.gray.light-cool",
+  },
+};
+const panelStyles = {
+  paddingTop: "xs",
+  paddingRight: "xxxl",
+  paddingLeft: "s",
+  paddingBottom: "xs",
+};
+
+const Accordion = {
+  parts: ["container", "button", "panel"],
+  baseStyle: {
+    container: containerStyles,
+    button: buttonStyles,
+    panel: panelStyles,
+  },
+};
+
+export default Accordion;