@nypl/design-system-react-components 0.26.1 → 1.0.0

package/src/components/Toggle/Toggle.stories.mdx

@@ -11,15 +11,8 @@ import { withDesign } from "storybook-addon-designs";
 import Heading from "../Heading/Heading";
 import SimpleGrid from "../Grid/SimpleGrid";
 import Toggle from "./Toggle";
-import { ToggleSizes } from "./ToggleTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
-import { getStorybookEnumValues } from "../../utils/utils";
-
-export const sizeEnumValues = getStorybookEnumValues(
-  ToggleSizes,
-  "ToggleSizes"
-);
 
 <Meta
   title={getCategory("Toggle")}
@@ -33,7 +26,6 @@ export const sizeEnumValues = getStorybookEnumValues(
     jest: ["Toggle.test.tsx"],
   }}
   argTypes={{
-    additionalStyles: { control: false },
     defaultChecked: { control: false },
     id: { control: false },
     key: { table: { disable: true } },
@@ -42,9 +34,7 @@ export const sizeEnumValues = getStorybookEnumValues(
     ref: { table: { disable: true } },
     size: {
       control: {
-        type: "select",
-        table: { defaultValue: { summary: "ToggleSizes.Default" } },
-        options: sizeEnumValues.options,
+        table: { defaultValue: { summary: "default" } },
       },
     },
   }}
@@ -55,7 +45,7 @@ export const sizeEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.8`   |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -89,7 +79,6 @@ should be short and to the point, often three words or less.
   <Story
     name="Toggle"
     args={{
-      additionalStyles: undefined,
       defaultChecked: false,
       helperText: "This is the helper text!",
       id: "toggle-1",
@@ -104,7 +93,7 @@ should be short and to the point, often three words or less.
       size: "ToogleSizes.Large",
     }}
   >
-    {(args) => <Toggle {...args} size={sizeEnumValues.getValue(args.size)} />}
+    {(args) => <Toggle {...args} />}
   </Story>
 </Canvas>
 
@@ -143,10 +132,10 @@ Resources:
         <Toggle
           defaultChecked={true}
           id="small-checked"
-          size={ToggleSizes.Small}
+          size="small"
           labelText="On"
         />
-        <Toggle id="default-small" size={ToggleSizes.Small} labelText="Off" />
+        <Toggle id="default-small" size="small" labelText="Off" />
       </VStack>
     </SimpleGrid>
   </DSProvider>

package/src/components/Toggle/Toggle.test.tsx

@@ -5,7 +5,6 @@ import * as React from "react";
 import renderer from "react-test-renderer";
 
 import Toggle from "./Toggle";
-import { ToggleSizes } from "./ToggleTypes";
 
 describe("Toggle Accessibility", () => {
   it("Passes axe accessibility test", async () => {
@@ -17,7 +16,7 @@ describe("Toggle Accessibility", () => {
 });
 
 describe("Toggle", () => {
-  let changeHandler;
+  let changeHandler: jest.MockedFunction<() => void>;
 
   beforeEach(() => {
     changeHandler = jest.fn();
@@ -142,7 +141,7 @@ describe("Toggle", () => {
           id="Toggle-disabled"
           labelText="Test Label"
           isDisabled
-          size={ToggleSizes.Small}
+          size="small"
         />
       )
       .toJSON();

package/src/components/Toggle/Toggle.tsx

@@ -10,10 +10,10 @@ import * as React from "react";
 import HelperErrorText, {
   HelperErrorTextType,
 } from "../HelperErrorText/HelperErrorText";
-import { ToggleSizes } from "./ToggleTypes";
+import { AriaAttributes } from "../../utils/interfaces";
+
+export type ToggleSizes = "default" | "small";
 export interface ToggleProps {
-  /** Optionally pass in additional Chakra-based styles. */
-  additionalStyles?: { [key: string]: any };
   /** Used for uncontrolled scenarios.  Sets the state of the Toggle when the page first loads.
    *   If true, the toggle will be initially set to the "on" position. */
   defaultChecked?: boolean;
@@ -57,7 +57,6 @@ export const onChangeDefault = () => {
 export const Toggle = chakra(
   React.forwardRef<HTMLInputElement, ToggleProps>((props, ref?) => {
     const {
-      additionalStyles = {},
       defaultChecked = false,
       helperText,
       id,
@@ -69,11 +68,11 @@ export const Toggle = chakra(
       labelText,
       name,
       onChange = onChangeDefault,
-      size = ToggleSizes.Default,
+      size = "default",
       ...rest
     } = props;
-    const footnote: HelperErrorTextType = isInvalid ? invalidText : helperText;
-    const ariaAttributes = {};
+    const footnote = isInvalid ? invalidText : helperText;
+    const ariaAttributes: AriaAttributes = {};
     const styles = useMultiStyleConfig("Toggle", { isDisabled, size });
     const switchStyles = useStyleConfig("Switch", { size });
     ariaAttributes["aria-label"] =
@@ -87,7 +86,7 @@ export const Toggle = chakra(
 
     return (
       <>
-        <Box __css={{ ...styles, ...additionalStyles }} {...rest}>
+        <Box __css={styles} {...rest}>
           <Switch
             id={id}
             name={name || "default"}
@@ -95,7 +94,7 @@ export const Toggle = chakra(
             isInvalid={isInvalid}
             isRequired={isRequired}
             ref={ref}
-            size={size === ToggleSizes.Default ? "lg" : "sm"}
+            size={size === "default" ? "lg" : "sm"}
             lineHeight="1.5"
             {...(isChecked !== undefined
               ? {
@@ -113,10 +112,10 @@ export const Toggle = chakra(
         </Box>
         {footnote && (
           <HelperErrorText
-            additionalStyles={styles.helperErrorText}
             id={`${id}-helperText`}
             isInvalid={isInvalid}
             text={footnote}
+            __css={styles.helperErrorText}
           />
         )}
       </>

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>