@ornikar/bumper 2.10.0 → 2.12.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 +18 -0
- package/dist/definitions/system/content/icon/Icon.d.ts +2 -1
- package/dist/definitions/system/content/icon/Icon.d.ts.map +1 -1
- package/dist/definitions/system/core/tokens/bumperIcon.d.ts +8 -0
- package/dist/definitions/system/core/tokens/bumperIcon.d.ts.map +1 -0
- package/dist/definitions/tamagui.config.d.ts +5 -0
- package/dist/definitions/tamagui.config.d.ts.map +1 -1
- package/dist/index-metro.es.android.js +17 -12
- package/dist/index-metro.es.android.js.map +1 -1
- package/dist/index-metro.es.ios.js +17 -12
- package/dist/index-metro.es.ios.js.map +1 -1
- package/dist/index-node-22.22.cjs.js +16 -11
- package/dist/index-node-22.22.cjs.js.map +1 -1
- package/dist/index-node-22.22.cjs.web.js +16 -11
- package/dist/index-node-22.22.cjs.web.js.map +1 -1
- package/dist/index-node-22.22.es.mjs +17 -12
- package/dist/index-node-22.22.es.mjs.map +1 -1
- package/dist/index-node-22.22.es.web.mjs +17 -12
- package/dist/index-node-22.22.es.web.mjs.map +1 -1
- package/dist/index.es.js +16 -11
- package/dist/index.es.js.map +1 -1
- package/dist/index.es.web.js +16 -11
- package/dist/index.es.web.js.map +1 -1
- package/dist/tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/system/content/icon/Icon.features.stories.tsx +15 -38
- package/src/system/content/icon/Icon.stories.tsx +9 -5
- package/src/system/content/icon/Icon.tsx +7 -8
- package/src/system/content/icon/__snapshots__/Icon.features.stories.tsx.snap +5 -116
- package/src/system/content/icon/__snapshots_web__/Icon.features.stories.tsx.snap +16 -70
- package/src/system/content/icon/__snapshots_web__/Icon.stories.tsx.snap +1 -1
- package/src/system/content/typography/TypographyIcon.features.stories.tsx +19 -25
- package/src/system/content/typography/TypographyIcon.stories.tsx +5 -5
- package/src/system/content/typography/__snapshots__/TypographyIcon.features.stories.tsx.snap +7 -7
- package/src/system/content/typography/__snapshots_web__/TypographyIcon.features.stories.tsx.snap +22 -22
- package/src/system/content/typography/__snapshots_web__/TypographyIcon.stories.tsx.snap +1 -1
- package/src/system/core/tokens/__snapshots__/bumperIcon.stories.tsx.snap +249 -0
- package/src/system/core/tokens/__snapshots_web__/bumperIcon.stories.tsx.snap +120 -0
- package/src/system/core/tokens/bumperIcon.stories.tsx +39 -0
- package/src/system/core/tokens/bumperIcon.ts +10 -0
- package/src/tamagui.config.ts +2 -0
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
CheckCircleRegularIcon,
|
|
3
|
-
InfoRegularIcon,
|
|
4
|
-
StarRegularIcon,
|
|
5
|
-
WarningRegularIcon,
|
|
6
|
-
} from '@ornikar/kitt-icons/phosphor';
|
|
1
|
+
import { CheckCircleIcon, DangerIcon, InfoIcon, StarIcon } from '@ornikar/kitt-icons/ornicons';
|
|
7
2
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
8
3
|
import { HStack, VStack } from '../../core/primitives/Stack';
|
|
9
4
|
import { TypographyIcon } from './TypographyIcon';
|
|
@@ -21,25 +16,25 @@ export const WithExplicitColor: Story = {
|
|
|
21
16
|
render: () => (
|
|
22
17
|
<HStack gap="$space.16" alignItems="center">
|
|
23
18
|
<VStack alignItems="center" gap="$space.8">
|
|
24
|
-
<TypographyIcon icon={<
|
|
19
|
+
<TypographyIcon icon={<StarIcon />} size="$icon.l" color="$content.accent" />
|
|
25
20
|
<Typography.Text variant="body-xs" color="$content.base.mid">
|
|
26
21
|
Explicit accent
|
|
27
22
|
</Typography.Text>
|
|
28
23
|
</VStack>
|
|
29
24
|
<VStack alignItems="center" gap="$space.8">
|
|
30
|
-
<TypographyIcon icon={<
|
|
25
|
+
<TypographyIcon icon={<CheckCircleIcon />} size="$icon.l" color="$content.success" />
|
|
31
26
|
<Typography.Text variant="body-xs" color="$content.base.mid">
|
|
32
27
|
Explicit success
|
|
33
28
|
</Typography.Text>
|
|
34
29
|
</VStack>
|
|
35
30
|
<VStack alignItems="center" gap="$space.8">
|
|
36
|
-
<TypographyIcon icon={<
|
|
31
|
+
<TypographyIcon icon={<DangerIcon />} size="$icon.l" color="$content.warning" />
|
|
37
32
|
<Typography.Text variant="body-xs" color="$content.base.mid">
|
|
38
33
|
Explicit warning
|
|
39
34
|
</Typography.Text>
|
|
40
35
|
</VStack>
|
|
41
36
|
<VStack alignItems="center" gap="$space.8">
|
|
42
|
-
<TypographyIcon icon={<
|
|
37
|
+
<TypographyIcon icon={<DangerIcon />} size="$icon.l" color="$content.danger" />
|
|
43
38
|
<Typography.Text variant="body-xs" color="$content.base.mid">
|
|
44
39
|
Explicit danger
|
|
45
40
|
</Typography.Text>
|
|
@@ -56,7 +51,7 @@ export const InheritFromTypography: Story = {
|
|
|
56
51
|
Icon inherits accent color from Typography
|
|
57
52
|
</Typography.Text>
|
|
58
53
|
<Typography.Text variant="body-m" color="$content.accent">
|
|
59
|
-
<TypographyIcon icon={<
|
|
54
|
+
<TypographyIcon icon={<StarIcon />} size="$icon.m" /> This icon inherits the accent color
|
|
60
55
|
</Typography.Text>
|
|
61
56
|
</VStack>
|
|
62
57
|
|
|
@@ -65,7 +60,7 @@ export const InheritFromTypography: Story = {
|
|
|
65
60
|
Icon inherits success color from Typography
|
|
66
61
|
</Typography.Text>
|
|
67
62
|
<Typography.Text variant="body-m" color="$content.success">
|
|
68
|
-
<TypographyIcon icon={<
|
|
63
|
+
<TypographyIcon icon={<CheckCircleIcon />} size="$icon.m" /> Operation completed successfully
|
|
69
64
|
</Typography.Text>
|
|
70
65
|
</VStack>
|
|
71
66
|
|
|
@@ -74,7 +69,7 @@ export const InheritFromTypography: Story = {
|
|
|
74
69
|
Icon inherits danger color from Typography
|
|
75
70
|
</Typography.Text>
|
|
76
71
|
<Typography.Text variant="body-m" color="$content.danger">
|
|
77
|
-
<TypographyIcon icon={<
|
|
72
|
+
<TypographyIcon icon={<DangerIcon />} size="$icon.m" /> Error: Something went wrong
|
|
78
73
|
</Typography.Text>
|
|
79
74
|
</VStack>
|
|
80
75
|
|
|
@@ -83,7 +78,7 @@ export const InheritFromTypography: Story = {
|
|
|
83
78
|
Icon inherits warning color from Typography
|
|
84
79
|
</Typography.Text>
|
|
85
80
|
<Typography.Text variant="body-m" color="$content.warning">
|
|
86
|
-
<TypographyIcon icon={<
|
|
81
|
+
<TypographyIcon icon={<InfoIcon />} size="$icon.m" /> Warning: Please review this item
|
|
87
82
|
</Typography.Text>
|
|
88
83
|
</VStack>
|
|
89
84
|
</VStack>
|
|
@@ -98,8 +93,8 @@ export const OverrideInheritedColor: Story = {
|
|
|
98
93
|
Typography is accent, but icon explicitly uses success color
|
|
99
94
|
</Typography.Text>
|
|
100
95
|
<Typography.Text variant="body-m" color="$content.accent">
|
|
101
|
-
<TypographyIcon icon={<
|
|
102
|
-
|
|
96
|
+
<TypographyIcon icon={<CheckCircleIcon />} size="$icon.m" color="$content.success" /> Icon overrides inherited
|
|
97
|
+
color
|
|
103
98
|
</Typography.Text>
|
|
104
99
|
</VStack>
|
|
105
100
|
|
|
@@ -108,7 +103,7 @@ export const OverrideInheritedColor: Story = {
|
|
|
108
103
|
Typography is success, but icon explicitly uses danger color
|
|
109
104
|
</Typography.Text>
|
|
110
105
|
<Typography.Text variant="body-m" color="$content.success">
|
|
111
|
-
<TypographyIcon icon={<
|
|
106
|
+
<TypographyIcon icon={<DangerIcon />} size="$icon.m" color="$content.danger" /> Mixed color scenario
|
|
112
107
|
</Typography.Text>
|
|
113
108
|
</VStack>
|
|
114
109
|
</VStack>
|
|
@@ -119,13 +114,13 @@ export const DifferentSizes: Story = {
|
|
|
119
114
|
render: () => (
|
|
120
115
|
<VStack gap="$space.16">
|
|
121
116
|
<Typography.Text variant="heading-l" color="$content.accent">
|
|
122
|
-
<TypographyIcon icon={<
|
|
117
|
+
<TypographyIcon icon={<StarIcon />} size="$icon.l" /> Large heading with size 32 icon
|
|
123
118
|
</Typography.Text>
|
|
124
119
|
<Typography.Text variant="body-m" color="$content.accent">
|
|
125
|
-
<TypographyIcon icon={<
|
|
120
|
+
<TypographyIcon icon={<StarIcon />} size="$icon.m" /> Body text with size 20 icon
|
|
126
121
|
</Typography.Text>
|
|
127
122
|
<Typography.Text variant="body-s" color="$content.accent">
|
|
128
|
-
<TypographyIcon icon={<
|
|
123
|
+
<TypographyIcon icon={<StarIcon />} size="$icon.s" /> Small text with size 16 icon
|
|
129
124
|
</Typography.Text>
|
|
130
125
|
</VStack>
|
|
131
126
|
),
|
|
@@ -139,10 +134,9 @@ export const NestedTypographyInheritance: Story = {
|
|
|
139
134
|
Nested Typography components - icon inherits from parent
|
|
140
135
|
</Typography.Text>
|
|
141
136
|
<Typography.Text variant="body-l" color="$content.accent">
|
|
142
|
-
<TypographyIcon icon={<
|
|
137
|
+
<TypographyIcon icon={<StarIcon />} size="$icon.m" /> Parent text with icon
|
|
143
138
|
<Typography.Text variant="body-m">
|
|
144
|
-
<TypographyIcon icon={<
|
|
145
|
-
color
|
|
139
|
+
<TypographyIcon icon={<CheckCircleIcon />} size="$icon.s" /> Nested text - icon inherits parent color
|
|
146
140
|
</Typography.Text>
|
|
147
141
|
</Typography.Text>
|
|
148
142
|
</VStack>
|
|
@@ -152,9 +146,9 @@ export const NestedTypographyInheritance: Story = {
|
|
|
152
146
|
Nested with override - child overrides parent color
|
|
153
147
|
</Typography.Text>
|
|
154
148
|
<Typography.Text variant="body-l" color="$content.accent">
|
|
155
|
-
<TypographyIcon icon={<
|
|
149
|
+
<TypographyIcon icon={<StarIcon />} size="$icon.m" /> Parent accent color
|
|
156
150
|
<Typography.Text variant="body-m" color="$content.success">
|
|
157
|
-
<TypographyIcon icon={<
|
|
151
|
+
<TypographyIcon icon={<StarIcon />} size="$icon.s" /> Child overrides to success
|
|
158
152
|
</Typography.Text>
|
|
159
153
|
</Typography.Text>
|
|
160
154
|
</VStack>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { StarIcon } from '@ornikar/kitt-icons/ornicons';
|
|
2
2
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
3
3
|
import { contentColorArgType } from '../../../shared/storybook/helpers/argsHelpers';
|
|
4
4
|
import { TypographyIcon } from './TypographyIcon';
|
|
@@ -14,8 +14,8 @@ const meta: Meta<typeof TypographyIcon> = {
|
|
|
14
14
|
},
|
|
15
15
|
size: {
|
|
16
16
|
control: 'select',
|
|
17
|
-
options: ['$
|
|
18
|
-
description: 'Icon size (
|
|
17
|
+
options: ['$icon.s', '$icon.m', '$icon.l'],
|
|
18
|
+
description: 'Icon size (s: 16px, m: 20px, l: 24px)',
|
|
19
19
|
},
|
|
20
20
|
color: {
|
|
21
21
|
...contentColorArgType,
|
|
@@ -29,7 +29,7 @@ type Story = StoryObj<typeof meta>;
|
|
|
29
29
|
|
|
30
30
|
export const Default: Story = {
|
|
31
31
|
args: {
|
|
32
|
-
icon: <
|
|
33
|
-
size: '$
|
|
32
|
+
icon: <StarIcon />,
|
|
33
|
+
size: '$icon.m',
|
|
34
34
|
},
|
|
35
35
|
};
|
package/src/system/content/typography/__snapshots__/TypographyIcon.features.stories.tsx.snap
CHANGED
|
@@ -36,8 +36,8 @@ exports[`Bumper/Content/TypographyIcon/Features DifferentSizes 1`] = `
|
|
|
36
36
|
<View
|
|
37
37
|
style={
|
|
38
38
|
{
|
|
39
|
-
"height":
|
|
40
|
-
"width":
|
|
39
|
+
"height": 24,
|
|
40
|
+
"width": 24,
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
>
|
|
@@ -280,7 +280,7 @@ exports[`Bumper/Content/TypographyIcon/Features InheritFromTypography 1`] = `
|
|
|
280
280
|
>
|
|
281
281
|
<svg
|
|
282
282
|
color="#BD100F"
|
|
283
|
-
data-file-name="
|
|
283
|
+
data-file-name="danger.inline.svg"
|
|
284
284
|
/>
|
|
285
285
|
</View>
|
|
286
286
|
</View>
|
|
@@ -517,7 +517,7 @@ exports[`Bumper/Content/TypographyIcon/Features NestedTypographyInheritance 1`]
|
|
|
517
517
|
>
|
|
518
518
|
<svg
|
|
519
519
|
color="#357105"
|
|
520
|
-
data-file-name="
|
|
520
|
+
data-file-name="star.inline.svg"
|
|
521
521
|
/>
|
|
522
522
|
</View>
|
|
523
523
|
</View>
|
|
@@ -646,7 +646,7 @@ exports[`Bumper/Content/TypographyIcon/Features OverrideInheritedColor 1`] = `
|
|
|
646
646
|
>
|
|
647
647
|
<svg
|
|
648
648
|
color="#BD100F"
|
|
649
|
-
data-file-name="
|
|
649
|
+
data-file-name="danger.inline.svg"
|
|
650
650
|
/>
|
|
651
651
|
</View>
|
|
652
652
|
</View>
|
|
@@ -776,7 +776,7 @@ exports[`Bumper/Content/TypographyIcon/Features WithExplicitColor 1`] = `
|
|
|
776
776
|
>
|
|
777
777
|
<svg
|
|
778
778
|
color="#BA930B"
|
|
779
|
-
data-file-name="
|
|
779
|
+
data-file-name="danger.inline.svg"
|
|
780
780
|
/>
|
|
781
781
|
</View>
|
|
782
782
|
</View>
|
|
@@ -815,7 +815,7 @@ exports[`Bumper/Content/TypographyIcon/Features WithExplicitColor 1`] = `
|
|
|
815
815
|
>
|
|
816
816
|
<svg
|
|
817
817
|
color="#BD100F"
|
|
818
|
-
data-file-name="
|
|
818
|
+
data-file-name="danger.inline.svg"
|
|
819
819
|
/>
|
|
820
820
|
</View>
|
|
821
821
|
</View>
|
package/src/system/content/typography/__snapshots_web__/TypographyIcon.features.stories.tsx.snap
CHANGED
|
@@ -28,7 +28,7 @@ exports[`Bumper/Content/TypographyIcon/Features DifferentSizes 1`] = `
|
|
|
28
28
|
class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
29
29
|
>
|
|
30
30
|
<div
|
|
31
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
31
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282964 _height-t-bumperIco1504282964"
|
|
32
32
|
>
|
|
33
33
|
<svg
|
|
34
34
|
color="var(--content--accent)"
|
|
@@ -46,7 +46,7 @@ exports[`Bumper/Content/TypographyIcon/Features DifferentSizes 1`] = `
|
|
|
46
46
|
class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
47
47
|
>
|
|
48
48
|
<div
|
|
49
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
49
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282965 _height-t-bumperIco1504282965"
|
|
50
50
|
>
|
|
51
51
|
<svg
|
|
52
52
|
color="var(--content--accent)"
|
|
@@ -64,7 +64,7 @@ exports[`Bumper/Content/TypographyIcon/Features DifferentSizes 1`] = `
|
|
|
64
64
|
class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
65
65
|
>
|
|
66
66
|
<div
|
|
67
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
67
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282971 _height-t-bumperIco1504282971"
|
|
68
68
|
>
|
|
69
69
|
<svg
|
|
70
70
|
color="var(--content--accent)"
|
|
@@ -119,7 +119,7 @@ exports[`Bumper/Content/TypographyIcon/Features InheritFromTypography 1`] = `
|
|
|
119
119
|
class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
120
120
|
>
|
|
121
121
|
<div
|
|
122
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
122
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282965 _height-t-bumperIco1504282965"
|
|
123
123
|
>
|
|
124
124
|
<svg
|
|
125
125
|
color="var(--content--accent)"
|
|
@@ -147,7 +147,7 @@ exports[`Bumper/Content/TypographyIcon/Features InheritFromTypography 1`] = `
|
|
|
147
147
|
class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
148
148
|
>
|
|
149
149
|
<div
|
|
150
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
150
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282965 _height-t-bumperIco1504282965"
|
|
151
151
|
>
|
|
152
152
|
<svg
|
|
153
153
|
color="var(--content--success)"
|
|
@@ -175,11 +175,11 @@ exports[`Bumper/Content/TypographyIcon/Features InheritFromTypography 1`] = `
|
|
|
175
175
|
class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
176
176
|
>
|
|
177
177
|
<div
|
|
178
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
178
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282965 _height-t-bumperIco1504282965"
|
|
179
179
|
>
|
|
180
180
|
<svg
|
|
181
181
|
color="var(--content--danger)"
|
|
182
|
-
data-file-name="
|
|
182
|
+
data-file-name="danger.inline.svg"
|
|
183
183
|
/>
|
|
184
184
|
</div>
|
|
185
185
|
</div>
|
|
@@ -203,7 +203,7 @@ exports[`Bumper/Content/TypographyIcon/Features InheritFromTypography 1`] = `
|
|
|
203
203
|
class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
204
204
|
>
|
|
205
205
|
<div
|
|
206
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
206
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282965 _height-t-bumperIco1504282965"
|
|
207
207
|
>
|
|
208
208
|
<svg
|
|
209
209
|
color="var(--content--warning)"
|
|
@@ -259,7 +259,7 @@ exports[`Bumper/Content/TypographyIcon/Features NestedTypographyInheritance 1`]
|
|
|
259
259
|
class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
260
260
|
>
|
|
261
261
|
<div
|
|
262
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
262
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282965 _height-t-bumperIco1504282965"
|
|
263
263
|
>
|
|
264
264
|
<svg
|
|
265
265
|
color="var(--content--accent)"
|
|
@@ -276,7 +276,7 @@ exports[`Bumper/Content/TypographyIcon/Features NestedTypographyInheritance 1`]
|
|
|
276
276
|
class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
277
277
|
>
|
|
278
278
|
<div
|
|
279
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
279
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282971 _height-t-bumperIco1504282971"
|
|
280
280
|
>
|
|
281
281
|
<svg
|
|
282
282
|
color="var(--content--accent)"
|
|
@@ -305,7 +305,7 @@ exports[`Bumper/Content/TypographyIcon/Features NestedTypographyInheritance 1`]
|
|
|
305
305
|
class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
306
306
|
>
|
|
307
307
|
<div
|
|
308
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
308
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282965 _height-t-bumperIco1504282965"
|
|
309
309
|
>
|
|
310
310
|
<svg
|
|
311
311
|
color="var(--content--accent)"
|
|
@@ -322,11 +322,11 @@ exports[`Bumper/Content/TypographyIcon/Features NestedTypographyInheritance 1`]
|
|
|
322
322
|
class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
323
323
|
>
|
|
324
324
|
<div
|
|
325
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
325
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282971 _height-t-bumperIco1504282971"
|
|
326
326
|
>
|
|
327
327
|
<svg
|
|
328
328
|
color="var(--content--success)"
|
|
329
|
-
data-file-name="
|
|
329
|
+
data-file-name="star.inline.svg"
|
|
330
330
|
/>
|
|
331
331
|
</div>
|
|
332
332
|
</div>
|
|
@@ -379,7 +379,7 @@ exports[`Bumper/Content/TypographyIcon/Features OverrideInheritedColor 1`] = `
|
|
|
379
379
|
class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
380
380
|
>
|
|
381
381
|
<div
|
|
382
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
382
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282965 _height-t-bumperIco1504282965"
|
|
383
383
|
>
|
|
384
384
|
<svg
|
|
385
385
|
color="var(--content--success)"
|
|
@@ -407,11 +407,11 @@ exports[`Bumper/Content/TypographyIcon/Features OverrideInheritedColor 1`] = `
|
|
|
407
407
|
class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
408
408
|
>
|
|
409
409
|
<div
|
|
410
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
410
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282965 _height-t-bumperIco1504282965"
|
|
411
411
|
>
|
|
412
412
|
<svg
|
|
413
413
|
color="var(--content--danger)"
|
|
414
|
-
data-file-name="
|
|
414
|
+
data-file-name="danger.inline.svg"
|
|
415
415
|
/>
|
|
416
416
|
</div>
|
|
417
417
|
</div>
|
|
@@ -453,7 +453,7 @@ exports[`Bumper/Content/TypographyIcon/Features WithExplicitColor 1`] = `
|
|
|
453
453
|
class="is_TypographyView _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
454
454
|
>
|
|
455
455
|
<div
|
|
456
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
456
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282964 _height-t-bumperIco1504282964"
|
|
457
457
|
>
|
|
458
458
|
<svg
|
|
459
459
|
color="var(--content--accent)"
|
|
@@ -475,7 +475,7 @@ exports[`Bumper/Content/TypographyIcon/Features WithExplicitColor 1`] = `
|
|
|
475
475
|
class="is_TypographyView _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
476
476
|
>
|
|
477
477
|
<div
|
|
478
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
478
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282964 _height-t-bumperIco1504282964"
|
|
479
479
|
>
|
|
480
480
|
<svg
|
|
481
481
|
color="var(--content--success)"
|
|
@@ -497,11 +497,11 @@ exports[`Bumper/Content/TypographyIcon/Features WithExplicitColor 1`] = `
|
|
|
497
497
|
class="is_TypographyView _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
498
498
|
>
|
|
499
499
|
<div
|
|
500
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
500
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282964 _height-t-bumperIco1504282964"
|
|
501
501
|
>
|
|
502
502
|
<svg
|
|
503
503
|
color="var(--content--warning)"
|
|
504
|
-
data-file-name="
|
|
504
|
+
data-file-name="danger.inline.svg"
|
|
505
505
|
/>
|
|
506
506
|
</div>
|
|
507
507
|
</div>
|
|
@@ -519,11 +519,11 @@ exports[`Bumper/Content/TypographyIcon/Features WithExplicitColor 1`] = `
|
|
|
519
519
|
class="is_TypographyView _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
520
520
|
>
|
|
521
521
|
<div
|
|
522
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
522
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282964 _height-t-bumperIco1504282964"
|
|
523
523
|
>
|
|
524
524
|
<svg
|
|
525
525
|
color="var(--content--danger)"
|
|
526
|
-
data-file-name="
|
|
526
|
+
data-file-name="danger.inline.svg"
|
|
527
527
|
/>
|
|
528
528
|
</div>
|
|
529
529
|
</div>
|
|
@@ -21,7 +21,7 @@ exports[`Bumper/Content/TypographyIcon Default 1`] = `
|
|
|
21
21
|
class="is_TypographyView _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
22
22
|
>
|
|
23
23
|
<div
|
|
24
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
24
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282965 _height-t-bumperIco1504282965"
|
|
25
25
|
>
|
|
26
26
|
<svg
|
|
27
27
|
color="var(--content--base--hi)"
|
|
@@ -0,0 +1,249 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
|
|
2
|
+
|
|
3
|
+
exports[`Bumper/Core/Tokens Icon 1`] = `
|
|
4
|
+
<RNCSafeAreaProvider
|
|
5
|
+
onInsetsChange={[Function]}
|
|
6
|
+
style={
|
|
7
|
+
[
|
|
8
|
+
{
|
|
9
|
+
"flex": 1,
|
|
10
|
+
},
|
|
11
|
+
undefined,
|
|
12
|
+
]
|
|
13
|
+
}
|
|
14
|
+
>
|
|
15
|
+
<View
|
|
16
|
+
style={
|
|
17
|
+
{
|
|
18
|
+
"flexDirection": "column",
|
|
19
|
+
"gap": 24,
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
>
|
|
23
|
+
<Text
|
|
24
|
+
style={
|
|
25
|
+
{
|
|
26
|
+
"color": "#505050",
|
|
27
|
+
"fontFamily": "GTStandard",
|
|
28
|
+
"fontSize": 16,
|
|
29
|
+
"letterSpacing": 0.3,
|
|
30
|
+
"lineHeight": 24,
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
suppressHighlighting={true}
|
|
34
|
+
>
|
|
35
|
+
Icon tokens define consistent size values for icons (small, medium, large).
|
|
36
|
+
</Text>
|
|
37
|
+
<View
|
|
38
|
+
style={
|
|
39
|
+
{
|
|
40
|
+
"flexDirection": "column",
|
|
41
|
+
"gap": 8,
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
>
|
|
45
|
+
<View
|
|
46
|
+
style={
|
|
47
|
+
{
|
|
48
|
+
"alignItems": "center",
|
|
49
|
+
"flexDirection": "row",
|
|
50
|
+
"gap": 16,
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
>
|
|
54
|
+
<View
|
|
55
|
+
style={
|
|
56
|
+
{
|
|
57
|
+
"width": 150,
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
>
|
|
61
|
+
<Text
|
|
62
|
+
style={
|
|
63
|
+
{
|
|
64
|
+
"fontFamily": "GTStandardBold",
|
|
65
|
+
"fontSize": 14,
|
|
66
|
+
"letterSpacing": 0.3,
|
|
67
|
+
"lineHeight": 20,
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
suppressHighlighting={true}
|
|
71
|
+
>
|
|
72
|
+
$
|
|
73
|
+
icon.s
|
|
74
|
+
</Text>
|
|
75
|
+
</View>
|
|
76
|
+
<View
|
|
77
|
+
style={
|
|
78
|
+
{
|
|
79
|
+
"width": 60,
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
>
|
|
83
|
+
<Text
|
|
84
|
+
style={
|
|
85
|
+
{
|
|
86
|
+
"color": "#505050",
|
|
87
|
+
"fontFamily": "GTStandard",
|
|
88
|
+
"fontSize": 14,
|
|
89
|
+
"letterSpacing": 0.3,
|
|
90
|
+
"lineHeight": 20,
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
suppressHighlighting={true}
|
|
94
|
+
>
|
|
95
|
+
16
|
|
96
|
+
</Text>
|
|
97
|
+
</View>
|
|
98
|
+
<View
|
|
99
|
+
style={
|
|
100
|
+
{
|
|
101
|
+
"backgroundColor": "#563B56",
|
|
102
|
+
"borderBottomLeftRadius": 2,
|
|
103
|
+
"borderBottomRightRadius": 2,
|
|
104
|
+
"borderTopLeftRadius": 2,
|
|
105
|
+
"borderTopRightRadius": 2,
|
|
106
|
+
"height": 16,
|
|
107
|
+
"width": 16,
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
/>
|
|
111
|
+
</View>
|
|
112
|
+
<View
|
|
113
|
+
style={
|
|
114
|
+
{
|
|
115
|
+
"alignItems": "center",
|
|
116
|
+
"flexDirection": "row",
|
|
117
|
+
"gap": 16,
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
>
|
|
121
|
+
<View
|
|
122
|
+
style={
|
|
123
|
+
{
|
|
124
|
+
"width": 150,
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
>
|
|
128
|
+
<Text
|
|
129
|
+
style={
|
|
130
|
+
{
|
|
131
|
+
"fontFamily": "GTStandardBold",
|
|
132
|
+
"fontSize": 14,
|
|
133
|
+
"letterSpacing": 0.3,
|
|
134
|
+
"lineHeight": 20,
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
suppressHighlighting={true}
|
|
138
|
+
>
|
|
139
|
+
$
|
|
140
|
+
icon.m
|
|
141
|
+
</Text>
|
|
142
|
+
</View>
|
|
143
|
+
<View
|
|
144
|
+
style={
|
|
145
|
+
{
|
|
146
|
+
"width": 60,
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
>
|
|
150
|
+
<Text
|
|
151
|
+
style={
|
|
152
|
+
{
|
|
153
|
+
"color": "#505050",
|
|
154
|
+
"fontFamily": "GTStandard",
|
|
155
|
+
"fontSize": 14,
|
|
156
|
+
"letterSpacing": 0.3,
|
|
157
|
+
"lineHeight": 20,
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
suppressHighlighting={true}
|
|
161
|
+
>
|
|
162
|
+
20
|
|
163
|
+
</Text>
|
|
164
|
+
</View>
|
|
165
|
+
<View
|
|
166
|
+
style={
|
|
167
|
+
{
|
|
168
|
+
"backgroundColor": "#563B56",
|
|
169
|
+
"borderBottomLeftRadius": 2,
|
|
170
|
+
"borderBottomRightRadius": 2,
|
|
171
|
+
"borderTopLeftRadius": 2,
|
|
172
|
+
"borderTopRightRadius": 2,
|
|
173
|
+
"height": 20,
|
|
174
|
+
"width": 20,
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
/>
|
|
178
|
+
</View>
|
|
179
|
+
<View
|
|
180
|
+
style={
|
|
181
|
+
{
|
|
182
|
+
"alignItems": "center",
|
|
183
|
+
"flexDirection": "row",
|
|
184
|
+
"gap": 16,
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
>
|
|
188
|
+
<View
|
|
189
|
+
style={
|
|
190
|
+
{
|
|
191
|
+
"width": 150,
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
>
|
|
195
|
+
<Text
|
|
196
|
+
style={
|
|
197
|
+
{
|
|
198
|
+
"fontFamily": "GTStandardBold",
|
|
199
|
+
"fontSize": 14,
|
|
200
|
+
"letterSpacing": 0.3,
|
|
201
|
+
"lineHeight": 20,
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
suppressHighlighting={true}
|
|
205
|
+
>
|
|
206
|
+
$
|
|
207
|
+
icon.l
|
|
208
|
+
</Text>
|
|
209
|
+
</View>
|
|
210
|
+
<View
|
|
211
|
+
style={
|
|
212
|
+
{
|
|
213
|
+
"width": 60,
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
>
|
|
217
|
+
<Text
|
|
218
|
+
style={
|
|
219
|
+
{
|
|
220
|
+
"color": "#505050",
|
|
221
|
+
"fontFamily": "GTStandard",
|
|
222
|
+
"fontSize": 14,
|
|
223
|
+
"letterSpacing": 0.3,
|
|
224
|
+
"lineHeight": 20,
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
suppressHighlighting={true}
|
|
228
|
+
>
|
|
229
|
+
24
|
|
230
|
+
</Text>
|
|
231
|
+
</View>
|
|
232
|
+
<View
|
|
233
|
+
style={
|
|
234
|
+
{
|
|
235
|
+
"backgroundColor": "#563B56",
|
|
236
|
+
"borderBottomLeftRadius": 2,
|
|
237
|
+
"borderBottomRightRadius": 2,
|
|
238
|
+
"borderTopLeftRadius": 2,
|
|
239
|
+
"borderTopRightRadius": 2,
|
|
240
|
+
"height": 24,
|
|
241
|
+
"width": 24,
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
/>
|
|
245
|
+
</View>
|
|
246
|
+
</View>
|
|
247
|
+
</View>
|
|
248
|
+
</RNCSafeAreaProvider>
|
|
249
|
+
`;
|