@revenuecat/purchases-ui-js 2.0.2 → 2.0.3

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.
Files changed (127) hide show
  1. package/dist/components/button/ButtonNode.stories.svelte +66 -102
  2. package/dist/components/button/ButtonNode.svelte +2 -27
  3. package/dist/components/footer/Footer.stories.svelte +112 -102
  4. package/dist/components/footer/Footer.svelte +8 -4
  5. package/dist/components/icon/Icon.stories.svelte +100 -0
  6. package/dist/components/icon/Icon.stories.svelte.d.ts +19 -0
  7. package/dist/components/icon/Icon.svelte +73 -0
  8. package/dist/components/icon/Icon.svelte.d.ts +4 -0
  9. package/dist/components/image/ClipPath.svelte +49 -0
  10. package/dist/components/image/ClipPath.svelte.d.ts +9 -0
  11. package/dist/components/image/Image.stories.svelte +83 -188
  12. package/dist/components/image/Image.svelte +152 -136
  13. package/dist/components/image/Image.svelte.d.ts +1 -1
  14. package/dist/components/image/Overlay.svelte +36 -0
  15. package/dist/components/image/Overlay.svelte.d.ts +8 -0
  16. package/dist/components/package/Package.stories.svelte +10 -21
  17. package/dist/components/package/Package.svelte +8 -35
  18. package/dist/components/paywall/Node.svelte +27 -28
  19. package/dist/components/paywall/Node.svelte.d.ts +3 -6
  20. package/dist/components/paywall/Paywall.stories.svelte +36 -140
  21. package/dist/components/paywall/Paywall.svelte +22 -6
  22. package/dist/components/paywall/Paywall.svelte.d.ts +3 -2
  23. package/dist/components/paywall/fixtures/override-paywall.d.ts +2 -0
  24. package/dist/components/paywall/fixtures/override-paywall.js +1310 -0
  25. package/dist/components/paywall/fixtures/stack-paywall.d.ts +2 -0
  26. package/dist/components/paywall/fixtures/stack-paywall.js +5223 -0
  27. package/dist/components/paywall/fixtures/variables.d.ts +261 -0
  28. package/dist/components/paywall/fixtures/variables.js +262 -0
  29. package/dist/components/purchase-button/PurchaseButton.stories.svelte +10 -21
  30. package/dist/components/purchase-button/PurchaseButton.svelte +2 -27
  31. package/dist/components/stack/Stack.stories.svelte +2354 -978
  32. package/dist/components/stack/Stack.svelte +111 -134
  33. package/dist/components/stack/Stack.svelte.d.ts +6 -2
  34. package/dist/components/stack/stack-utils.d.ts +10 -30
  35. package/dist/components/stack/stack-utils.js +77 -255
  36. package/dist/components/text/Text.svelte +3 -37
  37. package/dist/components/text/Text.svelte.d.ts +1 -2
  38. package/dist/components/text/TextNode.stories.svelte +10 -36
  39. package/dist/components/text/TextNode.svelte +25 -28
  40. package/dist/components/text/TextNode.svelte.d.ts +1 -1
  41. package/dist/components/text/text-utils.d.ts +4 -9
  42. package/dist/components/text/text-utils.js +32 -117
  43. package/dist/components/timeline/Timeline.stories.svelte +640 -251
  44. package/dist/components/timeline/Timeline.svelte +42 -28
  45. package/dist/components/timeline/Timeline.svelte.d.ts +1 -1
  46. package/dist/components/timeline/TimelineItem.svelte +80 -112
  47. package/dist/components/timeline/TimelineItem.svelte.d.ts +6 -2
  48. package/dist/components/timeline/timeline-utils.d.ts +24 -6
  49. package/dist/components/timeline/timeline-utils.js +21 -113
  50. package/dist/data/entities.d.ts +19 -135
  51. package/dist/index.d.ts +2 -1
  52. package/dist/index.js +2 -1
  53. package/dist/stores/color-mode.d.ts +1 -1
  54. package/dist/stores/paywall.d.ts +5 -2
  55. package/dist/stores/selected.d.ts +5 -0
  56. package/dist/stores/selected.js +12 -0
  57. package/dist/stores/variables.d.ts +1 -1
  58. package/dist/stores/variables.js +0 -1
  59. package/dist/stories/component-decorator.d.ts +2 -0
  60. package/dist/stories/component-decorator.js +12 -0
  61. package/dist/stories/fixtures.d.ts +5 -3
  62. package/dist/stories/fixtures.js +5214 -4422
  63. package/dist/stories/paywall-decorator.js +6 -0
  64. package/dist/stories/variables-decorator.d.ts +1 -1
  65. package/dist/stories/viewport-decorator.d.ts +2 -0
  66. package/dist/stories/viewport-decorator.js +8 -0
  67. package/dist/stories/viewport-wrapper.svelte +53 -0
  68. package/dist/stories/viewport-wrapper.svelte.d.ts +10 -0
  69. package/dist/stories/with-layout.d.ts +2 -10
  70. package/dist/stories/with-layout.js +3 -5
  71. package/dist/types/alignment.d.ts +5 -3
  72. package/dist/types/background.d.ts +6 -5
  73. package/dist/types/base.d.ts +7 -0
  74. package/dist/types/base.js +1 -0
  75. package/dist/types/colors.d.ts +4 -4
  76. package/dist/types/component.d.ts +6 -2
  77. package/dist/types/components/button.d.ts +4 -1
  78. package/dist/types/components/footer.d.ts +2 -1
  79. package/dist/types/components/icon.d.ts +28 -0
  80. package/dist/types/components/icon.js +1 -0
  81. package/dist/types/components/image.d.ts +20 -0
  82. package/dist/types/components/image.js +1 -0
  83. package/dist/types/components/package.d.ts +2 -1
  84. package/dist/types/components/purchase-button.d.ts +2 -1
  85. package/dist/types/components/stack.d.ts +32 -0
  86. package/dist/types/components/stack.js +1 -0
  87. package/dist/types/components/text.d.ts +20 -0
  88. package/dist/types/components/text.js +1 -0
  89. package/dist/types/components/timeline.d.ts +35 -0
  90. package/dist/types/components/timeline.js +1 -0
  91. package/dist/types/localization.d.ts +2 -1
  92. package/dist/types/media.d.ts +4 -3
  93. package/dist/types/overrides.d.ts +48 -0
  94. package/dist/types/overrides.js +1 -0
  95. package/dist/types/variables.d.ts +13 -0
  96. package/dist/types/variables.js +10 -0
  97. package/dist/types.d.ts +17 -9
  98. package/dist/ui/atoms/typography.stories.svelte +1 -27
  99. package/dist/ui/molecules/button.stories.svelte +3 -8
  100. package/dist/ui/theme/colors.d.ts +0 -6
  101. package/dist/ui/theme/colors.js +1 -1
  102. package/dist/ui/theme/text.d.ts +3 -4
  103. package/dist/ui/theme/utils.d.ts +0 -10
  104. package/dist/ui/theme/utils.js +5 -5
  105. package/dist/utils/background-utils.d.ts +4 -0
  106. package/dist/utils/background-utils.js +39 -0
  107. package/dist/utils/base-utils.d.ts +18 -0
  108. package/dist/utils/base-utils.js +124 -0
  109. package/dist/utils/constants.d.ts +2 -2
  110. package/dist/utils/constants.js +6 -1
  111. package/dist/utils/font-utils.d.ts +4 -0
  112. package/dist/utils/font-utils.js +47 -0
  113. package/dist/utils/style-utils.d.ts +7 -120
  114. package/dist/utils/style-utils.js +22 -302
  115. package/dist/utils/variable-utils.d.ts +1 -22
  116. package/dist/utils/variable-utils.js +28 -24
  117. package/dist/web-components/index.css +1 -1
  118. package/dist/web-components/index.js +1323 -895
  119. package/package.json +34 -24
  120. package/dist/components/button/button-utils.d.ts +0 -2
  121. package/dist/components/button/button-utils.js +0 -19
  122. package/dist/components/image/image-utils.d.ts +0 -19
  123. package/dist/components/image/image-utils.js +0 -33
  124. package/dist/components/purchase-button/purchase-button-utils.d.ts +0 -2
  125. package/dist/components/purchase-button/purchase-button-utils.js +0 -20
  126. package/dist/stories/meta-templates.d.ts +0 -12
  127. package/dist/stories/meta-templates.js +0 -155
package/dist/components/stack/Stack.stories.svelte CHANGED
@@ -1,49 +1,15 @@
1
1
  <script module lang="ts">
2
2
  import Stack from "./Stack.svelte";
3
- import type { StackProps, TextNodeProps } from "../../data/entities";
3
+ import type { TextNodeProps } from "../../types/components/text";
4
+ import { componentDecorator } from "../../stories/component-decorator";
4
5
  import { localizations } from "../../stories/fixtures";
5
6
  import { localizationDecorator } from "../../stories/localization-decorator";
6
- import {
7
- borderStoryMeta,
8
- getColorStoryMeta,
9
- getSpacingStoryMeta,
10
- shadowStoryMeta,
11
- sizeStoryMeta,
12
- stackDimensionStoryMeta,
13
- } from "../../stories/meta-templates";
14
- import {
15
- DEFAULT_BACKGROUND_COLOR,
16
- DEFAULT_TEXT_COLOR,
17
- } from "../../utils/constants";
7
+ import type { StackProps } from "../../types/components/stack";
8
+ import { DEFAULT_TEXT_COLOR } from "../../utils/constants";
18
9
  import { defineMeta } from "@storybook/addon-svelte-csf";
19
10
 
20
11
  const defaultLocale = Object.keys(localizations)[0];
21
12
 
22
- const { Story } = defineMeta({
23
- title: "Components/Stack",
24
- component: Stack,
25
- tags: ["autodocs"],
26
- decorators: [
27
- localizationDecorator({
28
- defaultLocale,
29
- localizations,
30
- }),
31
- ],
32
- argTypes: {
33
- dimension: stackDimensionStoryMeta,
34
- spacing: {
35
- control: { type: "number" },
36
- description: "Space between stack items in pixels",
37
- },
38
- shadow: shadowStoryMeta,
39
- background_color: getColorStoryMeta("Background color object"),
40
- padding: getSpacingStoryMeta("Padding values in pixels"),
41
- margin: getSpacingStoryMeta("Margin values in pixels"),
42
- border: borderStoryMeta,
43
- size: sizeStoryMeta,
44
- },
45
- });
46
-
47
13
  const components = [
48
14
  {
49
15
  type: "text",
@@ -91,100 +57,181 @@
91
57
  },
92
58
  },
93
59
  ] as unknown as TextNodeProps[];
60
+
61
+ const { Story } = defineMeta({
62
+ title: "Components/Stack",
63
+ component: Stack,
64
+ decorators: [
65
+ componentDecorator(),
66
+ localizationDecorator({
67
+ defaultLocale,
68
+ localizations,
69
+ }),
70
+ ],
71
+ args: {
72
+ type: "stack",
73
+ id: "stack",
74
+ name: "Stack",
75
+ components,
76
+ size: { width: { type: "fill" }, height: { type: "fill" } },
77
+ dimension: {
78
+ type: "vertical",
79
+ alignment: "center",
80
+ distribution: "start",
81
+ },
82
+ spacing: 16,
83
+ margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
84
+ padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
85
+ background_color: null,
86
+ background: null,
87
+ border: null,
88
+ shape: null,
89
+ shadow: null,
90
+ badge: null,
91
+ } satisfies StackProps,
92
+ });
94
93
  </script>
95
94
 
96
- <!-- Vertical Stack -->
95
+ <Story name="Vertical Stack" />
96
+
97
97
  <Story
98
- name="Vertical Stack"
98
+ name="Horizontal Stack"
99
99
  args={{
100
- type: "stack",
101
- size: { width: { type: "fill" }, height: { type: "fill" } },
102
100
  dimension: {
103
- type: "vertical",
101
+ type: "horizontal",
104
102
  alignment: "center",
105
- distribution: "start",
103
+ distribution: "space_between",
106
104
  },
107
- components,
108
- spacing: 16,
109
- padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
110
- margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
111
- id: "vertical-stack",
112
- name: "Vertical Stack",
113
105
  }}
114
106
  />
115
107
 
116
- <!-- Horizontal Stack -->
117
108
  <Story
118
- name="Horizontal Stack"
109
+ name="Z Layer"
119
110
  args={{
120
- type: "stack",
111
+ size: {
112
+ width: { type: "fixed", value: 200 },
113
+ height: { type: "fixed", value: 200 },
114
+ },
121
115
  dimension: {
122
- type: "horizontal",
116
+ type: "zlayer",
123
117
  alignment: "center",
124
- distribution: "space_between",
125
118
  },
126
- components,
127
- spacing: 16,
128
- padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
129
- margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
130
- id: "horizontal-stack",
131
- name: "Horizontal Stack",
132
- size: { width: { type: "fill" }, height: { type: "fill" } },
119
+ background: {
120
+ type: "color",
121
+ value: {
122
+ light: { type: "hex", value: "#cfffe6" },
123
+ },
124
+ },
125
+ border: {
126
+ width: 1,
127
+ color: {
128
+ light: { type: "hex", value: "#dfdfc6" },
129
+ },
130
+ },
131
+ shape: {
132
+ type: "rectangle",
133
+ corners: {
134
+ top_leading: 16,
135
+ top_trailing: 16,
136
+ bottom_leading: 16,
137
+ bottom_trailing: 16,
138
+ },
139
+ },
133
140
  }}
134
141
  />
135
142
 
