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

package/src/components/ComponentWrapper/ComponentWrapper.tsx

@@ -9,12 +9,16 @@ import Text from "../Text/Text";
 export interface ComponentWrapperProps {
   /** The UI elements that will be wrapped by this component */
   children: React.ReactNode;
+  /** A class name for the `div` parent element. */
+  className?: string;
   /** Optional string to set the text for the component's description */
   descriptionText?: string;
   /** Optional string to set the text for a `Heading` component */
   headingText?: string;
   /** Optional string to set the text for a `HelperErrorText` component */
   helperText?: HelperErrorTextType;
+  /** Styles that target the helper text. */
+  helperTextStyles?: { [key: string]: any };
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
   /** Optional string to populate the `HelperErrorText` for the error state
@@ -22,18 +26,23 @@ export interface ComponentWrapperProps {
   invalidText?: HelperErrorTextType;
   /** Sets invalid text in the error state. */
   isInvalid?: boolean;
+  /** Offers the ability to hide the helper/invalid text. */
+  showHelperInvalidText?: boolean;
 }
 
 export const ComponentWrapper = chakra(
   (props: React.PropsWithChildren<ComponentWrapperProps>) => {
     const {
       children,
+      className,
       descriptionText,
       headingText,
       helperText,
+      helperTextStyles = {},
       id,
       invalidText,
       isInvalid = false,
+      showHelperInvalidText = true,
       ...rest
     } = props;
     const hasChildren = !!children;
@@ -47,16 +56,16 @@ export const ComponentWrapper = chakra(
     }
 
     return (
-      <Box __css={styles} {...rest}>
+      <Box className={className} id={`${id}-wrapper`} __css={styles} {...rest}>
         {headingText && <Heading id={`${id}-heading`} text={headingText} />}
         {descriptionText && <Text>{descriptionText}</Text>}
         {children}
-        {footnote && (
+        {footnote && showHelperInvalidText && (
           <HelperErrorText
             id={`${id}-helperText`}
             isInvalid={isInvalid}
             text={footnote}
-            __css={styles.helperErrorText}
+            __css={{ ...styles.helperErrorText, ...helperTextStyles }}
           />
         )}
       </Box>

package/src/components/ComponentWrapper/__snapshots__/ComponentWrapper.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`ComponentWrapper Renders the UI snapshot correctly 1`] = `
 <div
   className="css-1xdhyk6"
+  id="id-wrapper"
 >
   <h2
     className="chakra-heading css-1xdhyk6"
@@ -36,6 +37,7 @@ exports[`ComponentWrapper Renders the UI snapshot correctly 1`] = `
 exports[`ComponentWrapper Renders the UI snapshot correctly 2`] = `
 <div
   className="css-1xdhyk6"
+  id="id-wrapper"
 >
   <div>
     children elements
@@ -46,6 +48,7 @@ exports[`ComponentWrapper Renders the UI snapshot correctly 2`] = `
 exports[`ComponentWrapper Renders the UI snapshot correctly 3`] = `
 <div
   className="css-1xdhyk6"
+  id="id-wrapper"
 >
   <h2
     className="chakra-heading css-1xdhyk6"
@@ -79,6 +82,7 @@ exports[`ComponentWrapper Renders the UI snapshot correctly 3`] = `
 exports[`ComponentWrapper Renders the UI snapshot correctly 4`] = `
 <div
   className="css-kle7zy"
+  id="chakra-wrapper"
 >
   <div>
     children elements
@@ -90,6 +94,7 @@ exports[`ComponentWrapper Renders the UI snapshot correctly 5`] = `
 <div
   className="css-1xdhyk6"
   data-testid="props"
+  id="props-wrapper"
 >
   <div>
     children elements

package/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap

@@ -27,7 +27,8 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 1`] = `
             className="react-datepicker__input-container"
           >
             <div
-              className="css-1xdhyk6"
+              className="css-1u8qly9"
+              id="basic-start-wrapper"
             >
               <label
                 className="css-1xdhyk6"
@@ -64,7 +65,8 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 1`] = `
             className="react-datepicker__input-container"
           >
             <div
-              className="css-1xdhyk6"
+              className="css-1u8qly9"
+              id="basic-end-wrapper"
             >
               <label
                 className="css-1xdhyk6"
@@ -122,7 +124,8 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 2`] = `
             className="react-datepicker__input-container"
           >
             <div
-              className="css-1xdhyk6"
+              className="css-1u8qly9"
+              id="no-label-start-wrapper"
             >
               <label
                 className="css-1xdhyk6"
@@ -159,7 +162,8 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 2`] = `
             className="react-datepicker__input-container"
           >
             <div
-              className="css-1xdhyk6"
+              className="css-1u8qly9"
+              id="no-label-end-wrapper"
             >
               <label
                 className="css-1xdhyk6"
@@ -217,7 +221,8 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 3`] = `
             className="react-datepicker__input-container"
           >
             <div
-              className="css-1xdhyk6"
+              className="css-1u8qly9"
+              id="custom-format-start-wrapper"
             >
               <label
                 className="css-1xdhyk6"
@@ -254,7 +259,8 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 3`] = `
             className="react-datepicker__input-container"
           >
             <div
-              className="css-1xdhyk6"
+              className="css-1u8qly9"
+              id="custom-format-end-wrapper"
             >
               <label
                 className="css-1xdhyk6"
@@ -312,7 +318,8 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 4`] = `
             className="react-datepicker__input-container"
           >
             <div
-              className="css-1xdhyk6"
+              className="css-1u8qly9"
+              id="invalid-start-wrapper"
             >
               <label
                 className="css-1xdhyk6"
@@ -322,6 +329,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 4`] = `
                 From
               </label>
               <input
+                aria-describedby="invalid-start-helperText"
                 aria-invalid={true}
                 className="chakra-input css-0"
                 disabled={false}
@@ -362,7 +370,8 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 4`] = `
             className="react-datepicker__input-container"
           >
             <div
-              className="css-1xdhyk6"
+              className="css-1u8qly9"
+              id="invalid-end-wrapper"
             >
               <label
                 className="css-1xdhyk6"
@@ -372,6 +381,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 4`] = `
                 To
               </label>
               <input
+                aria-describedby="invalid-end-helperText"
                 aria-invalid={true}
                 className="chakra-input css-0"
                 disabled={false}
@@ -445,7 +455,8 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 5`] = `
             className="react-datepicker__input-container"
           >
             <div
-              className="css-1xdhyk6"
+              className="css-1u8qly9"
+              id="disabled-start-wrapper"
             >
               <label
                 className="css-1xdhyk6"
@@ -482,7 +493,8 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 5`] = `
             className="react-datepicker__input-container"
           >
             <div
-              className="css-1xdhyk6"
+              className="css-1u8qly9"
+              id="disabled-end-wrapper"
             >
               <label
                 className="css-1xdhyk6"
@@ -541,7 +553,8 @@ exports[`DatePicker Single input renders the UI snapshot correctly 1`] = `
         className="react-datepicker__input-container"
       >
         <div
-          className="css-1xdhyk6"
+          className="css-1u8qly9"
+          id="basic-start-wrapper"
         >
           <label
             className="css-1xdhyk6"
@@ -586,7 +599,8 @@ exports[`DatePicker Single input renders the UI snapshot correctly 2`] = `
         className="react-datepicker__input-container"
       >
         <div
-          className="css-1xdhyk6"
+          className="css-1u8qly9"
+          id="no-label-start-wrapper"
         >
           <input
             aria-label="Select the date you want to visit NYPL"
@@ -625,7 +639,8 @@ exports[`DatePicker Single input renders the UI snapshot correctly 3`] = `
         className="react-datepicker__input-container"
       >
         <div
-          className="css-1xdhyk6"
+          className="css-1u8qly9"
+          id="custom-format-start-wrapper"
         >
           <label
             className="css-1xdhyk6"
@@ -670,7 +685,8 @@ exports[`DatePicker Single input renders the UI snapshot correctly 4`] = `
         className="react-datepicker__input-container"
       >
         <div
-          className="css-1xdhyk6"
+          className="css-1u8qly9"
+          id="invalid-start-wrapper"
         >
           <label
             className="css-1xdhyk6"
@@ -729,7 +745,8 @@ exports[`DatePicker Single input renders the UI snapshot correctly 5`] = `
         className="react-datepicker__input-container"
       >
         <div
-          className="css-1xdhyk6"
+          className="css-1u8qly9"
+          id="disabled-start-wrapper"
         >
           <label
             className="css-1xdhyk6"
@@ -787,7 +804,8 @@ exports[`DatePicker Single input renders the UI snapshot correctly 6`] = `
         className="react-datepicker__input-container"
       >
         <div
-          className="css-1xdhyk6"
+          className="css-1u8qly9"
+          id="chakra-start-wrapper"
         >
           <label
             className="css-1xdhyk6"
@@ -846,7 +864,8 @@ exports[`DatePicker Single input renders the UI snapshot correctly 7`] = `
         className="react-datepicker__input-container"
       >
         <div
-          className="css-1xdhyk6"
+          className="css-1u8qly9"
+          id="props-start-wrapper"
         >
           <label
             className="css-1xdhyk6"

package/src/components/Grid/SimpleGrid.stories.mdx

@@ -226,9 +226,7 @@ export const iconNames = [
 ];
 for (const name in iconNames) {
   const iname = `Example icon: ${iconNames[name]}`;
-  const iconRender = (
-    <Icon key={name} name={iconNames[name]} size="xxxlarge" title={iname} />
-  );
+  const iconRender = <Icon key={name} name={iconNames[name]} size="xxxlarge" />;
   icons.push(iconRender);
 }
 

package/src/components/Heading/Heading.stories.mdx

@@ -27,6 +27,7 @@ import { getCategory } from "../../utils/componentCategories";
     level: {
       table: { defaultValue: { summary: "two" } },
     },
+    noSpace: { table: { defaultValue: { summary: false } } },
   }}
 />
 
@@ -35,7 +36,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.28.0`   |
+| Latest            | `1.0.2`    |
 
 ## Table of Contents
 
@@ -63,6 +64,8 @@ semantic elements can be overwritten using the `size` prop.
     args={{
       className: undefined,
       id: "heading-id",
+      level: "HeadingLevels.Two",
+      noSpace: false,
       level: "two",
       size: undefined,
       text: "Default Heading",

package/src/components/Heading/Heading.tsx

@@ -20,6 +20,8 @@ export interface HeadingProps {
   /** Optional size used to override the default styles of the semantic HTM
    * `<h>` elements */
   size?: HeadingSizes;
+  /** Optional prop used to remove default spacing */
+  noSpace?: boolean;
   /** Inner text of the `<h*>` element */
   text?: string;
   /** Optional URL that header points to; when `url` prop is passed to
@@ -50,6 +52,7 @@ export const Heading = chakra(
       id,
       level = "two",
       size,
+      noSpace,
       text,
       url,
       urlClass,
@@ -57,7 +60,7 @@ export const Heading = chakra(
     } = props;
     const finalLevel = getMappedLevel(level);
     const variant = size ? size : `h${finalLevel}`;
-    const styles = useStyleConfig("Heading", { variant });
+    const styles = useStyleConfig("Heading", { variant, noSpace });
     // Combine native base styles with any additional styles.
     // This is used in the `Hero` and `Notification` components.
     const asHeading: any = `h${finalLevel}`;

package/src/components/Image/Image.stories.mdx

@@ -66,7 +66,7 @@ export const imageBlockStyles = {
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.6`    |
-| Latest            | `0.28.0`   |
+| Latest            | `1.0.2`    |
 
 ## Table of Contents
 

package/src/components/Logo/Logo.stories.mdx

@@ -44,7 +44,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.9`   |
-| Latest            | `0.28.0`   |
+| Latest            | `1.0.2`    |
 
 ## Table of Contents
 
@@ -120,12 +120,16 @@ export const logoRow = (logo, opts = {}) => {
 export const logos = [];
 export const sizes = [];
 export const logoNameValues = [
+  "appleAppStoreBlack",
+  "appleAppStoreWhite",
   "bplBlack",
   "bplWhite",
+  "cleverBadgeColor",
   "cleverColor",
   "cleverWhite",
   "firstbookColor",
   "firstbookColorNegative",
+  "googlePlayBlack",
   "lpaColor",
   "lpaBlack",
   "lpaWhite",
@@ -226,8 +230,9 @@ fill the full width of the parent element.
 ## All Logos
 
 Update the icon of the `Logo` component by passing the `name` prop with a value
-from the `LogoNames` type. The values are `"bplBlack"`, `"bplWhite"`,
-`"cleverColor"`, `"cleverWhite"`, `"firstbookColor"`, `"firstbookColorNegative"`,
+from the `LogoNames` type. The values are `"appleAppStoreBlack"`,
+`"appleAppStoreWhite"`,`"bplBlack"`, `"bplWhite"`, `"cleverBadgeColor"`, `"cleverColor"`,
+`"cleverWhite"`, `"firstbookColor"`, `"firstbookColorNegative"`, `"googlePlayBlack"`,
 `"lpaBlack"`, `"lpaColor"`, `"lpaWhite"`, `"mlnBlack"`, `"mlnWhite"`,
 `"nyplFullBlack"`, `"nyplFullWhite"`, `"nyplLionBlack"`, `"nyplLionWhite"`,
 `"openebooksColor"`, `"openebooksNegative"`, `"openebooksWithTextColor"`,
@@ -253,7 +258,7 @@ child to the `Logo` component.
 ```jsx
 <Logo {...props}>
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192.756 192.756">
-    <g fill-rule="evenodd" clip-rule="evenodd">
+    <g fillRule="evenodd" clipRule="evenodd">
       <path fill="#fff" d="M0 0h192.756v192.756H0V0z" />
       <path
         d="M59.73 117.578c-9.859-4.912-23.261-15.887-23.413-27.06C36.149 78.129 44.451 75.087 50 75.087c5.701 0 8.286 3.345 10.637 5.777 2.352-2.433 4.936-5.777 10.637-5.777 5.549 0 13.851 3.042 13.682 15.431-.151 11.173-13.553 22.148-23.412 27.06-.35.174-.629.262-.907.262s-.557-.088-.907-.262z"
@@ -275,7 +280,7 @@ child to the `Logo` component.
     {(args) => (
       <Logo {...args}>
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192.756 192.756">
-          <g fill-rule="evenodd" clip-rule="evenodd">
+          <g fillRule="evenodd" clipRule="evenodd">
             <path fill="#fff" d="M0 0h192.756v192.756H0V0z" />
             <path
               d="M59.73 117.578c-9.859-4.912-23.261-15.887-23.413-27.06C36.149 78.129 44.451 75.087 50 75.087c5.701 0 8.286 3.345 10.637 5.777 2.352-2.433 4.936-5.777 10.637-5.777 5.549 0 13.851 3.042 13.682 15.431-.151 11.173-13.553 22.148-23.412 27.06-.35.174-.629.262-.907.262s-.557-.088-.907-.262z"

package/src/components/Logo/Logo.tsx

@@ -9,12 +9,16 @@ import * as React from "react";
 import logoSvgs from "./LogoSvgs";
 
 export type LogoNames =
+  | "appleAppStoreBlack"
+  | "appleAppStoreWhite"
   | "bplBlack"
   | "bplWhite"
+  | "cleverBadgeColor"
   | "cleverColor"
   | "cleverWhite"
   | "firstbookColor"
   | "firstbookColorNegative"
+  | "googlePlayBlack"
   | "lpaBlack"
   | "lpaColor"
   | "lpaWhite"

package/src/components/Logo/LogoSvgs.tsx

@@ -1,10 +1,14 @@
 /* eslint-disable camelcase */
+import appleAppStoreBlack from "../../../icons/svg/logo-apple-app-store-black.svg";
+import appleAppStoreWhite from "../../../icons/svg/logo-apple-app-store-white.svg";
 import bplBlack from "../../../icons/svg/logo-bpl-black.svg";
 import bplWhite from "../../../icons/svg/logo-bpl-white.svg";
+import cleverBadgeColor from "../../../icons/svg/logo-clever-badge-color.svg";
 import cleverColor from "../../../icons/svg/logo-clever-color.svg";
 import cleverWhite from "../../../icons/svg/logo-clever-white.svg";
 import firstbookColor from "../../../icons/svg/logo-firstbook-color.svg";
 import firstbookColorNegative from "../../../icons/svg/logo-firstbook-color-negative.svg";
+import googlePlayBlack from "../../../icons/svg/logo-google-play-black.svg";
 import lpaColor from "../../../icons/svg/logo-lpa-color.svg";
 import lpaBlack from "../../../icons/svg/logo-lpa-black.svg";
 import lpaWhite from "../../../icons/svg/logo-lpa-white.svg";
@@ -40,12 +44,16 @@ import treasuresColor from "../../../icons/svg/logo-treasures-color.svg";
 import treasuresColorNegative from "../../../icons/svg/logo-treasures-color-negative.svg";
 
 export default {
+  appleAppStoreBlack,
+  appleAppStoreWhite,
   bplBlack,
   bplWhite,
+  cleverBadgeColor,
   cleverColor,
   cleverWhite,
   firstbookColor,
   firstbookColorNegative,
+  googlePlayBlack,
   lpaBlack,
   lpaColor,
   lpaWhite,

package/src/components/Modal/Modal.stories.mdx

@@ -206,96 +206,89 @@ In either `Modal` pattern, the main content inside the `Modal` component will
 scroll while the `Modal`'s header and footer still stay static. Check the
 example below with a lot of content inside the `Modal`.
 
+export const scrollModalProps = {
+  bodyContent: (
+    <>
+      <Heading text="Content Title" />
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Pellentesque massa
+        placerat duis ultricies lacus sed turpis tincidunt.
+        <Link href="http://nypl.org">Porttitor eget dolor</Link> morbi non arcu risus
+        quis varius. Faucibus in ornare quam viverra orci sagittis.
+      </p>
+      <p>
+        Nisl vel pretium lectus quam id leo in. Etiam dignissim diam quis enim
+        lobortis scelerisque fermentum. Diam maecenas sed enim ut sem viverra.
+        Diam quam nulla porttitor massa id neque. Sed faucibus turpis in eu mi.
+      </p>
+      <p>
+        Ornare lectus sit amet est placerat in. Quis blandit turpis cursus in.
+        Aliquam ut porttitor leo a diam sollicitudin tempor id eu. Pellentesque
+        eu tincidunt tortor aliquam nulla facilisi cras fermentum. Porttitor leo
+        a diam sollicitudin tempor id eu nisl nunc. Feugiat nisl pretium fusce
+        id velit ut tortor. Porttitor leo a diam sollicitudin tempor id eu nisl
+        nunc.
+      </p>
+      <p>
+        Mauris nunc congue nisi vitae suscipit tellus mauris a diam. Purus
+        gravida quis blandit turpis cursus in hac. Morbi tempus iaculis urna id
+        volutpat. Lectus nulla at volutpat diam ut venenatis. Donec ac odio
+        tempor orci dapibus ultrices in iaculis. Dui vivamus arcu felis bibendum
+        ut tristique. Cras semper auctor neque vitae tempus quam pellentesque.
+        Placerat orci nulla pellentesque dignissim enim sit amet. Feugiat
+        pretium nibh ipsum consequat. Placerat orci nulla pellentesque
+        dignissim. Suspendisse faucibus interdum posuere lorem. Nullam non nisi
+        est sit. Turpis egestas integer eget aliquet nibh praesent. Tortor at
+        risus 'viverra adipiscing at. Eu augue ut lectus arcu bibendum at varius
+        vel' pharetra.
+      </p>
+      <Heading text="Another Title" />
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Pellentesque massa
+        placerat duis ultricies lacus sed turpis tincidunt.
+        <Link href="http://nypl.org">Porttitor eget dolor</Link> morbi non arcu risus
+        quis varius. Faucibus in ornare quam viverra orci sagittis.
+      </p>
+      <p>
+        Nisl vel pretium lectus quam id leo in. Etiam dignissim diam quis enim
+        lobortis scelerisque fermentum. Diam maecenas sed enim ut sem viverra.
+        Diam quam nulla porttitor massa id neque. Sed faucibus turpis in eu mi.
+      </p>
+      <p>
+        Ornare lectus sit amet est placerat in. Quis blandit turpis cursus in.
+        Aliquam ut porttitor leo a diam sollicitudin tempor id eu. Pellentesque
+        eu tincidunt tortor aliquam nulla facilisi cras fermentum. Porttitor leo
+        a diam sollicitudin tempor id eu nisl nunc. Feugiat nisl pretium fusce
+        id velit ut tortor. Porttitor leo a diam sollicitudin tempor id eu nisl
+        nunc.
+      </p>
+      <p>
+        Mauris nunc congue nisi vitae suscipit tellus mauris a diam. Purus
+        gravida quis blandit turpis cursus in hac. Morbi tempus iaculis urna id
+        volutpat. Lectus nulla at volutpat diam ut venenatis. Donec ac odio
+        tempor orci dapibus ultrices in iaculis. Dui vivamus arcu felis bibendum
+        ut tristique. Cras semper auctor neque vitae tempus quam pellentesque.
+        Placerat orci nulla pellentesque dignissim enim sit amet. Feugiat
+        pretium nibh ipsum consequat. Placerat orci nulla pellentesque
+        dignissim. Suspendisse faucibus interdum posuere lorem. Nullam non nisi
+        est sit. Turpis egestas integer eget aliquet nibh praesent. Tortor at
+        risus 'viverra adipiscing at. Eu augue ut lectus arcu bibendum at varius
+        vel' pharetra.
+      </p>
+    </>
+  ),
+  closeButtonLabel: "Close Button",
+  headingText: "Modal Heading Text",
+};
+
 <Canvas withToolbar>
-  <Story
-    name="Content Window Scrolling"
-    args={{
-      buttonText: "Button Text",
-      id: "modal-scrolling",
-      modalProps: {
-        bodyContent: (
-          <>
-            <Heading text="Content Title" />
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua.
-              Pellentesque massa placerat duis ultricies lacus sed turpis
-              tincidunt.
-              <Link href="http://nypl.org">Porttitor eget dolor</Link> morbi non
-              arcu risus quis varius. Faucibus in ornare quam viverra orci sagittis.
-            </p>
-            <p>
-              Nisl vel pretium lectus quam id leo in. Etiam dignissim diam quis
-              enim lobortis scelerisque fermentum. Diam maecenas sed enim ut sem
-              viverra. Diam quam nulla porttitor massa id neque. Sed faucibus
-              turpis in eu mi.
-            </p>
-            <p>
-              Ornare lectus sit amet est placerat in. Quis blandit turpis cursus
-              in. Aliquam ut porttitor leo a diam sollicitudin tempor id eu.
-              Pellentesque eu tincidunt tortor aliquam nulla facilisi cras
-              fermentum. Porttitor leo a diam sollicitudin tempor id eu nisl
-              nunc. Feugiat nisl pretium fusce id velit ut tortor. Porttitor leo
-              a diam sollicitudin tempor id eu nisl nunc.
-            </p>
-            <p>
-              Mauris nunc congue nisi vitae suscipit tellus mauris a diam. Purus
-              gravida quis blandit turpis cursus in hac. Morbi tempus iaculis
-              urna id volutpat. Lectus nulla at volutpat diam ut venenatis.
-              Donec ac odio tempor orci dapibus ultrices in iaculis. Dui vivamus
-              arcu felis bibendum ut tristique. Cras semper auctor neque vitae
-              tempus quam pellentesque. Placerat orci nulla pellentesque
-              dignissim enim sit amet. Feugiat pretium nibh ipsum consequat.
-              Placerat orci nulla pellentesque dignissim. Suspendisse faucibus
-              interdum posuere lorem. Nullam non nisi est sit. Turpis egestas
-              integer eget aliquet nibh praesent. Tortor at risus 'viverra
-              adipiscing at. Eu augue ut lectus arcu bibendum at varius vel'
-              pharetra.
-            </p>
-            <Heading text="Another Title" />
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua.
-              Pellentesque massa placerat duis ultricies lacus sed turpis
-              tincidunt.
-              <Link href="http://nypl.org">Porttitor eget dolor</Link> morbi non
-              arcu risus quis varius. Faucibus in ornare quam viverra orci sagittis.
-            </p>
-            <p>
-              Nisl vel pretium lectus quam id leo in. Etiam dignissim diam quis
-              enim lobortis scelerisque fermentum. Diam maecenas sed enim ut sem
-              viverra. Diam quam nulla porttitor massa id neque. Sed faucibus
-              turpis in eu mi.
-            </p>
-            <p>
-              Ornare lectus sit amet est placerat in. Quis blandit turpis cursus
-              in. Aliquam ut porttitor leo a diam sollicitudin tempor id eu.
-              Pellentesque eu tincidunt tortor aliquam nulla facilisi cras
-              fermentum. Porttitor leo a diam sollicitudin tempor id eu nisl
-              nunc. Feugiat nisl pretium fusce id velit ut tortor. Porttitor leo
-              a diam sollicitudin tempor id eu nisl nunc.
-            </p>
-            <p>
-              Mauris nunc congue nisi vitae suscipit tellus mauris a diam. Purus
-              gravida quis blandit turpis cursus in hac. Morbi tempus iaculis
-              urna id volutpat. Lectus nulla at volutpat diam ut venenatis.
-              Donec ac odio tempor orci dapibus ultrices in iaculis. Dui vivamus
-              arcu felis bibendum ut tristique. Cras semper auctor neque vitae
-              tempus quam pellentesque. Placerat orci nulla pellentesque
-              dignissim enim sit amet. Feugiat pretium nibh ipsum consequat.
-              Placerat orci nulla pellentesque dignissim. Suspendisse faucibus
-              interdum posuere lorem. Nullam non nisi est sit. Turpis egestas
-              integer eget aliquet nibh praesent. Tortor at risus 'viverra
-              adipiscing at. Eu augue ut lectus arcu bibendum at varius vel'
-              pharetra.
-            </p>
-          </>
-        ),
-        closeButtonLabel: "Close Button",
-        headingText: "Modal Heading Text",
-      },
-    }}
-  >
-    {(args) => <ModalTrigger {...args} />}
+  <Story name="Content Window Scrolling">
+    <ModalTrigger
+      buttonText="Button Text"
+      id="modal-scrolling"
+      modalProps={scrollModalProps}
+    />
   </Story>
 </Canvas>

package/src/components/Pagination/Pagination.stories.mdx

@@ -170,7 +170,7 @@ export function CurrentPagePaginationExample() {
         currentPage={page}
         onPageChange={(selectedPage) => handleSelection(selectedPage)}
       />
-      <Button type="button" onClick={handleClick}>
+      <Button id="go-to-btn" type="button" onClick={handleClick}>
         Go to Page 1
       </Button>
     </VStack>

package/src/components/Radio/Radio.stories.mdx

@@ -53,7 +53,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.22.0`   |
-| Latest            | `0.28.0`   |
+| Latest            | `1.0.2`    |
 
 ## Table of Contents