Skip to content

Commit 501639e

Browse files
willcodeforcoffeewillcodeforcoffee
committed
fix(#3762): add and use the correct React and Angular slot equivalents
1 parent 38775e7 commit 501639e

23 files changed

Lines changed: 1269 additions & 272 deletions

File tree

‎apps/prs/angular/src/routes/bugs/3762/bug3762.component.html‎

Lines changed: 247 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,247 @@
1+
<div>
2+
<h1>3762 AppHeader examples using slot property</h1>
3+
</div>
4+
<goab-container type="interactive" padding="relaxed">
5+
<goab-text tag="h3" size="heading-s">Site chrome</goab-text>
6+
<goab-column-layout>
7+
<goab-app-header
8+
heading="Example 1"
9+
[navigation]="navigationTemplate"
10+
[utilities]="utilitiesTemplate"
11+
[phase]="phaseTemplate"
12+
[banner]="bannerTemplate"
13+
>
14+
</goab-app-header>
15+
<goab-hero-banner
16+
heading="Hero banner"
17+
backgroundUrl="https://picsum.photos/1200/400?random=3"
18+
[actions]="heroActions"
19+
>
20+
<goab-text tag="p" size="body-l">
21+
Hero banner demonstrates background imagery and projected actions.
22+
</goab-text>
23+
</goab-hero-banner>
24+
<goab-block direction="row" gap="l" mt="m">
25+
<goab-side-menu>
26+
<goab-side-menu-heading>Menu heading</goab-side-menu-heading>
27+
<goab-side-menu-group heading="Group one">
28+
<a href="#">Link A</a>
29+
<a href="#">Link B</a>
30+
</goab-side-menu-group>
31+
<a href="#">Loose link</a>
32+
</goab-side-menu>
33+
<goab-page-block width="full">
34+
<goab-text tag="p" size="body-m">
35+
Content area with side menu demonstrates layout wrappers.
36+
</goab-text>
37+
</goab-page-block>
38+
</goab-block>
39+
</goab-column-layout>
40+
</goab-container>
41+
42+
<hr />
43+
44+
<div>
45+
<h1>3762 AppHeader examples using slot property and big Utilities</h1>
46+
</div>
47+
<goab-container type="interactive" padding="relaxed">
48+
<goab-text tag="h3" size="heading-s">Site chrome</goab-text>
49+
<goab-column-layout>
50+
<goab-app-header
51+
heading="Example 2"
52+
[navigation]="bigNavigationTemplate"
53+
[utilities]="bigUtilitiesTemplate"
54+
[phase]="phaseTemplate"
55+
[banner]="bannerTemplate"
56+
>
57+
</goab-app-header>
58+
<goab-hero-banner
59+
heading="Hero banner"
60+
backgroundUrl="https://picsum.photos/1200/400?random=3"
61+
[actions]="heroActions"
62+
>
63+
<goab-text tag="p" size="body-l">
64+
Hero banner demonstrates background imagery and projected actions.
65+
</goab-text>
66+
</goab-hero-banner>
67+
<goab-block direction="row" gap="l" mt="m">
68+
<goab-side-menu>
69+
<goab-side-menu-heading>Menu heading</goab-side-menu-heading>
70+
<goab-side-menu-group heading="Group one">
71+
<a href="#">Link A</a>
72+
<a href="#">Link B</a>
73+
</goab-side-menu-group>
74+
<a href="#">Loose link</a>
75+
</goab-side-menu>
76+
<goab-page-block width="full">
77+
<goab-text tag="p" size="body-m">
78+
Content area with side menu demonstrates layout wrappers.
79+
</goab-text>
80+
</goab-page-block>
81+
</goab-block>
82+
</goab-column-layout>
83+
</goab-container>
84+
85+
<hr />
86+
87+
<h1>AppHeader examples using slot property (Legacy)</h1>
88+
<p>Ensure the fix did not break old/legacy examples using slot</p>
89+
<goab-container type="interactive" padding="relaxed">
90+
<goab-text tag="h3" size="heading-s">Site chrome</goab-text>
91+
<goab-column-layout>
92+
<goab-app-header heading="Example 3">
93+
<a href="#">Home</a>
94+
<goab-app-header-menu heading="Menu">
95+
<a href="#">Item 1</a>
96+
<a href="#">Item 2</a>
97+
</goab-app-header-menu>
98+
<a slot="navigation" href="#">Dashboard</a>
99+
<goab-app-header-menu slotName="navigation" heading="Applications">
100+
<a href="#">New application</a>
101+
<a href="#">Active</a>
102+
<a href="#">Archived</a>
103+
</goab-app-header-menu>
104+
<a slot="navigation" href="#">Reports</a>
105+
<a slot="navigation" href="#">Settings</a>
106+
<div slot="utilities">
107+
<goab-block alignment="center" direction="row" gap="m">
108+
<goab-button type="tertiary" size="compact">Help</goab-button>
109+
<goab-menu-button text="John Smith" type="tertiary" size="compact">
110+
<goab-menu-action text="User settings" action="user-settings"></goab-menu-action>
111+
<goab-menu-action text="Sign out" action="sign-out"></goab-menu-action>
112+
</goab-menu-button>
113+
</goab-block>
114+
</div>
115+
</goab-app-header>
116+
<goab-hero-banner
117+
heading="Hero banner"
118+
backgroundUrl="https://picsum.photos/1200/400?random=3"
119+
[actions]="heroActions"
120+
>
121+
<goab-text tag="p" size="body-l">
122+
Hero banner demonstrates background imagery and projected actions.
123+
</goab-text>
124+
</goab-hero-banner>
125+
<goab-block direction="row" gap="l" mt="m">
126+
<goab-side-menu>
127+
<goab-side-menu-heading>Menu heading</goab-side-menu-heading>
128+
<goab-side-menu-group heading="Group one">
129+
<a href="#">Link A</a>
130+
<a href="#">Link B</a>
131+
</goab-side-menu-group>
132+
<a href="#">Loose link</a>
133+
</goab-side-menu>
134+
<goab-page-block width="full">
135+
<goab-text tag="p" size="body-m">
136+
Content area with side menu demonstrates layout wrappers.
137+
</goab-text>
138+
</goab-page-block>
139+
</goab-block>
140+
</goab-column-layout>
141+
</goab-container>
142+
143+
<hr />
144+
145+
<h1>AppHeader examples using slot property (Legacy - big utilities)</h1>
146+
<p>Ensure the fix did not break old/legacy examples using slot</p>
147+
<goab-container type="interactive" padding="relaxed">
148+
<goab-text tag="h3" size="heading-s">Site chrome</goab-text>
149+
<goab-column-layout>
150+
<goab-app-header heading="Example 4">
151+
<a slot="navigation" href="#">Home</a>
152+
<div slot="utilities">
153+
<goab-button type="tertiary" size="compact">Help</goab-button>
154+
</div>
155+
<div slot="utilities">
156+
<goab-button type="tertiary" size="compact">Sign in</goab-button>
157+
</div>
158+
<div slot="utilities">
159+
<goab-menu-button text="John Smith" type="tertiary" size="compact">
160+
<goab-menu-action text="User settings" action="user-settings"></goab-menu-action>
161+
<goab-menu-action text="Sign out" action="sign-out"></goab-menu-action>
162+
</goab-menu-button>
163+
</div>
164+
</goab-app-header>
165+
<goab-hero-banner
166+
heading="Hero banner"
167+
backgroundUrl="https://picsum.photos/1200/400?random=3"
168+
[actions]="heroActions"
169+
>
170+
<goab-text tag="p" size="body-l">
171+
Hero banner demonstrates background imagery and projected actions.
172+
</goab-text>
173+
</goab-hero-banner>
174+
<goab-block direction="row" gap="l" mt="m">
175+
<goab-side-menu>
176+
<goab-side-menu-heading>Menu heading</goab-side-menu-heading>
177+
<goab-side-menu-group heading="Group one">
178+
<a href="#">Link A</a>
179+
<a href="#">Link B</a>
180+
</goab-side-menu-group>
181+
<a href="#">Loose link</a>
182+
</goab-side-menu>
183+
<goab-page-block width="full">
184+
<goab-text tag="p" size="body-m">
185+
Content area with side menu demonstrates layout wrappers.
186+
</goab-text>
187+
</goab-page-block>
188+
</goab-block>
189+
</goab-column-layout>
190+
</goab-container>
191+
192+
<ng-template #heroActions>
193+
<goab-button type="primary">Get started</goab-button>
194+
<goab-button type="secondary">Secondary CTA</goab-button>
195+
</ng-template>
196+
197+
<ng-template #navigationTemplate>
198+
<a href="#">Dashboard</a>
199+
<goab-app-header-menu heading="Applications">
200+
<a href="#">New application</a>
201+
<a href="#">Active</a>
202+
<a href="#">Archived</a>
203+
</goab-app-header-menu>
204+
<a href="#">Help</a>
205+
</ng-template>
206+
207+
<ng-template #bigNavigationTemplate>
208+
<a href="#">Dashboard</a>
209+
<goab-app-header-menu heading="Applications">
210+
<a href="#">New application</a>
211+
<a href="#">Active</a>
212+
<a href="#">Archived</a>
213+
</goab-app-header-menu>
214+
<a href="#">Reports</a>
215+
<a href="#">Settings</a>
216+
<a href="#">File</a>
217+
<a href="#">Edit</a>
218+
<a href="#">View</a>
219+
<a href="#">Search</a>
220+
<a href="#">Filter</a>
221+
<a href="#">Help</a>
222+
</ng-template>
223+
224+
<ng-template #utilitiesTemplate>
225+
<goab-button type="tertiary" size="compact">Help</goab-button>
226+
<goab-menu-button text="John Smith" type="tertiary" size="compact">
227+
<goab-menu-action text="User settings" action="user-settings"></goab-menu-action>
228+
<goab-menu-action text="Sign out" action="sign-out"></goab-menu-action>
229+
</goab-menu-button>
230+
</ng-template>
231+
232+
<ng-template #bigUtilitiesTemplate>
233+
<goab-button type="tertiary" size="compact">Help</goab-button>
234+
<goab-button type="tertiary" size="compact" leadingIcon="person">Sign in</goab-button>
235+
<goab-button type="tertiary" size="compact">User settings</goab-button>
236+
<goab-button size="compact">Sign out</goab-button>
237+
</ng-template>
238+
239+
<ng-template #phaseTemplate>
240+
<goab-badge type="important" content="Service preview" />
241+
</ng-template>
242+
243+
<ng-template #bannerTemplate>
244+
<goab-text tag="span" size="body-xs" maxWidth="100%">
245+
v2.3.1 | PR Environment
246+
</goab-text>
247+
</ng-template>

‎apps/prs/angular/src/routes/bugs/3762/bug3762.component.ts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import {
2+
GoabAppHeader,
3+
GoabAppHeaderMenu,
4+
GoabBadge,
5+
GoabBlock,
6+
GoabButton,
7+
GoabColumnLayout,
8+
GoabContainer,
9+
GoabHeroBanner,
10+
GoabMenuAction,
11+
GoabMenuButton,
12+
GoabPageBlock,
13+
GoabSideMenu,
14+
GoabSideMenuGroup,
15+
GoabSideMenuHeading,
16+
GoabText,
17+
} from "@abgov/angular-components";
18+
import { Component } from "@angular/core";
19+
20+
@Component({
21+
standalone: true,
22+
selector: "abgov-bug3762",
23+
templateUrl: "./bug3762.component.html",
24+
imports: [
25+
GoabAppHeader,
26+
GoabAppHeaderMenu,
27+
GoabBadge,
28+
GoabBlock,
29+
GoabButton,
30+
GoabColumnLayout,
31+
GoabContainer,
32+
GoabHeroBanner,
33+
GoabMenuAction,
34+
GoabMenuButton,
35+
GoabPageBlock,
36+
GoabSideMenu,
37+
GoabSideMenuGroup,
38+
GoabSideMenuHeading,
39+
GoabText,
40+
],
41+
})
42+
export class Bug3762Component {}

‎apps/prs/angular/src/routes/bugs/3762/bug3762.route.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"type": "bug",
3+
"id": "3762",
4+
"path": "bugs/3762",
5+
"title": "AppHeader examples using slot property"
6+
}

