@dktunited-techoff/techoff-suite-ui 1.6.22 → 1.7.0
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.
- package/esm/components/TsTabs/TsTabs.css +59 -0
- package/esm/components/TsTabs/TsTabs.d.ts +4 -0
- package/esm/components/TsTabs/TsTabs.js +19 -0
- package/esm/components/TsTabs/TsTabs.js.map +1 -0
- package/esm/components/TsTabs/TsTabs.types.d.ts +12 -0
- package/esm/components/TsTabs/TsTabs.types.js +2 -0
- package/esm/components/TsTabs/TsTabs.types.js.map +1 -0
- package/esm/components/TsTabs/__stories__/TsTabs.stories.mdx +49 -0
- package/esm/index.d.ts +1 -0
- package/esm/index.js +1 -0
- package/esm/index.js.map +1 -1
- package/lib/components/TsTabs/TsTabs.css +59 -0
- package/lib/components/TsTabs/TsTabs.d.ts +4 -0
- package/lib/components/TsTabs/TsTabs.js +23 -0
- package/lib/components/TsTabs/TsTabs.js.map +1 -0
- package/lib/components/TsTabs/TsTabs.types.d.ts +12 -0
- package/lib/components/TsTabs/TsTabs.types.js +3 -0
- package/lib/components/TsTabs/TsTabs.types.js.map +1 -0
- package/lib/components/TsTabs/__stories__/TsTabs.stories.mdx +49 -0
- package/lib/index.d.ts +1 -0
- package/lib/index.js +1 -0
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/TsTabs/TsTabs.css +59 -0
- package/src/components/TsTabs/TsTabs.tsx +39 -0
- package/src/components/TsTabs/TsTabs.types.ts +4 -0
- package/src/components/TsTabs/__stories__/TsTabs.stories.mdx +49 -0
- package/src/index.ts +1 -0
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
.ts-tabs {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
width: 100%;
|
|
5
|
+
height: 100%;
|
|
6
|
+
}
|
|
7
|
+
.ts-tabs-header {
|
|
8
|
+
display: flex;
|
|
9
|
+
width: 100%;
|
|
10
|
+
height: 64px;
|
|
11
|
+
border-bottom: 1px solid #d9dde1;
|
|
12
|
+
}
|
|
13
|
+
.ts-tabs-items {
|
|
14
|
+
display: flex;
|
|
15
|
+
flex: 1;
|
|
16
|
+
align-items: center;
|
|
17
|
+
height: 100%;
|
|
18
|
+
padding: 0 20px;
|
|
19
|
+
}
|
|
20
|
+
.ts-tabs-item {
|
|
21
|
+
display: flex;
|
|
22
|
+
align-items: center;
|
|
23
|
+
margin-right: 20px;
|
|
24
|
+
padding: 4px 0;
|
|
25
|
+
cursor: pointer;
|
|
26
|
+
}
|
|
27
|
+
.ts-tabs-item--selected {
|
|
28
|
+
border-bottom: 1px solid #3643ba;
|
|
29
|
+
color: #3643ba;
|
|
30
|
+
}
|
|
31
|
+
.ts-tabs-item--selected-pin {
|
|
32
|
+
width: 6px;
|
|
33
|
+
height: 6px;
|
|
34
|
+
margin-left: 8px;
|
|
35
|
+
border-radius: 50%;
|
|
36
|
+
background: #3643ba;
|
|
37
|
+
}
|
|
38
|
+
.ts-tabs-actions {
|
|
39
|
+
display: flex;
|
|
40
|
+
align-items: center;
|
|
41
|
+
}
|
|
42
|
+
.ts-tabs-actions > * {
|
|
43
|
+
margin-left: 10px;
|
|
44
|
+
}
|
|
45
|
+
.ts-tabs-container {
|
|
46
|
+
flex: 1;
|
|
47
|
+
width: 100%;
|
|
48
|
+
overflow: hidden;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* ######### */
|
|
52
|
+
/* GLOBALS */
|
|
53
|
+
* {
|
|
54
|
+
font-size: 14px;
|
|
55
|
+
outline: none;
|
|
56
|
+
box-sizing: border-box;
|
|
57
|
+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
|
|
58
|
+
'Helvetica Neue', sans-serif;
|
|
59
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import { TsIcon } from '../TsIcon/TsIcon';
|
|
4
|
+
import './TsTabs.css';
|
|
5
|
+
export const TsTabs = ({ defaultSelectedTabId, tabs }) => {
|
|
6
|
+
const [selectedTab, setSelectedTab] = useState(tabs.find(t => t.id === defaultSelectedTabId) ?? tabs[0]);
|
|
7
|
+
// #########
|
|
8
|
+
// Rendering
|
|
9
|
+
return (React.createElement("div", { className: "ts-tabs" },
|
|
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" }))))),
|
|
16
|
+
selectedTab?.actions && React.createElement("div", { className: "ts-tabs-actions" }, selectedTab?.actions)),
|
|
17
|
+
React.createElement("div", { className: "ts-tabs-container" }, selectedTab?.element)));
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=TsTabs.js.map
|
|
@@ -0,0 +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"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ReactElement } from 'react';
|
|
2
|
+
export type TabItem = {
|
|
3
|
+
icon?: string;
|
|
4
|
+
id: string;
|
|
5
|
+
label: string;
|
|
6
|
+
element: ReactElement;
|
|
7
|
+
actions?: ReactElement;
|
|
8
|
+
};
|
|
9
|
+
export type TsTabsProps = {
|
|
10
|
+
defaultSelectedTabId?: string;
|
|
11
|
+
tabs: TabItem[];
|
|
12
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TsTabs.types.js","sourceRoot":"","sources":["../../../src/components/TsTabs/TsTabs.types.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
|
|
3
|
+
import { TsButton } from '../../TsButton/TsButton';
|
|
4
|
+
import { TsTabs } from '../TsTabs';
|
|
5
|
+
|
|
6
|
+
<Meta title="Components/Tabs" />
|
|
7
|
+
|
|
8
|
+
export const tabsArgTypes = {};
|
|
9
|
+
|
|
10
|
+
# Tabs
|
|
11
|
+
|
|
12
|
+
Tabs are used to move from one content to another within the same context.
|
|
13
|
+
|
|
14
|
+
## Overview
|
|
15
|
+
|
|
16
|
+
<Canvas>
|
|
17
|
+
<Story
|
|
18
|
+
name="Overview"
|
|
19
|
+
args={{
|
|
20
|
+
tabs: [
|
|
21
|
+
{
|
|
22
|
+
id: '1',
|
|
23
|
+
label: 'Tab item 1',
|
|
24
|
+
element: <p>Tab item 1 content</p>,
|
|
25
|
+
actions: (
|
|
26
|
+
<>
|
|
27
|
+
<TsButton>Action 1</TsButton>
|
|
28
|
+
<TsButton>Action 2</TsButton>
|
|
29
|
+
</>
|
|
30
|
+
),
|
|
31
|
+
},
|
|
32
|
+
{ id: '2', label: 'Tab item 2', element: <p>Tab item 2 content</p> },
|
|
33
|
+
{
|
|
34
|
+
id: '3',
|
|
35
|
+
label: 'Tab item 3',
|
|
36
|
+
element: <p>Tab item 3 content</p>,
|
|
37
|
+
actions: <TsButton icon="add">Action</TsButton>,
|
|
38
|
+
},
|
|
39
|
+
],
|
|
40
|
+
}}
|
|
41
|
+
argTypes={tabsArgTypes}
|
|
42
|
+
>
|
|
43
|
+
{args => <TsTabs {...args} />}
|
|
44
|
+
</Story>
|
|
45
|
+
</Canvas>
|
|
46
|
+
|
|
47
|
+
## Props
|
|
48
|
+
|
|
49
|
+
<ArgsTable story="Overview" of={TsTabs} />
|
package/esm/index.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ export * from './components/TsDropdown/TsDropdown';
|
|
|
4
4
|
export * from './components/TsIcon/TsIcon';
|
|
5
5
|
export * from './components/TsInput/TsInput/TsInput';
|
|
6
6
|
export * from './components/TsLoader/TsLoader';
|
|
7
|
+
export * from './components/TsTabs/TsTabs';
|
|
7
8
|
export * from './layouts/TsHeader/TsHeader';
|
|
8
9
|
export * from './layouts/TsHeader/TsHeaderProfile';
|
|
9
10
|
export * from './layouts/TsNavigation/TsNavigation';
|
package/esm/index.js
CHANGED
|
@@ -4,6 +4,7 @@ export * from './components/TsDropdown/TsDropdown';
|
|
|
4
4
|
export * from './components/TsIcon/TsIcon';
|
|
5
5
|
export * from './components/TsInput/TsInput/TsInput';
|
|
6
6
|
export * from './components/TsLoader/TsLoader';
|
|
7
|
+
export * from './components/TsTabs/TsTabs';
|
|
7
8
|
export * from './layouts/TsHeader/TsHeader';
|
|
8
9
|
export * from './layouts/TsHeader/TsHeaderProfile';
|
|
9
10
|
export * from './layouts/TsNavigation/TsNavigation';
|
package/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,qCAAqC,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,qCAAqC,CAAC"}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
.ts-tabs {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
width: 100%;
|
|
5
|
+
height: 100%;
|
|
6
|
+
}
|
|
7
|
+
.ts-tabs-header {
|
|
8
|
+
display: flex;
|
|
9
|
+
width: 100%;
|
|
10
|
+
height: 64px;
|
|
11
|
+
border-bottom: 1px solid #d9dde1;
|
|
12
|
+
}
|
|
13
|
+
.ts-tabs-items {
|
|
14
|
+
display: flex;
|
|
15
|
+
flex: 1;
|
|
16
|
+
align-items: center;
|
|
17
|
+
height: 100%;
|
|
18
|
+
padding: 0 20px;
|
|
19
|
+
}
|
|
20
|
+
.ts-tabs-item {
|
|
21
|
+
display: flex;
|
|
22
|
+
align-items: center;
|
|
23
|
+
margin-right: 20px;
|
|
24
|
+
padding: 4px 0;
|
|
25
|
+
cursor: pointer;
|
|
26
|
+
}
|
|
27
|
+
.ts-tabs-item--selected {
|
|
28
|
+
border-bottom: 1px solid #3643ba;
|
|
29
|
+
color: #3643ba;
|
|
30
|
+
}
|
|
31
|
+
.ts-tabs-item--selected-pin {
|
|
32
|
+
width: 6px;
|
|
33
|
+
height: 6px;
|
|
34
|
+
margin-left: 8px;
|
|
35
|
+
border-radius: 50%;
|
|
36
|
+
background: #3643ba;
|
|
37
|
+
}
|
|
38
|
+
.ts-tabs-actions {
|
|
39
|
+
display: flex;
|
|
40
|
+
align-items: center;
|
|
41
|
+
}
|
|
42
|
+
.ts-tabs-actions > * {
|
|
43
|
+
margin-left: 10px;
|
|
44
|
+
}
|
|
45
|
+
.ts-tabs-container {
|
|
46
|
+
flex: 1;
|
|
47
|
+
width: 100%;
|
|
48
|
+
overflow: hidden;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* ######### */
|
|
52
|
+
/* GLOBALS */
|
|
53
|
+
* {
|
|
54
|
+
font-size: 14px;
|
|
55
|
+
outline: none;
|
|
56
|
+
box-sizing: border-box;
|
|
57
|
+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
|
|
58
|
+
'Helvetica Neue', sans-serif;
|
|
59
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.TsTabs = void 0;
|
|
4
|
+
const React = require("react");
|
|
5
|
+
const react_1 = require("react");
|
|
6
|
+
const TsIcon_1 = require("../TsIcon/TsIcon");
|
|
7
|
+
require("./TsTabs.css");
|
|
8
|
+
const TsTabs = ({ defaultSelectedTabId, tabs }) => {
|
|
9
|
+
const [selectedTab, setSelectedTab] = (0, react_1.useState)(tabs.find(t => t.id === defaultSelectedTabId) ?? tabs[0]);
|
|
10
|
+
// #########
|
|
11
|
+
// Rendering
|
|
12
|
+
return (React.createElement("div", { className: "ts-tabs" },
|
|
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" }))))),
|
|
19
|
+
selectedTab?.actions && React.createElement("div", { className: "ts-tabs-actions" }, selectedTab?.actions)),
|
|
20
|
+
React.createElement("div", { className: "ts-tabs-container" }, selectedTab?.element)));
|
|
21
|
+
};
|
|
22
|
+
exports.TsTabs = TsTabs;
|
|
23
|
+
//# sourceMappingURL=TsTabs.js.map
|
|
@@ -0,0 +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"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ReactElement } from 'react';
|
|
2
|
+
export type TabItem = {
|
|
3
|
+
icon?: string;
|
|
4
|
+
id: string;
|
|
5
|
+
label: string;
|
|
6
|
+
element: ReactElement;
|
|
7
|
+
actions?: ReactElement;
|
|
8
|
+
};
|
|
9
|
+
export type TsTabsProps = {
|
|
10
|
+
defaultSelectedTabId?: string;
|
|
11
|
+
tabs: TabItem[];
|
|
12
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TsTabs.types.js","sourceRoot":"","sources":["../../../src/components/TsTabs/TsTabs.types.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
|
|
3
|
+
import { TsButton } from '../../TsButton/TsButton';
|
|
4
|
+
import { TsTabs } from '../TsTabs';
|
|
5
|
+
|
|
6
|
+
<Meta title="Components/Tabs" />
|
|
7
|
+
|
|
8
|
+
export const tabsArgTypes = {};
|
|
9
|
+
|
|
10
|
+
# Tabs
|
|
11
|
+
|
|
12
|
+
Tabs are used to move from one content to another within the same context.
|
|
13
|
+
|
|
14
|
+
## Overview
|
|
15
|
+
|
|
16
|
+
<Canvas>
|
|
17
|
+
<Story
|
|
18
|
+
name="Overview"
|
|
19
|
+
args={{
|
|
20
|
+
tabs: [
|
|
21
|
+
{
|
|
22
|
+
id: '1',
|
|
23
|
+
label: 'Tab item 1',
|
|
24
|
+
element: <p>Tab item 1 content</p>,
|
|
25
|
+
actions: (
|
|
26
|
+
<>
|
|
27
|
+
<TsButton>Action 1</TsButton>
|
|
28
|
+
<TsButton>Action 2</TsButton>
|
|
29
|
+
</>
|
|
30
|
+
),
|
|
31
|
+
},
|
|
32
|
+
{ id: '2', label: 'Tab item 2', element: <p>Tab item 2 content</p> },
|
|
33
|
+
{
|
|
34
|
+
id: '3',
|
|
35
|
+
label: 'Tab item 3',
|
|
36
|
+
element: <p>Tab item 3 content</p>,
|
|
37
|
+
actions: <TsButton icon="add">Action</TsButton>,
|
|
38
|
+
},
|
|
39
|
+
],
|
|
40
|
+
}}
|
|
41
|
+
argTypes={tabsArgTypes}
|
|
42
|
+
>
|
|
43
|
+
{args => <TsTabs {...args} />}
|
|
44
|
+
</Story>
|
|
45
|
+
</Canvas>
|
|
46
|
+
|
|
47
|
+
## Props
|
|
48
|
+
|
|
49
|
+
<ArgsTable story="Overview" of={TsTabs} />
|
package/lib/index.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ export * from './components/TsDropdown/TsDropdown';
|
|
|
4
4
|
export * from './components/TsIcon/TsIcon';
|
|
5
5
|
export * from './components/TsInput/TsInput/TsInput';
|
|
6
6
|
export * from './components/TsLoader/TsLoader';
|
|
7
|
+
export * from './components/TsTabs/TsTabs';
|
|
7
8
|
export * from './layouts/TsHeader/TsHeader';
|
|
8
9
|
export * from './layouts/TsHeader/TsHeaderProfile';
|
|
9
10
|
export * from './layouts/TsNavigation/TsNavigation';
|
package/lib/index.js
CHANGED
|
@@ -20,6 +20,7 @@ __exportStar(require("./components/TsDropdown/TsDropdown"), exports);
|
|
|
20
20
|
__exportStar(require("./components/TsIcon/TsIcon"), exports);
|
|
21
21
|
__exportStar(require("./components/TsInput/TsInput/TsInput"), exports);
|
|
22
22
|
__exportStar(require("./components/TsLoader/TsLoader"), exports);
|
|
23
|
+
__exportStar(require("./components/TsTabs/TsTabs"), exports);
|
|
23
24
|
__exportStar(require("./layouts/TsHeader/TsHeader"), exports);
|
|
24
25
|
__exportStar(require("./layouts/TsHeader/TsHeaderProfile"), exports);
|
|
25
26
|
__exportStar(require("./layouts/TsNavigation/TsNavigation"), exports);
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,iEAA+C;AAC/C,qEAAmD;AACnD,qEAAmD;AACnD,6DAA2C;AAC3C,uEAAqD;AACrD,iEAA+C;AAC/C,8DAA4C;AAC5C,qEAAmD;AACnD,sEAAoD"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,iEAA+C;AAC/C,qEAAmD;AACnD,qEAAmD;AACnD,6DAA2C;AAC3C,uEAAqD;AACrD,iEAA+C;AAC/C,6DAA2C;AAC3C,8DAA4C;AAC5C,qEAAmD;AACnD,sEAAoD"}
|
package/package.json
CHANGED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
.ts-tabs {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
width: 100%;
|
|
5
|
+
height: 100%;
|
|
6
|
+
}
|
|
7
|
+
.ts-tabs-header {
|
|
8
|
+
display: flex;
|
|
9
|
+
width: 100%;
|
|
10
|
+
height: 64px;
|
|
11
|
+
border-bottom: 1px solid #d9dde1;
|
|
12
|
+
}
|
|
13
|
+
.ts-tabs-items {
|
|
14
|
+
display: flex;
|
|
15
|
+
flex: 1;
|
|
16
|
+
align-items: center;
|
|
17
|
+
height: 100%;
|
|
18
|
+
padding: 0 20px;
|
|
19
|
+
}
|
|
20
|
+
.ts-tabs-item {
|
|
21
|
+
display: flex;
|
|
22
|
+
align-items: center;
|
|
23
|
+
margin-right: 20px;
|
|
24
|
+
padding: 4px 0;
|
|
25
|
+
cursor: pointer;
|
|
26
|
+
}
|
|
27
|
+
.ts-tabs-item--selected {
|
|
28
|
+
border-bottom: 1px solid #3643ba;
|
|
29
|
+
color: #3643ba;
|
|
30
|
+
}
|
|
31
|
+
.ts-tabs-item--selected-pin {
|
|
32
|
+
width: 6px;
|
|
33
|
+
height: 6px;
|
|
34
|
+
margin-left: 8px;
|
|
35
|
+
border-radius: 50%;
|
|
36
|
+
background: #3643ba;
|
|
37
|
+
}
|
|
38
|
+
.ts-tabs-actions {
|
|
39
|
+
display: flex;
|
|
40
|
+
align-items: center;
|
|
41
|
+
}
|
|
42
|
+
.ts-tabs-actions > * {
|
|
43
|
+
margin-left: 10px;
|
|
44
|
+
}
|
|
45
|
+
.ts-tabs-container {
|
|
46
|
+
flex: 1;
|
|
47
|
+
width: 100%;
|
|
48
|
+
overflow: hidden;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* ######### */
|
|
52
|
+
/* GLOBALS */
|
|
53
|
+
* {
|
|
54
|
+
font-size: 14px;
|
|
55
|
+
outline: none;
|
|
56
|
+
box-sizing: border-box;
|
|
57
|
+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
|
|
58
|
+
'Helvetica Neue', sans-serif;
|
|
59
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import { TsIcon } from '../TsIcon/TsIcon';
|
|
4
|
+
import { TabItem, TsTabsProps } from './TsTabs.types';
|
|
5
|
+
import './TsTabs.css';
|
|
6
|
+
|
|
7
|
+
export const TsTabs = ({ defaultSelectedTabId, tabs }: TsTabsProps) => {
|
|
8
|
+
const [selectedTab, setSelectedTab] = useState<TabItem>(tabs.find(t => t.id === defaultSelectedTabId) ?? tabs[0]);
|
|
9
|
+
|
|
10
|
+
// #########
|
|
11
|
+
// Rendering
|
|
12
|
+
return (
|
|
13
|
+
<div className="ts-tabs">
|
|
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
|
+
))}
|
|
31
|
+
</div>
|
|
32
|
+
|
|
33
|
+
{selectedTab?.actions && <div className="ts-tabs-actions">{selectedTab?.actions}</div>}
|
|
34
|
+
</div>
|
|
35
|
+
|
|
36
|
+
<div className="ts-tabs-container">{selectedTab?.element}</div>
|
|
37
|
+
</div>
|
|
38
|
+
);
|
|
39
|
+
};
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
|
|
3
|
+
import { TsButton } from '../../TsButton/TsButton';
|
|
4
|
+
import { TsTabs } from '../TsTabs';
|
|
5
|
+
|
|
6
|
+
<Meta title="Components/Tabs" />
|
|
7
|
+
|
|
8
|
+
export const tabsArgTypes = {};
|
|
9
|
+
|
|
10
|
+
# Tabs
|
|
11
|
+
|
|
12
|
+
Tabs are used to move from one content to another within the same context.
|
|
13
|
+
|
|
14
|
+
## Overview
|
|
15
|
+
|
|
16
|
+
<Canvas>
|
|
17
|
+
<Story
|
|
18
|
+
name="Overview"
|
|
19
|
+
args={{
|
|
20
|
+
tabs: [
|
|
21
|
+
{
|
|
22
|
+
id: '1',
|
|
23
|
+
label: 'Tab item 1',
|
|
24
|
+
element: <p>Tab item 1 content</p>,
|
|
25
|
+
actions: (
|
|
26
|
+
<>
|
|
27
|
+
<TsButton>Action 1</TsButton>
|
|
28
|
+
<TsButton>Action 2</TsButton>
|
|
29
|
+
</>
|
|
30
|
+
),
|
|
31
|
+
},
|
|
32
|
+
{ id: '2', label: 'Tab item 2', element: <p>Tab item 2 content</p> },
|
|
33
|
+
{
|
|
34
|
+
id: '3',
|
|
35
|
+
label: 'Tab item 3',
|
|
36
|
+
element: <p>Tab item 3 content</p>,
|
|
37
|
+
actions: <TsButton icon="add">Action</TsButton>,
|
|
38
|
+
},
|
|
39
|
+
],
|
|
40
|
+
}}
|
|
41
|
+
argTypes={tabsArgTypes}
|
|
42
|
+
>
|
|
43
|
+
{args => <TsTabs {...args} />}
|
|
44
|
+
</Story>
|
|
45
|
+
</Canvas>
|
|
46
|
+
|
|
47
|
+
## Props
|
|
48
|
+
|
|
49
|
+
<ArgsTable story="Overview" of={TsTabs} />
|
package/src/index.ts
CHANGED
|
@@ -4,6 +4,7 @@ export * from './components/TsDropdown/TsDropdown';
|
|
|
4
4
|
export * from './components/TsIcon/TsIcon';
|
|
5
5
|
export * from './components/TsInput/TsInput/TsInput';
|
|
6
6
|
export * from './components/TsLoader/TsLoader';
|
|
7
|
+
export * from './components/TsTabs/TsTabs';
|
|
7
8
|
export * from './layouts/TsHeader/TsHeader';
|
|
8
9
|
export * from './layouts/TsHeader/TsHeaderProfile';
|
|
9
10
|
export * from './layouts/TsNavigation/TsNavigation';
|