From 56b13e25e293f42a7ff93bac72ddea521591e0ba Mon Sep 17 00:00:00 2001 From: Carlo Carels Date: Tue, 5 Dec 2023 14:30:10 +0100 Subject: [PATCH 1/5] chore(GCOM-1164): Wrap the logo in a div on the homepage to prevent redirection. --- packages/next-ui/LayoutParts/Logo.tsx | 30 +++++++++++++++++++++++---- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/packages/next-ui/LayoutParts/Logo.tsx b/packages/next-ui/LayoutParts/Logo.tsx index 4ff874dc2c..aae8ad38f4 100644 --- a/packages/next-ui/LayoutParts/Logo.tsx +++ b/packages/next-ui/LayoutParts/Logo.tsx @@ -5,6 +5,7 @@ import { SxProps, Theme, unstable_composeClasses as composeClasses, + Typography, } from '@mui/material' import { useRouter } from 'next/router' import { forwardRef } from 'react' @@ -63,13 +64,34 @@ export const Logo = forwardRef((props, ref) => { /> ) - return router.asPath.split('?')[0] === '/' ? ( - + const shouldRedirect = router.asPath.split('?')[0] !== href + + return shouldRedirect ? ( + {img} ) : ( - + ({ + height: '100%', + width: 'max-content', + display: 'flex', + alignItems: 'center', + margin: '0 auto', + justifyContent: 'center', + pointerEvents: 'all', + [theme.breakpoints.up('md')]: { + display: 'flex', + margin: 'unset', + justifyContent: 'left', + }, + }), + ...(Array.isArray(sx) ? sx : [sx]), + ]} + > {img} - + ) }) From a057d6274e1d427e631ab3fad7a16078315103b8 Mon Sep 17 00:00:00 2001 From: Carlo Carels Date: Tue, 5 Dec 2023 14:34:40 +0100 Subject: [PATCH 2/5] chore: add changeset --- .changeset/calm-bees-care.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/calm-bees-care.md diff --git a/.changeset/calm-bees-care.md b/.changeset/calm-bees-care.md new file mode 100644 index 0000000000..20bbd65b8b --- /dev/null +++ b/.changeset/calm-bees-care.md @@ -0,0 +1,5 @@ +--- +'@graphcommerce/next-ui': patch +--- + +Wrap the logo in a div on the homepage to prevent redirection. From 516bfae8324d1e2ddd4bfeb42365c27b488f5cfe Mon Sep 17 00:00:00 2001 From: Carlo Carels Date: Tue, 5 Dec 2023 15:58:47 +0100 Subject: [PATCH 3/5] refactor: simplify code --- packages/next-ui/LayoutParts/Logo.tsx | 50 ++++++++------------------- 1 file changed, 14 insertions(+), 36 deletions(-) diff --git a/packages/next-ui/LayoutParts/Logo.tsx b/packages/next-ui/LayoutParts/Logo.tsx index aae8ad38f4..6afacdc419 100644 --- a/packages/next-ui/LayoutParts/Logo.tsx +++ b/packages/next-ui/LayoutParts/Logo.tsx @@ -23,12 +23,7 @@ const getLogoUtilityClass = (slot: string) => generateUtilityClass(name, slot) const useUtilityClasses = ({ classes }: LogoClassProps) => composeClasses({ logo: ['logo'], parent: ['parent'] }, getLogoUtilityClass, classes) -/** Creating styled components */ -const LogoContainer = styled(NextLink, { - name, - slot: 'parent', - overridesResolver: (_props, styles) => styles.parent, -})(({ theme }) => ({ +const commonLogoStyles: SxProps = { height: '100%', width: 'max-content', display: 'flex', @@ -36,12 +31,13 @@ const LogoContainer = styled(NextLink, { margin: '0 auto', justifyContent: 'center', pointerEvents: 'all', - [theme.breakpoints.up('md')]: { - display: 'flex', - margin: 'unset', - justifyContent: 'left', - }, -})) +} + +const LogoContainer = styled(NextLink, { + name, + slot: 'parent', + overridesResolver: (_props, styles) => styles.parent, +})(commonLogoStyles) export type LogoProps = { href?: `/${string}` @@ -52,7 +48,6 @@ export type LogoProps = { export const Logo = forwardRef((props, ref) => { const { href = '/', image, sx } = props const router = useRouter() - const classes = useUtilityClasses(props) const img = ( @@ -66,30 +61,13 @@ export const Logo = forwardRef((props, ref) => { const shouldRedirect = router.asPath.split('?')[0] !== href - return shouldRedirect ? ( - - {img} - - ) : ( + return ( ({ - height: '100%', - width: 'max-content', - display: 'flex', - alignItems: 'center', - margin: '0 auto', - justifyContent: 'center', - pointerEvents: 'all', - [theme.breakpoints.up('md')]: { - display: 'flex', - margin: 'unset', - justifyContent: 'left', - }, - }), - ...(Array.isArray(sx) ? sx : [sx]), - ]} + component={shouldRedirect ? LogoContainer : 'div'} + href={shouldRedirect ? href : undefined} + ref={ref} + sx={shouldRedirect ? sx : [...(Array.isArray(sx) ? sx : [sx]), commonLogoStyles]} + className={classes.parent} > {img} From cc172fb98e6ce4fb48dca94a84b3f9aa75a37fa4 Mon Sep 17 00:00:00 2001 From: Carlo Carels Date: Tue, 5 Dec 2023 16:20:04 +0100 Subject: [PATCH 4/5] refactor: use Box instead of Typography component --- packages/next-ui/LayoutParts/Logo.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/next-ui/LayoutParts/Logo.tsx b/packages/next-ui/LayoutParts/Logo.tsx index 6afacdc419..99975a4cbd 100644 --- a/packages/next-ui/LayoutParts/Logo.tsx +++ b/packages/next-ui/LayoutParts/Logo.tsx @@ -5,7 +5,7 @@ import { SxProps, Theme, unstable_composeClasses as composeClasses, - Typography, + Box, } from '@mui/material' import { useRouter } from 'next/router' import { forwardRef } from 'react' @@ -62,7 +62,7 @@ export const Logo = forwardRef((props, ref) => { const shouldRedirect = router.asPath.split('?')[0] !== href return ( - ((props, ref) => { className={classes.parent} > {img} - + ) }) From 6edcf272a9be203ff5b4a37cff4a04f4ea1671e3 Mon Sep 17 00:00:00 2001 From: Carlo Carels Date: Fri, 8 Dec 2023 14:25:51 +0100 Subject: [PATCH 5/5] refactor: always apply the commonLogoStyles --- packages/next-ui/LayoutParts/Logo.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/next-ui/LayoutParts/Logo.tsx b/packages/next-ui/LayoutParts/Logo.tsx index 99975a4cbd..2da4aedf4f 100644 --- a/packages/next-ui/LayoutParts/Logo.tsx +++ b/packages/next-ui/LayoutParts/Logo.tsx @@ -37,7 +37,7 @@ const LogoContainer = styled(NextLink, { name, slot: 'parent', overridesResolver: (_props, styles) => styles.parent, -})(commonLogoStyles) +})() export type LogoProps = { href?: `/${string}` @@ -66,7 +66,7 @@ export const Logo = forwardRef((props, ref) => { component={shouldRedirect ? LogoContainer : 'div'} href={shouldRedirect ? href : undefined} ref={ref} - sx={shouldRedirect ? sx : [...(Array.isArray(sx) ? sx : [sx]), commonLogoStyles]} + sx={[...(Array.isArray(sx) ? sx : [sx]), commonLogoStyles]} className={classes.parent} > {img}