‎apps/prs/angular/src/routes/docs/app-header/app-header.component.html‎

Lines changed: 47 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,36 +7,65 @@ <h3>With home link</h3>
77
<goab-app-header heading="My Application" url="/"></goab-app-header>
88

99
<h3>With secondary text</h3>
10-
<goab-app-header heading="My Application" secondaryText="Supporting information" url="/"></goab-app-header>
10+
<goab-app-header
11+
heading="My Application"
12+
secondaryText="Supporting information"
13+
url="/"
14+
></goab-app-header>
1115

1216
<h3>With utilities</h3>
13-
<goab-app-header heading="My Application" url="/">
14-
<goab-button slot="utilities" type="tertiary" size="compact">Help</goab-button>
15-
<goab-button slot="utilities" type="tertiary" size="compact" leadingIcon="person">Sign in</goab-button>
16-
</goab-app-header>
17+
<goab-app-header
18+
heading="My Application"
19+
url="/"
20+
[utilities]="utilitiesTemplate1"
21+
></goab-app-header>
22+
<ng-template #utilitiesTemplate1>
23+
<goab-button type="tertiary" size="compact">Help</goab-button>
24+
<goab-button type="tertiary" size="compact" leadingIcon="person">Sign in</goab-button>
25+
</ng-template>
1726

