change(header): align header with latest figma changes #232

eea · Sep 16, 2022 · 135cd68 · 135cd68
2 parents 650012b + 9036c74
commit 135cd68
Show file tree

Hide file tree

Showing 4 changed files with 197 additions and 67 deletions.
diff --git a/src/ui/Header/Header.jsx b/src/ui/Header/Header.jsx
@@ -41,10 +41,12 @@ const TopDropdownMenu = ({
   className,
   icon,
   id,
+  tabletText,
   mobileText,
   text,
   viewportWidth,
 }) => {
+  const isTablet = viewportWidth < 991;
   const isMobile = viewportWidth < 767;
 
   const Component = ({ mobileText }) => (
@@ -55,13 +57,21 @@ const TopDropdownMenu = ({
       icon={icon || 'chevron down'}
       aria-label="dropdown"
       closeOnChange={false}
-      closeOnBlur={false}
+      closeOnBlur={true}
     >
       <Dropdown.Menu role="group">{children}</Dropdown.Menu>
     </Dropdown>
   );
   return (
-    <>{isMobile ? <Component mobileText={mobileText} /> : <Component />}</>
+    <>
+      {isMobile ? (
+        <Component mobileText={mobileText} />
+      ) : isTablet ? (
+        <Component mobileText={tabletText} />
+      ) : (
+        <Component />
+      )}
+    </>
   );
 };
 

diff --git a/src/ui/Header/Header.stories.js b/src/ui/Header/Header.stories.js
@@ -57,9 +57,11 @@ const logoProps = {
 };
 
 const links = [
+  { title: 'EEA Main Portal', href: '/#' },
   { title: 'Biodiversity Information System for Europe', href: '/#' },
   { title: 'Climate Adaptation Platform', href: '/#' },
   { title: 'Copernicus in situ component', href: '/#' },
+  { title: 'Copernicus land monitoring', href: '/#' },
   { title: 'European Industrial Emissions Portal', href: '/#' },
   { title: 'Forest Information System for Europe', href: '/#' },
   { title: 'Information Platform for Chemical Monitoring', href: '/#' },
@@ -1192,6 +1194,10 @@ const debounce = (func) => {
   };
 };
 
+const handleDropdownClick = (event) => {
+  event.stopPropagation();
+};
+
 const Template = (args) => {
   const [viewportWidth, setWidth] = React.useState(
     typeof window !== 'undefined' && window.innerWidth,
@@ -1204,7 +1210,14 @@ const Template = (args) => {
     return () => window.removeEventListener('resize', handleWindowResize);
   }, []);
 
-  const { languages, links, linksMenuTitle, menuItems } = args;
+  const {
+    languages,
+    links,
+    linksMenuTitle,
+    tabletLinksMenuTitle,
+    mobileLinksMenuTitle,
+    menuItems,
+  } = args;
 
   const [language, setLanguage] = React.useState('en');
   const [pathname, setPathname] = React.useState('/');
@@ -1216,14 +1229,21 @@ const Template = (args) => {
           <Header.TopItem className="official-union">
             <Image src={eeaFlag} alt="eea flag"></Image>
             <Header.TopDropdownMenu
-              text="An official website of the European Union | How do you Know?"
+              text="An official website of the European Union | How do you know?"
+              tabletText="An official website of the European Union"
               mobileText=" "
               icon="chevron down"
               aria-label="dropdown"
               className=""
               viewportWidth={viewportWidth}
             >
-              <div className="content">
+              <div
+                className="content"
+                role="menu"
+                tabIndex="0"
+                onClick={handleDropdownClick}
+                onKeyDown={handleDropdownClick}
+              >
                 <p>
                   All official European Union website addresses are in the{' '}
                   europa.eu domain.
@@ -1245,6 +1265,8 @@ const Template = (args) => {
             <Header.TopDropdownMenu
               id="theme-sites"
               text={linksMenuTitle}
+              tabletText={tabletLinksMenuTitle}
+              mobileText={mobileLinksMenuTitle}
               viewportWidth={viewportWidth}
             >
               <div className="wrapper">
@@ -1493,7 +1515,9 @@ const Template = (args) => {
 
 export const Default = Template.bind({});
 Default.args = {
-  linksMenuTitle: 'EEA information systems',
+  linksMenuTitle: 'Environmental information systems',
+  tabletLinksMenuTitle: 'EEA information systems',
+  mobileLinksMenuTitle: 'EEA information systems',
   links,
   languages,
   menuItems,