@vespiario-thailand/design-system 1.3.0 → 1.3.1

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 (7) hide show
  1. package/dist/components/generals/Button/Button.stories.d.ts +76 -15
  2. package/dist/components/generals/Button/index.d.ts +20 -9
  3. package/dist/custom-theme.cjs +2 -1
  4. package/dist/vespa-design-system.cjs +32 -32
  5. package/dist/vespa-design-system.js +701 -679
  6. package/dist/vespa-design-system.umd.cjs +34 -34
  7. package/package.json +14 -14
package/dist/components/generals/Button/Button.stories.d.ts CHANGED
@@ -2,7 +2,6 @@ import { type ButtonProps } from '.';
2
2
  declare const _default: {
3
3
  title: string;
4
4
  component: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
5
- parameters: {};
6
5
  argTypes: {
7
6
  children: {
8
7
  control: string;
@@ -25,12 +24,21 @@ declare const _default: {
25
24
  };
26
25
  };
27
26
  };
28
- bgColor: {
27
+ color: {
29
28
  control: string;
30
29
  description: string;
31
30
  options: string[];
32
31
  };
33
- bgShade: {
32
+ shade: {
33
+ control: string;
34
+ options: number[];
35
+ };
36
+ contentColor: {
37
+ control: string;
38
+ description: string;
39
+ options: string[];
40
+ };
41
+ contentShade: {
34
42
  control: string;
35
43
  options: number[];
36
44
  };
@@ -77,16 +85,48 @@ declare const _default: {
77
85
  };
78
86
  };
79
87
  export default _default;
80
- /** Simple button template */
81
- export declare const Default: {
88
+ /**
89
+ * <h4>Simple Primary button</h4>
90
+ * Can custom background color with prop `color` and `shade`<br/>
91
+ * Can custom text and icon color with `contentColor` and `contentShade`
92
+ */
93
+ export declare const Primary: {
82
94
  render: (args: ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
83
95
  args: {
96
+ variant: "primary";
84
97
  children: string;
85
98
  sizes: "medium";
86
99
  onlyIcon: false;
87
- variant: "primary";
88
- bgColor: undefined;
100
+ color: undefined;
101
+ shade: undefined;
102
+ contentColor: undefined;
103
+ contentShade: undefined;
104
+ isLoading: false;
105
+ disabled: false;
106
+ };
107
+ parameters: {
108
+ controls: {
109
+ exclude: string[];
110
+ };
111
+ };
112
+ };
113
+ /**
114
+ * <h4>Simple Secondary button</h4>
115
+ * Can custom text and icon color with `color` and `shade`
116
+ */
117
+ export declare const Secondary: {
118
+ render: (args: ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
119
+ args: {
120
+ variant: "secondary";
121
+ children: string;
122
+ sizes: "medium";
123
+ onlyIcon: false;
124
+ color: undefined;
125
+ shade: undefined;
126
+ contentColor: undefined;
127
+ contentShade: undefined;
89
128
  isLoading: false;
129
+ disabled: false;
90
130
  };
91
131
  parameters: {
92
132
  controls: {
@@ -94,16 +134,23 @@ export declare const Default: {
94
134
  };
95
135
  };
96
136
  };
97
- export declare const CustomBackgroundColor: {
137
+ /**
138
+ * <h4>Simple Outline button</h4>
139
+ * Can not custom background, text and icon color
140
+ */
141
+ export declare const Outline: {
98
142
  render: (args: ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
99
143
  args: {
100
- variant: undefined;
101
- bgColor: "blue";
102
- bgShade: 500;
144
+ variant: "outline";
103
145
  children: string;
104
146
  sizes: "medium";
105
147
  onlyIcon: false;
148
+ color: undefined;
149
+ shade: undefined;
150
+ contentColor: undefined;
151
+ contentShade: undefined;
106
152
  isLoading: false;
153
+ disabled: false;
107
154
  };
108
155
  parameters: {
109
156
  controls: {
@@ -111,7 +158,10 @@ export declare const CustomBackgroundColor: {
111
158
  };
112
159
  };
113
160
  };
114
- /** Simple button with icon template */
161
+ /**
162
+ * <h4>Simple button with icon template</h4>
163
+ * Can custom background text and icon up on button variants
164
+ */
115
165
  export declare const WithIcon: {
116
166
  render: (args: ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
117
167
  args: {
@@ -120,11 +170,18 @@ export declare const WithIcon: {
120
170
  sizes: "medium";
121
171
  onlyIcon: false;
122
172
  variant: "primary";
123
- bgColor: undefined;
173
+ color: undefined;
174
+ shade: undefined;
175
+ contentColor: undefined;
176
+ contentShade: undefined;
124
177
  isLoading: false;
178
+ disabled: false;
125
179
  };
126
180
  };
127
- /** Simple button only icon template */
181
+ /**
182
+ * <h4>Simple button only icon template</h4>
183
+ * Can custom background text and icon up on button variants
184
+ */
128
185
  export declare const OnlyIcon: {
129
186
  render: (args: ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
130
187
  args: {
@@ -134,7 +191,11 @@ export declare const OnlyIcon: {
134
191
  onlyIcon: true;
135
192
  sizes: "medium";
136
193
  variant: "primary";
137
- bgColor: undefined;
194
+ color: undefined;
195
+ shade: undefined;
196
+ contentColor: undefined;
197
+ contentShade: undefined;
138
198
  isLoading: false;
199
+ disabled: false;
139
200
  };
140
201
  };
package/dist/components/generals/Button/index.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  /** libs */
2
2
  import { ButtonHTMLAttributes } from 'react';
3
3
  /** types */
4
- import { SizeType, ButtonVariantType, IconListType, IconSizeType, ColorShadeType } from '../../../types';
4
+ import { SizeType, IconListType, IconSizeType } from '../../../types';
5
5
  type ButtonBackgroundColorType = 'blue' | 'green' | 'light-green' | 'yellow' | 'dark';
6
+ type ButtonBackgroundShadeType = 100 | 200 | 300 | 400 | 500 | 600 | 700;
6
7
  type CommonButtonType = ButtonHTMLAttributes<HTMLButtonElement> & {
7
8
  sizes?: SizeType;
8
9
  iconLeft?: IconListType;
@@ -17,15 +18,25 @@ type ConditionButtonIconType = {
17
18
  onlyIcon?: boolean;
18
19
  iconRight?: never;
19
20
  };
20
- type ConditionButtonVariantType = {
21
- bgColor?: ButtonBackgroundColorType;
22
- bgShade?: ColorShadeType;
23
- variant?: never;
21
+ type ConditionButtonColorsType = {
22
+ variant?: 'primary';
23
+ color?: ButtonBackgroundColorType;
24
+ shade?: ButtonBackgroundShadeType;
25
+ contentColor?: ButtonBackgroundColorType;
26
+ contentShade?: ButtonBackgroundShadeType;
24
27
  } | {
25
- variant?: ButtonVariantType;
26
- bgColor?: never;
27
- bgShade?: never;
28
+ variant?: 'secondary';
29
+ color?: ButtonBackgroundColorType;
30
+ shade?: ButtonBackgroundShadeType;
31
+ contentColor?: never;
32
+ contentShade?: never;
33
+ } | {
34
+ variant?: 'outline';
35
+ color?: never;
36
+ shade?: never;
37
+ contentColor?: never;
38
+ contentShade?: never;
28
39
  };
29
- export type ButtonProps = CommonButtonType & ConditionButtonVariantType & ConditionButtonIconType;
40
+ export type ButtonProps = CommonButtonType & ConditionButtonIconType & ConditionButtonColorsType;
30
41
  export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
31
42
  export {};
package/dist/custom-theme.cjs CHANGED
@@ -467,7 +467,8 @@ module.exports = {
467
467
  safelist: [
468
468
  {
469
469
  pattern:
470
- /bg-(blue|green|light-green|yellow|dark|light|shade-dark|shade-light)-(100|200|300|400|500|600|700|800|900)/,
470
+ /(bg|text)-(blue|green|light-green|yellow|dark|light|shade-dark|shade-light)-(100|200|300|400|500|600|700|800|900)/,
471
+ variants: ['hover', 'active', '[&:not(:disabled)]:hover', '[&:not(:disabled)]:active', 'disabled'],
471
472
  },
472
473
  ],
473
474
  }