@nypl/design-system-react-components 0.27.0 → 0.28.0

package/src/components/VideoPlayer/VideoPlayer.stories.mdx

@@ -9,19 +9,8 @@ import {
 import { withDesign } from "storybook-addon-designs";
 
 import VideoPlayer from "./VideoPlayer";
-import { VideoPlayerAspectRatios, VideoPlayerTypes } from "./VideoPlayerTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
-import { getStorybookEnumValues } from "../../utils/utils";
-
-export const ratiosEnumValues = getStorybookEnumValues(
-  VideoPlayerAspectRatios,
-  "VideoPlayerAspectRatios"
-);
-export const typesEnumValues = getStorybookEnumValues(
-  VideoPlayerTypes,
-  "VideoPlayerTypes"
-);
 
 <Meta
   title={getCategory("VideoPlayer")}
@@ -36,21 +25,16 @@ export const typesEnumValues = getStorybookEnumValues(
   }}
   argTypes={{
     aspectRatio: {
-      control: { type: "select" },
       table: {
-        defaultValue: { summary: "VideoPlayerAspectRatios.SixteenByNine" },
+        defaultValue: { summary: "sixteenByNine" },
       },
-      options: ratiosEnumValues.options,
     },
     className: { control: false },
     id: { control: false },
     showHelperInvalidText: {
       table: { defaultValue: { summary: true } },
     },
-    videoType: {
-      control: { type: "select" },
-      options: typesEnumValues.options,
-    },
+    videoType: {},
   }}
 />
 
