Updating Chakra UI theme, Navigation font sizes, Logo Flex to fix spa…

…cing, Header to remove extra block margins, register button size on mobile and the Header storybook stories.
Sitecore · Apr 2, 2024 · 8542a33 · 8542a33
1 parent 74ccf70
commit 8542a33
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 7 deletions.
diff --git a/src/Project/Sugcon2024/Sugcon/src/Theme.ts b/src/Project/Sugcon2024/Sugcon/src/Theme.ts
@@ -27,6 +27,12 @@ const Button = defineStyleConfig({
       px: '42px',
       py: '24px',
     },
+    navButtonLinkSm: {
+      fontSize: '22px',
+    },
+    navButtonLinkLg: {
+      fontSize: '18px',
+    },
   },
   // Two variants: outline and solid
   variants: {
@@ -81,6 +87,9 @@ const Link = defineStyleConfig({
   },
   sizes: {
     sm: {
+      fontSize: '22px',
+    },
+    md: {
       fontSize: '16px',
     },
     lg: {
@@ -97,7 +106,6 @@ const Link = defineStyleConfig({
       fontSize: '16px',
     },
     navLink: {
-      fontSize: '18px',
       fontWeight: 'bold',
       color: 'sugcon.800',
       textDecoration: 'none',

diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Logo.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Logo.tsx
@@ -9,7 +9,7 @@ import {
   useSitecoreContext,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import clsx from 'clsx';
-import { Box } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 
 interface Fields {
   Image: ImageField;
@@ -72,15 +72,15 @@ export const Default = (props: LogoProps): JSX.Element => {
         px="0"
         mr="15px"
       >
-        <Box w={{ base: 155, lg: 190 }}>
+        <Flex w={{ base: 155, lg: 190 }}>
           {sitecoreContext?.pageState === 'edit' || !props?.fields?.TargetUrl?.value?.href ? (
             <Image />
           ) : (
             <JssLink field={props?.fields?.TargetUrl}>
               <Image />
             </JssLink>
           )}
-        </Box>
+        </Flex>
         <Text
           tag="span"
           className="image-caption field-imagecaption"

diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Navigation.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Navigation.tsx
@@ -194,6 +194,7 @@ const NavigationItemWithChildren = ({ element, pageEditing }: NavigationItemProp
       <Button
         {...buttonProps}
         variant="navButtonLink"
+        size={{ base: 'navButtonLinkSm', lg: 'navButtonLinkLg' }}
         mr={{ base: '-23px', lg: '0' }}
         rightIcon={isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
         className={clsx(element?.Styles)}
@@ -231,6 +232,7 @@ const NavigationItem = ({ element, pageEditing }: NavigationItemProps): JSX.Elem
       field={getLinkField(element)}
       editable={pageEditing}
       variant="navLink"
+      size={{ base: 'sm', lg: 'lg' }}
     >
       {getNavigationText(element)}
     </Link>
@@ -247,6 +249,7 @@ const renderChildNavigationItem = ({
     <Link
       as={SitecoreLink}
       variant="navLink"
+      size={{ base: 'sm', lg: 'lg' }}
       className={clsx(element?.Styles)}
       field={getLinkField(element)}
       editable={pageEditing}

diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Templates/Header.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Templates/Header.tsx
@@ -21,7 +21,7 @@ export const Default = ({ route }: HeaderDefaultProps): JSX.Element => {
       shadow="xl"
       minH={{ base: HeaderHeights.Mobile, lg: HeaderHeights.Desktop }}
     >
-      <LayoutFlex align="center" flexGrow="1">
+      <LayoutFlex my="0" align="center" flexGrow="1">
         {route && <Placeholder name="headless-header" rendering={route} />}
       </LayoutFlex>
     </Flex>

diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Templates/LayoutConstants.ts b/src/Project/Sugcon2024/Sugcon/src/components/Templates/LayoutConstants.ts
@@ -22,8 +22,8 @@ type SizeConfig = {
 };
 
 export const responsiveButtonSizeConfig: SizeConfig = {
-  base: 'sm',
-  md: 'sm',
+  base: 'lg',
+  md: 'lg',
   lg: 'sm',
   xl: 'lg',
 };
diff --git a/src/Project/Sugcon2024/Sugcon/src/stories/templates/Header.stories.tsx b/src/Project/Sugcon2024/Sugcon/src/stories/templates/Header.stories.tsx
@@ -40,6 +40,10 @@ const route = {
               componentName: 'Logo',
               dataSource: '{20C73871-7E77-4F6E-9D35-C518AB120F44}',
               ...Logo.args,
+              fields: {
+                ...Logo.args.fields,
+                ImageCaption: null,
+              },
             },
             {
               ...PrimaryNavigation.args.rendering,