@uktrade/react-component-library 0.14.1 → 0.16.0

package/Readme.md

@@ -54,3 +54,13 @@ npm run docs:start
 ```
 
 This opens a Vite dev server with the playground for testing components.
+
+### Publishing a new version
+
+To publish a new version to NPM [@uktrade/react-component-library](https://www.npmjs.com/package/@uktrade/react-component-library):
+
+1. **Update the version** in `package.json` following semantic versioning (don’t forget to sync the lockfile as well).
+2. **Commit your changes** on a feature or working branch.
+3. **Open a pull request** and **merge it into `main`**.
+4. **Create a new GitHub Release** from the `main` branch and tag it with the same version (for example, `v0.10.1`).
+5. Once the release is published, the [GitHub Actions workflow](./.github/workflows/release.yml) will automatically build and publish the package to NPM.

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

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

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

@@ -0,0 +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"}

package/dist/components/NotificationBanner/NotificationBanner.js

@@ -0,0 +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, }) => {
+    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 })] })] }));
+};

package/dist/components/SummaryList/SummaryList.d.ts

@@ -12,6 +12,8 @@ export interface SummaryCardProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     actions?: SummaryListAction[];
     className?: string;
+    titleBackground?: string;
+    subSectionNode?: React.ReactNode;
 }
-export declare const SummaryCard: ({ title, children, actions, className, ...props }: SummaryCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SummaryCard: ({ title, children, actions, className, titleBackground, subSectionNode, ...props }: SummaryCardProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SummaryList.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SummaryList.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryList/SummaryList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAG/D,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC9E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,GAAI,0CAA0C,gBAAgB,4CAOrF,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,GAAI,mDAAmD,gBAAgB,4CAgC9F,CAAC"}
+{"version":3,"file":"SummaryList.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryList/SummaryList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAG/D,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC9E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,GAAI,0CAA0C,gBAAgB,4CAOrF,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,WAAW,GAAI,oFAQzB,gBAAgB,4CAyClB,CAAC"}

package/dist/components/SummaryList/SummaryList.js

@@ -4,4 +4,4 @@ import clsx from "clsx";
 import { SummaryListAction } from "../SummaryItem/SummaryItem";
 import styles from "./SummaryList.module.css";
 export const SummaryList = ({ title, children, className, ...props }) => (_jsxs(_Fragment, { children: [title && _jsx("h2", { className: "govuk-heading-l", children: title }), _jsx("dl", { className: clsx("govuk-summary-list", className), ...props, children: children })] }));
-export const SummaryCard = ({ title, children, actions, className, ...props }) => (_jsx("div", { className: clsx(styles.root, className), children: _jsxs("div", { className: "govuk-summary-card govuk-body", ...props, children: [_jsxs("div", { className: "govuk-summary-card__title-wrapper", children: [_jsx("h2", { className: "govuk-summary-card__title", children: title }), actions && (_jsx("ul", { className: clsx("govuk-summary-card__actions", styles.summaryCardTitleActions), children: actions.map((action) => (_jsx("li", { className: "govuk-summary-card__action", children: _jsx(SummaryListAction, { action: action }) }, action.text))) }))] }), _jsx("div", { className: clsx("govuk-summary-card__content", styles.govukSummaryCardContent), children: children })] }) }));
+export const SummaryCard = ({ title, children, actions, className, titleBackground, subSectionNode, ...props }) => (_jsx("div", { className: clsx(styles.root, className), children: _jsxs("div", { className: "govuk-summary-card govuk-body", ...props, children: [_jsxs("div", { className: "govuk-summary-card__title-wrapper", style: titleBackground ? { background: titleBackground } : undefined, children: [_jsx("h2", { className: "govuk-summary-card__title", children: title }), actions && (_jsx("ul", { className: clsx("govuk-summary-card__actions", styles.summaryCardTitleActions), children: actions.map((action) => (_jsx("li", { className: "govuk-summary-card__action", children: _jsx(SummaryListAction, { action: action }) }, action.text))) }))] }), subSectionNode && (_jsx("div", { children: subSectionNode })), _jsx("div", { className: clsx("govuk-summary-card__content", styles.govukSummaryCardContent), children: children })] }) }));

package/dist/components/SummaryList/SummaryList.module.css

@@ -11,4 +11,4 @@
   .summaryCardTitleActions {
     font-weight: 400;
   }
-}
+}

package/dist/index.d.ts

@@ -12,4 +12,5 @@ export * from "./components/LoadingSpinner/LoadingSpinner";
 export * from "./components/ApiBoundary/ApiBoundary";
 export * from "./components/ApiQuery";
 export * from "./components/Inputs";
+export * from "./components/NotificationBanner/NotificationBanner";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,wCAAwC,CAAC;AACvD,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4CAA4C,CAAC;AAC3D,cAAc,sCAAsC,CAAC;AACrD,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,wCAAwC,CAAC;AACvD,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4CAA4C,CAAC;AAC3D,cAAc,sCAAsC,CAAC;AACrD,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oDAAoD,CAAC"}

package/dist/index.js

@@ -12,3 +12,4 @@ export * from "./components/LoadingSpinner/LoadingSpinner";
 export * from "./components/ApiBoundary/ApiBoundary";
 export * from "./components/ApiQuery";
 export * from "./components/Inputs";
+export * from "./components/NotificationBanner/NotificationBanner";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uktrade/react-component-library",
-  "version": "0.14.1",
+  "version": "0.16.0",
   "description": "A collection of reusable React components following GOV.UK design patterns.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -12,7 +12,7 @@
     "build": "tsc -p tsconfig.build.json && npm run copy:css",
     "copy:css": "rsync -av --include='*/' --include='*.css' --exclude='*' src/ dist/",
     "docs:build": "tsc -p docs/playground/tsconfig.docs.json",
-    "docs:start": "npx vite@latest docs/playground open",
+    "docs:start": "npx vite@latest docs/playground --open",
     "docs:vulnerability": "npx vite@latest --version && npm audit --audit-level=high",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",

package/src/components/NotificationBanner/NotificationBanner.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import clsx from "clsx";
+import type { ReactNode } from "react";
+
+type Props = {
+  title: string;
+  heading?: string;
+  children: ReactNode;
+  variant?: "success"; // only supported variant
+  className?: string;
+};
+
+export const NotificationBanner = ({
+  title,
+  heading,
+  children,
+  variant,
+  className,
+}: Props) => {
+  const bannerClass = clsx(
+    "govuk-notification-banner",
+    variant === "success" && "govuk-notification-banner--success",
+    className
+  );
+
+  return (
+    <div
+      className={bannerClass}
+      role="alert"
+      aria-labelledby="govuk-notification-banner-title"
+      data-module="govuk-notification-banner"
+    >
+      <div className="govuk-notification-banner__header">
+        <h2
+          className="govuk-notification-banner__title"
+          id="govuk-notification-banner-title"
+        >
+          {title}
+        </h2>
+      </div>
+      <div className="govuk-notification-banner__content">
+        {heading && (
+          <h3 className="govuk-notification-banner__heading">
+            {heading}
+          </h3>
+        )}
+        <p className="govuk-body">{children}</p>
+      </div>
+    </div>
+  );
+};

package/src/components/SummaryList/SummaryList.module.css

@@ -11,4 +11,4 @@
   .summaryCardTitleActions {
     font-weight: 400;
   }
-}
+}

package/src/components/SummaryList/SummaryList.tsx

@@ -27,12 +27,25 @@ export interface SummaryCardProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
   actions?: SummaryListAction[];
   className?: string;
+  titleBackground?: string;
+  subSectionNode?: React.ReactNode;
 }
 
-export const SummaryCard = ({ title, children, actions, className, ...props }: SummaryCardProps) => (
+export const SummaryCard = ({
+  title,
+  children,
+  actions,
+  className,
+  titleBackground,
+  subSectionNode,
+  ...props
+}: SummaryCardProps) => (
   <div className={clsx(styles.root, className)}>
     <div className="govuk-summary-card govuk-body" {...props}>
-      <div className="govuk-summary-card__title-wrapper">
+      <div
+        className="govuk-summary-card__title-wrapper"
+        style={titleBackground ? { background: titleBackground } : undefined}
+      >
         <h2 className="govuk-summary-card__title">{title}</h2>
 
         {actions && (
@@ -51,6 +64,12 @@ export const SummaryCard = ({ title, children, actions, className, ...props }: S
         )}
       </div>
 
+      {subSectionNode && (
+        <div>
+          {subSectionNode}
+        </div>
+      )}
+
       <div
         className={clsx(
           "govuk-summary-card__content",

package/src/index.ts

@@ -12,3 +12,4 @@ export * from "./components/LoadingSpinner/LoadingSpinner";
 export * from "./components/ApiBoundary/ApiBoundary";
 export * from "./components/ApiQuery";
 export * from "./components/Inputs";
+export * from "./components/NotificationBanner/NotificationBanner";