@graphcommerce/next-ui 4.9.0 → 4.11.1

package/ActionCard/ActionCard.tsx

@@ -1,6 +1,6 @@
-import { Theme } from '@emotion/react'
-import { SxProps, ButtonBase, Box } from '@mui/material'
+import { SxProps, ButtonBase, Box, Theme } from '@mui/material'
 import React, { FormEvent } from 'react'
+import { extendableComponent } from '../Styles'
 
 export type ActionCardProps = {
   sx?: SxProps<Theme>
@@ -8,64 +8,83 @@ export type ActionCardProps = {
   image?: React.ReactNode
   action?: React.ReactNode
   details?: React.ReactNode
+  price?: React.ReactNode
+  after?: React.ReactNode
   secondaryAction?: React.ReactNode
   onClick?: (e: FormEvent<HTMLElement>, v: string | number) => void
   selected?: boolean
-  hidden?: boolean | (() => boolean)
+  hidden?: boolean
   value: string | number
   reset?: React.ReactNode
   disabled?: boolean
 }
 
-const actionButtonStyles: SxProps = {
-  '& .MuiButton-root': {
-    '&.MuiButton-textSecondary': {
-      padding: '5px',
-      margin: '-5px',
-      '&:hover': {
-        background: 'none',
-      },
-    },
-  },
+const parts = [
+  'root',
+  'image',
+  'title',
+  'action',
+  'details',
+  'price',
+  'after',
+  'secondaryAction',
+  'reset',
+] as const
+const name = 'ActionCard'
+
+type StateProps = {
+  selected?: boolean
+  hidden?: boolean
+  disabled?: boolean
+  image?: boolean
 }
 
+const { withState, selectors } = extendableComponent<StateProps, typeof name, typeof parts>(
+  name,
+  parts,
+)
+
+export const actionCardSelectors = selectors
+
 export function ActionCard(props: ActionCardProps) {
   const {
     title,
     image,
     action,
     details,
+    price,
+    after,
     secondaryAction,
     sx = [],
     onClick,
     value,
-    selected,
-    hidden,
+    selected = false,
+    hidden = false,
     reset,
-    disabled,
+    disabled = false,
   } = props
 
+  const classes = withState({ hidden, disabled, selected, image: Boolean(image) })
+
   const handleClick = (event: FormEvent<HTMLElement>) => onClick?.(event, value)
 
   return (
     <ButtonBase
       component='div'
-      className='ActionCard-root'
+      className={classes.root}
       onClick={handleClick}
       disabled={disabled}
       sx={[
         (theme) => ({
           display: 'grid',
           width: '100%',
-          gridTemplateColumns: 'min-content',
-          gridTemplateAreas: {
-            xs: `
-              "image title action"
-              "image details details"
-              "image secondaryAction additionalDetails"
-              "additionalContent additionalContent additionalContent"
-            `,
-          },
+          gridTemplateColumns: 'min-content auto auto',
+          gridTemplateAreas: `
+            "image title action"
+            "image details ${price ? 'price' : 'details'}"
+            "image secondaryActio additionalDetails"
+            "after after after"
+          `,
           justifyContent: 'unset',
           typography: 'body1',
           // textAlign: 'left',
@@ -84,10 +103,19 @@ export function ActionCard(props: ActionCardProps) {
             borderBottom: `1px solid ${theme.palette.divider}`,
           },
         }),
-        !!hidden && {
+        !image && {
+          gridTemplateColumns: 'auto auto',
+          gridTemplateAreas: `
+            "title action"
+            "details ${price ? 'price' : 'details'}"
+            "secondaryAction additionalDetails"
+            "after after"
+          `,
+        },
+        hidden && {
           display: 'none',
         },
-        !!selected &&
+        selected &&
           ((theme) => ({
             border: `2px solid ${theme.palette.secondary.main} !important`,
             borderTopLeftRadius: theme.shape.borderRadius,
@@ -96,7 +124,7 @@ export function ActionCard(props: ActionCardProps) {
             borderBottomRightRadius: theme.shape.borderRadius,
             padding: `${theme.spacings.xxs} ${theme.spacings.xs}`,
           })),
-        !!disabled &&
+        disabled &&
           ((theme) => ({
             background: theme.palette.background.default,
           })),
@@ -104,32 +132,57 @@ export function ActionCard(props: ActionCardProps) {
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
     >
-      {image && <Box sx={{ gridArea: 'image', justifySelf: 'center', padding: 1 }}>{image}</Box>}
+      {image && (
+        <Box
+          className={classes.image}
+          sx={{
+            gridArea: 'image',
+            display: 'flex',
+          }}
+        >
+          {image}
+        </Box>
+      )}
       {title && (
-        <Box sx={{ gridArea: 'title', fontWeight: 'bold', marginLeft: !image ? -2 : undefined }}>
+        <Box className={classes.title} sx={{ gridArea: 'title', display: 'flex' }}>
           {title}
         </Box>
       )}
       {action && (
+        <Box className={classes.action} sx={{ gridArea: 'action', textAlign: 'right' }}>
+          {!selected ? action : reset}
+        </Box>
+      )}
+      {details && (
         <Box
+          className={classes.details}
           sx={{
-            gridArea: 'action',
-            textAlign: 'right',
-            ...actionButtonStyles,
+            gridArea: 'details',
+            color: 'text.secondary',
           }}
         >
-          {!selected ? action : reset}
+          {details}
         </Box>
       )}
-      {details && (
+
+      {price && !disabled && (
         <Box
-          sx={{ gridArea: 'details', color: 'text.secondary', marginLeft: !image ? -2 : undefined }}
+          className={classes.price}
+          sx={{ gridArea: 'price', textAlign: 'right', typography: 'h5' }}
         >
-          {details}
+          {price}
         </Box>
       )}
+
       {secondaryAction && (
-        <Box sx={{ gridArea: 'secondaryAction', ...actionButtonStyles }}>{secondaryAction}</Box>
+        <Box className={classes.secondaryAction} sx={{ gridArea: 'secondaryAction' }}>
+          {secondaryAction}
+        </Box>
+      )}
+      {after && (
+        <Box className={classes.after} sx={{ gridArea: 'after' }}>
+          {after}
+        </Box>
       )}
     </ButtonBase>
   )

package/ActionCard/ActionCardListForm.tsx

@@ -1,13 +1,16 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { Controller, ControllerProps } from '@graphcommerce/react-hook-form'
-import React from 'react'
+import React, { MouseEventHandler } from 'react'
 import { ActionCardProps } from './ActionCard'
 import { ActionCardList, ActionCardListProps } from './ActionCardList'
 
 export type ActionCardItemBase = Pick<ActionCardProps, 'value'>
 
-export type ActionCardItemRenderer<T> = Pick<ActionCardProps, 'selected' | 'hidden' | 'value'> & {
-  onReset: React.MouseEventHandler<HTMLButtonElement>
+export type ActionCardItemRenderProps<T> = Pick<
+  ActionCardProps,
+  'selected' | 'hidden' | 'value'
+> & {
+  onReset: MouseEventHandler<HTMLAnchorElement> & MouseEventHandler<HTMLSpanElement>
 } & T
 
 export type ActionCardListFormProps<T extends ActionCardItemBase> = Omit<
@@ -16,32 +19,28 @@ export type ActionCardListFormProps<T extends ActionCardItemBase> = Omit<
 > &
   Omit<ControllerProps<any>, 'render'> & {
     items: T[]
-    render: React.VFC<ActionCardItemRenderer<T>>
+    render: React.VFC<ActionCardItemRenderProps<T>>
   }
 
 export function ActionCardListForm<T extends ActionCardItemBase>(
   props: ActionCardListFormProps<T>,
 ) {
   const { required, rules, items, render, control, name, errorMessage } = props
-  const RenderItem = render as React.VFC<ActionCardItemRenderer<ActionCardItemBase>>
+  const RenderItem = render as React.VFC<ActionCardItemRenderProps<ActionCardItemBase>>
 
   return (
     <Controller
       {...props}
       control={control}
       name={name}
-      rules={{
-        required,
-        ...rules,
-        validate: (v) => (v ? true : 'Please select a shipping address'),
-      }}
+      rules={{ required, ...rules, validate: (v) => (v ? true : errorMessage) }}
       render={({ field: { onChange, value }, fieldState, formState }) => (
         <ActionCardList
           required
           value={value}
           onChange={(_, incomming) => onChange(incomming)}
           error={formState.isSubmitted && !!fieldState.error}
-          errorMessage={errorMessage}
+          errorMessage={fieldState.error?.message}
         >
           {items.map((item) => (
             <RenderItem

package/Blog/BlogAuthor/BlogAuthor.tsx

@@ -1,7 +1,6 @@
 import { Avatar, Box, Chip, SxProps, Theme } from '@mui/material'
-import { useRouter } from 'next/router'
-import { useMemo } from 'react'
 import { responsiveVal } from '../../Styles/responsiveVal'
+import { useDateTimeFormat } from '../../hooks'
 
 export type BlogAuthorProps = {
   author: string
@@ -12,11 +11,7 @@ export type BlogAuthorProps = {
 export function BlogAuthor(props: BlogAuthorProps) {
   const { author, date, sx = [] } = props
 
-  const { locale } = useRouter()
-  const formatter = useMemo(
-    () => new Intl.DateTimeFormat(locale, { month: 'long', day: 'numeric' }),
-    [locale],
-  )
+  const formatter = useDateTimeFormat({ month: 'long', day: 'numeric' })
 
   return (
     <Box

package/Blog/BlogListItem/BlogListItem.tsx

@@ -3,12 +3,12 @@ import PageLink from 'next/link'
 import React from 'react'
 import { extendableComponent } from '../../Styles'
 import { responsiveVal } from '../../Styles/responsiveVal'
+import { useDateTimeFormat } from '../../hooks'
 
 export type BlogListItemProps = {
   asset: React.ReactNode
   url: string
   date: string
-  locale: string
   title: string
   sx?: SxProps<Theme>
 }
@@ -18,13 +18,9 @@ const parts = ['item', 'date', 'asset', 'title'] as const
 const { classes } = extendableComponent(name, parts)
 
 export function BlogListItem(props: BlogListItemProps) {
-  const { asset, url, date, locale, title, sx = [] } = props
+  const { asset, url, date, title, sx = [] } = props
 
-  const formatter = new Intl.DateTimeFormat(locale, {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-  })
+  const formatter = useDateTimeFormat({ year: 'numeric', month: 'long', day: 'numeric' })
 
   return (
     <Box

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Change Log
 
+## 4.11.1
+
+### Patch Changes
+
+- [#1529](https://github.com/graphcommerce-org/graphcommerce/pull/1529) [`11bca2d2f`](https://github.com/graphcommerce-org/graphcommerce/commit/11bca2d2f7dbb7c5e2827c04eb0db43d4099f2fd) Thanks [@paales](https://github.com/paales)! - issue where the error message of actionCardList was incomplete
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.19
+
+## 4.11.0
+
+### Minor Changes
+
+- [#1524](https://github.com/graphcommerce-org/graphcommerce/pull/1524) [`9ec0338df`](https://github.com/graphcommerce-org/graphcommerce/commit/9ec0338dfe34d37b0f2c24e36ffa6ed13ea1145e) Thanks [@paales](https://github.com/paales)! - feat: Added useDateTimeFormat and useNumberFormat which automatically use the locales from nextjs.
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.18
+
+## 4.10.0
+
+### Minor Changes
+
+- [#1515](https://github.com/graphcommerce-org/graphcommerce/pull/1515) [`371e6cf52`](https://github.com/graphcommerce-org/graphcommerce/commit/371e6cf52916a3b6c44192bd40cc8271bd608832) Thanks [@mikekeehnen](https://github.com/mikekeehnen)! - - Shipping method UI improvements in checkout, like working ripple effect, auto select and other styling changes.
+  - Added new inline button variant
+
+* [#1518](https://github.com/graphcommerce-org/graphcommerce/pull/1518) [`4143483f3`](https://github.com/graphcommerce-org/graphcommerce/commit/4143483f37c038d2bbf218be2685e27a31a35745) Thanks [@mikekeehnen](https://github.com/mikekeehnen)! - New ActionCardListForm implementation for Payment Methods
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.17
+
 ## 4.9.0
 
 ### Minor Changes

package/LayoutOverlay/test/LayoutOverlayDemo.tsx

@@ -1,4 +1,4 @@
-import { useUrlQuery } from '../../useUrlQuery/useUrlQuery'
+import { useUrlQuery } from '../../hooks/useUrlQuery'
 import { LayoutOverlay, LayoutOverlayProps } from '../components/LayoutOverlay'
 
 export type LayoutOverlayState = Omit<

package/Theme/MuiButton.ts

@@ -4,6 +4,7 @@ import { responsiveVal } from '../Styles/responsiveVal'
 declare module '@mui/material/Button/Button' {
   interface ButtonPropsVariantOverrides {
     pill: true
+    inline: true
   }
 }
 
@@ -126,3 +127,64 @@ export const MuiButtonPill: ButtonVariants = [
     }),
   },
 ]
+
+export const MuiButtonInline: ButtonVariants = [
+  {
+    props: { variant: 'inline', color: 'primary' },
+    style: ({ theme }) => ({
+      color: theme.palette.primary.main,
+      '&:hover:not(.Mui-disabled)': { backgroundColor: `${theme.palette.primary.main}30` },
+    }),
+  },
+  {
+    props: { variant: 'inline', color: 'secondary' },
+    style: ({ theme }) => ({
+      color: theme.palette.secondary.main,
+      '&:hover:not(.Mui-disabled)': {
+        backgroundColor: theme.palette.secondary.light,
+      },
+    }),
+  },
+  {
+    props: { variant: 'inline' },
+    style: { textTransform: 'none', fontWeight: 500 },
+  },
+  {
+    props: { variant: 'inline', size: 'small' },
+    style: ({ theme }) => ({
+      margin: `calc(${theme.spacings.xxs} / 2 * -1 )`,
+      padding: '3px 9px',
+
+      '& .MuiLoadingButton-loadingIndicatorEnd': { right: 3 },
+      '& .MuiLoadingButton-loadingIndicatorStart': { left: 9 },
+    }),
+  },
+  {
+    props: { variant: 'inline', size: 'medium' },
+    style: ({ theme }) => ({
+      margin: `calc(${theme.spacings.xxs} * -1 )`,
+      padding: `${responsiveVal(3, 5)} ${responsiveVal(9, 15)}`,
+
+      '& .MuiLoadingButton-loadingIndicatorEnd': { right: responsiveVal(9, 15) },
+      '& .MuiLoadingButton-loadingIndicatorStart': { left: responsiveVal(9, 15) },
+    }),
+  },
+  {
+    props: { variant: 'inline', size: 'large' },
+    style: ({ theme }) => ({
+      margin: `calc(${theme.spacings.xs} * -1)`,
+      padding: `${responsiveVal(8, 10)} ${responsiveVal(12, 22)}`,
+
+      '& .MuiLoadingButton-loadingIndicatorEnd': { right: responsiveVal(16, 24) },
+      '& .MuiLoadingButton-loadingIndicatorStart': { left: responsiveVal(16, 24) },
+    }),
+  },
+  {
+    props: { variant: 'inline', disableRipple: true },
+    style: {
+      '&:hover:not(.Mui-disabled)': {
+        backgroundColor: 'transparent',
+      },
+    },
+  },
+]

package/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useDateTimeFormat'
+export * from './useNumberFormat'
+export * from './useUrlQuery'

package/hooks/useDateTimeFormat.ts

@@ -0,0 +1,10 @@
+import { useRouter } from 'next/router'
+import { useMemo } from 'react'
+
+export type DateTimeFormatProps = Intl.DateTimeFormatOptions
+
+export function useDateTimeFormat(props?: DateTimeFormatProps) {
+  const { locale } = useRouter()
+  const formatter = useMemo(() => new Intl.DateTimeFormat(locale, props), [locale, props])
+  return formatter
+}

package/hooks/useNumberFormat.ts

@@ -0,0 +1,10 @@
+import { useRouter } from 'next/router'
+import { useMemo } from 'react'
+
+export type NumberFormatProps = Intl.NumberFormatOptions
+
+export function useNumberFormat(props?: NumberFormatProps) {
+  const { locale } = useRouter()
+  const formatter = useMemo(() => new Intl.NumberFormat(locale, props), [locale, props])
+  return formatter
+}

package/index.ts

@@ -50,6 +50,6 @@ export * from './Theme'
 export * from './TimeAgo/TimeAgo'
 export * from './ToggleButton/ToggleButton'
 export * from './ToggleButtonGroup/ToggleButtonGroup'
-export * from './useUrlQuery/useUrlQuery'
+export * from './hooks'
 export * from './UspList/UspList'
 export * from './UspList/UspListItem'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.9.0",
+  "version": "4.11.1",
   "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.3",
-    "@graphcommerce/framer-scroller": "2.1.16",
+    "@graphcommerce/framer-scroller": "2.1.19",
     "@graphcommerce/framer-utils": "3.1.4",
     "@graphcommerce/image": "3.1.7",
     "react-is": "^18.1.0",