@graphcommerce/next-ui 4.8.2 → 4.8.3

package/ActionCard/ActionCard.tsx

@@ -9,14 +9,25 @@ export type ActionCardProps = {
   action?: React.ReactNode
   details?: React.ReactNode
   secondaryAction?: React.ReactNode
-  onClick?: (e: FormEvent<HTMLButtonElement>, v: string | number) => void
-  onChange?: (e: FormEvent<HTMLButtonElement>, v: string | number) => void
+  onClick?: (e: FormEvent<HTMLElement>, v: string | number) => void
   selected?: boolean
   hidden?: boolean | (() => boolean)
   value: string | number
   reset?: React.ReactNode
 }
 
+const actionButtonStyles: SxProps = {
+  '& .MuiButton-root': {
+    '&.MuiButton-textSecondary': {
+      padding: '5px',
+      margin: '-5px',
+      '&:hover': {
+        background: 'none',
+      },
+    },
+  },
+}
+
 export function ActionCard(props: ActionCardProps) {
   const {
     title,
@@ -25,7 +36,6 @@ export function ActionCard(props: ActionCardProps) {
     details,
     secondaryAction,
     sx = [],
-    onChange,
     onClick,
     value,
     selected,
@@ -33,52 +43,31 @@ export function ActionCard(props: ActionCardProps) {
     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',
-        },
-      },
-    },
-  }
+  const handleClick = (event: FormEvent<HTMLElement>) => onClick?.(event, value)
 
   return (
     <ButtonBase
-      component='button'
+      component='div'
       className='ActionCard-root'
       onClick={handleClick}
-      onChange={handleChange}
-      value={value}
       sx={[
-        {
+        (theme) => ({
           display: 'grid',
           width: '100%',
           gridTemplateColumns: 'min-content',
-          gridTemplateAreas: `
-        "image title action"
-        "image details secondaryDetails"
-        "image secondaryAction additionalDetails"
-        "additionalContent additionalContent additionalContent"
-        `,
+          gridTemplateAreas: {
+            xs: `
+              "image title action"
+              "image details details"
+              "image secondaryAction additionalDetails"
+              "additionalContent additionalContent additionalContent"
+            `,
+          },
           justifyContent: 'unset',
-        },
-        (theme) => ({
           typography: 'body1',
-          textAlign: 'left',
+          // textAlign: 'left',
           background: theme.palette.background.paper,
-          padding: `calc(${theme.spacings.xs} + 1px)`,
+          padding: `calc(${theme.spacings.xxs} + 1px) calc(${theme.spacings.xs} + 1px)`,
           columnGap: theme.spacings.xxs,
           border: `1px solid ${theme.palette.divider}`,
           borderBottomColor: `transparent`,
@@ -102,7 +91,7 @@ export function ActionCard(props: ActionCardProps) {
             borderTopRightRadius: theme.shape.borderRadius,
             borderBottomLeftRadius: theme.shape.borderRadius,
             borderBottomRightRadius: theme.shape.borderRadius,
-            padding: theme.spacings.xs,
+            padding: `${theme.spacings.xxs} ${theme.spacings.xs}`,
           })),
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}

package/ActionCard/ActionCardList.tsx

@@ -1,6 +1,8 @@
-import { Box } from '@mui/material'
+import { Alert, Box, FormHelperText } from '@mui/material'
+import { AnimatePresence } from 'framer-motion'
 import React from 'react'
 import { isFragment } from 'react-is'
+import { AnimatedRow } from '../AnimatedRow/AnimatedRow'
 
 type MultiSelect = {
   multiple: true
@@ -20,6 +22,7 @@ export type ActionCardListProps<SelectOrMulti = MultiSelect | Select> = {
   children?: React.ReactNode
   required?: boolean
   error?: boolean
+  errorMessage?: string
 } & SelectOrMulti
 
 function isMulti(props: ActionCardListProps): props is ActionCardListProps<MultiSelect> {
@@ -33,7 +36,7 @@ function isValueSelected(value: string, candidate: string | string[]) {
 }
 
 export function ActionCardList(props: ActionCardListProps) {
-  const { children, required, value, error = false } = props
+  const { children, required, value, error = false, errorMessage } = props
 
   const handleChange = isMulti(props)
     ? (event: React.MouseEvent<HTMLElement, MouseEvent>, buttonValue: string) => {
@@ -70,15 +73,15 @@ export function ActionCardList(props: ActionCardListProps) {
               paddingLeft: theme.spacings.xs,
               paddingRight: theme.spacings.xs,
             },
-            '& .ActionCard-root:first-of-type': {
+            '& > div:first-of-type.ActionCard-root': {
               borderTop: 2,
               borderTopColor: 'error.main',
-              paddingTop: theme.spacings.xs,
+              paddingTop: theme.spacings.xxs,
             },
-            '& .ActionCard-root:last-of-type': {
+            '& > div:last-of-type.ActionCard-root': {
               borderBottom: 2,
               borderBottomColor: 'error.main',
-              paddingBottom: theme.spacings.xs,
+              paddingBottom: theme.spacings.xxs,
             },
           })),
       ]}
@@ -105,6 +108,15 @@ export function ActionCardList(props: ActionCardListProps) {
               : child.props.selected,
         })
       })}
+      {error && (
+        <Alert
+          severity='error'
+          variant='filled'
+          sx={{ borderStartStartRadius: 0, borderStartEndRadius: 0 }}
+        >
+          {errorMessage}
+        </Alert>
+      )}
     </Box>
   )
 }

