@uktrade/react-component-library 0.22.7 → 0.22.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/components/Table/Table.d.ts +21 -0
  2. package/dist/components/Table/Table.d.ts.map +1 -0
  3. package/dist/components/Table/Table.js +6 -0
  4. package/dist/index.d.ts +1 -0
  5. package/dist/index.d.ts.map +1 -1
  6. package/dist/index.js +1 -0
  7. package/package.json +1 -1
  8. package/src/components/Table/Table.tsx +78 -0
  9. package/src/index.ts +1 -0
package/dist/components/Table/Table.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ import type React from "react";
2
+ export type TableHeader = {
3
+ content: React.ReactNode;
4
+ className?: string;
5
+ };
6
+ export type TableCell = {
7
+ content: React.ReactNode;
8
+ className?: string;
9
+ isHeader?: boolean;
10
+ };
11
+ export type TableRow = {
12
+ cells: TableCell[];
13
+ };
14
+ export type TableProps = {
15
+ headers: TableHeader[];
16
+ rows: TableRow[];
17
+ caption?: string;
18
+ className?: string;
19
+ };
20
+ export declare const Table: ({ headers, rows, caption, className, }: TableProps) => React.JSX.Element;
21
+ //# sourceMappingURL=Table.d.ts.map
package/dist/components/Table/Table.d.ts.map ADDED
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1,6 @@
1
+ "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import clsx from "clsx";
4
+ export const Table = ({ headers, rows, caption, className, }) => {
5
+ 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))) })] }));
6
+ };
package/dist/index.d.ts CHANGED
@@ -16,4 +16,5 @@ export * from "./components/NotificationBanner/NotificationBanner";
16
16
  export * from "./components/Details/Details";
17
17
  export * from "./components/Tooltip/Tooltip";
18
18
  export * from "./components/Tabs/Tabs";
19
+ export * from "./components/Table/Table";
19
20
  //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map CHANGED
@@ -1 +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"}
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;AACvC,cAAc,0BAA0B,CAAC"}
package/dist/index.js CHANGED
@@ -16,3 +16,4 @@ export * from "./components/NotificationBanner/NotificationBanner";
16
16
  export * from "./components/Details/Details";
17
17
  export * from "./components/Tooltip/Tooltip";
18
18
  export * from "./components/Tabs/Tabs";
19
+ export * from "./components/Table/Table";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uktrade/react-component-library",
3
- "version": "0.22.7",
3
+ "version": "0.22.8",
4
4
  "description": "A collection of reusable React components following GOV.UK design patterns.",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
package/src/components/Table/Table.tsx ADDED
@@ -0,0 +1,78 @@
1
+ "use client";
2
+
3
+ import clsx from "clsx";
4
+ import type React from "react";
5
+
6
+ export type TableHeader = {
7
+ content: React.ReactNode;
8
+ className?: string;
9
+ };
10
+
11
+ export type TableCell = {
12
+ content: React.ReactNode;
13
+ className?: string;
14
+ isHeader?: boolean;
15
+ };
16
+
17
+ export type TableRow = {
18
+ cells: TableCell[];
19
+ };
20
+
21
+ export type TableProps = {
22
+ headers: TableHeader[];
23
+ rows: TableRow[];
24
+ caption?: string;
25
+ className?: string;
26
+ };
27
+
28
+ export const Table = ({
29
+ headers,
30
+ rows,
31
+ caption,
32
+ className,
33
+ }: TableProps): React.JSX.Element => {
34
+ return (
35
+ <table className={clsx("govuk-table", className)}>
36
+ {caption && <caption className="govuk-table__caption">{caption}</caption>}
37
+
38
+ <thead className="govuk-table__head">
39
+ <tr className="govuk-table__row">
40
+ {headers.map((header, index) => (
41
+ <th
42
+ key={index}
43
+ scope="col"
44
+ className={clsx("govuk-table__header", header.className)}
45
+ >
46
+ {header.content}
47
+ </th>
48
+ ))}
49
+ </tr>
50
+ </thead>
51
+
52
+ <tbody className="govuk-table__body">
53
+ {rows.map((row, rowIndex) => (
54
+ <tr key={rowIndex} className="govuk-table__row">
55
+ {row.cells.map((cell, cellIndex) =>
56
+ cell.isHeader ? (
57
+ <th
58
+ key={cellIndex}
59
+ scope="row"
60
+ className={clsx("govuk-table__header", cell.className)}
61
+ >
62
+ {cell.content}
63
+ </th>
64
+ ) : (
65
+ <td
66
+ key={cellIndex}
67
+ className={clsx("govuk-table__cell", cell.className)}
68
+ >
69
+ {cell.content}
70
+ </td>
71
+ ),
72
+ )}
73
+ </tr>
74
+ ))}
75
+ </tbody>
76
+ </table>
77
+ );
78
+ };
package/src/index.ts CHANGED
@@ -16,3 +16,4 @@ export * from "./components/NotificationBanner/NotificationBanner";
16
16
  export * from "./components/Details/Details";
17
17
  export * from "./components/Tooltip/Tooltip";
18
18
  export * from "./components/Tabs/Tabs";
19
+ export * from "./components/Table/Table";