@faststore/ui 3.98.0-dev.3 → 3.98.0-dev.8

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 (12) hide show
  1. package/dist/cjs/index.d.ts +1 -1
  2. package/dist/cjs/index.d.ts.map +1 -1
  3. package/dist/esm/index.d.ts +1 -1
  4. package/dist/esm/index.d.ts.map +1 -1
  5. package/package.json +3 -3
  6. package/src/components/molecules/Dropzone/styles.scss +234 -0
  7. package/src/components/molecules/FileUploadCard/styles.scss +270 -0
  8. package/src/components/molecules/FileUploadStatus/styles.scss +231 -0
  9. package/src/components/molecules/SearchInputField/styles.scss +74 -15
  10. package/src/components/organisms/QuickOrderDrawer/styles.scss +439 -0
  11. package/src/index.ts +1 -1
  12. package/src/styles/components.scss +4 -0
package/dist/cjs/index.d.ts CHANGED
@@ -2,5 +2,5 @@ export * from '@faststore/components';
2
2
  export { default as Incentive } from './components/atoms/Incentive';
3
3
  export type { IncentiveProps } from './components/atoms/Incentive';
4
4
  export { Tile, Tiles } from './components/organisms/Tiles';
5
- export type { TilesProps, TileProps } from './components/organisms/Tiles';
5
+ export type { TileProps, TilesProps } from './components/organisms/Tiles';
6
6
  //# sourceMappingURL=index.d.ts.map
package/dist/cjs/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AAErC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACnE,YAAY,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAGlE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAA;AAC1D,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AAErC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACnE,YAAY,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAGlE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAA;AAC1D,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAA"}
package/dist/esm/index.d.ts CHANGED
@@ -2,5 +2,5 @@ export * from '@faststore/components';
2
2
  export { default as Incentive } from './components/atoms/Incentive';
3
3
  export type { IncentiveProps } from './components/atoms/Incentive';
4
4
  export { Tile, Tiles } from './components/organisms/Tiles';
5
- export type { TilesProps, TileProps } from './components/organisms/Tiles';
5
+ export type { TileProps, TilesProps } from './components/organisms/Tiles';
6
6
  //# sourceMappingURL=index.d.ts.map
package/dist/esm/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AAErC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACnE,YAAY,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAGlE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAA;AAC1D,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AAErC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACnE,YAAY,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAGlE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAA;AAC1D,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@faststore/ui",
3
- "version": "3.98.0-dev.3",
3
+ "version": "3.98.0-dev.8",
4
4
  "description": "A lightweight, framework agnostic component library for React",
5
5
  "author": "emersonlaurentino",
6
6
  "license": "MIT",
@@ -47,7 +47,7 @@
47
47
  }
48
48
  ],
49
49
  "dependencies": {
50
- "@faststore/components": "^3.98.0-dev.3",
50
+ "@faststore/components": "3.98.0-dev.8",
51
51
  "include-media": "^1.4.10",
52
52
  "modern-normalize": "^1.1.0",
53
53
  "react-swipeable": "^7.0.0",
@@ -73,5 +73,5 @@
73
73
  "publishConfig": {
74
74
  "access": "public"
75
75
  },
76
- "gitHead": "c6e0f65660673a92f9de733b7502551ef755e86c"
76
+ "gitHead": "c1d0239ddbd1a792e45d82ef15f018d47b854ca0"
77
77
  }
