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

package/src/components/Fieldset/Fieldset.stories.mdx

@@ -0,0 +1,55 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  ArgsTable,
+  Description,
+} from "@storybook/addon-docs/blocks";
+import { withDesign } from "storybook-addon-designs";
+
+import Fieldset from "./Fieldset";
+import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
+
+<Meta
+  title={getCategory("Fieldset")}
+  component={Fieldset}
+  decorators={[withDesign]}
+  parameters={{
+    jest: ["Fieldset.test.tsx"],
+  }}
+  argTypes={{
+    children: { table: { disable: true } },
+    className: { table: { disable: true } },
+    id: { table: { disable: true } },
+  }}
+/>
+
+# Fieldset
+
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.25.3`   |
+| Latest            | `0.25.3`   |
+
+<Description of={Fieldset} />
+
+<Canvas withToolbar>
+  <Story
+    name="Basic"
+    args={{
+      isLegendHidden: false,
+      isRequired: false,
+      legendText: "This is the legend text",
+      optReqFlag: true,
+    }}
+  >
+    {(args) => (
+      <Fieldset {...args}>
+        <p>Text children in the Fieldset component.</p>
+      </Fieldset>
+    )}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Basic" />

package/src/components/Fieldset/Fieldset.test.tsx

@@ -0,0 +1,125 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
+
+import Fieldset from "./Fieldset";
+
+describe("Fieldset Accessibility", () => {
+  it("passes axe accessibility", async () => {
+    const { container } = render(
+      <Fieldset legendText="Legend Text">
+        <p>Some other fields</p>
+      </Fieldset>
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it("passes axe accessibility with the legend hidden", async () => {
+    const { container } = render(
+      <Fieldset legendText="Legend Text" isLegendHidden>
+        <p>Some other fields</p>
+      </Fieldset>
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("Fieldset", () => {
+  it("renders text in a legend and fieldset along with its children", () => {
+    render(
+      <Fieldset legendText="Legend Text">
+        <p>Some other fields</p>
+      </Fieldset>
+    );
+
+    expect(screen.getByRole("group")).toBeInTheDocument();
+    // `legend` has no HTML role
+    expect(screen.getByText(/Legend Text/i)).toBeInTheDocument();
+    expect(screen.getByText("Some other fields")).toBeInTheDocument();
+  });
+
+  it("renders 'Optional' text by default in the legend", () => {
+    render(
+      <Fieldset legendText="Legend Text">
+        <p>Some other fields</p>
+      </Fieldset>
+    );
+
+    expect(screen.getByText(/Optional/i)).toBeInTheDocument();
+  });
+
+  it("renders 'Required' text in the legend", () => {
+    render(
+      <Fieldset legendText="Legend Text" isRequired>
+        <p>Some other fields</p>
+      </Fieldset>
+    );
+
+    expect(screen.getByText(/Required/i)).toBeInTheDocument();
+  });
+
+  it("can hide the 'Required'/'Optional' text in the legend but still show the main text", () => {
+    const { rerender } = render(
+      <Fieldset legendText="Legend Text" isRequired>
+        <p>Some other fields</p>
+      </Fieldset>
+    );
+
+    expect(screen.getByText(/Required/i)).toBeInTheDocument();
+
+    rerender(
+      <Fieldset legendText="Legend Text" optReqFlag={false}>
+        <p>Some other fields</p>
+      </Fieldset>
+    );
+
+    expect(screen.getByText(/Legend Text/i)).toBeInTheDocument();
+    expect(screen.queryByText(/Optional/i)).not.toBeInTheDocument();
+
+    rerender(
+      <Fieldset legendText="Legend Text" isRequired optReqFlag={false}>
+        <p>Some other fields</p>
+      </Fieldset>
+    );
+
+    expect(screen.getByText(/Legend Text/i)).toBeInTheDocument();
+    expect(screen.queryByText(/Required/i)).not.toBeInTheDocument();
+  });
+
+  it("renders the UI snapshot correctly", () => {
+    const basic = renderer
+      .create(
+        <Fieldset legendText="Legend Text">
+          <p>Some other fields</p>
+        </Fieldset>
+      )
+      .toJSON();
+    const required = renderer
+      .create(
+        <Fieldset legendText="Legend Text" isRequired>
+          <p>Some other fields</p>
+        </Fieldset>
+      )
+      .toJSON();
+    const hiddenHelperText = renderer
+      .create(
+        <Fieldset legendText="Legend Text" isRequired optReqFlag={false}>
+          <p>Some other fields</p>
+        </Fieldset>
+      )
+      .toJSON();
+    const hiddenLegend = renderer
+      .create(
+        <Fieldset legendText="Legend Text" isLegendHidden>
+          <p>Some other fields</p>
+        </Fieldset>
+      )
+      .toJSON();
+
+    expect(basic).toMatchSnapshot();
+    expect(required).toMatchSnapshot();
+    expect(hiddenHelperText).toMatchSnapshot();
+    expect(hiddenLegend).toMatchSnapshot();
+  });
+});

package/src/components/Fieldset/Fieldset.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Box, useMultiStyleConfig } from "@chakra-ui/react";
+
+interface FieldsetProps {
+  /** Children to render. Typically form-related components are used. */
+  children: React.ReactNode;
+  /** Additional class name to add. */
+  className?: string;
+  /** ID that other components can cross reference for accessibility purposes */
+  id?: string;
+  /** Flag to show or hide the text in the `legend` element. False by default. */
+  isLegendHidden?: boolean;
+  /** Flag to render "Required" or "Optional" in the `legend`.
+   * False/"Optional" by default. */
+  isRequired?: boolean;
+  /** Text to display in the `legend` element. */
+  legendText?: string;
+  /** Flag to show or hide the "Required"/"Optional" text in the `legend`.
+   * True by default. */
+  optReqFlag?: boolean;
+}
+
+/**
+ * A wrapper component that renders a `fieldset` element along with a `legend`
+ * element as its first child. Commonly used to wrap form components.
+ */
+const Fieldset: React.FC<FieldsetProps> = ({
+  children,
+  className,
+  id,
+  isLegendHidden = false,
+  isRequired = false,
+  legendText,
+  optReqFlag = true,
+}) => {
+  const styles = useMultiStyleConfig("Fieldset", { isLegendHidden });
+  return (
+    <Box as="fieldset" id={id} __css={styles} className={className}>
+      <legend>
+        {legendText}
+        {optReqFlag && (
+          <Box __css={styles.helper}>
+            {isRequired ? "Required" : "Optional"}
+          </Box>
+        )}
+      </legend>
+      {children}
+    </Box>
+  );
+};
+
+export default Fieldset;

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

@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Fieldset renders the UI snapshot correctly 1`] = `
+<fieldset
+  className="css-0"
+>
+  <legend>
+    Legend Text
+    <div
+      className="css-0"
+    >
+      Optional
+    </div>
+  </legend>
+  <p>
+    Some other fields
+  </p>
+</fieldset>
+`;
+
+exports[`Fieldset renders the UI snapshot correctly 2`] = `
+<fieldset
+  className="css-0"
+>
+  <legend>
+    Legend Text
+    <div
+      className="css-0"
+    >
+      Required
+    </div>
+  </legend>
+  <p>
+    Some other fields
+  </p>
+</fieldset>
+`;
+
+exports[`Fieldset renders the UI snapshot correctly 3`] = `
+<fieldset
+  className="css-0"
+>
+  <legend>
+    Legend Text
+  </legend>
+  <p>
+    Some other fields
+  </p>
+</fieldset>
+`;
+
+exports[`Fieldset renders the UI snapshot correctly 4`] = `
+<fieldset
+  className="css-0"
+>
+  <legend>
+    Legend Text
+    <div
+      className="css-0"
+    >
+      Optional
+    </div>
+  </legend>
+  <p>
+    Some other fields
+  </p>
+</fieldset>
+`;

