@graphcommerce/next-ui 4.6.0 → 4.7.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 (11) hide show
  1. package/Blog/BlogAuthor/BlogAuthor.tsx +1 -0
  2. package/Button/LinkOrButton.tsx +6 -5
  3. package/CHANGELOG.md +37 -0
  4. package/LayoutOverlay/components/LayoutOverlay.tsx +1 -1
  5. package/Row/ButtonLinkList/ButtonLinkList.tsx +35 -16
  6. package/Row/ButtonLinkList/ButtonLinkListItem.tsx +3 -3
  7. package/Row/ContentLinks/ContentLinks.tsx +1 -1
  8. package/Row/IconBlocks/IconBlock.tsx +1 -0
  9. package/Row/IconBlocks/IconBlocks.tsx +5 -1
  10. package/Theme/themeDefaults.ts +1 -2
  11. package/package.json +11 -11
package/Blog/BlogAuthor/BlogAuthor.tsx CHANGED
@@ -33,6 +33,7 @@ export function BlogAuthor(props: BlogAuthorProps) {
33
33
  >
34
34
  <Chip
35
35
  sx={{
36
+ borderRadius: '99em',
36
37
  height: responsiveVal(44, 66),
37
38
  '& .MuiChip-label': {
38
39
  paddingLeft: responsiveVal(10, 14),
package/Button/LinkOrButton.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import { Link, LinkProps, useForkRef } from '@mui/material'
2
2
  import React, { useRef } from 'react'
3
- import { ConditionalExcept } from 'type-fest'
3
+ import type { ConditionalExcept } from 'type-fest'
4
4
  import { Button, ButtonProps } from './Button'
5
5
 
6
6
  type OmitNever<T extends Record<string, unknown>> = {
@@ -83,10 +83,11 @@ export const LinkOrButton = React.forwardRef<
83
83
  display: { xs: 'inline-flex', [breakpoint]: 'none' },
84
84
  alignItems: 'center',
85
85
  },
86
- !!disabled && ((theme)=>({
87
- opacity: theme.palette.action.disabledOpacity,
88
- pointerEvents: 'none'
89
- })),
86
+ !!disabled &&
87
+ ((theme) => ({
88
+ opacity: theme.palette.action.disabledOpacity,
89
+ pointerEvents: 'none',
90
+ })),
90
91
  ...(Array.isArray(linkSx) ? linkSx : [linkSx]),
91
92
  ]}
92
93
  >
package/CHANGELOG.md CHANGED
@@ -1,5 +1,42 @@
1
1
  # Change Log
2
2
 
3
+ ## 4.7.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1416](https://github.com/graphcommerce-org/graphcommerce/pull/1416) [`f3d06dd83`](https://github.com/graphcommerce-org/graphcommerce/commit/f3d06dd836c9a76412b419d4d2c79bbd0ee92e04) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - SEO audit
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies [[`f3d06dd83`](https://github.com/graphcommerce-org/graphcommerce/commit/f3d06dd836c9a76412b419d4d2c79bbd0ee92e04)]:
12
+ - @graphcommerce/framer-next-pages@3.2.0
13
+ - @graphcommerce/framer-scroller@2.1.8
14
+
15
+ ## 4.6.2
16
+
17
+ ### Patch Changes
18
+
19
+ - [#1426](https://github.com/graphcommerce-org/graphcommerce/pull/1426) [`100f4c38c`](https://github.com/graphcommerce-org/graphcommerce/commit/100f4c38c8fcda4bc6e0425e38028b550b60adc2) Thanks [@paales](https://github.com/paales)! - Upgrade packages
20
+
21
+ - Updated dependencies []:
22
+ - @graphcommerce/framer-scroller@2.1.7
23
+
24
+ ## 4.6.1
25
+
26
+ ### Patch Changes
27
+
28
+ - [#1399](https://github.com/graphcommerce-org/graphcommerce/pull/1399) [`fb277d8e1`](https://github.com/graphcommerce-org/graphcommerce/commit/fb277d8e1e3612c5e9cf890a30d19cfd1ff70542) Thanks [@paales](https://github.com/paales)! - Now using [@graphql-yoga](https://github.com/dotansimha/graphql-yoga) for GraphQL which has full support for [envelop](https://www.envelop.dev/) plugins.
29
+
30
+ * [#1399](https://github.com/graphcommerce-org/graphcommerce/pull/1399) [`fb277d8e1`](https://github.com/graphcommerce-org/graphcommerce/commit/fb277d8e1e3612c5e9cf890a30d19cfd1ff70542) Thanks [@paales](https://github.com/paales)! - Added a new @graphcommerce/cli package to generate the mesh so it can be generated _inside_ the @graphcommerce/graphql-mesh package to allow for better future extensibility.
31
+
32
+ - [#1399](https://github.com/graphcommerce-org/graphcommerce/pull/1399) [`da0ae7d02`](https://github.com/graphcommerce-org/graphcommerce/commit/da0ae7d0236e4908ba0bf0fa16656be516e841d4) Thanks [@paales](https://github.com/paales)! - Updated dependencies
33
+
34
+ - Updated dependencies [[`da0ae7d02`](https://github.com/graphcommerce-org/graphcommerce/commit/da0ae7d0236e4908ba0bf0fa16656be516e841d4)]:
35
+ - @graphcommerce/framer-next-pages@3.1.6
36
+ - @graphcommerce/framer-scroller@2.1.6
37
+ - @graphcommerce/framer-utils@3.1.2
38
+ - @graphcommerce/image@3.1.5
39
+
3
40
  ## 4.6.0
4
41
 
5
42
  ### Minor Changes
package/LayoutOverlay/components/LayoutOverlay.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { ScrollerProvider, ScrollSnapType } from '@graphcommerce/framer-scroller'
2
- import { SetOptional } from 'type-fest'
2
+ import type { SetOptional } from 'type-fest'
3
3
  import { LayoutOverlayBase, LayoutOverlayBaseProps } from './LayoutOverlayBase'
4
4
 
5
5
  export type { LayoutOverlayVariant } from './LayoutOverlayBase'
package/Row/ButtonLinkList/ButtonLinkList.tsx CHANGED
@@ -1,6 +1,5 @@
1
- import { Box, SxProps, Theme } from '@mui/material'
1
+ import { Box, SxProps, Theme, Typography } from '@mui/material'
2
2
  import React from 'react'
3
- import { SectionContainer } from '../../SectionContainer/SectionContainer'
4
3
  import { extendableComponent } from '../../Styles'
5
4
  import { responsiveVal } from '../../Styles/responsiveVal'
6
5
  import { Row } from '../Row'
@@ -8,6 +7,7 @@ import { Row } from '../Row'
8
7
  export type ButtonLinkListProps = {
9
8
  title: string
10
9
  children: React.ReactNode
10
+ component?: React.ElementType
11
11
  sx?: SxProps<Theme>
12
12
  } & OwnerState
13
13
 
@@ -21,7 +21,7 @@ const { withState } = extendableComponent<OwnerState, typeof compName, typeof pa
21
21
  )
22
22
 
23
23
  export function ButtonLinkList(props: ButtonLinkListProps) {
24
- const { title, children, containsBigLinks, sx = [] } = props
24
+ const { title, children, component = 'span', containsBigLinks, sx = [] } = props
25
25
 
26
26
  const classes = withState({ containsBigLinks })
27
27
 
@@ -31,20 +31,39 @@ export function ButtonLinkList(props: ButtonLinkListProps) {
31
31
  className={classes.root}
32
32
  sx={[{ maxWidth: 820 }, ...(Array.isArray(sx) ? sx : [sx])]}
33
33
  >
34
- <SectionContainer labelLeft={title}>
35
- <Box
36
- className={classes.links}
37
- sx={(theme) => ({
38
- display: 'grid',
39
- columnGap: theme.spacings.sm,
40
- '&:not(.containsBigLinks)': {
41
- gridTemplateColumns: `repeat(auto-fill, minmax(${responsiveVal(210, 350)}, 1fr))`,
34
+ <Box
35
+ sx={[
36
+ (theme) => ({
37
+ position: 'relative',
38
+ '&:focus': {
39
+ outline: 'none',
42
40
  },
43
- })}
44
- >
45
- {children}
46
- </Box>
47
- </SectionContainer>
41
+ display: 'flex',
42
+ justifyContent: 'space-between',
43
+ alignItems: 'center',
44
+ marginTop: theme.spacings.sm,
45
+ marginBottom: theme.spacings.xxs,
46
+ paddingBottom: theme.spacings.xxs,
47
+ borderBottom: `1px solid ${theme.palette.divider}`,
48
+ }),
49
+ ]}
50
+ >
51
+ <Typography variant='overline' color='textSecondary' component={component}>
52
+ {title}
53
+ </Typography>
54
+ </Box>
55
+ <Box
56
+ className={classes.links}
57
+ sx={(theme) => ({
58
+ display: 'grid',
59
+ columnGap: theme.spacings.sm,
60
+ '&:not(.containsBigLinks)': {
61
+ gridTemplateColumns: `repeat(auto-fill, minmax(${responsiveVal(210, 350)}, 1fr))`,
62
+ },
63
+ })}
64
+ >
65
+ {children}
66
+ </Box>
48
67
  </Row>
49
68
  )
50
69
  }
package/Row/ButtonLinkList/ButtonLinkListItem.tsx CHANGED
@@ -4,7 +4,7 @@ import React from 'react'
4
4
  import { IconSvg } from '../../IconSvg'
5
5
  import { iconChevronRight } from '../../icons'
6
6
 
7
- export type ButtonLinkProps = { url: string; endIcon?: React.ReactNode } & ButtonProps
7
+ export type ButtonLinkListItemProps = { url: string; endIcon?: React.ReactNode } & ButtonProps
8
8
 
9
9
  const ButtonItem = styled(Button)(({ theme }) => ({
10
10
  color: theme.palette.text.primary,
@@ -16,12 +16,12 @@ const ButtonItem = styled(Button)(({ theme }) => ({
16
16
  typography: 'body1',
17
17
  }))
18
18
 
19
- export function ButtonLinkListItem(props: ButtonLinkProps) {
19
+ export function ButtonLinkListItem(props: ButtonLinkListItemProps) {
20
20
  const { children, url, endIcon = <IconSvg src={iconChevronRight} />, ...buttonProps } = props
21
21
 
22
22
  return (
23
23
  <PageLink href={url} passHref>
24
- <ButtonItem {...buttonProps} endIcon={endIcon}>
24
+ <ButtonItem {...buttonProps} endIcon={endIcon} LinkComponent='h3'>
25
25
  {children}
26
26
  </ButtonItem>
27
27
  </PageLink>
package/Row/ContentLinks/ContentLinks.tsx CHANGED
@@ -37,7 +37,7 @@ export function ContentLinks(props: ContentLinksProps) {
37
37
  gridAutoColumns: `max-content`,
38
38
  })}
39
39
  >
40
- <Typography variant='subtitle1' component='h3' className={classes.title}>
40
+ <Typography variant='subtitle1' component='h2' className={classes.title}>
41
41
  {title}
42
42
  </Typography>
43
43
  {children}
package/Row/IconBlocks/IconBlock.tsx CHANGED
@@ -24,6 +24,7 @@ export const IconBlock = React.forwardRef<HTMLAnchorElement, IconBlockProps>((pr
24
24
  variant='subtitle1'
25
25
  className={classes.title}
26
26
  sx={(theme) => ({ fontWeight: theme.typography.fontWeightBold })}
27
+ component='span'
27
28
  >
28
29
  {title}
29
30
  </Typography>
package/Row/IconBlocks/IconBlocks.tsx CHANGED
@@ -18,7 +18,11 @@ export function IconBlocks(props: IconBlocksProps) {
18
18
  const { title, children, sx = [] } = props
19
19
 
20
20
  return (
21
- <Row className={classes.container} sx={[{ maxWidth: 820 }, ...(Array.isArray(sx) ? sx : [sx])]}>
21
+ <Row
22
+ maxWidth='md'
23
+ className={classes.container}
24
+ sx={[{ maxWidth: 820 }, ...(Array.isArray(sx) ? sx : [sx])]}
25
+ >
22
26
  <Box className={classes.wrapper} sx={(theme) => ({ paddingTop: `${theme.spacings.lg}` })}>
23
27
  <Box
24
28
  className={classes.title}
package/Theme/themeDefaults.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import { BreakpointsOptions, experimental_sx, SxProps, Theme } from '@mui/material'
2
2
  import { Shadows } from '@mui/material/styles/shadows'
3
-
4
- import { SetRequired } from 'type-fest'
3
+ import type { SetRequired } from 'type-fest'
5
4
 
6
5
  // https://material.io/design/environment/elevation.html#default-elevations
7
6
 
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@graphcommerce/next-ui",
3
3
  "homepage": "https://www.graphcommerce.org/",
4
4
  "repository": "github:graphcommerce-org/graphcommerce",
5
- "version": "4.6.0",
5
+ "version": "4.7.0",
6
6
  "author": "",
7
7
  "license": "MIT",
8
8
  "sideEffects": false,
@@ -16,14 +16,14 @@
16
16
  "dependencies": {
17
17
  "@emotion/babel-preset-css-prop": "^11.2.0",
18
18
  "@emotion/cache": "^11.7.1",
19
- "@emotion/react": "^11.8.2",
19
+ "@emotion/react": "^11.9.0",
20
20
  "@emotion/server": "^11.4.0",
21
21
  "@emotion/styled": "^11.6.0",
22
- "@graphcommerce/framer-next-pages": "3.1.5",
23
- "@graphcommerce/framer-scroller": "2.1.5",
24
- "@graphcommerce/framer-utils": "3.1.1",
25
- "@graphcommerce/image": "3.1.4",
26
- "react-is": "^18.0.0",
22
+ "@graphcommerce/framer-next-pages": "3.2.0",
23
+ "@graphcommerce/framer-scroller": "2.1.8",
24
+ "@graphcommerce/framer-utils": "3.1.2",
25
+ "@graphcommerce/image": "3.1.5",
26
+ "react-is": "^17.0.0",
27
27
  "react-schemaorg": "^2.0.0",
28
28
  "schema-dts": "^1.1.0"
29
29
  },
@@ -37,12 +37,12 @@
37
37
  "react-dom": "^17.0.2"
38
38
  },
39
39
  "devDependencies": {
40
- "@graphcommerce/eslint-config-pwa": "^4.1.4",
41
- "@graphcommerce/prettier-config-pwa": "^4.0.5",
40
+ "@graphcommerce/eslint-config-pwa": "^4.1.6",
41
+ "@graphcommerce/prettier-config-pwa": "^4.0.6",
42
42
  "@graphcommerce/typescript-config-pwa": "^4.0.2",
43
- "@playwright/test": "^1.20.1",
43
+ "@playwright/test": "^1.21.1",
44
44
  "@types/react-is": "^17.0.3",
45
- "type-fest": "2.12.1",
45
+ "type-fest": "^2.12.2",
46
46
  "typescript": "4.6.3"
47
47
  }
48
48
  }