@graphcommerce/next-ui 4.7.2 → 4.8.0

package/ActionCard/ActionCard.tsx

@@ -0,0 +1,129 @@
+import { Theme } from '@emotion/react'
+import { SxProps, ButtonBase, Box } from '@mui/material'
+import React, { FormEvent } from 'react'
+
+type ActionCardProps = {
+  sx?: SxProps<Theme>
+  title?: string | React.ReactNode
+  image?: React.ReactNode
+  action?: React.ReactNode
+  details?: React.ReactNode
+  secondaryAction?: React.ReactNode
+  onClick?: (e: FormEvent<HTMLButtonElement>, v: string) => void
+  onChange?: (e: FormEvent<HTMLButtonElement>, v: string) => void
+  selected?: boolean
+  hidden?: boolean | (() => boolean)
+  value: string
+  reset?: React.ReactNode
+}
+
+export function ActionCard(props: ActionCardProps) {
+  const {
+    title,
+    image,
+    action,
+    details,
+    secondaryAction,
+    sx = [],
+    onChange,
+    onClick,
+    value,
+    selected,
+    hidden,
+    reset,
+  } = props
+
+  const handleChange = (event: FormEvent<HTMLButtonElement>) => onChange?.(event, value)
+  const handleClick = (event: FormEvent<HTMLButtonElement>) => {
+    if (onClick) {
+      onClick(event, value)
+      if (event.isDefaultPrevented()) return
+    }
+    handleChange(event)
+  }
+
+  const actionButtonStyles: SxProps = {
+    '& .MuiButton-root': {
+      '&.MuiButton-textSecondary': {
+        padding: '5px',
+        margin: '-5px',
+        '&:hover': {
+          background: 'none',
+        },
+      },
+    },
+  }
+
+  return (
+    <ButtonBase
+      component='button'
+      className='ActionCard-root'
+      onClick={handleClick}
+      onChange={handleChange}
+      value={value}
+      sx={[
+        {
+          display: 'grid',
+          width: '100%',
+          gridTemplateColumns: 'min-content',
+          gridTemplateAreas: `
+        "image title action"
+        "image details secondaryDetails"
+        "image secondaryAction additionalDetails"
+        "additionalContent additionalContent additionalContent"
+        `,
+          justifyContent: 'unset',
+        },
+        (theme) => ({
+          typography: 'body1',
+          textAlign: 'left',
+          background: theme.palette.background.paper,
+          padding: `calc(${theme.spacings.xs} + 1px)`,
+          columnGap: theme.spacings.xxs,
+          border: `1px solid ${theme.palette.divider}`,
+          borderBottomColor: `transparent`,
+          '&:first-of-type': {
+            borderTopLeftRadius: theme.shape.borderRadius,
+            borderTopRightRadius: theme.shape.borderRadius,
+          },
+          '&:last-of-type': {
+            borderBottomLeftRadius: theme.shape.borderRadius,
+            borderBottomRightRadius: theme.shape.borderRadius,
+            borderBottom: `1px solid ${theme.palette.divider}`,
+          },
+        }),
+        !!hidden && {
+          display: 'none',
+        },
+        !!selected &&
+          ((theme) => ({
+            border: `2px solid ${theme.palette.secondary.main} !important`,
+            borderTopLeftRadius: theme.shape.borderRadius,
+            borderTopRightRadius: theme.shape.borderRadius,
+            borderBottomLeftRadius: theme.shape.borderRadius,
+            borderBottomRightRadius: theme.shape.borderRadius,
+            padding: theme.spacings.xs,
+          })),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      {image && <Box sx={{ gridArea: 'image', justifySelf: 'center', padding: 1 }}>{image}</Box>}
+      {title && <Box sx={{ gridArea: 'title', fontWeight: 'bold' }}>{title}</Box>}
+      {action && (
+        <Box
+          sx={{
+            gridArea: 'action',
+            textAlign: 'right',
+            ...actionButtonStyles,
+          }}
+        >
+          {!selected ? action : reset}
+        </Box>
+      )}
+      {details && <Box sx={{ gridArea: 'details', color: 'text.secondary' }}>{details}</Box>}
+      {secondaryAction && (
+        <Box sx={{ gridArea: 'secondaryAction', ...actionButtonStyles }}>{secondaryAction}</Box>
+      )}
+    </ButtonBase>
+  )
+}

package/ActionCard/ActionCardList.tsx

@@ -0,0 +1,110 @@
+import { Box } from '@mui/material'
+import React from 'react'
+import { isFragment } from 'react-is'
+
+type MultiSelect = {
+  multiple: true
+  value: string[]
+
+  onChange?: (event: React.MouseEvent<HTMLElement>, value: string[]) => void
+}
+type Select = {
+  multiple?: false
+  value: string
+
+  /** Value is null when deselected when not required */
+  onChange?: (event: React.MouseEvent<HTMLElement>, value: string | null) => void
+}
+
+type ActionCardListProps<SelectOrMulti = MultiSelect | Select> = {
+  children?: React.ReactNode
+  required?: boolean
+  error?: boolean
+} & SelectOrMulti
+
+function isMulti(props: ActionCardListProps): props is ActionCardListProps<MultiSelect> {
+  return props.multiple === true
+}
+
+function isValueSelected(value: string, candidate: string | string[]) {
+  if (candidate === undefined || value === undefined) return false
+  if (Array.isArray(candidate)) return candidate.indexOf(value) >= 0
+  return value === candidate
+}
+
+export function ActionCardList(props: ActionCardListProps) {
+  const { children, required, value, error = false } = props
+
+  const handleChange = isMulti(props)
+    ? (event: React.MouseEvent<HTMLElement, MouseEvent>, buttonValue: string) => {
+        const { onChange } = props
+        const index = Boolean(value) && value?.indexOf(buttonValue)
+        let newValue: string[]
+
+        if (Array.isArray(value) && value.length && index && index >= 0) {
+          newValue = value.slice()
+          newValue.splice(index, 1)
+        } else {
+          newValue = value ? [...value, buttonValue] : [buttonValue]
+        }
+        onChange?.(event, newValue)
+      }
+    : (event: React.MouseEvent<HTMLElement, MouseEvent>, buttonValue: string) => {
+        const { onChange } = props
+
+        if (value === buttonValue) return
+        if (required) onChange?.(event, buttonValue)
+        else onChange?.(event, value === buttonValue ? null : buttonValue)
+      }
+
+  return (
+    <Box
+      sx={[
+        error &&
+          ((theme) => ({
+            '& .ActionCard-root': {
+              borderLeft: 2,
+              borderRight: 2,
+              borderLeftColor: 'error.main',
+              borderRightColor: 'error.main',
+              paddingLeft: theme.spacings.xs,
+              paddingRight: theme.spacings.xs,
+            },
+            '& .ActionCard-root:first-of-type': {
+              borderTop: 2,
+              borderTopColor: 'error.main',
+              paddingTop: theme.spacings.xs,
+            },
+            '& .ActionCard-root:last-of-type': {
+              borderBottom: 2,
+              borderBottomColor: 'error.main',
+              paddingBottom: theme.spacings.xs,
+            },
+          })),
+      ]}
+    >
+      {React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) return null
+
+        if (process.env.NODE_ENV !== 'production') {
+          if (isFragment(child)) {
+            console.error(
+              [
+                "@graphcommerce/next-ui: The ActionCardList component doesn't accept a Fragment as a child.",
+                'Consider providing an array instead.',
+              ].join('\n'),
+            )
+          }
+        }
+
+        return React.cloneElement(child, {
+          onClick: handleChange,
+          selected:
+            child.props.selected === undefined
+              ? isValueSelected(child.props.value as string, value)
+              : child.props.selected,
+        })
+      })}
+    </Box>
+  )
+}

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Change Log
 
