Skip to content

Commit 045dee9

Browse files
twjefferytwjeffery
committed
feat(#2469): add push drawer experimental wrappers
Add GoabxPushDrawer experimental wrappers for React and Angular with version="2" default. Add version prop to PushDrawer and PushDrawerInternal Svelte components. Add version to standard React wrapper WCProps to avoid TS IntrinsicElements conflict. React: 4 tests, Angular: 1 test.
1 parent e59b7b0 commit 045dee9

12 files changed

Lines changed: 381 additions & 23 deletions

File tree

‎docs/src/content/examples/filter-a-list-using-a-push-drawer/react.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
GoabxTable,
1010
GoabxBadge,
1111
} from "@abgov/react-components/experimental";
12-
import { GoabPushDrawer } from "@abgov/react-components";
12+
import { GoabxPushDrawer } from "@abgov/react-components/experimental";
1313

1414
export function FilterAListUsingAPushDrawer() {
1515
const [open, setOpen] = useState(false);
@@ -94,7 +94,7 @@ export function FilterAListUsingAPushDrawer() {
9494
</GoabxTable>
9595
</div>
9696

97-
<GoabPushDrawer
97+
<GoabxPushDrawer
9898
heading="Filters"
9999
width="260px"
100100
open={open}
@@ -123,7 +123,7 @@ export function FilterAListUsingAPushDrawer() {
123123
<GoabxDropdownItem value="completed" label="Completed" />
124124
</GoabxDropdown>
125125
</GoabxFormItem>
126-
</GoabPushDrawer>
126+
</GoabxPushDrawer>
127127
</div>
128128
);
129129
}

‎docs/src/content/examples/filter-a-list-using-a-push-drawer/web-components.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ <h3 style="flex: 1; margin: 0">All cases</h3>
6464
</goa-table>
6565
</div>
6666

67-
<goa-push-drawer id="filters-drawer" heading="Filters" width="260px">
67+
<goa-push-drawer version="2" id="filters-drawer" heading="Filters" width="260px">
6868
<goa-form-item version="2" label="Act">
6969
<goa-checkbox-list name="act">
7070
<goa-checkbox

‎docs/src/data/configurations/push-drawer.ts‎

Lines changed: 96 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const pushDrawerConfigurations: ComponentConfigurations = {
2727
name: "Basic push drawer",
2828
description: "Opens from the right, pushing page content aside",
2929
code: {
30-
react: `<GoabPushDrawer heading="Application details" width="260px" open={isOpen} onClose={handleClose}>
30+
react: `<GoabxPushDrawer heading="Application details" width="260px" open={isOpen} onClose={handleClose}>
3131
<GoabText tag="h4" size="heading-xs" mb="s" mt="none">Applicant name</GoabText>
3232
<GoabText size="body-m" mt="none">Jane Smith</GoabText>
3333
<GoabText tag="h4" size="heading-xs" mb="s" mt="none">File number</GoabText>
@@ -36,8 +36,8 @@ export const pushDrawerConfigurations: ComponentConfigurations = {
3636
<GoabxBadge type="success" content="Approved" />
3737
<GoabText tag="h4" size="heading-xs" mb="s" mt="m">Submitted</GoabText>
3838
<GoabText size="body-m" mt="none">January 15, 2025</GoabText>
39-
</GoabPushDrawer>`,
40-
angular: `<goab-push-drawer heading="Application details" width="260px" [open]="isOpen" (onClose)="handleClose()">
39+
</GoabxPushDrawer>`,
40+
angular: `<goabx-push-drawer heading="Application details" width="260px" [open]="isOpen" (onClose)="handleClose()">
4141
<goab-text tag="h4" size="heading-xs" mb="s" mt="none">Applicant name</goab-text>
4242
<goab-text size="body-m" mt="none">Jane Smith</goab-text>
4343
<goab-text tag="h4" size="heading-xs" mb="s" mt="none">File number</goab-text>
@@ -46,7 +46,7 @@ export const pushDrawerConfigurations: ComponentConfigurations = {
4646
<goab-badge version="2" type="success" content="Approved"></goab-badge>
4747
<goab-text tag="h4" size="heading-xs" mb="s" mt="m">Submitted</goab-text>
4848
<goab-text size="body-m" mt="none">January 15, 2025</goab-text>
49-
</goab-push-drawer>`,
49+
</goabx-push-drawer>`,
5050
webComponents: `<div style="display: flex; min-height: 320px;">
5151
<div style="flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;">
5252
<goa-button version="2" id="open-push-drawer">Open push drawer</goa-button>
@@ -70,22 +70,22 @@ export const pushDrawerConfigurations: ComponentConfigurations = {
7070
name: "Custom width",
7171
description: "Push drawer with a custom width",
7272
code: {
73-
react: `<GoabPushDrawer heading="Case notes" width="600px" open={isOpen} onClose={handleClose}>
73+
react: `<GoabxPushDrawer heading="Case notes" width="600px" open={isOpen} onClose={handleClose}>
7474
<GoabText tag="h4" size="heading-xs" mb="s" mt="none">Officer</GoabText>
7575
<GoabText size="body-m" mt="none">Const. M. Roberts, Badge #4412</GoabText>
7676
<GoabText tag="h4" size="heading-xs" mb="s" mt="none">Date</GoabText>
7777
<GoabText size="body-m" mt="none">February 3, 2025</GoabText>
7878
<GoabText tag="h4" size="heading-xs" mb="s" mt="none">Notes</GoabText>
7979
<GoabText size="body-m" mt="none">Applicant provided updated documentation. Reviewed supporting evidence and confirmed eligibility criteria are met. Forwarded to supervisor for final approval.</GoabText>
80-
</GoabPushDrawer>`,
81-
angular: `<goab-push-drawer heading="Case notes" width="600px" [open]="isOpen" (onClose)="handleClose()">
80+
</GoabxPushDrawer>`,
81+
angular: `<goabx-push-drawer heading="Case notes" width="600px" [open]="isOpen" (onClose)="handleClose()">
8282
<goab-text tag="h4" size="heading-xs" mb="s" mt="none">Officer</goab-text>
8383
<goab-text size="body-m" mt="none">Const. M. Roberts, Badge #4412</goab-text>
8484
<goab-text tag="h4" size="heading-xs" mb="s" mt="none">Date</goab-text>
8585
<goab-text size="body-m" mt="none">February 3, 2025</goab-text>
8686
<goab-text tag="h4" size="heading-xs" mb="s" mt="none">Notes</goab-text>
8787
<goab-text size="body-m" mt="none">Applicant provided updated documentation. Reviewed supporting evidence and confirmed eligibility criteria are met. Forwarded to supervisor for final approval.</goab-text>
88-
</goab-push-drawer>`,
88+
</goabx-push-drawer>`,
8989
webComponents: `<div style="display: flex; min-height: 320px;">
9090
<div style="flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;">
9191
<goa-button version="2" id="open-push-drawer">Open push drawer</goa-button>
@@ -107,7 +107,7 @@ export const pushDrawerConfigurations: ComponentConfigurations = {
107107
name: "With actions",
108108
description: "Push drawer with footer actions",
109109
code: {
110-
react: `<GoabPushDrawer
110+
react: `<GoabxPushDrawer
111111
heading="Edit notification preferences"
112112
width="280px"
113113
open={isOpen}
@@ -126,8 +126,8 @@ export const pushDrawerConfigurations: ComponentConfigurations = {
126126
<GoabxCheckbox name="assignments" text="New assignments" />
127127
</GoabxCheckboxList>
128128
</GoabxFormItem>
129-
</GoabPushDrawer>`,
130-
angular: `<goab-push-drawer
129+
</GoabxPushDrawer>`,
130+
angular: `<goabx-push-drawer
131131
heading="Edit notification preferences"
132132
width="280px"
133133
[open]="isOpen"
@@ -141,7 +141,7 @@ export const pushDrawerConfigurations: ComponentConfigurations = {
141141
<goabx-checkbox name="assignments" text="New assignments"></goabx-checkbox>
142142
</goabx-checkbox-list>
143143
</goabx-form-item>
144-
</goab-push-drawer>
144+
</goabx-push-drawer>
145145
146146
<ng-template #pushDrawerActions>
147147
<goab-button-group alignment="start">
@@ -167,6 +167,90 @@ export const pushDrawerConfigurations: ComponentConfigurations = {
167167
</goa-button-group>
168168
</goa-push-drawer>
169169
</div>
170+
<script>${pushDrawerScript}</script>`,
171+
},
172+
},
173+
{
174+
id: "long-content",
175+
name: "Long content",
176+
description:
177+
"Content that exceeds the drawer height scrolls while the header and actions stay pinned",
178+
code: {
179+
react: `<GoabxPushDrawer
180+
heading="Case history"
181+
width="320px"
182+
open={isOpen}
183+
onClose={handleClose}
184+
actions={
185+
<GoabButtonGroup alignment="start">
186+
<GoabxButton size="compact">Export</GoabxButton>
187+
<GoabxButton type="secondary" size="compact">Close</GoabxButton>
188+
</GoabButtonGroup>
189+
}
190+
>
191+
<GoabText tag="h4" size="heading-xs" mb="s" mt="none">Jan 15, 2025</GoabText>
192+
<GoabText size="body-m" mt="none">Application received. Initial review completed by intake officer. All required documents present.</GoabText>
193+
<GoabText tag="h4" size="heading-xs" mb="s" mt="l">Feb 3, 2025</GoabText>
194+
<GoabText size="body-m" mt="none">Background check initiated. Applicant contacted for additional verification of employment history.</GoabText>
195+
<GoabText tag="h4" size="heading-xs" mb="s" mt="l">Feb 18, 2025</GoabText>
196+
<GoabText size="body-m" mt="none">Employment verification received. Forwarded to senior reviewer for assessment.</GoabText>
197+
<GoabText tag="h4" size="heading-xs" mb="s" mt="l">Mar 1, 2025</GoabText>
198+
<GoabText size="body-m" mt="none">Senior review complete. Recommendation for approval pending supervisor sign-off.</GoabText>
199+
<GoabText tag="h4" size="heading-xs" mb="s" mt="l">Mar 10, 2025</GoabText>
200+
<GoabText size="body-m" mt="none">Supervisor approved. Final documentation prepared for applicant notification.</GoabText>
201+
<GoabText tag="h4" size="heading-xs" mb="s" mt="l">Mar 12, 2025</GoabText>
202+
<GoabText size="body-m" mt="none">Approval letter sent to applicant via registered mail. Case marked as complete.</GoabText>
203+
</GoabxPushDrawer>`,
204+
angular: `<goabx-push-drawer
205+
heading="Case history"
206+
width="320px"
207+
[open]="isOpen"
208+
(onClose)="handleClose()"
209+
[actions]="pushDrawerActions"
210+
>
211+
<goab-text tag="h4" size="heading-xs" mb="s" mt="none">Jan 15, 2025</goab-text>
212+
<goab-text size="body-m" mt="none">Application received. Initial review completed by intake officer. All required documents present.</goab-text>
213+
<goab-text tag="h4" size="heading-xs" mb="s" mt="l">Feb 3, 2025</goab-text>
214+
<goab-text size="body-m" mt="none">Background check initiated. Applicant contacted for additional verification of employment history.</goab-text>
215+
<goab-text tag="h4" size="heading-xs" mb="s" mt="l">Feb 18, 2025</goab-text>
216+
<goab-text size="body-m" mt="none">Employment verification received. Forwarded to senior reviewer for assessment.</goab-text>
217+
<goab-text tag="h4" size="heading-xs" mb="s" mt="l">Mar 1, 2025</goab-text>
218+
<goab-text size="body-m" mt="none">Senior review complete. Recommendation for approval pending supervisor sign-off.</goab-text>
219+
<goab-text tag="h4" size="heading-xs" mb="s" mt="l">Mar 10, 2025</goab-text>
220+
<goab-text size="body-m" mt="none">Supervisor approved. Final documentation prepared for applicant notification.</goab-text>
221+
<goab-text tag="h4" size="heading-xs" mb="s" mt="l">Mar 12, 2025</goab-text>
222+
<goab-text size="body-m" mt="none">Approval letter sent to applicant via registered mail. Case marked as complete.</goab-text>
223+
</goabx-push-drawer>
224+
225+
<ng-template #pushDrawerActions>
226+
<goab-button-group alignment="start">
227+
<goabx-button size="compact">Export</goabx-button>
228+
<goabx-button type="secondary" size="compact">Close</goabx-button>
229+
</goab-button-group>
230+
</ng-template>`,
231+
webComponents: `<div style="display: flex; min-height: 320px;">
232+
<div style="flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;">
233+
<goa-button version="2" id="open-push-drawer">Open push drawer</goa-button>
234+
</div>
235+
<goa-push-drawer version="2" id="demo-push-drawer" heading="Case history" width="320px">
236+
<goa-text tag="h4" size="heading-xs" mb="s" mt="none">Jan 15, 2025</goa-text>
237+
<goa-text size="body-m" mt="none">Application received. Initial review completed by intake officer. All required documents present.</goa-text>
238+
<goa-text tag="h4" size="heading-xs" mb="s" mt="l">Feb 3, 2025</goa-text>
239+
<goa-text size="body-m" mt="none">Background check initiated. Applicant contacted for additional verification of employment history.</goa-text>
240+
<goa-text tag="h4" size="heading-xs" mb="s" mt="l">Feb 18, 2025</goa-text>
241+
<goa-text size="body-m" mt="none">Employment verification received. Forwarded to senior reviewer for assessment.</goa-text>
242+
<goa-text tag="h4" size="heading-xs" mb="s" mt="l">Mar 1, 2025</goa-text>
243+
<goa-text size="body-m" mt="none">Senior review complete. Recommendation for approval pending supervisor sign-off.</goa-text>
244+
<goa-text tag="h4" size="heading-xs" mb="s" mt="l">Mar 10, 2025</goa-text>
245+
<goa-text size="body-m" mt="none">Supervisor approved. Final documentation prepared for applicant notification.</goa-text>
246+
<goa-text tag="h4" size="heading-xs" mb="s" mt="l">Mar 12, 2025</goa-text>
247+
<goa-text size="body-m" mt="none">Approval letter sent to applicant via registered mail. Case marked as complete.</goa-text>
248+
<goa-button-group slot="actions" alignment="start">
249+
<goa-button version="2" size="compact">Export</goa-button>
250+
<goa-button version="2" type="secondary" size="compact">Close</goa-button>
251+
</goa-button-group>
252+
</goa-push-drawer>
253+
</div>
170254
<script>${pushDrawerScript}</script>`,
171255
},
172256
},

‎libs/angular-components/src/experimental/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export * from "./checkbox/checkbox";
88
export * from "./checkbox-list/checkbox-list";
99
export * from "./date-picker/date-picker";
1010
export * from "./drawer/drawer";
11+
export * from "./push-drawer/push-drawer";
1112
export * from "./dropdown/dropdown";
1213
export * from "./dropdown-item/dropdown-item";
1314
export * from "./file-upload-card/file-upload-card";

‎libs/angular-components/src/experimental/push-drawer/push-drawer.spec.ts‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { ComponentFixture, TestBed, fakeAsync, tick } from "@angular/core/testing";
2+
import { GoabxPushDrawer } from "./push-drawer";
3+
import { Component } from "@angular/core";
4+
5+
@Component({
6+
standalone: true,
7+
imports: [GoabxPushDrawer],
8+
template: `
9+
<goabx-push-drawer
10+
[open]="open"
11+
[width]="width"
12+
[testId]="testId"
13+
(onClose)="onClose()"
14+
[heading]="heading"
15+
[actions]="actions"
16+
>
17+
{{ content }}
18+
<ng-template #heading>
19+
<h1>Heading</h1>
20+
</ng-template>
21+
<ng-template #actions>
22+
<button>Close</button>
23+
</ng-template>
24+
</goabx-push-drawer>
25+
`,
26+
})
27+
class TestPushDrawerComponent {
28+
open = false;
29+
width = "600px";
30+
testId = "test-push-drawer";
31+
content = "Test Content";
32+
33+
onClose() {
34+
/* empty */
35+
}
36+
}
37+
38+
describe("GoabxPushDrawer", () => {
39+
let component: TestPushDrawerComponent;
40+
let fixture: ComponentFixture<TestPushDrawerComponent>;
41+
42+
beforeEach(fakeAsync(() => {
43+
TestBed.configureTestingModule({
44+
imports: [TestPushDrawerComponent],
45+
}).compileComponents();
46+
47+
fixture = TestBed.createComponent(TestPushDrawerComponent);
48+
component = fixture.componentInstance;
49+
fixture.detectChanges();
50+
tick();
51+
fixture.detectChanges();
52+
}));
53+
54+
it("renders with correct attributes", fakeAsync(() => {
55+
const pushDrawerElement = fixture.nativeElement.querySelector("goa-push-drawer");
56+
expect(pushDrawerElement).toBeTruthy();
57+
58+
expect(pushDrawerElement.getAttribute("width")).toBe("600px");
59+
expect(pushDrawerElement.getAttribute("testid")).toBe("test-push-drawer");
60+
expect(pushDrawerElement.getAttribute("version")).toBe("2");
61+
const headingContent = pushDrawerElement.querySelector("[slot='heading']");
62+
expect(headingContent?.textContent).toContain("Heading");
63+
expect(pushDrawerElement.textContent).toContain("Test Content");
64+
const actionsContent = pushDrawerElement.querySelector("[slot='actions']");
65+
expect(actionsContent?.textContent).toContain("Close");
66+
}));
67+
});

‎libs/angular-components/src/experimental/push-drawer/push-drawer.ts‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { NgTemplateOutlet } from "@angular/common";
2+
import {
3+
booleanAttribute,
4+
Component,
5+
CUSTOM_ELEMENTS_SCHEMA,
6+
EventEmitter,
7+
Input,
8+
Output,
9+
TemplateRef,
10+
OnInit,
11+
ChangeDetectorRef,
12+
} from "@angular/core";
13+
14+
@Component({
15+
standalone: true,
16+
selector: "goabx-push-drawer",
17+
imports: [NgTemplateOutlet],
18+
template: `@if (isReady) {
19+
<goa-push-drawer
20+
[open]="open"
21+
[attr.heading]="getHeadingAsString()"
22+
[attr.testid]="testId"
23+
[attr.width]="width"
24+
[attr.version]="version"
25+
(_close)="_onClose()"
26+
>
27+
<ng-content></ng-content>
28+
<div slot="heading">
29+
<ng-container [ngTemplateOutlet]="getHeadingAsTemplate()"></ng-container>
30+
</div>
31+
@if (actions) {
32+
<div slot="actions">
33+
<ng-container [ngTemplateOutlet]="actions"></ng-container>
34+
</div>
35+
}
36+
</goa-push-drawer>
37+
} `,
38+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
39+
})
40+
export class GoabxPushDrawer implements OnInit {
41+
version = "2";
42+
43+
@Input({ transform: booleanAttribute }) open?: boolean;
44+
@Input() heading!: string | TemplateRef<any>;
45+
@Input() width?: string;
46+
@Input() testId?: string;
47+
@Input() actions!: TemplateRef<any>;
48+
@Output() onClose = new EventEmitter();
49+
50+
isReady = false;
51+
52+
constructor(private cdr: ChangeDetectorRef) {}
53+
54+
ngOnInit(): void {
55+
setTimeout(() => {
56+
this.isReady = true;
57+
this.cdr.detectChanges();
58+
}, 0);
59+
}
60+
61+
_onClose() {
62+
this.onClose.emit();
63+
}
64+
65+
getHeadingAsString(): string {
66+
return this.heading instanceof TemplateRef ? "" : this.heading;
67+
}
68+
69+
getHeadingAsTemplate(): TemplateRef<any> | null {
70+
if (!this.heading) return null;
71+
return this.heading instanceof TemplateRef ? this.heading : null;
72+
}
73+
}

‎libs/react-components/src/experimental/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export * from "./checkbox/checkbox";
88
export * from "./checkbox-list/checkbox-list";
99
export * from "./date-picker/date-picker";
1010
export * from "./drawer/drawer";
11+
export * from "./push-drawer/push-drawer";
1112
export * from "./dropdown/dropdown";
1213
export * from "./dropdown/dropdown-item";
1314
export * from "./file-upload-card/file-upload-card";

0 commit comments

Comments
 (0)