progress

graphcommerce-org · Jan 16, 2024 · d985239 · d985239
1 parent 2b8791d
commit d985239
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 6 deletions.
diff --git a/packages/magento-cart-items/components/CartItemActionCard/CartItemActionCard.tsx b/packages/magento-cart-items/components/CartItemActionCard/CartItemActionCard.tsx
@@ -30,7 +30,7 @@ const typographySizes = {
 }
 
 export function CartItemActionCard(props: CartItemActionCardProps) {
-  const { cartItem, sx = [], size = 'large', readOnly = false, ...rest } = props
+  const { cartItem, sx = [], size = 'responsive', readOnly = false, ...rest } = props
   const { uid, quantity, prices, errors, product } = cartItem
   const { name, thumbnail, url_key } = product
 
@@ -84,7 +84,14 @@ export function CartItemActionCard(props: CartItemActionCardProps) {
             justifyContent: 'start',
           },
           '& .ActionCard-price': {
-            typography: typographySizes[size],
+            typography:
+              size === 'responsive'
+                ? {
+                    xs: typographySizes.small,
+                    md: typographySizes.medium,
+                    lg: typographySizes.large,
+                  }
+                : typographySizes[size],
             pr: readOnly ? 0 : theme.spacings.xs,
             mb: { xs: 0.5, sm: 0 },
           },
@@ -97,13 +104,35 @@ export function CartItemActionCard(props: CartItemActionCardProps) {
             layout='fill'
             src={thumbnail?.url}
             sx={{
-              width: productImageSizes[size],
-              height: productImageSizes[size],
+              width:
+                size === 'responsive'
+                  ? {
+                      xs: productImageSizes.small,
+                      md: productImageSizes.medium,
+                      lg: productImageSizes.large,
+                    }
+                  : productImageSizes[size],
+              height:
+                size === 'responsive'
+                  ? {
+                      xs: productImageSizes.small,
+                      md: productImageSizes.medium,
+                      lg: productImageSizes.large,
+                    }
+                  : productImageSizes[size],
               display: 'block',
               borderRadius: 1,
               objectFit: 'contain',
             }}
-            sizes={productImageSizes[size]}
+            sizes={
+              size === 'responsive'
+                ? {
+                    xs: productImageSizes.small,
+                    md: productImageSizes.medium,
+                    lg: productImageSizes.large,
+                  }
+                : productImageSizes[size]
+            }
           />
         )
       }

diff --git a/packages/next-ui/ActionCard/ActionCard.tsx b/packages/next-ui/ActionCard/ActionCard.tsx
@@ -13,7 +13,7 @@ import { extendableComponent, responsiveVal } from '../Styles'
 import { breakpointVal } from '../Styles/breakpointVal'
 
 type Variants = 'outlined' | 'default'
-type Size = 'large' | 'medium' | 'small'
+type Size = 'large' | 'medium' | 'small' | 'responsive'
 type Color = 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning'
 type Layout = 'inline' | 'grid' | 'list' | 'stack'
 
@@ -140,6 +140,12 @@ export function ActionCard(props: ActionCardProps) {
             py: responsiveVal(12, 14),
             display: 'block',
           },
+          '&.sizeResponsive': {
+            px: { xs: responsiveVal(8, 12), md: responsiveVal(10, 14), lg: responsiveVal(12, 16) },
+            py: { xs: responsiveVal(4, 6), md: responsiveVal(10, 12), lg: responsiveVal(12, 14) },
+            display: { xs: 'flex', md: 'block', lg: 'block' },
+            typography: { xs: 'body2', md: 'body2', lg: '' },
+          },
 
           '&.variantDefault': {
             position: 'relative',
@@ -186,6 +192,14 @@ export function ActionCard(props: ActionCardProps) {
                 mb: { xs: '-5px', sm: '-7px', md: '-8px' },
               },
             },
+            // PR QUESTION WHAT TO DO HERE
+            '&.sizeResponsive': {
+              mt: { xs: '3px', sm: '5px', md: '7px', lg: '8px' },
+              mb: { xs: '4px', sm: '6px', md: '8px', lg: '9px' },
+              '&::after': {
+                mb: { xs: '-3px', sm: '-5px', md: '-7px', lg: '-8px' },
+              },
+            },
           },
 
           '&.variantOutlined': {