@@ -59,7 +43,7 @@ export const typesEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.23.2`   |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -94,7 +78,7 @@ is `16:9`.
   <Story
     name="VideoPlayer"
     args={{
-      aspectRatio: "VideoPlayerAspectRatios.SixteenByNine",
+      aspectRatio: "sixteenByNine",
       className: undefined,
       descriptionText:
         "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",
@@ -112,9 +96,9 @@ is `16:9`.
     {(args) => (
       <VideoPlayer
         {...args}
-        aspectRatio={ratiosEnumValues.getValue(args.aspectRatio)}
+        aspectRatio={args.aspectRatio}
         embedCode={args.embedCode}
-        videoType={args.videoType && typesEnumValues.getValue(args.videoType)}
+        videoType={args.videoType && args.videoType}
       />
     )}
   </Story>
@@ -170,7 +154,9 @@ https://www.youtube.com/watch?v=nm-dD2tx6bk
 
 ## Example Embed Code Snippets
 
-The examples below are shown with precise HTML formatting. However, often the embed code snippets provided by 3rd party video services are delivered as one long string.
+The examples below are shown with precise HTML formatting. However, often the
+embed code snippets provided by 3rd party video services are delivered as one
+long string.
 
 ### Vimeo
 
@@ -201,14 +187,12 @@ The examples below are shown with precise HTML formatting. However, often the em
 
 ## Errored
 
-If the necessary props are not passed to the `VideoPlayer` component, the component UI will display an error message.
+If the necessary props are not passed to the `VideoPlayer` component, the
+component UI will display an error message.
 
 <Canvas>
   <DSProvider>
-    <VideoPlayer
-      videoId="https://vimeo.com/474719268"
-      videoType={VideoPlayerTypes.Vimeo}
-    />
+    <VideoPlayer videoId="https://vimeo.com/474719268" videoType="vimeo" />
   </DSProvider>
 </Canvas>
 
@@ -221,7 +205,7 @@ It's possible to include HTML in the `helperText` prop.
     <VideoPlayer
       helperText="This helper text <b>contains HTML</b>."
       videoId="474719268"
-      videoType={VideoPlayerTypes.Vimeo}
+      videoType="vimeo"
     />
   </DSProvider>
 </Canvas>

package/src/components/VideoPlayer/VideoPlayer.test.tsx

@@ -1,15 +1,14 @@
 import * as React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, RenderResult, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
 import VideoPlayer from "./VideoPlayer";
-import { VideoPlayerAspectRatios, VideoPlayerTypes } from "./VideoPlayerTypes";
 
 describe("VideoPlayer Accessibility", () => {
   it("passes axe accessibility test", async () => {
     const { container } = render(
-      <VideoPlayer videoType={VideoPlayerTypes.YouTube} videoId="nm-dD2tx6bk" />
+      <VideoPlayer videoType="youtube" videoId="nm-dD2tx6bk" />
     );
     expect(await axe(container)).toHaveNoViolations();
   });
@@ -17,13 +16,11 @@ describe("VideoPlayer Accessibility", () => {
 
 describe("VideoPlayer", () => {
   const videoId = "nm-dD2tx6bk";
-  let utils;
+  let utils: RenderResult;
 
   describe("YouTube player", () => {
     beforeEach(() => {
-      utils = render(
-        <VideoPlayer videoType={VideoPlayerTypes.YouTube} videoId={videoId} />
-      );
+      utils = render(<VideoPlayer videoType="youtube" videoId={videoId} />);
     });
 
     it("Renders VideoPlayer container", () => {
@@ -46,9 +43,7 @@ describe("VideoPlayer", () => {
     const videoId = "474719268";
 
     beforeEach(() => {
-      utils = render(
-        <VideoPlayer videoType={VideoPlayerTypes.Vimeo} videoId={videoId} />
-      );
+      utils = render(<VideoPlayer videoType="vimeo" videoId={videoId} />);
     });
 
     it("Renders VideoPlayer iframe", () => {
@@ -107,7 +102,7 @@ describe("VideoPlayer", () => {
     beforeEach(() => {
       utils = render(
         <VideoPlayer
-          videoType={VideoPlayerTypes.YouTube}
+          videoType="youtube"
           videoId={videoId}
           headingText="Video Player Heading"
           descriptionText="Video Player description text."
@@ -133,7 +128,7 @@ describe("VideoPlayer", () => {
     it("does not render the helper text", () => {
       utils.rerender(
         <VideoPlayer
-          videoType={VideoPlayerTypes.YouTube}
+          videoType="youtube"
           videoId={videoId}
           headingText="Video Player Heading"
           descriptionText="Video Player description text."
@@ -151,7 +146,7 @@ describe("VideoPlayer", () => {
     it("Uses iframeTitle prop to add custom title attribute to iframe", () => {
       render(
         <VideoPlayer
-          videoType={VideoPlayerTypes.Vimeo}
+          videoType="vimeo"
           videoId="474719268"
           iframeTitle="My custom iframe title."
         />
@@ -164,9 +159,9 @@ describe("VideoPlayer", () => {
     it("Throws error if the videoId prop not is formatted properly", () => {
       render(
         <VideoPlayer
-          videoType={VideoPlayerTypes.Vimeo}
+          videoType="vimeo"
           videoId="http://vimeo.com/474719268"
-          aspectRatio={VideoPlayerAspectRatios.FourByThree}
+          aspectRatio="fourByThree"
         />
       );
       expect(
@@ -191,7 +186,7 @@ describe("VideoPlayer", () => {
           "Only the `videoId` prop was set."
       );
 
-      render(<VideoPlayer videoType={VideoPlayerTypes.Vimeo} />);
+      render(<VideoPlayer videoType="vimeo" />);
       expect(warn).toHaveBeenCalledWith(
         "NYPL Reservoir VideoPlayer: The `videoId` prop is also required. " +
           "Only the `videoType` prop was set."
@@ -200,7 +195,7 @@ describe("VideoPlayer", () => {
       render(
         <VideoPlayer
           embedCode="<iframe src='https://player.vimeo.com/video/421404144?h=5467db7edd' width='640' height='360' frameborder='0' allow='autoplay; fullscreen; picture-in-picture' allowfullscreen></iframe>"
-          videoType={VideoPlayerTypes.Vimeo}
+          videoType="vimeo"
           videoId="http://vimeo.com/474719268"
         />
       );
@@ -212,7 +207,7 @@ describe("VideoPlayer", () => {
       render(
         <VideoPlayer
           embedCode="<iframe src='https://player.vimeo.com/video/421404144?h=5467db7edd' width='640' height='360' frameborder='0' allow='autoplay; fullscreen; picture-in-picture' allowfullscreen></iframe>"
-          videoType={VideoPlayerTypes.Vimeo}
+          videoType="vimeo"
         />
       );
       expect(warn).toHaveBeenCalledWith(
@@ -245,7 +240,7 @@ describe("VideoPlayer", () => {
         <VideoPlayer
           id="video-player-without-text"
           videoId="474719268"
-          videoType={VideoPlayerTypes.Vimeo}
+          videoType="vimeo"
         />
       )
       .toJSON();
@@ -257,7 +252,7 @@ describe("VideoPlayer", () => {
           id="video-player-with-text"
           helperText="VideoPlayer helper test."
           videoId="474719268"
-          videoType={VideoPlayerTypes.Vimeo}
+          videoType="vimeo"
         />
       )
       .toJSON();
@@ -277,7 +272,7 @@ describe("VideoPlayer", () => {
         <VideoPlayer
           id="video-player-error"
           videoId="https://vimeo.com/474719268"
-          videoType={VideoPlayerTypes.Vimeo}
+          videoType="vimeo"
         />
       )
       .toJSON();
@@ -286,7 +281,7 @@ describe("VideoPlayer", () => {
         <VideoPlayer
           id="chakra"
           videoId="474719268"
-          videoType={VideoPlayerTypes.Vimeo}
+          videoType="vimeo"
           p="20px"
           color="ui.error.primary"
         />
@@ -297,7 +292,7 @@ describe("VideoPlayer", () => {
         <VideoPlayer
           id="props"
           videoId="474719268"
-          videoType={VideoPlayerTypes.Vimeo}
+          videoType="vimeo"
           data-testid="props"
         />
       )

package/src/components/VideoPlayer/VideoPlayer.tsx

@@ -3,9 +3,12 @@ import * as React from "react";
 
 import ComponentWrapper from "../ComponentWrapper/ComponentWrapper";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-import { VideoPlayerAspectRatios, VideoPlayerTypes } from "./VideoPlayerTypes";
-import { getVariant } from "../../utils/utils";
 
+export type VideoPlayerTypes = "vimeo" | "youtube";
+export type VideoPlayerAspectRatios =
+  | "fourByThree"
+  | "sixteenByNine"
+  | "square";
 export interface VideoPlayerProps {
   /** Optional aspect ratio prop to control the sizing of the video player; if
    * omitted, the video player defaults to `sixteen-by-nine` */
@@ -57,12 +60,12 @@ export const VideoPlayer = chakra(
     } = props;
 
     const iframeTitleFinal =
-      videoType === VideoPlayerTypes.Vimeo
+      videoType === "vimeo"
         ? iframeTitle || "Vimeo video player"
         : iframeTitle || "YouTube video player";
 
     const videoSrc =
-      videoType === VideoPlayerTypes.Vimeo
+      videoType === "vimeo"
         ? `https://player.vimeo.com/video/${videoId}?autoplay=0&loop=0`
         : `https://www.youtube.com/embed/${videoId}?disablekb=1&autoplay=0&fs=1&modestbranding=0`;
 
