@uktrade/react-component-library 0.21.1 → 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/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.1",
+  "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",

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