136
- <!-- Space Around -->
137
143
  <Story
138
144
  name="Space Around"
139
145
  args={{
140
- type: "stack",
141
146
  dimension: {
142
147
  type: "horizontal",
143
148
  alignment: "center",
144
149
  distribution: "space_around",
145
150
  },
146
- components,
147
- spacing: 16,
148
- padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
149
- margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
150
- id: "space-between",
151
- name: "Space Between",
152
- size: { width: { type: "fill" }, height: { type: "fill" } },
153
151
  }}
154
152
  />
155
153
 
156
- <!-- Background Color -->
157
154
  <Story
158
155
  name="Background Colors"
159
156
  args={{
160
- type: "stack",
161
- dimension: {
162
- type: "vertical",
163
- alignment: "center",
164
- distribution: "start",
165
- },
166
- components,
167
157
  background_color: {
168
158
  light: { type: "hex", value: "#C8E6FF" },
169
159
  dark: { type: "hex", value: "#C8E6FF" },
170
160
  },
171
- spacing: 16,
172
- padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
173
- size: { width: { type: "fill" }, height: { type: "fill" } },
174
161
  }}
175
162
  />
176
163
 
177
- <!-- Border Styles -->
178
164
  <Story
179
- name="Border Styles"
165
+ name="Background - Color"
180
166
  args={{
181
- type: "stack",
182
- dimension: {
183
- type: "vertical",
184
- alignment: "center",
185
- distribution: "start",
167
+ background: {
168
+ type: "color",
169
+ value: {
170
+ light: { type: "hex", value: "#C8E6FF" },
171
+ dark: { type: "hex", value: "#C8E6FF" },
172
+ },
186
173
  },
187
- components,
174
+ }}
175
+ />
176
+
177
+ <Story
178
+ name="Background - Image Fit"
179
+ args={{
180
+ background: {
181
+ type: "image",
182
+ fit_mode: "fit",
183
+ color_overlay: null,
184
+ value: {
185
+ light: {
186
+ width: 600,
187
+ height: 400,
188
+ original: "https://placehold.co/600x400",
189
+ heic: "https://placehold.co/600x400",
190
+ heic_low_res: "https://placehold.co/600x400",
191
+ webp: "https://placehold.co/600x400",
192
+ webp_low_res: "https://placehold.co/600x400",
193
+ },
194
+ dark: null,
195
+ },
196
+ },
197
+ }}
198
+ />
199
+
200
+ <Story
201
+ name="Background - Image Fill"
202
+ args={{
203
+ background: {
204
+ type: "image",
205
+ fit_mode: "fill",
206
+ color_overlay: {
207
+ light: {
208
+ type: "linear",
209
+ degrees: 90,
210
+ points: [
211
+ { percent: 0, color: "#000000FF" },
212
+ { percent: 100, color: "#00000000" },
213
+ ],
214
+ },
215
+ },
216
+ value: {
217
+ light: {
218
+ width: 600,
219
+ height: 400,
220
+ original: "https://placehold.co/600x400",
221
+ heic: "https://placehold.co/600x400",
222
+ heic_low_res: "https://placehold.co/600x400",
223
+ webp: "https://placehold.co/600x400",
224
+ webp_low_res: "https://placehold.co/600x400",
225
+ },
226
+ dark: null,
227
+ },
228
+ },
229
+ }}
230
+ />
231
+
232
+ <Story
233
+ name="Border Styles"
234
+ args={{
188
235
  border: {
189
236
  width: 2,
190
237
  color: {
@@ -201,23 +248,16 @@
201
248
  bottom_trailing: 8,
202
249
  },
203
250
  },
204
- spacing: 16,
205
- padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
206
- size: { width: { type: "fill" }, height: { type: "fill" } },
207
251
  }}
208
252
  />
209
253
 
210
- <!-- Shapes -->
211
254
  <Story
212
255
  name="Rounded Corners"
213
256
  args={{
214
- type: "stack",
215
- dimension: {
216
- type: "vertical",
217
- alignment: "center",
218
- distribution: "start",
257
+ background_color: {
258
+ light: { type: "hex", value: "#F0F0F0" },
259
+ dark: { type: "hex", value: "#F0F0F0" },
219
260
  },
220
- components,
221
261
  shape: {
222
262
  type: "rectangle",
223
263
  corners: {
@@ -227,27 +267,12 @@
227
267
  bottom_trailing: 24,
228
268
  },
229
269
  },
230
- background_color: {
231
- light: { type: "hex", value: "#F0F0F0" },
232
- dark: { type: "hex", value: "#F0F0F0" },
233
- },
234
- spacing: 16,
235
- padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
236
- size: { width: { type: "fill" }, height: { type: "fill" } },
237
270
  }}
238
271
  />
239
272
 
240
- <!-- Fixed Size -->
241
273
  <Story
242
274
  name="Fixed Size"
243
275
  args={{
244
- type: "stack",
245
- dimension: {
246
- type: "vertical",
247
- alignment: "center",
248
- distribution: "start",
249
- },
250
- components,
251
276
  size: {
252
277
  width: { type: "fixed", value: 300 },
253
278
  height: { type: "fixed", value: 200 },
@@ -256,12 +281,9 @@
256
281
  light: { type: "hex", value: "#F0F0F0" },
257
282
  dark: { type: "hex", value: "#F0F0F0" },
258
283
  },
259
- spacing: 16,
260
- padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
261
284
  }}
262
285
  />
263
286
 
264
- <!-- Shadow -->
265
287
  <Story
266
288
  name="Shadow"
267
289
  args={{
@@ -274,13 +296,6 @@
274
296
  light: { type: "hex", value: "#d3d3d3" },
275
297
  },
276
298
  },
277
- type: "stack",
278
- dimension: {
279
- type: "vertical",
280
- alignment: "center",
281
- distribution: "start",
282
- },
283
- components,
284
299
  border: {
285
300
  width: 2,
286
301
  color: {
@@ -297,1065 +312,2377 @@
297
312
  bottom_trailing: 8,
298
313
  },
299
314
  },
300
- spacing: 16,
301
- padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
302
- size: { width: { type: "fill" }, height: { type: "fill" } },
303
315
  }}
304
316
  />
305
317
 
306
318
  <Story