+## 4.8.0
+
+### Minor Changes
+
+- [#1462](https://github.com/graphcommerce-org/graphcommerce/pull/1462) [`3ac90b57c`](https://github.com/graphcommerce-org/graphcommerce/commit/3ac90b57c68b96f9d81771d6664ed9435a28fc1d) Thanks [@mikekeehnen](https://github.com/mikekeehnen)! - Added translation for the pagination
+
+### Patch Changes
+
+- [#1467](https://github.com/graphcommerce-org/graphcommerce/pull/1467) [`0363b9671`](https://github.com/graphcommerce-org/graphcommerce/commit/0363b9671db7c2932321d97faf6f1eb385238397) Thanks [@timhofman](https://github.com/timhofman)! - optional feedback message upon adding products to wishlist
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.11
+
 ## 4.7.2
 
 ### Patch Changes

package/LayoutDefault/components/LayoutDefault.tsx

@@ -58,7 +58,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
           display: 'grid',
           gridTemplateRows: `auto auto 1fr auto`,
           gridTemplateColumns: '100%',
-          background: theme.palette.background.default,
+          background: theme.palette.background.paper,
         }),
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}

package/Pagination/Pagination.tsx

@@ -1,3 +1,4 @@
+import { Trans } from '@lingui/react'
 import { PaginationProps, Box, SxProps, Theme, IconButton } from '@mui/material'
 import usePagination, { UsePaginationItem } from '@mui/material/usePagination'
 import React from 'react'
@@ -75,7 +76,9 @@ export function Pagination(props: PagePaginationProps) {
     >
       {page === 1 ? chevronLeft : renderLink(page - 1, chevronLeft, prevBtnProps)}
 
-      <Box typography='body1'>Page {`${page} of ${Math.max(1, count)}`}</Box>
+      <Box typography='body1'>
+        <Trans id='Page {page} of {count}' values={{ page, count: Math.max(1, count) }} />
+      </Box>
 
       {page === count ? chevronRight : renderLink(page + 1, chevronRight, nextBtnProps)}
     </Box>

package/Snackbar/MessageSnackbarImpl.tsx

@@ -64,11 +64,18 @@ export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
     setShowSnackbar(!!open)
   }, [open])
 
-  const hideSnackbar = () => {
+  const hideSnackbar = (e) => {
+    e.preventDefault()
+
     setShowSnackbar(false)
     onClose?.()
   }
 
+  const preventAnimationBubble: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
   let icon = iconCheckmark
   if (severity === 'error') icon = iconSadFace
 
@@ -131,6 +138,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
                 aria-label='Close'
                 size='small'
                 onClick={hideSnackbar}
+                onMouseDown={preventAnimationBubble}
                 sx={(theme) => ({
                   backgroundColor: lighten(theme.palette.background.paper, 0.1),
                 })}

package/index.ts

@@ -1,3 +1,5 @@
+export * from './ActionCard/ActionCardList'
+export * from './ActionCard/ActionCard'
 export * from './AnimatedRow/AnimatedRow'
 export * from './Blog/BlogAuthor/BlogAuthor'
 export * from './Blog/BlogContent/BlogContent'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.7.2",
+  "version": "4.8.0",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -20,7 +20,7 @@
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.6.0",
     "@graphcommerce/framer-next-pages": "3.2.1",
-    "@graphcommerce/framer-scroller": "2.1.10",
+    "@graphcommerce/framer-scroller": "2.1.11",
     "@graphcommerce/framer-utils": "3.1.2",
     "@graphcommerce/image": "3.1.5",
     "react-is": "^17.0.0",