@dktunited-techoff/techoff-suite-ui 1.7.1 → 1.7.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 (15) hide show
  1. package/esm/components/TsTabs/TsTabs.css +12 -3
  2. package/esm/components/TsTabs/TsTabs.js +10 -5
  3. package/esm/components/TsTabs/TsTabs.js.map +1 -1
  4. package/esm/components/TsTabs/TsTabs.types.d.ts +1 -0
  5. package/esm/components/TsTabs/__stories__/TsTabs.stories.mdx +1 -0
  6. package/lib/components/TsTabs/TsTabs.css +12 -3
  7. package/lib/components/TsTabs/TsTabs.js +10 -5
  8. package/lib/components/TsTabs/TsTabs.js.map +1 -1
  9. package/lib/components/TsTabs/TsTabs.types.d.ts +1 -0
  10. package/lib/components/TsTabs/__stories__/TsTabs.stories.mdx +1 -0
  11. package/package.json +1 -1
  12. package/src/components/TsTabs/TsTabs.css +12 -3
  13. package/src/components/TsTabs/TsTabs.tsx +22 -16
  14. package/src/components/TsTabs/TsTabs.types.ts +8 -1
  15. package/src/components/TsTabs/__stories__/TsTabs.stories.mdx +1 -0
package/esm/components/TsTabs/TsTabs.css CHANGED
@@ -10,24 +10,33 @@
10
10
  height: 64px;
11
11
  border-bottom: 1px solid #d9dde1;
12
12
  }
13
+ .ts-tabs-items-container {
14
+ flex: 1;
15
+ height: 100%;
16
+ padding: 0 16px;
17
+ overflow: auto;
18
+ }
13
19
  .ts-tabs-items {
14
20
  display: flex;
15
- flex: 1;
16
21
  align-items: center;
17
22
  height: 100%;
18
- padding: 0 20px;
19
23
  }
20
24
  .ts-tabs-item {
21
25
  display: flex;
22
26
  align-items: center;
23
27
  margin-right: 20px;
24
28
  padding: 4px 0;
29
+ white-space: nowrap;
25
30
  cursor: pointer;
26
31
  }
27
32
  .ts-tabs-item--selected {
28
33
  border-bottom: 1px solid #3643ba;
29
34
  color: #3643ba;
30
35
  }
