feat: header improvements

package.json

@@ -65,7 +65,7 @@
     "postversion": "echo \"You can now publish your version using 'git push --follow-tags'\""
   },
   "peerDependencies": {
-    "bootstrap-italia": "2.11.0",
+    "bootstrap-italia": "^2.12.1",
     "react": ">=18.2.0"
   },
   "browserslist": [
@@ -100,7 +100,7 @@
     "@types/react": "^18.2.75",
     "@types/react-dom": "^18.2.24",
     "@types/react-transition-group": "^4.4.10",
-    "bootstrap-italia": "^2.11.0",
+    "bootstrap-italia": "2.12.1",
     "browserslist-config-design-italia": "^1.0.0",
     "eslint": "^9.10.0",
     "eslint-plugin-mdx": "^3.1.5",

src/Collapse/Collapse.tsx

@@ -1,9 +1,12 @@
-import React, { ElementType, FC, HTMLAttributes, Ref } from 'react';
 import classNames from 'classnames';
+import React, { ElementType, FC, HTMLAttributes, Ref } from 'react';
 
 import { Collapse as CollapseBase } from 'reactstrap';
 import { CSSModule } from 'reactstrap/types/lib/utils';
 
+import { Icon } from '../Icon/Icon';
+
+
 // Copy over from reactstrap and add new ones
 export interface CollapseProps extends HTMLAttributes<HTMLElement> {
   /** Indica se il menu HeaderNav sia aperto o meno. Usato unicamente nel caso della HeaderNav, ovvero con navbar e header entrambi true */
@@ -39,6 +42,8 @@ export interface CollapseProps extends HTMLAttributes<HTMLElement> {
   onOverlayClick?: () => void;
   /** Da utilizzare per impostare un riferimento all'elemento DOM */
   innerRef?: Ref<HTMLElement>;
+  /** Testo pulsante di chiusura per screen reader */
+  closeSrText?: string,
   testId?: string;
 }
 
@@ -52,31 +57,39 @@ export const Collapse: FC<CollapseProps> = ({
   onOverlayClick,
   cssModule,
   testId,
+  closeSrText='Nascondi la navigazione',
   ...attributes
 }) => {
   const newCssModule = {
     'navbar-collapse': 'navbar-collapsable',
     ...cssModule
   };
-  if (megamenu || navbar || header) {
+  if (megamenu || navbar) {
     const classes = classNames(className, 'navbar-collapse', {
       expanded: isOpen
     });
     const style = { display: isOpen ? 'block' : 'none' };
+    const overlayClasses = classNames(
+      'overlay',
+      {
+        'fade' : isOpen,
+        'show' : isOpen
+      }
+    )
     return (
       <CollapseBase
-        theme='dark'
         className={classes}
         cssModule={newCssModule}
         navbar={navbar}
         style={style}
         data-testid={testId}
         {...attributes}
       >
-        <div className='overlay' style={style} onClick={onOverlayClick}></div>
-        <div className='close-div visually-hidden'>
-          <button className='btn close-menu' type='button'>
-            <span className='it-close'></span>close
+        <div className={overlayClasses} style={style} onClick={onOverlayClick}></div>
+        <div className='close-div'>
+          <button className='btn close-menu' type='button' onClick={onOverlayClick}>
+            <span className="visually-hidden">{closeSrText}</span>
+            <Icon color='white' icon='it-close-big'/>
           </button>
         </div>
         {megamenu ? <div className='menu-wrapper '>{children}</div> : <>{children}</>}

src/Dropdown/Dropdown.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
-import React, { ElementType, FC, HTMLAttributes } from 'react';
-import { Dropdown as BSDRopdown } from 'reactstrap';
-export interface DropdownProps extends HTMLAttributes<HTMLElement> {
+import React, { ElementType, FC } from 'react';
+import { Dropdown as BSDRopdown, DropdownProps as  BSDRopdownProps} from 'reactstrap';
+export interface DropdownProps extends BSDRopdownProps {
   tag?: ElementType;
   inNavbar?: boolean;
   textCenter?: boolean;

src/Dropdown/DropdownMenu.tsx

@@ -1,19 +1,27 @@
 import React, { FC, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 import { DropdownMenu as BSDRopdownMenu } from 'reactstrap';
+
+// .it-header-slim-wrapper .it-header-slim-wrapper-content .dropdown-menu {
+//   top: unset !important;
+// }
+
 export interface DropdownMenuProps extends HTMLAttributes<HTMLElement> {
   /** Classi aggiuntive da usare per il componente Button */
+  inNavbar?: boolean;
   className?: string;
   testId?: string;
 }
 
-export const DropdownMenu: FC<DropdownMenuProps> = ({ className, testId, children, ...attributes }) => {
+export const DropdownMenu: FC<DropdownMenuProps> = ({ className, inNavbar, testId, children, ...attributes }) => {
   const classes = classNames(className, {
     'dropdown-menu': true
   });
 
+  const style = inNavbar ? {'top' : 'unset !important'} : {}
+
   return (
-    <BSDRopdownMenu className={classes} data-testid={testId} {...attributes}>
+    <BSDRopdownMenu style={style} className={classes} data-testid={testId} {...attributes}>
       {children}
     </BSDRopdownMenu>
   );

src/Dropdown/DropdownToggle.tsx

@@ -29,7 +29,7 @@ export const DropdownToggle: FC<DropdownToggleProps> = ({
     'btn-dropdown': Tag === 'a' && !inNavbar,
     'dropdown-toggle': true,
     'nav-link': inNavbar,
-    btn: tag === 'button'
+    btn: tag === 'button' && !inNavbar
   });
 
   let colorClass = '';

src/Header/HeaderContent.tsx

@@ -30,7 +30,7 @@ export const HeaderContent = ({ className, megamenu, testId, ...attributes }: He
       <div className={classes} {...attributes} data-testid={testId} />
     );
   return (
-    <Container>
+    <Container className='container-xxl' fluid>
       <Row>
         <Col>{Content}</Col>
       </Row>

src/Header/HeaderToggler.tsx

@@ -15,12 +15,13 @@ export interface HeaderTogglerProps extends ButtonHTMLAttributes<HTMLButtonEleme
    * Se fornito questo sovrascriverà il valore di default.
    */
   type?: 'button' | 'submit' | 'reset';
+  isOpen?: boolean;
   testId?: string;
 }
 
 const BUTTON = 'button';
 
-export const HeaderToggler = ({ className, tag, type, testId, ...attributes }: HeaderTogglerProps) => {
+export const HeaderToggler = ({ className, tag, type, isOpen=false, testId, ...attributes }: HeaderTogglerProps) => {
   const HeaderType = useHeaderContext();
   const defaultTag = HeaderType === SLIM ? 'a' : BUTTON;
   const defaultType = HeaderType === SLIM ? undefined : BUTTON;
@@ -31,6 +32,7 @@ export const HeaderToggler = ({ className, tag, type, testId, ...attributes }: H
     },
     className
   );
+  const expanded = isOpen ? "true" : "false"
   useEffect(() => {
     document.querySelectorAll('.container-fluid').forEach((element) => {
       element.classList.remove('container-fluid');
@@ -42,8 +44,8 @@ export const HeaderToggler = ({ className, tag, type, testId, ...attributes }: H
       {...attributes}
       tag={tag || defaultTag}
       type={type || defaultType}
-      href='#'
       data-testid={testId}
+      aria-expanded={expanded}
     />
   );
 };

src/Megamenu/MegamenuItem.tsx

@@ -13,10 +13,12 @@ export interface MegamenuItemProps extends HTMLAttributes<HTMLUListElement> {
 
 export const MegamenuItem: FC<MegamenuItemProps> = ({ itemName, className, children, ...attributes }) => {
   const classes = classNames(className, 'megamenu');
-  const toggleClasses = classNames('px-lg-2', 'px-xl-3');
+  const [dropdownOpen, setDropdownOpen] = React.useState(false);
+  const toggle = () => setDropdownOpen((prevState) => !prevState);
+  const toggleClasses = classNames('px-lg-2', 'px-xl-3', dropdownOpen ? 'show' : '');
 
   return (
-    <Dropdown className={classes} inNavbar {...attributes}>
+    <Dropdown className={classes} inNavbar {...attributes} isOpen={dropdownOpen} toggle={toggle}>
       <DropdownToggle inNavbar caret className={toggleClasses}>
         <span>{itemName}</span>
       </DropdownToggle>

stories/Components/Header/CompleteHeader.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import { Meta, StoryObj } from '@storybook/react';
 import {
@@ -12,6 +12,7 @@ import {
   HeaderBrand,
   HeaderContent,
   HeaderLinkZone,
+  HeaderProps,
   HeaderRightZone,
   HeaderSearch,
   HeaderSocialsZone,
@@ -75,12 +76,14 @@ const CenterHeader = ({ theme }: ThemeType) => {
 };
 
 const NavHeader = ({ theme }: ThemeType) => {
+  const [isOpenSide, setIsOpenSide] = useState(false);
   return (
     <Header type='navbar' theme={theme}>
       <HeaderContent expand='lg' megamenu>
         <HeaderToggler
           onClick={() => {
             /* set logic open state  */
+            setIsOpenSide(!isOpenSide);
           }}
           aria-controls='nav1'
           aria-expanded='false'
@@ -91,8 +94,10 @@ const NavHeader = ({ theme }: ThemeType) => {
         <Collapse
           navbar
           header
+          isOpen={isOpenSide}
           onOverlayClick={() => {
             /* set close logic here */
+            setIsOpenSide(!isOpenSide);
           }}
         >
           <div className='menu-wrapper'>
@@ -201,22 +206,24 @@ const NavHeader = ({ theme }: ThemeType) => {
   );
 };
 
-const SlimHeader = ({ theme }: ThemeType) => {
+const SlimHeader = ({ theme, brandText }: Pick<HeaderProps, 'theme'> & { brandText: string }) => {
+  const [isOpenCollapse, setIsOpenCollapse] = useState(false);
   return (
     <Header type='slim' theme={theme}>
       <HeaderContent>
-        <HeaderBrand>Ente appartenenza/Owner</HeaderBrand>
-        <HeaderLinkZone>
+        <HeaderBrand>{brandText}</HeaderBrand>
+        <HeaderLinkZone aria-label='Navigazione accessoria'>
           <HeaderToggler
+            isOpen={isOpenCollapse}
             onClick={() => {
-              /* open logic state here */
+              setIsOpenCollapse(!isOpenCollapse);
             }}
           >
-            <span>Ente appartenenza/Owner</span>
+            <span>{brandText}</span>
             <Icon icon='it-expand' />
           </HeaderToggler>
-          <Collapse isOpen={true} header>
-            <LinkList>
+          <Collapse isOpen={isOpenCollapse} header>
+            <LinkList noWrapper>
               <LinkListItem href='#'>Link 1</LinkListItem>
               <LinkListItem href='#' active>
                 Link 2 Active
@@ -229,7 +236,7 @@ const SlimHeader = ({ theme }: ThemeType) => {
             <DropdownToggle inNavbar caret>
               ITA
             </DropdownToggle>
-            <DropdownMenu>
+            <DropdownMenu inNavbar>
               <Row>
                 <Col size='12'>
                   <LinkList>
@@ -273,7 +280,7 @@ type Story = StoryObj<HeaderCompleteProps>;
 export const CompleteHeaderStory: Story = {
   render: ({ theme, sticky }) => (
     <Headers sticky={sticky}>
-      <SlimHeader theme={theme} />
+      <SlimHeader theme={theme} brandText='Ente di appartenenza'/>
       <div className='it-nav-wrapper'>
         <CenterHeader theme={theme} />
         <NavHeader theme={theme} />