Skip to content

Commit 7400650

Browse files
ArakTaiRothArakTaiRoth
authored
Merge pull request #431 from mxsoco/mxsoco/feat-2145
feat(#2145): header - added contextual examples
2 parents 1af06c6 + b3bceab commit 7400650

File tree

4 files changed

+235
-1
lines changed

4 files changed

+235
-1
lines changed

‎src/examples/app-header/AppHeaderExamples.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { HeaderWithNavigation } from "@examples/header-with-navigation.tsx";
22
import { HeaderWithMenuClickEvent } from "@examples/header-with-menu-click-event.tsx";
3+
import { HeaderSignIn } from "@examples/header-with-sign-in.tsx";
4+
import { HeaderLoggedInMenu } from "@examples/header-logged-in-menu.tsx";
35
import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
46

57
export const AppHeaderExamples = () => {
@@ -16,6 +18,18 @@ export const AppHeaderExamples = () => {
1618
figmaExample="">
1719
</SandboxHeader>
1820
<HeaderWithMenuClickEvent />
21+
22+
<SandboxHeader
23+
exampleTitle="Sign in using the site header"
24+
figmaExample="">
25+
</SandboxHeader>
26+
<HeaderSignIn />
27+
28+
<SandboxHeader
29+
exampleTitle="Access user settings in the site header"
30+
figmaExample="">
31+
</SandboxHeader>
32+
<HeaderLoggedInMenu />
1933
</>
2034
);
2135
};

‎src/examples/header-logged-in-menu.tsx‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
import { Sandbox } from "@components/sandbox";
2+
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
3+
import { GoabAppHeader, GoabAppHeaderMenu, GoabMicrositeHeader } from "@abgov/react-components";
4+
import { useContext } from "react";
5+
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
6+
7+
export const HeaderLoggedInMenu = () => {
8+
const {version} = useContext(LanguageVersionContext);
9+
return (
10+
<Sandbox fullWidth skipRender>
11+
<GoabMicrositeHeader type="live"></GoabMicrositeHeader>
12+
<GoabAppHeader
13+
url="https://example.com"
14+
heading="Design System"
15+
fullMenuBreakpoint={1500}>
16+
<a href="#">Services</a>
17+
<GoabAppHeaderMenu heading="John Smith" leadingIcon="person-circle">
18+
<a href="#">Manage account</a>
19+
<a href="#">Request new staff account</a>
20+
<a href="#">System admin</a>
21+
<a href="#" className="interactive">Sign out</a>
22+
</GoabAppHeaderMenu>
23+
</GoabAppHeader>
24+
25+
{version === "old" && (
26+
<CodeSnippet
27+
lang="html"
28+
tags="angular"
29+
allowCopy={true}
30+
code={`
31+
<goa-microsite-header type="live"></goa-microsite-header>
32+
<goa-app-header
33+
url="https://example.com"
34+
heading="Design System"
35+
[fullmenubreakpoint]="1500"
36+
[hasmenuclickhandler]="true"
37+
(_menuClick)="handleMenuClick()"
38+
>
39+
<a href="#">Services</a>
40+
<goa-app-header-menu heading="John Smith" leadingIcon="person-circle">
41+
<a href="#">Manage account</a>
42+
<a href="#">Request new staff account</a>
43+
<a href="#">System admin</a>
44+
<a href="#" class="interactive">Sign out</a>
45+
</goa-app-header-menu>
46+
</goa-app-header>
47+
`}
48+
/>
49+
)}
50+
51+
{version === "new" && (
52+
<CodeSnippet
53+
lang="html"
54+
tags="angular"
55+
allowCopy={true}
56+
code={`
57+
<goab-microsite-header type="live"></goab-microsite-header>
58+
<goab-app-header
59+
url="https://example.com"
60+
heading="Design System"
61+
[fullMenuBreakpoint]="1500"
62+
(onMenuClick)="handleMenuClick()"
63+
>
64+
<a href="#">Services</a>
65+
<goab-app-header-menu heading="John Smith" leadingIcon="person-circle">
66+
<a href="#">Manage account</a>
67+
<a href="#">Request new staff account</a>
68+
<a href="#">System admin</a>
69+
<a href="#" class="interactive">Sign out</a>
70+
</goab-app-header-menu>
71+
</goab-app-header>
72+
`}
73+
/>
74+
)}
75+
76+
{version === "old" && (
77+
<CodeSnippet
78+
lang="html"
79+
tags="react"
80+
allowCopy={true}
81+
code={`
82+
<GoAMicrositeHeader type="live"></GoAMicrositeHeader>
83+
<GoAAppHeader
84+
url="https://example.com"
85+
heading="Design System"
86+
onMenuClick={handleMenuClick}
87+
fullMenuBreakpoint={1500}>
88+
<a href="#">Services</a>
89+
<GoAAppHeaderMenu heading="John Smith" leadingIcon="person-circle">
90+
<a href="#">Manage account</a>
91+
<a href="#">Request new staff account</a>
92+
<a href="#">System admin</a>
93+
<a href="#" className="interactive">Sign out</a>
94+
</GoAAppHeaderMenu>
95+
</GoAAppHeader>
96+
`}
97+
/>
98+
)}
99+
{version === "new" && (
100+
<CodeSnippet
101+
lang="html"
102+
tags="react"
103+
allowCopy={true}
104+
code={`
105+
<GoabMicrositeHeader type="live"></GoabMicrositeHeader>
106+
<GoabAppHeader
107+
url="https://example.com"
108+
heading="Design System"
109+
onMenuClick={handleMenuClick}
110+
fullMenuBreakpoint={1500}>
111+
<a href="#">Services</a>
112+
<GoabAppHeaderMenu heading="John Smith" leadingIcon="person-circle">
113+
<a href="#">Manage account</a>
114+
<a href="#">Request new staff account</a>
115+
<a href="#">System admin</a>
116+
<a href="#" className="interactive">Sign out</a>
117+
</GoabAppHeaderMenu>
118+
</GoabAppHeader>
119+
`}
120+
/>
121+
)}
122+
</Sandbox>
123+
)
124+
}
125+
126+
export default HeaderLoggedInMenu;

‎src/examples/header-with-sign-in.tsx‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import { Sandbox } from "@components/sandbox";
2+
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
3+
import { GoabAppHeader, GoabMicrositeHeader } from "@abgov/react-components";
4+
import { useContext } from "react";
5+
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
6+
7+
export const HeaderSignIn = () => {
8+
const {version} = useContext(LanguageVersionContext);
9+
return (
10+
<Sandbox fullWidth skipRender>
11+
<GoabMicrositeHeader type="live"></GoabMicrositeHeader>
12+
<GoabAppHeader
13+
url="https://example.com"
14+
heading="Service name"
15+
fullMenuBreakpoint={1500}>
16+
<a href="#" className="interactive">Sign in</a>
17+
</GoabAppHeader>
18+
19+
{version === "old" && (
20+
<CodeSnippet
21+
lang="html"
22+
tags="angular"
23+
allowCopy={true}
24+
code={`
25+
<goa-microsite-header type="live"></goa-microsite-header>
26+
<goa-app-header
27+
url="https://example.com"
28+
heading="Design System"
29+
[fullmenubreakpoint]="1500"
30+
[hasmenuclickhandler]="true"
31+
(_menuClick)="handleMenuClick()"
32+
>
33+
<a href="#" class="interactive">Sign in</a>
34+
</goa-app-header>
35+
`}
36+
/>
37+
)}
38+
39+
{version === "new" && (
40+
<CodeSnippet
41+
lang="html"
42+
tags="angular"
43+
allowCopy={true}
44+
code={`
45+
<goab-microsite-header type="live"></goab-microsite-header>
46+
<goab-app-header
47+
url="https://example.com"
48+
heading="Design System"
49+
[fullMenuBreakpoint]="1500"
50+
(onMenuClick)="handleMenuClick()"
51+
>
52+
<a href="#" class="interactive">Sign in</a>
53+
</goab-app-header>
54+
`}
55+
/>
56+
)}
57+
58+
{version === "old" && (
59+
<CodeSnippet
60+
lang="html"
61+
tags="react"
62+
allowCopy={true}
63+
code={`
64+
<GoAMicrositeHeader type="live"></GoAMicrositeHeader>
65+
<GoAAppHeader
66+
url="https://example.com"
67+
heading="Service name"
68+
fullMenuBreakpoint={1500}>
69+
<a href="#" className="interactive">Sign in</a>
70+
</GoAAppHeader>
71+
`}
72+
/>
73+
)}
74+
{version === "new" && (
75+
<CodeSnippet
76+
lang="html"
77+
tags="react"
78+
allowCopy={true}
79+
code={`
80+
<GoabMicrositeHeader type="live"></GoabMicrositeHeader>
81+
<GoabAppHeader
82+
url="https://example.com"
83+
heading="Service name"
84+
fullMenuBreakpoint={1500}>
85+
<a href="#" className="interactive">Sign in</a>
86+
</GoabAppHeader>
87+
`}
88+
/>
89+
)}
90+
</Sandbox>
91+
)
92+
}
93+
94+
export default HeaderSignIn;

‎src/routes/components/AppHeader.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,7 @@ export default function AppHeaderPage() {
231231
heading={
232232
<>
233233
Examples
234-
<GoabBadge type="information" content="2" />
234+
<GoabBadge type="information" content="4" />
235235
</>
236236
}
237237
>

0 commit comments

Comments
 (0)