@uktrade/react-component-library 0.21.6 → 0.22.2

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 +3 -2
  4. package/package.json +1 -1
  5. package/src/components/Tabs/Tabs.tsx +8 -4
package/dist/components/Tabs/Tabs.d.ts CHANGED
@@ -7,7 +7,8 @@ export type Tab = {
7
7
  export type TabsProps = {
8
8
  tabs: Tab[];
9
9
  title?: string;
10
+ selectedTab?: string;
10
11
  onTabChange?: (tabId: string) => void;
11
12
  };
12
- export declare const Tabs: ({ tabs, title, onTabChange, }: TabsProps) => React.JSX.Element;
13
+ export declare const Tabs: ({ tabs, title, selectedTab, onTabChange, }: 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,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,4CAKlB,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OA6CxB,CAAC"}
package/dist/components/Tabs/Tabs.js CHANGED
@@ -1,9 +1,10 @@
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", selectedTab, onTabChange, }) => {
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
+ const activeTab = selectedTab ?? tabs[0]?.id;
9
+ 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 === activeTab && "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) => (_jsx("div", { id: tab.id, className: clsx("govuk-tabs__panel", tab.id !== activeTab && "govuk-tabs__panel--hidden"), children: tab.content }, tab.id)))] }));
9
10
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uktrade/react-component-library",
3
- "version": "0.21.6",
3
+ "version": "0.22.2",
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
@@ -12,29 +12,33 @@ export type Tab = {
12
12
  export type TabsProps = {
13
13
  tabs: Tab[];
14
14
  title?: string;
15
+ selectedTab?: string;
15
16
  onTabChange?: (tabId: string) => void;
16
17
  };
17
18
 
18
19
  export const Tabs = ({
19
20
  tabs,
20
21
  title = "Contents",
22
+ selectedTab,
21
23
  onTabChange,
22
24
  }: TabsProps): React.JSX.Element => {
23
25
  if (!tabs.length) {
24
26
  return <></>;
25
27
  }
26
28
 
29
+ const activeTab = selectedTab ?? tabs[0]?.id;
30
+
27
31
  return (
28
32
  <div className="govuk-tabs" data-module="govuk-tabs">
29
33
  <h2 className="govuk-tabs__title">{title}</h2>
30
34
 
31
35
  <ul className="govuk-tabs__list">
32
- {tabs.map((tab, index) => (
36
+ {tabs.map((tab) => (
33
37
  <li
34
38
  key={tab.id}
35
39
  className={clsx(
36
40
  "govuk-tabs__list-item",
37
- index === 0 && "govuk-tabs__list-item--selected",
41
+ tab.id === activeTab && "govuk-tabs__list-item--selected",
38
42
  )}
39
43
  >
40
44
  <a
@@ -48,13 +52,13 @@ export const Tabs = ({
48
52
  ))}
49
53
  </ul>
50
54
 
51
- {tabs.map((tab, index) => (
55
+ {tabs.map((tab) => (
52
56
  <div
53
57
  key={tab.id}
54
58
  id={tab.id}
55
59
  className={clsx(
56
60
  "govuk-tabs__panel",
57
- index > 0 && "govuk-tabs__panel--hidden",
61
+ tab.id !== activeTab && "govuk-tabs__panel--hidden",
58
62
  )}
59
63
  >
60
64
  {tab.content}