@uktrade/react-component-library 0.18.0 → 0.18.1

package/dist/components/NotificationBanner/NotificationBanner.d.ts

@@ -5,7 +5,8 @@ type Props = {
     children: ReactNode;
     variant?: "success";
     className?: string;
+    onClose?: () => void;
 };
-export declare const NotificationBanner: ({ title, heading, children, variant, className, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const NotificationBanner: ({ title, heading, children, variant, className, onClose, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=NotificationBanner.d.ts.map

package/dist/components/NotificationBanner/NotificationBanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationBanner.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationBanner/NotificationBanner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,mDAMhC,KAAK,4CAgCP,CAAC"}
+{"version":3,"file":"NotificationBanner.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationBanner/NotificationBanner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,4DAOhC,KAAK,4CA0CP,CAAC"}

package/dist/components/NotificationBanner/NotificationBanner.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-export const NotificationBanner = ({ title, heading, children, variant, className, }) => {
+export const NotificationBanner = ({ title, heading, children, variant, className, onClose, }) => {
     const bannerClass = clsx("govuk-notification-banner", variant === "success" && "govuk-notification-banner--success", className);
-    return (_jsxs("div", { className: bannerClass, role: "alert", "aria-labelledby": "govuk-notification-banner-title", "data-module": "govuk-notification-banner", children: [_jsx("div", { className: "govuk-notification-banner__header", children: _jsx("h2", { className: "govuk-notification-banner__title", id: "govuk-notification-banner-title", children: title }) }), _jsxs("div", { className: "govuk-notification-banner__content", children: [heading && (_jsx("h3", { className: "govuk-notification-banner__heading", children: heading })), _jsx("p", { className: "govuk-body", children: children })] })] }));
+    return (_jsxs("div", { className: bannerClass, role: "alert", "aria-labelledby": "govuk-notification-banner-title", "data-module": "govuk-notification-banner", children: [_jsx("div", { className: "govuk-notification-banner__header", children: _jsx("h2", { className: "govuk-notification-banner__title", id: "govuk-notification-banner-title", children: title }) }), _jsxs("div", { className: "govuk-notification-banner__content", children: [heading && (_jsx("h3", { className: "govuk-notification-banner__heading", children: heading })), _jsx("p", { className: "govuk-body", children: children }), onClose && (_jsx("button", { className: "govuk-link govuk-body-s govuk-!-margin-0", style: { background: "none", border: "none", padding: 0, cursor: "pointer", color: "#1d70b8" }, onClick: onClose, "aria-label": "Close notification", children: "Close" }))] })] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uktrade/react-component-library",
-  "version": "0.18.0",
+  "version": "0.18.1",
   "description": "A collection of reusable React components following GOV.UK design patterns.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/components/NotificationBanner/NotificationBanner.tsx

@@ -9,6 +9,7 @@ type Props = {
   children: ReactNode;
   variant?: "success"; // only supported variant
   className?: string;
+  onClose?: () => void;
 };
 
 export const NotificationBanner = ({
@@ -17,6 +18,7 @@ export const NotificationBanner = ({
   children,
   variant,
   className,
+  onClose,
 }: Props) => {
   const bannerClass = clsx(
     "govuk-notification-banner",
@@ -46,6 +48,16 @@ export const NotificationBanner = ({
           </h3>
         )}
         <p className="govuk-body">{children}</p>
+        {onClose && (
+          <button
+            className="govuk-link govuk-body-s govuk-!-margin-0"
+            style={{ background: "none", border: "none", padding: 0, cursor: "pointer", color: "#1d70b8"  }}
+            onClick={onClose}
+            aria-label="Close notification"
+          >
+            Close
+          </button>
+        )}
       </div>
     </div>
   );