Skip to content

Commit

Permalink
change(header): align header with latest figma changes #232
Browse files Browse the repository at this point in the history
  • Loading branch information
ichim-david authored Sep 16, 2022
2 parents 650012b + 9036c74 commit 135cd68
Show file tree
Hide file tree
Showing 4 changed files with 197 additions and 67 deletions.
14 changes: 12 additions & 2 deletions src/ui/Header/Header.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,12 @@ const TopDropdownMenu = ({
className,
icon,
id,
tabletText,
mobileText,
text,
viewportWidth,
}) => {
const isTablet = viewportWidth < 991;
const isMobile = viewportWidth < 767;

const Component = ({ mobileText }) => (
Expand All @@ -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 />
)}
</>
);
};

Expand Down
32 changes: 28 additions & 4 deletions src/ui/Header/Header.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: '/#' },
Expand Down Expand Up @@ -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,
Expand All @@ -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('/');
Expand All @@ -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.
Expand All @@ -1245,6 +1265,8 @@ const Template = (args) => {
<Header.TopDropdownMenu
id="theme-sites"
text={linksMenuTitle}
tabletText={tabletLinksMenuTitle}
mobileText={mobileLinksMenuTitle}
viewportWidth={viewportWidth}
>
<div className="wrapper">
Expand Down Expand Up @@ -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,
Expand Down
Loading

0 comments on commit 135cd68

Please sign in to comment.