@faststore/core 2.0.175-alpha.0 → 2.0.178-alpha.0

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 (9) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/CHANGELOG.md +12 -0
  3. package/cypress/integration/a11y.test.js +3 -3
  4. package/package.json +3 -3
  5. package/src/components/sections/Navbar/Navbar.tsx +1 -1
  6. package/src/components/sections/Newsletter/Newsletter.tsx +2 -6
  7. package/src/components/sections/ProductDetails/ProductDetails.tsx +8 -6
  8. package/src/components/ui/Link/Link.tsx +2 -2
  9. package/src/components/ui/ProductDescription/ProductDescription.tsx +37 -228
package/.turbo/turbo-build.log CHANGED
@@ -26,7 +26,7 @@ Route (pages) Size First Load JS
26
26
  ├ /_app 0 B 77.8 kB
27
27
  ├ ● /[...slug] 10.4 kB 134 kB
28
28
  ├ └ css/6e41f1b6078c14c1.css 7.9 kB
29
- ├ ● /[slug]/p 11.9 kB 135 kB
29
+ ├ ● /[slug]/p 10.8 kB 134 kB
30
30
  ├ └ css/8988ac07eb0af0ca.css 11 kB
31
31
  ├ ○ /404 1.09 kB 113 kB
32
32
  ├ ● /500 1.11 kB 113 kB
