@uktrade/react-component-library 0.21.0 → 0.21.2

package/dist/components/Details/Details.d.ts

@@ -0,0 +1,13 @@
+import type React from "react";
+export interface DetailsProps {
+    summary: string;
+    children: React.ReactNode;
+    open?: boolean;
+    className?: string;
+}
+/**
+ * GOV.UK Details component wrapper
+ * https://design-system.service.gov.uk/components/details/
+ */
+export declare const Details: ({ summary, children, open, className, }: DetailsProps) => React.JSX.Element;
+//# sourceMappingURL=Details.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO,GAAI,yCAKrB,YAAY,KAAG,KAAK,CAAC,GAAG,CAAC,OAc3B,CAAC"}

package/dist/components/Details/Details.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+/**
+ * GOV.UK Details component wrapper
+ * https://design-system.service.gov.uk/components/details/
+ */
+export const Details = ({ summary, children, open, className, }) => {
+    return (_jsxs("details", { className: clsx("govuk-details", className), "data-module": "govuk-details", ...(open ? { open: true } : {}), children: [_jsx("summary", { className: "govuk-details__summary", children: _jsx("span", { className: "govuk-details__summary-text", children: summary }) }), _jsx("div", { className: "govuk-details__text", children: children })] }));
+};

package/dist/components/SummaryItem/SummaryItem.d.ts

@@ -3,6 +3,7 @@ export interface SummaryItemConfig {
     name: string;
     value: React.ReactNode;
     actions?: SummaryListAction[];
+    wordWrap?: boolean;
 }
 export type SummaryListAction = {
     text: string;
@@ -19,6 +20,7 @@ interface SummaryItemProps {
     name: string;
     children: React.ReactNode;
     actions?: SummaryListAction[];
+    wordWrap?: boolean;
 }
 /**
  * Single action link
@@ -34,6 +36,6 @@ export declare const SummaryListActionsList: ({ actions, }: SummaryListActionsLi
 /**
  * Standard GOV.UK Summary List row
  */
-export declare const SummaryItem: ({ name, children, actions, }: SummaryItemProps) => React.JSX.Element;
+export declare const SummaryItem: ({ name, children, actions, wordWrap, }: SummaryItemProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=SummaryItem.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SummaryItem.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC/B;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,iBAAiB,CAAC;CAC3B;AAED,MAAM,WAAW,2BAA2B;IAC1C,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC/B;AAED,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC/B;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,aAE/B,sBAAsB,KAAG,KAAK,CAAC,GAAG,CAAC,OAYrC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,GAAI,cAEpC,2BAA2B,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAqBpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,8BAIzB,gBAAgB,KAAG,KAAK,CAAC,GAAG,CAAC,OAQ/B,CAAC"}
+{"version":3,"file":"SummaryItem.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,iBAAiB,CAAC;CAC3B;AAED,MAAM,WAAW,2BAA2B;IAC1C,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC/B;AAED,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,aAE/B,sBAAsB,KAAG,KAAK,CAAC,GAAG,CAAC,OAYrC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,GAAI,cAEpC,2BAA2B,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAqBpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,wCAKzB,gBAAgB,KAAG,KAAK,CAAC,GAAG,CAAC,OAU/B,CAAC"}

package/dist/components/SummaryItem/SummaryItem.js

@@ -1,5 +1,7 @@
 "use client";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import styles from "./SummaryItem.module.css";
 /**
  * Single action link
  */
@@ -20,6 +22,6 @@ export const SummaryListActionsList = ({ actions, }) => {
 /**
  * Standard GOV.UK Summary List row
  */
-export const SummaryItem = ({ name, children, actions, }) => {
-    return (_jsxs("div", { className: "govuk-summary-list__row", children: [_jsx("dt", { className: "govuk-summary-list__key", children: name }), _jsx("dd", { className: "govuk-summary-list__value", children: children }), _jsx(SummaryListActionsList, { actions: actions })] }));
+export const SummaryItem = ({ name, children, actions, wordWrap, }) => {
+    return (_jsxs("div", { className: "govuk-summary-list__row", children: [_jsx("dt", { className: "govuk-summary-list__key", children: name }), _jsx("dd", { className: clsx("govuk-summary-list__value", wordWrap && styles.wordWrap), children: children }), _jsx(SummaryListActionsList, { actions: actions })] }));
 };

package/dist/components/SummaryItem/SummaryItem.module.css

@@ -0,0 +1,3 @@
+.wordWrap {
+    word-wrap: break-word;
+}

package/dist/index.d.ts

@@ -13,4 +13,5 @@ export * from "./components/ApiBoundary/ApiBoundary";
 export * from "./components/ApiQuery";
 export * from "./components/Inputs";
 export * from "./components/NotificationBanner/NotificationBanner";
+export * from "./components/Details/Details";
 //# 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"}
+{"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"}

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uktrade/react-component-library",
-  "version": "0.21.0",
+  "version": "0.21.2",
   "description": "A collection of reusable React components following GOV.UK design patterns.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -76,4 +76,4 @@
     "clsx": "^2.1.0",
     "openapi-fetch": "^0.15.0"
   }
-}
+}

package/src/components/Details/Details.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import type React from "react";
+import clsx from "clsx";
+
+export interface DetailsProps {
+  summary: string;
+  children: React.ReactNode;
+  open?: boolean;
+  className?: string;
+}
+
+/**
+ * GOV.UK Details component wrapper
+ * https://design-system.service.gov.uk/components/details/
+ */
+export const Details = ({
+  summary,
+  children,
+  open,
+  className,
+}: DetailsProps): React.JSX.Element => {
+  return (
+    <details
+      className={clsx("govuk-details", className)}
+      data-module="govuk-details"
+      {...(open ? { open: true } : {})}
+    >
+      <summary className="govuk-details__summary">
+        <span className="govuk-details__summary-text">{summary}</span>
+      </summary>
+
+      <div className="govuk-details__text">{children}</div>
+    </details>
+  );
+};

package/src/components/SummaryItem/SummaryItem.module.css

@@ -0,0 +1,3 @@
+.wordWrap {
+    word-wrap: break-word;
+}

package/src/components/SummaryItem/SummaryItem.tsx

@@ -1,11 +1,15 @@
 "use client"
 
+import clsx from "clsx";
 import type React from "react";
+import styles from "./SummaryItem.module.css"
+
 
 export interface SummaryItemConfig {
   name: string;
   value: React.ReactNode;
   actions?: SummaryListAction[];
+  wordWrap?: boolean;
 }
 
 export type SummaryListAction = {
@@ -26,6 +30,7 @@ interface SummaryItemProps {
   name: string;
   children: React.ReactNode;
   actions?: SummaryListAction[];
+  wordWrap?: boolean;
 }
 
 /**
@@ -85,11 +90,14 @@ export const SummaryItem = ({
   name,
   children,
   actions,
+  wordWrap,
 }: SummaryItemProps): React.JSX.Element => {
   return (
     <div className="govuk-summary-list__row">
       <dt className="govuk-summary-list__key">{name}</dt>
-      <dd className="govuk-summary-list__value">{children}</dd>
+      <dd className={clsx("govuk-summary-list__value", wordWrap && styles.wordWrap)}>
+        {children}
+      </dd>
       <SummaryListActionsList actions={actions} />
     </div>
   );

package/src/index.ts

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