@faststore/core 0.3.14 → 0.3.16

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 (38) hide show
  1. package/.eslintrc.json +3 -0
  2. package/CHANGELOG.md +19 -0
  3. package/README.md +1 -1
  4. package/cypress/integration/analytics.test.js +24 -5
  5. package/cypress/integration/cart.test.js +4 -2
  6. package/cypress/integration/plp.test.js +1 -1
  7. package/cypress/integration/search.test.js +6 -1
  8. package/package.json +6 -7
  9. package/src/components/cms/RenderPageSections.tsx +0 -1
  10. package/src/components/common/Footer/Footer.tsx +9 -9
  11. package/src/components/sections/Hero/Hero.tsx +28 -77
  12. package/src/components/sections/ProducDetailsContent/ProductDetailsContent.tsx +15 -17
  13. package/src/components/ui/Price/Price.tsx +2 -3
  14. package/src/components/ui/ShippingSimulation/ShippingSimulation.stories.mdx +0 -27
  15. package/src/components/ui/ShippingSimulation/ShippingSimulation.tsx +6 -13
  16. package/src/components/ui/ShippingSimulation/shipping-simulation.module.scss +0 -39
  17. package/src/components/ui/ShippingSimulation/useShippingSimulation.ts +1 -1
  18. package/src/customizations/components/index.ts +1 -0
  19. package/src/pages/[...slug].tsx +8 -8
  20. package/src/pages/s.tsx +2 -2
  21. package/src/sdk/error/ErrorBoundary/ErrorBoundary.tsx +0 -1
  22. package/src/sdk/ui/useOnClickOutside.ts +0 -1
  23. package/src/server/cms.ts +0 -1
  24. package/vtex.env +2 -2
  25. package/.eslintignore +0 -8
  26. package/.eslintrc +0 -21
  27. package/bun.lockb +0 -0
  28. package/renovate.json +0 -5
  29. package/src/components/sections/Hero/Hero.stories.mdx +0 -277
  30. package/src/components/sections/Hero/hero.module.scss +0 -180
  31. package/src/components/sections/ProducDetailsContent/product-details-content.module.scss +0 -41
  32. package/src/components/ui/SROnly/SROnly.tsx +0 -20
  33. package/src/components/ui/SROnly/index.ts +0 -1
  34. package/src/components/ui/SROnly/sr-only.module.scss +0 -15
  35. package/src/components/ui/Toggle/Toggle.stories.mdx +0 -604
  36. package/src/components/ui/Toggle/Toggle.tsx +0 -75
  37. package/src/components/ui/Toggle/index.ts +0 -2
  38. package/src/components/ui/Toggle/toggle.module.scss +0 -200
