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

package/src/hooks/tests/useCarouselStyles.test.ts

@@ -0,0 +1,140 @@
+import { renderHook, act } from "@testing-library/react-hooks";
+import useCarouselStyles from "../useCarouselStyles";
+
+describe("useCarouselStyles hook", () => {
+  it("returns two functions and a CSS style object", () => {
+    const { result } = renderHook(() => useCarouselStyles());
+
+    expect(typeof result.current.nextSlide).toEqual("function");
+    expect(typeof result.current.prevSlide).toEqual("function");
+    expect(result.current.carouselStyle).toEqual({
+      marginLeft: "-0%",
+      transition: "all .5s",
+    });
+  });
+
+  it("updates the style object when the nextSlide function is clicked", () => {
+    // Mocking we have an array of five slides.
+    const slides = [1, 2, 3, 4, 5];
+    const { result } = renderHook(() => useCarouselStyles(slides.length));
+    const nextSlide = result.current.nextSlide;
+
+    // Start at the first slide.
+    expect(result.current.carouselStyle).toEqual({
+      marginLeft: "-0%",
+      transition: "all .5s",
+    });
+
+    act(() => nextSlide());
+    // Each slide takes up a width of 100% by default.
+    // So now we move by 100% to the left for the next slide.
+    expect(result.current.carouselStyle).toEqual({
+      marginLeft: "-100%",
+      transition: "all .5s",
+    });
+
+    act(() => nextSlide());
+    // Move on to the next slide.
+    expect(result.current.carouselStyle).toEqual({
+      marginLeft: "-200%",
+      transition: "all .5s",
+    });
+
+    // We now click through all five slides and we expect to wrap around
+    // back to the first slide which starts at "-0%" (the negative value
+    // is set for direction but -0 is still 0).
+    act(() => nextSlide());
+    act(() => nextSlide());
+    act(() => nextSlide());
+    expect(result.current.carouselStyle).toEqual({
+      marginLeft: "-0%",
+      transition: "all .5s",
+    });
+  });
+
+  it("updates the style object when the prevSlide function is clicked", () => {
+    // Mocking we have an array of five slides.
+    const slides = [1, 2, 3, 4, 5];
+    const { result } = renderHook(() => useCarouselStyles(slides.length));
+    const prevSlide = result.current.prevSlide;
+
+    // Start at the first slide.
+    expect(result.current.carouselStyle).toEqual({
+      marginLeft: "-0%",
+      transition: "all .5s",
+    });
+
+    act(() => prevSlide());
+    // We started on the first slide and nwo we expect to wrap around
+    // to the last element.
+    expect(result.current.carouselStyle).toEqual({
+      marginLeft: "-400%",
+      transition: "all .5s",
+    });
+
+    act(() => prevSlide());
+    // Move on to the previous slide.
+    expect(result.current.carouselStyle).toEqual({
+      marginLeft: "-300%",
+      transition: "all .5s",
+    });
+
+    // We now clicked through all five slides and we expect to
+    // be at the first slide.
+    act(() => prevSlide());
+    act(() => prevSlide());
+    act(() => prevSlide());
+    expect(result.current.carouselStyle).toEqual({
+      marginLeft: "-0%",
+      transition: "all .5s",
+    });
+  });
+
+  it("resets the slide back to the first slide", () => {
+    // Mocking we have an array of five slides.
+    const slides = [1, 2, 3, 4, 5];
+    const { result } = renderHook(() => useCarouselStyles(slides.length));
+    const { nextSlide, goToStart } = result.current;
+
+    // Start at the first slide.
+    expect(result.current.carouselStyle).toEqual({
+      marginLeft: "-0%",
+      transition: "all .5s",
+    });
+
+    // Move on to the third slide.
+    act(() => nextSlide());
+    act(() => nextSlide());
+    act(() => nextSlide());
+    expect(result.current.carouselStyle).toEqual({
+      marginLeft: "-300%",
+      transition: "all .5s",
+    });
+
+    act(() => goToStart());
+    expect(result.current.carouselStyle).toEqual({
+      marginLeft: "-0%",
+      transition: "all .5s",
+    });
+  });
+
+  it("can set a custom slide count and slide width", () => {
+    const slides = [1, 2, 3];
+    const slideWidth = 50;
+    const { result } = renderHook(() =>
+      useCarouselStyles(slides.length, slideWidth)
+    );
+
+    expect(result.current.carouselStyle).toEqual({
+      marginLeft: "-0%",
+      transition: "all .5s",
+    });
+
+    act(() => result.current.nextSlide());
+    // Since each slide is of length 50, we expect to move by a 50%.
+    expect(result.current.carouselStyle).toEqual({
+      marginLeft: "-50%",
+      transition: "all .5s",
+    });
+  });
+});

package/src/hooks/tests/useNYPLTheme.test.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { renderHook } from "@testing-library/react-hooks";
+
+import useNYPLTheme from "../useNYPLTheme";
+import DSProvider from "../../theme/provider";
+
+describe("useNYPLTheme", () => {
+  it("returns an empty object when not used inside a DSProvider component", () => {
+    const warn = jest.spyOn(console, "warn");
+    const { result } = renderHook(() => useNYPLTheme());
+
+    expect(warn).toHaveBeenCalledWith(
+      "The `useNYPLTheme` hook must be used inside of `<DSProvider />`."
+    );
+    expect(result.current).toEqual({});
+  });
+
+  it("returns an object with NYPL styles", () => {
+    const { result } = renderHook(() => useNYPLTheme(), {
+      wrapper: ({ children }) => <DSProvider>{children}</DSProvider>,
+    });
+    const allKeys = Object.keys(result.current);
+    const colorsKeys = Object.keys(result.current.colors);
+
+    expect(allKeys).toEqual([
+      "breakpoints",
+      "colors",
+      "fontSizes",
+      "fontWeights",
+      "fonts",
+      "radii",
+      "space",
+    ]);
+    expect(colorsKeys).toEqual(["brand", "section", "transparent", "ui"]);
+  });
+});

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,16 +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,
@@ -21,17 +25,18 @@ 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";
 export { default as Heading } from "./components/Heading/Heading";
 export {
   HeadingDisplaySizes,
@@ -43,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";
@@ -58,24 +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,
@@ -83,14 +93,27 @@ export {
   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 {
   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/_03-base.scss

@@ -0,0 +1,25 @@
+// Kept for backwards compatibility.
+.nypl-ds {
+  box-sizing: border-box;
+  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;
+  font-weight: 300;
+  line-height: 1.5;
+
+  // 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;
+
+  p {
+    margin: 0 0 var(--nypl-space-s);
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: inherit;
+  }
+}

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);
+  --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) {