@graphcommerce/next-ui 5.2.0-canary.12 → 5.2.0-canary.13

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 -1
  2. package/Blog/BlogContent/BlogContent.tsx +24 -6
  3. package/Blog/BlogHeader/BlogHeader.tsx +2 -1
  4. package/Blog/BlogList/BlogList.tsx +24 -7
  5. package/Blog/BlogListItem/BlogListItem.tsx +8 -18
  6. package/Blog/BlogTags/BlogTags.tsx +1 -1
  7. package/Blog/BlogTitle/BlogTitle.tsx +6 -1
  8. package/CHANGELOG.md +6 -0
  9. package/FramerScroller/SidebarGallery.tsx +2 -2
  10. package/Navigation/components/NavigationItem.tsx +4 -8
  11. package/package.json +8 -8
package/Blog/BlogAuthor/BlogAuthor.tsx CHANGED
@@ -15,11 +15,11 @@ export function BlogAuthor(props: BlogAuthorProps) {
15
15
 
16
16
  return (
17
17
  <Box
18
+ maxWidth='md'
18
19
  sx={[
19
20
  {
20
21
  display: 'flex',
21
22
  justifyContent: 'left',
22
- maxWidth: 800,
23
23
  margin: `0 auto`,
24
24
  marginBottom: (theme) => theme.spacings.md,
25
25
  },
package/Blog/BlogContent/BlogContent.tsx CHANGED
@@ -1,7 +1,25 @@
1
- import { styled } from '@mui/material'
1
+ import { Box, SxProps, Theme } from '@mui/material'
2
2
 
3
- export const BlogContent = styled('div')(({ theme }) => ({
4
- maxWidth: 800,
5
- margin: '0 auto',
6
- marginBottom: theme.spacings.sm,
7
- }))
3
+ type BlogContentProps = {
4
+ children: React.ReactNode
5
+ sx?: SxProps<Theme>
6
+ }
7
+
8
+ export function BlogContent(props: BlogContentProps) {
9
+ const { children, sx = [] } = props
10
+
11
+ return (
12
+ <Box
13
+ maxWidth='md'
14
+ sx={[
15
+ (theme) => ({
16
+ margin: '0 auto',
17
+ marginBottom: theme.spacings.sm,
18
+ }),
19
+ ...(Array.isArray(sx) ? sx : [sx]),
20
+ ]}
21
+ >
22
+ {children}
23
+ </Box>
24
+ )
25
+ }
package/Blog/BlogHeader/BlogHeader.tsx CHANGED
@@ -18,12 +18,13 @@ export function BlogHeader(props: BlogHeaderProps) {
18
18
  return (
19
19
  <Box
20
20
  className={classes.header}
21
+ maxWidth='md'
21
22
  sx={[
22
23
  (theme) => ({
23
- maxWidth: 800,
24
24
  margin: `0 auto`,
25
25
  marginBottom: theme.spacings.md,
26
26
  '& img': {
27
+ objectFit: 'cover',
27
28
  ...breakpointVal(
28
29
  'borderRadius',
29
30
  theme.shape.borderRadius * 2,
package/Blog/BlogList/BlogList.tsx CHANGED
@@ -1,9 +1,26 @@
1
- import { styled } from '@mui/material'
1
+ import { SxProps, Theme } from '@mui/material'
2
2
  import { Row } from '../../Row/Row'
3
- import { responsiveVal } from '../../Styles/responsiveVal'
4
3
 
5
- export const BlogItemGrid = styled(Row, { name: 'BlogList' })(({ theme }) => ({
6
- display: 'grid',
7
- gap: theme.spacings.md,
8
- gridTemplateColumns: `repeat(auto-fill, minmax(${responsiveVal(150, 285)}, 1fr))`,
9
- }))
4
+ type BlogItemGridProps = {
5
+ children: React.ReactNode
6
+ sx?: SxProps<Theme>
7
+ }
8
+
9
+ export function BlogItemGrid(props: BlogItemGridProps) {
10
+ const { children, sx = [] } = props
11
+
12
+ return (
13
+ <Row
14
+ sx={[
15
+ (theme) => ({
16
+ display: 'grid',
17
+ gap: theme.spacings.md,
18
+ gridTemplateColumns: { xs: `repeat(2, 1fr)`, md: `repeat(3, 1fr)`, lg: `repeat(4, 1fr)` },
19
+ }),
20
+ ...(Array.isArray(sx) ? sx : [sx]),
21
+ ]}
22
+ >
23
+ {children}
24
+ </Row>
25
+ )
26
+ }
package/Blog/BlogListItem/BlogListItem.tsx CHANGED
@@ -28,7 +28,7 @@ export function BlogListItem(props: BlogListItemProps) {
28
28
  sx={[
29
29
  (theme) => ({
30
30
  display: 'grid',
31
- gridTemplateRows: `${responsiveVal(140, 220)} auto auto`,
31
+ gridTemplateRows: `auto auto auto`,
32
32
  alignContent: 'start',
33
33
  color: theme.palette.text.primary,
34
34
  gap: theme.spacings.xxs,
@@ -41,26 +41,16 @@ export function BlogListItem(props: BlogListItemProps) {
41
41
  <Box
42
42
  className={classes.asset}
43
43
  sx={(theme) => ({
44
- display: 'grid',
45
- alignContent: 'center',
46
- overflow: 'hidden',
47
- height: '100%',
48
- width: '100%',
49
- ...breakpointVal(
50
- 'borderRadius',
51
- theme.shape.borderRadius * 2,
52
- theme.shape.borderRadius * 3,
53
- theme.breakpoints.values,
54
- ),
55
44
  '& img': {
56
- height: '100% !important',
45
+ aspectRatio: '3/2',
57
46
  objectFit: 'cover',
47
+ ...breakpointVal(
48
+ 'borderRadius',
49
+ theme.shape.borderRadius * 2,
50
+ theme.shape.borderRadius * 3,
51
+ theme.breakpoints.values,
52
+ ),
58
53
  },
59
- '& p': {
60
- alignSelf: 'center',
61
- justifySelf: 'center',
62
- },
63
- background: theme.palette.background.paper,
64
54
  })}
65
55
  >
66
56
  {asset}
package/Blog/BlogTags/BlogTags.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import { styled } from '@mui/material'
2
2
 
3
3
  export const BlogTags = styled('div')(({ theme }) => ({
4
- maxWidth: 800,
4
+ maxWidth: theme.breakpoints.values.md,
5
5
  margin: `0 auto`,
6
6
  marginBottom: theme.spacings.sm,
7
7
  }))
package/Blog/BlogTitle/BlogTitle.tsx CHANGED
@@ -8,7 +8,12 @@ export function BlogTitle(props: BlogTitleProps) {
8
8
  const { sx = [], children } = props
9
9
 
10
10
  return (
11
- <Box sx={[{ maxWidth: 800, margin: '0 auto' }, ...(Array.isArray(sx) ? sx : [sx])]}>
11
+ <Box
12
+ sx={[
13
+ (theme) => ({ maxWidth: theme.breakpoints.values.md, margin: '0 auto' }),
14
+ ...(Array.isArray(sx) ? sx : [sx]),
15
+ ]}
16
+ >
12
17
  <LayoutTitle variant='h1'>{children}</LayoutTitle>
13
18
  </Box>
14
19
  )
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # Change Log
2
2
 
3
+ ## 5.2.0-canary.13
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1795](https://github.com/graphcommerce-org/graphcommerce/pull/1795) [`236d698b2`](https://github.com/graphcommerce-org/graphcommerce/commit/236d698b2aac55598fc45a6a58574a538f23e160) - Navigation link fix, homepage and category style fixes ([@ErwinOtten](https://github.com/ErwinOtten))
8
+
3
9
  ## 5.2.0-canary.12
4
10
 
5
11
  ## 5.2.0-canary.11
package/FramerScroller/SidebarGallery.tsx CHANGED
@@ -288,8 +288,8 @@ export function SidebarGallery(props: SidebarGalleryProps) {
288
288
  <Box
289
289
  className={classes.bottomCenter}
290
290
  sx={{
291
- display: 'grid',
292
- gridAutoFlow: 'column',
291
+ display: 'flex',
292
+ px: theme.page.horizontal,
293
293
  gap: theme.spacings.xxs,
294
294
  position: 'absolute',
295
295
  bottom: theme.spacings.xxs,
package/Navigation/components/NavigationItem.tsx CHANGED
@@ -1,9 +1,10 @@
1
1
  /* eslint-disable @typescript-eslint/no-use-before-define */
2
2
  import { useMotionValueValue } from '@graphcommerce/framer-utils'
3
- import { alpha, Box, ListItemButton, styled, useEventCallback, useTheme } from '@mui/material'
3
+ import { alpha, Box, ListItemButton, styled, useEventCallback } from '@mui/material'
4
4
  import React from 'react'
5
5
  import { IconSvg } from '../../IconSvg'
6
6
  import { extendableComponent } from '../../Styles/extendableComponent'
7
+ import { NextLink } from '../../Theme'
7
8
  import { useMatchMedia } from '../../hooks'
8
9
  import { iconChevronRight } from '../../icons'
9
10
  import {
@@ -14,8 +15,6 @@ import {
14
15
  useNavigation,
15
16
  } from '../hooks/useNavigation'
16
17
  import type { NavigationList } from './NavigationList'
17
- import { NextLink } from '../../Theme'
18
- import { useRouter } from 'next/router'
19
18
 
20
19
  type OwnerState = {
21
20
  first?: boolean
@@ -49,8 +48,6 @@ const NavigationLI = styled('li')({ display: 'contents' })
49
48
  export const NavigationItem = React.memo<NavigationItemProps>((props) => {
50
49
  const { id, parentPath, idx, first, last, NavigationList, mouseEvent } = props
51
50
  const { selection, hideRootOnNavigate, closing, animating, serverRenderDepth } = useNavigation()
52
- const router = useRouter()
53
- const { locale } = router
54
51
 
55
52
  const row = idx + 1
56
53
 
@@ -83,14 +80,13 @@ export const NavigationItem = React.memo<NavigationItemProps>((props) => {
83
80
 
84
81
  if (isNavigationButton(props)) {
85
82
  const { childItems, name, href } = props
86
- const prefix = locale === router.defaultLocale ? '' : `/${locale}`
87
83
  const skipChildren = itemPath.length + 1 > serverRenderDepth && !isSelected && !!href
88
84
 
89
85
  return (
90
86
  <NavigationLI className={classes.li}>
91
87
  <ListItemButton
92
- component={href ? 'a' : 'div'}
93
- href={href ? prefix + href : undefined}
88
+ component={NextLink}
89
+ href={href}
94
90
  className={classes.item}
95
91
  role='button'
96
92
  sx={[
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": "5.2.0-canary.12",
5
+ "version": "5.2.0-canary.13",
6
6
  "author": "",
7
7
  "license": "MIT",
8
8
  "sideEffects": false,
@@ -18,18 +18,18 @@
18
18
  "@emotion/react": "^11.10.5",
19
19
  "@emotion/server": "^11.4.0",
20
20
  "@emotion/styled": "^11.10.5",
21
- "@graphcommerce/framer-next-pages": "5.2.0-canary.12",
22
- "@graphcommerce/framer-scroller": "5.2.0-canary.12",
23
- "@graphcommerce/framer-utils": "5.2.0-canary.12",
24
- "@graphcommerce/image": "5.2.0-canary.12",
21
+ "@graphcommerce/framer-next-pages": "5.2.0-canary.13",
22
+ "@graphcommerce/framer-scroller": "5.2.0-canary.13",
23
+ "@graphcommerce/framer-utils": "5.2.0-canary.13",
24
+ "@graphcommerce/image": "5.2.0-canary.13",
25
25
  "cookie": "^0.5.0",
26
26
  "react-is": "^18.2.0",
27
27
  "schema-dts": "^1.1.0"
28
28
  },
29
29
  "devDependencies": {
30
- "@graphcommerce/eslint-config-pwa": "5.2.0-canary.12",
31
- "@graphcommerce/prettier-config-pwa": "5.2.0-canary.12",
32
- "@graphcommerce/typescript-config-pwa": "5.2.0-canary.12",
30
+ "@graphcommerce/eslint-config-pwa": "5.2.0-canary.13",
31
+ "@graphcommerce/prettier-config-pwa": "5.2.0-canary.13",
32
+ "@graphcommerce/typescript-config-pwa": "5.2.0-canary.13",
33
33
  "@types/cookie": "^0.5.1",
34
34
  "@types/react-is": "^17.0.3",
35
35
  "typescript": "4.9.4"