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

package/src/hooks/useCarouselStyles.ts

@@ -0,0 +1,34 @@
+import React from "react";
+
+/**
+ * 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
+ */
+const useCarouselStyles = (slidesCount = 0, slideWidth = 100) => {
+  const [currentSlide, setCurrentSlide] = React.useState(0);
+  // This wraps around to the last slide if this is invoked while the
+  // first slide is active.
+  const prevSlide = () => {
+    setCurrentSlide((slide) => (slide === 0 ? slidesCount - 1 : slide - 1));
+  };
+  // This wraps around to the first slide if this is invoked while the
+  // last slide is active.
+  const nextSlide = () => {
+    setCurrentSlide((slide) => (slide === slidesCount - 1 ? 0 : slide + 1));
+  };
+  const goToStart = () => {
+    setCurrentSlide(0);
+  };
+  // Updates the left margin for the carousel so the elements can
+  // slide inside the container.
+  const carouselStyle = {
+    transition: "all .5s",
+    marginLeft: `-${currentSlide * slideWidth}%`,
+  };
+
+  return { prevSlide, nextSlide, carouselStyle, goToStart };
+};
+
+export default useCarouselStyles;

package/src/hooks/useNYPLTheme.ts

@@ -0,0 +1,67 @@
+import { useTheme } from "@chakra-ui/react";
+
+/**
+ * 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.
+ */
+function useNYPLTheme() {
+  const theme = useTheme();
+  if (!theme || Object.keys(theme).length === 0) {
+    console.warn(
+      "The `useNYPLTheme` hook must be used inside of `<DSProvider />`."
+    );
+    return {};
+  }
+
+  // Chakra provides a lot of their own styles but
+  // only NYPL styles should be exported.
+  return {
+    // base, sm, md, lg, xl, 2xl
+    breakpoints: theme.breakpoints,
+    colors: {
+      // primary, secondary
+      brand: theme.colors.brand,
+      // blogs, books-and-more, locations, research,
+      // research-library, whats-on
+      section: theme.colors.section,
+      transparent: theme.colors.transparent,
+      // black, disabled, error, focus, gray, link,
+      // status, success, test, warning, white
+      ui: theme.colors.ui,
+    },
+    fontSizes: {
+      "-3": theme.fontSizes["-3"],
+      "-2": theme.fontSizes.xs,
+      "-1": theme.fontSizes.sm,
+      "0": theme.fontSizes.md,
+      "1": theme.fontSizes.lg,
+      "2": theme.fontSizes["2"],
+      "3": theme.fontSizes["3"],
+      "4": theme.fontSizes["4"],
+    },
+    fontWeights: {
+      light: theme.fontWeights.light,
+      regular: theme.fontWeights.regular,
+      medium: theme.fontWeights.medium,
+      bold: theme.fontWeights.bold,
+    },
+    fonts: {
+      body: theme.fonts.body,
+      heading: theme.fonts.heading,
+    },
+    radii: theme.radii,
+    space: {
+      xxs: theme.space.xxs,
+      xs: theme.space.xs,
+      s: theme.space.s,
+      m: theme.space.m,
+      l: theme.space.l,
+      xl: theme.space.xl,
+      xxl: theme.space.xxl,
+      xxxl: theme.space.xxxl,
+    },
+  };
+}
+
+export default useNYPLTheme;

package/src/hooks/useWindowSize.ts