package/src/components/molecules/Dropzone/styles.scss ADDED
@@ -0,0 +1,234 @@
1
+ [data-fs-dropzone] {
2
+ // --------------------------------------------------------
3
+ // Design Tokens for Dropzone Component
4
+ // --------------------------------------------------------
5
+
6
+ // Default properties
7
+ --fs-modal-bg-color: var(--fs-color-neutral-0);
8
+
9
+ // --------------------------------------------------------
10
+ // Structural Styles
11
+ // --------------------------------------------------------
12
+
13
+ // Base styles
14
+ position: relative;
15
+ display: flex;
16
+ flex-direction: column;
17
+ align-items: center;
18
+ justify-content: center;
19
+ min-height: 200px;
20
+ padding: var(--fs-spacing-4);
21
+ cursor: pointer;
22
+ background-color: var(--fs-modal-bg-color);
23
+ border: 1px dashed var(--fs-color-neutral-3);
24
+ border-radius: var(--fs-border-radius);
25
+ transition: all var(--fs-transition-timing) var(--fs-transition-function);
26
+
27
+ // Hover state
28
+ &:hover {
29
+ background-color: var(--fs-color-primary-bkg-light);
30
+ border-color: var(--fs-color-primary-base);
31
+ }
32
+
33
+ // Focus state
34
+ &:focus-within {
35
+ outline: 2px solid var(--fs-color-focus-ring);
36
+ outline-offset: 2px;
37
+ }
38
+
39
+ // Drag active state
40
+ &[data-fs-dropzone-drag-active="true"] {
41
+ background-color: var(--fs-color-primary-bkg-light);
42
+ border-color: var(--fs-color-primary-base);
43
+ transform: scale(1.02);
44
+ animation: dropzone-pulse 1s infinite;
45
+ }
46
+
47
+ // Drag accept state
48
+ &[data-fs-dropzone-drag-accept="true"] {
49
+ background-color: var(--fs-color-success-bkg);
50
+ border-color: var(--fs-color-success-border);
51
+
52
+ [data-fs-dropzone-text] {
53
+ font-weight: var(--fs-text-weight-semibold);
54
+ color: var(--fs-color-success-text);
55
+ }
56
+ }
57
+
58
+ // Drag reject state
59
+ &[data-fs-dropzone-drag-reject="true"] {
60
+ background-color: var(--fs-color-danger-bkg);
61
+ border-color: var(--fs-color-danger-border);
62
+
63
+ [data-fs-dropzone-text] {
64
+ color: var(--fs-color-danger-text);
65
+ }
66
+ }
67
+
68
+ // Disabled state
69
+ // pointer-events is NOT used here so that cursor: not-allowed and
70
+ // &:hover overrides remain visible. Disabling is enforced by
71
+ // react-dropzone's `disabled` prop + aria-disabled in the component.
72
+ &[data-fs-dropzone-disabled="true"] {
73
+ cursor: not-allowed;
74
+ opacity: 0.6;
75
+
76
+ &:hover {
77
+ background-color: var(--fs-color-neutral-0);
78
+ border-color: var(--fs-border-color);
79
+ }
80
+ }
81
+
82
+ // Icon styles
83
+ [data-fs-dropzone-icon] {
84
+ margin-bottom: var(--fs-spacing-2);
85
+ font-size: var(--fs-text-size-4);
86
+ color: var(--fs-color-text-light);
87
+
88
+ svg {
89
+ width: 60px;
90
+ height: 50px;
91
+ }
92
+ }
93
+
94
+ // Content area
95
+ [data-fs-dropzone-content] {
96
+ width: 100%;
97
+ text-align: center;
98
+ }
99
+
100
+ // Text styles
101
+ [data-fs-dropzone-text] {
102
+ margin: 0;
103
+ font-size: var(--fs-text-size-2);
104
+ font-weight: var(--fs-text-weight-semibold);
105
+ line-height: 1.5;
106
+ color: var(--fs-color-text);
107
+ }
108
+
109
+ // Files list
110
+ [data-fs-dropzone-files] {
111
+ width: 100%;
112
+ max-width: 400px;
113
+ padding: var(--fs-spacing-2);
114
+ margin-top: var(--fs-spacing-3);
115
+ background-color: var(--fs-color-success-bkg);
116
+ border: 1px solid var(--fs-color-success-border);
117
+ border-radius: var(--fs-border-radius-medium);
118
+
119
+ > p {
120
+ margin: 0 0 var(--fs-spacing-1) 0;
121
+ font-size: var(--fs-text-size-1);
122
+ font-weight: var(--fs-text-weight-bold);
123
+ color: var(--fs-color-success-text);
124
+ }
125
+
126
+ ul {
127
+ padding: 0;
128
+ margin: 0;
129
+ list-style: none;
130
+ }
131
+ }
132
+
133
+ [data-fs-dropzone-file] {
134
+ padding: var(--fs-spacing-1) 0;
135
+ font-size: var(--fs-text-size-1);
136
+ color: var(--fs-color-text);
137
+ border-bottom: 1px solid var(--fs-color-success-border);
138
+
139
+ &:last-child {
140
+ border-bottom: none;
141
+ }
142
+ }
143
+
144
+ // Errors list
145
+ [data-fs-dropzone-errors] {
146
+ width: 100%;
147
+ max-width: 400px;
148
+ padding: var(--fs-spacing-2);
149
+ margin-top: var(--fs-spacing-3);
150
+ background-color: var(--fs-color-danger-bkg);
151
+ border: 1px solid var(--fs-color-danger-border);
152
+ border-radius: var(--fs-border-radius-small);
153
+
154
+ > p {
155
+ margin: 0 0 var(--fs-spacing-1) 0;
156
+ font-size: var(--fs-text-size-1);
157
+ font-weight: var(--fs-text-weight-bold);
158
+ color: var(--fs-color-danger-text);
159
+ }
160
+
161
+ ul {
162
+ padding: 0;
163
+ margin: 0;
164
+ list-style: none;
165
+ }
166
+ }
167
+
168
+ [data-fs-dropzone-error] {
169
+ padding: var(--fs-spacing-1) 0;
170
+ font-size: var(--fs-text-size-1);
171
+ color: var(--fs-color-danger-text);
172
+ border-bottom: 1px solid var(--fs-color-danger-border);
173
+
174
+ &:last-child {
175
+ border-bottom: none;
176
+ }
177
+ }
178
+
179
+ // Input hidden
180
+ input[type="file"] {
181
+ position: absolute;
182
+ width: 1px;
183
+ height: 1px;
184
+ padding: 0;
185
+ margin: -1px;
186
+ overflow: hidden;
187
+ clip-path: inset(50%);
188
+ white-space: nowrap;
189
+ border: 0;
190
+ }
191
+ }
192
+
193
+ // Responsive design
194
+ @media (width <= 768px) {
195
+ [data-fs-dropzone] {
196
+ min-height: 150px;
197
+ padding: var(--fs-spacing-3);
198
+
199
+ [data-fs-dropzone-icon] svg {
200
+ width: 32px;
201
+ height: 32px;
202
+ }
203
+
204
+ [data-fs-dropzone-text] {
205
+ font-size: var(--fs-text-size-1);
206
+ font-weight: var(--fs-text-weight-semibold);
207
+ }
208
+ }
209
+ }
210
+
211
+ // Dark mode support (if using CSS custom properties)
212
+ [data-theme="dark"] [data-fs-dropzone] {
213
+ background-color: var(--fs-color-neutral-1);
214
+ border-color: var(--fs-color-neutral-3);
215
+
216
+ &:hover {
217
+ background-color: var(--fs-color-primary-bkg-dark);
218
+ }
219
+ }
220
+
221
+ // Animation for drag state
222
+ @keyframes dropzone-pulse {
223
+ 0% {
224
+ transform: scale(1);
225
+ }
226
+
227
+ 50% {
228
+ transform: scale(1.02);
229
+ }
230
+
231
+ 100% {
232
+ transform: scale(1);
233
+ }
234
+ }
package/src/components/molecules/FileUploadCard/styles.scss ADDED
@@ -0,0 +1,270 @@
1
+ [data-fs-file-upload-card] {
2
+ // --------------------------------------------------------
3
+ // Design Tokens for File Upload Card
4
+ // --------------------------------------------------------
5
+
6
+ --fs-file-upload-card-padding: var(--fs-spacing-3);
7
+ --fs-file-upload-card-bkg-color: var(--fs-color-neutral-0);
8
+ --fs-file-upload-card-border-width: var(--fs-border-width);
9
+ --fs-file-upload-card-border-color: var(--fs-border-color-light);
10
+ --fs-file-upload-card-border-radius: var(--fs-border-radius-medium);
11
+ --fs-file-upload-card-dropzone-padding: var(--fs-spacing-3) var(--fs-spacing-4);
12
+ --fs-file-upload-card-dropzone-border-width: var(--fs-border-width-thick);
13
+ --fs-file-upload-card-dropzone-border-color: var(--fs-border-color-light);
14
+ --fs-file-upload-card-dropzone-border-radius: var(--fs-border-radius);
15
+ --fs-file-upload-card-icon-size: 3rem;
16
+ --fs-file-upload-card-badge-size: 1.5rem;
17
+ --fs-file-upload-card-badge-bg-color: #0366dd;
18
+ --fs-file-upload-card-shadow-color: #bfdbfe;
19
+ --fs-file-upload-card-title-color: var(--fs-color-text);
20
+ --fs-file-upload-card-link-color: var(--fs-color-link);
21
+
22
+ // --------------------------------------------------------
23
+ // Structural Styles
24
+ // --------------------------------------------------------
25
+
26
+ position: absolute;
27
+ top: calc(100% + var(--fs-spacing-1));
28
+ right: 0;
29
+ left: 0;
30
+ z-index: var(--fs-z-index-dropdown, 1000);
31
+ width: 100%;
32
+ max-height: 0;
33
+ padding: var(--fs-file-upload-card-padding);
34
+ margin: 0;
35
+ overflow: hidden;
36
+ pointer-events: none;
37
+ background: var(--fs-file-upload-card-bkg-color);
38
+ border:
39
+ var(--fs-file-upload-card-border-width) solid
40
+ var(--fs-file-upload-card-border-color);
41
+ border-radius: var(--fs-file-upload-card-border-radius);
42
+ opacity: 0;
43
+ transition:
44
+ opacity var(--fs-transition-timing) ease,
45
+ transform var(--fs-transition-timing) ease,
46
+ max-height 0.3s ease;
47
+ transform: translateY(-10px);
48
+
49
+ &[data-fs-file-upload-card-open="true"] {
50
+ height: 285px;
51
+ max-height: 285px;
52
+ pointer-events: auto;
53
+ opacity: 1;
54
+ transform: translateY(0);
55
+
56
+ // When file is selected, override the fixed height and show content
57
+ &[data-fs-file-upload-card-has-file="true"] {
58
+ height: auto;
59
+ max-height: none;
60
+ overflow: visible;
61
+
62
+ [data-fs-card] {
63
+ height: auto;
64
+ }
65
+
66
+ [data-fs-card-body] {
67
+ height: auto;
68
+ }
69
+ }
70
+ }
71
+
72
+ // Ensure the card section itself fills the full height
73
+ [data-fs-card] {
74
+ height: 100%;
75
+ }
76
+
77
+ // Hide the Card header since we don't need it in this use case
78
+ [data-fs-card-header] {
79
+ display: none;
80
+ }
81
+
82
+ // Remove default padding from card body and ensure it fills the height
83
+ [data-fs-card-body] {
84
+ height: 100%;
85
+ padding: 0;
86
+ }
87
+ }
88
+
89
+ [data-fs-file-upload-card-dropzone] {
90
+ display: flex;
91
+ flex-direction: column;
92
+ gap: 0;
93
+ align-items: center;
94
+ justify-content: center;
95
+ height: 100%;
96
+ padding: var(--fs-file-upload-card-dropzone-padding);
97
+ border:
98
+ var(--fs-file-upload-card-dropzone-border-width) dashed
99
+ var(--fs-file-upload-card-dropzone-border-color);
100
+ border-radius: var(--fs-file-upload-card-dropzone-border-radius);
101
+ transition:
102
+ border-color var(--fs-transition-timing) ease,
103
+ background-color var(--fs-transition-timing) ease;
104
+
105
+ &[data-fs-file-upload-card-dragging="true"] {
106
+ background-color: var(--fs-color-primary-bkg-light, #f0f7ff);
107
+ border-color: var(--fs-color-primary-bkg);
108
+ }
109
+ }
110
+
111
+ [data-fs-file-upload-card-icon] {
112
+ position: relative;
113
+ display: flex;
114
+ align-items: center;
115
+ justify-content: center;
116
+ width: var(--fs-file-upload-card-icon-size);
117
+ height: var(--fs-file-upload-card-icon-size);
118
+ margin-bottom: var(--fs-spacing-2);
119
+ }
120
+
121
+ [data-fs-file-upload-card-icon-shadow] {
122
+ position: absolute;
123
+ top: 0.5rem;
124
+ left: 0.5rem;
125
+ z-index: 0;
126
+ width: 100%;
127
+ height: 100%;
128
+ background-color: var(--fs-file-upload-card-shadow-color);
129
+ border-radius: var(--fs-border-radius-medium);
130
+ transform: rotate(6deg);
131
+ }
132
+
133
+ [data-fs-file-upload-card-icon-wrapper] {
134
+ position: relative;
135
+ z-index: 1;
136
+ display: flex;
137
+ align-items: center;
138
+ justify-content: center;
139
+ width: 100%;
140
+ height: 100%;
141
+ background-color: var(--fs-color-neutral-0);
142
+ border: 3px solid var(--fs-color-text);
143
+ border-radius: var(--fs-border-radius-medium);
144
+
145
+ [data-fs-icon] {
146
+ color: var(--fs-color-text);
147
+ transform: rotate(90deg);
148
+ }
149
+ }
150
+
151
+ [data-fs-file-upload-card-icon-badge] {
152
+ position: absolute;
153
+ top: -0.75rem;
154
+ left: -0.75rem;
155
+ z-index: 2;
156
+ display: flex;
157
+ align-items: center;
158
+ justify-content: center;
159
+ width: var(--fs-file-upload-card-badge-size);
160
+ height: var(--fs-file-upload-card-badge-size);
161
+ background-color: #ffffff;
162
+ border: 3px solid var(--fs-file-upload-card-badge-bg-color);
163
+ border-radius: var(--fs-border-radius-circle);
164
+ box-shadow:
165
+ 0 10px 15px -3px rgb(0 0 0 / 10%),
166
+ 0 4px 6px -2px rgb(0 0 0 / 5%);
167
+
168
+ [data-fs-icon] {
169
+ color: var(--fs-file-upload-card-badge-bg-color);
170
+ stroke-width: 1.625rem;
171
+ }
172
+ }
173
+
174
+ [data-fs-file-upload-card-title] {
175
+ margin: 0 0 var(--fs-spacing-3) 0;
176
+ font-size: var(--fs-text-size-legend);
177
+ font-weight: var(--fs-text-weight-medium);
178
+ line-height: 1.5;
179
+ color: var(--fs-file-upload-card-title-color);
180
+ text-align: center;
181
+ }
182
+
183
+ [data-fs-file-upload-card-select-button] {
184
+ width: 6.625rem;
185
+ height: 2.5rem;
186
+ min-height: 2.5rem;
187
+ margin-top: 0;
188
+ --fs-button-border-radius: var(--fs-border-radius-pill);
189
+ --fs-button-primary-bkg-color: #0366dd;
190
+ --fs-button-secondary-bkg-color-hover: white;
191
+ --fs-button-primary-text-color: var(--fs-color-neutral-0);
192
+ --fs-button-secondary-text-color: #0366dd;
193
+ --fs-button-secondary-bkg-color: transparent;
194
+ --fs-button-secondary-border-color: #d6d6d6;
195
+ --fs-button-secondary-text-color-hover: #0366dd;
196
+ --fs-button-secondary-border-color-hover: #0366dd;
197
+
198
+ [data-fs-button-wrapper] {
199
+ padding: 0;
200
+ }
201
+ }
202
+
203
+ [data-fs-file-upload-card-template-link] {
204
+ padding: 0;
205
+ margin-top: var(--fs-spacing-2);
206
+ font-size: var(--fs-text-size-legend);
207
+ font-weight: var(--fs-text-weight-medium);
208
+ color: var(--fs-file-upload-card-badge-bg-color);
209
+ text-decoration: none;
210
+ cursor: pointer;
211
+ background: none;
212
+ border: none;
213
+ transition: opacity var(--fs-transition-timing) ease;
214
+
215
+ &:hover {
216
+ text-decoration: underline;
217
+ opacity: 0.7;
218
+ }
219
+
220
+ &:focus-visible {
221
+ border-radius: var(--fs-border-radius-small);
222
+ outline: 0.125rem solid var(--fs-color-focus-ring);
223
+ outline-offset: 0.125rem;
224
+ }
225
+ }
226
+
227
+ [data-fs-file-upload-card-files] {
228
+ width: 100%;
229
+ padding: var(--fs-spacing-3);
230
+ margin-top: var(--fs-spacing-4);
231
+ background-color: var(--fs-color-neutral-bkg, #f5f5f5);
232
+ border-radius: var(--fs-border-radius);
233
+ }
234
+
235
+ [data-fs-file-upload-card-files-title] {
236
+ margin: 0 0 var(--fs-spacing-2) 0;
237
+ font-size: var(--fs-text-size-tiny);
238
+ font-weight: var(--fs-text-weight-bold);
239
+ color: var(--fs-color-text);
240
+ text-align: center;
241
+ }
242
+
243
+ [data-fs-file-upload-card-files-list] {
244
+ display: flex;
245
+ flex-direction: column;
246
+ gap: var(--fs-spacing-1);
247
+ padding: 0;
248
+ margin: 0;
249
+ list-style: none;
250
+ }
251
+
252
+ [data-fs-file-upload-card-file-item] {
253
+ display: flex;
254
+ gap: var(--fs-spacing-1);
255
+ align-items: center;
256
+ justify-content: center;
257
+ font-size: var(--fs-text-size-tiny);
258
+ color: var(--fs-color-text);
259
+
260
+ span:first-child {
261
+ max-width: 20rem;
262
+ overflow: hidden;
263
+ text-overflow: ellipsis;
264
+ white-space: nowrap;
265
+ }
266
+ }
267
+
268
+ [data-fs-file-upload-card-file-size] {
269
+ color: var(--fs-color-text-light);
270
+ }
package/src/components/molecules/FileUploadStatus/styles.scss ADDED
@@ -0,0 +1,231 @@
1
+ [data-fs-file-upload-status] {
2
+ // --------------------------------------------------------
3
+ // Design Tokens for File Upload Status
4
+ // --------------------------------------------------------
5
+
6
+ --fs-file-upload-status-padding: var(--fs-spacing-0);
7
+ --fs-file-upload-status-gap: var(--fs-spacing-3);
8
+ --fs-file-upload-status-bkg-color: var(--fs-color-neutral-0);
9
+ --fs-file-upload-status-file-info-padding: var(--fs-spacing-3);
10
+ --fs-file-upload-status-file-info-border-color: var(--fs-border-color-light);
11
+ --fs-file-upload-status-file-info-border-radius: 1.25rem;
12
+ --fs-file-upload-status-icon-size: var(--fs-spacing-6);
13
+ --fs-file-upload-status-icon-bg-completed: #08a822;
14
+ --fs-file-upload-status-icon-bg-uploading: #08a822;
15
+ --fs-file-upload-status-icon-bg-error: #d31a15;
16
+ --fs-file-upload-status-filename-color: var(--fs-color-text);
17
+ --fs-file-upload-status-text-color: var(--fs-color-text-light);
18
+ --fs-file-upload-status-button-width: 100%;
19
+ --fs-file-upload-status-button-height: var(--fs-spacing-7);
20
+
21
+ // --------------------------------------------------------
22
+ // Structural Styles
23
+ // --------------------------------------------------------
24
+
25
+ display: flex;
26
+ flex-direction: column;
27
+ gap: var(--fs-file-upload-status-gap);
28
+
29
+ // height: 188px;
30
+ width: 100%;
31
+ padding: var(--fs-file-upload-status-padding);
32
+ background-color: var(--fs-file-upload-status-bkg-color);
33
+ }
34
+
35
+ [data-fs-file-upload-status-file-info] {
36
+ display: flex;
37
+ gap: var(--fs-spacing-3);
38
+ align-items: center;
39
+ padding: var(--fs-file-upload-status-file-info-padding);
40
+ background-color: var(--fs-color-neutral-0);
41
+ border:
42
+ var(--fs-border-width) solid
43
+ var(--fs-file-upload-status-file-info-border-color);
44
+ border-radius: var(--fs-file-upload-status-file-info-border-radius);
45
+ }
46
+
47
+ [data-fs-file-upload-status-file-info][data-fs-file-upload-state="error"] {
48
+ background-color: #fdf6f5;
49
+ border: 1px solid #ffdfd9;
50
+ }
51
+
52
+ [data-fs-file-upload-status-icon] {
53
+ display: flex;
54
+ flex-shrink: 0;
55
+ align-items: center;
56
+ justify-content: center;
57
+ width: var(--fs-file-upload-status-icon-size);
58
+ height: var(--fs-file-upload-status-icon-size);
59
+ border-radius: var(--fs-border-radius);
60
+ }
61
+
62
+ [data-fs-file-upload-status-icon-loading] {
63
+ display: flex;
64
+ align-items: center;
65
+ justify-content: center;
66
+ width: 100%;
67
+ height: 100%;
68
+ background-color: var(--fs-file-upload-status-icon-bg-uploading);
69
+ border-radius: var(--fs-border-radius);
70
+
71
+ [data-fs-icon] {
72
+ overflow: visible;
73
+ color: var(--fs-color-neutral-0);
74
+ fill: currentColor;
75
+ stroke: currentColor;
76
+ animation: spin 1s linear infinite;
77
+ }
78
+ }
79
+
80
+ @keyframes spin {
81
+ from {
82
+ transform: rotate(0deg);
83
+ }
84
+
85
+ to {
86
+ transform: rotate(360deg);
87
+ }
88
+ }
89
+
90
+ [data-fs-file-upload-status-icon-completed] {
91
+ display: flex;
92
+ align-items: center;
93
+ justify-content: center;
94
+ width: 100%;
95
+ height: 100%;
96
+ background-color: var(--fs-file-upload-status-icon-bg-completed);
97
+ border-radius: var(--fs-border-radius-medium);
98
+
99
+ [data-fs-icon] {
100
+ overflow: visible;
101
+ color: var(--fs-color-neutral-0);
102
+ fill: currentColor;
103
+ stroke: currentColor;
104
+ }
105
+ }
106
+
107
+ [data-fs-file-upload-status-icon-error] {
108
+ display: flex;
109
+ align-items: center;
110
+ justify-content: center;
111
+ width: 100%;
112
+ height: 100%;
113
+ background-color: var(--fs-file-upload-status-icon-bg-error);
114
+ border-radius: var(--fs-border-radius-medium);
115
+
116
+ [data-fs-icon] {
117
+ overflow: visible;
118
+ color: var(--fs-color-neutral-0);
119
+ fill: currentColor;
120
+ stroke: currentColor;
121
+ }
122
+ }
123
+
124
+ [data-fs-file-upload-status-details] {
125
+ display: flex;
126
+ flex: 1;
127
+ flex-direction: column;
128
+ gap: var(--fs-spacing-0);
129
+ min-width: 0;
130
+ }
131
+
132
+ [data-fs-file-upload-status-filename] {
133
+ margin: 0;
134
+ overflow: hidden;
135
+ font-size: var(--fs-text-size-body);
136
+ font-weight: var(--fs-text-weight-medium);
137
+ color: var(--fs-file-upload-status-filename-color);
138
+ text-overflow: ellipsis;
139
+ white-space: nowrap;
140
+ }
141
+
142
+ [data-fs-file-upload-status-text-error] {
143
+ margin: 0;
144
+ overflow: hidden;
145
+ font-size: var(--fs-text-size-legend);
146
+ font-weight: var(--fs-text-weight-medium);
147
+ color: var(--fs-file-upload-status-filename-color);
148
+ text-overflow: ellipsis;
149
+ white-space: nowrap;
150
+ }
151
+
152
+ [data-fs-file-upload-status-text] {
153
+ margin: 0;
154
+ font-size: var(--fs-text-size-legend);
155
+ font-weight: var(--fs-text-weight-medium);
156
+ color: var(--fs-file-upload-status-text-color);
157
+
158
+ [data-fs-file-upload-status-state="error"] & {
159
+ font-size: var(--fs-text-size-1);
160
+ font-weight: 500;
161
+ }
162
+ }
163
+
164
+ [data-fs-file-upload-status-remove] {
165
+ display: flex;
166
+ flex-shrink: 0;
167
+ align-items: center;
168
+ justify-content: center;
169
+ padding: var(--fs-spacing-1);
170
+ color: var(--fs-color-text);
171
+ cursor: pointer;
172
+ background: none;
173
+ border: none;
174
+ transition: opacity var(--fs-transition-timing) ease;
175
+
176
+ &:hover {
177
+ opacity: 0.7;
178
+ }
179
+
180
+ &:focus-visible {
181
+ border-radius: var(--fs-border-radius-small);
182
+ outline: 2px solid var(--fs-color-focus-ring);
183
+ outline-offset: 2px;
184
+ }
185
+
186
+ [data-fs-icon] {
187
+ width: var(--fs-spacing-4);
188
+ height: var(--fs-spacing-4);
189
+ }
190
+ }
191
+
192
+ [data-fs-file-upload-status-search-button] {
193
+ width: var(--fs-file-upload-status-button-width);
194
+ height: var(--fs-file-upload-status-button-height);
195
+ min-height: var(--fs-file-upload-status-button-height);
196
+
197
+ --fs-button-border-radius: var(--fs-border-radius-pill);
198
+ --fs-button-primary-bkg-color: #0366dd;
199
+ --fs-button-primary-bkg-color-hover: #0252b8;
200
+ --fs-button-primary-text-color: var(--fs-color-neutral-0);
201
+
202
+ [data-fs-button-wrapper] {
203
+ padding: 0;
204
+ }
205
+ }
206
+
207
+ [data-fs-file-upload-status-error-actions] {
208
+ display: flex;
209
+ gap: var(--fs-spacing-2);
210
+ width: 100%;
211
+ }
212
+
213
+ [data-fs-file-upload-status-download-button],
214
+ [data-fs-file-upload-status-select-button] {
215
+ flex: 1;
216
+ height: var(--fs-file-upload-status-button-height);
217
+ min-height: var(--fs-file-upload-status-button-height);
218
+
219
+ --fs-button-border-radius: var(--fs-border-radius-pill);
220
+ --fs-button-primary-bkg-color: #0366dd;
221
+ --fs-button-primary-bkg-color-hover: #0252b8;
222
+ --fs-button-primary-text-color: var(--fs-color-neutral-0);
223
+ --fs-button-secondary-text-color: #0366dd;
224
+ --fs-button-secondary-bkg-color: transparent;
225
+ --fs-button-secondary-border-color: #d6d6d6;
226
+ --fs-button-secondary-text-color-hover: var(--fs-color-neutral-0);
227
+
228
+ [data-fs-button-wrapper] {
229
+ padding: 0;
230
+ }
231
+ }
package/src/components/molecules/SearchInputField/styles.scss CHANGED
@@ -1,22 +1,32 @@
1
+ [data-fs-search-input-field-wrapper] {
2
+ position: relative;
3
+ display: inline-flex;
4
+ width: 100%;
5
+ }
6
+
1
7
  [data-fs-search-input-field] {
2
8
  // --------------------------------------------------------
3
9
  // Design Tokens for Search Input Field
4
10
  // --------------------------------------------------------
5
11
  // Default properties
6
- --fs-search-input-field-height-mobile : var(--fs-control-tap-size);
7
- --fs-search-input-field-height-desktop : var(--fs-spacing-6);
12
+ --fs-search-input-field-height-mobile: var(--fs-control-tap-size);
13
+ --fs-search-input-field-height-desktop: var(--fs-spacing-6);
8
14
 
9
- --fs-search-input-field-transition-timing : var(--fs-transition-timing);
10
- --fs-search-input-field-transition-function : ease;
15
+ --fs-search-input-field-transition-timing: var(--fs-transition-timing);
16
+ --fs-search-input-field-transition-function: ease;
11
17
 
12
18
  // Button
13
- --fs-search-input-field-button-min-height : var(--fs-search-input-field-height-desktop);
14
- --fs-search-input-field-button-padding-top-desktop : var(--fs-spacing-0);
15
- --fs-search-input-field-button-padding-bottom-desktop : var(--fs-search-input-field-button-padding-top-desktop);
19
+ --fs-search-input-field-button-min-height: var(
20
+ --fs-search-input-field-height-desktop
21
+ );
22
+ --fs-search-input-field-button-padding-top-desktop: var(--fs-spacing-0);
23
+ --fs-search-input-field-button-padding-bottom-desktop: var(
24
+ --fs-search-input-field-button-padding-top-desktop
25
+ );
16
26
 
17
27
  // Input
18
- --fs-search-input-field-input-padding-right : var(--fs-spacing-7);
19
- --fs-search-input-field-input-bkg-color : var(--fs-color-body-bkg);
28
+ --fs-search-input-field-input-padding-right: var(--fs-spacing-13);
29
+ --fs-search-input-field-input-bkg-color: var(--fs-color-body-bkg);
20
30
 
21
31
  // --------------------------------------------------------
22
32
  // Structural Styles
@@ -29,17 +39,24 @@
29
39
 
30
40
  @include input-focus-ring;
31
41
 
32
- @include media(">=notebook") { height: var(--fs-search-input-field-height-desktop); }
42
+ @include media(">=notebook") {
43
+ height: var(--fs-search-input-field-height-desktop);
44
+ }
33
45
 
34
- [data-fs-icon-button][data-fs-button-variant] {
46
+ [data-fs-search-input-field-actions] {
35
47
  position: relative;
36
- inset-inline-end: .125rem;
48
+ inset-inline-end: 0.125rem;
49
+ display: flex;
50
+ gap: 0;
51
+ align-items: center;
37
52
 
38
53
  @include media(">=notebook") {
39
54
  position: absolute;
40
55
  min-height: var(--fs-search-input-field-button-min-height);
41
56
  padding-top: var(--fs-search-input-field-button-padding-top-desktop);
42
- padding-bottom: var(--fs-search-input-field-button-padding-bottom-desktop);
57
+ padding-bottom: var(
58
+ --fs-search-input-field-button-padding-bottom-desktop
59
+ );
43
60
  inset-inline-end: 0;
44
61
  }
45
62
  }
@@ -48,8 +65,50 @@
48
65
  height: auto;
49
66
  padding-inline-end: var(--fs-search-input-field-input-padding-right);
50
67
  background-color: var(--fs-search-input-field-input-bkg-color);
51
- transition: box-shadow var(--fs-search-input-field-transition-timing) var(--fs-search-input-field-transition-timing), border var(--fs-search-input-field-transition-timing) var(--fs-search-input-field-transition-function);
68
+ transition:
69
+ box-shadow var(--fs-search-input-field-transition-timing)
70
+ var(--fs-search-input-field-transition-function),
71
+ border var(--fs-search-input-field-transition-timing)
72
+ var(--fs-search-input-field-transition-function);
52
73
 
53
- @include media("<notebook") { border: 0; }
74
+ @include media("<notebook") {
75
+ border: 0;
76
+ }
77
+ }
78
+
79
+ [data-fs-icon-button][data-fs-button-variant] {
80
+ @include media(">=notebook") {
81
+ min-height: var(--fs-search-input-field-button-min-height);
82
+ padding-top: var(--fs-search-input-field-button-padding-top-desktop);
83
+ padding-bottom: var(
84
+ --fs-search-input-field-button-padding-bottom-desktop
85
+ );
86
+ }
87
+ }
88
+
89
+ [data-fs-search-input-field-attachment-button] {
90
+ [data-fs-icon] {
91
+ transform: rotate(90deg);
92
+ }
93
+
94
+ &:hover {
95
+ --fs-button-border-radius: var(--fs-border-radius-circle);
96
+ }
97
+ }
98
+
99
+ [data-fs-search-input-field-separator] {
100
+ display: inline-block;
101
+ width: 1px;
102
+ height: var(--fs-spacing-3);
103
+ margin: 0 var(--fs-spacing-0);
104
+ background-color: var(--fs-border-color-light, #e0e0e0);
105
+ }
106
+
107
+ &[data-fs-search-input-field] [data-fs-search-input-field-upload-button] {
108
+ right: 2.5rem;
109
+
110
+ @include media(">=notebook") {
111
+ right: 3rem;
112
+ }
54
113
  }
55
114
  }
package/src/components/organisms/QuickOrderDrawer/styles.scss ADDED
@@ -0,0 +1,439 @@
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";
13
+
14
+ // --------------------------------------------------------
15
+ // Design Tokens for Quick Order Drawer
16
+ // --------------------------------------------------------
17
+
18
+ // Layout
19
+ --fs-quick-order-drawer-width: 91%;
20
+ --fs-quick-order-drawer-padding: var(--fs-spacing-11);
21
+ --fs-quick-order-drawer-row-height: 3rem;
22
+
23
+ // Colors
24
+ --fs-quick-order-drawer-bkg-color: var(--fs-color-body-bkg);
25
+ --fs-quick-order-drawer-primary-text-color: var(--fs-color-text);
26
+ --fs-quick-order-drawer-secondary-text-color: var(--fs-color-text-light);
27
+ --fs-quick-order-drawer-inverse-text-color: var(--fs-color-text-inverse);
28
+
29
+ // Borders
30
+ --fs-quick-order-drawer-border-width: var(--fs-border-width);
31
+ --fs-quick-order-drawer-border-color: var(--fs-color-neutral-2);
32
+ --fs-quick-order-drawer-border-radius: var(--fs-border-radius-medium);
33
+ --fs-quick-order-drawer-border-radius-pill: var(--fs-border-radius-pill);
34
+
35
+ // Typography
36
+ --fs-quick-order-drawer-title-size: var(--fs-text-size-4);
37
+ --fs-quick-order-drawer-text-size-body: var(--fs-text-size-1);
38
+ --fs-quick-order-drawer-text-size-small: var(--fs-text-size-0);
39
+ --fs-quick-order-drawer-text-size-default: var(--fs-text-size-2);
40
+ --fs-quick-order-drawer-text-size-legend: var(--fs-text-size-legend);
41
+ --fs-quick-order-drawer-text-weight-regular: var(--fs-text-weight-regular);
42
+ --fs-quick-order-drawer-text-weight-medium: var(--fs-text-weight-medium);
43
+ --fs-quick-order-drawer-text-weight-semibold: var(--fs-text-weight-semibold);
44
+
45
+ // Header
46
+ --fs-quick-order-drawer-header-completed-bkg: var(--fs-color-success-2);
47
+ --fs-quick-order-drawer-header-completed-color: var(--fs-color-neutral-0);
48
+
49
+ // Alert
50
+ --fs-quick-order-drawer-alert-bkg-color: var(--fs-color-info-bkg);
51
+ --fs-quick-order-drawer-alert-icon-color: var(--fs-color-link);
52
+
53
+ // Table
54
+ --fs-quick-order-drawer-out-of-stock-bkg: var(--fs-color-neutral-1);
55
+ --fs-quick-order-drawer-col-product-width: 33%;
56
+ --fs-quick-order-drawer-col-availability-width: 17%;
57
+ --fs-quick-order-drawer-col-price-width: 20%;
58
+ --fs-quick-order-drawer-col-quantity-width: 24%;
59
+ --fs-quick-order-drawer-col-actions-width: 6%;
60
+
61
+ // Footer
62
+ --fs-quick-order-drawer-footer-icon-color: #858585;
63
+ --fs-quick-order-drawer-footer-icon-bkg: #f5f5f5;
64
+ --fs-quick-order-drawer-footer-icon-size: 3rem;
65
+ --fs-quick-order-drawer-footer-btn-color: var(--fs-color-primary-text);
66
+ --fs-quick-order-drawer-footer-btn-bkg: var(--fs-color-primary-bkg);
67
+ --fs-quick-order-drawer-footer-btn-height: var(--fs-spacing-9);
68
+
69
+ display: flex;
70
+ flex-direction: column;
71
+ height: 100%;
72
+ color: var(--fs-quick-order-drawer-primary-text-color);
73
+
74
+ // --------------------------------------------------------
75
+ // Structural Styles
76
+ // --------------------------------------------------------
77
+ background-color: var(--fs-quick-order-drawer-bkg-color);
78
+
79
+ [data-fs-quick-order-drawer-text="primary"],
80
+ [data-fs-quick-order-text="primary"] {
81
+ overflow: hidden;
82
+ font-weight: var(--fs-quick-order-drawer-text-weight-medium);
83
+ line-height: 120%;
84
+ text-overflow: ellipsis;
85
+ white-space: nowrap;
86
+ vertical-align: middle;
87
+ }
88
+
89
+ [data-fs-quick-order-drawer-text="secondary"],
90
+ [data-fs-quick-order-text="secondary"] {
91
+ overflow: hidden;
92
+ font-size: var(--fs-quick-order-drawer-text-size-legend);
93
+ font-weight: var(--fs-quick-order-drawer-text-weight-regular);
94
+ line-height: 120%;
95
+ color: var(--fs-quick-order-drawer-secondary-text-color);
96
+ text-overflow: ellipsis;
97
+ white-space: nowrap;
98
+ vertical-align: middle;
99
+ }
100
+
101
+ &[data-fs-slide-over][data-fs-slide-over-size="partial"] {
102
+ width: var(--fs-quick-order-drawer-width);
103
+
104
+ @include media(">=notebook") {
105
+ width: var(--fs-quick-order-drawer-width);
106
+ max-width: var(--fs-quick-order-drawer-width);
107
+ }
108
+ }
109
+
110
+ [data-fs-quick-order-drawer-header] {
111
+ flex-shrink: 0;
112
+ padding:
113
+ var(--fs-spacing-4) var(--fs-spacing-4) var(--fs-spacing-4)
114
+ var(--fs-quick-order-drawer-padding);
115
+ border-bottom:
116
+ var(--fs-quick-order-drawer-border-width) solid
117
+ var(--fs-quick-order-drawer-border-color);
118
+
119
+ [data-fs-icon] {
120
+ color: var(--fs-quick-order-drawer-primary-text-color);
121
+ }
122
+
123
+ [data-fs-quick-order-drawer-title-container] {
124
+ display: flex;
125
+ align-items: center;
126
+ width: 50%;
127
+ height: 100%;
128
+ }
129
+
130
+ [data-fs-quick-order-drawer-icon] {
131
+ display: flex;
132
+ flex-shrink: 0;
133
+ align-items: center;
134
+ justify-content: center;
135
+ width: var(--fs-spacing-5);
136
+ height: var(--fs-spacing-5);
137
+ margin: 0;
138
+ margin-right: var(--fs-spacing-2);
139
+ margin-left: var(--fs-spacing-9);
140
+ }
141
+
142
+ [data-fs-quick-order-icon-completed] {
143
+ display: flex;
144
+ align-items: center;
145
+ justify-content: center;
146
+ width: 100%;
147
+ height: 100%;
148
+ background-color: var(--fs-quick-order-drawer-header-completed-bkg);
149
+ border-radius: var(--fs-quick-order-drawer-border-radius);
150
+
151
+ [data-fs-icon] {
152
+ width: var(--fs-spacing-4);
153
+ height: var(--fs-spacing-4);
154
+ overflow: visible;
155
+ color: var(--fs-quick-order-drawer-header-completed-color);
156
+ fill: currentcolor;
157
+ }
158
+ }
159
+
160
+ [data-fs-quick-order-drawer-title] {
161
+ padding: 0 0.5rem;
162
+ font-size: var(--fs-quick-order-drawer-title-size);
163
+ font-weight: var(--fs-quick-order-drawer-text-weight-semibold);
164
+ line-height: 120%;
165
+ vertical-align: middle;
166
+ }
167
+ }
168
+
169
+ [data-fs-quick-order-drawer-content] {
170
+ flex: 1;
171
+ min-height: 0;
172
+ padding: var(--fs-spacing-4) var(--fs-quick-order-drawer-padding);
173
+ overflow-x: hidden;
174
+ overflow-y: auto;
175
+ font-size: var(--fs-quick-order-drawer-text-size-body);
176
+
177
+ [data-fs-alert] {
178
+ width: 100%;
179
+ max-width: none;
180
+ font-weight: var(--fs-quick-order-drawer-text-weight-semibold);
181
+ background-color: var(--fs-quick-order-drawer-alert-bkg-color);
182
+ border-radius: var(--fs-spacing-0);
183
+ }
184
+
185
+ [data-fs-alert] svg {
186
+ color: var(--fs-quick-order-drawer-alert-icon-color);
187
+ }
188
+
189
+ [data-fs-quick-order-drawer-table] {
190
+ width: 100%;
191
+ table-layout: fixed;
192
+
193
+ [data-fs-table-head] {
194
+ color: var(--fs-quick-order-drawer-secondary-text-color);
195
+
196
+ [data-fs-table-cell="header"] {
197
+ font-weight: var(--fs-quick-order-drawer-text-weight-medium);
198
+ }
199
+
200
+ [data-fs-table-cell]:nth-child(1) {
201
+ width: var(--fs-quick-order-drawer-col-product-width);
202
+ }
203
+
204
+ [data-fs-table-cell]:nth-child(2) {
205
+ width: var(--fs-quick-order-drawer-col-availability-width);
206
+ }
207
+
208
+ [data-fs-table-cell]:nth-child(3) {
209
+ width: var(--fs-quick-order-drawer-col-price-width);
210
+ }
211
+
212
+ [data-fs-table-cell]:nth-child(4) {
213
+ width: var(--fs-quick-order-drawer-col-quantity-width);
214
+ }
215
+
216
+ [data-fs-table-cell]:nth-child(5) {
217
+ width: var(--fs-quick-order-drawer-col-actions-width);
218
+ }
219
+ }
220
+
221
+ [data-fs-table-row] {
222
+ height: var(--fs-quick-order-drawer-row-height);
223
+ border-bottom:
224
+ var(--fs-quick-order-drawer-border-width) solid
225
+ var(--fs-quick-order-drawer-border-color);
226
+ }
227
+
228
+ [data-fs-table-cell] {
229
+ padding: 1rem 0;
230
+ }
231
+
232
+ [data-fs-tooltip-wrapper] {
233
+ position: absolute;
234
+ top: 1.875rem;
235
+ color: var(--fs-quick-order-drawer-inverse-text-color);
236
+ background-color: var(--fs-quick-order-drawer-primary-text-color);
237
+ }
238
+
239
+ [data-fs-quick-order-drawer-table-row="available"],
240
+ [data-fs-quick-order-table-row="available"] {
241
+ color: var(--fs-quick-order-drawer-primary-text-color);
242
+ }
243
+
244
+ [data-fs-quick-order-table-row="outOfStock"] {
245
+ color: var(--fs-quick-order-drawer-secondary-text-color);
246
+ background-color: var(--fs-quick-order-drawer-out-of-stock-bkg);
247
+ }
248
+
249
+ [data-fs-quick-order-drawer-cell="product"],
250
+ [data-fs-quick-order-cell="product"] {
251
+ display: flex;
252
+ align-items: center;
253
+ overflow: hidden;
254
+ text-overflow: ellipsis;
255
+ white-space: nowrap;
256
+
257
+ [data-fs-quick-order-drawer-table-cell-img-container],
258
+ [data-fs-quick-order-table-cell-img-container] {
259
+ display: flex;
260
+ flex-direction: column;
261
+ align-items: center;
262
+ padding: 0 0.5rem;
263
+ }
264
+
265
+ [data-fs-quick-order-drawer-table-cell-name-container],
266
+ [data-fs-quick-order-table-cell-name-container] {
267
+ display: flex;
268
+ flex-direction: column;
269
+ padding: var(--fs-spacing-3) var(--fs-spacing-1);
270
+ overflow: hidden;
271
+ text-overflow: ellipsis;
272
+ white-space: nowrap;
273
+ }
274
+
275
+ [data-fs-tooltip] {
276
+ [data-fs-button] {
277
+ width: 2rem;
278
+
279
+ [data-fs-button-wrapper] {
280
+ width: var(--fs-spacing-4);
281
+ }
282
+ }
283
+
284
+ align-self: flex-start;
285
+
286
+ svg {
287
+ width: 1.25rem;
288
+ height: 1.25rem;
289
+ margin: 0;
290
+ color: var(--fs-quick-order-drawer-secondary-text-color);
291
+ }
292
+ }
293
+ }
294
+
295
+ [data-fs-quick-order-drawer-cell="price"],
296
+ [data-fs-quick-order-cell="price"] {
297
+ padding-right: 3%;
298
+ }
299
+
300
+ [data-fs-badge] {
301
+ font-size: var(--fs-quick-order-drawer-text-size-small);
302
+ font-weight: var(--fs-quick-order-drawer-text-weight-medium);
303
+ text-transform: none;
304
+ }
305
+
306
+ [data-quantity-selector-input] {
307
+ padding: 0 0.5rem 0 0;
308
+ border-radius: var(--fs-quick-order-drawer-border-radius-pill);
309
+ }
310
+
311
+ [data-quantity-selector-button]:disabled {
312
+ svg {
313
+ color: var(--fs-quick-order-drawer-secondary-text-color);
314
+ }
315
+ }
316
+
317
+ [data-quantity-selector-input]:disabled {
318
+ color: var(--fs-quick-order-drawer-secondary-text-color);
319
+ background-color: transparent;
320
+ }
321
+
322
+ [data-fs-quick-order-drawer-table-price="available"],
323
+ [data-fs-quick-order-table-price="available"] {
324
+ color: var(--fs-quick-order-drawer-primary-text-color);
325
+ }
326
+
327
+ [data-fs-quick-order-drawer-table-price="outOfStock"],
328
+ [data-fs-quick-order-table-price="outOfStock"] {
329
+ color: var(--fs-quick-order-drawer-secondary-text-color);
330
+ }
331
+
332
+ [data-fs-quick-order-drawer-delete-cell],
333
+ [data-fs-quick-order-delete-cell] {
334
+ [data-fs-button-wrapper] {
335
+ width: 2.5rem;
336
+ height: 2.5rem;
337
+
338
+ [data-fs-icon] {
339
+ width: 1.5rem;
340
+ height: 1.5rem;
341
+ margin: 0;
342
+ }
343
+ }
344
+ }
345
+
346
+ [data-fs-quick-order-empty-state] {
347
+ padding: var(--fs-spacing-7) var(--fs-spacing-4);
348
+ border-bottom: none;
349
+
350
+ [data-fs-quick-order-empty-state-container] {
351
+ display: flex;
352
+ flex-direction: column;
353
+ gap: var(--fs-spacing-3);
354
+ align-items: center;
355
+ justify-content: center;
356
+ width: 100%;
357
+ }
358
+
359
+ [data-fs-quick-order-empty-state-icon] {
360
+ color: var(--fs-quick-order-drawer-secondary-text-color);
361
+ }
362
+
363
+ [data-fs-quick-order-empty-state-content] {
364
+ width: 100%;
365
+ text-align: center;
366
+ }
367
+
368
+ [data-fs-quick-order-empty-state-title] {
369
+ margin: 0;
370
+ margin-bottom: var(--fs-spacing-1);
371
+ font-size: var(--fs-quick-order-drawer-text-size-default);
372
+ font-weight: var(--fs-quick-order-drawer-text-weight-semibold);
373
+ color: var(--fs-quick-order-drawer-primary-text-color);
374
+ }
375
+
376
+ [data-fs-quick-order-empty-state-message] {
377
+ margin: 0;
378
+ font-size: var(--fs-quick-order-drawer-text-size-body);
379
+ color: var(--fs-quick-order-drawer-secondary-text-color);
380
+ }
381
+ }
382
+
383
+ [data-fs-table-row]:has([data-fs-quick-order-empty-state]) {
384
+ border-bottom: none;
385
+ }
386
+ }
387
+ }
388
+
389
+ [data-fs-quick-order-drawer-footer] {
390
+ display: flex;
391
+ flex-shrink: 0;
392
+ justify-content: space-between;
393
+ padding: var(--fs-spacing-5) var(--fs-quick-order-drawer-padding);
394
+ background-color: var(--fs-quick-order-drawer-bkg-color);
395
+ border-top:
396
+ var(--fs-quick-order-drawer-border-width) solid
397
+ var(--fs-quick-order-drawer-border-color);
398
+
399
+ [data-fs-quick-order-drawer-footer-items] {
400
+ display: flex;
401
+ gap: var(--fs-spacing-2);
402
+ align-items: center;
403
+ font-size: var(--fs-quick-order-drawer-text-size-default);
404
+ font-weight: var(--fs-quick-order-drawer-text-weight-medium);
405
+
406
+ [data-fs-icon] {
407
+ display: flex;
408
+ align-items: center;
409
+ justify-content: center;
410
+ width: var(--fs-quick-order-drawer-footer-icon-size);
411
+ height: var(--fs-quick-order-drawer-footer-icon-size);
412
+ padding: var(--fs-spacing-2);
413
+ color: var(--fs-quick-order-drawer-footer-icon-color);
414
+ background-color: var(--fs-quick-order-drawer-footer-icon-bkg);
415
+ border-radius: var(--fs-quick-order-drawer-border-radius);
416
+ }
417
+ }
418
+
419
+ [data-fs-quick-order-drawer-footer-actions] {
420
+ display: flex;
421
+ gap: var(--fs-spacing-4);
422
+ align-items: center;
423
+
424
+ [data-fs-price] {
425
+ font-size: var(--fs-quick-order-drawer-text-size-default);
426
+ font-weight: var(--fs-quick-order-drawer-text-weight-medium);
427
+ }
428
+
429
+ [data-fs-button-wrapper] {
430
+ height: var(--fs-quick-order-drawer-footer-btn-height);
431
+ padding: 0 var(--fs-spacing-7);
432
+ font-size: var(--fs-quick-order-drawer-text-size-body);
433
+ color: var(--fs-quick-order-drawer-footer-btn-color);
434
+ background-color: var(--fs-quick-order-drawer-footer-btn-bkg);
435
+ border-radius: var(--fs-quick-order-drawer-border-radius-pill);
436
+ }
437
+ }
438
+ }
439
+ }
package/src/index.ts CHANGED
@@ -5,4 +5,4 @@ export type { IncentiveProps } from './components/atoms/Incentive'
5
5
 
6
6
  // Organisms
7
7
  export { Tile, Tiles } from './components/organisms/Tiles'
8
- export type { TilesProps, TileProps } from './components/organisms/Tiles'
8
+ export type { TileProps, TilesProps } from './components/organisms/Tiles'
package/src/styles/components.scss CHANGED
@@ -29,6 +29,8 @@
29
29
  @import "../components/molecules/CheckboxField/styles";
30
30
  @import "../components/molecules/DiscountBadge/styles";
31
31
  @import "../components/molecules/Dropdown/styles";
32
+ @import "../components/molecules/FileUploadCard/styles";
33
+ @import "../components/molecules/FileUploadStatus/styles";
32
34
  @import "../components/molecules/Gift/styles";
33
35
  @import "../components/molecules/InputField/styles";
34
36
  @import "../components/molecules/TextareaField/styles";
@@ -62,6 +64,7 @@
62
64
  @import "../components/molecules/Toggle/styles";
63
65
  @import "../components/molecules/ToggleField/styles";
64
66
  @import "../components/molecules/Tooltip/styles";
67
+ @import "../components/molecules/Dropzone/styles";
65
68
 
66
69
  // Organisms
67
70
  @import "../components/organisms/BannerText/styles";
@@ -87,6 +90,7 @@
87
90
  @import "../components/organisms/ProductGallery/styles";
88
91
  @import "../components/organisms/ProductGrid/styles";
89
92
  @import "../components/organisms/ProductShelf/styles";
93
+ @import "../components/organisms/QuickOrderDrawer/styles";
90
94
  @import "../components/organisms/RegionModal/styles";
91
95
  @import "../components/organisms/RegionPopover/styles";
92
96
  @import "../components/organisms/SearchInput/styles";