@beydesign/storybook 0.2.8 → 0.2.10
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/dist/stories/Form/TextInput.js +3 -3
- package/dist/stories/Form/TextInput.stories.d.ts +5 -0
- package/dist/stories/Form/TextInput.stories.js +20 -0
- package/dist/stories/UI/Badge.js +33 -27
- package/dist/stories/UI/types.d.ts +2 -1
- package/dist/stories/UI/types.js +1 -0
- package/package.json +1 -1
|
@@ -24,9 +24,9 @@ export const TextInput = ({ label, value, onChange, placeholder, type = 'text',
|
|
|
24
24
|
const iconColor = disabled
|
|
25
25
|
? 'var(--color-text-text-disabled)'
|
|
26
26
|
: 'var(--color-foreground-fg-secondary)';
|
|
27
|
-
return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', width: fullWidth ? '100%' : undefined, minWidth: fullWidth ? 0 : undefined, sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', width: fullWidth ? '100%' : undefined, minWidth: fullWidth ? 0 : '260px', children: [label && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: labelContainerStyle, children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, children: label }), labelTrailingElement] })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--color-background-bg-component)', border: errorText
|
|
27
|
+
return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', width: fullWidth ? '100%' : undefined, minWidth: fullWidth ? 0 : undefined, sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', width: fullWidth ? '100%' : undefined, minWidth: fullWidth ? 0 : '260px', children: [label && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: labelContainerStyle, children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, children: label }), labelTrailingElement] })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', height: '40px', bgcolor: 'var(--color-background-bg-component)', border: errorText
|
|
28
28
|
? 'none'
|
|
29
|
-
: '1px solid var(--color-border-border-component)', overflow: 'hidden', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs) 0 0 var(--spacing-tokens-size-in-px-spacing-spacing-xs)', border: `${errorText
|
|
29
|
+
: '1px solid var(--color-border-border-component)', overflow: 'hidden', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', sx: { boxSizing: 'border-box' }, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-lg)', height: '100%', width: '100%', sx: { boxSizing: 'border-box' }, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs) 0 0 var(--spacing-tokens-size-in-px-spacing-spacing-xs)', border: `${errorText
|
|
30
30
|
? '1px solid var(--color-border-border-error)'
|
|
31
31
|
: focused
|
|
32
32
|
? '1px solid var(--color-border-border-component-active)'
|
|
@@ -59,5 +59,5 @@ export const TextInput = ({ label, value, onChange, placeholder, type = 'text',
|
|
|
59
59
|
height: '20px',
|
|
60
60
|
color: iconColor,
|
|
61
61
|
'aria-hidden': 'true',
|
|
62
|
-
}) }))] }), trailingText && (_jsx(Box, { display: 'flex', alignItems: 'center', height: '100%', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', borderLeft: '1px solid var(--color-border-border-component)', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', children: trailingText }) }))] }), errorText && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-error)', children: errorText })), hintText && !errorText && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-subtle)', children: hintText }))] }) }));
|
|
62
|
+
}) }))] }), trailingText && (_jsx(Box, { display: 'flex', alignItems: 'center', height: '100%', padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-lg)', borderLeft: '1px solid var(--color-border-border-component)', sx: { boxSizing: 'border-box' }, children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', children: trailingText }) }))] }), errorText && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-error)', children: errorText })), hintText && !errorText && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-subtle)', children: hintText }))] }) }));
|
|
63
63
|
};
|
|
@@ -175,4 +175,9 @@ export declare const WithLeadingIcon: Story;
|
|
|
175
175
|
export declare const Password: Story;
|
|
176
176
|
export declare const PasswordWithoutToggle: Story;
|
|
177
177
|
export declare const Email: Story;
|
|
178
|
+
/**
|
|
179
|
+
* Search field next to a `MainButton` (size `md`), mirroring the API keys
|
|
180
|
+
* search row. Both controls are 40px tall, so their tops and bottoms align.
|
|
181
|
+
*/
|
|
182
|
+
export declare const SearchWithButton: Story;
|
|
178
183
|
export declare const SideBySideFullWidth: Story;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { TextInput } from './TextInput';
|
|
3
|
+
import { ButtonHierarchy, ButtonSize, ButtonType, MainButton, } from '../Buttons';
|
|
3
4
|
const meta = {
|
|
4
5
|
title: 'Design System/Components/Form/TextInput',
|
|
5
6
|
component: TextInput,
|
|
@@ -177,6 +178,25 @@ export const Email = {
|
|
|
177
178
|
hintBubbleText: 'This is a hint bubble',
|
|
178
179
|
},
|
|
179
180
|
};
|
|
181
|
+
/**
|
|
182
|
+
* Search field next to a `MainButton` (size `md`), mirroring the API keys
|
|
183
|
+
* search row. Both controls are 40px tall, so their tops and bottoms align.
|
|
184
|
+
*/
|
|
185
|
+
export const SearchWithButton = {
|
|
186
|
+
args: {
|
|
187
|
+
value: '',
|
|
188
|
+
placeholder: 'Search your API Keys',
|
|
189
|
+
leadingIcon: 'MagnifyingGlass',
|
|
190
|
+
fullWidth: true,
|
|
191
|
+
onChange: () => { },
|
|
192
|
+
},
|
|
193
|
+
render: (args) => (_jsxs("div", { style: {
|
|
194
|
+
display: 'flex',
|
|
195
|
+
alignItems: 'center',
|
|
196
|
+
gap: '12px',
|
|
197
|
+
width: '560px',
|
|
198
|
+
}, children: [_jsx("div", { style: { minWidth: 0, flex: 1 }, children: _jsx(TextInput, { ...args }) }), _jsx(MainButton, { text: "Create API Key", type: ButtonType.Button, hierarchy: ButtonHierarchy.PrimaryLemon, size: ButtonSize.md, onClick: () => { } })] })),
|
|
199
|
+
};
|
|
180
200
|
export const SideBySideFullWidth = {
|
|
181
201
|
args: {
|
|
182
202
|
label: 'First name',
|
package/dist/stories/UI/Badge.js
CHANGED
|
@@ -9,23 +9,25 @@ export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, c
|
|
|
9
9
|
case BadgeColor.Default:
|
|
10
10
|
return 'var(--color-background-bg-badge-accent-gray)';
|
|
11
11
|
case BadgeColor.Violet:
|
|
12
|
-
return 'var(--
|
|
12
|
+
return 'var(--color-background-bg-badge-accent-brand-violet)';
|
|
13
13
|
case BadgeColor.Lemon:
|
|
14
|
-
return 'var(--
|
|
14
|
+
return 'var(--color-background-bg-badge-accent-brand-lemon)';
|
|
15
15
|
case BadgeColor.Green:
|
|
16
|
-
return 'var(--
|
|
16
|
+
return 'var(--color-background-bg-badge-accent-success)';
|
|
17
17
|
case BadgeColor.Red:
|
|
18
|
-
return 'var(--
|
|
18
|
+
return 'var(--color-background-bg-badge-accent-red)';
|
|
19
19
|
case BadgeColor.Yellow:
|
|
20
|
-
return 'var(--
|
|
20
|
+
return 'var(--color-background-bg-badge-accent-yellow)';
|
|
21
21
|
case BadgeColor.Blue:
|
|
22
|
-
return 'var(--
|
|
22
|
+
return 'var(--color-background-bg-badge-accent-blue)';
|
|
23
23
|
case BadgeColor.Cyan:
|
|
24
|
-
return 'var(--
|
|
24
|
+
return 'var(--color-background-bg-badge-accent-cyan)';
|
|
25
25
|
case BadgeColor.Pink:
|
|
26
|
-
return 'var(--
|
|
26
|
+
return 'var(--color-background-bg-badge-accent-pink)';
|
|
27
27
|
case BadgeColor.DarkTransparent:
|
|
28
|
-
return
|
|
28
|
+
return 'var(--color-background-bg-badge-accent-transparent)';
|
|
29
|
+
case BadgeColor.Black:
|
|
30
|
+
return 'var(--color-background-bg-badge-accent-black)';
|
|
29
31
|
}
|
|
30
32
|
};
|
|
31
33
|
const getTextColor = () => {
|
|
@@ -33,47 +35,51 @@ export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, c
|
|
|
33
35
|
case BadgeColor.Default:
|
|
34
36
|
return 'var(--color-text-text-title)';
|
|
35
37
|
case BadgeColor.Violet:
|
|
36
|
-
return 'var(--
|
|
38
|
+
return 'var(--color-text-text-violet-on-color)';
|
|
37
39
|
case BadgeColor.Lemon:
|
|
38
|
-
return 'var(--
|
|
40
|
+
return 'var(--color-text-text-lemon-on-color)';
|
|
39
41
|
case BadgeColor.Green:
|
|
40
|
-
return 'var(--
|
|
42
|
+
return 'var(--color-text-text-success-on-color)';
|
|
41
43
|
case BadgeColor.Red:
|
|
42
|
-
return 'var(--
|
|
44
|
+
return 'var(--color-text-text-red-on-color)';
|
|
43
45
|
case BadgeColor.Yellow:
|
|
44
|
-
return 'var(--
|
|
46
|
+
return 'var(--color-text-text-yellow-on-color)';
|
|
45
47
|
case BadgeColor.Blue:
|
|
46
|
-
return 'var(--
|
|
48
|
+
return 'var(--color-text-text-blue-on-color)';
|
|
47
49
|
case BadgeColor.Cyan:
|
|
48
|
-
return 'var(--
|
|
50
|
+
return 'var(--color-text-text-cyan-on-color)';
|
|
49
51
|
case BadgeColor.Pink:
|
|
50
|
-
return 'var(--
|
|
52
|
+
return 'var(--color-text-text-pink-on-color)';
|
|
51
53
|
case BadgeColor.DarkTransparent:
|
|
52
54
|
return 'var(--color-text-text-white)';
|
|
55
|
+
case BadgeColor.Black:
|
|
56
|
+
return 'var(--color-text-text-white)';
|
|
53
57
|
}
|
|
54
58
|
};
|
|
55
59
|
const getBorder = (color) => {
|
|
56
60
|
switch (color) {
|
|
57
61
|
case BadgeColor.Default:
|
|
58
|
-
return '1px solid var(--
|
|
62
|
+
return '1px solid var(--color-border-border-component)';
|
|
59
63
|
case BadgeColor.Violet:
|
|
60
|
-
return '1px solid var(--
|
|
64
|
+
return '1px solid var(--color-border-border-badge-violet)';
|
|
61
65
|
case BadgeColor.Lemon:
|
|
62
|
-
return '1px solid var(--
|
|
66
|
+
return '1px solid var(--color-border-border-badge-lemon)';
|
|
63
67
|
case BadgeColor.Green:
|
|
64
|
-
return '1px solid var(--
|
|
68
|
+
return '1px solid var(--color-border-border-badge-success)';
|
|
65
69
|
case BadgeColor.Red:
|
|
66
|
-
return '1px solid var(--
|
|
70
|
+
return '1px solid var(--color-border-border-badge-red)';
|
|
67
71
|
case BadgeColor.Yellow:
|
|
68
|
-
return '1px solid var(--
|
|
72
|
+
return '1px solid var(--color-border-border-badge-yellow)';
|
|
69
73
|
case BadgeColor.Blue:
|
|
70
|
-
return '1px solid var(--
|
|
74
|
+
return '1px solid var(--color-border-border-badge-blue)';
|
|
71
75
|
case BadgeColor.Cyan:
|
|
72
|
-
return '1px solid var(--
|
|
76
|
+
return '1px solid var(--color-border-border-badge-cyan)';
|
|
73
77
|
case BadgeColor.Pink:
|
|
74
|
-
return '1px solid var(--
|
|
78
|
+
return '1px solid var(--color-border-border-badge-pink)';
|
|
75
79
|
case BadgeColor.DarkTransparent:
|
|
76
|
-
return '1px solid rgba(
|
|
80
|
+
return '1px solid rgba(0, 0, 0, 0.2)';
|
|
81
|
+
case BadgeColor.Black:
|
|
82
|
+
return '1px solid rgba(0, 0, 0, 0.3)';
|
|
77
83
|
}
|
|
78
84
|
};
|
|
79
85
|
const getPadding = (size) => {
|
package/dist/stories/UI/types.js
CHANGED