@salesforce/retail-react-app 5.0.0 → 5.1.0-nightly-20241031080158

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 (5) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/app/components/links-list/index.jsx +21 -23
  3. package/app/components/links-list/index.test.js +5 -4
  4. package/app/theme/components/project/links-list.js +5 -0
  5. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,3 +1,8 @@
1
+ ## v5.1.0 (TBD)
2
+
3
+ ### Accessibility Improvements
4
+ - [a11y] Fix LinkList component to follow a11y practise [#2098])(https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2098)
5
+
1
6
  ## v5.0.0 (Oct 28, 2024)
2
7
 
3
8
  ### New Features
package/app/components/links-list/index.jsx CHANGED
@@ -11,7 +11,6 @@ import {
11
11
  List,
12
12
  ListItem,
13
13
  Heading,
14
- HStack,
15
14
  useMultiStyleConfig
16
15
  } from '@salesforce/retail-react-app/app/components/shared/ui'
17
16
  import Link from '@salesforce/retail-react-app/app/components/link'
@@ -44,24 +43,24 @@ const LinksList = ({
44
43
  <Heading {...styles.heading}>{heading}</Heading>
45
44
  ))}
46
45
 
47
- {links && (
48
- <List spacing={5} {...styles.list}>
49
- {variant === 'horizontal' ? (
50
- <HStack>
51
- {links.map((link, i) => (
52
- <ListItem key={i} {...styles.listItem} sx={styles.listItemSx}>
53
- <Link
54
- to={link.href}
55
- onClick={onLinkClick}
56
- {...(link.styles ? link.styles : {})}
57
- >
58
- {link.text}
59
- </Link>
60
- </ListItem>
61
- ))}
62
- </HStack>
63
- ) : (
64
- links.map((link, i) => (
46
+ {links &&
47
+ (variant === 'horizontal' ? (
48
+ <List {...styles.list} data-testid="horizontal-list">
49
+ {links.map((link, i) => (
50
+ <ListItem key={i} {...styles.listItem} sx={styles.listItemSx}>
51
+ <Link
52
+ to={link.href}
53
+ onClick={onLinkClick}
54
+ {...(link.styles ? link.styles : {})}
55
+ >
56
+ {link.text}
57
+ </Link>
58
+ </ListItem>
59
+ ))}
60
+ </List>
61
+ ) : (
62
+ <List spacing={5} {...styles.list}>
63
+ {links.map((link, i) => (
65
64
  <ListItem key={i}>
66
65
  <Link
67
66
  to={link.href}
@@ -71,10 +70,9 @@ const LinksList = ({
71
70
  {link.text}
72
71
  </Link>
73
72
  </ListItem>
74
- ))
75
- )}
76
- </List>
77
- )}
73
+ ))}
74
+ </List>
75
+ ))}
78
76
  </Box>
79
77
  )
80
78
  }
package/app/components/links-list/index.test.js CHANGED
@@ -21,7 +21,7 @@ const links = [
21
21
  text: 'Privacy Policy'
22
22
  }
23
23
  ]
24
- const horizontalVariantSelector = 'ul > .chakra-stack > li'
24
+ const horizontalVariantSelector = 'ul > li'
25
25
 
26
26
  const FooterStylesProvider = ({children}) => {
27
27
  const styles = useMultiStyleConfig('Footer')
@@ -41,7 +41,7 @@ test('renders LinksList with default arguments', () => {
41
41
  expect(screen.getAllByRole('listitem')).toHaveLength(1)
42
42
  expect(screen.getByRole('link', {name: links[0].text})).toBeInTheDocument()
43
43
  expect(screen.queryByRole('heading')).toBeNull()
44
- expect(document.querySelector(horizontalVariantSelector)).toBeNull()
44
+ expect(screen.queryByTestId('horizontal-list')).toBeNull()
45
45
  })
46
46
 
47
47
  test('renders LinksList with heading', () => {
@@ -55,11 +55,12 @@ test('renders LinksList with heading', () => {
55
55
  })
56
56
 
57
57
  test('renders LinksList with horizontal variant', () => {
58
- renderWithProviders(
58
+ const {container} = renderWithProviders(
59
59
  <FooterStylesProvider>
60
60
  <LinksList links={links} variant="horizontal" />
61
61
  </FooterStylesProvider>
62
62
  )
63
+ screen.logTestingPlaygroundURL()
63
64
 
64
- expect(document.querySelector(horizontalVariantSelector)).toBeInTheDocument()
65
+ expect(container.querySelector(horizontalVariantSelector)).toBeInTheDocument()
65
66
  })
package/app/theme/components/project/links-list.js CHANGED
@@ -25,6 +25,11 @@ export default {
25
25
  variants: {
26
26
  vertical: {},
27
27
  horizontal: {
28
+ list: {
29
+ display: 'flex',
30
+ flexDirection: 'row',
31
+ gap: '0.5rem'
32
+ },
28
33
  listItem: {
29
34
  borderLeft: '1px solid',
30
35
  paddingLeft: 2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforce/retail-react-app",
3
- "version": "5.0.0",
3
+ "version": "5.1.0-nightly-20241031080158",
4
4
  "license": "See license in LICENSE",
5
5
  "author": "cc-pwa-kit@salesforce.com",
6
6
  "ccExtensibility": {
@@ -45,10 +45,10 @@
45
45
  "@lhci/cli": "^0.11.0",
46
46
  "@loadable/component": "^5.15.3",
47
47
  "@peculiar/webcrypto": "^1.4.2",
48
- "@salesforce/commerce-sdk-react": "3.1.0",
49
- "@salesforce/pwa-kit-dev": "3.8.0",
50
- "@salesforce/pwa-kit-react-sdk": "3.8.0",
51
- "@salesforce/pwa-kit-runtime": "3.8.0",
48
+ "@salesforce/commerce-sdk-react": "3.2.0-nightly-20241031080158",
49
+ "@salesforce/pwa-kit-dev": "3.9.0-nightly-20241031080158",
50
+ "@salesforce/pwa-kit-react-sdk": "3.9.0-nightly-20241031080158",
51
+ "@salesforce/pwa-kit-runtime": "3.9.0-nightly-20241031080158",
52
52
  "@tanstack/react-query": "^4.28.0",
53
53
  "@tanstack/react-query-devtools": "^4.29.1",
54
54
  "@testing-library/dom": "^9.0.1",
@@ -99,5 +99,5 @@
99
99
  "maxSize": "321 kB"
100
100
  }
101
101
  ],
102
- "gitHead": "d6ed7107a4087093442b125f8cc212302046ab7e"
102
+ "gitHead": "81d6b66cb7a65a3eca63bfe3d6a60695750f2e42"
103
103
  }