@dktunited-techoff/techoff-suite-ui 1.4.2 → 1.4.4

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 (17) hide show
  1. package/esm/components/TsButton/TsButton.css +43 -13
  2. package/esm/components/TsButton/TsButton.d.ts +1 -1
  3. package/esm/components/TsButton/TsButton.js +2 -2
  4. package/esm/components/TsButton/TsButton.js.map +1 -1
  5. package/esm/components/TsButton/TsButton.types.d.ts +2 -2
  6. package/esm/components/TsButton/__stories__/TsButton.stories.mdx +6 -0
  7. package/lib/components/TsButton/TsButton.css +43 -13
  8. package/lib/components/TsButton/TsButton.d.ts +1 -1
  9. package/lib/components/TsButton/TsButton.js +2 -2
  10. package/lib/components/TsButton/TsButton.js.map +1 -1
  11. package/lib/components/TsButton/TsButton.types.d.ts +2 -2
  12. package/lib/components/TsButton/__stories__/TsButton.stories.mdx +6 -0
  13. package/package.json +1 -1
  14. package/src/components/TsButton/TsButton.css +43 -13
  15. package/src/components/TsButton/TsButton.tsx +2 -2
  16. package/src/components/TsButton/TsButton.types.ts +3 -2
  17. package/src/components/TsButton/__stories__/TsButton.stories.mdx +6 -0
package/esm/components/TsButton/TsButton.css CHANGED
@@ -15,6 +15,9 @@
15
15
  .ts-button > div:last-child {
16
16
  margin-right: 0px;
17
17
  }
18
+ button:disabled {
19
+ cursor: not-allowed;
20
+ }
18
21
  /* ####### */
19
22
  /* BLOCK */
20
23
  .ts-button--block {
@@ -40,34 +43,61 @@
40
43
  }
41
44
  /* ########## */
42
45
  /* VARIANTS */
