@graphcommerce/next-ui 4.6.1 → 4.7.1

package/Blog/BlogAuthor/BlogAuthor.tsx

@@ -33,6 +33,7 @@ export function BlogAuthor(props: BlogAuthorProps) {
     >
       <Chip
         sx={{
+          borderRadius: '99em',
           height: responsiveVal(44, 66),
           '& .MuiChip-label': {
             paddingLeft: responsiveVal(10, 14),

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Change Log
 
+## 4.7.1
+
+### Patch Changes
+
+- Updated dependencies [[`99600dd09`](https://github.com/graphcommerce-org/graphcommerce/commit/99600dd091980dd9ef335c04d2efac0835c20b2f)]:
+  - @graphcommerce/framer-next-pages@3.2.1
+  - @graphcommerce/framer-scroller@2.1.9
+
+## 4.7.0
+
+### Minor Changes
+
+- [#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
+
+### Patch Changes
+
+- Updated dependencies [[`f3d06dd83`](https://github.com/graphcommerce-org/graphcommerce/commit/f3d06dd836c9a76412b419d4d2c79bbd0ee92e04)]:
+  - @graphcommerce/framer-next-pages@3.2.0
+  - @graphcommerce/framer-scroller@2.1.8
+
+## 4.6.2
+
+### Patch Changes
+
+- [#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
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.7
+
 ## 4.6.1
 
 ### Patch Changes

package/Row/ButtonLinkList/ButtonLinkList.tsx

@@ -1,6 +1,5 @@
-import { Box, SxProps, Theme } from '@mui/material'
+import { Box, SxProps, Theme, Typography } from '@mui/material'
 import React from 'react'
-import { SectionContainer } from '../../SectionContainer/SectionContainer'
 import { extendableComponent } from '../../Styles'
 import { responsiveVal } from '../../Styles/responsiveVal'
 import { Row } from '../Row'
@@ -8,6 +7,7 @@ import { Row } from '../Row'
 export type ButtonLinkListProps = {
   title: string
   children: React.ReactNode
+  component?: React.ElementType
   sx?: SxProps<Theme>
 } & OwnerState
 
@@ -21,7 +21,7 @@ const { withState } = extendableComponent<OwnerState, typeof compName, typeof pa
 )
 
 export function ButtonLinkList(props: ButtonLinkListProps) {
-  const { title, children, containsBigLinks, sx = [] } = props
+  const { title, children, component = 'span', containsBigLinks, sx = [] } = props
 
   const classes = withState({ containsBigLinks })
 
@@ -31,20 +31,39 @@ export function ButtonLinkList(props: ButtonLinkListProps) {
       className={classes.root}
       sx={[{ maxWidth: 820 }, ...(Array.isArray(sx) ? sx : [sx])]}
     >
-      <SectionContainer labelLeft={title}>
-        <Box
-          className={classes.links}
-          sx={(theme) => ({
-            display: 'grid',
-            columnGap: theme.spacings.sm,
-            '&:not(.containsBigLinks)': {
-              gridTemplateColumns: `repeat(auto-fill, minmax(${responsiveVal(210, 350)}, 1fr))`,
+      <Box
+        sx={[
+          (theme) => ({
+            position: 'relative',
+            '&:focus': {
+              outline: 'none',
             },
-          })}
-        >
-          {children}
-        </Box>
-      </SectionContainer>
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginTop: theme.spacings.sm,
+            marginBottom: theme.spacings.xxs,
+            paddingBottom: theme.spacings.xxs,
+            borderBottom: `1px solid ${theme.palette.divider}`,
+          }),
+        ]}
+      >
+        <Typography variant='overline' color='textSecondary' component={component}>
+          {title}
+        </Typography>
+      </Box>
+      <Box
+        className={classes.links}
+        sx={(theme) => ({
+          display: 'grid',
+          columnGap: theme.spacings.sm,
+          '&:not(.containsBigLinks)': {
+            gridTemplateColumns: `repeat(auto-fill, minmax(${responsiveVal(210, 350)}, 1fr))`,
+          },
+        })}
+      >
+        {children}
+      </Box>
     </Row>
   )
 }

package/Row/ButtonLinkList/ButtonLinkListItem.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { IconSvg } from '../../IconSvg'
 import { iconChevronRight } from '../../icons'
 
-export type ButtonLinkProps = { url: string; endIcon?: React.ReactNode } & ButtonProps
+export type ButtonLinkListItemProps = { url: string; endIcon?: React.ReactNode } & ButtonProps
 
 const ButtonItem = styled(Button)(({ theme }) => ({
   color: theme.palette.text.primary,
@@ -16,12 +16,12 @@ const ButtonItem = styled(Button)(({ theme }) => ({
   typography: 'body1',
 }))
 
-export function ButtonLinkListItem(props: ButtonLinkProps) {
+export function ButtonLinkListItem(props: ButtonLinkListItemProps) {
   const { children, url, endIcon = <IconSvg src={iconChevronRight} />, ...buttonProps } = props
 
   return (
     <PageLink href={url} passHref>
-      <ButtonItem {...buttonProps} endIcon={endIcon}>
+      <ButtonItem {...buttonProps} endIcon={endIcon} LinkComponent='h3'>
         {children}
       </ButtonItem>
     </PageLink>

package/Row/ContentLinks/ContentLinks.tsx

@@ -37,7 +37,7 @@ export function ContentLinks(props: ContentLinksProps) {
             gridAutoColumns: `max-content`,
           })}
         >
-          <Typography variant='subtitle1' component='h3' className={classes.title}>
+          <Typography variant='subtitle1' component='h2' className={classes.title}>
             {title}
           </Typography>
           {children}

package/Row/IconBlocks/IconBlock.tsx

@@ -24,6 +24,7 @@ export const IconBlock = React.forwardRef<HTMLAnchorElement, IconBlockProps>((pr
         variant='subtitle1'
         className={classes.title}
         sx={(theme) => ({ fontWeight: theme.typography.fontWeightBold })}
+        component='span'
       >
         {title}
       </Typography>

package/Row/IconBlocks/IconBlocks.tsx

@@ -18,7 +18,11 @@ export function IconBlocks(props: IconBlocksProps) {
   const { title, children, sx = [] } = props
 
   return (
-    <Row className={classes.container} sx={[{ maxWidth: 820 }, ...(Array.isArray(sx) ? sx : [sx])]}>
+    <Row
+      maxWidth='md'
+      className={classes.container}
+      sx={[{ maxWidth: 820 }, ...(Array.isArray(sx) ? sx : [sx])]}
+    >
       <Box className={classes.wrapper} sx={(theme) => ({ paddingTop: `${theme.spacings.lg}` })}>
         <Box
           className={classes.title}

package/Styles/EmotionProvider.tsx

@@ -4,7 +4,7 @@ import { CacheProvider } from '@emotion/react'
 
 let muiCache: EmotionCache | undefined
 export const createMuiCache = () => {
-  muiCache = createCache({ key: 'mui', prepend: true })
+  muiCache = createCache({ key: 'mui' })
   return muiCache
 }
 

package/icons/index.ts

@@ -39,3 +39,4 @@ export { default as icon404 } from './explore.svg'
 export { default as iconSun } from './sun.svg'
 export { default as iconMoon } from './moon.svg'
 export { default as iconPlay } from './play.svg'
+export { default as iconEllypsis } from './ellypsis.svg'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.6.1",
+  "version": "4.7.1",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -19,11 +19,11 @@
     "@emotion/react": "^11.9.0",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.6.0",
-    "@graphcommerce/framer-next-pages": "3.1.6",
-    "@graphcommerce/framer-scroller": "2.1.6",
+    "@graphcommerce/framer-next-pages": "3.2.1",
+    "@graphcommerce/framer-scroller": "2.1.9",
     "@graphcommerce/framer-utils": "3.1.2",
     "@graphcommerce/image": "3.1.5",
-    "react-is": "^18.0.0",
+    "react-is": "^17.0.0",
     "react-schemaorg": "^2.0.0",
     "schema-dts": "^1.1.0"
   },
@@ -37,7 +37,7 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.5",
+    "@graphcommerce/eslint-config-pwa": "^4.1.6",
     "@graphcommerce/prettier-config-pwa": "^4.0.6",
     "@graphcommerce/typescript-config-pwa": "^4.0.2",
     "@playwright/test": "^1.21.1",