feat(accordion): demo examples

AmadeusITGroup · Aug 25, 2023 · c91b1d6 · c91b1d6
1 parent 4c515aa
commit c91b1d6
Show file tree

Hide file tree

Showing 16 changed files with 864 additions and 7 deletions.
diff --git a/angular/demo/src/app/samples/accordion/customHeaders.route.ts b/angular/demo/src/app/samples/accordion/customHeaders.route.ts
@@ -0,0 +1,148 @@
+import {AgnosUIAngularModule} from '@agnos-ui/angular';
+import {Component} from '@angular/core';
+import {NgIf} from '@angular/common';
+
+@Component({
+	standalone: true,
+	imports: [AgnosUIAngularModule, NgIf],
+	template: `
+		<div auAccordion #accordion="auAccordion">
+			<div au-accordion-item>
+				<ng-template auAccordionItemStructure let-state="state" let-widget="widget">
+					<div
+						class="{{ state.itemHeaderClass }} accordion-button accordion-header custom-header justify-content-between"
+						[class.collapsed]="state.itemCollapsed"
+						role="heading"
+						aria-level="2"
+					>
+						<p class="m-0">First panel - {{ state.itemCollapsed ? 'collapsed' : 'opened' }}</p>
+						<button
+							type="button"
+							id="{{ state.itemId }}-toggle"
+							(click)="widget.actions.click()"
+							class="btn btn-link p-0 {{ state.itemButtonClass }}"
+							[class.collapsed]="state.itemCollapsed"
+							[disabled]="state.itemDisabled"
+							attr.aria-controls="{{ state.itemId }}-collapse"
+							[attr.aria-disabled]="state.itemDisabled"
+							[attr.aria-expanded]="!state.itemCollapsed"
+						>
+							Toggle first
+						</button>
+					</div>
+					<div
+						*ngIf="state!.shouldBeInDOM"
+						[auUse]="widget!.directives.collapseDirective"
+						attr.aria-labelledby="{{ state!.itemId }}-toggle"
+						id="{{ state!.itemId }}-collapse"
+						class="accordion-collapse {{ state!.itemCollapseClass }}"
+					>
+						<div class="accordion-body {{ state!.itemBodyClass }}">
+							Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat
+							skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
+							single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente
+							ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you
+							probably haven't heard of them accusamus labore sustainable VHS.
+						</div>
+					</div>
+				</ng-template>
+			</div>
+			<div au-accordion-item>
+				<ng-template auAccordionItemStructure let-state="state" let-widget="widget">
+					<div
+						class="{{ state.itemHeaderClass }} accordion-button accordion-header custom-header justify-content-between"
+						[class.collapsed]="state.itemCollapsed"
+						role="heading"
+						aria-level="2"
+					>
+						<p class="m-0">Second panel</p>
+						<div>
+							<button
+								type="button"
+								class="btn btn-sm btn-outline-primary me-2 {{ state.itemButtonClass }}"
+								[class.collapsed]="state.itemCollapsed"
+								id="{{ state.itemId }}-toggle"
+								(click)="widget.actions.click()"
+								[disabled]="state.itemDisabled"
+								[attr.aria-disabled]="state.itemDisabled"
+								[attr.aria-expanded]="!state.itemCollapsed"
+								attr.aria-controls="{{ state.itemId }}-collapse"
+							>
+								Toggle second
+							</button>
+							<button type="button" class="btn btn-sm btn-outline-secondary me-2" (click)="thirdDisabled = !thirdDisabled">
+								{{ thirdDisabled ? 'En' : 'Dis' }}able third
+							</button>
+							<button type="button" class="btn btn-sm btn-outline-danger me-2" (click)="accordion.api.collapseAll()">Collapse all</button>
+						</div>
+					</div>
+					<div
+						*ngIf="state!.shouldBeInDOM"
+						[auUse]="widget!.directives.collapseDirective"
+						attr.aria-labelledby="{{ state!.itemId }}-toggle"
+						id="{{ state!.itemId }}-collapse"
+						class="accordion-collapse {{ state!.itemCollapseClass }}"
+					>
+						<div class="accordion-body {{ state!.itemBodyClass }}">
+							Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat
+							skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
+							single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente
+							ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you
+							probably haven't heard of them accusamus labore sustainable VHS.
+						</div>
+					</div>
+				</ng-template>
+			</div>
+			<div au-accordion-item [itemDisabled]="thirdDisabled">
+				<ng-template auAccordionItemStructure let-state="state" let-widget="widget">
+					<div
+						class="{{ state.itemHeaderClass }} accordion-button accordion-header custom-header justify-content-between"
+						[class.collapsed]="state.itemCollapsed"
+						role="heading"
+						aria-level="2"
+					>
+						<button
+							type="button"
+							class="p-0 btn btn-link container-fluid text-start {{ state.itemButtonClass }}"
+							[class.collapsed]="state.itemCollapsed"
+							id="{{ state.itemId }}-toggle"
+							(click)="widget.actions.click()"
+							[disabled]="state.itemDisabled"
+							[attr.aria-disabled]="state.itemDisabled"
+							attr.aria-controls="{{ state.itemId }}-collapse"
+							[attr.aria-expanded]="!state.itemCollapsed"
+						>
+							Third panel
+						</button>
+						<p *ngIf="thirdDisabled" class="text-muted m-0 small">[I'm&nbsp;disabled]</p>
+					</div>
+					<div
+						*ngIf="state!.shouldBeInDOM"
+						[auUse]="widget!.directives.collapseDirective"
+						attr.aria-labelledby="{{ state!.itemId }}-toggle"
+						id="{{ state!.itemId }}-collapse"
+						class="accordion-collapse {{ state!.itemCollapseClass }}"
+					>
+						<div class="accordion-body {{ state!.itemBodyClass }}">
+							Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat
+							skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
+							single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente
+							ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you
+							probably haven't heard of them accusamus labore sustainable VHS.
+						</div>
+					</div>
+				</ng-template>
+			</div>
+		</div>
+	`,
+	styles: [
+		`
+			.custom-header::after {
+				content: none !important;
+			}
+		`,
+	],
+})
+export default class AccordionComponent {
+	thirdDisabled = false;
+}
diff --git a/angular/demo/src/app/samples/accordion/togglePanels.route.ts b/angular/demo/src/app/samples/accordion/togglePanels.route.ts
@@ -0,0 +1,38 @@
+import {AgnosUIAngularModule} from '@agnos-ui/angular';
+import {Component} from '@angular/core';
+import {NgFor} from '@angular/common';
+
+@Component({
+	standalone: true,
+	imports: [AgnosUIAngularModule, NgFor],
+	template: `
+		<div auAccordion #accordion="auAccordion">
+			<div au-accordion-item [itemId]="'first'">
+				<ng-template auAccordionItemHeader>First panel</ng-template>
+				<ng-template auAccordionItemBody
+					>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat
+					skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
+					single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
+					proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably
+					haven't heard of them accusamus labore sustainable VHS.
+				</ng-template>
+			</div>
+			<div au-accordion-item [itemId]="'second'" #itemTwo>
+				<ng-template auAccordionItemHeader>Second panel</ng-template>
+				<ng-template auAccordionItemBody
+					>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat
+					skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
+					single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
+					proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably
+					haven't heard of them accusamus labore sustainable VHS.
+				</ng-template>
+			</div>
+		</div>
+		<hr />
+		<button class="btn btn-sm btn-outline-primary me-2" (click)="accordion.api.toggle('first')">Toggle first</button>
+		<button class="btn btn-sm btn-outline-primary me-2" (click)="itemTwo.api.toggle()">Toggle second</button>
+		<button class="btn btn-sm btn-outline-primary me-2" (click)="accordion.api.expandAll()">Expand all</button>
+		<button class="btn btn-sm btn-outline-primary me-2" (click)="accordion.api.collapseAll()">Collapse all</button>
+	`,
+})
+export default class AccordionComponent {}
diff --git a/angular/lib/src/lib/accordion/accordion.component.ts b/angular/lib/src/lib/accordion/accordion.component.ts
@@ -99,10 +99,10 @@ export class AccordionItemStructureDirective {
 export class AccordionItemDefaultSlotsComponent {
 	@ViewChild('structure', {static: true}) structure: TemplateRef<AccordionItemContext>;
 }
-export const accordionItemDefaultslotItemStructure = new ComponentTemplate(AccordionItemDefaultSlotsComponent, 'structure');
+export const accordionItemDefaultSlotItemStructure = new ComponentTemplate(AccordionItemDefaultSlotsComponent, 'structure');
 
 const defaultConfig: Partial<AccordionItemProps> = {
-	slotItemStructure: accordionItemDefaultslotItemStructure,
+	slotItemStructure: accordionItemDefaultSlotItemStructure,
 };
 
 @Component({

diff --git a/angular/lib/src/lib/agnos-ui-angular.module.ts b/angular/lib/src/lib/agnos-ui-angular.module.ts
@@ -22,7 +22,13 @@ import {SelectComponent} from './select/select.component';
 import {UseDirective} from './transition/use.directive';
 import {SlotDirective} from './slot.directive';
 import {AlertComponent} from './alert/alert.component';
-import {AccordionDirective, AccordionItemComponent, AccordionHeaderDirective, AccordionBodyDirective} from './accordion/accordion.component';
+import {
+	AccordionDirective,
+	AccordionItemComponent,
+	AccordionHeaderDirective,
+	AccordionBodyDirective,
+	AccordionItemStructureDirective,
+} from './accordion/accordion.component';
 
 const components = [
 	SlotDirective,
@@ -49,6 +55,7 @@ const components = [
 	AccordionItemComponent,
 	AccordionHeaderDirective,
 	AccordionBodyDirective,
+	AccordionItemStructureDirective,
 ];
 
 @NgModule({

diff --git a/demo/src/routes/[framework]/components/accordion/examples/+page.svelte b/demo/src/routes/[framework]/components/accordion/examples/+page.svelte
@@ -1,13 +1,18 @@
 <script lang="ts">
 	import Sample from '../../../../../lib/layout/Sample.svelte';
 	import sampleDefault from '@agnos-ui/samples/accordion/default';
+	import togglePanels from '@agnos-ui/samples/accordion/togglePanels';
+	import customHeaders from '@agnos-ui/samples/accordion/customHeaders';
 	import LinkHeading from '$lib/link-heading/LinkHeading.svelte';
 </script>
 
-<LinkHeading label="Default" id="default" level={2} />
+<LinkHeading label="Default Accordion" id="default" level={2} />
 <Sample title="Default example" sample={sampleDefault} height={395} />
+<LinkHeading label="Toggle panels" id="togglePanels" level={2} />
+<Sample title="Toggle panels" sample={togglePanels} height={395} />
+<LinkHeading label="Custom Headers" id="customHeaders" level={2} />
+<Sample title="Custom Headers" sample={customHeaders} height={395} />
 
-<LinkHeading label="Accessibility" id="accessibility" level={2} />
 <p>
 	The accordion properly sets up <strong>aria-controls</strong> and <strong>aria-expanded</strong> on the collapsable items.
 </p>
diff --git a/e2e/accordion/accordion.e2e-spec.ts b/e2e/accordion/accordion.e2e-spec.ts
@@ -1,14 +1,14 @@
 import {expect, test} from '@playwright/test';
 import {AccordionPO} from '@agnos-ui/page-objects';
+import {AccordionTogglePanels} from '../demo-po/accordion.po';
 
 type PromiseValue<T> = T extends Promise<infer U> ? U : never;
 type State = PromiseValue<ReturnType<AccordionPO['state']>>;
 
 test.describe.parallel(`Accordion tests`, () => {
 	test(`Default accordion behaviour`, async ({page}) => {
-		const accordionPO = new AccordionPO(page, 0);
 		await page.goto('#/accordion/default');
-		await accordionPO.locatorRoot.waitFor();
+		const accordionPO = new AccordionPO(page, 0);
 
 		const itemsIds = await Promise.all((await accordionPO.locatorAccordionItems.all()).map((item) => item.getAttribute('id')));
 		const expectedState: State = {
@@ -59,4 +59,54 @@ test.describe.parallel(`Accordion tests`, () => {
 		expectedState.items[1].expanded = 'true';
 		expect(await accordionPO.state()).toEqual(expectedState);
 	});
+	test(`Toggle Panels`, async ({page}) => {
+		const accordionDemoPO = new AccordionTogglePanels(page);
+		await page.goto('#/accordion/togglepanels');
+		const accordionPO = new AccordionPO(page, 0);
+		await accordionDemoPO.locatorRoot.waitFor();
+		const itemsIds = await Promise.all((await accordionPO.locatorAccordionItems.all()).map((item) => item.getAttribute('id')));
+		const expectedState: State = {
+			items: [
+				{
+					classes: ['accordion-item'],
+					id: itemsIds[0]!,
+					isInDOM: true,
+					collapseId: `${itemsIds[0]!}-collapse`,
+					buttonId: `${itemsIds[0]!}-toggle`,
+					expanded: 'false',
+					disabled: 'false',
+					labeledBy: `${itemsIds[0]!}-toggle`,
+					buttonControls: `${itemsIds[0]!}-collapse`,
+				},
+				{
+					classes: ['accordion-item'],
+					id: itemsIds[1]!,
+					isInDOM: true,
+					collapseId: `${itemsIds[1]!}-collapse`,
+					buttonId: `${itemsIds[1]!}-toggle`,
+					expanded: 'false',
+					disabled: 'false',
+					labeledBy: `${itemsIds[1]!}-toggle`,
+					buttonControls: `${itemsIds[1]!}-collapse`,
+				},
+			],
+			rootClasses: ['accordion'],
+		};
+		expect(await accordionPO.state()).toEqual(expectedState);
+		await accordionDemoPO.locatorToggleFirst().click();
+		expectedState.items[0].expanded = 'true';
+		expect(await accordionPO.state()).toEqual(expectedState);
+		await accordionDemoPO.locatorToggleFirst().click();
+		await accordionDemoPO.locatorToggleSecond().click();
+		expectedState.items[0].expanded = 'false';
+		expectedState.items[1].expanded = 'true';
+		expect(await accordionPO.state()).toEqual(expectedState);
+		await accordionDemoPO.locatorExpandAll().click();
+		expectedState.items[0].expanded = 'true';
+		expect(await accordionPO.state()).toEqual(expectedState);
+		await accordionDemoPO.locatorCollapseAll().click();
+		expectedState.items[0].expanded = 'false';
+		expectedState.items[1].expanded = 'false';
+		expect(await accordionPO.state()).toEqual(expectedState);
+	});
 });
diff --git a/e2e/demo-po/accordion.po.ts b/e2e/demo-po/accordion.po.ts
@@ -6,3 +6,20 @@ export class AccordionDemoPO extends BasePO {
 		return '.container';
 	}
 }
+
+export class AccordionTogglePanels extends AccordionDemoPO {
+	locatorToggleFirst() {
+		return this.locatorRoot.getByText('Toggle first');
+	}
+	locatorToggleSecond() {
+		return this.locatorRoot.getByText('Toggle second');
+	}
+	locatorExpandAll() {
+		return this.locatorRoot.getByText('Expand all');
+	}
+	locatorCollapseAll() {
+		return this.locatorRoot.getByText('Collapse all');
+	}
+}
+
+export class AccordionCustomHeaders extends AccordionDemoPO {}