43
- .ts-button--primary {
46
+ .ts-button--primary:not(:disabled) {
44
47
  background: #3643ba;
45
48
  color: #ffffff;
46
49
  }
47
- /* .ts-button--primary:hover {
48
- background: #00689d;
49
- } */
50
- .ts-button--secondary {
50
+ .ts-button--primary:not(:disabled):hover {
51
+ background: #2e3998;
52
+ }
53
+ .ts-button--primary:not(:disabled):active {
54
+ background: #272f76;
55
+ }
56
+ .ts-button--primary:disabled {
57
+ background: #3643ba61;
58
+ color: #ffffff;
59
+ }
60
+ .ts-button--secondary:not(:disabled) {
51
61
  background: #ebecf7;
52
62
  color: #3643ba;
53
63
  }
54
- /* .ts-button--secondary:hover {
55
- background: #bedeef;
56
- } */
57
- .ts-button--success {
64
+ .ts-button--secondary:not(:disabled):hover {
65
+ background: #e3e3f4;
66
+ }
67
+ .ts-button--secondary:not(:disabled):active {
68
+ background: #d7daf1;
69
+ }
70
+ .ts-button--secondary:disabled {
71
+ background: #3643ba0d;
72
+ color: #3643ba80;
73
+ }
74
+ .ts-button--success:not(:disabled) {
58
75
  background: #02be8a;
59
76
  color: #ffffff;
60
77
  }
61
- .ts-button--success:hover {
78
+ .ts-button--success:not(:disabled):hover {
62
79
  background: #029e73;
80
+ }
81
+ .ts-button--success:not(:disabled):active {
82
+ background: #017f5c;
83
+ }
84
+ .ts-button--success:disabled {
85
+ background: #02be8a61;
63
86
  color: #ffffff;
64
87
  }
65
- .ts-button--ghost {
88
+ .ts-button--ghost:not(:disabled) {
66
89
  background: #ffffff;
67
90
  color: #1d1d1b;
68
91
  }
69
- .ts-button--ghost:hover {
70
- background: #ebecf7;
92
+ .ts-button--ghost:not(:disabled):hover {
93
+ background: #ebecf8;
94
+ }
95
+ .ts-button--ghost:not(:disabled):active {
96
+ background: #d7daf1;
97
+ }
98
+ .ts-button--ghost:disabled {
99
+ background: #ffffff61;
100
+ color: #1d1d1b61;
71
101
  }
72
102
  .ts-button--shadow {
73
103
  box-shadow: 0px 12px 12px 0px #00537d1a;
package/esm/components/TsButton/TsButton.d.ts CHANGED
@@ -2,4 +2,4 @@ import * as React from 'react';
2
2
  import { PropsWithChildren } from 'react';
3
3
  import { TsButtonProps } from './TsButton.types';
4
4
  import './TsButton.css';
5
- export declare const TsButton: ({ children, icon, iconDirection, size, variant, block, rounded, onClick, }: PropsWithChildren<TsButtonProps>) => React.JSX.Element;
5
+ export declare const TsButton: ({ children, icon, iconDirection, size, variant, block, rounded, ...props }: PropsWithChildren<TsButtonProps>) => React.JSX.Element;
package/esm/components/TsButton/TsButton.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { TsIcon } from '../TsIcon/TsIcon';
3
3
  import './TsButton.css';
4
- export const TsButton = ({ children, icon, iconDirection = 'left', size = 'md', variant = 'primary', block, rounded, onClick, }) => {
4
+ export const TsButton = ({ children, icon, iconDirection = 'left', size = 'md', variant = 'primary', block, rounded, ...props }) => {
5
5
  // #########
6
6
  // Rendering
7
7
  return (React.createElement("button", { className: `
@@ -9,7 +9,7 @@ export const TsButton = ({ children, icon, iconDirection = 'left', size = 'md',
9
9
  ${block ? 'ts-button--block' : ''}
10
10
  ${rounded ? 'ts-button--rounded' : ''}
11
11
  ${icon && !children ? 'ts-button--icon-only' : ''}
12
- `, onClick: onClick },
12
+ `, ...props },
13
13
  icon && iconDirection === 'left' && React.createElement(TsIcon, { name: icon, size: "16" }),
14
14
  children && React.createElement("div", null, children),
15
15
  icon && iconDirection === 'right' && React.createElement(TsIcon, { name: icon, size: "16" })));
package/esm/components/TsButton/TsButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TsButton.js","sourceRoot":"","sources":["../../../src/components/TsButton/TsButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,gBAAgB,CAAC;AAExB,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,QAAQ,EACR,IAAI,EACJ,aAAa,GAAG,MAAM,EACtB,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,KAAK,EACL,OAAO,EACP,OAAO,GAC0B,EAAE,EAAE;IACrC,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,gCACE,SAAS,EAAE;+BACc,IAAI,eAAe,OAAO;UAC/C,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE;UAC/B,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE;UACnC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE;OAClD,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,aAAa,KAAK,MAAM,IAAI,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG;QACpE,QAAQ,IAAI,iCAAM,QAAQ,CAAO;QACjC,IAAI,IAAI,aAAa,KAAK,OAAO,IAAI,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC/D,CACV,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"TsButton.js","sourceRoot":"","sources":["../../../src/components/TsButton/TsButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,gBAAgB,CAAC;AAExB,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,QAAQ,EACR,IAAI,EACJ,aAAa,GAAG,MAAM,EACtB,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,KAAK,EACL,OAAO,EACP,GAAG,KAAK,EACyB,EAAE,EAAE;IACrC,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,gCACE,SAAS,EAAE;+BACc,IAAI,eAAe,OAAO;UAC/C,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE;UAC/B,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE;UACnC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE;OAClD,KACG,KAAK;QAER,IAAI,IAAI,aAAa,KAAK,MAAM,IAAI,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG;QACpE,QAAQ,IAAI,iCAAM,QAAQ,CAAO;QACjC,IAAI,IAAI,aAAa,KAAK,OAAO,IAAI,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC/D,CACV,CAAC;AACJ,CAAC,CAAC"}
package/esm/components/TsButton/TsButton.types.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { ButtonHTMLAttributes } from 'react';
1
2
  export type TsButtonProps = {
2
3
  icon?: string;
3
4
  iconDirection?: 'left' | 'right';
@@ -5,5 +6,4 @@ export type TsButtonProps = {
5
6
  variant?: 'primary' | 'secondary' | 'success' | 'ghost' | 'shadow';
6
7
  block?: boolean;
7
8
  rounded?: boolean;
8
- onClick: () => void;
9
- };
9
+ } & ButtonHTMLAttributes<HTMLButtonElement>;
package/esm/components/TsButton/__stories__/TsButton.stories.mdx CHANGED
@@ -38,6 +38,11 @@ export const buttonArgTypes = {
38
38
  description: 'Define if the button is full width',
39
39
  table: { defaultValue: { summary: 'false' } },
40
40
  },
41
+ disabled: {
42
+ control: 'boolean',
43
+ description: 'Define if the button is disabled',
44
+ table: { defaultValue: { summary: 'false' } },
45
+ },
41
46
  rounded: {
42
47
  control: 'boolean',
43
48
  description: 'Define if the button has its corner full rounded',
@@ -60,6 +65,7 @@ Buttons express what action will occur when the users clicks. Buttons are used t
60
65
  size: 'md',
61
66
  variant: 'primary',
62
67
  block: false,
68
+ disabled: false,
63
69
  rounded: false,
64
70
  onClick: () => {},
65
71
  }}
package/lib/components/TsButton/TsButton.css CHANGED
@@ -15,6 +15,9 @@
15
15
  .ts-button > div:last-child {
16
16
  margin-right: 0px;
17
17
  }
18
+ button:disabled {
19
+ cursor: not-allowed;
20
+ }
18
21
  /* ####### */
19
22
  /* BLOCK */
20
23
  .ts-button--block {
@@ -40,34 +43,61 @@
40
43
  }
41
44
  /* ########## */
42
45
  /* VARIANTS */
43
- .ts-button--primary {
46
+ .ts-button--primary:not(:disabled) {
44
47
  background: #3643ba;
45
48
  color: #ffffff;
46
49
  }
47
- /* .ts-button--primary:hover {
48
- background: #00689d;
49
- } */
50
- .ts-button--secondary {
50
+ .ts-button--primary:not(:disabled):hover {
51
+ background: #2e3998;
52
+ }
53
+ .ts-button--primary:not(:disabled):active {
54
+ background: #272f76;
55
+ }
56
+ .ts-button--primary:disabled {
57
+ background: #3643ba61;
58
+ color: #ffffff;
59
+ }
60
+ .ts-button--secondary:not(:disabled) {
51
61
  background: #ebecf7;
52
62
  color: #3643ba;
53
63
  }
54
- /* .ts-button--secondary:hover {
55
- background: #bedeef;
56
- } */
57
- .ts-button--success {
64
+ .ts-button--secondary:not(:disabled):hover {
65
+ background: #e3e3f4;
66
+ }
67
+ .ts-button--secondary:not(:disabled):active {
68
+ background: #d7daf1;
69
+ }
70
+ .ts-button--secondary:disabled {
71
+ background: #3643ba0d;
72
+ color: #3643ba80;
73
+ }
74
+ .ts-button--success:not(:disabled) {
58
75
  background: #02be8a;
59
76
  color: #ffffff;
60
77
  }
61
- .ts-button--success:hover {
78
+ .ts-button--success:not(:disabled):hover {
62
79
  background: #029e73;
80
+ }
81
+ .ts-button--success:not(:disabled):active {
82
+ background: #017f5c;
83
+ }
84
+ .ts-button--success:disabled {
85
+ background: #02be8a61;
63
86
  color: #ffffff;
64
87
  }
65
- .ts-button--ghost {
88
+ .ts-button--ghost:not(:disabled) {
66
89
  background: #ffffff;
67
90
  color: #1d1d1b;
68
91
  }
69
- .ts-button--ghost:hover {
70
- background: #ebecf7;
92
+ .ts-button--ghost:not(:disabled):hover {
93
+ background: #ebecf8;
94
+ }
95
+ .ts-button--ghost:not(:disabled):active {
96
+ background: #d7daf1;
97
+ }
98
+ .ts-button--ghost:disabled {
99
+ background: #ffffff61;
100
+ color: #1d1d1b61;
71
101
  }
72
102
  .ts-button--shadow {
73
103
  box-shadow: 0px 12px 12px 0px #00537d1a;
package/lib/components/TsButton/TsButton.d.ts CHANGED
@@ -2,4 +2,4 @@ import * as React from 'react';
2
2
  import { PropsWithChildren } from 'react';
3
3
  import { TsButtonProps } from './TsButton.types';
4
4
  import './TsButton.css';
5
- export declare const TsButton: ({ children, icon, iconDirection, size, variant, block, rounded, onClick, }: PropsWithChildren<TsButtonProps>) => React.JSX.Element;
5
+ export declare const TsButton: ({ children, icon, iconDirection, size, variant, block, rounded, ...props }: PropsWithChildren<TsButtonProps>) => React.JSX.Element;
package/lib/components/TsButton/TsButton.js CHANGED
@@ -4,7 +4,7 @@ exports.TsButton = void 0;
4
4
  const React = require("react");
5
5
  const TsIcon_1 = require("../TsIcon/TsIcon");
6
6
  require("./TsButton.css");
7
- const TsButton = ({ children, icon, iconDirection = 'left', size = 'md', variant = 'primary', block, rounded, onClick, }) => {
7
+ const TsButton = ({ children, icon, iconDirection = 'left', size = 'md', variant = 'primary', block, rounded, ...props }) => {
8
8
  // #########
9
9
  // Rendering
10
10
  return (React.createElement("button", { className: `
@@ -12,7 +12,7 @@ const TsButton = ({ children, icon, iconDirection = 'left', size = 'md', variant
12
12
  ${block ? 'ts-button--block' : ''}
13
13
  ${rounded ? 'ts-button--rounded' : ''}
14
14
  ${icon && !children ? 'ts-button--icon-only' : ''}
15
- `, onClick: onClick },
15
+ `, ...props },
16
16
  icon && iconDirection === 'left' && React.createElement(TsIcon_1.TsIcon, { name: icon, size: "16" }),
17
17
  children && React.createElement("div", null, children),
18
18
  icon && iconDirection === 'right' && React.createElement(TsIcon_1.TsIcon, { name: icon, size: "16" })));
package/lib/components/TsButton/TsButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TsButton.js","sourceRoot":"","sources":["../../../src/components/TsButton/TsButton.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,6CAA0C;AAE1C,0BAAwB;AAEjB,MAAM,QAAQ,GAAG,CAAC,EACvB,QAAQ,EACR,IAAI,EACJ,aAAa,GAAG,MAAM,EACtB,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,KAAK,EACL,OAAO,EACP,OAAO,GAC0B,EAAE,EAAE;IACrC,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,gCACE,SAAS,EAAE;+BACc,IAAI,eAAe,OAAO;UAC/C,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE;UAC/B,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE;UACnC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE;OAClD,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,aAAa,KAAK,MAAM,IAAI,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG;QACpE,QAAQ,IAAI,iCAAM,QAAQ,CAAO;QACjC,IAAI,IAAI,aAAa,KAAK,OAAO,IAAI,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC/D,CACV,CAAC;AACJ,CAAC,CAAC;AA3BW,QAAA,QAAQ,YA2BnB"}
1
+ {"version":3,"file":"TsButton.js","sourceRoot":"","sources":["../../../src/components/TsButton/TsButton.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,6CAA0C;AAE1C,0BAAwB;AAEjB,MAAM,QAAQ,GAAG,CAAC,EACvB,QAAQ,EACR,IAAI,EACJ,aAAa,GAAG,MAAM,EACtB,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,KAAK,EACL,OAAO,EACP,GAAG,KAAK,EACyB,EAAE,EAAE;IACrC,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,gCACE,SAAS,EAAE;+BACc,IAAI,eAAe,OAAO;UAC/C,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE;UAC/B,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE;UACnC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE;OAClD,KACG,KAAK;QAER,IAAI,IAAI,aAAa,KAAK,MAAM,IAAI,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG;QACpE,QAAQ,IAAI,iCAAM,QAAQ,CAAO;QACjC,IAAI,IAAI,aAAa,KAAK,OAAO,IAAI,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC/D,CACV,CAAC;AACJ,CAAC,CAAC;AA3BW,QAAA,QAAQ,YA2BnB"}
package/lib/components/TsButton/TsButton.types.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { ButtonHTMLAttributes } from 'react';
1
2
  export type TsButtonProps = {
2
3
  icon?: string;
3
4
  iconDirection?: 'left' | 'right';
@@ -5,5 +6,4 @@ export type TsButtonProps = {
5
6
  variant?: 'primary' | 'secondary' | 'success' | 'ghost' | 'shadow';
6
7
  block?: boolean;
7
8
  rounded?: boolean;
8
- onClick: () => void;
9
- };
9
+ } & ButtonHTMLAttributes<HTMLButtonElement>;
package/lib/components/TsButton/__stories__/TsButton.stories.mdx CHANGED
@@ -38,6 +38,11 @@ export const buttonArgTypes = {
38
38
  description: 'Define if the button is full width',
39
39
  table: { defaultValue: { summary: 'false' } },
40
40
  },
41
+ disabled: {
42
+ control: 'boolean',
43
+ description: 'Define if the button is disabled',
44
+ table: { defaultValue: { summary: 'false' } },
45
+ },
41
46
  rounded: {
42
47
  control: 'boolean',
43
48
  description: 'Define if the button has its corner full rounded',
@@ -60,6 +65,7 @@ Buttons express what action will occur when the users clicks. Buttons are used t
60
65
  size: 'md',
61
66
  variant: 'primary',
62
67
  block: false,
68
+ disabled: false,
63
69
  rounded: false,
64
70
  onClick: () => {},
65
71
  }}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dktunited-techoff/techoff-suite-ui",
3
- "version": "1.4.2",
3
+ "version": "1.4.4",
4
4
  "main": "lib/index.js",
5
5
  "types": "./lib",
6
6
  "module": "esm/index.js",
package/src/components/TsButton/TsButton.css CHANGED
@@ -15,6 +15,9 @@
15
15
  .ts-button > div:last-child {
16
16
  margin-right: 0px;
17
17
  }
18
+ button:disabled {
19
+ cursor: not-allowed;
20
+ }
18
21
  /* ####### */
19
22
  /* BLOCK */
20
23
  .ts-button--block {
@@ -40,34 +43,61 @@
40
43
  }
41
44
  /* ########## */
42
45
  /* VARIANTS */
43
- .ts-button--primary {
46
+ .ts-button--primary:not(:disabled) {
44
47
  background: #3643ba;
45
48
  color: #ffffff;
46
49
  }
47
- /* .ts-button--primary:hover {
48
- background: #00689d;
49
- } */
50
- .ts-button--secondary {
50
+ .ts-button--primary:not(:disabled):hover {
51
+ background: #2e3998;
52
+ }
53
+ .ts-button--primary:not(:disabled):active {
54
+ background: #272f76;
55
+ }
56
+ .ts-button--primary:disabled {
57
+ background: #3643ba61;
58
+ color: #ffffff;
59
+ }
60
+ .ts-button--secondary:not(:disabled) {
51
61
  background: #ebecf7;
52
62
  color: #3643ba;
53
63
  }
54
- /* .ts-button--secondary:hover {
55
- background: #bedeef;
56
- } */
57
- .ts-button--success {
64
+ .ts-button--secondary:not(:disabled):hover {
65
+ background: #e3e3f4;
66
+ }
67
+ .ts-button--secondary:not(:disabled):active {
68
+ background: #d7daf1;
69
+ }
70
+ .ts-button--secondary:disabled {
71
+ background: #3643ba0d;
72
+ color: #3643ba80;
73
+ }
74
+ .ts-button--success:not(:disabled) {
58
75
  background: #02be8a;
59
76
  color: #ffffff;
60
77
  }
61
- .ts-button--success:hover {
78
+ .ts-button--success:not(:disabled):hover {
62
79
  background: #029e73;
80
+ }
81
+ .ts-button--success:not(:disabled):active {
82
+ background: #017f5c;
83
+ }
84
+ .ts-button--success:disabled {
85
+ background: #02be8a61;
63
86
  color: #ffffff;
64
87
  }
65
- .ts-button--ghost {
88
+ .ts-button--ghost:not(:disabled) {
66
89
  background: #ffffff;
67
90
  color: #1d1d1b;
68
91
  }
69
- .ts-button--ghost:hover {
70
- background: #ebecf7;
92
+ .ts-button--ghost:not(:disabled):hover {
93
+ background: #ebecf8;
94
+ }
95
+ .ts-button--ghost:not(:disabled):active {
96
+ background: #d7daf1;
97
+ }
98
+ .ts-button--ghost:disabled {
99
+ background: #ffffff61;
100
+ color: #1d1d1b61;
71
101
  }
72
102
  .ts-button--shadow {
73
103
  box-shadow: 0px 12px 12px 0px #00537d1a;
package/src/components/TsButton/TsButton.tsx CHANGED
@@ -12,7 +12,7 @@ export const TsButton = ({
12
12
  variant = 'primary',
13
13
  block,
14
14
  rounded,
15
- onClick,
15
+ ...props
16
16
  }: PropsWithChildren<TsButtonProps>) => {
17
17
  // #########
18
18
  // Rendering
@@ -24,7 +24,7 @@ export const TsButton = ({
24
24
  ${rounded ? 'ts-button--rounded' : ''}
25
25
  ${icon && !children ? 'ts-button--icon-only' : ''}
26
26
  `}
27
- onClick={onClick}
27
+ {...props}
28
28
  >
29
29
  {icon && iconDirection === 'left' && <TsIcon name={icon} size="16" />}
30
30
  {children && <div>{children}</div>}
package/src/components/TsButton/TsButton.types.ts CHANGED
@@ -1,3 +1,5 @@
1
+ import { ButtonHTMLAttributes } from 'react';
2
+
1
3
  export type TsButtonProps = {
2
4
  icon?: string;
3
5
  iconDirection?: 'left' | 'right';
@@ -5,5 +7,4 @@ export type TsButtonProps = {
5
7
  variant?: 'primary' | 'secondary' | 'success' | 'ghost' | 'shadow';
6
8
  block?: boolean;
7
9
  rounded?: boolean;
8
- onClick: () => void;
9
- };
10
+ } & ButtonHTMLAttributes<HTMLButtonElement>;
package/src/components/TsButton/__stories__/TsButton.stories.mdx CHANGED
@@ -38,6 +38,11 @@ export const buttonArgTypes = {
38
38
  description: 'Define if the button is full width',
39
39
  table: { defaultValue: { summary: 'false' } },
40
40
  },
41
+ disabled: {
42
+ control: 'boolean',
43
+ description: 'Define if the button is disabled',
44
+ table: { defaultValue: { summary: 'false' } },
45
+ },
41
46
  rounded: {
42
47
  control: 'boolean',
43
48
  description: 'Define if the button has its corner full rounded',
@@ -60,6 +65,7 @@ Buttons express what action will occur when the users clicks. Buttons are used t
60
65
  size: 'md',
61
66
  variant: 'primary',
62
67
  block: false,
68
+ disabled: false,
63
69
  rounded: false,
64
70
  onClick: () => {},
65
71
  }}