307
- name="Badge - Nested"
319
+ name="Complex - pill"
308
320
  args={{
309
- type: "stack",
310
- dimension: {
311
- type: "zlayer",
312
- alignment: "center",
321
+ background: {
322
+ color_overlay: null,
323
+ fit_mode: "fill",
324
+ type: "image",
325
+ value: {
326
+ light: {
327
+ width: 600,
328
+ height: 400,
329
+ original: "https://placehold.co/600x400",
330
+ heic: "https://placehold.co/600x400",
331
+ heic_low_res: "https://placehold.co/600x400",
332
+ webp: "https://placehold.co/600x400",
333
+ webp_low_res: "https://placehold.co/600x400",
334
+ },
335
+ dark: null,
336
+ },
313
337
  },
314
- components: [
315
- {
316
- type: "stack",
317
- dimension: {
318
- type: "zlayer",
319
- alignment: "center",
320
- },
321
- components: [],
322
- size: {
323
- width: { type: "fixed", value: 500 },
324
- height: { type: "fixed", value: 500 },
338
+ border: {
339
+ color: {
340
+ light: {
341
+ type: "hex",
342
+ value: "#ff5f5fff",
325
343
  },
326
- id: "badge-zstack-base",
327
- name: "badge-zstack-base",
328
344
  },
345
+ width: 4,
346
+ },
347
+ components: [
329
348
  {
330
- type: "stack",
331
- dimension: {
332
- type: "zlayer",
333
- alignment: "center",
334
- },
335
- components: [],
336
- size: {
337
- width: { type: "fixed", value: 500 },
338
- height: { type: "fixed", value: 500 },
339
- },
340
- id: "badge-zstack-top_leading",
341
- name: "badge-zstack-top_leading",
342
- badge: {
343
- stack: {
344
- type: "stack",
345
- components: [],
346
- },
347
- style: "nested",
348
- alignment: "top_leading",
349
- shape: {
350
- type: "rectangle",
351
- corners: {
352
- top_leading: 4,
353
- top_trailing: 4,
354
- bottom_leading: 4,
355
- bottom_trailing: 4,
356
- },
357
- },
358
- padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
359
- margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
360
- text_lid: "badge",
361
- color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
362
- font_weight: "bold",
363
- font_size: "body_s",
364
- horizontal_alignment: "center",
365
- background_color: {
366
- light: { type: "hex", value: "#47aab1" },
349
+ background_color: null,
350
+ color: {
351
+ light: {
352
+ type: "hex",
353
+ value: "#000000",
367
354
  },
368
355
  },
369
- },
370
- {
371
- type: "stack",
372
- dimension: {
373
- type: "zlayer",
374
- alignment: "center",
356
+ font_name: null,
357
+ font_size: "heading_xxl",
358
+ font_weight: "regular",
359
+ horizontal_alignment: "leading",
360
+ id: "umK52AbZzu",
361
+ margin: {
362
+ bottom: 0,
363
+ leading: 0,
364
+ top: 0,
365
+ trailing: 0,
366
+ },
367
+ name: "",
368
+ padding: {
369
+ bottom: 0,
370
+ leading: 0,
371
+ top: 0,
372
+ trailing: 0,
375
373
  },
376
- components: [],
377
374
  size: {
378
- width: { type: "fixed", value: 500 },
379
- height: { type: "fixed", value: 500 },
380
- },
381
- id: "badge-zstack-top_leading",
382
- name: "badge-zstack-top_leading",
383
- badge: {
384
- stack: {
385
- type: "stack",
386
- components: [],
375
+ height: {
376
+ type: "fit",
377
+ value: null,
387
378
  },
388
- style: "nested",
389
- alignment: "top",
390
- shape: {
391
- type: "rectangle",
392
- corners: {
393
- top_leading: 4,
394
- top_trailing: 4,
395
- bottom_leading: 4,
396
- bottom_trailing: 4,
397
- },
398
- },
399
- padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
400
- margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
401
- text_lid: "badge",
402
- color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
403
- font_weight: "bold",
404
- font_size: "body_s",
405
- horizontal_alignment: "center",
406
- background_color: {
407
- light: { type: "hex", value: "#47aab1" },
379
+ width: {
380
+ type: "fit",
381
+ value: null,
408
382
  },
409
383
  },
384
+ text_lid: "id1",
385
+ type: "text",
410
386
  },
411
387
  {
412
- type: "stack",
413
- dimension: {
414
- type: "zlayer",
415
- alignment: "center",
388
+ background_color: null,
389
+ color: {
390
+ light: {
391
+ type: "hex",
392
+ value: "#000000",
393
+ },
416
394
  },
417
- components: [],
418
- size: {
419
- width: { type: "fixed", value: 500 },
420
- height: { type: "fixed", value: 500 },
395
+ font_name: null,
396
+ font_size: "body_l",
397
+ font_weight: "regular",
398
+ horizontal_alignment: "leading",
399
+ id: "M8IKzsKSR_",
400
+ margin: {
401
+ bottom: 0,
402
+ leading: 0,
403
+ top: 0,
404
+ trailing: 0,
405
+ },
406
+ name: "",
407
+ padding: {
408
+ bottom: 0,
409
+ leading: 0,
410
+ top: 0,
411
+ trailing: 0,
421
412
  },
422
- id: "badge-zstack-top_leading",
423
- name: "badge-zstack-top_leading",
424
- badge: {
425
- stack: {
426
- type: "stack",
427
- components: [],
413
+ size: {
414
+ height: {
415
+ type: "fit",
416
+ value: null,
428
417
  },
429
- style: "nested",
430
- alignment: "top_trailing",
431
- shape: {
432
- type: "rectangle",
433
- corners: {
434
- top_leading: 4,
435
- top_trailing: 4,
436
- bottom_leading: 4,
437
- bottom_trailing: 4,
438
- },
439
- },
440
- padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
441
- margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
442
- text_lid: "badge",
443
- color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
444
- font_weight: "bold",
445
- font_size: "body_s",
446
- horizontal_alignment: "center",
447
- background_color: {
448
- light: { type: "hex", value: "#47aab1" },
418
+ width: {
419
+ type: "fit",
420
+ value: null,
449
421
  },
450
422
  },
423
+ text_lid: "id2",
424
+ type: "text",
451
425
  },
452
- {
453
- type: "stack",
454
- dimension: {
455
- type: "zlayer",
456
- alignment: "center",
426
+ ],
427
+ dimension: {
428
+ alignment: "leading",
429
+ distribution: "center",
430
+ type: "vertical",
431
+ },
432
+ margin: {
433
+ bottom: 32,
434
+ leading: 32,
435
+ top: 32,
436
+ trailing: 32,
437
+ },
438
+ padding: {
439
+ bottom: 64,
440
+ leading: 64,
441
+ top: 64,
442
+ trailing: 64,
443
+ },
444
+ shadow: {
445
+ color: {
446
+ light: {
447
+ type: "hex",
448
+ value: "#52a62bFF",
457
449
  },
458
- components: [],
459
- size: {
460
- width: { type: "fixed", value: 500 },
461
- height: { type: "fixed", value: 500 },
450
+ },
451
+ radius: 8,
452
+ x: 4,
453
+ y: 4,
454
+ },
455
+ shape: {
456
+ type: "pill",
457
+ },
458
+ size: {
459
+ height: {
460
+ type: "fit",
461
+ value: null,
462
+ },
463
+ width: {
464
+ type: "fit",
465
+ value: null,
466
+ },
467
+ },
468
+ spacing: 64,
469
+ }}
470
+ />
471
+
472
+ <Story
473
+ name="Complex - rectangle"
474
+ args={{
475
+ background: {
476
+ type: "color",
477
+ value: {
478
+ light: {
479
+ degrees: 0,
480
+ points: [
481
+ {
482
+ color: "#fd9c97ff",
483
+ percent: 0,
484
+ },
485
+ {
486
+ color: "#f8ede9FF",
487
+ percent: 100,
488
+ },
489
+ ],
490
+ type: "linear",
462
491
  },
463
- id: "badge-zstack-top_leading",
464
- name: "badge-zstack-top_leading",
465
- badge: {
466
- stack: {
467
- type: "stack",
468
- components: [],
469
- },
470
- style: "nested",
471
- alignment: "leading",
472
- shape: {
473
- type: "rectangle",
474
- corners: {
475
- top_leading: 4,
476
- top_trailing: 4,
477
- bottom_leading: 4,
478
- bottom_trailing: 4,
479
- },
480
- },
481
- padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
482
- margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
483
- text_lid: "badge",
484
- color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
485
- font_weight: "bold",
486
- font_size: "body_s",
487
- horizontal_alignment: "center",
488
- background_color: {
489
- light: { type: "hex", value: "#47aab1" },
490
- },
492
+ },
493
+ },
494
+ background_color: null,
495
+ badge: null,
496
+ border: {
497
+ color: {
498
+ light: {
499
+ type: "hex",
500
+ value: "#ff5f5fff",
491
501
  },
492
502
  },
503
+ width: 4,
504
+ },
505
+ components: [
493
506
  {
494
- type: "stack",
495
- dimension: {
496
- type: "zlayer",
497
- alignment: "center",
507
+ background_color: null,
508
+ color: {
509
+ light: {
510
+ type: "hex",
511
+ value: "#000000",
512
+ },
498
513
  },
499
- components: [],
500
- size: {
501
- width: { type: "fixed", value: 500 },
502
- height: { type: "fixed", value: 500 },
514
+ font_name: null,
515
+ font_size: "heading_xxl",
516
+ font_weight: "regular",
517
+ horizontal_alignment: "leading",
518
+ id: "UZ_VuqOviI",
519
+ margin: {
520
+ bottom: 0,
521
+ leading: 0,
522
+ top: 0,
523
+ trailing: 0,
524
+ },
525
+ name: "",
526
+ padding: {
527
+ bottom: 0,
528
+ leading: 0,
529
+ top: 0,
530
+ trailing: 0,
503
531
  },
504
- id: "badge-zstack-top_leading",
505
- name: "badge-zstack-top_leading",
506
- badge: {
507
- stack: {
508
- type: "stack",
509
- components: [],
532
+ size: {
533
+ height: {
534
+ type: "fit",
535
+ value: null,
510
536
  },
511
- style: "nested",
512
- alignment: "trailing",
513
- shape: {
514
- type: "rectangle",
515
- corners: {
516
- top_leading: 4,
517
- top_trailing: 4,
518
- bottom_leading: 4,
519
- bottom_trailing: 4,
520
- },
521
- },
522
- padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
523
- margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
524
- text_lid: "badge",
525
- color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
526
- font_weight: "bold",
527
- font_size: "body_s",
528
- horizontal_alignment: "center",
529
- background_color: {
530
- light: { type: "hex", value: "#47aab1" },
537
+ width: {
538
+ type: "fit",
539
+ value: null,
531
540
  },
532
541
  },
542
+ text_lid: "id1",
543
+ type: "text",
533
544
  },
534
545
  {
535
- type: "stack",
536
- dimension: {
537
- type: "zlayer",
538
- alignment: "center",
546
+ background_color: null,
547
+ color: {
548
+ light: {
549
+ type: "hex",
550
+ value: "#000000",
551
+ },
539
552
  },
540
- components: [],
541
- size: {
542
- width: { type: "fixed", value: 500 },
543
- height: { type: "fixed", value: 500 },
553
+ font_name: null,
554
+ font_size: "body_l",
555
+ font_weight: "regular",
556
+ horizontal_alignment: "leading",
557
+ id: "Dp3J_bnDMv",
558
+ margin: {
559
+ bottom: 0,
560
+ leading: 0,
561
+ top: 0,
562
+ trailing: 0,
563
+ },
564
+ name: "",
565
+ padding: {
566
+ bottom: 0,
567
+ leading: 0,
568
+ top: 0,
569
+ trailing: 0,
544
570
  },
545
- id: "badge-zstack-top_leading",
546
- name: "badge-zstack-top_leading",
547
- badge: {
548
- stack: {
549
- type: "stack",
550
- components: [],
571
+ size: {
572
+ height: {
573
+ type: "fit",
574
+ value: null,
551
575
  },
552
- style: "nested",
553
- alignment: "bottom_leading",
554
- shape: {
555
- type: "rectangle",
556
- corners: {
557
- top_leading: 4,
558
- top_trailing: 4,
559
- bottom_leading: 4,
560
- bottom_trailing: 4,
561
- },
562
- },
563
- padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
564
- margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
565
- text_lid: "badge",
566
- color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
567
- font_weight: "bold",
568
- font_size: "body_s",
569
- horizontal_alignment: "center",
570
- background_color: {
571
- light: { type: "hex", value: "#47aab1" },
576
+ width: {
577
+ type: "fit",
578
+ value: null,
572
579
  },
573
580
  },
581
+ text_lid: "id2",
582
+ type: "text",
574
583
  },
575
- {
576
- type: "stack",
577
- dimension: {
578
- type: "zlayer",
579
- alignment: "center",
580
- },
581
- components: [],
582
- size: {
583
- width: { type: "fixed", value: 500 },
584
- height: { type: "fixed", value: 500 },
585
- },
586
- id: "badge-zstack-top_leading",
587
- name: "badge-zstack-top_leading",
588
- badge: {
589
- stack: {
590
- type: "stack",
591
- components: [],
592
- },
593
- style: "nested",
594
- alignment: "bottom",
595
- shape: {
596
- type: "rectangle",
597
- corners: {
598
- top_leading: 4,
599
- top_trailing: 4,
600
- bottom_leading: 4,
601
- bottom_trailing: 4,
602
- },
603
- },
604
- padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
605
- margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
606
- text_lid: "badge",
607
- color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
608
- font_weight: "bold",
609
- font_size: "body_s",
610
- horizontal_alignment: "center",
611
- background_color: {
612
- light: { type: "hex", value: "#47aab1" },
613
- },
614
- },
615
- },
616
- {
617
- type: "stack",
618
- dimension: {
619
- type: "zlayer",
620
- alignment: "center",
621
- },
622
- components: [],
623
- size: {
624
- width: { type: "fixed", value: 500 },
625
- height: { type: "fixed", value: 500 },
626
- },
627
- id: "badge-zstack-top_leading",
628
- name: "badge-zstack-top_leading",
629
- badge: {
630
- stack: {
631
- type: "stack",
632
- components: [],
633
- },
634
- style: "nested",
635
- alignment: "bottom_trailing",
636
- shape: {
637
- type: "rectangle",
638
- corners: {
639
- top_leading: 4,
640
- top_trailing: 4,
641
- bottom_leading: 4,
642
- bottom_trailing: 4,
643
- },
644
- },
645
- padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
646
- margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
647
- text_lid: "badge",
648
- color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
649
- font_weight: "bold",
650
- font_size: "body_s",
651
- horizontal_alignment: "center",
652
- background_color: {
653
- light: { type: "hex", value: "#47aab1" },
654
- },
655
- },
656
- },
657
- ] as unknown as StackProps[],
658
- border: {
659
- width: 2,
584
+ ],
585
+ dimension: {
586
+ alignment: "top",
587
+ distribution: "center",
588
+ type: "horizontal",
589
+ },
590
+ margin: {
591
+ bottom: 32,
592
+ leading: 32,
593
+ top: 32,
594
+ trailing: 32,
595
+ },
596
+ padding: {
597
+ bottom: 64,
598
+ leading: 64,
599
+ top: 64,
600
+ trailing: 64,
601
+ },
602
+ shadow: {
660
603
  color: {
661
- light: { type: "hex", value: "#47aab1" },
604
+ light: {
605
+ type: "hex",
606
+ value: "#52a62bFF",
607
+ },
662
608
  },
609
+ radius: 8,
610
+ x: 4,
611
+ y: 4,
663
612
  },
664
613
  shape: {
665
- type: "rectangle",
666
614
  corners: {
667
- top_leading: 8,
668
- top_trailing: 8,
669
- bottom_leading: 8,
670
- bottom_trailing: 8,
615
+ bottom_leading: 64,
616
+ bottom_trailing: 64,
617
+ top_leading: 64,
618
+ top_trailing: 64,
671
619
  },
620
+ type: "rectangle",
672
621
  },
673
- spacing: 16,
674
- padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
675
622
  size: {
676
- width: { type: "fixed", value: 500 },
677
- height: { type: "fixed", value: 500 },
623
+ height: {
624
+ type: "fit",
625
+ value: null,
626
+ },
627
+ width: {
628
+ type: "fill",
629
+ value: null,
630
+ },
678
631
  },
632
+ spacing: 64,
679
633
  }}
680
634
  />
681
635
 
682
636
  <Story
683
- name="Badge - Overlaid"
637
+ name="Badge - Nested"
684
638
  args={{
685
- type: "stack",
686
- dimension: {
687
- type: "zlayer",
688
- alignment: "center",
639
+ background: null,
640
+ background_color: null,
641
+ badge: null,
642
+ border: {
643
+ color: {
644
+ light: {
645
+ type: "hex",
646
+ value: "#ce7422FF",
647
+ },
648
+ },
649
+ width: 4,
689
650
  },
690
651
  components: [
691
652
  {
692
- type: "stack",
693
- dimension: {
694
- type: "zlayer",
695
- alignment: "center",
653
+ background_color: null,
654
+ color: {
655
+ light: {
656
+ type: "hex",
657
+ value: "#000000",
658
+ },
659
+ },
660
+ font_name: null,
661
+ font_size: "body_l",
662
+ font_weight: "regular",
663
+ font_weight_int: 400,
664
+ horizontal_alignment: "leading",
665
+ id: "VNIt-KbgMy",
666
+ margin: {
667
+ bottom: 0,
668
+ leading: 0,
669
+ top: 0,
670
+ trailing: 0,
671
+ },
672
+ name: "",
673
+ padding: {
674
+ bottom: 0,
675
+ leading: 0,
676
+ top: 0,
677
+ trailing: 0,
696
678
  },
697
- components: [],
698
679
  size: {
699
- width: { type: "fixed", value: 500 },
700
- height: { type: "fixed", value: 500 },
680
+ height: {
681
+ type: "fit",
682
+ value: null,
683
+ },
684
+ width: {
685
+ type: "fit",
686
+ value: null,
687
+ },
701
688
  },
702
- id: "badge-zstack-base",
703
- name: "badge-zstack-base",
689
+ text_lid: "id1",
690
+ type: "text",
704
691
  },
705
692
  {
706
- type: "stack",
707
- dimension: {
708
- type: "zlayer",
709
- alignment: "center",
710
- },
711
- components: [],
712
- size: {
713
- width: { type: "fixed", value: 500 },
714
- height: { type: "fixed", value: 500 },
715
- },
716
- id: "badge-zstack-top_leading",
717
- name: "badge-zstack-top_leading",
693
+ background: null,
694
+ background_color: null,
718
695
  badge: {
696
+ alignment: "top_leading",
719
697
  stack: {
698
+ background: {
699
+ type: "color",
700
+ value: {
701
+ light: {
702
+ type: "hex",
703
+ value: "#11D483FF",
704
+ },
705
+ },
706
+ },
707
+ background_color: {
708
+ light: {
709
+ type: "hex",
710
+ value: "#11D483FF",
711
+ },
712
+ },
713
+ badge: null,
714
+ border: null,
715
+ components: [
716
+ {
717
+ background_color: null,
718
+ color: {
719
+ light: {
720
+ type: "hex",
721
+ value: "#000000",
722
+ },
723
+ },
724
+ font_name: null,
725
+ font_size: "body_l",
726
+ font_weight: "regular",
727
+ font_weight_int: 400,
728
+ horizontal_alignment: "center",
729
+ id: "XJmn-sdQXj",
730
+ margin: {
731
+ bottom: 0,
732
+ leading: 0,
733
+ top: 0,
734
+ trailing: 0,
735
+ },
736
+ name: "",
737
+ padding: {
738
+ bottom: 0,
739
+ leading: 0,
740
+ top: 0,
741
+ trailing: 0,
742
+ },
743
+ size: {
744
+ height: {
745
+ type: "fit",
746
+ value: null,
747
+ },
748
+ width: {
749
+ type: "fit",
750
+ value: null,
751
+ },
752
+ },
753
+ text_lid: "id1",
754
+ type: "text",
755
+ },
756
+ ],
757
+ dimension: {
758
+ alignment: "center",
759
+ distribution: "center",
760
+ type: "vertical",
761
+ },
762
+ id: "pEc1t-ZTg1",
763
+ margin: {
764
+ bottom: 0,
765
+ leading: 0,
766
+ top: 0,
767
+ trailing: 0,
768
+ },
769
+ name: "",
770
+ padding: {
771
+ bottom: 4,
772
+ leading: 8,
773
+ top: 4,
774
+ trailing: 8,
775
+ },
776
+ shadow: null,
777
+ shape: {
778
+ corners: {
779
+ bottom_leading: 8,
780
+ bottom_trailing: 8,
781
+ top_leading: 8,
782
+ top_trailing: 8,
783
+ },
784
+ type: "rectangle",
785
+ },
786
+ size: {
787
+ height: {
788
+ type: "fit",
789
+ value: null,
790
+ },
791
+ width: {
792
+ type: "fit",
793
+ value: null,
794
+ },
795
+ },
796
+ spacing: 0,
720
797
  type: "stack",
721
- components: [],
722
- },
723
- style: "overlay",
724
- alignment: "top_leading",
725
- shape: {
726
- type: "rectangle",
727
- corners: {
728
- top_leading: 4,
729
- top_trailing: 4,
730
- bottom_leading: 4,
731
- bottom_trailing: 4,
732
- },
733
- },
734
- padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
735
- margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
736
- text_lid: "badge",
737
- color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
738
- font_weight: "bold",
739
- font_size: "body_s",
740
- horizontal_alignment: "center",
741
- background_color: {
742
- light: { type: "hex", value: "#47aab1" },
743
798
  },
799
+ style: "nested",
744
800
  },
745
- },
746
- {
747
- type: "stack",
801
+ border: null,
802
+ components: [],
748
803
  dimension: {
749
- type: "zlayer",
750
- alignment: "center",
804
+ alignment: "leading",
805
+ distribution: "start",
806
+ type: "vertical",
807
+ },
808
+ id: "5XAOKjFZMB",
809
+ margin: {
810
+ bottom: 0,
811
+ leading: 0,
812
+ top: 0,
813
+ trailing: 0,
814
+ },
815
+ name: "",
816
+ padding: {
817
+ bottom: 0,
818
+ leading: 0,
819
+ top: 0,
820
+ trailing: 0,
821
+ },
822
+ shadow: null,
823
+ shape: {
824
+ corners: {
825
+ bottom_leading: 8,
826
+ bottom_trailing: 8,
827
+ top_leading: 8,
828
+ top_trailing: 8,
829
+ },
830
+ type: "rectangle",
751
831
  },
752
- components: [],
753
832
  size: {
754
- width: { type: "fixed", value: 500 },
755
- height: { type: "fixed", value: 500 },
833
+ height: {
834
+ type: "fill",
835
+ value: null,
836
+ },
837
+ width: {
838
+ type: "fill",
839
+ value: null,
840
+ },
756
841
  },
757
- id: "badge-zstack-top_leading",
758
- name: "badge-zstack-top_leading",
842
+ spacing: 0,
843
+ type: "stack",
844
+ },
845
+ {
846
+ background: null,
847
+ background_color: null,
759
848
  badge: {
849
+ alignment: "top",
760
850
  stack: {
851
+ background: {
852
+ type: "color",
853
+ value: {
854
+ light: {
855
+ type: "hex",
856
+ value: "#11D483FF",
857
+ },
858
+ },
859
+ },
860
+ background_color: {
861
+ light: {
862
+ type: "hex",
863
+ value: "#11D483FF",
864
+ },
865
+ },
866
+ badge: null,
867
+ border: null,
868
+ components: [
869
+ {
870
+ background_color: null,
871
+ color: {
872
+ light: {
873
+ type: "hex",
874
+ value: "#000000",
875
+ },
876
+ },
877
+ font_name: null,
878
+ font_size: "body_l",
879
+ font_weight: "regular",
880
+ font_weight_int: 400,
881
+ horizontal_alignment: "center",
882
+ id: "60Zs_3AB08",
883
+ margin: {
884
+ bottom: 0,
885
+ leading: 0,
886
+ top: 0,
887
+ trailing: 0,
888
+ },
889
+ name: "",
890
+ padding: {
891
+ bottom: 0,
892
+ leading: 0,
893
+ top: 0,
894
+ trailing: 0,
895
+ },
896
+ size: {
897
+ height: {
898
+ type: "fit",
899
+ value: null,
900
+ },
901
+ width: {
902
+ type: "fit",
903
+ value: null,
904
+ },
905
+ },
906
+ text_lid: "id1",
907
+ type: "text",
908
+ },
909
+ ],
910
+ dimension: {
911
+ alignment: "center",
912
+ distribution: "center",
913
+ type: "vertical",
914
+ },
915
+ id: "1Oa86IS8Bl",
916
+ margin: {
917
+ bottom: 0,
918
+ leading: 0,
919
+ top: 0,
920
+ trailing: 0,
921
+ },
922
+ name: "",
923
+ padding: {
924
+ bottom: 4,
925
+ leading: 8,
926
+ top: 4,
927
+ trailing: 8,
928
+ },
929
+ shadow: null,
930
+ shape: {
931
+ corners: {
932
+ bottom_leading: 8,
933
+ bottom_trailing: 8,
934
+ top_leading: 8,
935
+ top_trailing: 8,
936
+ },
937
+ type: "rectangle",
938
+ },
939
+ size: {
940
+ height: {
941
+ type: "fit",
942
+ value: null,
943
+ },
944
+ width: {
945
+ type: "fit",
946
+ value: null,
947
+ },
948
+ },
949
+ spacing: 0,
761
950
  type: "stack",
762
- components: [],
763
- },
764
- style: "overlay",
765
- alignment: "top",
766
- shape: {
767
- type: "rectangle",
768
- corners: {
769
- top_leading: 4,
770
- top_trailing: 4,
771
- bottom_leading: 4,
772
- bottom_trailing: 4,
773
- },
774
- },
775
- padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
776
- margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
777
- text_lid: "badge",
778
- color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
779
- font_weight: "bold",
780
- font_size: "body_s",
781
- horizontal_alignment: "center",
782
- background_color: {
783
- light: { type: "hex", value: "#47aab1" },
784
951
  },
952
+ style: "nested",
785
953
  },
786
- },
787
- {
788
- type: "stack",
954
+ border: null,
955
+ components: [],
789
956
  dimension: {
790
- type: "zlayer",
791
- alignment: "center",
957
+ alignment: "leading",
958
+ distribution: "start",
959
+ type: "vertical",
960
+ },
961
+ id: "90kssRsjvg",
962
+ margin: {
963
+ bottom: 0,
964
+ leading: 0,
965
+ top: 0,
966
+ trailing: 0,
967
+ },
968
+ name: "",
969
+ padding: {
970
+ bottom: 0,
971
+ leading: 0,
972
+ top: 0,
973
+ trailing: 0,
974
+ },
975
+ shadow: null,
976
+ shape: {
977
+ corners: {
978
+ bottom_leading: 8,
979
+ bottom_trailing: 8,
980
+ top_leading: 8,
981
+ top_trailing: 8,
982
+ },
983
+ type: "rectangle",
792
984
  },
793
- components: [],
794
985
  size: {
795
- width: { type: "fixed", value: 500 },
796
- height: { type: "fixed", value: 500 },
986
+ height: {
987
+ type: "fill",
988
+ value: null,
989
+ },
990
+ width: {
991
+ type: "fill",
992
+ value: null,
993
+ },
797
994
  },
798
- id: "badge-zstack-top_leading",
799
- name: "badge-zstack-top_leading",
995
+ spacing: 0,
996
+ type: "stack",
997
+ },
998
+ {
999
+ background: null,
1000
+ background_color: null,
800
1001
  badge: {
1002
+ alignment: "top_trailing",
801
1003
  stack: {
1004
+ background: {
1005
+ type: "color",
1006
+ value: {
1007
+ light: {
1008
+ type: "hex",
1009
+ value: "#11D483FF",
1010
+ },
1011
+ },
1012
+ },
1013
+ background_color: {
1014
+ light: {
1015
+ type: "hex",
1016
+ value: "#11D483FF",
1017
+ },
1018
+ },
1019
+ badge: null,
1020
+ border: null,
1021
+ components: [
1022
+ {
1023
+ background_color: null,
1024
+ color: {
1025
+ light: {
1026
+ type: "hex",
1027
+ value: "#000000",
1028
+ },
1029
+ },
1030
+ font_name: null,
1031
+ font_size: "body_l",
1032
+ font_weight: "regular",
1033
+ font_weight_int: 400,
1034
+ horizontal_alignment: "center",
1035
+ id: "702_1vQ1dR",
1036
+ margin: {
1037
+ bottom: 0,
1038
+ leading: 0,
1039
+ top: 0,
1040
+ trailing: 0,
1041
+ },
1042
+ name: "",
1043
+ padding: {
1044
+ bottom: 0,
1045
+ leading: 0,
1046
+ top: 0,
1047
+ trailing: 0,
1048
+ },
1049
+ size: {
1050
+ height: {
1051
+ type: "fit",
1052
+ value: null,
1053
+ },
1054
+ width: {
1055
+ type: "fit",
1056
+ value: null,
1057
+ },
1058
+ },
1059
+ text_lid: "id1",
1060
+ type: "text",
1061
+ },
1062
+ ],
1063
+ dimension: {
1064
+ alignment: "center",
1065
+ distribution: "center",
1066
+ type: "vertical",
1067
+ },
1068
+ id: "ieguZ4b9o6",
1069
+ margin: {
1070
+ bottom: 0,
1071
+ leading: 0,
1072
+ top: 0,
1073
+ trailing: 0,
1074
+ },
1075
+ name: "",
1076
+ padding: {
1077
+ bottom: 4,
1078
+ leading: 8,
1079
+ top: 4,
1080
+ trailing: 8,
1081
+ },
1082
+ shadow: null,
1083
+ shape: {
1084
+ corners: {
1085
+ bottom_leading: 8,
1086
+ bottom_trailing: 8,
1087
+ top_leading: 8,
1088
+ top_trailing: 8,
1089
+ },
1090
+ type: "rectangle",
1091
+ },
1092
+ size: {
1093
+ height: {
1094
+ type: "fit",
1095
+ value: null,
1096
+ },
1097
+ width: {
1098
+ type: "fit",
1099
+ value: null,
1100
+ },
1101
+ },
1102
+ spacing: 0,
802
1103
  type: "stack",
803
- components: [],
804
- },
805
- style: "overlay",
806
- alignment: "top_trailing",
807
- shape: {
808
- type: "rectangle",
809
- corners: {
810
- top_leading: 4,
811
- top_trailing: 4,
812
- bottom_leading: 4,
813
- bottom_trailing: 4,
814
- },
815
- },
816
- padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
817
- margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
818
- text_lid: "badge",
819
- color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
820
- font_weight: "bold",
821
- font_size: "body_s",
822
- horizontal_alignment: "center",
823
- background_color: {
824
- light: { type: "hex", value: "#47aab1" },
825
1104
  },
1105
+ style: "nested",
826
1106
  },
827
- },
828
- {
829
- type: "stack",
1107
+ border: null,
1108
+ components: [],
830
1109
  dimension: {
831
- type: "zlayer",
832
- alignment: "center",
1110
+ alignment: "leading",
1111
+ distribution: "start",
1112
+ type: "vertical",
1113
+ },
1114
+ id: "qb-tcqZNir",
1115
+ margin: {
1116
+ bottom: 0,
1117
+ leading: 0,
1118
+ top: 0,
1119
+ trailing: 0,
1120
+ },
1121
+ name: "",
1122
+ padding: {
1123
+ bottom: 0,
1124
+ leading: 0,
1125
+ top: 0,
1126
+ trailing: 0,
1127
+ },
1128
+ shadow: null,
1129
+ shape: {
1130
+ corners: {
1131
+ bottom_leading: 8,
1132
+ bottom_trailing: 8,
1133
+ top_leading: 8,
1134
+ top_trailing: 8,
1135
+ },
1136
+ type: "rectangle",
833
1137
  },
834
- components: [],
835
1138
  size: {
836
- width: { type: "fixed", value: 500 },
837
- height: { type: "fixed", value: 500 },
1139
+ height: {
1140
+ type: "fill",
1141
+ value: null,
1142
+ },
1143
+ width: {
1144
+ type: "fill",
1145
+ value: null,
1146
+ },
838
1147
  },
839
- id: "badge-zstack-top_leading",
840
- name: "badge-zstack-top_leading",
1148
+ spacing: 0,
1149
+ type: "stack",
1150
+ },
1151
+ {
1152
+ background: null,
1153
+ background_color: null,
841
1154
  badge: {
1155
+ alignment: "bottom_leading",
842
1156
  stack: {
1157
+ background: {
1158
+ type: "color",
1159
+ value: {
1160
+ light: {
1161
+ type: "hex",
1162
+ value: "#11D483FF",
1163
+ },
1164
+ },
1165
+ },
1166
+ background_color: {
1167
+ light: {
1168
+ type: "hex",
1169
+ value: "#11D483FF",
1170
+ },
1171
+ },
1172
+ badge: null,
1173
+ border: null,
1174
+ components: [
1175
+ {
1176
+ background_color: null,
1177
+ color: {
1178
+ light: {
1179
+ type: "hex",
1180
+ value: "#000000",
1181
+ },
1182
+ },
1183
+ font_name: null,
1184
+ font_size: "body_l",
1185
+ font_weight: "regular",
1186
+ font_weight_int: 400,
1187
+ horizontal_alignment: "center",
1188
+ id: "rw0LciXvUN",
1189
+ margin: {
1190
+ bottom: 0,
1191
+ leading: 0,
1192
+ top: 0,
1193
+ trailing: 0,
1194
+ },
1195
+ name: "",
1196
+ padding: {
1197
+ bottom: 0,
1198
+ leading: 0,
1199
+ top: 0,
1200
+ trailing: 0,
1201
+ },
1202
+ size: {
1203
+ height: {
1204
+ type: "fit",
1205
+ value: null,
1206
+ },
1207
+ width: {
1208
+ type: "fit",
1209
+ value: null,
1210
+ },
1211
+ },
1212
+ text_lid: "id1",
1213
+ type: "text",
1214
+ },
1215
+ ],
1216
+ dimension: {
1217
+ alignment: "center",
1218
+ distribution: "center",
1219
+ type: "vertical",
1220
+ },
1221
+ id: "XO3TEg3ZN7",
1222
+ margin: {
1223
+ bottom: 0,
1224
+ leading: 0,
1225
+ top: 0,
1226
+ trailing: 0,
1227
+ },
1228
+ name: "",
1229
+ padding: {
1230
+ bottom: 4,
1231
+ leading: 8,
1232
+ top: 4,
1233
+ trailing: 8,
1234
+ },
1235
+ shadow: null,
1236
+ shape: {
1237
+ corners: {
1238
+ bottom_leading: 8,
1239
+ bottom_trailing: 8,
1240
+ top_leading: 8,
1241
+ top_trailing: 8,
1242
+ },
1243
+ type: "rectangle",
1244
+ },
1245
+ size: {
1246
+ height: {
1247
+ type: "fit",
1248
+ value: null,
1249
+ },
1250
+ width: {
1251
+ type: "fit",
1252
+ value: null,
1253
+ },
1254
+ },
1255
+ spacing: 0,
843
1256
  type: "stack",
844
- components: [],
845
- },
846
- style: "overlay",
847
- alignment: "bottom_leading",
848
- shape: {
849
- type: "rectangle",
850
- corners: {
851
- top_leading: 4,
852
- top_trailing: 4,
853
- bottom_leading: 4,
854
- bottom_trailing: 4,
855
- },
856
- },
857
- padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
858
- margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
859
- text_lid: "badge",
860
- color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
861
- font_weight: "bold",
862
- font_size: "body_s",
863
- horizontal_alignment: "center",
864
- background_color: {
865
- light: { type: "hex", value: "#47aab1" },
866
1257
  },
1258
+ style: "nested",
867
1259
  },
868
- },
869
- {
870
- type: "stack",
1260
+ border: null,
1261
+ components: [],
871
1262
  dimension: {
872
- type: "zlayer",
873
- alignment: "center",
1263
+ alignment: "leading",
1264
+ distribution: "start",
1265
+ type: "vertical",
1266
+ },
1267
+ id: "cL3VQsRCX1",
1268
+ margin: {
1269
+ bottom: 0,
1270
+ leading: 0,
1271
+ top: 0,
1272
+ trailing: 0,
1273
+ },
1274
+ name: "",
1275
+ padding: {
1276
+ bottom: 0,
1277
+ leading: 0,
1278
+ top: 0,
1279
+ trailing: 0,
1280
+ },
1281
+ shadow: null,
1282
+ shape: {
1283
+ corners: {
1284
+ bottom_leading: 8,
1285
+ bottom_trailing: 8,
1286
+ top_leading: 8,
1287
+ top_trailing: 8,
1288
+ },
1289
+ type: "rectangle",
874
1290
  },
875
- components: [],
876
1291
  size: {
877
- width: { type: "fixed", value: 500 },
878
- height: { type: "fixed", value: 500 },
1292
+ height: {
1293
+ type: "fill",
1294
+ value: null,
1295
+ },
1296
+ width: {
1297
+ type: "fill",
1298
+ value: null,
1299
+ },
879
1300
  },
880
- id: "badge-zstack-top_leading",
881
- name: "badge-zstack-top_leading",
1301
+ spacing: 0,
1302
+ type: "stack",
1303
+ },
1304
+ {
1305
+ background: null,
1306
+ background_color: null,
882
1307
  badge: {
1308
+ alignment: "bottom",
883
1309
  stack: {
1310
+ background: {
1311
+ type: "color",
1312
+ value: {
1313
+ light: {
1314
+ type: "hex",
1315
+ value: "#11D483FF",
1316
+ },
1317
+ },
1318
+ },
1319
+ background_color: {
1320
+ light: {
1321
+ type: "hex",
1322
+ value: "#11D483FF",
1323
+ },
1324
+ },
1325
+ badge: null,
1326
+ border: null,
1327
+ components: [
1328
+ {
1329
+ background_color: null,
1330
+ color: {
1331
+ light: {
1332
+ type: "hex",
1333
+ value: "#000000",
1334
+ },
1335
+ },
1336
+ font_name: null,
1337
+ font_size: "body_l",
1338
+ font_weight: "regular",
1339
+ font_weight_int: 400,
1340
+ horizontal_alignment: "center",
1341
+ id: "pnjRUqk3vX",
1342
+ margin: {
1343
+ bottom: 0,
1344
+ leading: 0,
1345
+ top: 0,
1346
+ trailing: 0,
1347
+ },
1348
+ name: "",
1349
+ padding: {
1350
+ bottom: 0,
1351
+ leading: 0,
1352
+ top: 0,
1353
+ trailing: 0,
1354
+ },
1355
+ size: {
1356
+ height: {
1357
+ type: "fit",
1358
+ value: null,
1359
+ },
1360
+ width: {
1361
+ type: "fit",
1362
+ value: null,
1363
+ },
1364
+ },
1365
+ text_lid: "id1",
1366
+ type: "text",
1367
+ },
1368
+ ],
1369
+ dimension: {
1370
+ alignment: "center",
1371
+ distribution: "center",
1372
+ type: "vertical",
1373
+ },
1374
+ id: "A14as8xzSH",
1375
+ margin: {
1376
+ bottom: 0,
1377
+ leading: 0,
1378
+ top: 0,
1379
+ trailing: 0,
1380
+ },
1381
+ name: "",
1382
+ padding: {
1383
+ bottom: 4,
1384
+ leading: 8,
1385
+ top: 4,
1386
+ trailing: 8,
1387
+ },
1388
+ shadow: null,
1389
+ shape: {
1390
+ corners: {
1391
+ bottom_leading: 8,
1392
+ bottom_trailing: 8,
1393
+ top_leading: 8,
1394
+ top_trailing: 8,
1395
+ },
1396
+ type: "rectangle",
1397
+ },
1398
+ size: {
1399
+ height: {
1400
+ type: "fit",
1401
+ value: null,
1402
+ },
1403
+ width: {
1404
+ type: "fit",
1405
+ value: null,
1406
+ },
1407
+ },
1408
+ spacing: 0,
884
1409
  type: "stack",
885
- components: [],
886
- },
887
- style: "overlay",
888
- alignment: "bottom",
889
- shape: {
890
- type: "rectangle",
891
- corners: {
892
- top_leading: 4,
893
- top_trailing: 4,
894
- bottom_leading: 4,
895
- bottom_trailing: 4,
896
- },
897
- },
898
- padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
899
- margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
900
- text_lid: "badge",
901
- color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
902
- font_weight: "bold",
903
- font_size: "body_s",
904
- horizontal_alignment: "center",
905
- background_color: {
906
- light: { type: "hex", value: "#47aab1" },
907
1410
  },
1411
+ style: "nested",
908
1412
  },
909
- },
910
- {
911
- type: "stack",
1413
+ border: null,
1414
+ components: [],
912
1415
  dimension: {
913
- type: "zlayer",
914
- alignment: "center",
1416
+ alignment: "leading",
1417
+ distribution: "start",
1418
+ type: "vertical",
1419
+ },
1420
+ id: "OvuAwaXhOf",
1421
+ margin: {
1422
+ bottom: 0,
1423
+ leading: 0,
1424
+ top: 0,
1425
+ trailing: 0,
1426
+ },
1427
+ name: "",
1428
+ padding: {
1429
+ bottom: 0,
1430
+ leading: 0,
1431
+ top: 0,
1432
+ trailing: 0,
1433
+ },
1434
+ shadow: null,
1435
+ shape: {
1436
+ corners: {
1437
+ bottom_leading: 8,
1438
+ bottom_trailing: 8,
1439
+ top_leading: 8,
1440
+ top_trailing: 8,
1441
+ },
1442
+ type: "rectangle",
915
1443
  },
916
- components: [],
917
1444
  size: {
918
- width: { type: "fixed", value: 500 },
919
- height: { type: "fixed", value: 500 },
1445
+ height: {
1446
+ type: "fill",
1447
+ value: null,
1448
+ },
1449
+ width: {
1450
+ type: "fill",
1451
+ value: null,
1452
+ },
920
1453
  },
921
- id: "badge-zstack-top_leading",
922
- name: "badge-zstack-top_leading",
1454
+ spacing: 0,
1455
+ type: "stack",
1456
+ },
1457
+ {
1458
+ background: null,
1459
+ background_color: null,
923
1460
  badge: {
1461
+ alignment: "bottom_trailing",
924
1462
  stack: {
1463
+ background: {
1464
+ type: "color",
1465
+ value: {
1466
+ light: {
1467
+ type: "hex",
1468
+ value: "#11D483FF",
1469
+ },
1470
+ },
1471
+ },
1472
+ background_color: {
1473
+ light: {
1474
+ type: "hex",
1475
+ value: "#11D483FF",
1476
+ },
1477
+ },
1478
+ badge: null,
1479
+ border: null,
1480
+ components: [
1481
+ {
1482
+ background_color: null,
1483
+ color: {
1484
+ light: {
1485
+ type: "hex",
1486
+ value: "#000000",
1487
+ },
1488
+ },
1489
+ font_name: null,
1490
+ font_size: "body_l",
1491
+ font_weight: "regular",
1492
+ font_weight_int: 400,
1493
+ horizontal_alignment: "center",
1494
+ id: "4CwpRZoreT",
1495
+ margin: {
1496
+ bottom: 0,
1497
+ leading: 0,
1498
+ top: 0,
1499
+ trailing: 0,
1500
+ },
1501
+ name: "",
1502
+ padding: {
1503
+ bottom: 0,
1504
+ leading: 0,
1505
+ top: 0,
1506
+ trailing: 0,
1507
+ },
1508
+ size: {
1509
+ height: {
1510
+ type: "fit",
1511
+ value: null,
1512
+ },
1513
+ width: {
1514
+ type: "fit",
1515
+ value: null,
1516
+ },
1517
+ },
1518
+ text_lid: "id1",
1519
+ type: "text",
1520
+ },
1521
+ ],
1522
+ dimension: {
1523
+ alignment: "center",
1524
+ distribution: "center",
1525
+ type: "vertical",
1526
+ },
1527
+ id: "8dJOAHTQvq",
1528
+ margin: {
1529
+ bottom: 0,
1530
+ leading: 0,
1531
+ top: 0,
1532
+ trailing: 0,
1533
+ },
1534
+ name: "",
1535
+ padding: {
1536
+ bottom: 4,
1537
+ leading: 8,
1538
+ top: 4,
1539
+ trailing: 8,
1540
+ },
1541
+ shadow: null,
1542
+ shape: {
1543
+ corners: {
1544
+ bottom_leading: 8,
1545
+ bottom_trailing: 8,
1546
+ top_leading: 8,
1547
+ top_trailing: 8,
1548
+ },
1549
+ type: "rectangle",
1550
+ },
1551
+ size: {
1552
+ height: {
1553
+ type: "fit",
1554
+ value: null,
1555
+ },
1556
+ width: {
1557
+ type: "fit",
1558
+ value: null,
1559
+ },
1560
+ },
1561
+ spacing: 0,
925
1562
  type: "stack",
926
- components: [],
927
- },
928
- style: "overlay",
929
- alignment: "bottom_trailing",
930
- shape: {
931
- type: "rectangle",
932
- corners: {
933
- top_leading: 4,
934
- top_trailing: 4,
935
- bottom_leading: 4,
936
- bottom_trailing: 4,
937
- },
938
- },
939
- padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
940
- margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
941
- text_lid: "badge",
942
- color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
943
- font_weight: "bold",
944
- font_size: "body_s",
945
- horizontal_alignment: "center",
946
- background_color: {
947
- light: { type: "hex", value: "#47aab1" },
948
1563
  },
1564
+ style: "nested",
949
1565
  },
950
- },
951
- ] as unknown as StackProps[],
952
- border: {
953
- width: 2,
954
- color: {
955
- light: { type: "hex", value: "#47aab1" },
956
- },
957
- },
958
- shape: {
959
- type: "rectangle",
960
- corners: {
961
- top_leading: 8,
962
- top_trailing: 8,
963
- bottom_leading: 8,
964
- bottom_trailing: 8,
965
- },
966
- },
967
- spacing: 16,
968
- padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
969
- size: {
970
- width: { type: "fixed", value: 500 },
971
- height: { type: "fixed", value: 500 },
972
- },
973
- }}
974
- />
975
-
976
- <Story
977
- name="Badge - edge-to-edge top centered"
978
- args={{
979
- type: "stack",
980
- dimension: {
981
- type: "vertical",
982
- alignment: "center",
983
- distribution: "space_around",
984
- },
985
- background_color: {
986
- light: { type: "hex", value: DEFAULT_BACKGROUND_COLOR },
987
- dark: { type: "hex", value: DEFAULT_BACKGROUND_COLOR },
988
- },
989
- components,
990
- border: {
991
- width: 2,
992
- color: {
993
- light: { type: "hex", value: "#47aab1" },
994
- },
995
- },
996
- shape: {
997
- type: "rectangle",
998
- corners: {
999
- top_leading: 8,
1000
- top_trailing: 8,
1001
- bottom_leading: 8,
1002
- bottom_trailing: 8,
1003
- },
1004
- },
1005
- spacing: 16,
1006
- padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
1007
- margin: { top: 32, trailing: 16, bottom: 16, leading: 16 },
1008
- size: {
1009
- width: { type: "fixed", value: 500 },
1010
- height: { type: "fixed", value: 500 },
1011
- },
1012
- badge: {
1013
- stack: {
1014
- type: "stack",
1566
+ border: null,
1015
1567
  components: [],
1016
- },
1017
- style: "edge_to_edge",
1018
- alignment: "top",
1019
- shape: {
1020
- type: "rectangle",
1021
- corners: {
1022
- top_leading: 8,
1023
- top_trailing: 8,
1024
- bottom_leading: 8,
1025
- bottom_trailing: 8,
1568
+ dimension: {
1569
+ alignment: "leading",
1570
+ distribution: "start",
1571
+ type: "vertical",
1572
+ },
1573
+ id: "SScgUBQg0B",
1574
+ margin: {
1575
+ bottom: 0,
1576
+ leading: 0,
1577
+ top: 0,
1578
+ trailing: 0,
1579
+ },
1580
+ name: "",
1581
+ padding: {
1582
+ bottom: 0,
1583
+ leading: 0,
1584
+ top: 0,
1585
+ trailing: 0,
1586
+ },
1587
+ shadow: null,
1588
+ shape: {
1589
+ corners: {
1590
+ bottom_leading: 8,
1591
+ bottom_trailing: 8,
1592
+ top_leading: 8,
1593
+ top_trailing: 8,
1594
+ },
1595
+ type: "rectangle",
1026
1596
  },
1597
+ size: {
1598
+ height: {
1599
+ type: "fill",
1600
+ value: null,
1601
+ },
1602
+ width: {
1603
+ type: "fill",
1604
+ value: null,
1605
+ },
1606
+ },
1607
+ spacing: 0,
1608
+ type: "stack",
1027
1609
  },
1028
- padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
1029
- margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
1030
- text_lid: "badge",
1031
- color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
1032
- font_weight: "bold",
1033
- font_size: "body_s",
1034
- horizontal_alignment: "center",
1035
- background_color: {
1036
- light: { type: "hex", value: "#47aab1" },
1037
- },
1038
- },
1039
- }}
1040
- />
1041
-
1042
- <Story
1043
- name="Badge - edge-to-edge bottom centered"
1044
- args={{
1045
- type: "stack",
1610
+ ],
1046
1611
  dimension: {
1047
- type: "vertical",
1048
1612
  alignment: "center",
1049
- distribution: "space_around",
1613
+ type: "zlayer",
1050
1614
  },
1051
- background_color: {
1052
- light: { type: "hex", value: DEFAULT_BACKGROUND_COLOR },
1053
- dark: { type: "hex", value: DEFAULT_BACKGROUND_COLOR },
1615
+ id: "STJwr4dzhC",
1616
+ margin: {
1617
+ bottom: 0,
1618
+ leading: 0,
1619
+ top: 0,
1620
+ trailing: 0,
1054
1621
  },
1055
- components,
1056
- border: {
1057
- width: 2,
1058
- color: {
1059
- light: { type: "hex", value: "#47aab1" },
1060
- },
1622
+ name: "",
1623
+ padding: {
1624
+ bottom: 0,
1625
+ leading: 0,
1626
+ top: 0,
1627
+ trailing: 8,
1061
1628
  },
1629
+ shadow: null,
1062
1630
  shape: {
1063
- type: "rectangle",
1064
1631
  corners: {
1065
- top_leading: 8,
1066
- top_trailing: 8,
1067
- bottom_leading: 8,
1068
- bottom_trailing: 8,
1632
+ bottom_leading: 64,
1633
+ bottom_trailing: 32,
1634
+ top_leading: 0,
1635
+ top_trailing: 16,
1069
1636
  },
1637
+ type: "rectangle",
1070
1638
  },
1071
- spacing: 16,
1072
- padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
1073
- margin: { top: 32, trailing: 16, bottom: 16, leading: 16 },
1074
1639
  size: {
1075
- width: { type: "fixed", value: 500 },
1076
- height: { type: "fixed", value: 500 },
1077
- },
1078
- badge: {
1079
- stack: {
1080
- type: "stack",
1081
- components: [],
1082
- },
1083
- style: "edge_to_edge",
1084
- alignment: "bottom",
1085
- shape: {
1086
- type: "rectangle",
1087
- corners: {
1088
- top_leading: 8,
1089
- top_trailing: 8,
1090
- bottom_leading: 8,
1091
- bottom_trailing: 8,
1092
- },
1640
+ height: {
1641
+ type: "fixed",
1642
+ value: 300,
1093
1643
  },
1094
- padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
1095
- margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
1096
- text_lid: "badge",
1097
- color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
1098
- font_weight: "bold",
1099
- font_size: "body_s",
1100
- horizontal_alignment: "center",
1101
- background_color: {
1102
- light: { type: "hex", value: "#47aab1" },
1644
+ width: {
1645
+ type: "fixed",
1646
+ value: 300,
1103
1647
  },
1104
1648
  },
1649
+ spacing: 0,
1650
+ type: "stack",
1105
1651
  }}
1106
1652
  />
1107
1653
 
1108
1654
  <Story
1109
- name="Badge - edge-to-edge side centered"
1655
+ name="Badge - Overlaid"
1110
1656
  args={{
1111
- type: "stack",
1112
- dimension: {
1113
- type: "zlayer",
1114
- alignment: "center",
1115
- },
1116
- background_color: {
1117
- light: { type: "hex", value: DEFAULT_BACKGROUND_COLOR },
1657
+ background: null,
1658
+ background_color: null,
1659
+ badge: null,
1660
+ border: {
1661
+ color: {
1662
+ light: {
1663
+ type: "hex",
1664
+ value: "#ce7422FF",
1665
+ },
1666
+ },
1667
+ width: 4,
1118
1668
  },
1119
1669
  components: [
1120
1670
  {
1121
- type: "stack",
1122
- dimension: {
1123
- type: "zlayer",
1124
- alignment: "center",
1671
+ background_color: null,
1672
+ color: {
1673
+ light: {
1674
+ type: "hex",
1675
+ value: "#000000",
1676
+ },
1677
+ },
1678
+ font_name: null,
1679
+ font_size: "body_l",
1680
+ font_weight: "regular",
1681
+ font_weight_int: 400,
1682
+ horizontal_alignment: "leading",
1683
+ id: "VNIt-KbgMy",
1684
+ margin: {
1685
+ bottom: 0,
1686
+ leading: 0,
1687
+ top: 0,
1688
+ trailing: 0,
1689
+ },
1690
+ name: "",
1691
+ padding: {
1692
+ bottom: 0,
1693
+ leading: 0,
1694
+ top: 0,
1695
+ trailing: 0,
1125
1696
  },
1126
- components: [],
1127
1697
  size: {
1128
- width: { type: "fixed", value: 500 },
1129
- height: { type: "fixed", value: 500 },
1698
+ height: {
1699
+ type: "fit",
1700
+ value: null,
1701
+ },
1702
+ width: {
1703
+ type: "fit",
1704
+ value: null,
1705
+ },
1130
1706
  },
1131
- id: "badge-zstack-base",
1132
- name: "badge-zstack-base",
1707
+ text_lid: "id1",
1708
+ type: "text",
1133
1709
  },
1134
1710
  {
1135
- type: "stack",
1136
- dimension: {
1137
- type: "zlayer",
1138
- alignment: "center",
1139
- },
1140
- components: [],
1141
- border: {
1142
- width: 2,
1143
- color: {
1144
- light: { type: "hex", value: "#47aab1" },
1145
- },
1146
- },
1147
- size: {
1148
- width: { type: "fixed", value: 500 },
1149
- height: { type: "fixed", value: 500 },
1150
- },
1151
- id: "badge-zstack-top_leading",
1152
- name: "badge-zstack-top_leading",
1711
+ background: null,
1712
+ background_color: null,
1153
1713
  badge: {
1714
+ alignment: "top_leading",
1154
1715
  stack: {
1716
+ background: {
1717
+ type: "color",
1718
+ value: {
1719
+ light: {
1720
+ type: "hex",
1721
+ value: "#11D483FF",
1722
+ },
1723
+ },
1724
+ },
1725
+ background_color: {
1726
+ light: {
1727
+ type: "hex",
1728
+ value: "#11D483FF",
1729
+ },
1730
+ },
1731
+ badge: null,
1732
+ border: null,
1733
+ components: [
1734
+ {
1735
+ background_color: null,
1736
+ color: {
1737
+ light: {
1738
+ type: "hex",
1739
+ value: "#000000",
1740
+ },
1741
+ },
1742
+ font_name: null,
1743
+ font_size: "body_l",
1744
+ font_weight: "regular",
1745
+ font_weight_int: 400,
1746
+ horizontal_alignment: "center",
1747
+ id: "XJmn-sdQXj",
1748
+ margin: {
1749
+ bottom: 0,
1750
+ leading: 0,
1751
+ top: 0,
1752
+ trailing: 0,
1753
+ },
1754
+ name: "",
1755
+ padding: {
1756
+ bottom: 0,
1757
+ leading: 0,
1758
+ top: 0,
1759
+ trailing: 0,
1760
+ },
1761
+ size: {
1762
+ height: {
1763
+ type: "fit",
1764
+ value: null,
1765
+ },
1766
+ width: {
1767
+ type: "fit",
1768
+ value: null,
1769
+ },
1770
+ },
1771
+ text_lid: "id1",
1772
+ type: "text",
1773
+ },
1774
+ ],
1775
+ dimension: {
1776
+ alignment: "center",
1777
+ distribution: "center",
1778
+ type: "vertical",
1779
+ },
1780
+ id: "pEc1t-ZTg1",
1781
+ margin: {
1782
+ bottom: 0,
1783
+ leading: 0,
1784
+ top: 0,
1785
+ trailing: 0,
1786
+ },
1787
+ name: "",
1788
+ padding: {
1789
+ bottom: 4,
1790
+ leading: 8,
1791
+ top: 4,
1792
+ trailing: 8,
1793
+ },
1794
+ shadow: null,
1795
+ shape: {
1796
+ corners: {
1797
+ bottom_leading: 8,
1798
+ bottom_trailing: 8,
1799
+ top_leading: 8,
1800
+ top_trailing: 8,
1801
+ },
1802
+ type: "rectangle",
1803
+ },
1804
+ size: {
1805
+ height: {
1806
+ type: "fit",
1807
+ value: null,
1808
+ },
1809
+ width: {
1810
+ type: "fit",
1811
+ value: null,
1812
+ },
1813
+ },
1814
+ spacing: 0,
1155
1815
  type: "stack",
1156
- components: [],
1157
- },
1158
- style: "edge_to_edge",
1159
- alignment: "top_leading",
1160
- shape: {
1161
- type: "rectangle",
1162
- corners: {
1163
- top_leading: 8,
1164
- top_trailing: 8,
1165
- bottom_leading: 8,
1166
- bottom_trailing: 8,
1167
- },
1168
- },
1169
- padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
1170
- margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
1171
- text_lid: "badge",
1172
- color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
1173
- font_weight: "bold",
1174
- font_size: "body_s",
1175
- horizontal_alignment: "center",
1176
- background_color: {
1177
- light: { type: "hex", value: "#47aab1" },
1178
1816
  },
1817
+ style: "overlay",
1179
1818
  },
1819
+ border: null,
1820
+ components: [],
1821
+ dimension: {
1822
+ alignment: "leading",
1823
+ distribution: "start",
1824
+ type: "vertical",
1825
+ },
1826
+ id: "5XAOKjFZMB",
1827
+ margin: {
1828
+ bottom: 0,
1829
+ leading: 0,
1830
+ top: 0,
1831
+ trailing: 0,
1832
+ },
1833
+ name: "",
1834
+ padding: {
1835
+ bottom: 0,
1836
+ leading: 0,
1837
+ top: 0,
1838
+ trailing: 0,
1839
+ },
1840
+ shadow: null,
1180
1841
  shape: {
1181
- type: "rectangle",
1182
1842
  corners: {
1183
- top_leading: 8,
1184
- top_trailing: 8,
1185
1843
  bottom_leading: 8,
1186
1844
  bottom_trailing: 8,
1845
+ top_leading: 8,
1846
+ top_trailing: 8,
1187
1847
  },
1188
- },
1189
- },
1190
- {
1191
- type: "stack",
1192
- dimension: {
1193
- type: "zlayer",
1194
- alignment: "center",
1195
- },
1196
- components: [],
1197
- border: {
1198
- width: 2,
1199
- color: {
1200
- light: { type: "hex", value: "#47aab1" },
1201
- },
1848
+ type: "rectangle",
1202
1849
  },
1203
1850
  size: {
1204
- width: { type: "fixed", value: 500 },
1205
- height: { type: "fixed", value: 500 },
1851
+ height: {
1852
+ type: "fill",
1853
+ value: null,
1854
+ },
1855
+ width: {
1856
+ type: "fill",
1857
+ value: null,
1858
+ },
1206
1859
  },
1207
- id: "badge-zstack-top_leading",
1208
- name: "badge-zstack-top_leading",
1860
+ spacing: 0,
1861
+ type: "stack",
1862
+ },
1863
+ {
1864
+ background: null,
1865
+ background_color: null,
1209
1866
  badge: {
1867
+ alignment: "top",
1210
1868
  stack: {
1869
+ background: {
1870
+ type: "color",
1871
+ value: {
1872
+ light: {
1873
+ type: "hex",
1874
+ value: "#11D483FF",
1875
+ },
1876
+ },
1877
+ },
1878
+ background_color: {
1879
+ light: {
1880
+ type: "hex",
1881
+ value: "#11D483FF",
1882
+ },
1883
+ },
1884
+ badge: null,
1885
+ border: null,
1886
+ components: [
1887
+ {
1888
+ background_color: null,
1889
+ color: {
1890
+ light: {
1891
+ type: "hex",
1892
+ value: "#000000",
1893
+ },
1894
+ },
1895
+ font_name: null,
1896
+ font_size: "body_l",
1897
+ font_weight: "regular",
1898
+ font_weight_int: 400,
1899
+ horizontal_alignment: "center",
1900
+ id: "60Zs_3AB08",
1901
+ margin: {
1902
+ bottom: 0,
1903
+ leading: 0,
1904
+ top: 0,
1905
+ trailing: 0,
1906
+ },
1907
+ name: "",
1908
+ padding: {
1909
+ bottom: 0,
1910
+ leading: 0,
1911
+ top: 0,
1912
+ trailing: 0,
1913
+ },
1914
+ size: {
1915
+ height: {
1916
+ type: "fit",
1917
+ value: null,
1918
+ },
1919
+ width: {
1920
+ type: "fit",
1921
+ value: null,
1922
+ },
1923
+ },
1924
+ text_lid: "id1",
1925
+ type: "text",
1926
+ },
1927
+ ],
1928
+ dimension: {
1929
+ alignment: "center",
1930
+ distribution: "center",
1931
+ type: "vertical",
1932
+ },
1933
+ id: "1Oa86IS8Bl",
1934
+ margin: {
1935
+ bottom: 0,
1936
+ leading: 0,
1937
+ top: 0,
1938
+ trailing: 0,
1939
+ },
1940
+ name: "",
1941
+ padding: {
1942
+ bottom: 4,
1943
+ leading: 8,
1944
+ top: 4,
1945
+ trailing: 8,
1946
+ },
1947
+ shadow: null,
1948
+ shape: {
1949
+ corners: {
1950
+ bottom_leading: 8,
1951
+ bottom_trailing: 8,
1952
+ top_leading: 8,
1953
+ top_trailing: 8,
1954
+ },
1955
+ type: "rectangle",
1956
+ },
1957
+ size: {
1958
+ height: {
1959
+ type: "fit",
1960
+ value: null,
1961
+ },
1962
+ width: {
1963
+ type: "fit",
1964
+ value: null,
1965
+ },
1966
+ },
1967
+ spacing: 0,
1211
1968
  type: "stack",
1212
- components: [],
1213
- },
1214
- style: "edge_to_edge",
1215
- alignment: "top_trailing",
1216
- shape: {
1217
- type: "rectangle",
1218
- corners: {
1219
- top_leading: 8,
1220
- top_trailing: 8,
1221
- bottom_leading: 8,
1222
- bottom_trailing: 8,
1223
- },
1224
- },
1225
- padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
1226
- margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
1227
- text_lid: "badge",
1228
- color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
1229
- font_weight: "bold",
1230
- font_size: "body_s",
1231
- horizontal_alignment: "center",
1232
- background_color: {
1233
- light: { type: "hex", value: "#47aab1" },
1234
1969
  },
1970
+ style: "overlay",
1235
1971
  },
1972
+ border: null,
1973
+ components: [],
1974
+ dimension: {
1975
+ alignment: "leading",
1976
+ distribution: "start",
1977
+ type: "vertical",
1978
+ },
1979
+ id: "90kssRsjvg",
1980
+ margin: {
1981
+ bottom: 0,
1982
+ leading: 0,
1983
+ top: 0,
1984
+ trailing: 0,
1985
+ },
1986
+ name: "",
1987
+ padding: {
1988
+ bottom: 0,
1989
+ leading: 0,
1990
+ top: 0,
1991
+ trailing: 0,
1992
+ },
1993
+ shadow: null,
1236
1994
  shape: {
1237
- type: "rectangle",
1238
1995
  corners: {
1239
- top_leading: 8,
1240
- top_trailing: 8,
1241
1996
  bottom_leading: 8,
1242
1997
  bottom_trailing: 8,
1998
+ top_leading: 8,
1999
+ top_trailing: 8,
2000
+ },
2001
+ type: "rectangle",
2002
+ },
2003
+ size: {
2004
+ height: {
2005
+ type: "fill",
2006
+ value: null,
2007
+ },
2008
+ width: {
2009
+ type: "fill",
2010
+ value: null,
1243
2011
  },
1244
2012
  },
2013
+ spacing: 0,
2014
+ type: "stack",
1245
2015
  },
1246
2016
  {
1247
- type: "stack",
1248
- dimension: {
1249
- type: "zlayer",
1250
- alignment: "center",
2017
+ background: null,
2018
+ background_color: null,
2019
+ badge: {
2020
+ alignment: "top_trailing",
2021
+ stack: {
2022
+ background: {
2023
+ type: "color",
2024
+ value: {
2025
+ light: {
2026
+ type: "hex",
2027
+ value: "#11D483FF",
2028
+ },
2029
+ },
2030
+ },
2031
+ background_color: {
2032
+ light: {
2033
+ type: "hex",
2034
+ value: "#11D483FF",
2035
+ },
2036
+ },
2037
+ badge: null,
2038
+ border: null,
2039
+ components: [
2040
+ {
2041
+ background_color: null,
2042
+ color: {
2043
+ light: {
2044
+ type: "hex",
2045
+ value: "#000000",
2046
+ },
2047
+ },
2048
+ font_name: null,
2049
+ font_size: "body_l",
2050
+ font_weight: "regular",
2051
+ font_weight_int: 400,
2052
+ horizontal_alignment: "center",
2053
+ id: "702_1vQ1dR",
2054
+ margin: {
2055
+ bottom: 0,
2056
+ leading: 0,
2057
+ top: 0,
2058
+ trailing: 0,
2059
+ },
2060
+ name: "",
2061
+ padding: {
2062
+ bottom: 0,
2063
+ leading: 0,
2064
+ top: 0,
2065
+ trailing: 0,
2066
+ },
2067
+ size: {
2068
+ height: {
2069
+ type: "fit",
2070
+ value: null,
2071
+ },
2072
+ width: {
2073
+ type: "fit",
2074
+ value: null,
2075
+ },
2076
+ },
2077
+ text_lid: "id1",
2078
+ type: "text",
2079
+ },
2080
+ ],
2081
+ dimension: {
2082
+ alignment: "center",
2083
+ distribution: "center",
2084
+ type: "vertical",
2085
+ },
2086
+ id: "ieguZ4b9o6",
2087
+ margin: {
2088
+ bottom: 0,
2089
+ leading: 0,
2090
+ top: 0,
2091
+ trailing: 0,
2092
+ },
2093
+ name: "",
2094
+ padding: {
2095
+ bottom: 4,
2096
+ leading: 8,
2097
+ top: 4,
2098
+ trailing: 8,
2099
+ },
2100
+ shadow: null,
2101
+ shape: {
2102
+ corners: {
2103
+ bottom_leading: 8,
2104
+ bottom_trailing: 8,
2105
+ top_leading: 8,
2106
+ top_trailing: 8,
2107
+ },
2108
+ type: "rectangle",
2109
+ },
2110
+ size: {
2111
+ height: {
2112
+ type: "fit",
2113
+ value: null,
2114
+ },
2115
+ width: {
2116
+ type: "fit",
2117
+ value: null,
2118
+ },
2119
+ },
2120
+ spacing: 0,
2121
+ type: "stack",
2122
+ },
2123
+ style: "overlay",
1251
2124
  },
2125
+ border: null,
1252
2126
  components: [],
1253
- border: {
1254
- width: 2,
1255
- color: {
1256
- light: { type: "hex", value: "#47aab1" },
2127
+ dimension: {
2128
+ alignment: "leading",
2129
+ distribution: "start",
2130
+ type: "vertical",
2131
+ },
2132
+ id: "qb-tcqZNir",
2133
+ margin: {
2134
+ bottom: 0,
2135
+ leading: 0,
2136
+ top: 0,
2137
+ trailing: 0,
2138
+ },
2139
+ name: "",
2140
+ padding: {
2141
+ bottom: 0,
2142
+ leading: 0,
2143
+ top: 0,
2144
+ trailing: 0,
2145
+ },
2146
+ shadow: null,
2147
+ shape: {
2148
+ corners: {
2149
+ bottom_leading: 8,
2150
+ bottom_trailing: 8,
2151
+ top_leading: 8,
2152
+ top_trailing: 8,
1257
2153
  },
2154
+ type: "rectangle",
1258
2155
  },
1259
2156
  size: {
1260
- width: { type: "fixed", value: 500 },
1261
- height: { type: "fixed", value: 500 },
2157
+ height: {
2158
+ type: "fill",
2159
+ value: null,
2160
+ },
2161
+ width: {
2162
+ type: "fill",
2163
+ value: null,
2164
+ },
1262
2165
  },
1263
- id: "badge-zstack-top_leading",
1264
- name: "badge-zstack-top_leading",
2166
+ spacing: 0,
2167
+ type: "stack",
2168
+ },
2169
+ {
2170
+ background: null,
2171
+ background_color: null,
1265
2172
  badge: {
2173
+ alignment: "bottom_leading",
1266
2174
  stack: {
2175
+ background: {
2176
+ type: "color",
2177
+ value: {
2178
+ light: {
2179
+ type: "hex",
2180
+ value: "#11D483FF",
2181
+ },
2182
+ },
2183
+ },
2184
+ background_color: {
2185
+ light: {
2186
+ type: "hex",
2187
+ value: "#11D483FF",
2188
+ },
2189
+ },
2190
+ badge: null,
2191
+ border: null,
2192
+ components: [
2193
+ {
2194
+ background_color: null,
2195
+ color: {
2196
+ light: {
2197
+ type: "hex",
2198
+ value: "#000000",
2199
+ },
2200
+ },
2201
+ font_name: null,
2202
+ font_size: "body_l",
2203
+ font_weight: "regular",
2204
+ font_weight_int: 400,
2205
+ horizontal_alignment: "center",
2206
+ id: "rw0LciXvUN",
2207
+ margin: {
2208
+ bottom: 0,
2209
+ leading: 0,
2210
+ top: 0,
2211
+ trailing: 0,
2212
+ },
2213
+ name: "",
2214
+ padding: {
2215
+ bottom: 0,
2216
+ leading: 0,
2217
+ top: 0,
2218
+ trailing: 0,
2219
+ },
2220
+ size: {
2221
+ height: {
2222
+ type: "fit",
2223
+ value: null,
2224
+ },
2225
+ width: {
2226
+ type: "fit",
2227
+ value: null,
2228
+ },
2229
+ },
2230
+ text_lid: "id1",
2231
+ type: "text",
2232
+ },
2233
+ ],
2234
+ dimension: {
2235
+ alignment: "center",
2236
+ distribution: "center",
2237
+ type: "vertical",
2238
+ },
2239
+ id: "XO3TEg3ZN7",
2240
+ margin: {
2241
+ bottom: 0,
2242
+ leading: 0,
2243
+ top: 0,
2244
+ trailing: 0,
2245
+ },
2246
+ name: "",
2247
+ padding: {
2248
+ bottom: 4,
2249
+ leading: 8,
2250
+ top: 4,
2251
+ trailing: 8,
2252
+ },
2253
+ shadow: null,
2254
+ shape: {
2255
+ corners: {
2256
+ bottom_leading: 8,
2257
+ bottom_trailing: 8,
2258
+ top_leading: 8,
2259
+ top_trailing: 8,
2260
+ },
2261
+ type: "rectangle",
2262
+ },
2263
+ size: {
2264
+ height: {
2265
+ type: "fit",
2266
+ value: null,
2267
+ },
2268
+ width: {
2269
+ type: "fit",
2270
+ value: null,
2271
+ },
2272
+ },
2273
+ spacing: 0,
1267
2274
  type: "stack",
1268
- components: [],
1269
- },
1270
- style: "edge_to_edge",
1271
- alignment: "bottom_leading",
1272
- shape: {
1273
- type: "rectangle",
1274
- corners: {
1275
- top_leading: 8,
1276
- top_trailing: 8,
1277
- bottom_leading: 8,
1278
- bottom_trailing: 8,
1279
- },
1280
- },
1281
- padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
1282
- margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
1283
- text_lid: "badge",
1284
- color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
1285
- font_weight: "bold",
1286
- font_size: "body_s",
1287
- horizontal_alignment: "center",
1288
- background_color: {
1289
- light: { type: "hex", value: "#47aab1" },
1290
2275
  },
2276
+ style: "overlay",
1291
2277
  },
2278
+ border: null,
2279
+ components: [],
2280
+ dimension: {
2281
+ alignment: "leading",
2282
+ distribution: "start",
2283
+ type: "vertical",
2284
+ },
2285
+ id: "cL3VQsRCX1",
2286
+ margin: {
2287
+ bottom: 0,
2288
+ leading: 0,
2289
+ top: 0,
2290
+ trailing: 0,
2291
+ },
2292
+ name: "",
2293
+ padding: {
2294
+ bottom: 0,
2295
+ leading: 0,
2296
+ top: 0,
2297
+ trailing: 0,
2298
+ },
2299
+ shadow: null,
1292
2300
  shape: {
1293
- type: "rectangle",
1294
2301
  corners: {
1295
- top_leading: 8,
1296
- top_trailing: 8,
1297
2302
  bottom_leading: 8,
1298
2303
  bottom_trailing: 8,
2304
+ top_leading: 8,
2305
+ top_trailing: 8,
2306
+ },
2307
+ type: "rectangle",
2308
+ },
2309
+ size: {
2310
+ height: {
2311
+ type: "fill",
2312
+ value: null,
2313
+ },
2314
+ width: {
2315
+ type: "fill",
2316
+ value: null,
1299
2317
  },
1300
2318
  },
2319
+ spacing: 0,
2320
+ type: "stack",
1301
2321
  },
1302
2322
  {
1303
- type: "stack",
1304
- dimension: {
1305
- type: "zlayer",
1306
- alignment: "center",
2323
+ background: null,
2324
+ background_color: null,
2325
+ badge: {
2326
+ alignment: "bottom",
2327
+ stack: {
2328
+ background: {
2329
+ type: "color",
2330
+ value: {
2331
+ light: {
2332
+ type: "hex",
2333
+ value: "#11D483FF",
2334
+ },
2335
+ },
2336
+ },
2337
+ background_color: {
2338
+ light: {
2339
+ type: "hex",
2340
+ value: "#11D483FF",
2341
+ },
2342
+ },
2343
+ badge: null,
2344
+ border: null,
2345
+ components: [
2346
+ {
2347
+ background_color: null,
2348
+ color: {
2349
+ light: {
2350
+ type: "hex",
2351
+ value: "#000000",
2352
+ },
2353
+ },
2354
+ font_name: null,
2355
+ font_size: "body_l",
2356
+ font_weight: "regular",
2357
+ font_weight_int: 400,
2358
+ horizontal_alignment: "center",
2359
+ id: "pnjRUqk3vX",
2360
+ margin: {
2361
+ bottom: 0,
2362
+ leading: 0,
2363
+ top: 0,
2364
+ trailing: 0,
2365
+ },
2366
+ name: "",
2367
+ padding: {
2368
+ bottom: 0,
2369
+ leading: 0,
2370
+ top: 0,
2371
+ trailing: 0,
2372
+ },
2373
+ size: {
2374
+ height: {
2375
+ type: "fit",
2376
+ value: null,
2377
+ },
2378
+ width: {
2379
+ type: "fit",
2380
+ value: null,
2381
+ },
2382
+ },
2383
+ text_lid: "id1",
2384
+ type: "text",
2385
+ },
2386
+ ],
2387
+ dimension: {
2388
+ alignment: "center",
2389
+ distribution: "center",
2390
+ type: "vertical",
2391
+ },
2392
+ id: "A14as8xzSH",
2393
+ margin: {
2394
+ bottom: 0,
2395
+ leading: 0,
2396
+ top: 0,
2397
+ trailing: 0,
2398
+ },
2399
+ name: "",
2400
+ padding: {
2401
+ bottom: 4,
2402
+ leading: 8,
2403
+ top: 4,
2404
+ trailing: 8,
2405
+ },
2406
+ shadow: null,
2407
+ shape: {
2408
+ corners: {
2409
+ bottom_leading: 8,
2410
+ bottom_trailing: 8,
2411
+ top_leading: 8,
2412
+ top_trailing: 8,
2413
+ },
2414
+ type: "rectangle",
2415
+ },
2416
+ size: {
2417
+ height: {
2418
+ type: "fit",
2419
+ value: null,
2420
+ },
2421
+ width: {
2422
+ type: "fit",
2423
+ value: null,
2424
+ },
2425
+ },
2426
+ spacing: 0,
2427
+ type: "stack",
2428
+ },
2429
+ style: "overlay",
1307
2430
  },
2431
+ border: null,
1308
2432
  components: [],
1309
- border: {
1310
- width: 2,
1311
- color: {
1312
- light: { type: "hex", value: "#47aab1" },
2433
+ dimension: {
2434
+ alignment: "leading",
2435
+ distribution: "start",
2436
+ type: "vertical",
2437
+ },
2438
+ id: "OvuAwaXhOf",
2439
+ margin: {
2440
+ bottom: 0,
2441
+ leading: 0,
2442
+ top: 0,
2443
+ trailing: 0,
2444
+ },
2445
+ name: "",
2446
+ padding: {
2447
+ bottom: 0,
2448
+ leading: 0,
2449
+ top: 0,
2450
+ trailing: 0,
2451
+ },
2452
+ shadow: null,
2453
+ shape: {
2454
+ corners: {
2455
+ bottom_leading: 8,
2456
+ bottom_trailing: 8,
2457
+ top_leading: 8,
2458
+ top_trailing: 8,
1313
2459
  },
2460
+ type: "rectangle",
1314
2461
  },
1315
2462
  size: {
1316
- width: { type: "fixed", value: 500 },
1317
- height: { type: "fixed", value: 500 },
2463
+ height: {
2464
+ type: "fill",
2465
+ value: null,
2466
+ },
2467
+ width: {
2468
+ type: "fill",
2469
+ value: null,
2470
+ },
1318
2471
  },
1319
- id: "badge-zstack-top_leading",
1320
- name: "badge-zstack-top_leading",
2472
+ spacing: 0,
2473
+ type: "stack",
2474
+ },
2475
+ {
2476
+ background: null,
2477
+ background_color: null,
1321
2478
  badge: {
2479
+ alignment: "bottom_trailing",
1322
2480
  stack: {
2481
+ background: {
2482
+ type: "color",
2483
+ value: {
2484
+ light: {
2485
+ type: "hex",
2486
+ value: "#11D483FF",
2487
+ },
2488
+ },
2489
+ },
2490
+ background_color: {
2491
+ light: {
2492
+ type: "hex",
2493
+ value: "#11D483FF",
2494
+ },
2495
+ },
2496
+ badge: null,
2497
+ border: null,
2498
+ components: [
2499
+ {
2500
+ background_color: null,
2501
+ color: {
2502
+ light: {
2503
+ type: "hex",
2504
+ value: "#000000",
2505
+ },
2506
+ },
2507
+ font_name: null,
2508
+ font_size: "body_l",
2509
+ font_weight: "regular",
2510
+ font_weight_int: 400,
2511
+ horizontal_alignment: "center",
2512
+ id: "4CwpRZoreT",
2513
+ margin: {
2514
+ bottom: 0,
2515
+ leading: 0,
2516
+ top: 0,
2517
+ trailing: 0,
2518
+ },
2519
+ name: "",
2520
+ padding: {
2521
+ bottom: 0,
2522
+ leading: 0,
2523
+ top: 0,
2524
+ trailing: 0,
2525
+ },
2526
+ size: {
2527
+ height: {
2528
+ type: "fit",
2529
+ value: null,
2530
+ },
2531
+ width: {
2532
+ type: "fit",
2533
+ value: null,
2534
+ },
2535
+ },
2536
+ text_lid: "id1",
2537
+ type: "text",
2538
+ },
2539
+ ],
2540
+ dimension: {
2541
+ alignment: "center",
2542
+ distribution: "center",
2543
+ type: "vertical",
2544
+ },
2545
+ id: "8dJOAHTQvq",
2546
+ margin: {
2547
+ bottom: 0,
2548
+ leading: 0,
2549
+ top: 0,
2550
+ trailing: 0,
2551
+ },
2552
+ name: "",
2553
+ padding: {
2554
+ bottom: 4,
2555
+ leading: 8,
2556
+ top: 4,
2557
+ trailing: 8,
2558
+ },
2559
+ shadow: null,
2560
+ shape: {
2561
+ corners: {
2562
+ bottom_leading: 8,
2563
+ bottom_trailing: 8,
2564
+ top_leading: 8,
2565
+ top_trailing: 8,
2566
+ },
2567
+ type: "rectangle",
2568
+ },
2569
+ size: {
2570
+ height: {
2571
+ type: "fit",
2572
+ value: null,
2573
+ },
2574
+ width: {
2575
+ type: "fit",
2576
+ value: null,
2577
+ },
2578
+ },
2579
+ spacing: 0,
1323
2580
  type: "stack",
1324
- components: [],
1325
- },
1326
- style: "edge_to_edge",
1327
- alignment: "bottom_trailing",
1328
- shape: {
1329
- type: "rectangle",
1330
- corners: {
1331
- top_leading: 8,
1332
- top_trailing: 8,
1333
- bottom_leading: 8,
1334
- bottom_trailing: 8,
1335
- },
1336
- },
1337
- padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
1338
- margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
1339
- text_lid: "badge",
1340
- color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
1341
- font_weight: "bold",
1342
- font_size: "body_s",
1343
- horizontal_alignment: "center",
1344
- background_color: {
1345
- light: { type: "hex", value: "#47aab1" },
1346
2581
  },
2582
+ style: "overlay",
1347
2583
  },
2584
+ border: null,
2585
+ components: [],
2586
+ dimension: {
2587
+ alignment: "leading",
2588
+ distribution: "start",
2589
+ type: "vertical",
2590
+ },
2591
+ id: "SScgUBQg0B",
2592
+ margin: {
2593
+ bottom: 0,
2594
+ leading: 0,
2595
+ top: 0,
2596
+ trailing: 0,
2597
+ },
2598
+ name: "",
2599
+ padding: {
2600
+ bottom: 0,
2601
+ leading: 0,
2602
+ top: 0,
2603
+ trailing: 0,
2604
+ },
2605
+ shadow: null,
1348
2606
  shape: {
1349
- type: "rectangle",
1350
2607
  corners: {
1351
- top_leading: 8,
1352
- top_trailing: 8,
1353
2608
  bottom_leading: 8,
1354
2609
  bottom_trailing: 8,
2610
+ top_leading: 8,
2611
+ top_trailing: 8,
2612
+ },
2613
+ type: "rectangle",
2614
+ },
2615
+ size: {
2616
+ height: {
2617
+ type: "fill",
2618
+ value: null,
2619
+ },
2620
+ width: {
2621
+ type: "fill",
2622
+ value: null,
1355
2623
  },
1356
2624
  },
2625
+ spacing: 0,
2626
+ type: "stack",
2627
+ },
2628
+ ],
2629
+ dimension: {
2630
+ alignment: "center",
2631
+ type: "zlayer",
2632
+ },
2633
+ id: "STJwr4dzhC",
2634
+ margin: {
2635
+ bottom: 0,
2636
+ leading: 0,
2637
+ top: 0,
2638
+ trailing: 0,
2639
+ },
2640
+ name: "",
2641
+ padding: {
2642
+ bottom: 0,
2643
+ leading: 0,
2644
+ top: 0,
2645
+ trailing: 8,
2646
+ },
2647
+ shadow: null,
2648
+ shape: {
2649
+ corners: {
2650
+ bottom_leading: 64,
2651
+ bottom_trailing: 32,
2652
+ top_leading: 0,
2653
+ top_trailing: 16,
2654
+ },
2655
+ type: "rectangle",
2656
+ },
2657
+ size: {
2658
+ height: {
2659
+ type: "fixed",
2660
+ value: 300,
1357
2661
  },
1358
- ] as unknown as StackProps[],
2662
+ width: {
2663
+ type: "fixed",
2664
+ value: 300,
2665
+ },
2666
+ },
2667
+ spacing: 0,
2668
+ type: "stack",
2669
+ }}
2670
+ />
2671
+
2672
+ <Story
2673
+ name="Badge - edge-to-edge top centered"
2674
+ args={{
2675
+ type: "stack",
2676
+ dimension: {
2677
+ type: "vertical",
2678
+ alignment: "center",
2679
+ distribution: "space_around",
2680
+ },
2681
+ background_color: {
2682
+ light: { type: "hex", value: "#FFFFFF" },
2683
+ dark: { type: "hex", value: "#FFFFFF" },
2684
+ },
2685
+ components,
1359
2686
  border: {
1360
2687
  width: 2,
1361
2688
  color: {
@@ -1373,9 +2700,58 @@
1373
2700
  },
1374
2701
  spacing: 16,
1375
2702
  padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
2703
+ margin: { top: 32, trailing: 16, bottom: 16, leading: 16 },
1376
2704
  size: {
1377
2705
  width: { type: "fixed", value: 500 },
1378
2706
  height: { type: "fixed", value: 500 },
1379
2707
  },
2708
+ badge: {
2709
+ stack: {
2710
+ type: "stack",
2711
+ id: "badge",
2712
+ name: "",
2713
+ components: [
2714
+ {
2715
+ id: "text",
2716
+ type: "text",
2717
+ name: "",
2718
+ text_lid: "badge",
2719
+ color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
2720
+ font_weight: "bold",
2721
+ font_size: "body_s",
2722
+ horizontal_alignment: "center",
2723
+ margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
2724
+ padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
2725
+ size: { width: { type: "fit" }, height: { type: "fit" } },
2726
+ },
2727
+ ],
2728
+ shape: {
2729
+ type: "rectangle",
2730
+ corners: {
2731
+ top_leading: 8,
2732
+ top_trailing: 8,
2733
+ bottom_leading: 8,
2734
+ bottom_trailing: 8,
2735
+ },
2736
+ },
2737
+ padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
2738
+ margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
2739
+ background_color: {
2740
+ light: { type: "hex", value: "#47aab1" },
2741
+ },
2742
+ background: null,
2743
+ size: { width: { type: "fit" }, height: { type: "fit" } },
2744
+ dimension: {
2745
+ type: "vertical",
2746
+ distribution: "center",
2747
+ alignment: "center",
2748
+ },
2749
+ border: null,
2750
+ shadow: null,
2751
+ spacing: 0,
2752
+ },
2753
+ style: "edge_to_edge",
2754
+ alignment: "top",
2755
+ },
1380
2756
  }}
1381
2757
  />