Skip to content

Commit

Permalink
Merge pull request #973 from DTS-STN/globalhead
Browse files Browse the repository at this point in the history 
Globalhead
  • Loading branch information
@numbap
numbap authored Aug 21, 2023
2 parents 51fef31 + f817a34 commit d56a478
Show file tree
Hide file tree
Showing 9 changed files with 781 additions and 79 deletions.
75 changes: 75 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"react-dom": "^17.0.2",
"react-full-screen": "^1.1.1",
"react-player": "^2.12.0",
"react-responsive": "^9.0.2",
"react-select": "^5.7.3",
"react-syntax-highlighter": "^15.5.0",
"release-please": "^14.17.3",
Expand Down
171 changes: 96 additions & 75 deletions src/components/Header/Header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import logoFileFR from "../../assets/sig-blk-fr.svg";
import { SearchBar } from "../SearchBar/SearchBar";
import { Language } from "../Language/Language";
import { Breadcrumb } from "../Breadcrumb/Breadcrumb";
import dropdown from "../../assets/dropdown.svg";
import { MenuGlobal } from "../Menu/MenuGlobal";

export function Header(props) {
const {
Expand All @@ -27,103 +29,116 @@ export function Header(props) {
useParentContainer,
customLink,
dataGcAnalyticsCustomClickInstitutionVariable,
globalMenuProps,
} = props;

const containerClass = useParentContainer ? "" : "ds-container";
const containerClass =
useParentContainer || !isAuthenticated ? "" : "ds-container";

return (
<div className="ds-header" id={id} data-testid="ds-header">
<TopNav
lang={lang}
skipToMainPath={topnavProps.skipToMainPath}
skipToAboutPath={topnavProps.skipToAboutPath}
switchToBasicPath={topnavProps.switchToBasicPath}
displayAlternateLink={topnavProps.displayAlternateLink}
/>
<header>
<div
className={`${containerClass} ds-flex ds-flex-col sm:ds-flex-row md:ds-pb-14px`}
>
<div className="ds-flex ds-flex-row sm:ds-pt-12px">
<div className={`header-logo ds-pt-6px`}>
<Image
className={`${
lang === "en"
? "md:ds-max-h-34px ds-max-h-19px"
: "md:ds-max-h-35px ds-max-h-20px"
} md:ds-max-w-360px ds-max-w-206px`}
src={lang === "en" ? logoFile : logoFileFR}
alt="Government of Canada"
/>
</div>
<div className="sm:ds-hidden ds-ml-auto ds-pb-10px">
<Language
id="lang2"
lang={lang}
path={linkPath}
locale={locale}
customLink={customLink}
dataGcAnalyticsCustomClickInstitutionVariable={
dataGcAnalyticsCustomClickInstitutionVariable
}
/>
</div>
<>
<div
className="ds-header ds-px-0 ds-mx-0"
id={id}
data-testid="ds-header ds-px-0 ds-mx-0"
>
<TopNav
lang={lang}
skipToMainPath={topnavProps.skipToMainPath}
skipToAboutPath={topnavProps.skipToAboutPath}
switchToBasicPath={topnavProps.switchToBasicPath}
displayAlternateLink={topnavProps.displayAlternateLink}
/>
<header className="">
<div className="ds-container ds-flex ds-flex-row ds-invisible sm:ds-visible">
<div className="ds-w-full"></div>
<Language
id="lang1"
lang={lang}
path={linkPath}
customLink={customLink}
locale={locale}
dataGcAnalyticsCustomClickInstitutionVariable={
dataGcAnalyticsCustomClickInstitutionVariable
}
/>
</div>
{!isAuthenticated ? (
<>
<div className="sm:ds-ml-auto ds-w-full md:ds-flex md:ds-w-332px ds-pb-20px ds-pt-10px sm:ds-pr-14px md:ds-pt-20px md:ds-pb-10px">
<SearchBar
onChange={searchProps.onChange}
onSubmit={searchProps.onSubmit}
lang={lang}
<div
className={`${containerClass} ds-container ds-flex ds-flex-col sm:ds-flex-row md:ds-pb-14px`}
>
<div className={`ds-flex ds-flex-row ds-w-full sm:ds-pt-12px`}>
<div className={`header-logo ds-pt-6px`}>
<Image
className={`${
lang === "en"
? "lg:ds-max-h-34px ds-max-h-19px"
: "lg:ds-max-h-35px ds-max-h-20px"
} md:ds-max-w-360px ds-max-w-206px`}
src={lang === "en" ? logoFile : logoFileFR}
alt="Government of Canada"
/>
</div>
<div className="ds-hidden sm:ds-flex sm:ds-pt-10px md:ds-pt-18px">
<div className="sm:ds-hidden ds-ml-auto ds-pb-10px">
<Language
id="lang1"
id="lang2"
lang={lang}
path={linkPath}
customLink={customLink}
locale={locale}
customLink={customLink}
dataGcAnalyticsCustomClickInstitutionVariable={
dataGcAnalyticsCustomClickInstitutionVariable
}
/>
</div>
</>
) : (
<div className="ds-pb-10px sm:ds-pb-14px md:ds-pb-0 ds-hidden sm:ds-ml-auto sm:ds-flex sm:ds-pt-10px md:ds-pt-18px">
<Language
id="lang1"
{!isAuthenticated ? (
<>
<div className="ds-py-0 ds-justify-end sm:ds-ml-auto ds-w-full md:ds-flex md:ds-w-332px ds-pb-20px ds-pt-10px md:ds-pt-20px md:ds-pb-10px">
<SearchBar
onChange={searchProps.onChange}
onSubmit={searchProps.onSubmit}
lang={lang}
/>
</div>
</>
) : (
<div className="ds-pb-10px sm:ds-pb-14px md:ds-pb-0 ds-hidden sm:ds-ml-auto sm:ds-flex sm:ds-pt-10px md:ds-pt-18px">
<Language
id="lang1"
lang={lang}
path={linkPath}
customLink={customLink}
locale={locale}
dataGcAnalyticsCustomClickInstitutionVariable={
dataGcAnalyticsCustomClickInstitutionVariable
}
/>
</div>
)}
</div>
</div>
{!menuProps.hasNoMenu && (
<>
<hr className="ds-border-t-[3px] ds-border-[#26374a] ds-mt-1 ds-px-0" />
<MenuGlobal globalMenuProps={globalMenuProps} />
{/* <Menu
lang={lang}
path={linkPath}
customLink={customLink}
locale={locale}
isAuthenticated={isAuthenticated}
menuList={menuProps.menuList}
onSignOut={menuProps.onSignOut}
dataGcAnalyticsCustomClickInstitutionVariable={
dataGcAnalyticsCustomClickInstitutionVariable
}
/>
/> */}
</>
)}
{breadCrumbItems && (
<div className={`${containerClass} ds-container`}>
<Breadcrumb items={breadCrumbItems} />
</div>
)}
</div>
{!menuProps.hasNoMenu && (
<Menu
lang={lang}
isAuthenticated={isAuthenticated}
menuList={menuProps.menuList}
onSignOut={menuProps.onSignOut}
dataGcAnalyticsCustomClickInstitutionVariable={
dataGcAnalyticsCustomClickInstitutionVariable
}
/>
)}
{breadCrumbItems && (
<div className={containerClass}>
<Breadcrumb items={breadCrumbItems} />
</div>
)}
</header>
</div>
</header>
</div>
</>
);
}

Expand Down Expand Up @@ -152,6 +167,7 @@ Header.defaultProps = {
switchToBasicPath: "basic-en.html",
displayAlternateLink: false,
},
globalMenuProps: { menuList: [] },
};

Header.propTypes = {
Expand Down Expand Up @@ -268,4 +284,9 @@ Header.propTypes = {
* For tracking click events analytics
*/
analyticsTracking: PropTypes.bool,

/**
* A custom object configuration called booBoo
*/
globalMenuProps: PropTypes.object,
};
Loading

0 comments on commit d56a478

Please sign in to comment.