@beydesign/storybook 0.0.87 → 0.0.88
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.
|
@@ -24,6 +24,10 @@ const StyledButton = styled.button `
|
|
|
24
24
|
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
25
25
|
return 'var(--colors-light-background-bg-button-disabled)';
|
|
26
26
|
return 'var(--colors-light-background-bg-brand)';
|
|
27
|
+
case ButtonHierarchy.PrimaryLemon:
|
|
28
|
+
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
29
|
+
return 'var(--colors-light-background-bg-element)';
|
|
30
|
+
return 'var(--primitives-desktop-primary-brand-lemon-400)';
|
|
27
31
|
case ButtonHierarchy.Secondary:
|
|
28
32
|
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
29
33
|
return 'var(--colors-light-background-bg-component-disabled)';
|
|
@@ -59,6 +63,10 @@ const StyledButton = styled.button `
|
|
|
59
63
|
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
60
64
|
return 'var(--colors-light-text-text-white)';
|
|
61
65
|
return 'var(--colors-light-text-text-white)';
|
|
66
|
+
case ButtonHierarchy.PrimaryLemon:
|
|
67
|
+
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
68
|
+
return 'var(--colors-light-text-text-subtle)';
|
|
69
|
+
return 'var(--colors-light-text-text-title)';
|
|
62
70
|
case ButtonHierarchy.Secondary:
|
|
63
71
|
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
64
72
|
return 'var(--colors-light-text-text-disabled)';
|
|
@@ -95,6 +103,10 @@ const StyledButton = styled.button `
|
|
|
95
103
|
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
96
104
|
return 'var(--colors-light-border-border-component)';
|
|
97
105
|
return 'var(--colors-light-background-bg-brand)';
|
|
106
|
+
case ButtonHierarchy.PrimaryLemon:
|
|
107
|
+
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
108
|
+
return 'var(--colors-light-border-border-component)';
|
|
109
|
+
return 'var(--primitives-desktop-primary-brand-lemon-400)';
|
|
98
110
|
case ButtonHierarchy.Secondary:
|
|
99
111
|
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
100
112
|
return 'var(--colors-light-border-border-component)';
|
|
@@ -141,6 +153,8 @@ const StyledButton = styled.button `
|
|
|
141
153
|
switch (props.$hierarchy) {
|
|
142
154
|
case ButtonHierarchy.Primary:
|
|
143
155
|
return 'var(--colors-light-background-bg-brand-hover)';
|
|
156
|
+
case ButtonHierarchy.PrimaryLemon:
|
|
157
|
+
return 'var(--primitives-desktop-primary-brand-lemon-500)';
|
|
144
158
|
case ButtonHierarchy.Secondary:
|
|
145
159
|
return 'var(--colors-light-background-bg-card-highlight-hover)';
|
|
146
160
|
case ButtonHierarchy.SecondaryColor:
|
|
@@ -162,6 +176,8 @@ const StyledButton = styled.button `
|
|
|
162
176
|
switch (props.$hierarchy) {
|
|
163
177
|
case ButtonHierarchy.Primary:
|
|
164
178
|
return 'var(--colors-light-background-bg-brand-hover)';
|
|
179
|
+
case ButtonHierarchy.PrimaryLemon:
|
|
180
|
+
return 'var(--primitives-desktop-primary-brand-lemon-500)';
|
|
165
181
|
case ButtonHierarchy.Secondary:
|
|
166
182
|
return 'var(--colors-light-background-bg-card-highlight-hover)';
|
|
167
183
|
case ButtonHierarchy.SecondaryColor:
|
|
@@ -4,6 +4,7 @@ declare const meta: Meta<typeof MainButton>;
|
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof MainButton>;
|
|
6
6
|
export declare const Primary: Story;
|
|
7
|
+
export declare const PrimaryLemon: Story;
|
|
7
8
|
export declare const Secondary: Story;
|
|
8
9
|
export declare const SecondaryColor: Story;
|
|
9
10
|
export declare const SecondaryTransparent: Story;
|
|
@@ -32,6 +32,7 @@ const meta = {
|
|
|
32
32
|
control: 'select',
|
|
33
33
|
options: [
|
|
34
34
|
'Primary',
|
|
35
|
+
'Primary-lemon',
|
|
35
36
|
'Secondary',
|
|
36
37
|
'Secondary-color',
|
|
37
38
|
'Secondary-transparent',
|
|
@@ -144,6 +145,12 @@ export const Primary = {
|
|
|
144
145
|
trailingIcon: 'Circle',
|
|
145
146
|
},
|
|
146
147
|
};
|
|
148
|
+
export const PrimaryLemon = {
|
|
149
|
+
args: {
|
|
150
|
+
...Primary.args,
|
|
151
|
+
hierarchy: ButtonHierarchy.PrimaryLemon,
|
|
152
|
+
},
|
|
153
|
+
};
|
|
147
154
|
export const Secondary = {
|
|
148
155
|
args: {
|
|
149
156
|
...Primary.args,
|
|
@@ -16,6 +16,7 @@ export var ButtonSize;
|
|
|
16
16
|
export var ButtonHierarchy;
|
|
17
17
|
(function (ButtonHierarchy) {
|
|
18
18
|
ButtonHierarchy["Primary"] = "Primary";
|
|
19
|
+
ButtonHierarchy["PrimaryLemon"] = "Primary-lemon";
|
|
19
20
|
ButtonHierarchy["Secondary"] = "Secondary";
|
|
20
21
|
ButtonHierarchy["SecondaryColor"] = "Secondary-color";
|
|
21
22
|
ButtonHierarchy["SecondaryTransparent"] = "Secondary-transparent";
|