@graphcommerce/magento-cart 4.1.2 → 4.1.3

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Change Log
 
+## 4.1.3
+
+### Patch Changes
+
+- [#1292](https://github.com/ho-nl/m2-pwa/pull/1292)
+  [`5a1ba9e66`](https://github.com/ho-nl/m2-pwa/commit/5a1ba9e664abbac89c4f5f71f7d6d6ed1aefa5c0)
+  Thanks [@paales](https://github.com/paales)! - Renamed SvgIcon to IconSvg to prevent collisions
+  with MUI
+
+* [#1292](https://github.com/ho-nl/m2-pwa/pull/1292)
+  [`63f9b56eb`](https://github.com/ho-nl/m2-pwa/commit/63f9b56eb68ba790567ff1427e599fd2c3c8f1ee)
+  Thanks [@paales](https://github.com/paales)! - added responsive size to the Fab component
+
+* Updated dependencies
+  [[`5a1ba9e66`](https://github.com/ho-nl/m2-pwa/commit/5a1ba9e664abbac89c4f5f71f7d6d6ed1aefa5c0),
+  [`990df655b`](https://github.com/ho-nl/m2-pwa/commit/990df655b73b469718d6cb5837ee65dfe2ad6a1d),
+  [`63f9b56eb`](https://github.com/ho-nl/m2-pwa/commit/63f9b56eb68ba790567ff1427e599fd2c3c8f1ee)]:
+  - @graphcommerce/ecommerce-ui@1.0.2
+  - @graphcommerce/magento-customer@4.1.3
+  - @graphcommerce/next-ui@4.2.0
+
 ## 4.1.2
 
 ### Patch Changes

package/components/ApolloCartError/ApolloCartErrorFullPage.tsx

@@ -1,6 +1,6 @@
 import { ApolloErrorFullPage, ApolloErrorFullPageProps } from '@graphcommerce/ecommerce-ui'
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
-import { iconSadFace, SvgIcon } from '@graphcommerce/next-ui'
+import { iconSadFace, IconSvg } from '@graphcommerce/next-ui'
 import { Button } from '@mui/material'
 import { useClearCurrentCartId } from '../../hooks/useClearCurrentCartId'
 
@@ -16,7 +16,7 @@ export function ApolloCartErrorFullPage(props: ApolloCartErrorFullPageProps) {
   return (
     <ApolloErrorFullPage
       error={error}
-      icon={<SvgIcon src={iconSadFace} size='xxl' />}
+      icon={<IconSvg src={iconSadFace} size='xxl' />}
       button={action}
       {...passedProps}
     />

package/components/CartFab/CartFab.tsx

@@ -1,10 +1,10 @@
 import {
   extendableComponent,
   iconShoppingBag,
-  responsiveVal,
   DesktopHeaderBadge,
-  SvgIcon,
+  IconSvg,
   useScrollY,
+  useFabSize,
 } from '@graphcommerce/next-ui'
 import { t } from '@lingui/macro'
 import { alpha, Fab, FabProps, NoSsr, styled, useTheme, Box, SxProps, Theme } from '@mui/material'
@@ -43,8 +43,8 @@ function CartFabContent(props: CartFabContentProps) {
   const paper1 = alpha(theme2.palette.background.paper, 1)
   const backgroundColor = useTransform(scrollY, [0, 10], [paper0, paper1])
 
-  const cartIcon = icon ?? <SvgIcon src={iconShoppingBag} size='large' />
-  const fabIconSize = responsiveVal(42, 56) // @todo generalize this
+  const cartIcon = icon ?? <IconSvg src={iconShoppingBag} size='large' />
+  const fabIconSize = useFabSize('responsive')
 
   return (
     <Box
@@ -60,11 +60,9 @@ function CartFabContent(props: CartFabContentProps) {
           {...fabProps}
           aria-label={t`Cart`}
           color='inherit'
-          size='large'
+          size='responsive'
           style={{ backgroundColor }}
           sx={(theme) => ({
-            width: fabIconSize,
-            height: fabIconSize,
             [theme.breakpoints.down('md')]: {
               backgroundColor: `${theme.palette.background.paper} !important`,
             },

package/components/CartItemSummary/index.tsx

@@ -5,7 +5,7 @@ import {
   iconChevronRight,
   responsiveVal,
   SectionContainer,
-  SvgIcon,
+  IconSvg,
   extendableComponent,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
@@ -83,7 +83,7 @@ export default function CartItemSummary(props: OrderSummaryProps) {
                 left: 8,
               }}
             >
-              <SvgIcon src={iconChevronLeft} />
+              <IconSvg src={iconChevronLeft} />
             </ScrollerButton>
             <Box className={classes.scrollerContainer} sx={{ padding: '1px' }}>
               <Scroller className={classes.scroller}>
@@ -125,7 +125,7 @@ export default function CartItemSummary(props: OrderSummaryProps) {
                 right: 8,
               }}
             >
-              <SvgIcon src={iconChevronRight} />
+              <IconSvg src={iconChevronRight} />
             </ScrollerButton>
           </ScrollerProvider>
         </Box>

package/components/CartStartCheckout/CartStartCheckout.tsx

@@ -1,5 +1,5 @@
 import { Money } from '@graphcommerce/magento-store'
-import { iconChevronRight, SvgIcon, extendableComponent } from '@graphcommerce/next-ui'
+import { iconChevronRight, IconSvg, extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
 import { Box, Button, SxProps, Theme } from '@mui/material'
 import PageLink from 'next/link'
@@ -34,7 +34,7 @@ export default function CartStartCheckout(props: CartStartCheckoutProps) {
           color='secondary'
           size='large'
           className={classes.checkoutButton}
-          endIcon={<SvgIcon src={iconChevronRight} />}
+          endIcon={<IconSvg src={iconChevronRight} />}
           disabled={!hasTotals}
           sx={(theme) => ({
             marginTop: theme.spacings.md,

package/components/EmptyCart/EmptyCart.tsx

@@ -1,4 +1,4 @@
-import { FullPageMessage, SvgIcon, iconShoppingBag } from '@graphcommerce/next-ui'
+import { FullPageMessage, IconSvg, iconShoppingBag } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
 import { Button } from '@mui/material'
 import Link from 'next/link'
@@ -11,7 +11,7 @@ export default function EmptyCart(props: EmptyCartProps) {
   return (
     <FullPageMessage
       title={<Trans>Your cart is empty</Trans>}
-      icon={<SvgIcon src={iconShoppingBag} size='xxl' />}
+      icon={<IconSvg src={iconShoppingBag} size='xxl' />}
       button={
         <Link href='/' passHref>
           <Button variant='pill' color='secondary' size='large'>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.1.2",
+  "version": "4.1.3",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,15 +18,15 @@
     "@playwright/test": "^1.19.1"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "^1.0.1",
+    "@graphcommerce/ecommerce-ui": "^1.0.2",
     "@graphcommerce/framer-next-pages": "^3.1.0",
     "@graphcommerce/framer-scroller": "^2.0.3",
     "@graphcommerce/graphql": "^3.0.3",
     "@graphcommerce/image": "^3.1.0",
-    "@graphcommerce/magento-customer": "^4.1.2",
+    "@graphcommerce/magento-customer": "^4.1.3",
     "@graphcommerce/magento-graphql": "^3.0.3",
     "@graphcommerce/magento-store": "^4.0.3",
-    "@graphcommerce/next-ui": "^4.1.2",
+    "@graphcommerce/next-ui": "^4.2.0",
     "@graphcommerce/react-hook-form": "^3.0.3"
   },
   "peerDependencies": {