@faststore/core 0.3.15 → 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.
- package/CHANGELOG.md +7 -0
- package/package.json +2 -2
- package/src/components/sections/ProducDetailsContent/ProductDetailsContent.tsx +15 -17
- package/src/components/ui/ShippingSimulation/ShippingSimulation.stories.mdx +0 -27
- package/src/components/ui/ShippingSimulation/ShippingSimulation.tsx +6 -13
- package/src/components/ui/ShippingSimulation/shipping-simulation.module.scss +0 -39
- package/src/components/sections/ProducDetailsContent/product-details-content.module.scss +0 -41
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
|
|
|
5
5
|
The format is based on [Conventional Changelog](https://github.com/conventional-changelog/conventional-changelog),
|
|
6
6
|
and this project adheres to [Calendar Versioning](https://calver.org/).
|
|
7
7
|
|
|
8
|
+
### [0.3.16](https://github.com/vtex-sites/nextjs.store/compare/0.3.15...0.3.16) (2023-01-09)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Chores
|
|
12
|
+
|
|
13
|
+
* Replace `Table` using FSUI ([#341](https://github.com/vtex-sites/nextjs.store/issues/341)) ([cccf3d5](https://github.com/vtex-sites/nextjs.store/commit/cccf3d5cb1fccc1440b2b019ebc06ddc474fb25f))
|
|
14
|
+
|
|
8
15
|
### 0.3.15 (2023-01-03)
|
|
9
16
|
|
|
10
17
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@faststore/core",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.16",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"browserslist": "supports es6-module and not dead",
|
|
6
6
|
"scripts": {
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"@faststore/components": "2.0.30-alpha.0",
|
|
35
35
|
"@faststore/graphql-utils": "^2.0.3-alpha.0",
|
|
36
36
|
"@faststore/sdk": "^2.0.3-alpha.0",
|
|
37
|
-
"@faststore/ui": "2.0.
|
|
37
|
+
"@faststore/ui": "2.0.37-alpha.0",
|
|
38
38
|
"@types/react": "^18.0.14",
|
|
39
39
|
"@vtex/client-cms": "^0.2.12",
|
|
40
40
|
"autoprefixer": "^10.4.0",
|
|
@@ -11,7 +11,6 @@ import {
|
|
|
11
11
|
import Accordion, { AccordionItem } from 'src/components/ui/Accordion'
|
|
12
12
|
import Icon from 'src/components/ui/Icon'
|
|
13
13
|
|
|
14
|
-
import styles from './product-details-content.module.scss'
|
|
15
14
|
import Section from '../Section'
|
|
16
15
|
|
|
17
16
|
interface ArticleLabels {
|
|
@@ -100,10 +99,7 @@ function ProductDetailsContent({
|
|
|
100
99
|
const labels = { ...DEFAULT_LABELS, ...propLabels }
|
|
101
100
|
|
|
102
101
|
return (
|
|
103
|
-
<Section
|
|
104
|
-
className={styles.fsProductDetailsContent}
|
|
105
|
-
data-fs-product-details-content
|
|
106
|
-
>
|
|
102
|
+
<Section data-fs-product-details-content>
|
|
107
103
|
<Accordion
|
|
108
104
|
expandedIndices={indices}
|
|
109
105
|
onChange={onChange}
|
|
@@ -141,47 +137,49 @@ function ProductDetailsContent({
|
|
|
141
137
|
>
|
|
142
138
|
<UITableBody>
|
|
143
139
|
<UITableRow>
|
|
144
|
-
<UITableCell variant="header">
|
|
140
|
+
<UITableCell variant="header" align="left">
|
|
145
141
|
<UIIcon
|
|
146
142
|
data-fs-accordion-item-button-icon
|
|
147
143
|
component={<Icon name="Ruler" width={18} height={18} />}
|
|
148
144
|
/>
|
|
149
145
|
<span>Width</span>
|
|
150
146
|
</UITableCell>
|
|
151
|
-
<UITableCell>1.50m</UITableCell>
|
|
147
|
+
<UITableCell align="right">1.50m</UITableCell>
|
|
152
148
|
</UITableRow>
|
|
153
149
|
<UITableRow>
|
|
154
|
-
<UITableCell variant="header">
|
|
150
|
+
<UITableCell variant="header" align="left">
|
|
155
151
|
<UIIcon
|
|
156
152
|
data-fs-accordion-item-button-icon
|
|
157
153
|
component={<Icon name="Ruler" width={18} height={18} />}
|
|
158
154
|
/>
|
|
159
155
|
Height
|
|
160
156
|
</UITableCell>
|
|
161
|
-
<UITableCell>1.50m</UITableCell>
|
|
157
|
+
<UITableCell align="right">1.50m</UITableCell>
|
|
162
158
|
</UITableRow>
|
|
163
159
|
<UITableRow>
|
|
164
|
-
<UITableCell variant="header">
|
|
160
|
+
<UITableCell variant="header" align="left">
|
|
165
161
|
<UIIcon
|
|
166
162
|
data-fs-accordion-item-button-icon
|
|
167
163
|
component={<Icon name="Ruler" width={18} height={18} />}
|
|
168
164
|
/>
|
|
169
165
|
Dimensions
|
|
170
166
|
</UITableCell>
|
|
171
|
-
<UITableCell
|
|
167
|
+
<UITableCell align="right">
|
|
168
|
+
7.27 x 3.03 x 9.94 inches
|
|
169
|
+
</UITableCell>
|
|
172
170
|
</UITableRow>
|
|
173
171
|
<UITableRow>
|
|
174
|
-
<UITableCell variant="header">
|
|
172
|
+
<UITableCell variant="header" align="left">
|
|
175
173
|
<UIIcon
|
|
176
174
|
data-fs-accordion-item-button-icon
|
|
177
175
|
component={<Icon name="Bag" width={18} height={18} />}
|
|
178
176
|
/>
|
|
179
177
|
Weight
|
|
180
178
|
</UITableCell>
|
|
181
|
-
<UITableCell>12oz</UITableCell>
|
|
179
|
+
<UITableCell align="right">12oz</UITableCell>
|
|
182
180
|
</UITableRow>
|
|
183
181
|
<UITableRow>
|
|
184
|
-
<UITableCell variant="header">
|
|
182
|
+
<UITableCell variant="header" align="left">
|
|
185
183
|
<UIIcon
|
|
186
184
|
data-fs-accordion-item-button-icon
|
|
187
185
|
component={
|
|
@@ -190,10 +188,10 @@ function ProductDetailsContent({
|
|
|
190
188
|
/>
|
|
191
189
|
Days to ship
|
|
192
190
|
</UITableCell>
|
|
193
|
-
<UITableCell>11 Days</UITableCell>
|
|
191
|
+
<UITableCell align="right">11 Days</UITableCell>
|
|
194
192
|
</UITableRow>
|
|
195
193
|
<UITableRow>
|
|
196
|
-
<UITableCell variant="header">
|
|
194
|
+
<UITableCell variant="header" align="left">
|
|
197
195
|
<UIIcon
|
|
198
196
|
data-fs-accordion-item-button-icon
|
|
199
197
|
component={
|
|
@@ -202,7 +200,7 @@ function ProductDetailsContent({
|
|
|
202
200
|
/>
|
|
203
201
|
Estimated
|
|
204
202
|
</UITableCell>
|
|
205
|
-
<UITableCell>Nov 10th</UITableCell>
|
|
203
|
+
<UITableCell align="right">Nov 10th</UITableCell>
|
|
206
204
|
</UITableRow>
|
|
207
205
|
</UITableBody>
|
|
208
206
|
</UITable>
|
|
@@ -111,30 +111,3 @@ The `ShippingSimulation` component uses [FastStore UI Table](https://www.faststo
|
|
|
111
111
|
value="var(--fs-spacing-2)"
|
|
112
112
|
/>
|
|
113
113
|
</TokenTable>
|
|
114
|
-
|
|
115
|
-
### Table
|
|
116
|
-
|
|
117
|
-
<TokenTable>
|
|
118
|
-
<TokenRow
|
|
119
|
-
token="--fs-shipping-simulation-table-row-bkg-color"
|
|
120
|
-
value="var(--fs-color-main-0)"
|
|
121
|
-
isColor
|
|
122
|
-
/>
|
|
123
|
-
<TokenRow
|
|
124
|
-
token="--fs-shipping-simulation-table-row-even-bkg-color"
|
|
125
|
-
value="transparent"
|
|
126
|
-
/>
|
|
127
|
-
<TokenDivider />
|
|
128
|
-
<TokenRow
|
|
129
|
-
token="--fs-shipping-simulation-table-cell-padding"
|
|
130
|
-
value="var(--fs-spacing-2)"
|
|
131
|
-
/>
|
|
132
|
-
<TokenRow
|
|
133
|
-
token="--fs-shipping-simulation-table-cell-text-size"
|
|
134
|
-
value="var(--fs-text-size-2)"
|
|
135
|
-
/>
|
|
136
|
-
<TokenRow
|
|
137
|
-
token="--fs-shipping-simulation-table-cell-border-radius"
|
|
138
|
-
value="var(--fs-border-radius)"
|
|
139
|
-
/>
|
|
140
|
-
</TokenTable>
|
|
@@ -73,7 +73,7 @@ function ShippingSimulation({
|
|
|
73
73
|
displayClearButton={displayClearButton}
|
|
74
74
|
/>
|
|
75
75
|
|
|
76
|
-
<Link href="/" data-fs-shipping-simulation-link>
|
|
76
|
+
<Link href="/" data-fs-shipping-simulation-link size="small">
|
|
77
77
|
{"I don't know my Postal Code"}
|
|
78
78
|
<Icon name="ArrowSquareOut" width={18} height={18} />
|
|
79
79
|
</Link>
|
|
@@ -87,20 +87,13 @@ function ShippingSimulation({
|
|
|
87
87
|
</p>
|
|
88
88
|
</header>
|
|
89
89
|
|
|
90
|
-
<Table
|
|
90
|
+
<Table>
|
|
91
91
|
<TableBody>
|
|
92
92
|
{shippingOptions.map((option) => (
|
|
93
|
-
<TableRow
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
<TableCell data-fs-shipping-simulation-table-cell>
|
|
98
|
-
{option.carrier}
|
|
99
|
-
</TableCell>
|
|
100
|
-
<TableCell data-fs-shipping-simulation-table-cell>
|
|
101
|
-
{option.localizedEstimates}
|
|
102
|
-
</TableCell>
|
|
103
|
-
<TableCell data-fs-shipping-simulation-table-cell>
|
|
93
|
+
<TableRow key={option.carrier}>
|
|
94
|
+
<TableCell align="left">{option.carrier}</TableCell>
|
|
95
|
+
<TableCell>{option.localizedEstimates}</TableCell>
|
|
96
|
+
<TableCell align="right">
|
|
104
97
|
{option.price && (
|
|
105
98
|
<Price
|
|
106
99
|
formatter={formatter}
|
|
@@ -23,20 +23,10 @@
|
|
|
23
23
|
// Location
|
|
24
24
|
--fs-shipping-simulation-location-padding-bottom : var(--fs-spacing-2);
|
|
25
25
|
|
|
26
|
-
// Table
|
|
27
|
-
--fs-shipping-simulation-table-row-bkg-color : var(--fs-color-main-0);
|
|
28
|
-
--fs-shipping-simulation-table-row-even-bkg-color : transparent;
|
|
29
|
-
|
|
30
|
-
--fs-shipping-simulation-table-cell-padding : var(--fs-spacing-2);
|
|
31
|
-
--fs-shipping-simulation-table-cell-text-size : var(--fs-text-size-2);
|
|
32
|
-
--fs-shipping-simulation-table-cell-border-radius : var(--fs-border-radius);
|
|
33
|
-
|
|
34
26
|
// --------------------------------------------------------
|
|
35
27
|
// Structural Styles
|
|
36
28
|
// --------------------------------------------------------
|
|
37
29
|
|
|
38
|
-
font-size: var(--fs-shipping-simulation-text-size);
|
|
39
|
-
|
|
40
30
|
[data-fs-shipping-simulation-title] {
|
|
41
31
|
padding-bottom: var(--fs-shipping-simulation-title-padding-bottom);
|
|
42
32
|
}
|
|
@@ -64,33 +54,4 @@
|
|
|
64
54
|
[data-fs-shipping-simulation-location] {
|
|
65
55
|
padding-bottom: var(--fs-shipping-simulation-location-padding-bottom);
|
|
66
56
|
}
|
|
67
|
-
|
|
68
|
-
[data-fs-shipping-simulation-table] {
|
|
69
|
-
width: 100%;
|
|
70
|
-
border-collapse: collapse;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
[data-fs-shipping-simulation-table-row] {
|
|
74
|
-
background-color: var(--fs-shipping-simulation-table-row-bkg-color);
|
|
75
|
-
|
|
76
|
-
&:nth-child(even) {
|
|
77
|
-
background-color: var(--fs-shipping-simulation-table-row-even-bkg-color);
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
[data-fs-shipping-simulation-table-cell] {
|
|
82
|
-
padding: var(--fs-shipping-simulation-table-cell-padding);
|
|
83
|
-
font-size: var(--fs-shipping-simulation-table-cell-text-size);
|
|
84
|
-
|
|
85
|
-
&:first-child {
|
|
86
|
-
border-top-left-radius: var(--fs-shipping-simulation-table-cell-border-radius);
|
|
87
|
-
border-bottom-left-radius: var(--fs-shipping-simulation-table-cell-border-radius);
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
&:last-child {
|
|
91
|
-
text-align: right;
|
|
92
|
-
border-top-right-radius: var(--fs-shipping-simulation-table-cell-border-radius);
|
|
93
|
-
border-bottom-right-radius: var(--fs-shipping-simulation-table-cell-border-radius);
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
57
|
}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
.fs-product-details-content {
|
|
2
|
-
// -----------------------------
|
|
3
|
-
// Table
|
|
4
|
-
// -----------------------------
|
|
5
|
-
|
|
6
|
-
[data-fs-product-details-about] [data-fs-table] {
|
|
7
|
-
width: 100%;
|
|
8
|
-
|
|
9
|
-
[data-fs-accordion-item-button-icon] {
|
|
10
|
-
height: 18px;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
[data-fs-icon] {
|
|
14
|
-
margin-right: var(--fs-spacing-2);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
tr:nth-child(even) td {
|
|
18
|
-
background-color: var(--fs-color-neutral-1);
|
|
19
|
-
border-top-right-radius: var(--fs-border-radius);
|
|
20
|
-
border-bottom-right-radius: var(--fs-border-radius);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
tr:nth-child(even) th {
|
|
24
|
-
background-color: var(--fs-color-neutral-1);
|
|
25
|
-
border-top-left-radius: var(--fs-border-radius);
|
|
26
|
-
border-bottom-left-radius: var(--fs-border-radius);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
td {
|
|
30
|
-
padding: var(--fs-spacing-2) var(--fs-spacing-3) var(--fs-spacing-2) 0;
|
|
31
|
-
text-align: right;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
th {
|
|
35
|
-
display: flex;
|
|
36
|
-
padding: var(--fs-spacing-2) 0 var(--fs-spacing-2) var(--fs-spacing-3);
|
|
37
|
-
font-weight: normal;
|
|
38
|
-
text-align: left;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
}
|