Skip to content

feat(#2145): header - added contextual examples #431

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ArakTaiRoth merged 3 commits into from
Oct 7, 2025
Merged

feat(#2145): header - added contextual examples #431

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3d5af44
feat(#2145): header - added contextual examples
mxsoco Sep 16, 2025
8b95526
Merge branch 'alpha' into mxsoco/feat-2145
mxsoco Sep 24, 2025
b3bceab
feat(#2145): header - turned 'className' to 'class' for angular examples
mxsoco Sep 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions src/examples/app-header/AppHeaderExamples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { HeaderWithNavigation } from "@examples/header-with-navigation.tsx";
import { HeaderWithMenuClickEvent } from "@examples/header-with-menu-click-event.tsx";
import { HeaderSignIn } from "@examples/header-with-sign-in.tsx";
import { HeaderLoggedInMenu } from "@examples/header-logged-in-menu.tsx";
import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";

export const AppHeaderExamples = () => {
Expand All @@ -16,6 +18,18 @@ export const AppHeaderExamples = () => {
figmaExample="">
</SandboxHeader>
<HeaderWithMenuClickEvent />

<SandboxHeader
exampleTitle="Sign in using the site header"
figmaExample="">
</SandboxHeader>
<HeaderSignIn />

<SandboxHeader
exampleTitle="Access user settings in the site header"
figmaExample="">
</SandboxHeader>
<HeaderLoggedInMenu />
</>
);
};
126 changes: 126 additions & 0 deletions src/examples/header-logged-in-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
import { Sandbox } from "@components/sandbox";
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
import { GoabAppHeader, GoabAppHeaderMenu, GoabMicrositeHeader } from "@abgov/react-components";
import { useContext } from "react";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";

export const HeaderLoggedInMenu = () => {
const {version} = useContext(LanguageVersionContext);
return (
<Sandbox fullWidth skipRender>
<GoabMicrositeHeader type="live"></GoabMicrositeHeader>
<GoabAppHeader
url="https://example.com"
heading="Design System"
fullMenuBreakpoint={1500}>
<a href="#">Services</a>
<GoabAppHeaderMenu heading="John Smith" leadingIcon="person-circle">
<a href="#">Manage account</a>
<a href="#">Request new staff account</a>
<a href="#">System admin</a>
<a href="#" className="interactive">Sign out</a>
</GoabAppHeaderMenu>
</GoabAppHeader>

{version === "old" && (
<CodeSnippet
lang="html"
tags="angular"
allowCopy={true}
code={`
<goa-microsite-header type="live"></goa-microsite-header>
<goa-app-header
url="https://example.com"
heading="Design System"
[fullmenubreakpoint]="1500"
[hasmenuclickhandler]="true"
(_menuClick)="handleMenuClick()"
>
<a href="#">Services</a>
<goa-app-header-menu heading="John Smith" leadingIcon="person-circle">
<a href="#">Manage account</a>
<a href="#">Request new staff account</a>
<a href="#">System admin</a>
<a href="#" class="interactive">Sign out</a>
</goa-app-header-menu>
</goa-app-header>
`}
/>
)}

{version === "new" && (
<CodeSnippet
lang="html"
tags="angular"
allowCopy={true}
code={`
<goab-microsite-header type="live"></goab-microsite-header>
<goab-app-header
url="https://example.com"
heading="Design System"
[fullMenuBreakpoint]="1500"
(onMenuClick)="handleMenuClick()"
>
<a href="#">Services</a>
<goab-app-header-menu heading="John Smith" leadingIcon="person-circle">
<a href="#">Manage account</a>
<a href="#">Request new staff account</a>
<a href="#">System admin</a>
<a href="#" class="interactive">Sign out</a>
</goab-app-header-menu>
</goab-app-header>
`}
/>
)}

{version === "old" && (
<CodeSnippet
lang="html"
tags="react"
allowCopy={true}
code={`
<GoAMicrositeHeader type="live"></GoAMicrositeHeader>
<GoAAppHeader
url="https://example.com"
heading="Design System"
onMenuClick={handleMenuClick}
fullMenuBreakpoint={1500}>
<a href="#">Services</a>
<GoAAppHeaderMenu heading="John Smith" leadingIcon="person-circle">
<a href="#">Manage account</a>
<a href="#">Request new staff account</a>
<a href="#">System admin</a>
<a href="#" className="interactive">Sign out</a>
</GoAAppHeaderMenu>
</GoAAppHeader>
`}
/>
)}
{version === "new" && (
<CodeSnippet
lang="html"
tags="react"
allowCopy={true}
code={`
<GoabMicrositeHeader type="live"></GoabMicrositeHeader>
<GoabAppHeader
url="https://example.com"
heading="Design System"
onMenuClick={handleMenuClick}
fullMenuBreakpoint={1500}>
<a href="#">Services</a>
<GoabAppHeaderMenu heading="John Smith" leadingIcon="person-circle">
<a href="#">Manage account</a>
<a href="#">Request new staff account</a>
<a href="#">System admin</a>
<a href="#" className="interactive">Sign out</a>
</GoabAppHeaderMenu>
</GoabAppHeader>
`}
/>
)}
</Sandbox>
)
}

export default HeaderLoggedInMenu;
94 changes: 94 additions & 0 deletions src/examples/header-with-sign-in.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import { Sandbox } from "@components/sandbox";
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
import { GoabAppHeader, GoabMicrositeHeader } from "@abgov/react-components";
import { useContext } from "react";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";

export const HeaderSignIn = () => {
const {version} = useContext(LanguageVersionContext);
return (
<Sandbox fullWidth skipRender>
<GoabMicrositeHeader type="live"></GoabMicrositeHeader>
<GoabAppHeader
url="https://example.com"
heading="Service name"
fullMenuBreakpoint={1500}>
<a href="#" className="interactive">Sign in</a>
</GoabAppHeader>

{version === "old" && (
<CodeSnippet
lang="html"
tags="angular"
allowCopy={true}
code={`
<goa-microsite-header type="live"></goa-microsite-header>
<goa-app-header
url="https://example.com"
heading="Design System"
[fullmenubreakpoint]="1500"
[hasmenuclickhandler]="true"
(_menuClick)="handleMenuClick()"
>
<a href="#" class="interactive">Sign in</a>
</goa-app-header>
`}
/>
)}

{version === "new" && (
<CodeSnippet
lang="html"
tags="angular"
allowCopy={true}
code={`
<goab-microsite-header type="live"></goab-microsite-header>
<goab-app-header
url="https://example.com"
heading="Design System"
[fullMenuBreakpoint]="1500"
(onMenuClick)="handleMenuClick()"
>
<a href="#" class="interactive">Sign in</a>
</goab-app-header>
`}
/>
)}

{version === "old" && (
<CodeSnippet
lang="html"
tags="react"
allowCopy={true}
code={`
<GoAMicrositeHeader type="live"></GoAMicrositeHeader>
<GoAAppHeader
url="https://example.com"
heading="Service name"
fullMenuBreakpoint={1500}>
<a href="#" className="interactive">Sign in</a>
</GoAAppHeader>
`}
/>
)}
{version === "new" && (
<CodeSnippet
lang="html"
tags="react"
allowCopy={true}
code={`
<GoabMicrositeHeader type="live"></GoabMicrositeHeader>
<GoabAppHeader
url="https://example.com"
heading="Service name"
fullMenuBreakpoint={1500}>
<a href="#" className="interactive">Sign in</a>
</GoabAppHeader>
`}
/>
)}
</Sandbox>
)
}

export default HeaderSignIn;
2 changes: 1 addition & 1 deletion src/routes/components/AppHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,7 @@ export default function AppHeaderPage() {
heading={
<>
Examples
<GoabBadge type="information" content="2" />
<GoabBadge type="information" content="4" />
</>
}
>
Expand Down