@faststore/ui 3.99.0-dev.8 → 3.99.0-dev.9

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 (136) hide show
  1. package/dist/cjs/index.js +1 -12
  2. package/dist/{cjs/components → components}/atoms/Incentive/Incentive.d.ts +1 -2
  3. package/dist/components/atoms/Incentive/Incentive.d.ts.map +1 -0
  4. package/dist/components/atoms/Incentive/index.d.ts.map +1 -0
  5. package/dist/{esm/components → components}/organisms/Tiles/Tile.d.ts +1 -2
  6. package/dist/components/organisms/Tiles/Tile.d.ts.map +1 -0
  7. package/dist/{cjs/components → components}/organisms/Tiles/Tiles.d.ts +1 -2
  8. package/dist/components/organisms/Tiles/Tiles.d.ts.map +1 -0
  9. package/dist/components/organisms/Tiles/index.d.ts.map +1 -0
  10. package/dist/es/index.mjs +46 -0
  11. package/dist/index.d.ts.map +1 -0
  12. package/dist/{cjs/typings → typings}/PolymorphicGenerics.d.ts +1 -7
  13. package/dist/typings/PolymorphicGenerics.d.ts.map +1 -0
  14. package/dist/typings/index.d.ts.map +1 -0
  15. package/package.json +28 -29
  16. package/src/components/atoms/Button/styles.scss +4 -2
  17. package/src/components/atoms/Checkbox/styles.scss +3 -1
  18. package/src/components/atoms/Input/styles.scss +4 -2
  19. package/src/components/atoms/Link/styles.scss +4 -2
  20. package/src/components/atoms/Radio/styles.scss +3 -1
  21. package/src/components/atoms/Select/styles.scss +7 -5
  22. package/src/components/atoms/Textarea/styles.scss +3 -1
  23. package/src/components/molecules/Accordion/styles.scss +3 -1
  24. package/src/components/molecules/Breadcrumb/styles.scss +8 -5
  25. package/src/components/molecules/BuyButton/styles.scss +3 -2
  26. package/src/components/molecules/Carousel/styles.scss +22 -16
  27. package/src/components/molecules/CartItem/styles.scss +3 -1
  28. package/src/components/molecules/FileUploadCard/styles.scss +14 -14
  29. package/src/components/molecules/Gift/styles.scss +5 -3
  30. package/src/components/molecules/InputField/styles.scss +7 -3
  31. package/src/components/molecules/Modal/styles.scss +3 -1
  32. package/src/components/molecules/NavbarLinks/styles.scss +9 -6
  33. package/src/components/molecules/PickupPointCard/styles.scss +4 -2
  34. package/src/components/molecules/Popover/styles.scss +1 -1
  35. package/src/components/molecules/ProductCard/styles.scss +7 -5
  36. package/src/components/molecules/ProductTile/styles.scss +6 -4
  37. package/src/components/molecules/ProductTitle/styles.scss +8 -6
  38. package/src/components/molecules/SearchDropdown/styles.scss +4 -2
  39. package/src/components/molecules/SearchInputField/styles.scss +8 -10
  40. package/src/components/molecules/SearchProducts/styles.scss +5 -3
  41. package/src/components/molecules/SkuSelector/styles.scss +9 -9
  42. package/src/components/molecules/TextareaField/styles.scss +5 -3
  43. package/src/components/molecules/Toast/styles.scss +5 -3
  44. package/src/components/molecules/Toggle/styles.scss +3 -1
  45. package/src/components/organisms/BannerNewsletter/styles.scss +3 -1
  46. package/src/components/organisms/BannerText/styles.scss +6 -3
  47. package/src/components/organisms/EmptyState/styles.scss +4 -2
  48. package/src/components/organisms/Filter/styles.scss +6 -4
  49. package/src/components/organisms/FilterSkeleton/styles.scss +3 -1
  50. package/src/components/organisms/Footer/styles.scss +23 -21
  51. package/src/components/organisms/Hero/styles.scss +19 -16
  52. package/src/components/organisms/ImageGallery/styles.scss +26 -24
  53. package/src/components/organisms/Incentives/styles.scss +5 -3
  54. package/src/components/organisms/LocalizationSelector/styles.scss +90 -0
  55. package/src/components/organisms/Navbar/styles.scss +47 -29
  56. package/src/components/organisms/NavbarSlider/styles.scss +10 -2
  57. package/src/components/organisms/Newsletter/styles.scss +13 -12
  58. package/src/components/organisms/PaymentMethods/styles.scss +6 -4
  59. package/src/components/organisms/ProductComparison/styles.scss +7 -5
  60. package/src/components/organisms/ProductDetails/styles.scss +27 -25
  61. package/src/components/organisms/ProductGallery/styles.scss +20 -18
  62. package/src/components/organisms/ProductGrid/styles.scss +5 -3
  63. package/src/components/organisms/ProductShelf/styles.scss +5 -3
  64. package/src/components/organisms/QuickOrderDrawer/styles.scss +3 -13
  65. package/src/components/organisms/RegionPopover/styles.scss +3 -1
  66. package/src/components/organisms/SKUMatrix/styles.scss +22 -23
  67. package/src/components/organisms/SearchInput/styles.scss +3 -1
  68. package/src/components/organisms/SlideOver/styles.scss +46 -10
  69. package/src/components/organisms/Tiles/styles.scss +6 -4
  70. package/src/styles/base/layout.scss +6 -4
  71. package/src/styles/base/reset.scss +4 -2
  72. package/src/styles/base/tokens.scss +11 -9
  73. package/src/styles/base/typography.scss +2 -1
  74. package/src/styles/base/utilities.scss +32 -18
  75. package/src/styles/base.scss +4 -4
  76. package/src/styles/components.scss +1 -0
  77. package/src/styles/global.scss +1 -1
  78. package/dist/cjs/components/atoms/Incentive/Incentive.d.ts.map +0 -1
  79. package/dist/cjs/components/atoms/Incentive/Incentive.js +0 -9
  80. package/dist/cjs/components/atoms/Incentive/Incentive.js.map +0 -1
  81. package/dist/cjs/components/atoms/Incentive/index.d.ts.map +0 -1
  82. package/dist/cjs/components/atoms/Incentive/index.js +0 -9
  83. package/dist/cjs/components/atoms/Incentive/index.js.map +0 -1
  84. package/dist/cjs/components/organisms/Tiles/Tile.d.ts +0 -12
  85. package/dist/cjs/components/organisms/Tiles/Tile.d.ts.map +0 -1
  86. package/dist/cjs/components/organisms/Tiles/Tile.js +0 -9
  87. package/dist/cjs/components/organisms/Tiles/Tile.js.map +0 -1
  88. package/dist/cjs/components/organisms/Tiles/Tiles.d.ts.map +0 -1
  89. package/dist/cjs/components/organisms/Tiles/Tiles.js +0 -33
  90. package/dist/cjs/components/organisms/Tiles/Tiles.js.map +0 -1
  91. package/dist/cjs/components/organisms/Tiles/index.d.ts.map +0 -1
  92. package/dist/cjs/components/organisms/Tiles/index.js +0 -11
  93. package/dist/cjs/components/organisms/Tiles/index.js.map +0 -1
  94. package/dist/cjs/index.d.ts.map +0 -1
  95. package/dist/cjs/index.js.map +0 -1
  96. package/dist/cjs/typings/PolymorphicGenerics.d.ts.map +0 -1
  97. package/dist/cjs/typings/PolymorphicGenerics.js +0 -9
  98. package/dist/cjs/typings/PolymorphicGenerics.js.map +0 -1
  99. package/dist/cjs/typings/index.d.ts.map +0 -1
  100. package/dist/cjs/typings/index.js +0 -3
  101. package/dist/cjs/typings/index.js.map +0 -1
  102. package/dist/esm/components/atoms/Incentive/Incentive.d.ts +0 -12
  103. package/dist/esm/components/atoms/Incentive/Incentive.d.ts.map +0 -1
  104. package/dist/esm/components/atoms/Incentive/Incentive.js +0 -6
  105. package/dist/esm/components/atoms/Incentive/Incentive.js.map +0 -1
  106. package/dist/esm/components/atoms/Incentive/index.d.ts +0 -3
  107. package/dist/esm/components/atoms/Incentive/index.d.ts.map +0 -1
  108. package/dist/esm/components/atoms/Incentive/index.js +0 -2
  109. package/dist/esm/components/atoms/Incentive/index.js.map +0 -1
  110. package/dist/esm/components/organisms/Tiles/Tile.d.ts.map +0 -1
  111. package/dist/esm/components/organisms/Tiles/Tile.js +0 -6
  112. package/dist/esm/components/organisms/Tiles/Tile.js.map +0 -1
  113. package/dist/esm/components/organisms/Tiles/Tiles.d.ts +0 -12
  114. package/dist/esm/components/organisms/Tiles/Tiles.d.ts.map +0 -1
  115. package/dist/esm/components/organisms/Tiles/Tiles.js +0 -30
  116. package/dist/esm/components/organisms/Tiles/Tiles.js.map +0 -1
  117. package/dist/esm/components/organisms/Tiles/index.d.ts +0 -5
  118. package/dist/esm/components/organisms/Tiles/index.d.ts.map +0 -1
  119. package/dist/esm/components/organisms/Tiles/index.js +0 -3
  120. package/dist/esm/components/organisms/Tiles/index.js.map +0 -1
  121. package/dist/esm/index.d.ts +0 -6
  122. package/dist/esm/index.d.ts.map +0 -1
  123. package/dist/esm/index.js +0 -5
  124. package/dist/esm/index.js.map +0 -1
  125. package/dist/esm/typings/PolymorphicGenerics.d.ts +0 -29
  126. package/dist/esm/typings/PolymorphicGenerics.d.ts.map +0 -1
  127. package/dist/esm/typings/PolymorphicGenerics.js +0 -8
  128. package/dist/esm/typings/PolymorphicGenerics.js.map +0 -1
  129. package/dist/esm/typings/index.d.ts +0 -2
  130. package/dist/esm/typings/index.d.ts.map +0 -1
  131. package/dist/esm/typings/index.js +0 -2
  132. package/dist/esm/typings/index.js.map +0 -1
  133. /package/dist/{cjs/components → components}/atoms/Incentive/index.d.ts +0 -0
  134. /package/dist/{cjs/components → components}/organisms/Tiles/index.d.ts +0 -0
  135. /package/dist/{cjs/index.d.ts → index.d.ts} +0 -0
  136. /package/dist/{cjs/typings → typings}/index.d.ts +0 -0