package/ActionCard/ActionCardListForm.tsx

@@ -1,40 +1,47 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { Controller, ControllerProps } from '@graphcommerce/react-hook-form'
-import { Trans } from '@lingui/react'
-import { Button } from '@mui/material'
 import React from 'react'
-import { ActionCard, ActionCardProps } from './ActionCard'
+import { ActionCardProps } from './ActionCard'
 import { ActionCardList, ActionCardListProps } from './ActionCardList'
 
-export type ActionCardRenderProps = Pick<
-  ActionCardProps,
-  'action' | 'reset' | 'selected' | 'hidden' | 'value' | 'onClick' | 'onChange'
->
+export type ActionCardItemBase = Pick<ActionCardProps, 'value'>
 
-export type ActionCardItem = Omit<
-  ActionCardProps,
-  'action' | 'reset' | 'selected' | 'hidden' | 'onClick' | 'onChange'
->
+export type ActionCardItemRenderer<T> = Pick<ActionCardProps, 'selected' | 'hidden' | 'value'> & {
+  onReset: React.MouseEventHandler<HTMLButtonElement>
+} & T
 
-type ActionCardListFormProps = Omit<ActionCardListProps, 'value'> &
+export type ActionCardListFormProps<T extends ActionCardItemBase> = Omit<
+  ActionCardListProps,
+  'value'
+> &
   Omit<ControllerProps<any>, 'render'> & {
-    items: ActionCardItem[]
-    render?: React.VFC<ActionCardRenderProps>
+    items: T[]
+    render: React.VFC<ActionCardItemRenderer<T>>
   }
 
-export function ActionCardListForm(props: ActionCardListFormProps) {
-  const { required, rules, items, render: RenderItem = ActionCard } = props
+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>>
 
   return (
     <Controller
       {...props}
-      rules={{ required, ...rules }}
+      control={control}
+      name={name}
+      rules={{
+        required,
+        ...rules,
+        validate: (v) => (v ? true : 'Please select a shipping address'),
+      }}
       render={({ field: { onChange, value }, fieldState, formState }) => (
         <ActionCardList
           required
           value={value}
           onChange={(_, incomming) => onChange(incomming)}
           error={formState.isSubmitted && !!fieldState.error}
+          errorMessage={errorMessage}
         >
           {items.map((item) => (
             <RenderItem
@@ -43,24 +50,10 @@ export function ActionCardListForm(props: ActionCardListFormProps) {
               value={item.value}
               selected={value === item.value}
               hidden={!!value && value !== item.value}
-              action={
-                <Button disableRipple variant='text' color='secondary'>
-                  <Trans id='Select' />
-                </Button>
-              }
-              reset={
-                <Button
-                  disableRipple
-                  variant='text'
-                  color='secondary'
-                  onClick={(e) => {
-                    e.preventDefault()
-                    onChange(null)
-                  }}
-                >
-                  <Trans id='Change' />
-                </Button>
-              }
+              onReset={(e) => {
+                e.preventDefault()
+                onChange(null)
+              }}
             />
           ))}
         </ActionCardList>

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Change Log
 
+## 4.8.3
+
+### Patch Changes
+
+- [#1487](https://github.com/graphcommerce-org/graphcommerce/pull/1487) [`afc67103d`](https://github.com/graphcommerce-org/graphcommerce/commit/afc67103d0e00583e274465036fd287537f95e79) Thanks [@paales](https://github.com/paales)! - When additing an additional breakpoint it would throw a typescript error
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.14
+
 ## 4.8.2
 
 ### Patch Changes

package/Theme/themeDefaults.ts

@@ -1,10 +1,9 @@
-import { BreakpointsOptions, experimental_sx, SxProps, Theme } from '@mui/material'
+import { experimental_sx, SxProps, Theme } from '@mui/material'
 import { Shadows } from '@mui/material/styles/shadows'
-import type { SetRequired } from 'type-fest'
 
 // https://material.io/design/environment/elevation.html#default-elevations
 
-const breakpoints: SetRequired<BreakpointsOptions, 'values'> = {
+const breakpoints = {
   values: {
     xs: 0,
     sm: 600,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.8.2",
+  "version": "4.8.3",
   "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.2",
-    "@graphcommerce/framer-scroller": "2.1.13",
+    "@graphcommerce/framer-scroller": "2.1.14",
     "@graphcommerce/framer-utils": "3.1.3",
     "@graphcommerce/image": "3.1.6",
     "react-is": "^17.0.0",