@@ -138,9 +141,7 @@ export const VideoPlayer = chakra(
       isInvalid = true;
     }
 
-    const variant = isInvalid
-      ? "invalid"
-      : getVariant(aspectRatio, VideoPlayerAspectRatios);
+    const variant = isInvalid ? "invalid" : aspectRatio;
     const styles = useMultiStyleConfig("VideoPlayer", { variant });
 
     const embedElement = embedCodeFinal ? (
@@ -169,9 +170,11 @@ export const VideoPlayer = chakra(
           <span dangerouslySetInnerHTML={{ __html: errorMessage }} />
         ) : (
           <ComponentWrapper
-            headingText={headingText ? headingText : null}
-            descriptionText={descriptionText ? descriptionText : null}
-            helperText={helperText && showHelperInvalidText ? helperText : null}
+            headingText={headingText ? headingText : undefined}
+            descriptionText={descriptionText ? descriptionText : undefined}
+            helperText={
+              helperText && showHelperInvalidText ? helperText : undefined
+            }
             id={`${id}-componentWrapper`}
           >
             <Box __css={styles.inside}>{embedElement}</Box>

package/src/docs/Chakra.stories.mdx

@@ -92,8 +92,12 @@ wrap the elements in the `DSProvider` component.
 <Canvas>
   <DSProvider>
     <ButtonGroup>
-      <Button isDisabled={false}>Enabled</Button>
-      <Button isDisabled>Disabled</Button>
+      <Button id="enabled" isDisabled={false}>
+        Enabled
+      </Button>
+      <Button id="disabled" isDisabled>
+        Disabled
+      </Button>
     </ButtonGroup>
   </DSProvider>
 </Canvas>
@@ -259,7 +263,9 @@ const Button = {
 Now this variant can be rendered:
 
 ```tsx
-<Button buttonType={ButtonTypes.Secondary}>Press me</Button>
+<Button buttonType="secondary" id="secondary">
+  Press me
+</Button>
 ```
 
 ### Breakpoints
@@ -438,13 +444,13 @@ In the following example, the `Button` component has been passed `p` and `maxW`
 props which are shorthand for "padding" and "max-width", respectively.
 
 ```jsx
-<Button p="s" maxW="200px">
+<Button id="styleprops" p="s" maxW="200px">
   Button
 </Button>
 ```
 
 <DSProvider>
-  <Button p="s" maxW="200px">
+  <Button id="styleprops" p="s" maxW="200px">
     Button
   </Button>
 </DSProvider>
@@ -507,8 +513,7 @@ _Note: more patterns will be added._
 All DS components _should_ be used with their current styles. If a DS component
 needs an updated style, first contact the Design System and UX teams about this
 update. If you really _need_ to update a style and there is no available
-variant, then you can add styles directly to the `additionalStyles` prop. At the
-moment, not all DS components have this prop or feature.
+variant, then you can add styles directly as style prop.
 
 For example, if the `Heading` component should render the text in NYPL's green
 color used for "success primary" and add a bold font weight, then you can do
@@ -522,10 +527,8 @@ return (
   <div>
     <Heading
       level={2}
-      additionalStyles={{
-        color: theme.colors.ui.sucess.primary,
-        fontWeight: theme.fontWeights.bold,
-      }}
+      color={theme.colors.ui.success.primary}
+      fontWeight={theme.fontWeights.bold}
     >
       Get a Digital Library Card Today in a Few Easy Steps
     </Heading>

package/src/docs/Welcome.stories.mdx

@@ -2,27 +2,13 @@ import { Meta } from "@storybook/addon-docs";
 
 import { Box, Center, Circle, VStack, Square } from "@chakra-ui/react";
 import Card, { CardHeading, CardContent } from "../components/Card/Card";
-import Hero from "../components/Hero/Hero";
-import { HeroTypes } from "../components/Hero/HeroTypes";
 import Heading from "../components/Heading/Heading";
-import {
-  HeadingLevels,
-  HeadingSizes,
-} from "../components/Heading/HeadingTypes";
 import Icon from "../components/Icons/Icon";
-import {
-  IconColors,
-  IconNames,
-  IconSizes,
-} from "../components/Icons/IconTypes";
 import Image from "../components/Image/Image";
 import Link from "../components/Link/Link";
-import { LinkTypes } from "../components/Link/LinkTypes";
 import Logo from "../components/Logo/Logo";
-import { LogoNames, LogoSizes } from "../components/Logo/LogoTypes";
 import SimpleGrid from "../components/Grid/SimpleGrid";
 import Text from "../components/Text/Text";
-import { TextSizes } from "../components/Text/TextTypes";
 import DSProvider from "../theme/provider";
 
 <Meta title="Welcome" />
@@ -30,11 +16,11 @@ import DSProvider from "../theme/provider";
 <DSProvider>
   <VStack spacing="s">
     <Center>
-      <Logo name={LogoNames.ReservoirVerticalColor} size={LogoSizes.Small} />
+      <Logo name="reservoirVerticalColor" size="small" />
     </Center>
     <Box>
       <Center>
-        <Heading level={HeadingLevels.One} size={HeadingSizes.Tertiary}>
+        <Heading level="one" size="tertiary">
           The React Component Library of the New York Public Library
         </Heading>
       </Center>
@@ -57,31 +43,29 @@ import DSProvider from "../theme/provider";
         }}
       >
         <Icon
-          name={IconNames.ActionCheckCircle}
-          size={IconSizes.ExtraExtraLarge}
-          color={IconColors.SectionEducationSecondary}
-          additionalStyles={{
-            marginBottom: "s",
-          }}
+          name="actionCheckCircle"
+          size="xxlarge"
+          color="section.education.secondary"
+          marginBottom="s"
         />
         <Card isCentered>
-          <CardHeading id="main-heading1" level={HeadingLevels.Three}>
+          <CardHeading id="main-heading1" level="three">
             Get Started
           </CardHeading>
           <CardContent>
-            <Text size={TextSizes.Caption}>
+            <Text size="caption">
               To start using Reservoir Design System, refer to Reservoir's
               Github{" "}
               <Link
                 href="https://github.com/NYPL/nypl-design-system/wiki"
-                type={LinkTypes.External}
+                type="external"
               >
                 Wiki
               </Link>{" "}
               and{" "}
               <Link
                 href="https://github.com/NYPL/nypl-design-system/blob/development/README.md"
-                type={LinkTypes.External}
+                type="external"
               >
                 ReadMe
               </Link>{" "}
@@ -101,19 +85,17 @@ import DSProvider from "../theme/provider";
         }}
       >
         <Icon
