feat: improved doc, resizable observer on root element and slight dis…

…play improvements (#82)
AmadeusITGroup · Aug 17, 2023 · 4c71c4a · 4c71c4a
1 parent 44be31d
commit 4c71c4a
Show file tree

Hide file tree

Showing 35 changed files with 188 additions and 265 deletions.
diff --git a/angular/demo/src/app/samples/alert/icon.route.ts b/angular/demo/src/app/samples/alert/icon.route.ts
@@ -39,7 +39,7 @@ export default class IconAlertComponent {
 	providers: [SlotDirective],
 	template: `
 		<ng-template #iconDemo let-state="state" let-widget="widget">
-			<span class="d-flex align-items-center svg icon-20 me-1" [innerHTML]="sanitizer.bypassSecurityTrustHtml(typeIcon[state.type])"> </span>
+			<span class="d-flex align-items-center me-2" [innerHTML]="sanitizer.bypassSecurityTrustHtml(typeIcon[state.type])"> </span>
 			<div class="d-flex w-100 alert-body">
 				<ng-template [auSlot]="state.slotDefault" [auSlotProps]="{widget, state}"></ng-template>
 				<button

diff --git a/angular/demo/src/app/samples/pagination/custom.route.ts b/angular/demo/src/app/samples/pagination/custom.route.ts
@@ -10,15 +10,15 @@ const FILTER_PAG_REGEX = /[^0-9]/g;
 	imports: [AgnosUIAngularModule, NgIf],
 	template: `
 		<p>A pagination with customized links:</p>
-		<nav au-pagination [collectionSize]="70" [(page)]="customPage" ariaLabel="Page navigation with customized links">
+		<nav au-pagination [collectionSize]="60" [(page)]="customPage" ariaLabel="Page navigation with customized links">
 			<ng-template auPaginationPrevious>Prev</ng-template>
 			<ng-template auPaginationNext>Next</ng-template>
 			<ng-template auPaginationNumber let-displayedPage="displayedPage">{{ getPageSymbol(displayedPage) }}</ng-template>
 		</nav>
 		<hr />
 
 		<p>A pagination with customized pages:</p>
-		<nav au-pagination [collectionSize]="70" [(page)]="customPage" ariaLabel="Page navigation with customized pages">
+		<nav au-pagination [collectionSize]="60" [(page)]="customPage" ariaLabel="Page navigation with customized pages">
 			<ng-template auPaginationPages let-widget="widget" let-state="state">
 				<li class="au-custom-pages-item" *ngIf="state.pages.length > 0">
 					<div class="mb-3 d-flex flex-nowrap px-2">
@@ -48,7 +48,7 @@ export default class PaginationComponent {
 	customPage = 4;
 
 	getPageSymbol(displayedPage: number) {
-		return ['A', 'B', 'C', 'D', 'E', 'F', 'G'][displayedPage - 1];
+		return ['A', 'B', 'C', 'D', 'E', 'F'][displayedPage - 1];
 	}
 
 	formatInput(input: HTMLInputElement) {

diff --git a/angular/demo/src/app/samples/pagination/default.route.ts b/angular/demo/src/app/samples/pagination/default.route.ts
@@ -6,20 +6,20 @@ import {Component} from '@angular/core';
 	imports: [AgnosUIAngularModule],
 	template: `
 		<h5>Default pagination:</h5>
-		<nav au-pagination [(page)]="page" [collectionSize]="70"></nav>
+		<nav au-pagination [(page)]="page" [collectionSize]="60"></nav>
 
 		<h5>No direction links:</h5>
-		<nav au-pagination [collectionSize]="70" [(page)]="page" [directionLinks]="false"></nav>
+		<nav au-pagination [collectionSize]="60" [(page)]="page" [directionLinks]="false"></nav>
 
 		<h5>With boundary links:</h5>
-		<nav au-pagination [collectionSize]="70" [(page)]="page" [boundaryLinks]="true"></nav>
+		<nav au-pagination [collectionSize]="60" [(page)]="page" [boundaryLinks]="true"></nav>
 
 		<div class="mb-3">
 			Current page: <span id="defaultPage">{{ page }}</span>
 		</div>
 
 		<h5>Disabled pagination:</h5>
-		<nav au-pagination [collectionSize]="70" [(page)]="pageAlone" ariaLabel="Disabled pagination" [disabled]="true"></nav>
+		<nav au-pagination [collectionSize]="60" [(page)]="pageAlone" ariaLabel="Disabled pagination" [disabled]="true"></nav>
 	`,
 })
 export default class DefaultPaginationComponent {

diff --git a/angular/demo/src/index.html b/angular/demo/src/index.html
@@ -8,6 +8,8 @@
 		<link rel="icon" type="image/x-icon" href="favicon.ico" />
 	</head>
 	<body>
-		<app-root id="root"></app-root>
+		<div id="root">
+			<app-root></app-root>
+		</div>
 	</body>
 </html>
diff --git a/angular/lib/src/lib/alert/alert.component.ts b/angular/lib/src/lib/alert/alert.component.ts
@@ -91,7 +91,7 @@ const defaultConfig: Partial<AlertProps> = {
 export class AlertComponent implements OnChanges, AfterContentChecked {
 	/**
 	 * Type of the alert.
-	 * The are the following types: 'success', 'info', 'warning', 'danger', 'primary', 'secondary', 'light' and 'dark'.
+	 * There are the following types: 'success', 'info', 'warning', 'danger', 'primary', 'secondary', 'light' and 'dark'.
 	 */
 	@Input()
 	type: string | undefined;

diff --git a/core/lib/alert.ts b/core/lib/alert.ts
@@ -17,7 +17,7 @@ export interface AlertCommonPropsAndState {
 
 	/**
 	 * Type of the alert.
-	 * The are the following types: 'success', 'info', 'warning', 'danger', 'primary', 'secondary', 'light' and 'dark'.
+	 * There are the following types: 'success', 'info', 'warning', 'danger', 'primary', 'secondary', 'light' and 'dark'.
 	 */
 	type: string;
 

diff --git a/demo/src/lib/layout/Sample.svelte b/demo/src/lib/layout/Sample.svelte
@@ -33,7 +33,8 @@
 	 */
 	export let sample: SampleInfo;
 
-	export let height: number | undefined = undefined;
+	export let noresize = false;
+	export let height: number;
 
 	/**
 	 * Object to be stringified and sent in the parameter of the iframe url.
@@ -82,13 +83,13 @@
 	const baseId = `sample-${id}`;
 	$: sampleBaseUrl = `${$pathToRoot$}${$selectedFramework$}/samples/#/${path}`;
 	$: sampleUrl = sampleBaseUrl + (urlParameters ? `#${JSON.stringify(urlParameters)}` : '');
-	$: sampleBaseUrl, (iframeLoaded = false);
 
-	let iframeLoaded = false;
+	let iframeLoaded = true;
 	let resizeObserver: ResizeObserver;
-	let iframeHeight = 50;
-	function onLoad(event: Event) {
-		iframeLoaded = true;
+
+	let iframeHeight = 0;
+
+	const setupObserver = (iframe: HTMLIFrameElement) => {
 		if (!resizeObserver) {
 			resizeObserver = new ResizeObserver((entries) => {
 				if (entries.length === 1) {
@@ -97,16 +98,40 @@
 			});
 		}
 		resizeObserver.disconnect();
-		if (event.target instanceof HTMLIFrameElement && event.target.contentDocument) {
-			resizeObserver.observe(event.target.contentDocument.body);
+		const root = iframe.contentDocument?.getElementById('root');
+		if (root) {
+			resizeObserver.observe(root);
+		}
+	};
+
+	const updateLoaded = (iframe: HTMLIFrameElement, baseSrc: string) => {
+		const update = (baseSrc: string) => {
+			if (!iframe.contentWindow?.location?.href?.startsWith(baseSrc)) {
+				iframeLoaded = false;
+			}
+		};
+		update(baseSrc);
+		// the onLoad event is never called when loading a tab that was discarded through Chrome Tab Discarding
+		// so we use the first execution of this directive to check if the iframe is loaded and if we can setup a resize observer
+		if (iframe.contentDocument?.getElementById('root')) {
+			setupObserver(iframe);
+		}
+		return {
+			update,
+		};
+	};
+	function onLoad(event: Event) {
+		iframeLoaded = true;
+		if (event.target instanceof HTMLIFrameElement) {
+			setupObserver(event.target);
 		}
 	}
 	onDestroy(() => {
 		resizeObserver?.disconnect();
 	});
 </script>
 
-<div class="my-4 py-2 px-0 px-sm-3">
+<div class="mb-4 py-2 px-0 px-sm-3">
 	<div class="btn-toolbar d-flex align-items-center" role="toolbar" aria-label="Toolbar with button groups">
 		{#if showCodeButton}
 			<div class="btn-group btn-group-sm me-2" role="group" aria-label="Toggle code">
@@ -136,25 +161,31 @@
 	</div>
 	<div class="row">
 		{#if showCode}
-			<div class="col-auto my-2">
+			<div class="col-12 my-2">
 				<Lazy component={() => import('./Code.svelte')} {code} {fileName}>
 					<div class="spinner-border text-primary" role="status">
 						<span class="visually-hidden">Loading...</span>
 					</div>
 				</Lazy>
 			</div>
 		{/if}
-		<div class="col-sm-12">
+		<div class="col-sm-12 position-relative mt-3">
 			{#if !iframeLoaded}
-				<div class="position-relative">
-					<div class="position-absolute start-50 translate-middle-x iframeSpinner">
-						<div class="spinner-border text-primary" role="status">
-							<span class="visually-hidden">Loading...</span>
-						</div>
+				<div class="position-absolute top-50 start-50 translate-middle iframeSpinner">
+					<div class="spinner-border text-primary" role="status">
+						<span class="visually-hidden">Loading...</span>
 					</div>
 				</div>
 			{/if}
-			<iframe class="demo-sample border rounded mt-3" use:iframeSrc={sampleUrl} {title} height={height ?? iframeHeight} on:load={onLoad} />
+			<iframe
+				class="demo-sample border rounded"
+				use:iframeSrc={sampleUrl}
+				{title}
+				height={noresize ? height : iframeHeight || height}
+				use:updateLoaded={sampleBaseUrl}
+				on:load={onLoad}
+				loading="lazy"
+			/>
 		</div>
 	</div>
 </div>

diff --git a/demo/src/lib/layout/playground/Playground.svelte b/demo/src/lib/layout/playground/Playground.svelte
@@ -10,14 +10,15 @@
 	export let config: Record<string, any>;
 	export let doc: WidgetDoc;
 	export let types: Record<string, string> = {};
-	export let height: number | undefined = undefined;
+	export let height = 100;
+	export let noresize = false;
 
 	const {values$, sampleParameters$, help$} = createPlayground({config, types, doc});
 </script>
 
 <div class="row">
 	<div class="col">
-		<Sample title="Configuration" {sample} urlParameters={$sampleParameters$} showCodeButton={false} {height} />
+		<Sample title="Configuration" {sample} urlParameters={$sampleParameters$} showCodeButton={false} {height} {noresize} />
 	</div>
 </div>
 <div class="row">

diff --git a/demo/src/lib/layout/playground/PlaygroundLine.svelte b/demo/src/lib/layout/playground/PlaygroundLine.svelte
@@ -11,7 +11,7 @@
 </script>
 
 <tr>
-	<td class="align-middle"> <button class="btn btn-link align-middle" on:click={() => showHelp(key)}>{key}</button></td>
+	<td> <button class="btn btn-link align-middle" on:click={() => showHelp(key)}>{key}</button></td>
 	<PlaygroundValue {type} {defaultValue} api={config} placeholder={defaultValue} ariaLabel="property {key} config input" />
 	<PlaygroundValue {type} {defaultValue} api={prop} ariaLabel="property {key} value input" />
 </tr>

diff --git a/demo/src/lib/layout/playground/playground.ts b/demo/src/lib/layout/playground/playground.ts
@@ -137,9 +137,7 @@ export function createPlayground({config: defautConfig, types, doc}: PlaygroundP
 		sampleParameters$,
 		help$,
 		showHelp(key: string) {
-			helpKey$.update((helpKey) => {
-				return helpKey === key ? undefined : key;
-			});
+			helpKey$.update((helpKey) => (helpKey === key ? undefined : key));
 		},
 	};
 	setPlaygroundContext(api);

diff --git a/demo/src/routes/+page.svelte b/demo/src/routes/+page.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <svelte:head>
-	<title>AgsnoUI - Home page</title>
+	<title>AgnosUI - Home page</title>
 	<meta name="description" content="Svelte demo app" />
 </svelte:head>
 
@@ -42,13 +42,13 @@
 
 	<h4 class="text-center mt-4 mt-md-5">For a comprehensive understanding of AgnosUI's features and usage,<br />feel free to explore our demo</h4>
 	<div class="d-flex links d-flex justify-content-evenly">
-		<a href="angular/components/alert/examples" aria-label="link to angular examples" title="Angular">
+		<a href="angular/components/accordion/examples" aria-label="link to angular examples" title="Angular">
 			<Svg svg={angularLogo} className="framework-logo" />
 		</a>
-		<a href="react/components/alert/examples" aria-label="link to react examples" title="React">
+		<a href="react/components/accordion/examples" aria-label="link to react examples" title="React">
 			<Svg svg={reactLogo} className="framework-logo" />
 		</a>
-		<a href="svelte/components/alert/examples" aria-label="link to svelte examples" title="Svelte">
+		<a href="svelte/components/accordion/examples" aria-label="link to svelte examples" title="Svelte">
 			<Svg svg={sveteLogo} className="framework-logo" />
 		</a>
 	</div>

diff --git a/demo/src/routes/[framework]/+layout.svelte b/demo/src/routes/[framework]/+layout.svelte
@@ -32,7 +32,7 @@
 			</ul>
 		</nav>
 	</aside>
-	<div>
+	<div class="pb-4">
 		<slot />
 	</div>
 </div>

diff --git a/demo/src/routes/[framework]/components/accordion/examples/+page.svelte b/demo/src/routes/[framework]/components/accordion/examples/+page.svelte
@@ -5,4 +5,9 @@
 </script>
 
 <LinkHeading label="Default" id="default" level={2} />
-<Sample title="Default example" sample={sampleDefault} />
+<Sample title="Default example" sample={sampleDefault} 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/demo/src/routes/[framework]/components/alert/api/+page.svelte b/demo/src/routes/[framework]/components/alert/api/+page.svelte
@@ -4,8 +4,4 @@
 	import ApiDoc from '../../../../../lib/layout/doc/ApiDoc.svelte';
 </script>
 
-<svelte:head>
-	<title>Pagination API</title>
-	<meta name="description" content="Pagination API for " />
-</svelte:head>
 <ApiDoc doc={widgetDoc} defaultValues={getAlertDefaultConfig()} />
diff --git a/demo/src/routes/[framework]/components/alert/examples/+page.svelte b/demo/src/routes/[framework]/components/alert/examples/+page.svelte
@@ -1,20 +1,24 @@
 <script lang="ts">
 	import Sample from '../../../../../lib/layout/Sample.svelte';
 	import sampleGeneric from '@agnos-ui/samples/alert/generic';
-	import sampleConfig from '@agnos-ui/samples/alert/config';
 	import sampleIcon from '@agnos-ui/samples/alert/icon';
 	import sampleDynamic from '@agnos-ui/samples/alert/dynamic';
 	import LinkHeading from '$lib/link-heading/LinkHeading.svelte';
 </script>
 
 <LinkHeading label="Simple alert" id="default" level={2} />
-<Sample title="Generic example" sample={sampleGeneric} />
-
-<LinkHeading label="Configurable alert" id="config" level={2} />
-<Sample title="Config example" sample={sampleConfig} />
+<Sample title="Generic example" sample={sampleGeneric} height={627} />
 
 <LinkHeading label="Customizable icon" id="custom" level={2} />
-<Sample title="Customizable icon example" sample={sampleIcon} />
+<Sample title="Customizable icon example" sample={sampleIcon} height={405} />
 
 <LinkHeading label="Dynamic alert generation" id="dynamic" level={2} />
-<Sample title="Dynamic generation example" sample={sampleDynamic} />
+<p>This example showcases how an application would typically generate and handle dismissable alerts.</p>
+<Sample title="Dynamic generation example" sample={sampleDynamic} height={113} />
+
+<LinkHeading label="Accessibility" id="accessibility" level={2} />
+<p>
+	The alert component implements the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role" target="_blank"
+		>ARIA alert role</a
+	>.
+</p>
diff --git a/demo/src/routes/[framework]/components/modal/api/+page.svelte b/demo/src/routes/[framework]/components/modal/api/+page.svelte
@@ -4,8 +4,4 @@
 	import ApiDoc from '../../../../../lib/layout/doc/ApiDoc.svelte';
 </script>
 
-<svelte:head>
-	<title>Modal API</title>
-	<meta name="description" content="" />
-</svelte:head>
 <ApiDoc doc={widgetDoc} defaultValues={getModalDefaultConfig()} />
diff --git a/demo/src/routes/[framework]/components/modal/examples/+page.svelte b/demo/src/routes/[framework]/components/modal/examples/+page.svelte
@@ -6,7 +6,13 @@
 </script>
 
 <LinkHeading label="Default modal" id="default" level={2} />
-<Sample title="Default example" sample={sampleDefault} height={300} />
+<Sample title="Default example" sample={sampleDefault} height={300} noresize />
 
 <LinkHeading label="Modal stack" id="stack" level={2} />
-<Sample title="Modal stack example" sample={sampleStack} height={400} />
+<p>
+	It is possible to stack modals on top of each other. Note that for better User Experience, stacking modals should be avoided as much as possible.
+</p>
+<Sample title="Modal stack example" sample={sampleStack} height={400} noresize />
+
+<LinkHeading label="Accessibility" id="accessibility" level={2} />
+<p>TODO</p>
diff --git a/demo/src/routes/[framework]/components/modal/playground/+page.svelte b/demo/src/routes/[framework]/components/modal/playground/+page.svelte
@@ -5,4 +5,4 @@
 	import doc from '../../../../../../../core/dist/api.json?modal&extractApi';
 </script>
 
-<Playground {sample} config={getModalDefaultConfig()} height={250} {doc} />
+<Playground {sample} config={getModalDefaultConfig()} height={250} noresize {doc} />
diff --git a/demo/src/routes/[framework]/components/pagination/api/+page.svelte b/demo/src/routes/[framework]/components/pagination/api/+page.svelte
@@ -4,8 +4,4 @@
 	import ApiDoc from '../../../../../lib/layout/doc/ApiDoc.svelte';
 </script>
 
-<svelte:head>
-	<title>Pagination API</title>
-	<meta name="description" content="Pagination API for " />
-</svelte:head>
 <ApiDoc doc={widgetDoc} defaultValues={getPaginationDefaultConfig()} />
diff --git a/demo/src/routes/[framework]/components/pagination/examples/+page.svelte b/demo/src/routes/[framework]/components/pagination/examples/+page.svelte
@@ -6,7 +6,11 @@
 </script>
 
 <LinkHeading label="Default pagination" id="default" level={2} />
-<Sample title="Pagination example" sample={sampleDefault} />
+<Sample title="Pagination example" sample={sampleDefault} height={419} />
 
 <LinkHeading label="Customization" id="custom" level={2} />
-<Sample title="Custom Pagination example" sample={sampleCustom} />
+<p>The pagination widget is fully customizable, from the page numbers to the arrows.</p>
+<Sample title="Custom Pagination example" sample={sampleCustom} height={256} />
+
+<LinkHeading label="Accessibility" id="accessibility" level={2} />
+<p>TODO</p>
diff --git a/demo/src/routes/[framework]/components/rating/api/+page.svelte b/demo/src/routes/[framework]/components/rating/api/+page.svelte
@@ -4,8 +4,4 @@
 	import ApiDoc from '../../../../../lib/layout/doc/ApiDoc.svelte';
 </script>
 
-<svelte:head>
-	<title>Rating API</title>
-	<meta name="description" content="Rating API for " />
-</svelte:head>
 <ApiDoc doc={widgetDoc} defaultValues={getRatingDefaultConfig()} />