package/CHANGELOG.md CHANGED
@@ -3,6 +3,18 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [2.0.178-alpha.0](https://github.com/vtex/faststore/compare/v2.0.177-alpha.0...v2.0.178-alpha.0) (2023-06-02)
7
+
8
+ ### Bug Fixes
9
+
10
+ - A11y tests ([#1817](https://github.com/vtex/faststore/issues/1817)) ([904e830](https://github.com/vtex/faststore/commit/904e830ff3ae47f3d7308fa8b1b9a28949561ed9))
11
+
12
+ ## [2.0.176-alpha.0](https://github.com/vtex/faststore/compare/v2.0.175-alpha.0...v2.0.176-alpha.0) (2023-06-02)
13
+
14
+ ### Bug Fixes
15
+
16
+ - Product description mock data ([#1815](https://github.com/vtex/faststore/issues/1815)) ([98bfde8](https://github.com/vtex/faststore/commit/98bfde887b3721de9a75ebc6325aa7b0842707c5))
17
+
6
18
  ## [2.0.175-alpha.0](https://github.com/vtex/faststore/compare/v2.0.174-alpha.0...v2.0.175-alpha.0) (2023-06-02)
7
19
 
8
20
  ### Features
package/cypress/integration/a11y.test.js CHANGED
@@ -13,7 +13,7 @@ describe('Accessibility tests', () => {
13
13
  cy.clearIDB()
14
14
  })
15
15
 
16
- it.skip('checks a11y for collection page', () => {
16
+ it('checks a11y for collection page', () => {
17
17
  cy.visit(pages.collection)
18
18
  cy.waitForHydration()
19
19
 
@@ -30,7 +30,7 @@ describe('Accessibility tests', () => {
30
30
  })
31
31
  })
32
32
 
33
- it.skip('checks a11y for product page', () => {
33
+ it('checks a11y for product page', () => {
34
34
  cy.visit(pages.pdp)
35
35
  cy.waitForHydration()
36
36
 
@@ -47,7 +47,7 @@ describe('Accessibility tests', () => {
47
47
  })
48
48
  })
49
49
 
50
- it.skip('checks a11y for home page', () => {
50
+ it('checks a11y for home page', () => {
51
51
  cy.visit(pages.home)
52
52
  cy.waitForHydration()
53
53
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@faststore/core",
3
- "version": "2.0.175-alpha.0",
3
+ "version": "2.0.178-alpha.0",
4
4
  "license": "MIT",
5
5
  "browserslist": "supports es6-module and not dead",
6
6
  "scripts": {
@@ -30,7 +30,7 @@
30
30
  "@envelop/parser-cache": "^2.2.0",
31
31
  "@envelop/validation-cache": "^2.2.0",
32
32
  "@faststore/api": "^2.0.173-alpha.0",
33
- "@faststore/components": "^2.0.175-alpha.0",
33
+ "@faststore/components": "^2.0.176-alpha.0",
34
34
  "@faststore/graphql-utils": "^2.0.3-alpha.0",
35
35
  "@faststore/sdk": "^2.0.173-alpha.0",
36
36
  "@faststore/ui": "^2.0.175-alpha.0",
@@ -108,5 +108,5 @@
108
108
  "msw": {
109
109
  "workerDirectory": "public"
110
110
  },
111
- "gitHead": "49cd929bd62bf068a51337335d97142703f1c813"
111
+ "gitHead": "e90c2da1d8f151858fbed7b0776979ce48c3a5ea"
112
112
  }
package/src/components/sections/Navbar/Navbar.tsx CHANGED
@@ -68,7 +68,7 @@ function NavbarSection({
68
68
  },
69
69
  }: NavbarProps) {
70
70
  return (
71
- <Section as="header" className={`${styles.section} section-navbar`}>
71
+ <Section className={`${styles.section} section-navbar`}>
72
72
  <Navbar
73
73
  home={home}
74
74
  menu={menu}
package/src/components/sections/Newsletter/Newsletter.tsx CHANGED
@@ -30,10 +30,7 @@ export interface NewsletterProps
30
30
  }
31
31
 
32
32
  const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
33
- function Newsletter(
34
- { title, description, card = false, lite = false, ...otherProps },
35
- ref
36
- ) {
33
+ function Newsletter({ title, description, card = false, lite = false }, ref) {
37
34
  const { subscribeUser, loading, data } = useNewsletter()
38
35
  const nameInputRef = useRef<HTMLInputElement>(null)
39
36
  const emailInputRef = useRef<HTMLInputElement>(null)
@@ -74,10 +71,9 @@ const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
74
71
  <Section className={`${styles.section} section-newsletter`}>
75
72
  <div data-fs-newsletter={card ? 'card' : ''}>
76
73
  <form
77
- data-fs-newsletter-form
78
74
  ref={ref}
75
+ data-fs-newsletter-form
79
76
  onSubmit={handleSubmit}
80
- {...otherProps}
81
77
  className="layout__content"
82
78
  >
83
79
  <header data-fs-newsletter-header>
package/src/components/sections/ProductDetails/ProductDetails.tsx CHANGED
@@ -98,6 +98,7 @@ function ProductDetails({
98
98
  name: variantName,
99
99
  brand,
100
100
  isVariantOf,
101
+ description,
101
102
  isVariantOf: { name, productGroupID: productId },
102
103
  image: productImages,
103
104
  offers: {
@@ -196,11 +197,10 @@ function ProductDetails({
196
197
  formatter={useFormattedPrice}
197
198
  title={shippingSimulatorTitle}
198
199
  inputLabel={shippingSimulatorInputLabel}
199
- idkPostalCodeLinkProps={
200
- <UILink href={shippingSimulatorLinkUrl}>
201
- {shippingSimulatorLinkText}
202
- </UILink>
203
- }
200
+ idkPostalCodeLinkProps={{
201
+ href: shippingSimulatorLinkUrl,
202
+ children: shippingSimulatorLinkText,
203
+ }}
204
204
  optionsLabel={shippingSimulatorOptionsTableTitle}
205
205
  />
206
206
  )}
@@ -208,8 +208,10 @@ function ProductDetails({
208
208
 
209
209
  {shouldDisplayProductDescription && (
210
210
  <ProductDescription
211
- labels={{ description: productDescriptionDetailsTitle }}
212
211
  initiallyExpanded={productDescriptionInitiallyExpanded}
212
+ descriptionData={[
213
+ { title: productDescriptionDetailsTitle, content: description },
214
+ ]}
213
215
  />
214
216
  )}
215
217
  </section>
package/src/components/ui/Link/Link.tsx CHANGED
@@ -13,7 +13,7 @@ const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link<
13
13
  T extends LinkElementType = 'a'
14
14
  >(
15
15
  { href, inverse, children, variant = 'default', ...otherProps }: LinkProps<T>,
16
- ref: Ref<HTMLAnchorElement> | undefined
16
+ ref: Ref<HTMLAnchorElement>
17
17
  ) {
18
18
  const isInternalLink = useMemo(
19
19
  () => href[0] === '/' && href[1] !== '/',
@@ -32,7 +32,7 @@ const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link<
32
32
  legacyBehavior={false}
33
33
  {...otherProps}
34
34
  >
35
- <>{children}</>
35
+ {children}
36
36
  </UILink>
37
37
  )
38
38
  }
package/src/components/ui/ProductDescription/ProductDescription.tsx CHANGED
@@ -1,45 +1,18 @@
1
+ import { useState, useMemo } from 'react'
2
+
1
3
  import {
2
4
  Accordion as UIAccordion,
3
- AccordionButton as UIAccordionButton,
4
5
  AccordionItem as UIAccordionItem,
5
6
  AccordionPanel as UIAccordionPanel,
6
- Icon as UIIcon,
7
- List as UIList,
8
- Table as UITable,
9
- TableBody as UITableBody,
10
- TableCell as UITableCell,
11
- TableRow as UITableRow,
7
+ AccordionButton as UIAccordionButton,
12
8
  } from '@faststore/ui'
13
- import { useState } from 'react'
14
9
 
15
- interface ArticleLabels {
16
- /**
17
- * Label for the "description" article.
18
- *
19
- * @default 'Description'
20
- */
21
- description: string
22
- /**
23
- * Label for the "About this product" article.
24
- *
25
- * @default 'About this product'
26
- */
27
- about: string
28
- /**
29
- * Label for the "Product highlights" article.
30
- *
31
- * @default 'Product highlights'
32
- */
33
- highlights: string
34
- /**
35
- * Label for the "Learn more" article.
36
- *
37
- * @default 'Learn more'
38
- */
39
- learnMore: string
10
+ type DescriptionData = {
11
+ title: string
12
+ content: string
40
13
  }
41
14
 
42
- interface Props {
15
+ interface ProductDescriptionProps {
43
16
  /**
44
17
  * Controls which articles will be initially expanded.
45
18
  *
@@ -47,36 +20,28 @@ interface Props {
47
20
  */
48
21
  initiallyExpanded?: 'first' | 'all' | 'none'
49
22
  /**
50
- * Defines the labels used in each article.
23
+ * Product description data.
51
24
  *
52
- * @default {description: 'Description', about: 'About this product', highlights: 'Product highlights', learnMore: 'Learn More' }
53
25
  */
54
- labels?: Partial<ArticleLabels>
26
+ descriptionData: DescriptionData[]
55
27
  }
56
28
 
57
- /**
58
- * Maps 'initiallyExpanded' prop values to indices
59
- */
60
- const INITIALLY_EXPANDED_MAP = {
61
- first: [0],
62
- all: [0, 1, 2, 3],
63
- none: [],
64
- }
65
-
66
- /**
67
- * Default article labels
68
- */
69
- const DEFAULT_LABELS: ArticleLabels = {
70
- description: 'Description',
71
- about: 'About this product',
72
- highlights: 'Product highlights',
73
- learnMore: 'Learn More',
74
- } as const
75
-
76
29
  function ProductDescription({
30
+ descriptionData,
77
31
  initiallyExpanded = 'first',
78
- labels: propLabels = {},
79
- }: Props) {
32
+ }: ProductDescriptionProps) {
33
+ /**
34
+ * Maps 'initiallyExpanded' prop values to indices
35
+ */
36
+ const INITIALLY_EXPANDED_MAP = useMemo(
37
+ () => ({
38
+ none: [],
39
+ first: [0],
40
+ all: [0, 1, 2, 3],
41
+ }),
42
+ []
43
+ )
44
+
80
45
  const [indices, setIndices] = useState(
81
46
  new Set(INITIALLY_EXPANDED_MAP[initiallyExpanded])
82
47
  )
@@ -95,8 +60,6 @@ function ProductDescription({
95
60
  })
96
61
  }
97
62
 
98
- const labels = { ...DEFAULT_LABELS, ...propLabels }
99
-
100
63
  return (
101
64
  <section data-fs-product-description>
102
65
  <UIAccordion
@@ -104,174 +67,20 @@ function ProductDescription({
104
67
  onChange={onChange}
105
68
  aria-label="Product Details Content"
106
69
  >
107
- <UIAccordionItem
108
- as="article"
109
- index={0}
110
- data-fs-product-details-description
111
- prefixId="product-description"
112
- >
113
- <UIAccordionButton>{labels.description}</UIAccordionButton>
114
- <UIAccordionPanel>
115
- <p className="text__body">
116
- Sony WH-1000XM4 Wireless Industry Leading Noise Canceling Overhead
117
- Headphones with Mic for Phone-Call and Alexa Voice Control, Black.
118
- </p>
119
- </UIAccordionPanel>
120
- </UIAccordionItem>
121
- <UIAccordionItem
122
- as="article"
123
- index={1}
124
- data-fs-product-details-about
125
- prefixId="product-description"
126
- >
127
- <UIAccordionButton>{labels.about}</UIAccordionButton>
128
- <UIAccordionPanel>
129
- <UITable
130
- cellPadding={0}
131
- cellSpacing={0}
132
- className="text__title-mini-alt"
133
- >
134
- <UITableBody>
135
- <UITableRow>
136
- <UITableCell variant="header" align="left">
137
- <UIIcon
138
- data-fs-accordion-item-button-icon
139
- name="Ruler"
140
- width={18}
141
- height={18}
142
- />
143
- <span>Width</span>
144
- </UITableCell>
145
- <UITableCell align="right">1.50m</UITableCell>
146
- </UITableRow>
147
- <UITableRow>
148
- <UITableCell variant="header" align="left">
149
- <UIIcon
150
- data-fs-accordion-item-button-icon
151
- name="Ruler"
152
- width={18}
153
- height={18}
154
- />
155
- Height
156
- </UITableCell>
157
- <UITableCell align="right">1.50m</UITableCell>
158
- </UITableRow>
159
- <UITableRow>
160
- <UITableCell variant="header" align="left">
161
- <UIIcon
162
- data-fs-accordion-item-button-icon
163
- name="Ruler"
164
- width={18}
165
- height={18}
166
- />
167
- Dimensions
168
- </UITableCell>
169
- <UITableCell align="right">
170
- 7.27 x 3.03 x 9.94 inches
171
- </UITableCell>
172
- </UITableRow>
173
- <UITableRow>
174
- <UITableCell variant="header" align="left">
175
- <UIIcon
176
- data-fs-accordion-item-button-icon
177
- name="Bag"
178
- width={18}
179
- height={18}
180
- />
181
- Weight
182
- </UITableCell>
183
- <UITableCell align="right">12oz</UITableCell>
184
- </UITableRow>
185
- <UITableRow>
186
- <UITableCell variant="header" align="left">
187
- <UIIcon
188
- data-fs-accordion-item-button-icon
189
- name="RocketLaunch"
190
- width={18}
191
- height={18}
192
- />
193
- Days to ship
194
- </UITableCell>
195
- <UITableCell align="right">11 Days</UITableCell>
196
- </UITableRow>
197
- <UITableRow>
198
- <UITableCell variant="header" align="left">
199
- <UIIcon
200
- data-fs-accordion-item-button-icon
201
- name="CircleWavyCheck"
202
- width={18}
203
- height={18}
204
- />
205
- Estimated
206
- </UITableCell>
207
- <UITableCell align="right">Nov 10th</UITableCell>
208
- </UITableRow>
209
- </UITableBody>
210
- </UITable>
211
- </UIAccordionPanel>
212
- </UIAccordionItem>
213
- <UIAccordionItem
214
- as="article"
215
- className="text__body"
216
- index={2}
217
- data-fs-product-details-highlights
218
- prefixId="product-description"
219
- >
220
- <UIAccordionButton>{labels.highlights}</UIAccordionButton>
221
- <UIAccordionPanel>
222
- <UIList marker>
223
- <li>
224
- Industry-leading noise canceling with Dual Noise Sensor
225
- technology
226
- </li>
227
- <li>
228
- Next-level music with Edge-AI, co-developed with Sony Music
229
- Studios Tokyo
230
- </li>
231
- <li>
232
- Up to 30-hour battery life with quick charging (10 min charge
233
- for 5 hours of playback)
234
- </li>
235
- <li>
236
- Touch Sensor controls to pause play skip tracks, control volume,
237
- activate your voice assistant, and answer phone calls
238
- </li>
239
- <li>
240
- Speak-to-chat technology automatically reduces volume during
241
- conversations
242
- </li>
243
- <li>Superior call quality with precise voice pickup</li>
244
- <li>
245
- Wearing detection pauses playback when headphones are removed
246
- </li>
247
- <li>Seamless multiple-device pairing</li>
248
- <li>
249
- Adaptive Sound Control provides a personalized listening
250
- experience
251
- </li>
252
- <li>Updated design relieves pressure for long-lasting comfort</li>
253
- </UIList>
254
- </UIAccordionPanel>
255
- </UIAccordionItem>
256
- <UIAccordionItem
257
- as="article"
258
- index={3}
259
- data-fs-product-details-learn-more
260
- prefixId="product-description"
261
- >
262
- <UIAccordionButton>{labels.learnMore}</UIAccordionButton>
263
- <UIAccordionPanel>
264
- <p className="text__body">
265
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
266
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
267
- enim ad minim veniam, quis nostrud exercitation ullamco laboris
268
- nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
269
- reprehenderit in voluptate velit esse cillum dolore eu fugiat
270
- nulla pariatur. Excepteur sint occaecat cupidatat non proident,
271
- sunt in culpa qui officia deserunt mollit anim id est laboru.
272
- </p>
273
- </UIAccordionPanel>
274
- </UIAccordionItem>
70
+ {descriptionData.map(({ title, content }, index) => (
71
+ <UIAccordionItem
72
+ as="article"
73
+ index={index}
74
+ key={String(index)}
75
+ prefixId="product-description"
76
+ data-fs-product-details-description
77
+ >
78
+ <UIAccordionButton>{title}</UIAccordionButton>
79
+ <UIAccordionPanel>
80
+ <p className="text__body">{content}</p>
81
+ </UIAccordionPanel>
82
+ </UIAccordionItem>
83
+ ))}
275
84
  </UIAccordion>
276
85
  </section>
277
86
  )