@uktrade/react-component-library 0.22.6 → 0.22.8

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

@@ -9,11 +9,12 @@ export interface SummaryListProps extends React.HTMLAttributes<HTMLDListElement>
 export declare const SummaryList: ({ title, children, className, ...props }: SummaryListProps) => import("react/jsx-runtime").JSX.Element;
 export interface SummaryCardProps extends React.HTMLAttributes<HTMLDivElement> {
     title: string;
+    titleTag?: React.ReactNode;
     children?: React.ReactNode;
     actions?: SummaryListAction[];
     className?: string;
     titleBackground?: string;
     subSectionNode?: React.ReactNode;
 }
-export declare const SummaryCard: ({ title, children, actions, className, titleBackground, subSectionNode, ...props }: SummaryCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SummaryCard: ({ title, titleTag, 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;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,WAAW,GAAI,oFAQzB,gBAAgB,4CA4ClB,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,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,8FASzB,gBAAgB,4CAkDlB,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, 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 govuk-!-font-size-16", children: title }), actions && (_jsx("ul", { className: clsx("govuk-summary-card__actions", "govuk-!-font-size-16", 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 })] }) }));
+export const SummaryCard = ({ title, titleTag, 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: [_jsxs("h2", { className: "govuk-summary-card__title govuk-!-font-size-16", children: [_jsx("span", { children: title }), titleTag && (_jsx("span", { className: styles.titleTag, children: titleTag }))] }), actions && (_jsx("ul", { className: clsx("govuk-summary-card__actions", "govuk-!-font-size-16", 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,12 @@
   .summaryCardTitleActions {
     font-weight: 400;
   }
-}
+}
+
+.titleTag {
+  margin-left: 1rem;
+
+  strong {
+    font-size: 16px;
+  }
+}

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,21 @@
+import type React from "react";
+export type TableHeader = {
+    content: React.ReactNode;
+    className?: string;
+};
+export type TableCell = {
+    content: React.ReactNode;
+    className?: string;
+    isHeader?: boolean;
+};
+export type TableRow = {
+    cells: TableCell[];
+};
+export type TableProps = {
+    headers: TableHeader[];
+    rows: TableRow[];
+    caption?: string;
+    className?: string;
+};
+export declare const Table: ({ headers, rows, caption, className, }: TableProps) => React.JSX.Element;
+//# sourceMappingURL=Table.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE,SAAS,EAAE,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,wCAKnB,UAAU,KAAG,KAAK,CAAC,GAAG,CAAC,OA6CzB,CAAC"}

package/dist/components/Table/Table.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+export const Table = ({ headers, rows, caption, className, }) => {
+    return (_jsxs("table", { className: clsx("govuk-table", className), children: [caption && _jsx("caption", { className: "govuk-table__caption", children: caption }), _jsx("thead", { className: "govuk-table__head", children: _jsx("tr", { className: "govuk-table__row", children: headers.map((header, index) => (_jsx("th", { scope: "col", className: clsx("govuk-table__header", header.className), children: header.content }, index))) }) }), _jsx("tbody", { className: "govuk-table__body", children: rows.map((row, rowIndex) => (_jsx("tr", { className: "govuk-table__row", children: row.cells.map((cell, cellIndex) => cell.isHeader ? (_jsx("th", { scope: "row", className: clsx("govuk-table__header", cell.className), children: cell.content }, cellIndex)) : (_jsx("td", { className: clsx("govuk-table__cell", cell.className), children: cell.content }, cellIndex))) }, rowIndex))) })] }));
+};

package/dist/index.d.ts

@@ -16,4 +16,5 @@ export * from "./components/NotificationBanner/NotificationBanner";
 export * from "./components/Details/Details";
 export * from "./components/Tooltip/Tooltip";
 export * from "./components/Tabs/Tabs";
+export * from "./components/Table/Table";
 //# 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;AACpC,cAAc,oDAAoD,CAAC;AACnE,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wBAAwB,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;AACnE,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC"}

package/dist/index.js

@@ -16,3 +16,4 @@ export * from "./components/NotificationBanner/NotificationBanner";
 export * from "./components/Details/Details";
 export * from "./components/Tooltip/Tooltip";
 export * from "./components/Tabs/Tabs";
+export * from "./components/Table/Table";

package/package.json

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

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

@@ -11,4 +11,12 @@
   .summaryCardTitleActions {
     font-weight: 400;
   }
-}
+}
+
+.titleTag {
+  margin-left: 1rem;
+
+  strong {
+    font-size: 16px;
+  }
+}

package/src/components/SummaryList/SummaryList.tsx

@@ -24,6 +24,7 @@ export const SummaryList = ({ title, children, className, ...props }: SummaryLis
 
 export interface SummaryCardProps extends React.HTMLAttributes<HTMLDivElement> {
   title: string;
+  titleTag?: React.ReactNode;
   children?: React.ReactNode;
   actions?: SummaryListAction[];
   className?: string;
@@ -33,6 +34,7 @@ export interface SummaryCardProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export const SummaryCard = ({
   title,
+  titleTag,
   children,
   actions,
   className,
@@ -46,9 +48,15 @@ export const SummaryCard = ({
         className="govuk-summary-card__title-wrapper"
         style={titleBackground ? { background: titleBackground } : undefined}
       >
-        <h2 className="govuk-summary-card__title govuk-!-font-size-16">
-          {title}
-        </h2>
+      <h2 className="govuk-summary-card__title govuk-!-font-size-16">
+        <span>{title}</span>
+
+        {titleTag && (
+          <span className={styles.titleTag}>
+            {titleTag}
+          </span>
+        )}
+      </h2>
 
         {actions && (
           <ul

package/src/components/Table/Table.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import clsx from "clsx";
+import type React from "react";
+
+export type TableHeader = {
+  content: React.ReactNode;
+  className?: string;
+};
+
+export type TableCell = {
+  content: React.ReactNode;
+  className?: string;
+  isHeader?: boolean;
+};
+
+export type TableRow = {
+  cells: TableCell[];
+};
+
+export type TableProps = {
+  headers: TableHeader[];
+  rows: TableRow[];
+  caption?: string;
+  className?: string;
+};
+
+export const Table = ({
+  headers,
+  rows,
+  caption,
+  className,
+}: TableProps): React.JSX.Element => {
+  return (
+    <table className={clsx("govuk-table", className)}>
+      {caption && <caption className="govuk-table__caption">{caption}</caption>}
+
+      <thead className="govuk-table__head">
+        <tr className="govuk-table__row">
+          {headers.map((header, index) => (
+            <th
+              key={index}
+              scope="col"
+              className={clsx("govuk-table__header", header.className)}
+            >
+              {header.content}
+            </th>
+          ))}
+        </tr>
+      </thead>
+
+      <tbody className="govuk-table__body">
+        {rows.map((row, rowIndex) => (
+          <tr key={rowIndex} className="govuk-table__row">
+            {row.cells.map((cell, cellIndex) =>
+              cell.isHeader ? (
+                <th
+                  key={cellIndex}
+                  scope="row"
+                  className={clsx("govuk-table__header", cell.className)}
+                >
+                  {cell.content}
+                </th>
+              ) : (
+                <td
+                  key={cellIndex}
+                  className={clsx("govuk-table__cell", cell.className)}
+                >
+                  {cell.content}
+                </td>
+              ),
+            )}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};

package/src/index.ts

@@ -16,3 +16,4 @@ export * from "./components/NotificationBanner/NotificationBanner";
 export * from "./components/Details/Details";
 export * from "./components/Tooltip/Tooltip";
 export * from "./components/Tabs/Tabs";
+export * from "./components/Table/Table";