@ornikar/bumper 2.8.1-canary.1769087114.a46790da1b5b6361954b6ad25766074d3ed69784.0 → 2.8.1-canary.1769097215.7fc3e9ff2b0953e9a87e03c82c8c53bde5edda3a.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 +1 -2
- package/dist/tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/system/content/icon/Icon.stories.tsx +22 -3
- package/src/system/content/typography/Typography.stories.tsx +22 -2
- package/src/system/content/typography/TypographyIcon.stories.tsx +19 -2
- package/src/system/content/typography/TypographyLink.stories.tsx +22 -2
- package/src/system/core/primitives/Center.stories.tsx +88 -5
- package/src/system/core/primitives/Image/Image.stories.tsx +8 -3
- package/src/system/core/primitives/Pressable.stories.tsx +52 -3
- package/src/system/core/primitives/ScrollView/ScrollView.stories.tsx +5 -2
- package/src/system/core/primitives/Stack.stories.tsx +38 -3
- package/src/system/core/primitives/View.stories.tsx +107 -6
- package/dist/definitions/shared/storybook/helpers/argsHelpers.d.ts +0 -8
- package/dist/definitions/shared/storybook/helpers/argsHelpers.d.ts.map +0 -1
- package/src/shared/storybook/helpers/argsHelpers.ts +0 -47
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ornikar/bumper",
|
|
3
|
-
"version": "2.8.1-canary.
|
|
3
|
+
"version": "2.8.1-canary.1769097215.7fc3e9ff2b0953e9a87e03c82c8c53bde5edda3a.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"repository": {
|
|
6
6
|
"directory": "@ornikar/bumper",
|
|
@@ -1,6 +1,5 @@
|
|
|
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';
|
|
4
3
|
import { Icon } from './Icon';
|
|
5
4
|
|
|
6
5
|
const meta: Meta<typeof Icon> = {
|
|
@@ -8,8 +7,28 @@ const meta: Meta<typeof Icon> = {
|
|
|
8
7
|
component: Icon,
|
|
9
8
|
tags: ['autodocs'],
|
|
10
9
|
argTypes: {
|
|
11
|
-
size:
|
|
12
|
-
|
|
10
|
+
size: {
|
|
11
|
+
control: 'select',
|
|
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
|
+
},
|
|
13
32
|
},
|
|
14
33
|
};
|
|
15
34
|
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import { contentColorArgType } from '../../../shared/storybook/helpers/argsHelpers';
|
|
3
2
|
import { Typography } from '.';
|
|
4
3
|
|
|
5
4
|
const meta: Meta<typeof Typography.Text> = {
|
|
@@ -41,7 +40,28 @@ const meta: Meta<typeof Typography.Text> = {
|
|
|
41
40
|
options: ['regular', 'semibold', 'bold'],
|
|
42
41
|
description: 'Font weight (note: heading/label/content-caps variants have fixed weights)',
|
|
43
42
|
},
|
|
44
|
-
color:
|
|
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
|
+
},
|
|
45
65
|
},
|
|
46
66
|
};
|
|
47
67
|
|
|
@@ -1,6 +1,5 @@
|
|
|
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';
|
|
4
3
|
import { TypographyIcon } from './TypographyIcon';
|
|
5
4
|
|
|
6
5
|
const meta: Meta<typeof TypographyIcon> = {
|
|
@@ -18,7 +17,25 @@ const meta: Meta<typeof TypographyIcon> = {
|
|
|
18
17
|
description: 'Icon size (uses size tokens)',
|
|
19
18
|
},
|
|
20
19
|
color: {
|
|
21
|
-
|
|
20
|
+
control: 'select',
|
|
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
|
+
],
|
|
22
39
|
description: 'Icon color (semantic theme token). When omitted, inherits from parent Typography context.',
|
|
23
40
|
},
|
|
24
41
|
},
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import { contentColorArgType } from '../../../shared/storybook/helpers/argsHelpers';
|
|
3
2
|
import { TypographyLink } from './TypographyLink';
|
|
4
3
|
|
|
5
4
|
const meta: Meta<typeof TypographyLink> = {
|
|
@@ -41,7 +40,28 @@ const meta: Meta<typeof TypographyLink> = {
|
|
|
41
40
|
options: ['regular', 'semibold', 'bold'],
|
|
42
41
|
description: 'Font weight (inherited from Typography.Text)',
|
|
43
42
|
},
|
|
44
|
-
color:
|
|
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
|
+
},
|
|
45
65
|
disabled: {
|
|
46
66
|
control: 'boolean',
|
|
47
67
|
description: 'When true, shows not-allowed cursor and disabled color',
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import { backgroundColorArgType, sizeArgType, spaceArgType } from '../../../shared/storybook/helpers/argsHelpers';
|
|
3
2
|
import { Typography } from '../../content/typography';
|
|
4
3
|
import { Center } from './Center';
|
|
5
4
|
|
|
@@ -8,10 +7,94 @@ const meta: Meta<typeof Center> = {
|
|
|
8
7
|
component: Center,
|
|
9
8
|
tags: ['autodocs'],
|
|
10
9
|
argTypes: {
|
|
11
|
-
backgroundColor:
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
backgroundColor: {
|
|
11
|
+
control: 'select',
|
|
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
|
+
},
|
|
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
|
+
},
|
|
15
98
|
},
|
|
16
99
|
};
|
|
17
100
|
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import { sizeArgType } from '../../../../shared/storybook/helpers/argsHelpers';
|
|
3
2
|
import { Image } from './Image';
|
|
4
3
|
|
|
5
4
|
const meta: Meta<typeof Image> = {
|
|
@@ -10,8 +9,14 @@ const meta: Meta<typeof Image> = {
|
|
|
10
9
|
source: {
|
|
11
10
|
table: { disable: true },
|
|
12
11
|
},
|
|
13
|
-
width:
|
|
14
|
-
|
|
12
|
+
width: {
|
|
13
|
+
control: 'select',
|
|
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
|
+
},
|
|
15
20
|
resizeMode: {
|
|
16
21
|
control: 'select',
|
|
17
22
|
options: ['cover', 'contain', 'stretch', 'center'],
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import { backgroundColorArgType, spaceArgType } from '../../../shared/storybook/helpers/argsHelpers';
|
|
3
2
|
import { Typography } from '../../content/typography';
|
|
4
3
|
import { Pressable } from './Pressable';
|
|
5
4
|
|
|
@@ -8,8 +7,58 @@ const meta: Meta<typeof Pressable> = {
|
|
|
8
7
|
component: Pressable,
|
|
9
8
|
tags: ['autodocs'],
|
|
10
9
|
argTypes: {
|
|
11
|
-
backgroundColor:
|
|
12
|
-
|
|
10
|
+
backgroundColor: {
|
|
11
|
+
control: 'select',
|
|
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
|
+
},
|
|
13
62
|
pressStyle: {
|
|
14
63
|
control: 'object',
|
|
15
64
|
description: 'Styles to apply on press',
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import { sizeArgType } from '../../../../shared/storybook/helpers/argsHelpers';
|
|
3
2
|
import { Typography } from '../../../content/typography';
|
|
4
3
|
import { View } from '../View';
|
|
5
4
|
import { ScrollView } from './ScrollView';
|
|
@@ -25,7 +24,11 @@ const meta: Meta<typeof ScrollView> = {
|
|
|
25
24
|
control: 'boolean',
|
|
26
25
|
description: 'When true, shows a horizontal scroll indicator',
|
|
27
26
|
},
|
|
28
|
-
height:
|
|
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
|
+
},
|
|
29
32
|
width: {
|
|
30
33
|
control: 'select',
|
|
31
34
|
options: ['$size.176', '$size.208', '100%'],
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import { spaceArgType } from '../../../shared/storybook/helpers/argsHelpers';
|
|
3
2
|
import { Typography } from '../../content/typography';
|
|
4
3
|
import { Stack } from './Stack';
|
|
5
4
|
import { View } from './View';
|
|
@@ -14,8 +13,44 @@ const meta: Meta<typeof Stack> = {
|
|
|
14
13
|
options: ['row', 'column', 'row-reverse', 'column-reverse'],
|
|
15
14
|
description: 'Flex direction',
|
|
16
15
|
},
|
|
17
|
-
gap:
|
|
18
|
-
|
|
16
|
+
gap: {
|
|
17
|
+
control: 'select',
|
|
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
|
+
},
|
|
19
54
|
},
|
|
20
55
|
};
|
|
21
56
|
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import { backgroundColorArgType, sizeArgType, spaceArgType } from '../../../shared/storybook/helpers/argsHelpers';
|
|
3
2
|
import { View } from './View';
|
|
4
3
|
|
|
5
4
|
const meta: Meta<typeof View> = {
|
|
@@ -7,11 +6,113 @@ const meta: Meta<typeof View> = {
|
|
|
7
6
|
component: View,
|
|
8
7
|
tags: ['autodocs'],
|
|
9
8
|
argTypes: {
|
|
10
|
-
backgroundColor:
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
9
|
+
backgroundColor: {
|
|
10
|
+
control: 'select',
|
|
11
|
+
options: [
|
|
12
|
+
'$bg.base.low.default',
|
|
13
|
+
'$bg.base.low.pressed',
|
|
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
|
+
},
|
|
15
116
|
},
|
|
16
117
|
};
|
|
17
118
|
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { ArgTypes } from '@storybook/react';
|
|
2
|
-
export declare const backgroundColorArgType: ArgTypes[string];
|
|
3
|
-
export declare const spaceArgType: ArgTypes[string];
|
|
4
|
-
export declare const sizeArgType: ArgTypes[string];
|
|
5
|
-
export declare const radiusArgType: ArgTypes[string];
|
|
6
|
-
export declare const contentColorArgType: ArgTypes[string];
|
|
7
|
-
export declare const borderColorArgType: ArgTypes[string];
|
|
8
|
-
//# sourceMappingURL=argsHelpers.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"argsHelpers.d.ts","sourceRoot":"","sources":["../../../../../src/shared/storybook/helpers/argsHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAYjD,eAAO,MAAM,sBAAsB,EAAE,QAAQ,CAAC,MAAM,CAInD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,QAAQ,CAAC,MAAM,CAIzC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,QAAQ,CAAC,MAAM,CAIxC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,MAAM,CAI1C,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,QAAQ,CAAC,MAAM,CAIhD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAC,MAAM,CAI/C,CAAC"}
|
|
@@ -1,47 +0,0 @@
|
|
|
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
|
-
};
|