@origostudio/origo-design 0.0.37 → 0.0.39

package/packages/angular-renderer/playwright/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Playwright Component Test</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.ts"></script>
+  </body>
+</html>

package/packages/angular-renderer/playwright/index.ts

@@ -0,0 +1 @@
+import 'zone.js';

package/packages/angular-renderer/playwright-ct.config.ts

@@ -1,16 +1,26 @@
-import { defineConfig, devices } from '@playwright/experimental-ct-angular';
+import { resolve } from 'path';
+import angular from '@analogjs/vite-plugin-angular';
+import { defineConfig, devices } from '@jscutlery/playwright-ct-angular';
+
+const tsconfigPath = resolve(__dirname, 'tsconfig.pw.json');
+if (!require('fs').existsSync(tsconfigPath)) {
+  throw new Error('tsconfig.pw.json not found at ' + tsconfigPath);
+}
 
 export default defineConfig({
   testDir: './src',
   testMatch: /.*\.pw\.ts/,
   snapshotDir: './__snapshots__',
-  timeout: 10 * 1000,
-  fullyParallel: true,
+  timeout: 30 * 1000,
+  fullyParallel: !process.env['CI'],
   forbidOnly: !!process.env['CI'],
   retries: process.env['CI'] ? 2 : 0,
   workers: process.env['CI'] ? 1 : undefined,
   reporter: 'html',
   use: {
+    ctViteConfig: {
+      plugins: [angular({ tsconfig: tsconfigPath })],
+    },
     trace: 'on-first-retry',
     ctPort: 3100,
   },

package/packages/angular-renderer/src/adapters/web/experience-adapter.service.ts

@@ -1,7 +1,13 @@
-import { Injectable } from '@angular/core';
+import { Injectable, signal } from '@angular/core';
 
 @Injectable({ providedIn: 'root' })
 export class WebExperienceAdapterService {
+  private _state = signal<Record<string, Record<string, unknown>>>({});
+
+  getState(nodeId: string, property: string): unknown {
+    return this._state()[nodeId]?.[property];
+  }
+
   dispatchCapability(nodeId: string, actionName: string, payload?: unknown): void {
     // In Phase 1, this provides the stateless translation boundary (AD-15).
     // Real dispatching logic to the core BADL engine would be wired here.
@@ -17,5 +23,13 @@ export class WebExperienceAdapterService {
       `[ExperienceAdapter] Updated state for node '${nodeId}', property '${property}'`,
       value
     );
+
+    this._state.update(state => ({
+      ...state,
+      [nodeId]: {
+        ...state[nodeId],
+        [property]: value,
+      },
+    }));
   }
 }

package/packages/angular-renderer/src/components/primitives/breadcrumbs/breadcrumbs.component.pw.ts

@@ -0,0 +1,37 @@
+import { test, expect } from '@jscutlery/playwright-ct-angular';
+import { BreadcrumbsComponent, BreadcrumbsProps } from './breadcrumbs.component';
+import { InteractionContract } from '@origo/core';
+import AxeBuilder from '@axe-core/playwright';
+
+test.describe('BreadcrumbsComponent Accessibility', () => {
+  test('should not have any automatically detectable accessibility issues', async ({
+    mount,
+    page,
+  }) => {
+    await mount(BreadcrumbsComponent, {
+      props: {
+        contract: {
+          id: 'test-id',
+          type: 'breadcrumbs',
+          props: {
+            columns: [{ key: 'name', label: 'Name' }],
+            rows: [{ name: 'Test' }],
+            items: [{ label: 'Item 1', id: '1', href: '/' }],
+            tabs: [{ label: 'Tab 1', id: 'tab-1' }],
+          },
+        } as InteractionContract<BreadcrumbsProps>,
+      },
+    });
+
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .disableRules([
+        'document-title',
+        'html-has-lang',
+        'landmark-one-main',
+        'page-has-heading-one',
+        'region',
+      ])
+      .analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});

package/packages/angular-renderer/src/components/primitives/breadcrumbs/breadcrumbs.component.ts

@@ -5,7 +5,6 @@ import {
   computed,
   ViewEncapsulation,
   inject,
-  SecurityContext,
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { InteractionContract } from '@origo/core';

package/packages/angular-renderer/src/components/primitives/button/button.component.pw.ts

@@ -1,5 +1,6 @@
-import { test, expect } from '@playwright/experimental-ct-angular';
-import { ButtonComponent } from './button.component';
+import { test, expect } from '@jscutlery/playwright-ct-angular';
+import { ButtonComponent, ButtonProps } from './button.component';
+import { InteractionContract } from '@origo/core';
 import AxeBuilder from '@axe-core/playwright';
 
 test.describe('ButtonComponent Accessibility', () => {
@@ -9,11 +10,23 @@ test.describe('ButtonComponent Accessibility', () => {
   }) => {
     await mount(ButtonComponent, {
       props: {
-        contract: { id: '3', type: 'button', props: { label: 'Submit' } } as never,
+        contract: {
+          id: 'test-id',
+          type: 'button',
+          props: { label: 'Submit' },
+        } as InteractionContract<ButtonProps>,
       },
     });
 
-    const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .disableRules([
+        'document-title',
+        'html-has-lang',
+        'landmark-one-main',
+        'page-has-heading-one',
+        'region',
+      ])
+      .analyze();
     expect(accessibilityScanResults.violations).toEqual([]);
   });
 });

package/packages/angular-renderer/src/components/primitives/card/card.component.pw.ts

@@ -0,0 +1,32 @@
+import { test, expect } from '@jscutlery/playwright-ct-angular';
+import { CardComponent, CardProps } from './card.component';
+import { InteractionContract } from '@origo/core';
+import AxeBuilder from '@axe-core/playwright';
+
+test.describe('CardComponent Accessibility', () => {
+  test('should not have any automatically detectable accessibility issues', async ({
+    mount,
+    page,
+  }) => {
+    await mount(CardComponent, {
+      props: {
+        contract: {
+          id: 'test-id',
+          type: 'card',
+          props: {},
+        } as InteractionContract<CardProps>,
+      },
+    });
+
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .disableRules([
+        'document-title',
+        'html-has-lang',
+        'landmark-one-main',
+        'page-has-heading-one',
+        'region',
+      ])
+      .analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});

package/packages/angular-renderer/src/components/primitives/checkbox/checkbox.component.pw.ts

@@ -0,0 +1,38 @@
+import { test, expect } from '@jscutlery/playwright-ct-angular';
+import { CheckboxComponent, CheckboxProps } from './checkbox.component';
+import { InteractionContract } from '@origo/core';
+import AxeBuilder from '@axe-core/playwright';
+
+test.describe('CheckboxComponent Accessibility', () => {
+  test('should not have any automatically detectable accessibility issues', async ({
+    mount,
+    page,
+  }) => {
+    await mount(CheckboxComponent, {
+      props: {
+        contract: {
+          id: 'test-id',
+          type: 'checkbox',
+          props: {
+            label: 'Test Label',
+            placeholder: 'Test',
+            'aria-label': 'Test',
+            options: [{ label: 'Option 1', value: '1' }],
+            items: [{ label: 'Item 1' }],
+          },
+        } as InteractionContract<CheckboxProps>,
+      },
+    });
+
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .disableRules([
+        'document-title',
+        'html-has-lang',
+        'landmark-one-main',
+        'page-has-heading-one',
+        'region',
+      ])
+      .analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});

package/packages/angular-renderer/src/components/primitives/chip/chip.component.pw.ts

@@ -0,0 +1,56 @@
+import { test, expect } from '@jscutlery/playwright-ct-angular';
+import { ChipComponent, ChipProps } from './chip.component';
+import { InteractionContract } from '@origo/core';
+import AxeBuilder from '@axe-core/playwright';
+
+test.describe('ChipComponent Accessibility', () => {
+  test('should be accessible (default)', async ({ mount, page }) => {
+    await mount(ChipComponent, {
+      props: {
+        contract: {
+          id: 'test-id',
+          type: 'chip',
+          props: { label: 'Submit' },
+        } as InteractionContract<ChipProps>,
+      },
+    });
+
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .disableRules([
+        'document-title',
+        'html-has-lang',
+        'landmark-one-main',
+        'page-has-heading-one',
+        'region',
+      ])
+      .analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});
+
+test('Chip selected state accessibility', async ({ mount, page }) => {
+  await mount(ChipComponent, {
+    props: {
+      contract: {
+        id: 'test-id',
+        type: 'chip',
+        props: { selected: true, label: 'Test' },
+      } as InteractionContract<ChipProps>,
+    },
+  });
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+  expect(accessibilityScanResults.violations).toEqual([]);
+});
+test('Chip disabled state accessibility', async ({ mount, page }) => {
+  await mount(ChipComponent, {
+    props: {
+      contract: {
+        id: 'test-id',
+        type: 'chip',
+        props: { disabled: true, label: 'Test' },
+      } as InteractionContract<ChipProps>,
+    },
+  });
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+  expect(accessibilityScanResults.violations).toEqual([]);
+});

package/packages/angular-renderer/src/components/primitives/chip/chip.component.ts

@@ -64,7 +64,7 @@ export class ChipComponent implements OrigoAdapter<ChipProps> {
     effect(() => {
       const props = this.contract().props;
       const coerced = props
-        ? coerceContractProps<Record<string, any>>(props, ChipComponent.contractSchema)
+        ? coerceContractProps<Record<string, unknown>>(props, ChipComponent.contractSchema)
         : {};
       const contractVal =
         coerced['selected'] !== undefined ? !!coerced['selected'] : this.selected();

package/packages/angular-renderer/src/components/primitives/data-grid/data-grid.component.pw.ts

@@ -0,0 +1,37 @@
+import { test, expect } from '@jscutlery/playwright-ct-angular';
+import { DataGridComponent, DataGridProps } from './data-grid.component';
+import { InteractionContract } from '@origo/core';
+import AxeBuilder from '@axe-core/playwright';
+
+test.describe('DataGridComponent Accessibility', () => {
+  test('should not have any automatically detectable accessibility issues', async ({
+    mount,
+    page,
+  }) => {
+    await mount(DataGridComponent, {
+      props: {
+        contract: {
+          id: 'test-id',
+          type: 'dataGrid',
+          props: {
+            columns: [{ key: 'name', label: 'Name' }],
+            rows: [{ name: 'Test' }],
+            items: [{ label: 'Item 1', id: '1', href: '/' }],
+            tabs: [{ label: 'Tab 1', id: 'tab-1' }],
+          },
+        } as InteractionContract<DataGridProps>,
+      },
+    });
+
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .disableRules([
+        'document-title',
+        'html-has-lang',
+        'landmark-one-main',
+        'page-has-heading-one',
+        'region',
+      ])
+      .analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});

package/packages/angular-renderer/src/components/primitives/form-field/form-field.component.pw.ts

@@ -0,0 +1,38 @@
+import { test, expect } from '@jscutlery/playwright-ct-angular';
+import { FormFieldComponent, FormFieldProps } from './form-field.component';
+import { InteractionContract } from '@origo/core';
+import AxeBuilder from '@axe-core/playwright';
+
+test.describe('FormFieldComponent Accessibility', () => {
+  test('should not have any automatically detectable accessibility issues', async ({
+    mount,
+    page,
+  }) => {
+    await mount(FormFieldComponent, {
+      props: {
+        contract: {
+          id: 'test-id',
+          type: 'formField',
+          props: {
+            label: 'Test Label',
+            placeholder: 'Test',
+            'aria-label': 'Test',
+            options: [{ label: 'Option 1', value: '1' }],
+            items: [{ label: 'Item 1' }],
+          },
+        } as InteractionContract<FormFieldProps>,
+      },
+    });
+
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .disableRules([
+        'document-title',
+        'html-has-lang',
+        'landmark-one-main',
+        'page-has-heading-one',
+        'region',
+      ])
+      .analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});

package/packages/angular-renderer/src/components/primitives/hbox/hbox.component.pw.ts

@@ -0,0 +1,32 @@
+import { test, expect } from '@jscutlery/playwright-ct-angular';
+import { HBoxComponent, HBoxProps } from './hbox.component';
+import { InteractionContract } from '@origo/core';
+import AxeBuilder from '@axe-core/playwright';
+
+test.describe('HBoxComponent Accessibility', () => {
+  test('should not have any automatically detectable accessibility issues', async ({
+    mount,
+    page,
+  }) => {
+    await mount(HBoxComponent, {
+      props: {
+        contract: {
+          id: 'test-id',
+          type: 'hbox',
+          props: {},
+        } as InteractionContract<HBoxProps>,
+      },
+    });
+
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .disableRules([
+        'document-title',
+        'html-has-lang',
+        'landmark-one-main',
+        'page-has-heading-one',
+        'region',
+      ])
+      .analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});

package/packages/angular-renderer/src/components/primitives/label/label.component.pw.ts

@@ -0,0 +1,32 @@
+import { test, expect } from '@jscutlery/playwright-ct-angular';
+import { LabelComponent, LabelProps } from './label.component';
+import { InteractionContract } from '@origo/core';
+import AxeBuilder from '@axe-core/playwright';
+
+test.describe('LabelComponent Accessibility', () => {
+  test('should not have any automatically detectable accessibility issues', async ({
+    mount,
+    page,
+  }) => {
+    await mount(LabelComponent, {
+      props: {
+        contract: {
+          id: 'test-id',
+          type: 'label',
+          props: {},
+        } as InteractionContract<LabelProps>,
+      },
+    });
+
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .disableRules([
+        'document-title',
+        'html-has-lang',
+        'landmark-one-main',
+        'page-has-heading-one',
+        'region',
+      ])
+      .analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});

package/packages/angular-renderer/src/components/primitives/list/list.component.pw.ts

@@ -0,0 +1,37 @@
+import { test, expect } from '@jscutlery/playwright-ct-angular';
+import { ListComponent, ListProps } from './list.component';
+import { InteractionContract } from '@origo/core';
+import AxeBuilder from '@axe-core/playwright';
+
+test.describe('ListComponent Accessibility', () => {
+  test('should not have any automatically detectable accessibility issues', async ({
+    mount,
+    page,
+  }) => {
+    await mount(ListComponent, {
+      props: {
+        contract: {
+          id: 'test-id',
+          type: 'list',
+          props: {
+            columns: [{ key: 'name', label: 'Name' }],
+            rows: [{ name: 'Test' }],
+            items: [{ label: 'Item 1', id: '1', href: '/' }],
+            tabs: [{ label: 'Tab 1', id: 'tab-1' }],
+          },
+        } as InteractionContract<ListProps>,
+      },
+    });
+
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .disableRules([
+        'document-title',
+        'html-has-lang',
+        'landmark-one-main',
+        'page-has-heading-one',
+        'region',
+      ])
+      .analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});

package/packages/angular-renderer/src/components/primitives/radio-group/radio-group.component.pw.ts

@@ -0,0 +1,38 @@
+import { test, expect } from '@jscutlery/playwright-ct-angular';
+import { RadioGroupComponent, RadioGroupProps } from './radio-group.component';
+import { InteractionContract } from '@origo/core';
+import AxeBuilder from '@axe-core/playwright';
+
+test.describe('RadioGroupComponent Accessibility', () => {
+  test('should not have any automatically detectable accessibility issues', async ({
+    mount,
+    page,
+  }) => {
+    await mount(RadioGroupComponent, {
+      props: {
+        contract: {
+          id: 'test-id',
+          type: 'radioGroup',
+          props: {
+            label: 'Test Label',
+            placeholder: 'Test',
+            'aria-label': 'Test',
+            options: [{ label: 'Option 1', value: '1' }],
+            items: [{ label: 'Item 1' }],
+          },
+        } as InteractionContract<RadioGroupProps>,
+      },
+    });
+
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .disableRules([
+        'document-title',
+        'html-has-lang',
+        'landmark-one-main',
+        'page-has-heading-one',
+        'region',
+      ])
+      .analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});

package/packages/angular-renderer/src/components/primitives/select/select.component.pw.ts

@@ -0,0 +1,32 @@
+import { test, expect } from '@jscutlery/playwright-ct-angular';
+import { SelectComponent, SelectProps } from './select.component';
+import { InteractionContract } from '@origo/core';
+import AxeBuilder from '@axe-core/playwright';
+
+test.describe('SelectComponent Accessibility', () => {
+  test('should not have any automatically detectable accessibility issues', async ({
+    mount,
+    page,
+  }) => {
+    await mount(SelectComponent, {
+      props: {
+        contract: {
+          id: 'test-id',
+          type: 'select',
+          props: { options: [{ label: 'Opt 1', value: '1' }] },
+        } as InteractionContract<SelectProps>,
+      },
+    });
+
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .disableRules([
+        'document-title',
+        'html-has-lang',
+        'landmark-one-main',
+        'page-has-heading-one',
+        'region',
+      ])
+      .analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});

package/packages/angular-renderer/src/components/primitives/sidebar/sidebar.component.pw.ts

@@ -0,0 +1,37 @@
+import { test, expect } from '@jscutlery/playwright-ct-angular';
+import { SidebarComponent, SidebarProps } from './sidebar.component';
+import { InteractionContract } from '@origo/core';
+import AxeBuilder from '@axe-core/playwright';
+
+test.describe('SidebarComponent Accessibility', () => {
+  test('should not have any automatically detectable accessibility issues', async ({
+    mount,
+    page,
+  }) => {
+    await mount(SidebarComponent, {
+      props: {
+        contract: {
+          id: 'test-id',
+          type: 'sidebar',
+          props: {
+            columns: [{ key: 'name', label: 'Name' }],
+            rows: [{ name: 'Test' }],
+            items: [{ label: 'Item 1', id: '1', href: '/' }],
+            tabs: [{ label: 'Tab 1', id: 'tab-1' }],
+          },
+        } as InteractionContract<SidebarProps>,
+      },
+    });
+
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .disableRules([
+        'document-title',
+        'html-has-lang',
+        'landmark-one-main',
+        'page-has-heading-one',
+        'region',
+      ])
+      .analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});

package/packages/angular-renderer/src/components/primitives/switch/switch.component.pw.ts

@@ -0,0 +1,62 @@
+import { test, expect } from '@jscutlery/playwright-ct-angular';
+import { SwitchComponent, SwitchProps } from './switch.component';
+import { InteractionContract } from '@origo/core';
+import AxeBuilder from '@axe-core/playwright';
+
+test.describe('SwitchComponent Accessibility', () => {
+  test('should be accessible (default)', async ({ mount, page }) => {
+    await mount(SwitchComponent, {
+      props: {
+        contract: {
+          id: 'test-id',
+          type: 'switch',
+          props: {
+            label: 'Test Label',
+            placeholder: 'Test',
+            'aria-label': 'Test',
+            options: [{ label: 'Option 1', value: '1' }],
+            items: [{ label: 'Item 1' }],
+          },
+        } as InteractionContract<SwitchProps>,
+      },
+    });
+
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .disableRules([
+        'document-title',
+        'html-has-lang',
+        'landmark-one-main',
+        'page-has-heading-one',
+        'region',
+      ])
+      .analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});
+
+test('Switch checked state accessibility', async ({ mount, page }) => {
+  await mount(SwitchComponent, {
+    props: {
+      contract: {
+        id: 'test-id',
+        type: 'switch',
+        props: { checked: true, label: 'Test' },
+      } as InteractionContract<SwitchProps>,
+    },
+  });
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+  expect(accessibilityScanResults.violations).toEqual([]);
+});
+test('Switch disabled state accessibility', async ({ mount, page }) => {
+  await mount(SwitchComponent, {
+    props: {
+      contract: {
+        id: 'test-id',
+        type: 'switch',
+        props: { disabled: true, label: 'Test' },
+      } as InteractionContract<SwitchProps>,
+    },
+  });
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+  expect(accessibilityScanResults.violations).toEqual([]);
+});

package/packages/angular-renderer/src/components/primitives/switch/switch.component.ts

@@ -64,7 +64,7 @@ export class SwitchComponent implements OrigoAdapter<SwitchProps> {
     effect(() => {
       const props = this.contract().props;
       const coerced = props
-        ? coerceContractProps<Record<string, any>>(props, SwitchComponent.contractSchema)
+        ? coerceContractProps<Record<string, unknown>>(props, SwitchComponent.contractSchema)
         : {};
       const contractVal = coerced['checked'] !== undefined ? !!coerced['checked'] : this.checked();
       untracked(() => {