@uktrade/react-component-library 0.21.5 → 0.22.0

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,13 @@
+import type React from "react";
+export type Tab = {
+    id: string;
+    label: string;
+    content: React.ReactNode;
+};
+export type TabsProps = {
+    tabs: Tab[];
+    title?: string;
+    onTabChange?: (tabId: string) => void;
+};
+export declare const Tabs: ({ tabs, title, onTabChange, }: TabsProps) => React.JSX.Element;
+//# sourceMappingURL=Tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,GAAG,GAAG;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,+BAIlB,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OA2CxB,CAAC"}

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,9 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+export const Tabs = ({ tabs, title = "Contents", onTabChange, }) => {
+    if (!tabs.length) {
+        return _jsx(_Fragment, {});
+    }
+    return (_jsxs("div", { className: "govuk-tabs", "data-module": "govuk-tabs", children: [_jsx("h2", { className: "govuk-tabs__title", children: title }), _jsx("ul", { className: "govuk-tabs__list", children: tabs.map((tab, index) => (_jsx("li", { className: clsx("govuk-tabs__list-item", index === 0 && "govuk-tabs__list-item--selected"), children: _jsx("a", { className: "govuk-tabs__tab", href: `#${tab.id}`, onClick: () => onTabChange?.(tab.id), children: tab.label }) }, tab.id))) }), tabs.map((tab, index) => (_jsx("div", { id: tab.id, className: clsx("govuk-tabs__panel", index > 0 && "govuk-tabs__panel--hidden"), children: tab.content }, tab.id)))] }));
+};

package/dist/index.d.ts

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

package/dist/index.js

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

package/package.json

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

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import clsx from "clsx";
+import type React from "react";
+
+export type Tab = {
+  id: string;
+  label: string;
+  content: React.ReactNode;
+};
+
+export type TabsProps = {
+  tabs: Tab[];
+  title?: string;
+  onTabChange?: (tabId: string) => void;
+};
+
+export const Tabs = ({
+  tabs,
+  title = "Contents",
+  onTabChange,
+}: TabsProps): React.JSX.Element => {
+  if (!tabs.length) {
+    return <></>;
+  }
+
+  return (
+    <div className="govuk-tabs" data-module="govuk-tabs">
+      <h2 className="govuk-tabs__title">{title}</h2>
+
+      <ul className="govuk-tabs__list">
+        {tabs.map((tab, index) => (
+          <li
+            key={tab.id}
+            className={clsx(
+              "govuk-tabs__list-item",
+              index === 0 && "govuk-tabs__list-item--selected",
+            )}
+          >
+            <a
+              className="govuk-tabs__tab"
+              href={`#${tab.id}`}
+              onClick={() => onTabChange?.(tab.id)}
+            >
+              {tab.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+
+      {tabs.map((tab, index) => (
+        <div
+          key={tab.id}
+          id={tab.id}
+          className={clsx(
+            "govuk-tabs__panel",
+            index > 0 && "govuk-tabs__panel--hidden",
+          )}
+        >
+          {tab.content}
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/index.ts

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