@graphcommerce/next-ui 4.25.0 → 4.26.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Change Log
 
+## 4.26.0
+
+### Minor Changes
+
+- [#1651](https://github.com/graphcommerce-org/graphcommerce/pull/1651) [`42e7fac75`](https://github.com/graphcommerce-org/graphcommerce/commit/42e7fac75712f9bda7a6b919ede14b3c75d07771) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Correct component usage in /service
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.38
+
 ## 4.25.0
 
 ### Minor Changes

package/Row/ButtonLinkList/ButtonLinkListItem.tsx

@@ -1,29 +1,36 @@
-import { Button, ButtonProps, styled } from '@mui/material'
+import { ListItemButtonProps, ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
 import PageLink from 'next/link'
 import React from 'react'
 import { IconSvg } from '../../IconSvg'
 import { iconChevronRight } from '../../icons'
 
-export type ButtonLinkListItemProps = { url: string; endIcon?: React.ReactNode } & ButtonProps
-
-const ButtonItem = styled(Button)(({ theme }) => ({
-  color: theme.palette.text.primary,
-  textDecoration: 'none',
-  padding: `${theme.spacings.xs} 0`,
-  borderBottom: `1px solid ${theme.palette.divider}`,
-  borderRadius: 0,
-  justifyContent: 'space-between',
-  typography: 'body1',
-}))
+export type ButtonLinkListItemProps = {
+  url: string
+  endIcon?: React.ReactNode
+} & ListItemButtonProps
 
 export function ButtonLinkListItem(props: ButtonLinkListItemProps) {
-  const { children, url, endIcon = <IconSvg src={iconChevronRight} />, ...buttonProps } = props
+  const {
+    children,
+    url,
+    endIcon = <IconSvg src={iconChevronRight} />,
+    ...ButtonLinkListItemProps
+  } = props
 
   return (
     <PageLink href={url} passHref>
-      <ButtonItem {...buttonProps} endIcon={endIcon} LinkComponent='h3'>
-        {children}
-      </ButtonItem>
+      <ListItemButton
+        LinkComponent='a'
+        sx={(theme) => ({
+          padding: `${theme.spacings.xxs} 0`,
+          borderBottom: `1px solid ${theme.palette.divider}`,
+          justifyContent: 'space-between',
+        })}
+        {...ButtonLinkListItemProps}
+      >
+        <ListItemText>{children}</ListItemText>
+        <ListItemIcon>{endIcon}</ListItemIcon>
+      </ListItemButton>
     </PageLink>
   )
 }

package/Row/IconBlocks/IconBlock.tsx

@@ -1,4 +1,4 @@
-import { Typography, Button, SxProps, Theme, Box } from '@mui/material'
+import { Typography, Button, SxProps, Theme, Box, ButtonProps } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../../Styles'
 
@@ -8,65 +8,43 @@ export type IconBlockProps = {
   children: React.ReactNode
   href?: string
   sx?: SxProps<Theme>
-}
+} & ButtonProps
 
 const name = 'IconBlock' as const
 const parts = ['block', 'link', 'title'] as const
 const { classes } = extendableComponent(name, parts)
 
 export const IconBlock = React.forwardRef<HTMLAnchorElement, IconBlockProps>((props, ref) => {
-  const { title, children, icon, href, sx = [] } = props
-
-  const content = (
-    <>
-      {icon}
-      <Typography
-        variant='subtitle1'
-        className={classes.title}
-        sx={(theme) => ({ fontWeight: theme.typography.fontWeightBold })}
-        component='span'
-      >
-        {title}
-      </Typography>
-      {children}
-    </>
-  )
-
-  const blockSx: SxProps<Theme> = [
-    (theme) => ({
-      border: `1px solid ${theme.palette.divider}`,
-      padding: `${theme.spacings.sm}`,
-      borderRadius: '6px',
-      textAlign: 'center',
-      color: theme.palette.text.primary,
-      '& > *': {
-        display: 'grid',
-        gridAutoFlow: 'row',
-        justifyItems: 'center',
-        gap: `${theme.spacings.xxs}`,
-      },
-    }),
-    ...(Array.isArray(sx) ? sx : [sx]),
-  ]
-
-  if (href) {
-    return (
-      <Button
-        href={href}
-        variant='text'
-        color='primary'
-        className={classes.block}
-        ref={ref}
-        sx={blockSx}
-      >
-        <div>{content}</div>
-      </Button>
-    )
-  }
+  const { title, children, icon, href = '#', sx = [], ...buttonProps } = props
 
   return (
-    <Box className={classes.block} sx={blockSx}>
-      {content}
-    </Box>
+    <Button
+      href={href}
+      variant='outlined'
+      color='primary'
+      className={classes.block}
+      {...buttonProps}
+      sx={[
+        (theme) => ({
+          padding: `${theme.spacings.sm}`,
+          textAlign: 'center',
+          '& > *': {
+            display: 'grid',
+            gridAutoFlow: 'row',
+            justifyItems: 'center',
+            gap: `${theme.spacings.xxs}`,
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <Box>
+        {icon}
+        <Typography variant='subtitle1' className={classes.title} component='span'>
+          {title}
+        </Typography>
+        {children}
+      </Box>
+    </Button>
   )
 })

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.25.0",
+  "version": "4.26.0",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -20,7 +20,7 @@
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.9.3",
     "@graphcommerce/framer-next-pages": "3.3.0",
-    "@graphcommerce/framer-scroller": "2.1.37",
+    "@graphcommerce/framer-scroller": "2.1.38",
     "@graphcommerce/framer-utils": "3.2.0",
     "@graphcommerce/image": "3.1.9",
     "cookie": "^0.5.0",