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

package/dist/hooks/tests/useCarouselStyles.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/useCarouselStyles.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Custom hook that controls the sliding function for the carousel wrapper.
+ * This returns functions to use for the "previous" and "next" buttons as well
+ * as a CSS style object that should be use to transition between slides.
+ * Inspired by: https://codesandbox.io/s/fxjeo
+ */
+declare const useCarouselStyles: (slidesCount?: number, slideWidth?: number) => {
+    prevSlide: () => void;
+    nextSlide: () => void;
+    carouselStyle: {
+        transition: string;
+        marginLeft: string;
+    };
+    goToStart: () => void;
+};
+export default useCarouselStyles;

package/dist/hooks/useNYPLTheme.d.ts

@@ -0,0 +1,54 @@
+/**
+ * A custom hook that returns the Chakra-based NYPL theme object. This must be
+ * used inside a component that is wrapped in the `DSProvider` component, so
+ * that the theme object can be available to use.
+ */
+declare function useNYPLTheme(): {
+    breakpoints?: undefined;
+    colors?: undefined;
+    fontSizes?: undefined;
+    fontWeights?: undefined;
+    fonts?: undefined;
+    radii?: undefined;
+    space?: undefined;
+} | {
+    breakpoints: any;
+    colors: {
+        brand: any;
+        section: any;
+        transparent: any;
+        ui: any;
+    };
+    fontSizes: {
+        "-3": any;
+        "-2": any;
+        "-1": any;
+        0: any;
+        1: any;
+        2: any;
+        3: any;
+        4: any;
+    };
+    fontWeights: {
+        light: any;
+        regular: any;
+        medium: any;
+        bold: any;
+    };
+    fonts: {
+        body: any;
+        heading: any;
+    };
+    radii: any;
+    space: {
+        xxs: any;
+        xs: any;
+        s: any;
+        m: any;
+        l: any;
+        xl: any;
+        xxl: any;
+        xxxl: any;
+    };
+};
+export default useNYPLTheme;

package/dist/hooks/useWindowSize.d.ts

@@ -0,0 +1,10 @@
+interface WindowSize {
+    width: number;
+    height: number;
+}
+/**
+ * React hook used to get the window size on device resizing.
+ * Based on https://usehooks-typescript.com/react-hook/use-window-size
+ */
+declare function useWindowSize(): WindowSize;
+export default useWindowSize;

package/dist/index.d.ts

@@ -1,17 +1,20 @@
 import "./styles.scss";
-export { Box, Center, Circle, Grid, GridItem, Square, Stack, HStack, VStack, } from "@chakra-ui/react";
+export { Box, ButtonGroup, Center, Circle, Grid, GridItem, HStack, Square, Stack, 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, ButtonGroup } from "./components/Button/Button";
+export { ColorVariants } from "./components/Breadcrumbs/BreadcrumbsTypes";
+export { default as Button } from "./components/Button/Button";
 export { ButtonTypes } from "./components/Button/ButtonTypes";
 export { default as Card, CardActions, CardContent, CardHeading, } from "./components/Card/Card";
-export { CardImageRatios, CardImageSizes, CardLayouts, } from "./components/Card/CardTypes";
+export { 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 DSProvider } from "./theme/provider";
+export { default as Fieldset } from "./components/Fieldset/Fieldset";
 export { default as Form, FormField, FormRow } from "./components/Form/Form";
 export { FormSpacing } from "./components/Form/FormTypes";
 export { GridGaps } from "./components/Grid/GridTypes";
@@ -22,8 +25,9 @@ export { default as Hero } from "./components/Hero/Hero";
 export { HeroTypes } from "./components/Hero/HeroTypes";
 export { default as HorizontalRule } from "./components/HorizontalRule/HorizontalRule";
 export { default as Icon } from "./components/Icons/Icon";
-export { IconNames, LogoNames, IconRotationTypes, IconColors, IconSizes, } from "./components/Icons/IconTypes";
+export { IconAlign, IconColors, IconNames, IconRotationTypes, IconSizes, IconTypes, LogoNames, } from "./components/Icons/IconTypes";
 export { default as Image } from "./components/Image/Image";
+export { ImageRatios, ImageSizes, ImageTypes, } from "./components/Image/ImageTypes";
 export { default as Input } from "./components/Input/Input";
 export { InputTypes } from "./components/Input/InputTypes";
 export { default as Label } from "./components/Label/Label";
@@ -32,24 +36,25 @@ export { LinkTypes } from "./components/Link/LinkTypes";
 export { default as List } from "./components/List/List";
 export { ListTypes } from "./components/List/ListTypes";
 export { default as Modal } from "./components/Modal/Modal";