1827
<h3>With phase badge</h3>
19-
<goab-app-header heading="My Application" url="/">
20-
<goab-badge slot="phase" type="important" content="Service preview" [icon]="false"></goab-badge>
21-
</goab-app-header>
28+
<goab-app-header
29+
heading="My Application"
30+
url="/"
31+
[phase]="phaseTemplate"
32+
></goab-app-header>
33+
<ng-template #phaseTemplate>
34+
<goab-badge type="important" content="Service preview"></goab-badge>
35+
</ng-template>
2236

2337
<h3>Internal testing banner</h3>
24-
<goab-app-header heading="My Application" url="/">
25-
<span slot="banner" style="text-align: right; width: 100%; font-size: 12px; font-weight: normal">v2.3.1 | UAT Environment</span>
26-
</goab-app-header>
38+
<goab-app-header
39+
heading="My Application"
40+
url="/"
41+
[banner]="bannerTemplate"
42+
></goab-app-header>
43+
<ng-template #bannerTemplate>
44+
<span style="text-align: right; width: 100%; font-size: 12px; font-weight: normal">
45+
v2.3.1 | UAT Environment
46+
</span>
47+
</ng-template>
2748

2849
<h3>With navigation</h3>
29-
<goab-app-header heading="Service Portal" url="/">
30-
<a slot="navigation" href="#">Dashboard</a>
31-
<goab-app-header-menu slot="navigation" heading="Applications">
50+
<goab-app-header
51+
heading="Service Portal"
52+
url="/"
53+
[navigation]="navigationTemplate"
54+
[utilities]="utilitiesTemplate2"
55+
></goab-app-header>
56+
<ng-template #navigationTemplate>
57+
<a href="#">Dashboard</a>
58+
<goab-app-header-menu heading="Applications">
3259
<a href="#">New application</a>
3360
<a href="#">Active</a>
3461
<a href="#">Archived</a>
3562
</goab-app-header-menu>
36-
<a slot="navigation" href="#">Reports</a>
37-
<a slot="navigation" href="#">Settings</a>
38-
<goab-menu-button slot="utilities" text="John Smith" type="tertiary" size="compact">
63+
<a href="#">Reports</a>
64+
<a href="#">Settings</a>
65+
</ng-template>
66+
<ng-template #utilitiesTemplate2>
67+
<goab-menu-button text="John Smith" type="tertiary" size="compact">
3968
<goab-menu-action text="User settings" action="user-settings"></goab-menu-action>
4069
<goab-menu-action text="Sign out" action="sign-out"></goab-menu-action>
4170
</goab-menu-button>
42-
</goab-app-header>
71+
</ng-template>

‎apps/prs/react/src/app/routes/bugs/bug3762.route.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Bug3762Route } from "../../../routes/bugs/bug3762";
2+
import type { PrRouteDefinition } from "../../route-manifest";
3+
4+
export default {
5+
type: "bug",
6+
id: "3762",
7+
path: "bugs/3762",
8+
title: "AppHeader examples using slot property",
9+
component: Bug3762Route,
10+
} satisfies PrRouteDefinition;

0 commit comments

Comments
 (0)