@uktrade/react-component-library 0.15.0 → 0.17.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/Inputs/CheckBoxesInput/CheckBoxGroupInput.d.ts

@@ -6,6 +6,7 @@ interface CheckboxOption {
     value: string;
     label: ReactNode;
     checked?: boolean;
+    hint?: string;
 }
 interface CheckboxGroupProps {
     legend: ReactNode;

package/dist/components/Inputs/CheckBoxesInput/CheckBoxGroupInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBoxGroupInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/CheckBoxesInput/CheckBoxGroupInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1C,KAAK,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAEzC,UAAU,cAAc;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,kBAAkB;IACxB,MAAM,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,aAAa,GAAI,uFAU3B,kBAAkB,4CAwEpB,CAAC"}
+{"version":3,"file":"CheckBoxGroupInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/CheckBoxesInput/CheckBoxGroupInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1C,KAAK,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAEzC,UAAU,cAAc;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,kBAAkB;IACxB,MAAM,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,aAAa,GAAI,uFAU3B,kBAAkB,4CA6EpB,CAAC"}

package/dist/components/Inputs/CheckBoxesInput/CheckBoxGroupInput.js

@@ -19,5 +19,5 @@ export const CheckboxGroup = ({ legend, hint, error, options, name, legendAs = "
                         [`govuk-fieldset__legend--${legendSize}`]: legendSize !== "m",
                     }), children: legendHeading }), hint && _jsx("div", { className: "govuk-hint", children: hint }), hasError && (_jsxs("p", { id: errorId, className: "govuk-error-message", children: [_jsx("span", { className: "govuk-visually-hidden", children: "Error:" }), " ", error] })), _jsx("div", { className: clsx("govuk-checkboxes", {
                         "govuk-checkboxes--small": checkboxSize === "small",
-                    }), "data-module": "govuk-checkboxes", children: options.map((opt) => (_jsxs("div", { className: "govuk-checkboxes__item", children: [_jsx("input", { className: "govuk-checkboxes__input", id: opt.id, name: name, type: "checkbox", value: opt.value, defaultChecked: opt.checked, onChange: handleChange }), _jsx("label", { className: "govuk-label govuk-checkboxes__label", htmlFor: opt.id, children: opt.label })] }, opt.id))) })] }) }));
+                    }), "data-module": "govuk-checkboxes", children: options.map((opt) => (_jsxs("div", { className: "govuk-checkboxes__item", children: [_jsx("input", { className: "govuk-checkboxes__input", id: opt.id, name: name, type: "checkbox", value: opt.value, defaultChecked: opt.checked, onChange: handleChange }), _jsx("label", { className: "govuk-label govuk-checkboxes__label", htmlFor: opt.id, children: opt.label }), opt.hint && (_jsx("div", { className: "govuk-hint govuk-checkboxes__hint", children: opt.hint }))] }, opt.id))) })] }) }));
 };

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/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.15.0",
+  "version": "0.17.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/Inputs/CheckBoxesInput/CheckBoxGroupInput.tsx

@@ -12,6 +12,7 @@ interface CheckboxOption {
     value: string;
     label: ReactNode;
     checked?: boolean;
+    hint?: string;
 }
 
 interface CheckboxGroupProps {
@@ -102,6 +103,11 @@ export const CheckboxGroup = ({
                             >
                                 {opt.label}
                             </label>
+                            {opt.hint && (
+                                <div className="govuk-hint govuk-checkboxes__hint">
+                                    {opt.hint}
+                                </div>
+                            )}
                         </div>
                     ))}
                 </div>

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/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";