-export { default as Notification, NotificationContent, NotificationHeading, } from "./components/Notification/Notification";
+export { default as Notification } from "./components/Notification/Notification";
 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 Select } from "./components/Select/Select";
 export { default as SimpleGrid } from "./components/Grid/SimpleGrid";
 export { default as SkeletonLoader } from "./components/SkeletonLoader/SkeletonLoader";
 export { SkeletonLoaderImageRatios, SkeletonLoaderLayouts, } from "./components/SkeletonLoader/SkeletonLoaderTypes";
-export { default as Select } from "./components/Select/Select";
 export { default as StatusBadge } from "./components/StatusBadge/StatusBadge";
+export { StatusBadgeTypes } from "./components/StatusBadge/StatusBadgeTypes";
 export { Tabs, TabList, Tab, TabPanels, TabPanel, } from "./components/Tabs/Tabs";
+export { TemplateAppContainer, Template, TemplateHeader, TemplateBreakout, TemplateContent, TemplateContentTop, TemplateContentPrimary, TemplateContentSidebar, TemplateFooter, } from "./components/Template/Template";
 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 useNYPLTheme } from "./hooks/useNYPLTheme";
 export { default as VideoPlayer } from "./components/VideoPlayer/VideoPlayer";
 export { VideoPlayerAspectRatios, VideoPlayerTypes, } from "./components/VideoPlayer/VideoPlayerTypes";
-export { default as DSProvider } from "./theme/provider";

package/dist/resources.scss