@@ -1,3 +1,5 @@
1
+ @use "../../../styles/base/utilities";
2
+
1
3
  [data-fs-product-grid] {
2
4
  // --------------------------------------------------------
3
5
  // Design Tokens for ProductGrid
@@ -20,7 +22,7 @@
20
22
  grid-template-columns: repeat(var(--fs-product-grid-columns-mobile), 1fr);
21
23
  grid-gap: var(--fs-product-grid-gap-mobile);
22
24
 
23
- @include media(">=tablet") {
25
+ @include utilities.media(">=tablet") {
24
26
  $pagination-start-index: 2;
25
27
 
26
28
  grid-template-columns: repeat(var(--fs-product-grid-columns-desktop), 1fr);
@@ -31,9 +33,9 @@
31
33
  }
32
34
  }
33
35
 
34
- @include media("<notebook") { padding-bottom: var(--fs-grid-gap-2); }
36
+ @include utilities.media("<notebook") { padding-bottom: var(--fs-grid-gap-2); }
35
37
 
36
- @include media(">=notebook") {
38
+ @include utilities.media(">=notebook") {
37
39
  grid-gap: var(--fs-product-grid-gap-desktop);
38
40
  }
39
41
  }
@@ -1,3 +1,5 @@
1
+ @use "../../../styles/base/utilities";
2
+
1
3
  [data-fs-product-shelf] {
2
4
  // --------------------------------------------------------
3
5
  // Design Tokens for Product Shelf
@@ -14,15 +16,15 @@
14
16
  width: 100%;
15
17
 
16
18
  [data-fs-product-shelf-items] {
19
+ position: relative;
17
20
  display: flex;
21
+ column-gap: var(--fs-product-shelf-items-gap);
18
22
  align-items: stretch;
19
23
  overflow-x: auto;
20
- position: relative;
21
- column-gap: var(--fs-product-shelf-items-gap);
22
24
 
23
25
  [data-fs-product-shelf-item] { width: 100%; }
24
26
 
25
- @include media(">=tablet") {
27
+ @include utilities.media(">=tablet") {
26
28
  padding-top: var(--fs-product-shelf-items-padding-top);
27
29
  padding-bottom: var(--fs-product-shelf-items-padding-bottom);
28
30
  overflow-x: auto;
@@ -1,16 +1,6 @@
1
- [data-fs-quick-order-drawer] {
2
- @import "../../atoms/Badge/styles";
3
- @import "../../atoms/Button/styles";
4
- @import "../../atoms/Icon/styles";
5
- @import "../../atoms/Overlay/styles";
6
- @import "../../atoms/Price/styles";
7
- @import "../../atoms/Skeleton/styles";
8
- @import "../../molecules/Alert/styles";
9
- @import "../../molecules/QuantitySelector/styles";
10
- @import "../../molecules/Table/styles";
11
- @import "../../molecules/Tooltip/styles";
12
- @import "../../organisms/SlideOver/styles";
1
+ @use "../../../styles/base/utilities";
13
2
 
3
+ [data-fs-quick-order-drawer] {
14
4
  // --------------------------------------------------------
15
5
  // Design Tokens for Quick Order Drawer
16
6
  // --------------------------------------------------------
@@ -101,7 +91,7 @@
101
91
  &[data-fs-slide-over][data-fs-slide-over-size="partial"] {
102
92
  width: var(--fs-quick-order-drawer-width);
103
93
 
104
- @include media(">=notebook") {
94
+ @include utilities.media(">=notebook") {
105
95
  width: var(--fs-quick-order-drawer-width);
106
96
  max-width: var(--fs-quick-order-drawer-width);
107
97
  }
@@ -1,3 +1,5 @@
1
+ @use "../../../styles/base/utilities";
2
+
1
3
  [data-fs-region-popover] {
2
4
  // --------------------------------------------------------
3
5
  // Design Tokens for Region Popover
@@ -21,7 +23,7 @@
21
23
 
22
24
  width: auto;
23
25
 
24
- @include media(">=tablet") {
26
+ @include utilities.media(">=tablet") {
25
27
  width: var(--fs-region-popover-width);
26
28
  }
27
29
 
@@ -1,3 +1,5 @@
1
+ @use "../../../styles/base/utilities";
2
+
1
3
  [data-fs-sku-matrix-sidebar] {
2
4
  // --------------------------------------------------------
3
5
  // Design Tokens for SKU Matrix Sidebar
@@ -31,17 +33,6 @@
31
33
  height: 100vh;
32
34
  overflow: auto;
33
35
 
34
- [data-fs-table] {
35
- flex-shrink: 0;
36
- padding: var(--fs-spacing-3) var(--fs-spacing-8);
37
- padding-bottom: 0;
38
-
39
- @include media('<tablet') {
40
- padding: var(--fs-spacing-3);
41
- padding-bottom: 0;
42
- }
43
- }
44
-
45
36
  &[data-fs-slide-over] {
46
37
  background-color: var(--fs-sku-matrix-sidebar-bkg-color);
47
38
 
@@ -49,16 +40,16 @@
49
40
  padding: var(--fs-spacing-8);
50
41
  padding-bottom: 0;
51
42
 
52
- @include media('<tablet') {
43
+ @include utilities.media("<tablet") {
53
44
  padding: var(--fs-spacing-3);
54
45
  padding-bottom: 0;
55
46
  }
56
47
  }
57
48
 
58
- &[data-fs-slide-over-size='partial'] {
49
+ &[data-fs-slide-over-size="partial"] {
59
50
  width: var(--fs-sku-matrix-slide-over-partial-width-mobile);
60
51
 
61
- @include media('>=notebook') {
52
+ @include utilities.media(">=notebook") {
62
53
  max-width: var(--fs-sku-matrix-slide-over-partial-width-mobile);
63
54
  }
64
55
  }
@@ -71,8 +62,16 @@
71
62
  }
72
63
 
73
64
  [data-fs-table] {
65
+ flex-shrink: 0;
66
+ padding: var(--fs-spacing-3) var(--fs-spacing-8);
67
+ padding-bottom: 0;
74
68
  color: var(--fs-color-neutral-6);
75
69
 
70
+ @include utilities.media("<tablet") {
71
+ padding: var(--fs-spacing-3);
72
+ padding-bottom: 0;
73
+ }
74
+
76
75
  [data-fs-table-cell] {
77
76
  &:first-child {
78
77
  padding-left: 0;
@@ -92,7 +91,7 @@
92
91
  }
93
92
 
94
93
  [data-fs-table-cell],
95
- [data-fs-price-variant='spot'] {
94
+ [data-fs-price-variant="spot"] {
96
95
  font-weight: var(--fs-text-weight-medium);
97
96
  }
98
97
 
@@ -113,8 +112,8 @@
113
112
 
114
113
  [data-fs-sku-matrix-sidebar-cell-image] {
115
114
  display: flex;
116
- align-items: center;
117
115
  gap: var(--fs-spacing-2);
116
+ align-items: center;
118
117
 
119
118
  img {
120
119
  object-fit: cover;
@@ -132,17 +131,17 @@
132
131
  }
133
132
 
134
133
  [data-fs-sku-matrix-sidebar-footer] {
135
- display: flex;
136
- width: 100%;
137
- padding: var(--fs-spacing-4) var(--fs-spacing-8);
138
- justify-content: space-between;
139
134
  position: sticky;
135
+ right: 0;
140
136
  bottom: 0;
141
137
  left: 0;
142
- right: 0;
138
+ display: flex;
139
+ justify-content: space-between;
140
+ width: 100%;
141
+ padding: var(--fs-spacing-4) var(--fs-spacing-8);
143
142
  margin-top: auto;
144
- border-top: var(--fs-border-width) solid var(--fs-border-color-light);
145
143
  background-color: var(--fs-sku-matrix-sidebar-bkg-color);
144
+ border-top: var(--fs-border-width) solid var(--fs-border-color-light);
146
145
 
147
146
  > div {
148
147
  display: flex;
@@ -155,7 +154,7 @@
155
154
  }
156
155
  }
157
156
 
158
- @include media('<tablet') {
157
+ @include utilities.media("<tablet") {
159
158
  padding: var(--fs-spacing-3);
160
159
  }
161
160
  }
@@ -1,3 +1,5 @@
1
+ @use "../../../styles/base/utilities";
2
+
1
3
  [data-fs-search-input] {
2
4
  // --------------------------------------------------------
3
5
  // Design Tokens for Search Input
@@ -13,7 +15,7 @@
13
15
  position: relative;
14
16
 
15
17
  &[data-fs-search-input-dropdown-visible="true"] [data-fs-search-input-field-input] {
16
- @include media(">=notebook") {
18
+ @include utilities.media(">=notebook") {
17
19
  border-bottom-right-radius: 0;
18
20
  border-bottom-left-radius: 0;
19
21
  }
@@ -1,31 +1,39 @@
1
+ @use "../../../styles/base/utilities";
2
+
1
3
  [data-fs-slide-over] {
2
4
  // --------------------------------------------------------
3
5
  // Design Tokens for Slide Over
4
6
  // --------------------------------------------------------
5
7
 
6
8
  // Default properties
7
- --fs-slide-over-bkg-color : var(--fs-color-body-bkg);
8
- --fs-slide-over-transition-timing : var(--fs-transition-timing);
9
+ --fs-slide-over-bkg-color: var(--fs-color-body-bkg);
10
+ --fs-slide-over-transition-timing: var(--fs-transition-timing);
9
11
 
10
12
  // Header
11
- --fs-slide-over-header-padding : var(--fs-spacing-2) var(--fs-spacing-3) var(--fs-spacing-2);
12
- --fs-slide-over-header-bkg-color : var(--fs-color-neutral-0);
13
+ --fs-slide-over-header-padding: var(--fs-spacing-2) var(--fs-spacing-3) var(--fs-spacing-2);
14
+ --fs-slide-over-header-bkg-color: var(--fs-color-neutral-0);
13
15
 
14
16
  // Partial
15
- --fs-slide-over-partial-gap : calc(2 * var(--fs-grid-padding));
16
- --fs-slide-over-partial-width-mobile : calc(100vw - var(--fs-slide-over-partial-gap));
17
+ --fs-slide-over-partial-gap: calc(2 * var(--fs-grid-padding));
18
+ --fs-slide-over-partial-width-mobile: calc(100vw - var(--fs-slide-over-partial-gap));
19
+
20
+ --fs-slide-over-partial-width-notebook: calc(100% / 3);
21
+ --fs-slide-over-partial-max-width-notebook: calc(var(--fs-grid-breakpoint-notebook) / 3);
17
22
 
18
- --fs-slide-over-partial-width-notebook : calc(100% / 3);
19
- --fs-slide-over-partial-max-width-notebook : calc(var(--fs-grid-breakpoint-notebook) / 3);
23
+ // Bottom Side
24
+ --fs-slide-over-partial-height-bottom: 80vh;
20
25
 
21
26
  // --------------------------------------------------------
22
27
  // Structural Styles
23
28
  // --------------------------------------------------------
24
29
 
25
30
  position: fixed;
26
- height: 100vh;
27
31
  background-color: var(--fs-slide-over-bkg-color);
28
32
 
33
+ &:not([data-fs-slide-over-direction="bottomSide"]) {
34
+ height: 100vh;
35
+ }
36
+
29
37
  &[data-fs-slide-over-size="full"] {
30
38
  width: 100vw;
31
39
  }
@@ -33,7 +41,7 @@
33
41
  &[data-fs-slide-over-size="partial"] {
34
42
  width: var(--fs-slide-over-partial-width-mobile);
35
43
 
36
- @include media(">=notebook") {
44
+ @include utilities.media(">=notebook") {
37
45
  width: var(--fs-slide-over-partial-width-notebook);
38
46
  max-width: var(--fs-slide-over-partial-max-width-notebook);
39
47
  }
@@ -41,9 +49,16 @@
41
49
 
42
50
  &[data-fs-slide-over-state="in"] {
43
51
  transition: transform var(--fs-slide-over-transition-timing) ease-in;
52
+ }
53
+
54
+ &:not([data-fs-slide-over-direction="bottomSide"])[data-fs-slide-over-state="in"] {
44
55
  transform: translateX(0);
45
56
  }
46
57
 
58
+ &[data-fs-slide-over-direction="bottomSide"][data-fs-slide-over-state="in"] {
59
+ transform: translateY(0);
60
+ }
61
+
47
62
  &[data-fs-slide-over-state="out"] {
48
63
  transition: transform var(--fs-slide-over-transition-timing) ease-out;
49
64
  }
@@ -76,6 +91,27 @@
76
91
  }
77
92
  }
78
93
 
94
+ &[data-fs-slide-over-direction="bottomSide"] {
95
+ top: auto;
96
+ right: 0;
97
+ bottom: 0;
98
+ left: 0;
99
+ width: 100vw;
100
+ height: auto;
101
+
102
+ &[data-fs-slide-over-state="out"] {
103
+ transform: translateY(100%);
104
+ }
105
+
106
+ &[data-fs-slide-over-size="full"] {
107
+ max-height: 100vh;
108
+ }
109
+
110
+ &[data-fs-slide-over-size="partial"] {
111
+ max-height: var(--fs-slide-over-partial-height-bottom);
112
+ }
113
+ }
114
+
79
115
  [data-fs-slide-over-header] {
80
116
  display: flex;
81
117
  align-items: center;
@@ -1,3 +1,5 @@
1
+ @use "../../../styles/base/utilities";
2
+
1
3
  [data-fs-tiles] {
2
4
  // --------------------------------------------------------
3
5
  // Design Tokens for Tiles
@@ -20,11 +22,11 @@
20
22
  row-gap: var(--fs-tiles-gap-mobile);
21
23
  column-gap: var(--fs-tiles-gap-mobile);
22
24
 
23
- @include media(">=tablet") {
25
+ @include utilities.media(">=tablet") {
24
26
  grid-template-columns: repeat(4, 1fr);
25
27
  }
26
28
 
27
- @include media(">=notebook") { column-gap: var(--fs-tiles-gap-notebook); }
29
+ @include utilities.media(">=notebook") { column-gap: var(--fs-tiles-gap-notebook); }
28
30
 
29
31
  [data-fs-tile] {
30
32
  min-width: var(--fs-tiles-tile-min-width);
@@ -33,13 +35,13 @@
33
35
  overflow: hidden;
34
36
  border-radius: var(--fs-tiles-tile-border-radius);
35
37
 
36
- @include media(">=tablet") {
38
+ @include utilities.media(">=tablet") {
37
39
  display: grid;
38
40
  grid-auto-rows: 62% auto;
39
41
  [data-fs-product-card-image] { height: 100%; }
40
42
  }
41
43
 
42
- @include media(">=notebook") { grid-auto-rows: 80% auto; }
44
+ @include utilities.media(">=notebook") { grid-auto-rows: 80% auto; }
43
45
  }
44
46
  }
45
47
 
@@ -1,3 +1,5 @@
1
+ @use "./utilities";
2
+
1
3
  // ----------------------------------------------------------
2
4
  // FS UI STYLES
3
5
  // Layout
@@ -20,7 +22,7 @@
20
22
  margin-top: var(--fs-spacing-4);
21
23
  margin-bottom: var(--fs-spacing-4);
22
24
 
23
- @include media(">=notebook") {
25
+ @include utilities.media(">=notebook") {
24
26
  margin-top: var(--fs-grid-padding);
25
27
  margin-bottom: var(--fs-grid-padding);
26
28
  }
@@ -34,7 +36,7 @@
34
36
  margin-inline: auto;
35
37
  }
36
38
 
37
- [data-fs-content] { @include layout-content; }
39
+ [data-fs-content] { @include utilities.layout-content; }
38
40
 
39
41
  .no-scroll {
40
42
  overflow: hidden;
@@ -43,7 +45,7 @@
43
45
 
44
46
  // Helper class
45
47
  .display-mobile {
46
- @include media(">=notebook") {
48
+ @include utilities.media(">=notebook") {
47
49
  display: none;
48
50
  visibility: hidden;
49
51
  }
@@ -51,7 +53,7 @@
51
53
 
52
54
  // Helper class
53
55
  .hidden-mobile {
54
- @include media("<notebook") {
56
+ @include utilities.media("<notebook") {
55
57
  display: none;
56
58
  visibility: hidden;
57
59
  }
@@ -3,8 +3,10 @@
3
3
  // Reset
4
4
  // ----------------------------------------------------------
5
5
 
6
+ @use "sass:meta";
7
+
6
8
  @layer base {
7
- @import "~modern-normalize/modern-normalize";
9
+ @include meta.load-css("~modern-normalize/modern-normalize");
8
10
 
9
11
  // Reset default styles
10
12
  body {
@@ -49,9 +51,9 @@
49
51
  }
50
52
 
51
53
  button {
54
+ background-color: transparent;
52
55
  border: 0;
53
56
  outline: none;
54
- background-color: transparent;
55
57
  box-shadow: none;
56
58
  }
57
59
 
@@ -2,6 +2,8 @@
2
2
  // FS UI TOKENS
3
3
  // Brandless Theme
4
4
  // ----------------------------------------------------------
5
+ @use "./utilities.scss";
6
+ @use "sass:map";
5
7
 
6
8
  @layer base {
7
9
  body {
@@ -139,7 +141,7 @@
139
141
 
140
142
  --fs-scale : var(--fs-text-scale-mobile);
141
143
 
142
- @include media(">=notebook") {
144
+ @include utilities.media(">=notebook") {
143
145
  --fs-scale : var(--fs-text-scale-desktop);
144
146
  }
145
147
 
@@ -197,11 +199,11 @@
197
199
  // PADDING
198
200
  --fs-grid-padding : var(--fs-spacing-3);
199
201
 
200
- @include media(">=tablet") {
202
+ @include utilities.media(">=tablet") {
201
203
  --fs-grid-padding : var(--fs-spacing-4);
202
204
  }
203
205
 
204
- @include media(">=notebook") {
206
+ @include utilities.media(">=notebook") {
205
207
  --fs-grid-padding : var(--fs-spacing-5);
206
208
  }
207
209
 
@@ -223,11 +225,11 @@
223
225
  --fs-grid-gap-4 : var(--fs-spacing-5);
224
226
 
225
227
  // BREAKPOINTS
226
- --fs-grid-breakpoint-phone : #{map-get($breakpoints, "phone")};
227
- --fs-grid-breakpoint-phonemid : #{map-get($breakpoints, "phonemid")};
228
- --fs-grid-breakpoint-tablet : #{map-get($breakpoints, "tablet")};
229
- --fs-grid-breakpoint-notebook : #{map-get($breakpoints, "notebook")};
230
- --fs-grid-breakpoint-desktop : #{map-get($breakpoints, "desktop")};
228
+ --fs-grid-breakpoint-phone : #{map.get(utilities.$breakpoints, "phone")};
229
+ --fs-grid-breakpoint-phonemid : #{map.get(utilities.$breakpoints, "phonemid")};
230
+ --fs-grid-breakpoint-tablet : #{map.get(utilities.$breakpoints, "tablet")};
231
+ --fs-grid-breakpoint-notebook : #{map.get(utilities.$breakpoints, "notebook")};
232
+ --fs-grid-breakpoint-desktop : #{map.get(utilities.$breakpoints, "desktop")};
231
233
 
232
234
  // --------------------------------------------------------
233
235
  // Interactive Controls (UI Essentials)
@@ -238,7 +240,7 @@
238
240
  --fs-control-tap-size-smallest : calc(var(--fs-control-tap-size) / 2);
239
241
  --fs-control-min-height : var(--fs-control-tap-size);
240
242
 
241
- @include media(">=notebook") {
243
+ @include utilities.media(">=notebook") {
242
244
  --fs-control-tap-size : var(--fs-spacing-7); // This value can be smaller on desktops
243
245
  }
244
246
 
@@ -2,6 +2,7 @@
2
2
  // FS UI STYLES
3
3
  // Typography (Text)
4
4
  // ----------------------------------------------------------
5
+ @use "./utilities.scss";
5
6
 
6
7
  @layer base {
7
8
  body {
@@ -22,7 +23,7 @@
22
23
  font-weight: var(--fs-text-weight-bold);
23
24
  line-height: 1.16;
24
25
 
25
- @include media(">=notebook") { font-size: var(--fs-text-size-5); }
26
+ @include utilities.media(">=notebook") { font-size: var(--fs-text-size-5); }
26
27
  }
27
28
 
28
29
  .text__title-mini {
@@ -9,16 +9,14 @@
9
9
  /* SQ-ENABLE */
10
10
 
11
11
  // Include Media Overwrites //////////////////////////
12
+ @use "~include-media/dist/include-media" as * with ($breakpoints: ("phone": 320px,
13
+ "phonemid": 375px,
14
+ "tablet": 768px,
15
+ "notebook": 1280px,
16
+ "desktop": 1440px,
17
+ ));
12
18
 
13
- @import "~include-media/dist/include-media";
14
-
15
- $breakpoints: (
16
- "phone": 320px,
17
- "phonemid": 375px,
18
- "tablet": 768px,
19
- "notebook": 1280px,
20
- "desktop": 1440px,
21
- );
19
+ @forward "~include-media/dist/include-media";
22
20
 
23
21
  // Global mixins /////////////////////////////////////
24
22
 
@@ -68,23 +66,30 @@ $base: 16px !default;
68
66
  padding-top: $padding;
69
67
  border-top: var(--fs-border-width) solid var(--fs-border-color-light);
70
68
 
71
- @include media(">=notebook") { padding-top: $padding; }
69
+ @include media(">=notebook") {
70
+ padding-top: $padding;
71
+ }
72
72
  }
73
73
 
74
74
  @if $position == "bottom" {
75
75
  padding-bottom: $padding;
76
76
  border-bottom: var(--fs-border-width) solid var(--fs-border-color-light);
77
77
 
78
- @include media(">=notebook") { padding-bottom: $padding; }
78
+ @include media(">=notebook") {
79
+ padding-bottom: $padding;
80
+ }
79
81
  }
80
82
  }
81
83
 
82
84
  // Focus Ring Mixins /////////////////////////////////
83
85
 
84
86
  @mixin input-focus-ring($outline: #{var(--fs-color-focus-ring)}, $border: #{var(--fs-border-color-active)}) {
85
- @media not all and (min-resolution: .001dpcm) { // Target only Safari browsers
86
- @supports (-webkit-appearance:none) { // Use `focus` instead of `focus-visible`
87
- &:hover:focus, // due to Safari's lack of support
87
+ @media not all and (min-resolution: .001dpcm) {
88
+ // Target only Safari browsers
89
+ @supports (-webkit-appearance:none) {
90
+ // Use `focus` instead of `focus-visible`
91
+ &:hover:focus,
92
+ // due to Safari's lack of support
88
93
  &:focus {
89
94
  border-color: $border;
90
95
  outline: none;
@@ -113,10 +118,19 @@ $base: 16px !default;
113
118
  }
114
119
 
115
120
  @mixin focus-ring-visible {
116
- @media not all and (min-resolution: .001dpcm) { // Target only Safari browsers
117
- @supports (-webkit-appearance:none) { // Use `focus` instead of `focus-visible`
118
- &:focus { @include focus-ring; } // due to Safari's lack of support
121
+ @media not all and (min-resolution: .001dpcm) {
122
+ // Target only Safari browsers
123
+ @supports (-webkit-appearance:none) {
124
+ // Use `focus` instead of `focus-visible`
125
+ &:focus {
126
+ @include focus-ring;
127
+ }
128
+
129
+ // due to Safari's lack of support
119
130
  }
120
131
  }
121
- &:focus-visible { @include focus-ring; }
132
+
133
+ &:focus-visible {
134
+ @include focus-ring;
135
+ }
122
136
  }
@@ -1,4 +1,4 @@
1
- @import "./base/reset";
2
- @import "./base/tokens";
3
- @import "./base/typography";
4
- @import "./base/layout";
1
+ @use "./base/reset";
2
+ @use "./base/tokens";
3
+ @use "./base/typography";
4
+ @use "./base/layout";
@@ -98,3 +98,4 @@
98
98
  @import "../components/organisms/ShippingSimulation/styles";
99
99
  @import "../components/organisms/SlideOver/styles";
100
100
  @import "../components/organisms/Tiles/styles";
101
+ @import "../components/organisms/LocalizationSelector/styles";
@@ -1 +1 @@
1
- @import "./base";
1
+ @use "./base";
@@ -1 +0,0 @@
1
- {"version":3,"file":"Incentive.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Incentive/Incentive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,QAAA,MAAM,SAAS,uFASb,CAAA;AAEF,eAAe,SAAS,CAAA"}
@@ -1,9 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- const react_1 = tslib_1.__importStar(require("react"));
5
- const Incentive = (0, react_1.forwardRef)(function Incentive({ testId = 'store-incentive', children, ...otherProps }, ref) {
6
- return (react_1.default.createElement("section", { ref: ref, "data-fs-incentive": true, "data-testid": testId, ...otherProps }, children));
7
- });
8
- exports.default = Incentive;
9
- //# sourceMappingURL=Incentive.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Incentive.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Incentive/Incentive.tsx"],"names":[],"mappings":";;;AACA,uDAAyC;AAUzC,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAiC,SAAS,SAAS,CAC7E,EAAE,MAAM,GAAG,iBAAiB,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EACvD,GAAG;IAEH,OAAO,CACL,2CAAS,GAAG,EAAE,GAAG,4CAAiC,MAAM,KAAM,UAAU,IACrE,QAAQ,CACD,CACX,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,kBAAe,SAAS,CAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Incentive/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AACrC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA"}
@@ -1,9 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.default = void 0;
7
- var Incentive_1 = require("./Incentive");
8
- Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Incentive_1).default; } });
9
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Incentive/index.tsx"],"names":[],"mappings":";;;;;;AAAA,yCAAqC;AAA5B,qHAAA,OAAO,OAAA"}
@@ -1,12 +0,0 @@
1
- import React from 'react';
2
- import type { HTMLAttributes } from 'react';
3
- export interface TileProps extends HTMLAttributes<HTMLLIElement> {
4
- /**
5
- * ID to find this component in testing tools (e.g.: Cypress,
6
- * Testing Library, and Jest).
7
- */
8
- testId?: string;
9
- }
10
- declare const Tile: React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLLIElement>>;
11
- export default Tile;
12
- //# sourceMappingURL=Tile.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/Tiles/Tile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,QAAA,MAAM,IAAI,iFAeR,CAAA;AAEF,eAAe,IAAI,CAAA"}
@@ -1,9 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- const react_1 = tslib_1.__importStar(require("react"));
5
- const Tile = (0, react_1.forwardRef)(function Tile({ testId = 'store-tile', children, ...otherProps }, ref) {
6
- return (react_1.default.createElement("li", { ref: ref, role: "listitem", "data-fs-tile": true, "data-testid": testId, ...otherProps }, children));
7
- });
8
- exports.default = Tile;
9
- //# sourceMappingURL=Tile.js.map