36
+ .ts-tabs-item--disabled {
37
+ color: #8c96a2;
38
+ cursor: not-allowed;
39
+ }
31
40
  .ts-tabs-item--selected-pin {
32
41
  width: 6px;
33
42
  height: 6px;
@@ -38,7 +47,7 @@
38
47
  .ts-tabs-actions {
39
48
  display: flex;
40
49
  align-items: center;
41
- padding: 0 20px;
50
+ padding: 0 16px;
42
51
  }
43
52
  .ts-tabs-actions > * {
44
53
  margin-left: 10px;
package/esm/components/TsTabs/TsTabs.js CHANGED
@@ -8,11 +8,16 @@ export const TsTabs = ({ defaultSelectedTabId, tabs }) => {
8
8
  // Rendering
9
9
  return (React.createElement("div", { className: "ts-tabs" },
10
10
  React.createElement("div", { className: "ts-tabs-header" },
11
- React.createElement("div", { className: "ts-tabs-items" }, tabs.map(tab => (React.createElement("div", { key: tab.id, className: `ts-tabs-item ${tab.id === selectedTab.id ? 'ts-tabs-item--selected' : ''}`, onClick: () => setSelectedTab(tab) },
12
- tab.icon && (React.createElement("div", { className: "ts-tabs-item--icon" },
13
- React.createElement(TsIcon, { name: tab.icon }))),
14
- React.createElement("div", { className: "ts-tabs-item--label" }, tab.label),
15
- tab.id === selectedTab.id && React.createElement("div", { className: "ts-tabs-item--selected-pin" }))))),
11
+ React.createElement("div", { className: "ts-tabs-items-container" },
12
+ React.createElement("div", { className: "ts-tabs-items" }, tabs.map(tab => (React.createElement("div", { key: tab.id, className: `
13
+ ts-tabs-item
14
+ ${tab.id === selectedTab.id ? 'ts-tabs-item--selected' : ''}
15
+ ${tab.disabled ? 'ts-tabs-item--disabled' : ''}
16
+ `, onClick: () => !tab.disabled && setSelectedTab(tab) },
17
+ tab.icon && (React.createElement("div", { className: "ts-tabs-item--icon" },
18
+ React.createElement(TsIcon, { name: tab.icon }))),
19
+ React.createElement("div", { className: "ts-tabs-item--label" }, tab.label),
20
+ tab.id === selectedTab.id && React.createElement("div", { className: "ts-tabs-item--selected-pin" })))))),
16
21
  selectedTab?.actions && React.createElement("div", { className: "ts-tabs-actions" }, selectedTab?.actions)),
17
22
  React.createElement("div", { className: "ts-tabs-container" }, selectedTab?.element)));
18
23
  };
package/esm/components/TsTabs/TsTabs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TsTabs.js","sourceRoot":"","sources":["../../../src/components/TsTabs/TsTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,oBAAoB,EAAE,IAAI,EAAe,EAAE,EAAE;IACpE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,oBAAoB,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAElH,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,SAAS;QACtB,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,6BAAK,SAAS,EAAC,eAAe,IAC3B,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,6BACE,GAAG,EAAE,GAAG,CAAC,EAAE,EACX,SAAS,EAAE,gBAAgB,GAAG,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,EAAE,EACtF,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,CAAC;gBAEjC,GAAG,CAAC,IAAI,IAAI,CACX,6BAAK,SAAS,EAAC,oBAAoB;oBACjC,oBAAC,MAAM,IAAC,IAAI,EAAE,GAAG,CAAC,IAAI,GAAI,CACtB,CACP;gBACD,6BAAK,SAAS,EAAC,qBAAqB,IAAE,GAAG,CAAC,KAAK,CAAO;gBACrD,GAAG,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,IAAI,6BAAK,SAAS,EAAC,4BAA4B,GAAG,CACxE,CACP,CAAC,CACE;YAEL,WAAW,EAAE,OAAO,IAAI,6BAAK,SAAS,EAAC,iBAAiB,IAAE,WAAW,EAAE,OAAO,CAAO,CAClF;QAEN,6BAAK,SAAS,EAAC,mBAAmB,IAAE,WAAW,EAAE,OAAO,CAAO,CAC3D,CACP,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"TsTabs.js","sourceRoot":"","sources":["../../../src/components/TsTabs/TsTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,oBAAoB,EAAE,IAAI,EAAe,EAAE,EAAE;IACpE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,oBAAoB,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAElH,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,SAAS;QACtB,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,6BAAK,SAAS,EAAC,yBAAyB;gBACtC,6BAAK,SAAS,EAAC,eAAe,IAC3B,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,6BACE,GAAG,EAAE,GAAG,CAAC,EAAE,EACX,SAAS,EAAE;;oBAEP,GAAG,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE;oBACzD,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE;iBAC/C,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,IAAI,cAAc,CAAC,GAAG,CAAC;oBAElD,GAAG,CAAC,IAAI,IAAI,CACX,6BAAK,SAAS,EAAC,oBAAoB;wBACjC,oBAAC,MAAM,IAAC,IAAI,EAAE,GAAG,CAAC,IAAI,GAAI,CACtB,CACP;oBACD,6BAAK,SAAS,EAAC,qBAAqB,IAAE,GAAG,CAAC,KAAK,CAAO;oBACrD,GAAG,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,IAAI,6BAAK,SAAS,EAAC,4BAA4B,GAAG,CACxE,CACP,CAAC,CACE,CACF;YAEL,WAAW,EAAE,OAAO,IAAI,6BAAK,SAAS,EAAC,iBAAiB,IAAE,WAAW,EAAE,OAAO,CAAO,CAClF;QAEN,6BAAK,SAAS,EAAC,mBAAmB,IAAE,WAAW,EAAE,OAAO,CAAO,CAC3D,CACP,CAAC;AACJ,CAAC,CAAC"}
package/esm/components/TsTabs/TsTabs.types.d.ts CHANGED
@@ -3,6 +3,7 @@ export type TabItem = {
3
3
  icon?: string;
4
4
  id: string;
5
5
  label: string;
6
+ disabled?: boolean;
6
7
  element: ReactElement;
7
8
  actions?: ReactElement;
8
9
  };
package/esm/components/TsTabs/__stories__/TsTabs.stories.mdx CHANGED
@@ -30,6 +30,7 @@ Tabs are used to move from one content to another within the same context.
30
30
  ),
31
31
  },
32
32
  { id: '2', label: 'Tab item 2', element: <p>Tab item 2 content</p> },