-          name={IconNames.Search}
-          size={IconSizes.ExtraExtraLarge}
-          color={IconColors.SectionEducationSecondary}
-          additionalStyles={{
-            marginBottom: "s",
-          }}
+          name="search"
+          size="xxlarge"
+          color="section.education.secondary"
+          marginBottom="s"
         />
         <Card isCentered>
-          <CardHeading id="main-heading1" level={HeadingLevels.Three}>
+          <CardHeading id="main-heading1" level="three">
             Find Components
           </CardHeading>
           <CardContent>
-            <Text size={TextSizes.Caption}>
+            <Text size="caption">
               For your convenience, the Reservoir Design System components have
               been organized into logical categories based on both form and
               function. Please refer to the <b>COMPONENTS</b> section in the
@@ -132,15 +114,13 @@ import DSProvider from "../theme/provider";
         }}
       >
         <Icon
-          name={IconNames.FileTypeSpreadsheet}
-          size={IconSizes.ExtraExtraLarge}
-          color={IconColors.SectionEducationSecondary}
-          additionalStyles={{
-            marginBottom: "s",
-          }}
+          name="fileTypeSpreadsheet"
+          size="xxlarge"
+          color="section.education.secondary"
+          marginBottom="s"
         />
         <Card isCentered>
-          <CardHeading id="main-heading1" level={HeadingLevels.Three}>
+          <CardHeading id="main-heading1" level="three">
             View the Code
           </CardHeading>
           <CardContent>