package/src/components/ui/SROnly/sr-only.module.scss DELETED
@@ -1,15 +0,0 @@
1
- .fs-sr-only {
2
- // --------------------------------------------------------
3
- // Structural Styles
4
- // --------------------------------------------------------
5
-
6
- &:not(:focus):not(:active) {
7
- position: absolute;
8
- width: 1px;
9
- height: 1px;
10
- overflow: hidden;
11
- clip: rect(0 0 0 0);
12
- clip-path: inset(50%);
13
- white-space: nowrap;
14
- }
15
- }
package/src/components/ui/Toggle/Toggle.stories.mdx DELETED
@@ -1,604 +0,0 @@
1
- import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
2
-
3
- import Toggle from '.'
4
-
5
- <Meta
6
- title="Atoms/Toggle"
7
- argTypes={{
8
- displayLabel: {
9
- type: {
10
- name: 'boolean',
11
- },
12
- },
13
- disabled: {
14
- type: {
15
- name: 'boolean',
16
- },
17
- defaultValue: false,
18
- },
19
- variant: {
20
- name: 'variant',
21
- control: 'radio',
22
- },
23
- }}
24
- component={Toggle}
25
- />
26
-
27
- export const Template = (args) => <Toggle {...args} onChange={() => {}} />
28
-
29
- <header>
30
-
31
- # Toggle
32
-
33
- An input checkbox styled to look like a switch button.
34
-
35
- </header>
36
-
37
- ## Overview
38
-
39
- <Canvas>
40
- <Story
41
- name="overview-vertical"
42
- args={{
43
- id: 'overview-toggle-vertical',
44
- label: 'Label',
45
- variant: 'vertical',
46
- }}
47
- >
48
- {Template.bind({})}
49
- </Story>
50
- <Story
51
- name="overview-default"
52
- args={{
53
- id: 'overview-toggle-default',
54
- label: 'Label',
55
- }}
56
- >
57
- {Template.bind({})}
58
- </Story>
59
- <Story
60
- name="overview-checked"
61
- args={{
62
- id: 'overview-toggle-checked',
63
- label: 'Label',
64
- checked: true,
65
- }}
66
- >
67
- {Template.bind({})}
68
- </Story>
69
- <Story
70
- name="overview-disabled"
71
- args={{
72
- id: 'overview-toggle-disabled',
73
- label: 'Label',
74
- disabled: true,
75
- }}
76
- >
77
- {Template.bind({})}
78
- </Story>
79
- <Story
80
- name="overview-disabled-checked"
81
- args={{
82
- id: 'overview-toggle-disabled-checked',
83
- label: 'Label',
84
- disabled: true,
85
- checked: true,
86
- }}
87
- >
88
- {Template.bind({})}
89
- </Story>
90
- </Canvas>
91
-
92
- ---
93
-
94
- ## Usage
95
-
96
- `import Toggle from '../components/ui/Toggle'`
97
-
98
- <Canvas>
99
- <Story
100
- name="default"
101
- args={{
102
- id: 'toggle-default',
103
- label: 'Label',
104
- }}
105
- >
106
- {Template.bind({})}
107
- </Story>
108
- </Canvas>
109
-
110
- <ArgsTable story="default" />
111
-
112
- <table
113
- style={{
114
- width: '100%',
115
- }}
116
- >
117
- <thead>
118
- <tr>
119
- <th>Local token</th>
120
- <th>Default value/Global token linked</th>
121
- </tr>
122
- </thead>
123
- <tbody>
124
- <tr>
125
- <td>
126
- <code>--fs-toggle-height</code>
127
- </td>
128
- <td>
129
- <code>calc(var(--fs-control-min-height) / 1.75)</code>
130
- </td>
131
- </tr>
132
- <tr>
133
- <td></td>
134
- <td></td>
135
- </tr>
136
- <tr>
137
- <td>
138
- <code>--fs-toggle-bkg-color</code>
139
- </td>
140
- <td>
141
- <div style={{ backgroundColor: 'var(--fs-control-bkg)' }} />
142
- <code>var(--fs-control-bkg)</code>
143
- </td>
144
- </tr>
145
- <tr>
146
- <td>
147
- <code>--fs-toggle-bkg-color-hover</code>
148
- </td>
149
- <td>
150
- <div style={{ backgroundColor: 'var(--fs-color-primary-bkg-light)' }} />
151
- <code>var(--fs-color-primary-bkg-light)</code>
152
- </td>
153
- </tr>
154
- <tr>
155
- <td></td>
156
- <td></td>
157
- </tr>
158
- <tr>
159
- <td>
160
- <code>--fs-toggle-shadow</code>
161
- </td>
162
- <td>
163
- <code>var(--fs-shadow)</code>
164
- </td>
165
- </tr>
166
- <tr>
167
- <td>
168
- <code>--fs-toggle-shadow-hover</code>
169
- </td>
170
- <td>
171
- <code>var(--fs-shadow)</code>
172
- </td>
173
- </tr>
174
- <tr>
175
- <td></td>
176
- <td></td>
177
- </tr>
178
- <tr>
179
- <td>
180
- <code>--fs-toggle-border-color</code>
181
- </td>
182
- <td>
183
- <div style={{ backgroundColor: 'var(--fs-border-color)' }} />
184
- <code>var(--fs-border-color)</code>
185
- </td>
186
- </tr>
187
- <tr>
188
- <td>
189
- <code>--fs-toggle-border-color-hover</code>
190
- </td>
191
- <td>
192
- <div style={{ backgroundColor: 'var(--fs-border-color-hover)' }} />
193
- <code>var(--fs-border-color-hover)</code>
194
- </td>
195
- </tr>
196
- <tr>
197
- <td>
198
- <code>--fs-toggle-border-radius</code>
199
- </td>
200
- <td>
201
- <code>var(--fs-border-radius)</code>
202
- </td>
203
- </tr>
204
- <tr>
205
- <td>
206
- <code>--fs-toggle-border-width</code>
207
- </td>
208
- <td>
209
- <code>var(--fs-border-width)</code>
210
- </td>
211
- </tr>
212
- <tr>
213
- <td></td>
214
- <td></td>
215
- </tr>
216
- <tr>
217
- <td>
218
- <code>--fs-toggle-transition-timing</code>
219
- </td>
220
- <td>
221
- <code>var(--fs-transition-timing)</code>
222
- </td>
223
- </tr>
224
- <tr>
225
- <td>
226
- <code>--fs-toggle-transition-property</code>
227
- </td>
228
- <td>
229
- <code>var(--fs-transition-property)</code>
230
- </td>
231
- </tr>
232
- <tr>
233
- <td>
234
- <code>--fs-toggle-transition-function</code>
235
- </td>
236
- <td>
237
- <code>var(--fs-transition-function)</code>
238
- </td>
239
- </tr>
240
- </tbody>
241
- </table>
242
-
243
- ---
244
-
245
- ## Nested Elements
246
-
247
- ### Toggle Knob
248
-
249
- <table
250
- style={{
251
- width: '100%',
252
- }}
253
- >
254
- <thead>
255
- <tr>
256
- <th>Local token</th>
257
- <th>Default value/Global token linked</th>
258
- </tr>
259
- </thead>
260
- <tbody>
261
- <tr>
262
- <td>
263
- <code>--fs-toggle-knob-shadow</code>
264
- </td>
265
- <td>
266
- <code>var(--fs-shadow)</code>
267
- </td>
268
- </tr>
269
- <tr>
270
- <td>
271
- <code>--fs-toggle-knob-bkg-color</code>
272
- </td>
273
- <td>
274
- <div style={{ backgroundColor: 'var(--fs-color-primary-bkg)' }} />
275
- <code>var(--fs-color-primary-bkg)</code>
276
- </td>
277
- </tr>
278
- <tr>
279
- <td>
280
- <code>--fs-toggle-knob-bkg-color-hover</code>
281
- </td>
282
- <td>
283
- <div style={{ backgroundColor: 'var(--fs-border-color-hover)' }} />
284
- <code>var(--fs-toggle-border-color-hover)</code>
285
- </td>
286
- </tr>
287
- <tr>
288
- <td>
289
- <code>--fs-toggle-knob-border-radius</code>
290
- </td>
291
- <td>
292
- <code>var(--fs-border-radius-small)</code>
293
- </td>
294
- </tr>
295
- <tr>
296
- <td>
297
- <code>--fs-toggle-knob-border-color</code>
298
- </td>
299
- <td>
300
- <div style={{ backgroundColor: 'var(--fs-color-primary-bkg)' }} />
301
- <code>var(--fs-toggle-knob-bkg-color)</code>
302
- </td>
303
- </tr>
304
- <tr>
305
- <td>
306
- <code>--fs-toggle-knob-border-color-hover</code>
307
- </td>
308
- <td>
309
- <div style={{ backgroundColor: 'var(--fs-border-color-hover)' }} />
310
- <code>var(--fs-toggle-knob-bkg-color-hover)</code>
311
- </td>
312
- </tr>
313
- <tr>
314
- <td>
315
- <code>--fs-toggle-knob-border-width</code>
316
- </td>
317
- <td>
318
- <code>var(--fs-toggle-border-width)</code>
319
- </td>
320
- </tr>
321
- <tr>
322
- <td></td>
323
- <td></td>
324
- </tr>
325
- <tr>
326
- <td>
327
- <code>--fs-toggle-knob-checked-bkg-color</code>
328
- </td>
329
- <td>
330
- <div style={{ backgroundColor: 'var(--fs-control-bkg)' }} />
331
- <code>var(--fs-control-bkg)</code>
332
- </td>
333
- </tr>
334
- <tr>
335
- <td>
336
- <code>--fs-toggle-knob-checked-border-color</code>
337
- </td>
338
- <td>
339
- <div style={{ backgroundColor: 'var(--fs-control-bkg)' }} />
340
- <code>var(--fs-toggle-knob-checked-bkg-color)</code>
341
- </td>
342
- </tr>
343
- <tr>
344
- <td></td>
345
- <td></td>
346
- </tr>
347
- <tr>
348
- <td>
349
- <code>--fs-toggle-knob-disabled-bkg-color</code>
350
- </td>
351
- <td>
352
- <div
353
- style={{
354
- backgroundColor: 'var(--fs-color-neutral-5)',
355
- }}
356
- />
357
- <code>var(--fs-color-neutral-5)</code>
358
- </td>
359
- </tr>
360
- <tr>
361
- <td>
362
- <code>--fs-toggle-knob-disabled-border-color</code>
363
- </td>
364
- <td>
365
- <div
366
- style={{
367
- backgroundColor: 'var(--fs-color-neutral-5)',
368
- }}
369
- />
370
- <code>var(--fs-toggle-knob-disabled-bkg-color)</code>
371
- </td>
372
- </tr>
373
- </tbody>
374
- </table>
375
-
376
- ### Toggle Knob Icon
377
-
378
- <table
379
- style={{
380
- width: '100%',
381
- }}
382
- >
383
- <thead>
384
- <tr>
385
- <th>Local token</th>
386
- <th>Default value/Global token linked</th>
387
- </tr>
388
- </thead>
389
- <tbody>
390
- <tr>
391
- <td>
392
- <code>--fs-toggle-knob-icon-color</code>
393
- </td>
394
- <td>
395
- <code>transparent</code>
396
- </td>
397
- </tr>
398
- <tr>
399
- <td></td>
400
- <td></td>
401
- </tr>
402
- <tr>
403
- <td>
404
- <code>--fs-toggle-knob-icon-checked-color</code>
405
- </td>
406
- <td>
407
- <div
408
- style={{ backgroundColor: 'var(--fs-color-primary-bkg-active)' }}
409
- />
410
- <code>var(--fs-toggle-checked-bkg-color)</code>
411
- </td>
412
- </tr>
413
- <tr>
414
- <td>
415
- <code>--fs-toggle-knob-icon-checked-color-hover</code>
416
- </td>
417
- <td>
418
- <div
419
- style={{
420
- backgroundColor: 'var(--fs-color-primary-bkg-hover)',
421
- }}
422
- />
423
- <code>var(--fs-toggle-checked-bkg-color-hover)</code>
424
- </td>
425
- </tr>
426
- <tr>
427
- <td></td>
428
- <td></td>
429
- </tr>
430
- <tr>
431
- <td>
432
- <code>--fs-toggle-knob-icon-disabled-color</code>
433
- </td>
434
- <td>
435
- <div
436
- style={{
437
- backgroundColor: 'var(--fs-color-disabled-bkg)',
438
- }}
439
- />
440
- <code>var(--fs-toggle-disabled-bkg-color)</code>
441
- </td>
442
- </tr>
443
- </tbody>
444
- </table>
445
-
446
- ---
447
-
448
- ## Variants
449
-
450
- ### Horizontal
451
-
452
- <Canvas>
453
- <Story
454
- name="horizontal"
455
- args={{
456
- id: 'toggle-horizontal',
457
- label: 'Label',
458
- }}
459
- >
460
- {Template.bind({})}
461
- </Story>
462
- </Canvas>
463
-
464
- ### Vertical
465
-
466
- <Canvas>
467
- <Story
468
- name="vertical"
469
- args={{
470
- id: 'toggle-vertical',
471
- label: 'Label',
472
- variant: 'vertical',
473
- }}
474
- >
475
- {Template.bind({})}
476
- </Story>
477
- </Canvas>
478
-
479
- ### Checked
480
-
481
- <Canvas>
482
- <Story
483
- name="checked"
484
- args={{
485
- id: 'toggle-checked',
486
- label: 'Label',
487
- checked: true,
488
- }}
489
- >
490
- {Template.bind({})}
491
- </Story>
492
- </Canvas>
493
-
494
- <table
495
- style={{
496
- width: '100%',
497
- }}
498
- >
499
- <thead>
500
- <tr>
501
- <th>Local token</th>
502
- <th>Default value/Global token linked</th>
503
- </tr>
504
- </thead>
505
- <tbody>
506
- <tr>
507
- <td>
508
- <code>--fs-toggle-checked-bkg-color</code>
509
- </td>
510
- <td>
511
- <div
512
- style={{ backgroundColor: 'var(--fs-color-primary-bkg-active)' }}
513
- />
514
- <code>var(--fs-color-primary-bkg-active)</code>
515
- </td>
516
- </tr>
517
- <tr>
518
- <td>
519
- <code>--fs-toggle-checked-bkg-color-hover</code>
520
- </td>
521
- <td>
522
- <div style={{ backgroundColor: 'var(--fs-color-primary-bkg-hover)' }} />
523
- <code>var(--fs-color-primary-bkg-hover)</code>
524
- </td>
525
- </tr>
526
- <tr>
527
- <td>
528
- <code>--fs-toggle-checked-border-color</code>
529
- </td>
530
- <td>
531
- <div style={{ backgroundColor: 'var(--fs-color-primary-bkg-active' }} />
532
- <code>var(--fs-toggle-checked-bkg-color)</code>
533
- </td>
534
- </tr>
535
- <tr>
536
- <td>
537
- <code>--fs-toggle-checked-border-color-hover</code>
538
- </td>
539
- <td>
540
- <div style={{ backgroundColor: 'var(--fs-color-primary-bkg-hover' }} />
541
- <code>var(--fs-toggle-checked-bkg-color-hover)</code>
542
- </td>
543
- </tr>
544
- </tbody>
545
- </table>
546
-
547
- ### Disabled
548
-
549
- <Canvas>
550
- <Story
551
- name="disabled"
552
- args={{
553
- id: 'toggle-disabled',
554
- label: 'Label',
555
- disabled: true,
556
- }}
557
- >
558
- {Template.bind({})}
559
- </Story>
560
- <Story
561
- name="disabled-checked"
562
- args={{
563
- id: 'toggle-disabled-checked',
564
- label: 'Label',
565
- disabled: true,
566
- checked: true,
567
- }}
568
- >
569
- {Template.bind({})}
570
- </Story>
571
- </Canvas>
572
-
573
- <table
574
- style={{
575
- width: '100%',
576
- }}
577
- >
578
- <thead>
579
- <tr>
580
- <th>Local token</th>
581
- <th>Default value/Global token linked</th>
582
- </tr>
583
- </thead>
584
- <tbody>
585
- <tr>
586
- <td>
587
- <code>--fs-toggle-disabled-bkg-color</code>
588
- </td>
589
- <td>
590
- <div style={{ backgroundColor: 'var(--fs-color-disabled-bkg)' }} />
591
- <code>var(--fs-color-disabled-bkg)</code>
592
- </td>
593
- </tr>
594
- <tr>
595
- <td>
596
- <code>--fs-toggle-disabled-border-color</code>
597
- </td>
598
- <td>
599
- <div style={{ backgroundColor: 'var(--fs-border-color-disabled)' }} />
600
- <code>var(--fs-border-color-disabled)</code>
601
- </td>
602
- </tr>
603
- </tbody>
604
- </table>
package/src/components/ui/Toggle/Toggle.tsx DELETED
@@ -1,75 +0,0 @@
1
- import { Input as UIInput, Label as UILabel } from '@faststore/ui'
2
- import { forwardRef } from 'react'
3
- import type { InputHTMLAttributes } from 'react'
4
-
5
- import Icon from 'src/components/ui/Icon'
6
- import SROnly from 'src/components/ui/SROnly'
7
-
8
- import styles from './toggle.module.scss'
9
-
10
- export interface ToggleProps
11
- extends InputHTMLAttributes<Omit<HTMLInputElement, 'disabled' | 'type'>> {
12
- /**
13
- * ID to identify input and corresponding label.
14
- */
15
- id: string
16
- /**
17
- * The text displayed to identify the input.
18
- */
19
- label: string
20
- /**
21
- * Controls whether the label will be displayed or not.
22
- */
23
- displayLabel?: boolean
24
- /**
25
- * Specifies that this input should be disabled.
26
- */
27
- disabled?: boolean
28
- /**
29
- * Controls the component's direction.
30
- */
31
- variant?: 'horizontal' | 'vertical'
32
- }
33
-
34
- const Toggle = forwardRef<HTMLInputElement, ToggleProps>(function Toggle(
35
- {
36
- id,
37
- label,
38
- disabled,
39
- displayLabel = true,
40
- variant = 'horizontal',
41
- ...otherProps
42
- }: ToggleProps,
43
- ref
44
- ) {
45
- return (
46
- <div
47
- data-fs-toggle
48
- data-fs-toggle-variant={variant}
49
- className={styles.fsToggle}
50
- >
51
- <div data-fs-toggle-container>
52
- <UIInput
53
- id={id}
54
- ref={ref}
55
- role="switch"
56
- type="checkbox"
57
- disabled={disabled}
58
- {...otherProps}
59
- />
60
- <span data-fs-toggle-knob>
61
- <Icon width={15} height={15} weight="bold" name="Checked" />
62
- </span>
63
- </div>
64
- {displayLabel ? (
65
- <UILabel data-fs-label htmlFor={id}>
66
- {label}
67
- </UILabel>
68
- ) : (
69
- <SROnly text={label} />
70
- )}
71
- </div>
72
- )
73
- })
74
-
75
- export default Toggle
package/src/components/ui/Toggle/index.ts DELETED
@@ -1,2 +0,0 @@
1
- export { default } from './Toggle'
2
- export type { ToggleProps } from './Toggle'