@@ -1,12 +1,144 @@
 // Resources to export as sass mixins
 /**
- * $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
+ * Breakpoint Configuration
+ * @see https://github.com/Team-Sass/breakpoint/wiki
+ */
+
+// 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.
+// Sass' breakpoint() mixin doesn't work without Sass variables.
+// CSS variables expose the breakpoint variables to consumers.
+:root {
+  --nypl-breakpoint-small: 320px;
+  --nypl-breakpoint-medium: 600px;
+  --nypl-breakpoint-large: 960px;
+  --nypl-breakpoint-xl: 1280px;
+}
+
+$nypl-breakpoint-small: 320px;
+$nypl-breakpoint-medium: 600px;
+$nypl-breakpoint-large: 960px;
+$nypl-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.
+$nypl-max-width: $nypl-breakpoint-xl;
+
+/////////////////////
+// General Mixins (put specific ones in component files where applicable)
+
+/// Mixin - Clearfix.
+/// Adds clearfix based on http://bourbon.io/docs/#clearfix
+/// use example = @include clearfix
+
+@mixin clearfix {
+  &::after {
+    clear: both;
+    content: "";
+    display: table;
+  }
+}
+
+@mixin list-reset {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+@mixin fieldset-reset {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+/// Mixin - Wrapper
+/// Outer container mixin for large screens
+@mixin wrapper(
+  $container-max-width: $max-width,
+  $outer-container-break: $nypl-breakpoint-small,
+  $v-margin: 0,
+  $v-padding: 0,
+  $h-padding: var(--nypl-space-s)
+) {
+  margin: #{$v-margin} auto;
+  max-width: #{$container-max-width};
+  padding: #{$v-padding} #{$h-padding};
+  width: 100%;
+}
+
+.container {
+  padding: var(--nypl-space-s);
+}
+
+/// Use the breakout mixin for elements that should be edge-to-edge
+/// Even when a parent container uses the wrapper mixin
+@mixin breakout($v-padding: var(--nypl-space-s)) {
+  margin-left: calc(-50vw + 50%);
+  margin-right: calc(-50vw + 50%);
+}
+
+// Use the screenreader-only mixin for elements that you want to be visually hidden, but still want screenreaders to read out
+@mixin screenreader-only() {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute !important;
+  width: 1px;
+  word-wrap: normal;
+}
+
+// Focus state mixin
+@mixin focus-outline($darkBackground: false) {
+  outline: 2px solid var(--nypl-colors-ui-focus);
+  outline-offset: 2px;
+  z-index: 9999;
+
+  @if $darkBackground {
+    outline-color: var(--nypl-colors-ui-white);
+  }
+}
+
+//Convert pixel values to rem
+@function to-rem($size) {
+  @return $size / 16px * 1rem;
+}
+
+//Process a color variable so that it can be used in a data URI/URL
+@function url-friendly-colour($colour) {
+  @return "%23" + str-slice("#{$colour}", 2, -1);
+}
+
+@mixin placeholder {
+  &::-webkit-input-placeholder {
+    @content;
+  }
+
+  &::-moz-placeholder {
+    @content;
+
+    opacity: 1;
+  }
+
+  &:-moz-placeholder {
+    @content;
+  }
+
+  &:-ms-input-placeholder {
+    @content;
+  }
+}
+
+/**
+ * --nypl-space-xxs: --nypl-space-s / 4  //  4px or 0.25rem
+ * --nypl-space-xs: --nypl-space-s / 2   //  8px or 0.5rem
+ * --nypl-space-s: --nypl-space-s * 1;   // 16px or 1rem
+ * --nypl-space-m: --nypl-space * 1.5;   // 24px or 1.5rem
+ * --nypl-space-l: --nypl-space * 2;     // 32px or 2rem
+ * --nypl-space-xl: --nypl-space * 3;    // 48px or 3rem
+ * --nypl-space-xxl: --nypl-space * 4;   // 64px or 4rem
  */
 
 @mixin space-inline-none {
@@ -14,31 +146,31 @@
 }
 
 @mixin space-inline-xxs {
-  margin-right: var(--space-xxs);
+  margin-right: var(--nypl-space-xxs);
 }
 
 @mixin space-inline-xs {
-  margin-right: var(--space-xs);
+  margin-right: var(--nypl-space-xs);
 }
 
 @mixin space-inline-s {
-  margin-right: var(--space-s);
+  margin-right: var(--nypl-space-s);
 }
 
 @mixin space-inline-m {
-  margin-right: var(--space-m);
+  margin-right: var(--nypl-space-m);
 }
 
 @mixin space-inline-l {
-  margin-right: var(--space-l);
+  margin-right: var(--nypl-space-l);
 }
 
 @mixin space-inline-xl {
-  margin-right: var(--space-xl);
+  margin-right: var(--nypl-space-xl);
 }
 
 @mixin space-inline-xxl {
-  margin-right: var(--space-xxl);
+  margin-right: var(--nypl-space-xxl);
 }
 
 @mixin get-space-inline($id) {
@@ -80,11 +212,11 @@
 }
 
 /**
- * $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
+ * --nypl-space-xs: --nypl-space-s / 2   //  8px or 0.5rem
+ * --nypl-space-s: --nypl-space-s * 1;   // 16px or 1rem
+ * --nypl-space-m: --nypl-space * 1.5;   // 24px or 1.5rem
+ * --nypl-space-l: --nypl-space * 2;     // 32px or 2rem
+ * --nypl-space-xl: --nypl-space * 3;    // 48px or 3rem
  */
 
 @mixin space-inset-none {
@@ -92,23 +224,23 @@
 }
 
 @mixin space-inset-xs {
-  padding: var(--space-xs);
+  padding: var(--nypl-space-xs);
 }
 
 @mixin space-inset-s {
-  padding: var(--space-s);
+  padding: var(--nypl-space-s);
 }
 
 @mixin space-inset-m {
-  padding: var(--space-m);
+  padding: var(--nypl-space-m);
 }
 
 @mixin space-inset-l {
-  padding: var(--space-l);
+  padding: var(--nypl-space-l);
 }
 
 @mixin space-inset-xl {
-  padding: var(--space-xl);
+  padding: var(--nypl-space-xl);
 }
 
 @mixin get-space-inset($id) {
@@ -138,14 +270,14 @@
 }
 
 /**
- * --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
+ * --nypl-space-xxs: --nypl-space-s / 4   //  4px or 0.25rem
+ * --nypl-space-xs: --nypl-space-s / 2    //  8px or 0.5rem
+ * --nypl-space-s: --nypl-space-s * 1;    // 16px or 1rem
+ * --nypl-space-m: --nypl-space-s * 1.5;  // 24px or 1.5rem
+ * --nypl-space-l: --nypl-space-s * 2;    // 32px or 2rem
+ * --nypl-space-xl: --nypl-space-s * 3;   // 48px or 3rem
+ * --nypl-space-xxl: --nypl-space-s * 4;  // 64px or 4rem
+ * --nypl-space-xxxl: --nypl-space-s * 6; // 96px or 6rem
  */
 
 @mixin space-stack-none {
@@ -153,65 +285,65 @@
 }
 
 @mixin space-stack-xxs {
-  margin-bottom: var(--space-xxs);
+  margin-bottom: var(--nypl-space-xxs);
 }
 
 @mixin space-stack-xs {
-  margin-bottom: var(--space-xs);
+  margin-bottom: var(--nypl-space-xs);
 }
 
 @mixin space-stack-s {
-  margin-bottom: var(--space-s);
+  margin-bottom: var(--nypl-space-s);
 }
 
 @mixin space-stack-m {
-  margin-bottom: var(--space-m);
+  margin-bottom: var(--nypl-space-m);
 }
 
 @mixin space-stack-l {
-  margin-bottom: var(--space-l);
+  margin-bottom: var(--nypl-space-l);
 }
 
 @mixin space-stack-xl {
-  margin-bottom: var(--space-xl);
+  margin-bottom: var(--nypl-space-xl);
 }
 
 @mixin space-stack-xxl {
-  margin-bottom: var(--space-xxl);
+  margin-bottom: var(--nypl-space-xxl);
 }
 
 @mixin space-stack-xxxl {
-  margin-bottom: var(--space-xxxl);
+  margin-bottom: var(--nypl-space-xxxl);
 }
 
 @mixin space-stack-page {
   @include space-stack-l;
 
-  @include breakpoint($breakpoint-large) {
+  @include breakpoint($nypl-breakpoint-large) {
     @include space-stack-xl;
   }
 
   &--full {
     @include space-stack-xxl;
 
-    @include breakpoint($breakpoint-large) {
+    @include breakpoint($nypl-breakpoint-large) {
       @include space-stack-xxxl;
     }
   }
 }
 
 @mixin remove-stack-page {
-  margin-top: calc(-1 * #{$space-l});
+  margin-top: calc(-1 * 32px);
 
-  @include breakpoint($breakpoint-large) {
-    margin-top: calc(-1 * #{$space-xl});
+  @include breakpoint($nypl-breakpoint-large) {
+    margin-top: calc(-1 * 48px);
   }
 
   &--full {
-    margin-top: calc(-1 * #{$space-xxl});
+    margin-top: calc(-1 * 64px);
 
-    @include breakpoint($breakpoint-large) {
-      margin-top: calc(-1 * #{$space-xxxl});
+    @include breakpoint($nypl-breakpoint-large) {
+      margin-top: calc(-1 * 96px);
     }
   }
 }
@@ -254,125 +386,3 @@
   }
 }
 
-/**
- * Breakpoint Configuration
- * @see https://github.com/Team-Sass/breakpoint/wiki
- *
- */
-
-// 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.
-// Sass' breakpoint() mixin doesn't work without Sass variables.
-// CSS variables expose the breakpoint variables to consumers.
-:root {
-  --breakpoint-small: 320px;
-  --breakpoint-medium: 600px;
-  --breakpoint-large: 960px;
-  --breakpoint-xl: 1280px;
-}
-
-$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.
-$max-width: $breakpoint-xl;
-
-/////////////////////
-// General Mixins (put specific ones in component files where applicable)
-
-/// Mixin - Clearfix.
-/// Adds clearfix based on http://bourbon.io/docs/#clearfix
-/// use example =   @include clearfix
-
-@mixin clearfix {
-  &::after {
-    clear: both;
-    content: "";
-    display: table;
-  }
-}
-
-@mixin list-reset {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-@mixin fieldset-reset {
-  border: none;
-  margin: 0;
-  padding: 0;
-}
-
-/// Mixin - Wrapper
-/// Outer container mixin for large screens
-@mixin wrapper(
-  $container-max-width: $max-width,
-  $outer-container-break: $breakpoint-small,
-  $v-margin: 0,
-  $v-padding: 0,
-  $h-padding: var(--space)
-) {
-  margin: #{$v-margin} auto;
-  max-width: #{$container-max-width};
-  padding: #{$v-padding} #{$h-padding};
-  width: 100%;
-}
-
-.container {
-  @include space-inset-s;
-}
-
-/// Use the breakout mixin for elements that should be edge-to-edge
-/// Even when a parent container uses the wrapper mixin
-@mixin breakout($v-padding: var(--space)) {
-  margin-left: calc(-50vw + 50%);
-  margin-right: calc(-50vw + 50%);
-}
-
-// Use the screenreader-only mixin for elements that you want to be visually hidden, but still want screenreaders to read out
-@mixin screenreader-only() {
-  clip: rect(1px, 1px, 1px, 1px);
-  height: 1px;
-  overflow: hidden;
-  position: absolute !important;
-  width: 1px;
-  word-wrap: normal;
-}
-
-//Convert pixel values to rem
-@function to-rem($size) {
-  @return $size / 16px * 1rem;
-}
-
-//Process a color variable so that it can be used in a data URI/URL
-@function url-friendly-colour($colour) {
-  @return "%23" + str-slice("#{$colour}", 2, -1);
-}
-
-@mixin placeholder {
-  &::-webkit-input-placeholder {
-    @content;
-  }
-
-  &::-moz-placeholder {
-    @content;
-
-    opacity: 1;
-  }
-
-  &:-moz-placeholder {
-    @content;
-  }
-
-  &:-ms-input-placeholder {
-    @content;
-  }
-}
-