@@ -149,13 +129,13 @@ import DSProvider from "../theme/provider";
               published on{" "}
               <Link
                 href="https://www.npmjs.com/package/@nypl/design-system-react-components"
-                type={LinkTypes.External}
+                type="external"
               >
                 npm
               </Link>
               . If you're looking to contribute to this project, checkout the <Link
                 href="https://github.com/NYPL/nypl-design-system"
-                type={LinkTypes.External}
+                type="external"
               >
                 nypl-design-system
               </Link> repo on Github for more information.

package/src/helpers/types.ts

@@ -0,0 +1 @@
+export type LayoutTypes = "column" | "row";

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

@@ -20,7 +20,7 @@ describe("useNYPLTheme", () => {
       wrapper: ({ children }) => <DSProvider>{children}</DSProvider>,
     });
     const allKeys = Object.keys(result.current);
-    const colorsKeys = Object.keys(result.current.colors);
+    const colorsKeys = Object.keys((result.current as any).colors);
 
     expect(allKeys).toEqual([
       "breakpoints",

package/src/hooks/useNYPLTheme.stories.mdx

@@ -55,8 +55,7 @@ This will allow you to use NYPL-specific styles in your components through CSS-i
 All DS components _should_ be used with their current styles. If a DS component
 needs an updated style, first contact the Design System and UX teams about this
 update. If you really _need_ to update a style and there is no available
-variant, then you can add styles directly to the `additionalStyles` prop. At the
-moment, not all DS components have this prop or feature.
+variant, then you can add styles directly as style prop.
 
 For example, if the `Heading` component should render the text in NYPL's green
 color used for "success primary" and add a bold font weight, then you can do
@@ -70,10 +69,8 @@ return (
   <div>
     <Heading
       level={2}
-      additionalStyles={{
-        color: theme.colors.ui.sucess.primary,
-        fontWeight: theme.fontWeights.bold,
-      }}
+      color={theme.colors.ui.success.primary}
+      fontWeight={theme.fontWeights.bold}
     >
       Get a Digital Library Card Today in a Few Easy Steps
     </Heading>