33
+ { id: 'disabled', label: 'Tab item disabled', disabled: true, element: <></> },
33
34
  {
34
35
  id: '3',
35
36
  label: 'Tab item 3',
package/lib/components/TsTabs/TsTabs.css CHANGED
@@ -10,24 +10,33 @@
10
10
  height: 64px;
11
11
  border-bottom: 1px solid #d9dde1;
12
12
  }
13
+ .ts-tabs-items-container {
14
+ flex: 1;
15
+ height: 100%;
16
+ padding: 0 16px;
17
+ overflow: auto;
18
+ }
13
19
  .ts-tabs-items {
14
20
  display: flex;
15
- flex: 1;
16
21
  align-items: center;
17
22
  height: 100%;
18
- padding: 0 20px;
19
23
  }
20
24
  .ts-tabs-item {
21
25
  display: flex;
22
26
  align-items: center;
23
27
  margin-right: 20px;
24
28
  padding: 4px 0;
29
+ white-space: nowrap;
25
30
  cursor: pointer;
26
31
  }
27
32
  .ts-tabs-item--selected {
28
33
  border-bottom: 1px solid #3643ba;
29
34
  color: #3643ba;
30
35
  }
36
+ .ts-tabs-item--disabled {
37
+ color: #8c96a2;
38
+ cursor: not-allowed;
39
+ }
31
40
  .ts-tabs-item--selected-pin {
32
41
  width: 6px;
33
42
  height: 6px;
@@ -38,7 +47,7 @@
38
47
  .ts-tabs-actions {
39
48
  display: flex;
40
49
  align-items: center;
41
- padding: 0 20px;
50
+ padding: 0 16px;
42
51
  }
43
52
  .ts-tabs-actions > * {
44
53
  margin-left: 10px;
package/lib/components/TsTabs/TsTabs.js CHANGED
@@ -11,11 +11,16 @@ const TsTabs = ({ defaultSelectedTabId, tabs }) => {
11
11
  // Rendering
12
12
  return (React.createElement("div", { className: "ts-tabs" },
13
13
  React.createElement("div", { className: "ts-tabs-header" },
14
- React.createElement("div", { className: "ts-tabs-items" }, tabs.map(tab => (React.createElement("div", { key: tab.id, className: `ts-tabs-item ${tab.id === selectedTab.id ? 'ts-tabs-item--selected' : ''}`, onClick: () => setSelectedTab(tab) },
15
- tab.icon && (React.createElement("div", { className: "ts-tabs-item--icon" },
16
- React.createElement(TsIcon_1.TsIcon, { name: tab.icon }))),
17
- React.createElement("div", { className: "ts-tabs-item--label" }, tab.label),
18
- tab.id === selectedTab.id && React.createElement("div", { className: "ts-tabs-item--selected-pin" }))))),
14
+ React.createElement("div", { className: "ts-tabs-items-container" },
15
+ React.createElement("div", { className: "ts-tabs-items" }, tabs.map(tab => (React.createElement("div", { key: tab.id, className: `
16
+ ts-tabs-item
17
+ ${tab.id === selectedTab.id ? 'ts-tabs-item--selected' : ''}
18
+ ${tab.disabled ? 'ts-tabs-item--disabled' : ''}
19
+ `, onClick: () => !tab.disabled && setSelectedTab(tab) },
20
+ tab.icon && (React.createElement("div", { className: "ts-tabs-item--icon" },
21
+ React.createElement(TsIcon_1.TsIcon, { name: tab.icon }))),
22
+ React.createElement("div", { className: "ts-tabs-item--label" }, tab.label),
23
+ tab.id === selectedTab.id && React.createElement("div", { className: "ts-tabs-item--selected-pin" })))))),
19
24
  selectedTab?.actions && React.createElement("div", { className: "ts-tabs-actions" }, selectedTab?.actions)),
20
25
  React.createElement("div", { className: "ts-tabs-container" }, selectedTab?.element)));
21
26
  };
package/lib/components/TsTabs/TsTabs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TsTabs.js","sourceRoot":"","sources":["../../../src/components/TsTabs/TsTabs.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAiC;AACjC,6CAA0C;AAE1C,wBAAsB;AAEf,MAAM,MAAM,GAAG,CAAC,EAAE,oBAAoB,EAAE,IAAI,EAAe,EAAE,EAAE;IACpE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAU,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,oBAAoB,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAElH,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,SAAS;QACtB,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,6BAAK,SAAS,EAAC,eAAe,IAC3B,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,6BACE,GAAG,EAAE,GAAG,CAAC,EAAE,EACX,SAAS,EAAE,gBAAgB,GAAG,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,EAAE,EACtF,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,CAAC;gBAEjC,GAAG,CAAC,IAAI,IAAI,CACX,6BAAK,SAAS,EAAC,oBAAoB;oBACjC,oBAAC,eAAM,IAAC,IAAI,EAAE,GAAG,CAAC,IAAI,GAAI,CACtB,CACP;gBACD,6BAAK,SAAS,EAAC,qBAAqB,IAAE,GAAG,CAAC,KAAK,CAAO;gBACrD,GAAG,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,IAAI,6BAAK,SAAS,EAAC,4BAA4B,GAAG,CACxE,CACP,CAAC,CACE;YAEL,WAAW,EAAE,OAAO,IAAI,6BAAK,SAAS,EAAC,iBAAiB,IAAE,WAAW,EAAE,OAAO,CAAO,CAClF;QAEN,6BAAK,SAAS,EAAC,mBAAmB,IAAE,WAAW,EAAE,OAAO,CAAO,CAC3D,CACP,CAAC;AACJ,CAAC,CAAC;AAhCW,QAAA,MAAM,UAgCjB"}
1
+ {"version":3,"file":"TsTabs.js","sourceRoot":"","sources":["../../../src/components/TsTabs/TsTabs.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAiC;AACjC,6CAA0C;AAE1C,wBAAsB;AAEf,MAAM,MAAM,GAAG,CAAC,EAAE,oBAAoB,EAAE,IAAI,EAAe,EAAE,EAAE;IACpE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAU,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,oBAAoB,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAElH,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,SAAS;QACtB,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,6BAAK,SAAS,EAAC,yBAAyB;gBACtC,6BAAK,SAAS,EAAC,eAAe,IAC3B,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,6BACE,GAAG,EAAE,GAAG,CAAC,EAAE,EACX,SAAS,EAAE;;oBAEP,GAAG,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE;oBACzD,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE;iBAC/C,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,IAAI,cAAc,CAAC,GAAG,CAAC;oBAElD,GAAG,CAAC,IAAI,IAAI,CACX,6BAAK,SAAS,EAAC,oBAAoB;wBACjC,oBAAC,eAAM,IAAC,IAAI,EAAE,GAAG,CAAC,IAAI,GAAI,CACtB,CACP;oBACD,6BAAK,SAAS,EAAC,qBAAqB,IAAE,GAAG,CAAC,KAAK,CAAO;oBACrD,GAAG,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,IAAI,6BAAK,SAAS,EAAC,4BAA4B,GAAG,CACxE,CACP,CAAC,CACE,CACF;YAEL,WAAW,EAAE,OAAO,IAAI,6BAAK,SAAS,EAAC,iBAAiB,IAAE,WAAW,EAAE,OAAO,CAAO,CAClF;QAEN,6BAAK,SAAS,EAAC,mBAAmB,IAAE,WAAW,EAAE,OAAO,CAAO,CAC3D,CACP,CAAC;AACJ,CAAC,CAAC;AAtCW,QAAA,MAAM,UAsCjB"}
package/lib/components/TsTabs/TsTabs.types.d.ts CHANGED
@@ -3,6 +3,7 @@ export type TabItem = {
3
3
  icon?: string;
4
4
  id: string;
5
5
  label: string;
6
+ disabled?: boolean;
6
7
  element: ReactElement;
7
8
  actions?: ReactElement;
8
9
  };
package/lib/components/TsTabs/__stories__/TsTabs.stories.mdx CHANGED
@@ -30,6 +30,7 @@ Tabs are used to move from one content to another within the same context.
30
30
  ),
31
31
  },
32
32
  { id: '2', label: 'Tab item 2', element: <p>Tab item 2 content</p> },
33
+ { id: 'disabled', label: 'Tab item disabled', disabled: true, element: <></> },
33
34
  {
34
35
  id: '3',
35
36
  label: 'Tab item 3',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dktunited-techoff/techoff-suite-ui",
3
- "version": "1.7.1",
3
+ "version": "1.7.5",
4
4
  "main": "lib/index.js",
5
5
  "types": "./lib",
6
6
  "module": "esm/index.js",
package/src/components/TsTabs/TsTabs.css CHANGED
@@ -10,24 +10,33 @@
10
10
  height: 64px;
11
11
  border-bottom: 1px solid #d9dde1;
12
12
  }
13
+ .ts-tabs-items-container {
14
+ flex: 1;
15
+ height: 100%;
16
+ padding: 0 16px;
17
+ overflow: auto;
18
+ }
13
19
  .ts-tabs-items {
14
20
  display: flex;
15
- flex: 1;
16
21
  align-items: center;
17
22
  height: 100%;
18
- padding: 0 20px;
19
23
  }
20
24
  .ts-tabs-item {
21
25
  display: flex;
22
26
  align-items: center;
23
27
  margin-right: 20px;
24
28
  padding: 4px 0;
29
+ white-space: nowrap;
25
30
  cursor: pointer;
26
31
  }
27
32
  .ts-tabs-item--selected {
28
33
  border-bottom: 1px solid #3643ba;
29
34
  color: #3643ba;
30
35
  }
36
+ .ts-tabs-item--disabled {
37
+ color: #8c96a2;
38
+ cursor: not-allowed;
39
+ }
31
40
  .ts-tabs-item--selected-pin {
32
41
  width: 6px;
33
42
  height: 6px;
@@ -38,7 +47,7 @@
38
47
  .ts-tabs-actions {
39
48
  display: flex;
40
49
  align-items: center;
41
- padding: 0 20px;
50
+ padding: 0 16px;
42
51
  }
43
52
  .ts-tabs-actions > * {
44
53
  margin-left: 10px;
package/src/components/TsTabs/TsTabs.tsx CHANGED
@@ -12,22 +12,28 @@ export const TsTabs = ({ defaultSelectedTabId, tabs }: TsTabsProps) => {
12
12
  return (
13
13
  <div className="ts-tabs">
14
14
  <div className="ts-tabs-header">
15
- <div className="ts-tabs-items">
16
- {tabs.map(tab => (
17
- <div
18
- key={tab.id}
19
- className={`ts-tabs-item ${tab.id === selectedTab.id ? 'ts-tabs-item--selected' : ''}`}
20
- onClick={() => setSelectedTab(tab)}
21
- >
22
- {tab.icon && (
23
- <div className="ts-tabs-item--icon">
24
- <TsIcon name={tab.icon} />
25
- </div>
26
- )}
27
- <div className="ts-tabs-item--label">{tab.label}</div>
28
- {tab.id === selectedTab.id && <div className="ts-tabs-item--selected-pin" />}
29
- </div>
30
- ))}
15
+ <div className="ts-tabs-items-container">
16
+ <div className="ts-tabs-items">
17
+ {tabs.map(tab => (
18
+ <div
19
+ key={tab.id}
20
+ className={`
21
+ ts-tabs-item
22
+ ${tab.id === selectedTab.id ? 'ts-tabs-item--selected' : ''}
23
+ ${tab.disabled ? 'ts-tabs-item--disabled' : ''}
24
+ `}
25
+ onClick={() => !tab.disabled && setSelectedTab(tab)}
26
+ >
27
+ {tab.icon && (
28
+ <div className="ts-tabs-item--icon">
29
+ <TsIcon name={tab.icon} />
30
+ </div>
31
+ )}
32
+ <div className="ts-tabs-item--label">{tab.label}</div>
33
+ {tab.id === selectedTab.id && <div className="ts-tabs-item--selected-pin" />}
34
+ </div>
35
+ ))}
36
+ </div>
31
37
  </div>
32
38
 
33
39
  {selectedTab?.actions && <div className="ts-tabs-actions">{selectedTab?.actions}</div>}
package/src/components/TsTabs/TsTabs.types.ts CHANGED
@@ -1,4 +1,11 @@
1
1
  import { ReactElement } from 'react';
2
2
 
3
- export type TabItem = { icon?: string; id: string; label: string; element: ReactElement; actions?: ReactElement };
3
+ export type TabItem = {
4
+ icon?: string;
5
+ id: string;
6
+ label: string;
7
+ disabled?: boolean;
8
+ element: ReactElement;
9
+ actions?: ReactElement;
10
+ };
4
11
  export type TsTabsProps = { defaultSelectedTabId?: string; tabs: TabItem[] };
package/src/components/TsTabs/__stories__/TsTabs.stories.mdx CHANGED
@@ -30,6 +30,7 @@ Tabs are used to move from one content to another within the same context.
30
30
  ),
31
31
  },
32
32
  { id: '2', label: 'Tab item 2', element: <p>Tab item 2 content</p> },
33
+ { id: 'disabled', label: 'Tab item disabled', disabled: true, element: <></> },
33
34
  {
34
35
  id: '3',
35
36
  label: 'Tab item 3',