@uktrade/react-component-library 0.22.4 → 0.22.5

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 (5) hide show
  1. package/dist/components/Tabs/Tabs.d.ts +2 -1
  2. package/dist/components/Tabs/Tabs.d.ts.map +1 -1
  3. package/dist/components/Tabs/Tabs.js +6 -2
  4. package/package.json +1 -1
  5. package/src/components/Tabs/Tabs.tsx +12 -5
package/dist/components/Tabs/Tabs.d.ts CHANGED
@@ -8,6 +8,7 @@ export type TabsProps = {
8
8
  tabs: Tab[];
9
9
  title?: string;
10
10
  onTabChange?: (tabId: string) => void;
11
+ activeTabId?: string;
11
12
  };
12
- export declare const Tabs: ({ tabs, title, onTabChange, }: TabsProps) => React.JSX.Element;
13
+ export declare const Tabs: ({ tabs, title, onTabChange, activeTabId, }: TabsProps) => React.JSX.Element;
13
14
  //# sourceMappingURL=Tabs.d.ts.map
package/dist/components/Tabs/Tabs.d.ts.map CHANGED
@@ -1 +1 @@
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"}
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;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,4CAKlB,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OAgDxB,CAAC"}
package/dist/components/Tabs/Tabs.js CHANGED
@@ -1,9 +1,13 @@
1
1
  "use client";
2
2
  import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import clsx from "clsx";
4
- export const Tabs = ({ tabs, title = "Contents", onTabChange, }) => {
4
+ export const Tabs = ({ tabs, title = "Contents", onTabChange, activeTabId, }) => {
5
5
  if (!tabs.length) {
6
6
  return _jsx(_Fragment, {});
7
7
  }
8
- 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)))] }));
8
+ // Determine active tab, fallback to first tab
9
+ const currentActiveId = activeTabId || tabs[0].id;
10
+ 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) => (_jsx("li", { className: clsx("govuk-tabs__list-item", tab.id === currentActiveId && "govuk-tabs__list-item--selected"), children: _jsx("a", { className: "govuk-tabs__tab", href: `#${tab.id}`, onClick: (e) => {
11
+ onTabChange?.(tab.id);
12
+ }, children: tab.label }) }, tab.id))) }), tabs.map((tab) => (_jsx("div", { id: tab.id, className: clsx("govuk-tabs__panel", tab.id !== currentActiveId && "govuk-tabs__panel--hidden"), children: tab.content }, tab.id)))] }));
9
13
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uktrade/react-component-library",
3
- "version": "0.22.4",
3
+ "version": "0.22.5",
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/Tabs/Tabs.tsx CHANGED
@@ -13,34 +13,41 @@ export type TabsProps = {
13
13
  tabs: Tab[];
14
14
  title?: string;
15
15
  onTabChange?: (tabId: string) => void;
16
+ activeTabId?: string;
16
17
  };
17
18
 
18
19
  export const Tabs = ({
19
20
  tabs,
20
21
  title = "Contents",
21
22
  onTabChange,
23
+ activeTabId,
22
24
  }: TabsProps): React.JSX.Element => {
23
25
  if (!tabs.length) {
24
26
  return <></>;
25
27
  }
26
28
 
29
+ // Determine active tab, fallback to first tab
30
+ const currentActiveId = activeTabId || tabs[0].id;
31
+
27
32
  return (
28
33
  <div className="govuk-tabs" data-module="govuk-tabs">
29
34
  <h2 className="govuk-tabs__title">{title}</h2>
30
35
 
31
36
  <ul className="govuk-tabs__list">
32
- {tabs.map((tab, index) => (
37
+ {tabs.map((tab) => (
33
38
  <li
34
39
  key={tab.id}
35
40
  className={clsx(
36
41
  "govuk-tabs__list-item",
37
- index === 0 && "govuk-tabs__list-item--selected",
42
+ tab.id === currentActiveId && "govuk-tabs__list-item--selected", // Check by ID
38
43
  )}
39
44
  >
40
45
  <a
41
46
  className="govuk-tabs__tab"
42
47
  href={`#${tab.id}`}
43
- onClick={() => onTabChange?.(tab.id)}
48
+ onClick={(e) => {
49
+ onTabChange?.(tab.id);
50
+ }}
44
51
  >
45
52
  {tab.label}
46
53
  </a>
@@ -48,13 +55,13 @@ export const Tabs = ({
48
55
  ))}
49
56
  </ul>
50
57
 
51
- {tabs.map((tab, index) => (
58
+ {tabs.map((tab) => (
52
59
  <div
53
60
  key={tab.id}
54
61
  id={tab.id}
55
62
  className={clsx(
56
63
  "govuk-tabs__panel",
57
- index > 0 && "govuk-tabs__panel--hidden",
64
+ tab.id !== currentActiveId && "govuk-tabs__panel--hidden", // Check by ID
58
65
  )}
59
66
  >
60
67
  {tab.content}