@@ -0,0 +1,40 @@
+import React from "react";
+
+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
+ */
+function useWindowSize(): WindowSize {
+  const [windowSize, setWindowSize] = React.useState<WindowSize>({
+    width: 0,
+    height: 0,
+  });
+
+  React.useEffect(() => {
+    const handler = () => {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+
+    // Set size at the first client-side load
+    handler();
+
+    window.addEventListener("resize", handler);
+
+    // Remove event listener on cleanup
+    return () => {
+      window.removeEventListener("resize", handler);
+    };
+  }, []);
+
+  return windowSize;
+}
+
+export default useWindowSize;

package/src/index.ts

@@ -4,18 +4,20 @@ import "./styles.scss";
 // components for usage in consuming applications.
 export {
   Box,
+  ButtonGroup,
   Center,
   Circle,
   Grid,
   GridItem,
+  HStack,
   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, 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,
@@ -23,17 +25,15 @@ export {
   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";
@@ -48,13 +48,20 @@ export { HeroTypes } from "./components/Hero/HeroTypes";
 export { default as HorizontalRule } from "./components/HorizontalRule/HorizontalRule";
 export { default as Icon } from "./components/Icons/Icon";
 export {
+  IconAlign,
+  IconColors,
   IconNames,
-  LogoNames,
   IconRotationTypes,
-  IconColors,
   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";
@@ -63,25 +70,22 @@ 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,
@@ -89,8 +93,6 @@ export {
   TabPanels,
   TabPanel,
 } from "./components/Tabs/Tabs";
-export { default as Text } from "./components/Text/Text";
-export { TextDisplaySizes } from "./components/Text/TextTypes";
 export {
   TemplateAppContainer,
   Template,
@@ -102,15 +104,16 @@ export {
   TemplateContentSidebar,
   TemplateFooter,
 } from "./components/Template/Template";
-
+export { default as Text } from "./components/Text/Text";
+export { TextDisplaySizes } from "./components/Text/TextTypes";
 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/src/resources.scss

@@ -1,6 +1,6 @@
 // Resources to export as sass mixins
-@import "./styles/03-space/space-inline.scss";
-@import "./styles/03-space/space-inset.scss";
-@import "./styles/03-space/space-stack.scss";
-@import "./styles/base/02-breakpoints.scss";
-@import "./styles/base/03-mixins.scss";
+@import "./styles/base/01-breakpoints";
+@import "./styles/base/02-mixins";
+@import "./styles/space/space-inline";
+@import "./styles/space/space-inset";
+@import "./styles/space/space-stack";

package/src/styles/base/{_02-breakpoints.scss → _01-breakpoints.scss}

@@ -1,7 +1,6 @@
 /**
  * Breakpoint Configuration
  * @see https://github.com/Team-Sass/breakpoint/wiki
- *
  */
 
 // Global Breakpoints
@@ -12,17 +11,17 @@
 // 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;
+  --nypl-breakpoint-small: 320px;
+  --nypl-breakpoint-medium: 600px;
+  --nypl-breakpoint-large: 960px;
+  --nypl-breakpoint-xl: 1280px;
 }
 
-$breakpoint-small: 320px;
-$breakpoint-medium: 600px;
-$breakpoint-large: 960px;
-$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.
-$max-width: $breakpoint-xl;
+$nypl-max-width: $nypl-breakpoint-xl;

package/src/styles/base/{_03-mixins.scss → _02-mixins.scss}

@@ -3,7 +3,7 @@
 
 /// Mixin - Clearfix.
 /// Adds clearfix based on http://bourbon.io/docs/#clearfix
-/// use example =   @include clearfix
+/// use example = @include clearfix
 
 @mixin clearfix {
   &::after {
@@ -29,10 +29,10 @@
 /// Outer container mixin for large screens
 @mixin wrapper(
   $container-max-width: $max-width,
-  $outer-container-break: $breakpoint-small,
+  $outer-container-break: $nypl-breakpoint-small,
   $v-margin: 0,
   $v-padding: 0,
-  $h-padding: var(--space)
+  $h-padding: var(--nypl-space-s)
 ) {
   margin: #{$v-margin} auto;
   max-width: #{$container-max-width};
@@ -41,12 +41,12 @@
 }
 
 .container {
-  @include space-inset-s;
+  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(--space)) {
+@mixin breakout($v-padding: var(--nypl-space-s)) {
   margin-left: calc(-50vw + 50%);
   margin-right: calc(-50vw + 50%);
 }
@@ -61,6 +61,17 @@
   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;

package/src/styles/base/{_04-base.scss → _03-base.scss}

@@ -1,7 +1,8 @@
+// Kept for backwards compatibility.
 .nypl-ds {
   box-sizing: border-box;
-  color: var(--ui-black);
-  font-family: var(--typeface-body);
+  color: var(--nypl-colors-ui-black);
+  font-family: var(--nypl-fonts-body);
 
   // Sets up the base font-size, 1rem, for the system
   font-size: 16px;
@@ -12,6 +13,10 @@
   // our breakout mixin. Fix identified here: https://cloudfour.com/thinks/breaking-out-with-viewport-units-and-calc/#one-big-dumb-caveat
   overflow-x: hidden;
 
+  p {
+    margin: 0 0 var(--nypl-space-s);
+  }
+
   *,
   *::after,
   *::before {

package/src/styles/base/{_05-focus.scss → _04-focus.scss}

@@ -1,14 +1,3 @@
-// Focus state mixin
-@mixin focus-outline($darkBackground: false) {
-  outline: 2px solid var(--ui-focus);
-  outline-offset: 2px;
-  z-index: 9999;
-
-  @if $darkBackground {
-    outline-color: var(--ui-white);
-  }
-}
-
 // Apply :focus behavior to focusable elements only (For IE 11)
 .nypl-ds {
   input,
@@ -31,7 +20,3 @@
     }
   }
 }
-
-.focus {
-  @include focus-outline;
-}

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

@@ -1,8 +1,19 @@
 .placeholder {
-  --color-place-holder: var(--ui-gray-light-cool);
+  --color-place-holder: var(--nypl-colors-ui-gray-dark);
 
-  @include space-stack-page;
-  @include space-inset-s;
+  margin-bottom: var(--nypl-space-l);
+  @include breakpoint($nypl-breakpoint-large) {
+    margin-bottom: var(--nypl-space-xl);
+  }
+
+  &--full {
+    margin-bottom: var(--nypl-space-xxl);
+    @include breakpoint($nypl-breakpoint-large) {
+      margin-bottom: var(--nypl-space-xxxl);
+    }
+  }
+
+  padding: var(--nypl-space-s);
 
   align-items: center;
   border: 4px dashed var(--color-place-holder);

package/src/styles/{03-space → space}/_space-inline.scss

@@ -1,11 +1,11 @@
 /**
- * $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
+ * --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 {
@@ -13,31 +13,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) {

package/src/styles/{03-space → space}/_space-inset.scss

@@ -1,9 +1,9 @@
 /**
- * $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 {
@@ -11,23 +11,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) {

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

@@ -0,0 +1,116 @@
+/**
+ * --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 {
+  margin-bottom: 0;
+}
+
+@mixin space-stack-xxs {
+  margin-bottom: var(--nypl-space-xxs);
+}
+
+@mixin space-stack-xs {
+  margin-bottom: var(--nypl-space-xs);
+}
+
+@mixin space-stack-s {
+  margin-bottom: var(--nypl-space-s);
+}
+
+@mixin space-stack-m {
+  margin-bottom: var(--nypl-space-m);
+}
+
+@mixin space-stack-l {
+  margin-bottom: var(--nypl-space-l);
+}
+
+@mixin space-stack-xl {
+  margin-bottom: var(--nypl-space-xl);
+}
+
+@mixin space-stack-xxl {
+  margin-bottom: var(--nypl-space-xxl);
+}
+
+@mixin space-stack-xxxl {
+  margin-bottom: var(--nypl-space-xxxl);
+}
+
+@mixin space-stack-page {
+  @include space-stack-l;
+
+  @include breakpoint($nypl-breakpoint-large) {
+    @include space-stack-xl;
+  }
+
+  &--full {
+    @include space-stack-xxl;
+
+    @include breakpoint($nypl-breakpoint-large) {
+      @include space-stack-xxxl;
+    }
+  }
+}
+
+@mixin remove-stack-page {
+  margin-top: calc(-1 * 32px);
+
+  @include breakpoint($nypl-breakpoint-large) {
+    margin-top: calc(-1 * 48px);
+  }
+
+  &--full {
+    margin-top: calc(-1 * 64px);
+
+    @include breakpoint($nypl-breakpoint-large) {
+      margin-top: calc(-1 * 96px);
+    }
+  }
+}
+
+@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;
+  }
+}