package/src/components/Form/Form.stories.mdx

@@ -3,7 +3,6 @@ import {
   Story,
   Canvas,
   ArgsTable,
-  Preview,
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
@@ -22,6 +21,8 @@ import Select from "../Select/Select";
 import Heading from "../Heading/Heading";
 import { HeadingLevels } from "../Heading/HeadingTypes";
 import HorizontalRule from "../HorizontalRule/HorizontalRule";
+import DatePicker from "../DatePicker/DatePicker";
+import { DatePickerTypes } from "../DatePicker/DatePickerTypes";
 import { action } from "@storybook/addon-actions";
 
 import SimpleGrid from "../Grid/SimpleGrid";
@@ -55,7 +56,7 @@ The `Form` component renders a standard `<form>` element and should be used to h
 
 `FormRow` should be used as a parent of multiple `FormField` components when you need to render multiple input components in a horizontal row.
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story
     name="Form"
     args={{
@@ -89,6 +90,23 @@ The `Form` component renders a standard `<form>` element and should be used to h
               isRequired
             />
           </FormField>
+          <FormField>
+            <DatePicker
+              id="date-range"
+              dateType={DatePickerTypes.Full}
+              dateFormat="yyyy-MM-dd"
+              dateRange={true}
+              minDate="1/1/2021"
+              maxDate="1/1/2022"
+              labelText="Select the date range you want to visit NYPL"
+              nameFrom="visit-dates"
+              helperTextFrom="From this date."
+              helperTextTo="To this date."
+              helperText="Select a valid date range."
+              invalidText="Please select a valid date range."
+              showLabel={false}
+            />
+          </FormField>
         </FormRow>
         <FormField>
           <TextInput
@@ -168,7 +186,7 @@ The `Form` component renders a standard `<form>` element and should be used to h
       </Form>
     )}
   </Story>
-</Preview>
+</Canvas>
 
 <ArgsTable story="Form" />
 
@@ -229,13 +247,13 @@ for (const formSpacing in FormSpacing) {
 }
 export const getForms = (list) => <ul style={{ listStyle: "none" }}>{list}</ul>;
 
-By default, the `Form` component will handle the NYPL spacing around form input elements. The default spacing value is `large`, which corresponds to the CSS variable `--space-l` (2rem / 32px).
+By default, the `Form` component will handle the NYPL spacing around form input elements. The default spacing value is `large`, which corresponds to the CSS variable `--nypl-space-l` (2rem / 32px).
 
 **IMPORTANT:** The default spacing should not be overwritten without a very good reason.
 
 Below are the spacing variants available with the `FormSpacing` enum.
 
-<Preview>
+<Canvas>
   <Story
     name="Spacing Variants"
     args={{
@@ -244,7 +262,7 @@ Below are the spacing variants available with the `FormSpacing` enum.
   >
     {getForms(sizes)}
   </Story>
-</Preview>
+</Canvas>
 
 ## Example Code
 

package/src/components/Form/Form.test.tsx

@@ -113,7 +113,7 @@ describe("Form", () => {
   //   const formRow = form.firstChild;
   //   expect(form).toBeInTheDocument();
   //   expect(formRow).toHaveStyle({
-  //     "grid-gap": "var(--chakra-space-xs)",
+  //     "grid-gap": "var(--nypl-space-xs)",
   //   });
   // });
 });

package/src/components/Form/Form.tsx

@@ -33,6 +33,7 @@ export function FormRow(props: React.PropsWithChildren<FormChildProps>) {
   const alteredChildren = React.Children.map(
     children,
     (child: React.ReactElement, i) => {
+      if (!child) return null;
       return React.cloneElement(child, { id: `${id}-grandchild${i}` });
     }
   );

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

@@ -8,17 +8,8 @@ import {
 import { withDesign } from "storybook-addon-designs";
 
 import SimpleGrid from "./SimpleGrid";
-import Card, {
-  CardImage,
-  CardHeading,
-  CardContent,
-  CardActions,
-} from "../Card/Card";
-import {
-  CardImageRatios,
-  CardImageSizes,
-  CardLayouts,
-} from "../Card/CardTypes";
+import Card, { CardHeading, CardContent, CardActions } from "../Card/Card";
+import { CardLayouts } from "../Card/CardTypes";
 import { HeadingDisplaySizes, HeadingLevels } from "../Heading/HeadingTypes";
 import Icon from "../Icons/Icon";
 import {
@@ -28,6 +19,7 @@ import {
   IconRotationTypes,
 } from "../Icons/IconTypes";
 import Image from "../Image/Image";
+import { ImageRatios } from "../Image/ImageTypes";
 
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
@@ -86,9 +78,9 @@ The NYPL standards for the items per row in a grid is `3` for desktop, `2` for t
     {(args) => (
       <SimpleGrid {...args}>
         <Card
-          imageSrc="https://placeimg.com/500/200/animals"
+          imageSrc="https://placeimg.com/400/220/animals"
           imageAlt="Alt text"
-          imageAspectRatio={CardImageRatios.TwoByOne}
+          imageAspectRatio={ImageRatios.TwoByOne}
         >
           <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
           <CardContent>
@@ -99,7 +91,7 @@ The NYPL standards for the items per row in a grid is `3` for desktop, `2` for t
         <Card
           imageSrc="https://placeimg.com/400/220/animals"
           imageAlt="Alt text"
-          imageAspectRatio={CardImageRatios.TwoByOne}
+          imageAspectRatio={ImageRatios.TwoByOne}
         >
           <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
           <CardContent>
@@ -110,7 +102,7 @@ The NYPL standards for the items per row in a grid is `3` for desktop, `2` for t
         <Card
           imageSrc="https://placeimg.com/400/240/animals"
           imageAlt="Alt text"
-          imageAspectRatio={CardImageRatios.TwoByOne}
+          imageAspectRatio={ImageRatios.TwoByOne}
         >
           <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
           <CardContent>
@@ -121,7 +113,7 @@ The NYPL standards for the items per row in a grid is `3` for desktop, `2` for t
         <Card
           imageSrc="https://placeimg.com/400/260/animals"
           imageAlt="Alt text"
-          imageAspectRatio={CardImageRatios.TwoByOne}
+          imageAspectRatio={ImageRatios.TwoByOne}
         >
           <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
           <CardContent>
@@ -132,7 +124,7 @@ The NYPL standards for the items per row in a grid is `3` for desktop, `2` for t
         <Card
           imageSrc="https://placeimg.com/400/320/animals"
           imageAlt="Alt text"
-          imageAspectRatio={CardImageRatios.TwoByOne}
+          imageAspectRatio={ImageRatios.TwoByOne}
         >
           <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
           <CardContent>
@@ -143,7 +135,7 @@ The NYPL standards for the items per row in a grid is `3` for desktop, `2` for t
         <Card
           imageSrc="https://placeimg.com/400/300/animals"
           imageAlt="Alt text"
-          imageAspectRatio={CardImageRatios.TwoByOne}
+          imageAspectRatio={ImageRatios.TwoByOne}
         >
           <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
           <CardContent>
@@ -169,6 +161,7 @@ for (const icon in IconNames) {
   const iname = `Example icon: ${IconNames[icon]}`;
   const iconRender = (
     <Icon
+      key={icon}
       name={IconNames[icon]}
       size={IconSizes.ExtraExtraExtraLarge}
       titleText={iname}
@@ -190,24 +183,24 @@ This example is rendering square `Image` components with the `columns` prop set
 <Canvas>
   <DSProvider>
     <SimpleGrid columns={6}>
-      <Image src="https://placeimg.com/300/300/animals?x=1" />
-      <Image src="https://placeimg.com/300/300/animals?x=2" />
-      <Image src="https://placeimg.com/300/300/animals?x=3" />
-      <Image src="https://placeimg.com/300/300/animals?x=4" />
-      <Image src="https://placeimg.com/300/300/animals?x=5" />
-      <Image src="https://placeimg.com/300/300/animals?x=6" />
-      <Image src="https://placeimg.com/300/300/animals?x=7" />
-      <Image src="https://placeimg.com/300/300/animals?x=8" />
-      <Image src="https://placeimg.com/300/300/animals?x=9" />
-      <Image src="https://placeimg.com/300/300/animals?x=10" />
-      <Image src="https://placeimg.com/300/300/animals?x=11" />
-      <Image src="https://placeimg.com/300/300/animals?x=12" />
-      <Image src="https://placeimg.com/300/300/animals?x=13" />
-      <Image src="https://placeimg.com/300/300/animals?x=14" />
-      <Image src="https://placeimg.com/300/300/animals?x=15" />
-      <Image src="https://placeimg.com/300/300/animals?x=16" />
-      <Image src="https://placeimg.com/300/300/animals?x=17" />
-      <Image src="https://placeimg.com/300/300/animals?x=18" />
+      <Image src="https://placeimg.com/300/300/animals?x=1" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=2" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=3" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=4" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=5" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=6" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=7" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=8" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=9" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=10" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=11" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=12" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=13" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=14" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=15" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=16" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=17" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=18" alt="" />
     </SimpleGrid>
   </DSProvider>
 </Canvas>
@@ -225,7 +218,7 @@ This example is rendering horizontal `Card` components with the `columns` prop s
         center
         imageSrc="https://placeimg.com/400/200/animals"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.FourByThree}
+        imageAspectRatio={ImageRatios.FourByThree}
       >
         <CardHeading level={HeadingLevels.Four} id="heading1">
           Card Heading
@@ -242,7 +235,7 @@ This example is rendering horizontal `Card` components with the `columns` prop s
         center
         imageSrc="https://placeimg.com/410/210/animals"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.FourByThree}
+        imageAspectRatio={ImageRatios.FourByThree}
       >
         <CardHeading level={HeadingLevels.Four} id="heading2">
           Card Heading
@@ -259,7 +252,7 @@ This example is rendering horizontal `Card` components with the `columns` prop s
         center
         imageSrc="https://placeimg.com/320/320/animals"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.FourByThree}
+        imageAspectRatio={ImageRatios.FourByThree}
       >
         <CardHeading level={HeadingLevels.Four} id="heading3">
           Card Heading

package/src/components/Grid/SimpleGrid.test.tsx

@@ -5,7 +5,7 @@ import renderer from "react-test-renderer";
 
 import SimpleGrid from "./SimpleGrid";
 import Card, { CardHeading, CardContent } from "../Card/Card";
-import { CardImageRatios } from "../Card/CardTypes";
+import { ImageRatios } from "../Image/ImageTypes";
 import { HeadingLevels } from "../Heading/HeadingTypes";
 
 describe("Grid Accessibility", () => {
@@ -15,7 +15,7 @@ describe("Grid Accessibility", () => {
         <Card
           imageSrc="https://placeimg.com/500/200/animals"
           imageAlt="Alt text"
-          imageAspectRatio={CardImageRatios.TwoByOne}
+          imageAspectRatio={ImageRatios.TwoByOne}
         >
           <CardHeading level={HeadingLevels.Two}>Card Heading</CardHeading>
           <CardContent>
@@ -26,7 +26,7 @@ describe("Grid Accessibility", () => {
         <Card
           imageSrc="https://placeimg.com/400/220/animals"
           imageAlt="Alt text"
-          imageAspectRatio={CardImageRatios.TwoByOne}
+          imageAspectRatio={ImageRatios.TwoByOne}
         >
           <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
           <CardContent>
@@ -37,7 +37,7 @@ describe("Grid Accessibility", () => {
         <Card
           imageSrc="https://placeimg.com/400/240/animals"
           imageAlt="Alt text"
-          imageAspectRatio={CardImageRatios.TwoByOne}
+          imageAspectRatio={ImageRatios.TwoByOne}
         >
           <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
           <CardContent>

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

@@ -25,10 +25,9 @@ import { getCategory } from "../../utils/componentCategories";
     jest: ["Heading.test.tsx"],
   }}
   argTypes={{
-    blockName: { table: { disable: true } },
+    additionalStyles: { table: { disable: true } },
     className: { table: { disable: true } },
-    modifiers: { table: { disable: true } },
-    sx: { table: { disable: true } },
+    id: { table: { disable: true } },
   }}
 />
 
@@ -37,7 +36,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.25.0`   |
+| Latest            | `0.25.2`   |
 
 <Description of={Heading} />
 

package/src/components/Heading/Heading.tsx

@@ -10,6 +10,8 @@ import {
 import { HeadingDisplaySizes, HeadingLevels } from "./HeadingTypes";
 
 export interface HeadingProps {
+  /** Optionally pass in additional Chakra-based styles. */
+  additionalStyles?: { [key: string]: any };
   /** Optional className that appears in addition to `heading` */
   className?: string;
   /** Optional size used to override the default styles of the semantic HTML `<h>` elements */
@@ -18,8 +20,6 @@ export interface HeadingProps {
   id?: string;
   /** Optional number 1-6 used to create the `<h*>` tag; if prop is not passed, `Heading` will default to `<h2>` */
   level?: HeadingLevels;
-  /** Optionally pass in additional Chakra-based styles. */
-  sx?: { [key: string]: any };
   /** Inner text of the `<h*>` element */
   text?: string;
   /** Optional URL that header points to; when `url` prop is passed to `Heading`, a child `<a>` element is created and the heading text becomes an active link */
@@ -43,11 +43,11 @@ const getVariant = (displaySize) => variantMap[displaySize] || null;
 
 function Heading(props: React.PropsWithChildren<HeadingProps>) {
   const {
+    additionalStyles = {},
     className,
     displaySize,
     id,
     level = HeadingLevels.Two,
-    sx = {},
     text,
     url,
     urlClass,
@@ -55,8 +55,8 @@ function Heading(props: React.PropsWithChildren<HeadingProps>) {
   const variant = displaySize ? getVariant(displaySize) : `h${level}`;
   const styles = useStyleConfig("Heading", { variant });
   // Combine native base styles with any additional styles.
-  // This is used only in the `Hero` component, for now.
-  const finalStyles = { ...styles, ...sx };
+  // This is used in the `Hero` and `Notification` components.
+  const finalStyles = { ...styles, ...additionalStyles };
   const asHeading: any = `h${level}`;
 
   if (level < 1 || level > 6) {