fix: used passed className for page-notice (#243)

Author: oxala

.changeset/sad-hands-cover.md

@@ -0,0 +1,5 @@
+---
+"@ebay/ui-core-react": patch
+---
+
+fix(EbayPageNotice): fixed className passing to page-notice component

packages/ebayui-core-react/src/ebay-page-notice/__tests__/index.spec.tsx

@@ -91,4 +91,16 @@ describe("<EbayPageNotice>", () => {
             expect(dismissMock).toHaveBeenCalled();
         });
     });
+
+    it("should support passing custom classes", () => {
+        const { container } = render(
+            <EbayPageNotice status="confirmation" className="custom-class">
+                <EbayNoticeContent>
+                    <EbayPageNoticeTitle>Here is the title</EbayPageNoticeTitle>
+                    <p id="details">Here is some details</p>
+                </EbayNoticeContent>
+            </EbayPageNotice>,
+        );
+        expect(container.querySelector(".page-notice")).toHaveClass("custom-class");
+    });
 });

packages/ebayui-core-react/src/ebay-page-notice/page-notice.tsx

@@ -1,4 +1,5 @@
 import React, { ComponentProps, FC, KeyboardEventHandler, MouseEventHandler, useState } from "react";
+import classNames from "classnames";
 import NoticeContent from "../common/notice-utils/notice-content";
 import { EbayNoticeContent } from "../ebay-notice-base/components/ebay-notice-content";
 import { EbayIcon, Icon } from "../ebay-icon";
@@ -20,6 +21,7 @@ const EbayPageNotice: FC<Props> = ({
     a11yDismissText,
     "aria-label": ariaLabel,
     onDismiss = () => {},
+    className,
     ...rest
 }) => {
     const [dismissed, setDismissed] = useState(false);
@@ -38,7 +40,9 @@ const EbayPageNotice: FC<Props> = ({
         <section
             {...rest}
             aria-labelledby={id || `${status}-status`}
-            className={`page-notice ${status !== `general` ? `page-notice--${status}` : ``}`}
+            className={classNames("page-notice", className, {
+                [`page-notice--${status}`]: status !== "general",
+            })}
         >
             {status !== `general` ? (
                 <div className="page-notice__header" id={id || `${status}-status`}>