@graphcommerce/next-ui 4.6.2 → 4.7.0

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,17 @@
 # Change Log
 
+## 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

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

@@ -21,7 +21,7 @@ export function ButtonLinkListItem(props: ButtonLinkListItemProps) {
 
   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/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.6.2",
+  "version": "4.7.0",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -19,8 +19,8 @@
     "@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.7",
+    "@graphcommerce/framer-next-pages": "3.2.0",
+    "@graphcommerce/framer-scroller": "2.1.8",
     "@graphcommerce/framer-utils": "3.1.2",
     "@graphcommerce/image": "3.1.5",
     "react-is": "^17.0.0",