[B2BP-692] - Header and MegaHeader Ui fix (#397)

* commit ui fix * commit megaHeader fix * commit megaHeader href fix * commit changeset * commit review changes * remove unusued className
pagopa · Aug 2, 2024 · cabf6e8 · cabf6e8
1 parent ad16bb5
commit cabf6e8
Show file tree

Hide file tree

Showing 10 changed files with 136 additions and 87 deletions.
diff --git a/.changeset/slimy-garlics-eat.md b/.changeset/slimy-garlics-eat.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": minor
+---
+
+Fix Ui bugs and MegaHeader href
diff --git a/...extjs-website/react-components/components/Header/helpers/Header.DesktopDrawer.helpers.tsx b/...extjs-website/react-components/components/Header/helpers/Header.DesktopDrawer.helpers.tsx
@@ -59,9 +59,14 @@ export default function DesktopDrawer({
           justifyContent='space-between'
           alignItems='center'
         >
-          <p style={{ fontWeight: '600', fontSize: '1.5em' }}>
+          <Typography
+            gutterBottom
+            variant='body1'
+            component='div'
+            style={{ fontWeight: '600', fontSize: '1.5em' }}
+          >
             {drawerMenuTitle}
-          </p>
+          </Typography>
           <IconButton onClick={onClose}>
             <CloseIcon />
           </IconButton>
@@ -89,7 +94,7 @@ export default function DesktopDrawer({
           ))}
         </div>
       </Box>
-      <div style={{ width: '100%', padding: '1em' }}>
+      <div style={{ padding: '1em' }}>
         <div
           style={{
             backgroundColor: 'white',

diff --git a/apps/nextjs-website/react-components/components/MegaHeader/MegaHeader.Helpers.ts b/apps/nextjs-website/react-components/components/MegaHeader/MegaHeader.Helpers.ts
@@ -1,4 +1,4 @@
-import { AppBar, Toolbar, Typography, Button, Box } from '@mui/material';
+import { AppBar, Toolbar, Typography, Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
 export const Container = styled(AppBar)({
@@ -144,27 +144,6 @@ export const DropdownTitle = styled(Typography)(({ theme }) => ({
   },
 }));
 
-export const ButtonStyled = styled(Button)({
-  backgroundColor: '#0B3EE3',
-  color: 'white',
-  padding: '10px 20px',
-  borderRadius: 5,
-  textDecoration: 'none',
-  whiteSpace: 'nowrap',
-  '&:hover': {
-    backgroundColor: '#005bb5',
-  },
-  '&:focus': {
-    backgroundColor: '#005bb5',
-  },
-  '&:active': {
-    backgroundColor: '#004999',
-  },
-  '&:visited': {
-    color: 'white',
-  },
-});
-
 export const MobileMenu = styled(Box)({
   display: 'none',
   position: 'fixed',
@@ -242,13 +221,10 @@ export const MobileMenu = styled(Box)({
     },
   },
   '& .mobileMenuSecondaryItem': {
-    fontSize: 14,
+    fontSize: 12,
     fontWeight: 400,
     color: '#555C70',
     paddingLeft: '30px',
     display: 'block',
   },
-  '& .mobileMenuButton': {
-    margin: '30px',
-  },
 });
diff --git a/apps/nextjs-website/react-components/components/MegaHeader/MegaHeader.tsx b/apps/nextjs-website/react-components/components/MegaHeader/MegaHeader.tsx
@@ -87,7 +87,7 @@ const MegaHeader = (props: MegaHeaderProps) => {
                   backgroundColor: '#0B3EE3',
                   color: 'white',
                   padding: '10px 20px',
-                  borderRadius: 5,
+                  borderRadius: 2,
                   textDecoration: 'none',
                   whiteSpace: 'nowrap',
                   '&:hover': {
@@ -153,11 +153,11 @@ const MegaHeader = (props: MegaHeaderProps) => {
                                 .map((item, itemIndex) => (
                                   <a
                                     key={itemIndex}
-                                    href='#'
-                                    className={`menuSecondaryItem ${activeItem === item ? 'active' : ''}`}
-                                    onClick={() => setActiveItem(item)}
+                                    href={item.href}
+                                    className={`menuSecondaryItem ${activeItem === item.label ? 'active' : ''}`}
+                                    onClick={() => setActiveItem(item.label)}
                                   >
-                                    {item}
+                                    {item.label}
                                     <ArrowForwardIcon className='arrowIcon' />
                                   </a>
                                 ))}
@@ -203,11 +203,11 @@ const MegaHeader = (props: MegaHeaderProps) => {
                   {submenu.items.map((item, itemIndex) => (
                     <a
                       key={itemIndex}
-                      href='#'
-                      className={`mobileMenuSecondaryItem ${activeItem === item ? 'active' : ''}`}
-                      onClick={() => setActiveItem(item)}
+                      href={item.href}
+                      className={`mobileMenuSecondaryItem ${activeItem === item.label ? 'active' : ''}`}
+                      onClick={() => setActiveItem(item.label)}
                     >
-                      {item}
+                      {item.label}
                       <ArrowForwardIcon className='arrowIcon' />
                     </a>
                   ))}
@@ -218,14 +218,14 @@ const MegaHeader = (props: MegaHeaderProps) => {
         ))}
         {ctaButton && <CtaButtons ctaButtons={[{
           ...ctaButton,
-          className: 'mobileMenuButton',
           sx: {
             backgroundColor: '#0B3EE3',
             color: 'white',
             padding: '10px 20px',
-            borderRadius: 5,
+            borderRadius: 2,
             textDecoration: 'none',
             whiteSpace: 'nowrap',
+            margin: '30px',
             '&:hover': {
               backgroundColor: '#005bb5',
             },

diff --git a/apps/nextjs-website/react-components/types/MegaHeader/MegaHeader.types.ts b/apps/nextjs-website/react-components/types/MegaHeader/MegaHeader.types.ts
@@ -1,8 +1,14 @@
-import { CtaButtonProps } from "../common/Common.types";
+import { CtaButtonProps } from '../common/Common.types';
 
 export interface MegaMenuItem {
   primary: string;
-  secondary: { title: string; items: string[] }[];
+  secondary: {
+    title: string;
+    items: {
+      label: string;
+      href: string;
+    }[];
+  }[];
 }
 
 export interface MegaHeaderProps {

diff --git a/apps/nextjs-website/src/components/Header.tsx b/apps/nextjs-website/src/components/Header.tsx
@@ -73,8 +73,10 @@ const makeMegaHeaderProps = ({
     primary: link.label,
     secondary: link.sublinkGroups.map((sublinkGroup) => ({
       title: sublinkGroup.title,
-      // TODO: Update the line below to pass label and (page slug + section) as href when href will be implemented into MegaHeader
-      items: sublinkGroup.sublinks.map((sublink) => sublink.label),
+      items: sublinkGroup.sublinks.map((sublink) => ({
+        label: sublink.label,
+        href: sublink.page.data.attributes.slug,
+      })),
     })),
   })),
 });

diff --git a/apps/nextjs-website/src/components/MegaHeader.tsx b/apps/nextjs-website/src/components/MegaHeader.tsx
diff --git a/apps/nextjs-website/src/components/PageSection/PageSection.tsx b/apps/nextjs-website/src/components/PageSection/PageSection.tsx
@@ -10,7 +10,6 @@ import Cards from '../Cards';
 import OneTrustSection from '../OneTrust';
 import IFrameSection from '../IFrame';
 import Form from '../Form';
-import MegaHeader from '../MegaHeader';
 import EditorialSwitch from '../EditorialSwitch';
 import VideoImage from '../VideoImage';
 import { PageSection as PageSectionData } from '@/lib/fetch/types/PageSection';
@@ -40,8 +39,6 @@ const PageSection = (props: PageSectionData) => {
       return <IFrameSection {...props} />;
     case 'sections.form':
       return <Form {...props} />;
-    case 'sections.mega-header':
-      return <MegaHeader {...props} />;
     case 'sections.editorial-switch':
       return <EditorialSwitch {...props} />;
     case 'sections.video-image':

diff --git a/apps/nextjs-website/src/lib/fetch/types/PageSection.ts b/apps/nextjs-website/src/lib/fetch/types/PageSection.ts
@@ -210,24 +210,6 @@ const HeroCounterSectionCodec = t.strict({
   counterText: t.string,
 });
 
-const MegaHeaderSectionCodec = t.strict({
-  __component: t.literal('sections.mega-header'),
-  menuItems: t.array(
-    t.strict({
-      primary: t.string,
-      secondary: t.array(
-        t.strict({
-          title: t.string,
-          items: t.array(t.string),
-        })
-      ),
-    })
-  ),
-  logoSrc: t.string,
-  logoAlt: t.string,
-  buttonHref: t.string,
-});
-
 const EditorialSwitchSectionCodec = t.strict({
   __component: t.literal('sections.editorial-switch'),
   theme: t.union([t.literal('light'), t.literal('dark')]),
@@ -286,7 +268,6 @@ export const PageSectionCodec = t.union([
   FormSectionCodec,
   PreFooterSectionCodec,
   HeroCounterSectionCodec,
-  MegaHeaderSectionCodec,
   EditorialSwitchSectionCodec,
   VideoImageSectionCodec,
 ]);
@@ -305,7 +286,6 @@ export type IFrameSectionProps = t.TypeOf<typeof IFrameSectionCodec>;
 export type FormSection = t.TypeOf<typeof FormSectionCodec>;
 export type PreFooterSection = t.TypeOf<typeof PreFooterSectionCodec>;
 export type HeroCounterSection = t.TypeOf<typeof HeroCounterSectionCodec>;
-export type MegaHeaderSection = t.TypeOf<typeof MegaHeaderSectionCodec>;
 export type EditorialSwitchSection = t.TypeOf<
   typeof EditorialSwitchSectionCodec
 >;

diff --git a/apps/nextjs-website/stories/MegaHeader/light.stories.tsx b/apps/nextjs-website/stories/MegaHeader/light.stories.tsx
@@ -8,34 +8,117 @@ const defaultMenuItems: MegaMenuItem[] = [
   {
     primary: 'Scopri IO',
     secondary: [
-      { title: 'COSA PUOI FARE CON IO', items: ['Gestire scadenze e pagamenti', 'Ricevere comunicazioni', 'Leggere le notifiche digitali', 'Firmare digitalmente', 'Aggiungere i tuoi documenti', 'Aderire a iniziative di welfare', '[CGN]'] },
+      {
+        title: 'COSA PUOI FARE CON IO',
+        items: [
+          { label: 'Gestire scadenze e pagamenti', href: '' },
+          { label: 'Ricevere comunicazioni', href: '' },
+          { label: 'Leggere le notifiche digitali', href: '' },
+          { label: 'Firmare digitalmente', href: '' },
+          { label: 'Aggiungere i tuoi documenti', href: '' },
+          { label: 'Aderire a iniziative di welfare', href: '' },
+          { label: '[CGN]', href: '' },
+        ],
+      },
     ],
   },
   {
     primary: 'I Servizi',
     secondary: [
-      { title: 'SCOPRI I SERVIZI SU IO', items: ['Casa e utenze', 'Educazione e formazione', 'Salute', 'Redditi, patrimoni e fisco', 'Servizi anagrafici e civici', 'Mobilità e trasporti', 'Suolo, spazi e beni pubblici', 'Attività produttive e commercio', 'Servizi elettorali', 'Benessere sociale', 'Ambiente e animali', 'Giustizia e legge', 'Vita lavorativa', 'Lavori edilizi, catasto e urbanistica', 'Cultura, tempo libero e sport', 'Viaggi e turismo', 'Sicurezza e Protezione Civile'] },
+      {
+        title: 'SCOPRI I SERVIZI SU IO',
+        items: [
+          { label: 'Casa e utenze', href: '' },
+          { label: 'Educazione e formazione', href: '' },
+          { label: 'Salute', href: '' },
+          { label: 'Redditi, patrimoni e fisco', href: '' },
+          { label: 'Servizi anagrafici e civici', href: '' },
+          { label: 'Mobilità e trasporti', href: '' },
+          { label: 'Suolo, spazi e beni pubblici', href: '' },
+          { label: 'Attività produttive e commercio', href: '' },
+          { label: 'Servizi elettorali', href: '' },
+          { label: 'Benessere sociale', href: '' },
+          { label: 'Ambiente e animali', href: '' },
+          { label: 'Giustizia e legge', href: '' },
+          { label: 'Vita lavorativa', href: '' },
+          { label: 'Lavori edilizi, catasto e urbanistica', href: '' },
+          { label: 'Cultura, tempo libero e sport', href: '' },
+          { label: 'Viaggi e turismo', href: '' },
+          { label: 'Sicurezza e Protezione Civile', href: '' },
+        ],
+      },
     ],
   },
   {
     primary: 'Gli Enti',
     secondary: [
-      { title: 'ESPLORA NAZIONALI', items: ['ACI', 'Agenzia delle Entrate', 'INPS', 'E-Distribuzione', 'Ministero dell\'Interno', 'Altri enti nazionali'] },
-      { title: 'ESPLORA LOCALI', items: ['Comuni', 'Regioni', 'Province', 'Istruzione', 'Sanità', 'Altri enti locali'] },
+      {
+        title: 'ESPLORA NAZIONALI',
+        items: [
+          { label: 'ACI', href: '' },
+          { label: 'Agenzia delle Entrate', href: '' },
+          { label: 'INPS', href: '' },
+          { label: 'E-Distribuzione', href: '' },
+          { label: "Ministero dell'Interno", href: '' },
+          { label: 'Altri enti nazionali', href: '' },
+        ],
+      },
+      {
+        title: 'ESPLORA LOCALI',
+        items: [
+          { label: 'Comuni', href: '' },
+          { label: 'Regioni', href: '' },
+          { label: 'Province', href: '' },
+          { label: 'Istruzione', href: '' },
+          { label: 'Sanità', href: '' },
+          { label: 'Altri enti locali', href: '' },
+        ],
+      },
     ],
   },
   {
     primary: 'A proposito di IO',
     secondary: [
-      { title: 'PER SAPERNE DI PIÙ SUL PROGETTO IO', items: ['Vision', 'IO in numeri', 'Blog', 'Casi studio'] },
+      {
+        title: 'PER SAPERNE DI PIÙ SUL PROGETTO IO',
+        items: [
+          { label: 'Vision', href: '' },
+          { label: 'IO in numeri', href: '' },
+          { label: 'Blog', href: '' },
+          { label: 'Casi studio', href: '' },
+        ],
+      },
     ],
   },
   {
     primary: 'Aiuto e risorse',
     secondary: [
-      { title: 'LEGGI LE DOMANDE FREQUENTI', items: ['Chi può usare l’app IO?', 'Come accedere in IO?', 'Posso uscire da IO?', 'Tutte le domande frequenti'] },
-      { title: 'CONSULTA LE RISORSE TECNICHE', items: ['Sviluppatori', 'Partner commerciali', 'Partner tecnologici', 'Comunicati e Media'] },
-      { title: 'ADERISCI A IO', items: ['Perchè aderire a IO', 'Come integrare i servizi', 'Entra in contatto con noi'] },
+      {
+        title: 'LEGGI LE DOMANDE FREQUENTI',
+        items: [
+          { label: 'Chi può usare l’app IO?', href: '' },
+          { label: 'Come accedere in IO?', href: '' },
+          { label: 'Posso uscire da IO?', href: '' },
+          { label: 'Tutte le domande frequenti', href: '' },
+        ],
+      },
+      {
+        title: 'CONSULTA LE RISORSE TECNICHE',
+        items: [
+          { label: 'Sviluppatori', href: '' },
+          { label: 'Partner commerciali', href: '' },
+          { label: 'Partner tecnologici', href: '' },
+          { label: 'Comunicati e Media', href: '' },
+        ],
+      },
+      {
+        title: 'ADERISCI A IO',
+        items: [
+          { label: 'Perchè aderire a IO', href: '' },
+          { label: 'Come integrare i servizi', href: '' },
+          { label: 'Entra in contatto con noi', href: '' },
+        ],
+      },
     ],
   },
 ];
@@ -47,7 +130,9 @@ const meta: Meta<typeof MegaHeader> = {
 export default meta;
 
 // Define a "Template" function that sets how args map to rendering
-const MegaHeaderTemplate: StoryFn<MegaHeaderProps> = (args) => <MegaHeader {...args} />;
+const MegaHeaderTemplate: StoryFn<MegaHeaderProps> = (args) => (
+  <MegaHeader {...args} />
+);
 
 // Define the default props
 const defaultProps: MegaHeaderProps = {
@@ -56,11 +141,12 @@ const defaultProps: MegaHeaderProps = {
   logoAlt: 'logo',
 };
 
-export const MegaHeaderFullWithLogo: StoryFn<typeof MegaHeader> = MegaHeaderTemplate.bind({});
+export const MegaHeaderFullWithLogo: StoryFn<typeof MegaHeader> =
+  MegaHeaderTemplate.bind({});
 MegaHeaderFullWithLogo.args = {
   ...defaultProps,
   ctaButton: {
     text: 'Assistenza',
     startIcon: Icon('HelpOutlineOutlined'),
-  }
-};
+  },
+};