@ornikar/bumper 2.8.1-canary.1769097215.7fc3e9ff2b0953e9a87e03c82c8c53bde5edda3a.0 → 2.9.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/CHANGELOG.md +2 -1
- package/dist/definitions/shared/storybook/helpers/argsHelpers.d.ts +8 -0
- package/dist/definitions/shared/storybook/helpers/argsHelpers.d.ts.map +1 -0
- package/dist/tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/shared/storybook/helpers/argsHelpers.ts +47 -0
- package/src/system/content/icon/Icon.stories.tsx +3 -22
- package/src/system/content/typography/Typography.stories.tsx +2 -22
- package/src/system/content/typography/TypographyIcon.stories.tsx +2 -19
- package/src/system/content/typography/TypographyLink.stories.tsx +2 -22
- package/src/system/core/primitives/Center.stories.tsx +5 -88
- package/src/system/core/primitives/Image/Image.stories.tsx +3 -8
- package/src/system/core/primitives/Pressable.stories.tsx +3 -52
- package/src/system/core/primitives/ScrollView/ScrollView.stories.tsx +2 -5
- package/src/system/core/primitives/Stack.stories.tsx +3 -38
- package/src/system/core/primitives/View.stories.tsx +6 -107
package/package.json
CHANGED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import type { ArgTypes } from '@storybook/react';
|
|
2
|
+
import {
|
|
3
|
+
SEMANTIC_TOKENS_BACKGROUND,
|
|
4
|
+
SEMANTIC_TOKENS_BORDER,
|
|
5
|
+
SEMANTIC_TOKENS_CONTENT,
|
|
6
|
+
} from '../../../system/core/themes/themes';
|
|
7
|
+
import { radiusTokens } from '../../../system/core/tokens/radius';
|
|
8
|
+
import { sizeTokens } from '../../../system/core/tokens/size';
|
|
9
|
+
import { spaceTokens } from '../../../system/core/tokens/space';
|
|
10
|
+
|
|
11
|
+
const getTokenKey = (name: string) => `$${name}`;
|
|
12
|
+
|
|
13
|
+
export const backgroundColorArgType: ArgTypes[string] = {
|
|
14
|
+
control: 'select',
|
|
15
|
+
options: SEMANTIC_TOKENS_BACKGROUND.map(getTokenKey),
|
|
16
|
+
description: 'Background color (semantic theme token)',
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
export const spaceArgType: ArgTypes[string] = {
|
|
20
|
+
control: 'select',
|
|
21
|
+
options: Object.keys(spaceTokens).map(getTokenKey),
|
|
22
|
+
description: 'Space value (space token)',
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export const sizeArgType: ArgTypes[string] = {
|
|
26
|
+
control: 'select',
|
|
27
|
+
options: Object.keys(sizeTokens).map(getTokenKey),
|
|
28
|
+
description: 'Size value (size token)',
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
export const radiusArgType: ArgTypes[string] = {
|
|
32
|
+
control: 'select',
|
|
33
|
+
options: Object.keys(radiusTokens).map(getTokenKey),
|
|
34
|
+
description: 'Border radius (radius token)',
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
export const contentColorArgType: ArgTypes[string] = {
|
|
38
|
+
control: 'select',
|
|
39
|
+
options: SEMANTIC_TOKENS_CONTENT.map(getTokenKey),
|
|
40
|
+
description: 'Content color (semantic theme token)',
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
export const borderColorArgType: ArgTypes[string] = {
|
|
44
|
+
control: 'select',
|
|
45
|
+
options: SEMANTIC_TOKENS_BORDER.map(getTokenKey),
|
|
46
|
+
description: 'Border color (semantic theme token)',
|
|
47
|
+
};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { StarRegularIcon } from '@ornikar/kitt-icons/phosphor';
|
|
2
2
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
3
|
+
import { contentColorArgType, sizeArgType } from '../../../shared/storybook/helpers/argsHelpers';
|
|
3
4
|
import { Icon } from './Icon';
|
|
4
5
|
|
|
5
6
|
const meta: Meta<typeof Icon> = {
|
|
@@ -7,28 +8,8 @@ const meta: Meta<typeof Icon> = {
|
|
|
7
8
|
component: Icon,
|
|
8
9
|
tags: ['autodocs'],
|
|
9
10
|
argTypes: {
|
|
10
|
-
size:
|
|
11
|
-
|
|
12
|
-
options: ['$size.16', '$size.20', '$size.24', '$size.32', '$size.48', '$size.64', '$size.80', '$size.96'],
|
|
13
|
-
description: 'Icon size (uses size tokens)',
|
|
14
|
-
},
|
|
15
|
-
color: {
|
|
16
|
-
control: 'select',
|
|
17
|
-
options: [
|
|
18
|
-
'$content.base.low',
|
|
19
|
-
'$content.base.mid',
|
|
20
|
-
'$content.base.hi',
|
|
21
|
-
'$content.accent',
|
|
22
|
-
'$content.promo',
|
|
23
|
-
'$content.info',
|
|
24
|
-
'$content.success',
|
|
25
|
-
'$content.warning',
|
|
26
|
-
'$content.danger',
|
|
27
|
-
'$content.muted',
|
|
28
|
-
'$content.disabled',
|
|
29
|
-
],
|
|
30
|
-
description: 'Icon color (semantic theme token)',
|
|
31
|
-
},
|
|
11
|
+
size: sizeArgType,
|
|
12
|
+
color: contentColorArgType,
|
|
32
13
|
},
|
|
33
14
|
};
|
|
34
15
|
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { contentColorArgType } from '../../../shared/storybook/helpers/argsHelpers';
|
|
2
3
|
import { Typography } from '.';
|
|
3
4
|
|
|
4
5
|
const meta: Meta<typeof Typography.Text> = {
|
|
@@ -40,28 +41,7 @@ const meta: Meta<typeof Typography.Text> = {
|
|
|
40
41
|
options: ['regular', 'semibold', 'bold'],
|
|
41
42
|
description: 'Font weight (note: heading/label/content-caps variants have fixed weights)',
|
|
42
43
|
},
|
|
43
|
-
color:
|
|
44
|
-
control: 'select',
|
|
45
|
-
options: [
|
|
46
|
-
'$content.base.low',
|
|
47
|
-
'$content.base.mid',
|
|
48
|
-
'$content.base.hi',
|
|
49
|
-
'$content.base.onContrasted.low',
|
|
50
|
-
'$content.base.onContrasted.mid',
|
|
51
|
-
'$content.base.onContrasted.hi',
|
|
52
|
-
'$content.accent',
|
|
53
|
-
'$content.promo',
|
|
54
|
-
'$content.promo.onContrasted',
|
|
55
|
-
'$content.info',
|
|
56
|
-
'$content.success',
|
|
57
|
-
'$content.warning',
|
|
58
|
-
'$content.danger',
|
|
59
|
-
'$content.muted',
|
|
60
|
-
'$content.disabled',
|
|
61
|
-
'$content.disabled.onContrasted',
|
|
62
|
-
],
|
|
63
|
-
description: 'Text color (semantic theme token)',
|
|
64
|
-
},
|
|
44
|
+
color: contentColorArgType,
|
|
65
45
|
},
|
|
66
46
|
};
|
|
67
47
|
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { StarRegularIcon } from '@ornikar/kitt-icons/phosphor';
|
|
2
2
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
3
|
+
import { contentColorArgType } from '../../../shared/storybook/helpers/argsHelpers';
|
|
3
4
|
import { TypographyIcon } from './TypographyIcon';
|
|
4
5
|
|
|
5
6
|
const meta: Meta<typeof TypographyIcon> = {
|
|
@@ -17,25 +18,7 @@ const meta: Meta<typeof TypographyIcon> = {
|
|
|
17
18
|
description: 'Icon size (uses size tokens)',
|
|
18
19
|
},
|
|
19
20
|
color: {
|
|
20
|
-
|
|
21
|
-
options: [
|
|
22
|
-
'$content.base.low',
|
|
23
|
-
'$content.base.mid',
|
|
24
|
-
'$content.base.hi',
|
|
25
|
-
'$content.base.onContrasted.low',
|
|
26
|
-
'$content.base.onContrasted.mid',
|
|
27
|
-
'$content.base.onContrasted.hi',
|
|
28
|
-
'$content.accent',
|
|
29
|
-
'$content.promo',
|
|
30
|
-
'$content.promo.onContrasted',
|
|
31
|
-
'$content.info',
|
|
32
|
-
'$content.success',
|
|
33
|
-
'$content.warning',
|
|
34
|
-
'$content.danger',
|
|
35
|
-
'$content.muted',
|
|
36
|
-
'$content.disabled',
|
|
37
|
-
'$content.disabled.onContrasted',
|
|
38
|
-
],
|
|
21
|
+
...contentColorArgType,
|
|
39
22
|
description: 'Icon color (semantic theme token). When omitted, inherits from parent Typography context.',
|
|
40
23
|
},
|
|
41
24
|
},
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { contentColorArgType } from '../../../shared/storybook/helpers/argsHelpers';
|
|
2
3
|
import { TypographyLink } from './TypographyLink';
|
|
3
4
|
|
|
4
5
|
const meta: Meta<typeof TypographyLink> = {
|
|
@@ -40,28 +41,7 @@ const meta: Meta<typeof TypographyLink> = {
|
|
|
40
41
|
options: ['regular', 'semibold', 'bold'],
|
|
41
42
|
description: 'Font weight (inherited from Typography.Text)',
|
|
42
43
|
},
|
|
43
|
-
color:
|
|
44
|
-
control: 'select',
|
|
45
|
-
options: [
|
|
46
|
-
'$content.base.low',
|
|
47
|
-
'$content.base.mid',
|
|
48
|
-
'$content.base.hi',
|
|
49
|
-
'$content.base.onContrasted.low',
|
|
50
|
-
'$content.base.onContrasted.mid',
|
|
51
|
-
'$content.base.onContrasted.hi',
|
|
52
|
-
'$content.accent',
|
|
53
|
-
'$content.promo',
|
|
54
|
-
'$content.promo.onContrasted',
|
|
55
|
-
'$content.info',
|
|
56
|
-
'$content.success',
|
|
57
|
-
'$content.warning',
|
|
58
|
-
'$content.danger',
|
|
59
|
-
'$content.muted',
|
|
60
|
-
'$content.disabled',
|
|
61
|
-
'$content.disabled.onContrasted',
|
|
62
|
-
],
|
|
63
|
-
description: 'Text color (semantic theme token)',
|
|
64
|
-
},
|
|
44
|
+
color: contentColorArgType,
|
|
65
45
|
disabled: {
|
|
66
46
|
control: 'boolean',
|
|
67
47
|
description: 'When true, shows not-allowed cursor and disabled color',
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { backgroundColorArgType, sizeArgType, spaceArgType } from '../../../shared/storybook/helpers/argsHelpers';
|
|
2
3
|
import { Typography } from '../../content/typography';
|
|
3
4
|
import { Center } from './Center';
|
|
4
5
|
|
|
@@ -7,94 +8,10 @@ const meta: Meta<typeof Center> = {
|
|
|
7
8
|
component: Center,
|
|
8
9
|
tags: ['autodocs'],
|
|
9
10
|
argTypes: {
|
|
10
|
-
backgroundColor:
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
'$bg.base.low.pressed',
|
|
15
|
-
'$bg.base.mid.default',
|
|
16
|
-
'$bg.base.mid.pressed',
|
|
17
|
-
'$bg.base.hi.default',
|
|
18
|
-
'$bg.base.hi.pressed',
|
|
19
|
-
'$bg.accent.default',
|
|
20
|
-
'$bg.accent.pressed',
|
|
21
|
-
'$bg.promo.mid.default',
|
|
22
|
-
'$bg.promo.mid.pressed',
|
|
23
|
-
'$bg.promo.hi.default',
|
|
24
|
-
'$bg.promo.hi.pressed',
|
|
25
|
-
'$bg.highlight.mid.default',
|
|
26
|
-
'$bg.highlight.mid.pressed',
|
|
27
|
-
'$bg.highlight.hi.default',
|
|
28
|
-
'$bg.highlight.hi.pressed',
|
|
29
|
-
'$bg.info.mid',
|
|
30
|
-
'$bg.info.hi',
|
|
31
|
-
'$bg.success.mid',
|
|
32
|
-
'$bg.success.hi',
|
|
33
|
-
'$bg.warning.mid',
|
|
34
|
-
'$bg.warning.hi',
|
|
35
|
-
'$bg.danger.mid',
|
|
36
|
-
'$bg.danger.hi',
|
|
37
|
-
'$bg.disabled.mid',
|
|
38
|
-
'$bg.disabled.hi',
|
|
39
|
-
'$bg.overlay',
|
|
40
|
-
],
|
|
41
|
-
description: 'Background color (semantic theme token)',
|
|
42
|
-
},
|
|
43
|
-
padding: {
|
|
44
|
-
control: 'select',
|
|
45
|
-
options: [
|
|
46
|
-
'$space.none',
|
|
47
|
-
'$space.2',
|
|
48
|
-
'$space.4',
|
|
49
|
-
'$space.8',
|
|
50
|
-
'$space.12',
|
|
51
|
-
'$space.16',
|
|
52
|
-
'$space.24',
|
|
53
|
-
'$space.32',
|
|
54
|
-
'$space.40',
|
|
55
|
-
'$space.48',
|
|
56
|
-
'$space.56',
|
|
57
|
-
'$space.64',
|
|
58
|
-
'$space.80',
|
|
59
|
-
],
|
|
60
|
-
description: 'Padding (space token)',
|
|
61
|
-
},
|
|
62
|
-
width: {
|
|
63
|
-
control: 'select',
|
|
64
|
-
options: [
|
|
65
|
-
'$size.16',
|
|
66
|
-
'$size.20',
|
|
67
|
-
'$size.24',
|
|
68
|
-
'$size.32',
|
|
69
|
-
'$size.48',
|
|
70
|
-
'$size.64',
|
|
71
|
-
'$size.80',
|
|
72
|
-
'$size.96',
|
|
73
|
-
'$size.120',
|
|
74
|
-
'$size.144',
|
|
75
|
-
'$size.176',
|
|
76
|
-
'$size.208',
|
|
77
|
-
],
|
|
78
|
-
description: 'Width (size token)',
|
|
79
|
-
},
|
|
80
|
-
height: {
|
|
81
|
-
control: 'select',
|
|
82
|
-
options: [
|
|
83
|
-
'$size.16',
|
|
84
|
-
'$size.20',
|
|
85
|
-
'$size.24',
|
|
86
|
-
'$size.32',
|
|
87
|
-
'$size.48',
|
|
88
|
-
'$size.64',
|
|
89
|
-
'$size.80',
|
|
90
|
-
'$size.96',
|
|
91
|
-
'$size.120',
|
|
92
|
-
'$size.144',
|
|
93
|
-
'$size.176',
|
|
94
|
-
'$size.208',
|
|
95
|
-
],
|
|
96
|
-
description: 'Height (size token)',
|
|
97
|
-
},
|
|
11
|
+
backgroundColor: backgroundColorArgType,
|
|
12
|
+
padding: spaceArgType,
|
|
13
|
+
width: sizeArgType,
|
|
14
|
+
height: sizeArgType,
|
|
98
15
|
},
|
|
99
16
|
};
|
|
100
17
|
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { sizeArgType } from '../../../../shared/storybook/helpers/argsHelpers';
|
|
2
3
|
import { Image } from './Image';
|
|
3
4
|
|
|
4
5
|
const meta: Meta<typeof Image> = {
|
|
@@ -9,14 +10,8 @@ const meta: Meta<typeof Image> = {
|
|
|
9
10
|
source: {
|
|
10
11
|
table: { disable: true },
|
|
11
12
|
},
|
|
12
|
-
width:
|
|
13
|
-
|
|
14
|
-
options: ['$size.48', '$size.64', '$size.96', '$size.120', '$size.144'],
|
|
15
|
-
},
|
|
16
|
-
height: {
|
|
17
|
-
control: 'select',
|
|
18
|
-
options: ['$size.48', '$size.64', '$size.96', '$size.120', '$size.144'],
|
|
19
|
-
},
|
|
13
|
+
width: sizeArgType,
|
|
14
|
+
height: sizeArgType,
|
|
20
15
|
resizeMode: {
|
|
21
16
|
control: 'select',
|
|
22
17
|
options: ['cover', 'contain', 'stretch', 'center'],
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { backgroundColorArgType, spaceArgType } from '../../../shared/storybook/helpers/argsHelpers';
|
|
2
3
|
import { Typography } from '../../content/typography';
|
|
3
4
|
import { Pressable } from './Pressable';
|
|
4
5
|
|
|
@@ -7,58 +8,8 @@ const meta: Meta<typeof Pressable> = {
|
|
|
7
8
|
component: Pressable,
|
|
8
9
|
tags: ['autodocs'],
|
|
9
10
|
argTypes: {
|
|
10
|
-
backgroundColor:
|
|
11
|
-
|
|
12
|
-
options: [
|
|
13
|
-
'$bg.base.low.default',
|
|
14
|
-
'$bg.base.low.pressed',
|
|
15
|
-
'$bg.base.mid.default',
|
|
16
|
-
'$bg.base.mid.pressed',
|
|
17
|
-
'$bg.base.hi.default',
|
|
18
|
-
'$bg.base.hi.pressed',
|
|
19
|
-
'$bg.accent.default',
|
|
20
|
-
'$bg.accent.pressed',
|
|
21
|
-
'$bg.promo.mid.default',
|
|
22
|
-
'$bg.promo.mid.pressed',
|
|
23
|
-
'$bg.promo.hi.default',
|
|
24
|
-
'$bg.promo.hi.pressed',
|
|
25
|
-
'$bg.highlight.mid.default',
|
|
26
|
-
'$bg.highlight.mid.pressed',
|
|
27
|
-
'$bg.highlight.hi.default',
|
|
28
|
-
'$bg.highlight.hi.pressed',
|
|
29
|
-
'$bg.info.mid',
|
|
30
|
-
'$bg.info.hi',
|
|
31
|
-
'$bg.success.mid',
|
|
32
|
-
'$bg.success.hi',
|
|
33
|
-
'$bg.warning.mid',
|
|
34
|
-
'$bg.warning.hi',
|
|
35
|
-
'$bg.danger.mid',
|
|
36
|
-
'$bg.danger.hi',
|
|
37
|
-
'$bg.disabled.mid',
|
|
38
|
-
'$bg.disabled.hi',
|
|
39
|
-
'$bg.overlay',
|
|
40
|
-
],
|
|
41
|
-
description: 'Background color (semantic theme token)',
|
|
42
|
-
},
|
|
43
|
-
padding: {
|
|
44
|
-
control: 'select',
|
|
45
|
-
options: [
|
|
46
|
-
'$space.none',
|
|
47
|
-
'$space.2',
|
|
48
|
-
'$space.4',
|
|
49
|
-
'$space.8',
|
|
50
|
-
'$space.12',
|
|
51
|
-
'$space.16',
|
|
52
|
-
'$space.24',
|
|
53
|
-
'$space.32',
|
|
54
|
-
'$space.40',
|
|
55
|
-
'$space.48',
|
|
56
|
-
'$space.56',
|
|
57
|
-
'$space.64',
|
|
58
|
-
'$space.80',
|
|
59
|
-
],
|
|
60
|
-
description: 'Padding (space token)',
|
|
61
|
-
},
|
|
11
|
+
backgroundColor: backgroundColorArgType,
|
|
12
|
+
padding: spaceArgType,
|
|
62
13
|
pressStyle: {
|
|
63
14
|
control: 'object',
|
|
64
15
|
description: 'Styles to apply on press',
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { sizeArgType } from '../../../../shared/storybook/helpers/argsHelpers';
|
|
2
3
|
import { Typography } from '../../../content/typography';
|
|
3
4
|
import { View } from '../View';
|
|
4
5
|
import { ScrollView } from './ScrollView';
|
|
@@ -24,11 +25,7 @@ const meta: Meta<typeof ScrollView> = {
|
|
|
24
25
|
control: 'boolean',
|
|
25
26
|
description: 'When true, shows a horizontal scroll indicator',
|
|
26
27
|
},
|
|
27
|
-
height:
|
|
28
|
-
control: 'select',
|
|
29
|
-
options: ['$size.96', '$size.120', '$size.144', '$size.176', '$size.208'],
|
|
30
|
-
description: 'Height of the scroll view (size token)',
|
|
31
|
-
},
|
|
28
|
+
height: sizeArgType,
|
|
32
29
|
width: {
|
|
33
30
|
control: 'select',
|
|
34
31
|
options: ['$size.176', '$size.208', '100%'],
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { spaceArgType } from '../../../shared/storybook/helpers/argsHelpers';
|
|
2
3
|
import { Typography } from '../../content/typography';
|
|
3
4
|
import { Stack } from './Stack';
|
|
4
5
|
import { View } from './View';
|
|
@@ -13,44 +14,8 @@ const meta: Meta<typeof Stack> = {
|
|
|
13
14
|
options: ['row', 'column', 'row-reverse', 'column-reverse'],
|
|
14
15
|
description: 'Flex direction',
|
|
15
16
|
},
|
|
16
|
-
gap:
|
|
17
|
-
|
|
18
|
-
options: [
|
|
19
|
-
'$space.none',
|
|
20
|
-
'$space.2',
|
|
21
|
-
'$space.4',
|
|
22
|
-
'$space.8',
|
|
23
|
-
'$space.12',
|
|
24
|
-
'$space.16',
|
|
25
|
-
'$space.24',
|
|
26
|
-
'$space.32',
|
|
27
|
-
'$space.40',
|
|
28
|
-
'$space.48',
|
|
29
|
-
'$space.56',
|
|
30
|
-
'$space.64',
|
|
31
|
-
'$space.80',
|
|
32
|
-
],
|
|
33
|
-
description: 'Gap between items (space token)',
|
|
34
|
-
},
|
|
35
|
-
padding: {
|
|
36
|
-
control: 'select',
|
|
37
|
-
options: [
|
|
38
|
-
'$space.none',
|
|
39
|
-
'$space.2',
|
|
40
|
-
'$space.4',
|
|
41
|
-
'$space.8',
|
|
42
|
-
'$space.12',
|
|
43
|
-
'$space.16',
|
|
44
|
-
'$space.24',
|
|
45
|
-
'$space.32',
|
|
46
|
-
'$space.40',
|
|
47
|
-
'$space.48',
|
|
48
|
-
'$space.56',
|
|
49
|
-
'$space.64',
|
|
50
|
-
'$space.80',
|
|
51
|
-
],
|
|
52
|
-
description: 'Padding (space token)',
|
|
53
|
-
},
|
|
17
|
+
gap: spaceArgType,
|
|
18
|
+
padding: spaceArgType,
|
|
54
19
|
},
|
|
55
20
|
};
|
|
56
21
|
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { backgroundColorArgType, sizeArgType, spaceArgType } from '../../../shared/storybook/helpers/argsHelpers';
|
|
2
3
|
import { View } from './View';
|
|
3
4
|
|
|
4
5
|
const meta: Meta<typeof View> = {
|
|
@@ -6,113 +7,11 @@ const meta: Meta<typeof View> = {
|
|
|
6
7
|
component: View,
|
|
7
8
|
tags: ['autodocs'],
|
|
8
9
|
argTypes: {
|
|
9
|
-
backgroundColor:
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
'$bg.base.mid.default',
|
|
15
|
-
'$bg.base.mid.pressed',
|
|
16
|
-
'$bg.base.hi.default',
|
|
17
|
-
'$bg.base.hi.pressed',
|
|
18
|
-
'$bg.accent.default',
|
|
19
|
-
'$bg.accent.pressed',
|
|
20
|
-
'$bg.promo.mid.default',
|
|
21
|
-
'$bg.promo.mid.pressed',
|
|
22
|
-
'$bg.promo.hi.default',
|
|
23
|
-
'$bg.promo.hi.pressed',
|
|
24
|
-
'$bg.highlight.mid.default',
|
|
25
|
-
'$bg.highlight.mid.pressed',
|
|
26
|
-
'$bg.highlight.hi.default',
|
|
27
|
-
'$bg.highlight.hi.pressed',
|
|
28
|
-
'$bg.info.mid',
|
|
29
|
-
'$bg.info.hi',
|
|
30
|
-
'$bg.success.mid',
|
|
31
|
-
'$bg.success.hi',
|
|
32
|
-
'$bg.warning.mid',
|
|
33
|
-
'$bg.warning.hi',
|
|
34
|
-
'$bg.danger.mid',
|
|
35
|
-
'$bg.danger.hi',
|
|
36
|
-
'$bg.disabled.mid',
|
|
37
|
-
'$bg.disabled.hi',
|
|
38
|
-
'$bg.overlay',
|
|
39
|
-
],
|
|
40
|
-
description: 'Background color (semantic theme token)',
|
|
41
|
-
},
|
|
42
|
-
padding: {
|
|
43
|
-
control: 'select',
|
|
44
|
-
options: [
|
|
45
|
-
'$space.none',
|
|
46
|
-
'$space.2',
|
|
47
|
-
'$space.4',
|
|
48
|
-
'$space.8',
|
|
49
|
-
'$space.12',
|
|
50
|
-
'$space.16',
|
|
51
|
-
'$space.24',
|
|
52
|
-
'$space.32',
|
|
53
|
-
'$space.40',
|
|
54
|
-
'$space.48',
|
|
55
|
-
'$space.56',
|
|
56
|
-
'$space.64',
|
|
57
|
-
'$space.80',
|
|
58
|
-
],
|
|
59
|
-
description: 'Padding (space token)',
|
|
60
|
-
},
|
|
61
|
-
margin: {
|
|
62
|
-
control: 'select',
|
|
63
|
-
options: [
|
|
64
|
-
'$space.none',
|
|
65
|
-
'$space.2',
|
|
66
|
-
'$space.4',
|
|
67
|
-
'$space.8',
|
|
68
|
-
'$space.12',
|
|
69
|
-
'$space.16',
|
|
70
|
-
'$space.24',
|
|
71
|
-
'$space.32',
|
|
72
|
-
'$space.40',
|
|
73
|
-
'$space.48',
|
|
74
|
-
'$space.56',
|
|
75
|
-
'$space.64',
|
|
76
|
-
'$space.80',
|
|
77
|
-
],
|
|
78
|
-
description: 'Margin (space token)',
|
|
79
|
-
},
|
|
80
|
-
width: {
|
|
81
|
-
control: 'select',
|
|
82
|
-
options: [
|
|
83
|
-
'$size.16',
|
|
84
|
-
'$size.20',
|
|
85
|
-
'$size.24',
|
|
86
|
-
'$size.32',
|
|
87
|
-
'$size.48',
|
|
88
|
-
'$size.64',
|
|
89
|
-
'$size.80',
|
|
90
|
-
'$size.96',
|
|
91
|
-
'$size.120',
|
|
92
|
-
'$size.144',
|
|
93
|
-
'$size.176',
|
|
94
|
-
'$size.208',
|
|
95
|
-
],
|
|
96
|
-
description: 'Width (size token)',
|
|
97
|
-
},
|
|
98
|
-
height: {
|
|
99
|
-
control: 'select',
|
|
100
|
-
options: [
|
|
101
|
-
'$size.16',
|
|
102
|
-
'$size.20',
|
|
103
|
-
'$size.24',
|
|
104
|
-
'$size.32',
|
|
105
|
-
'$size.48',
|
|
106
|
-
'$size.64',
|
|
107
|
-
'$size.80',
|
|
108
|
-
'$size.96',
|
|
109
|
-
'$size.120',
|
|
110
|
-
'$size.144',
|
|
111
|
-
'$size.176',
|
|
112
|
-
'$size.208',
|
|
113
|
-
],
|
|
114
|
-
description: 'Height (size token)',
|
|
115
|
-
},
|
|
10
|
+
backgroundColor: backgroundColorArgType,
|
|
11
|
+
padding: spaceArgType,
|
|
12
|
+
margin: spaceArgType,
|
|
13
|
+
width: sizeArgType,
|
|
14
|
+
height: sizeArgType,
|
|
116
15
|
},
|
|
117
16
|
};
|
|
118
17
|
|