fix: merge

sbb-design-systems · Apr 15, 2024 · 9bc1b3e · 9bc1b3e
1 parent c3e9ca9
commit 9bc1b3e
Show file tree

Hide file tree

Showing 21 changed files with 97 additions and 104 deletions.
diff --git a/src/components/stepper.ts b/src/components/stepper.ts
@@ -0,0 +1,3 @@
+export * from './stepper/step.js';
+export * from './stepper/step-label.js';
+export * from './stepper/stepper.js';
diff --git a/src/components/stepper/index.ts b/src/components/stepper/index.ts
diff --git a/src/components/stepper/step-label.ts b/src/components/stepper/step-label.ts
@@ -0,0 +1 @@
+export * from './step-label/step-label.js';
diff --git a/src/components/stepper/step-label/index.ts b/src/components/stepper/step-label/index.ts
diff --git a/src/components/stepper/step-label/step-label.spec.ts b/src/components/stepper/step-label/step-label.spec.ts
@@ -1,9 +1,9 @@
-import { expect, fixture } from '@open-wc/testing';
+import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import './step-label';
+import './step-label.js';
 
 describe('sbb-step-label', () => {
   it('renders', async () => {

diff --git a/src/components/stepper/step-label/step-label.stories.ts b/src/components/stepper/step-label/step-label.stories.ts
@@ -3,10 +3,10 @@ import type { InputType } from '@storybook/types';
 import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
 import { html, type TemplateResult } from 'lit';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './step-label';
+import './step-label.js';
 
 const iconName: InputType = {
   control: {

diff --git a/src/components/stepper/step-label/step-label.ts b/src/components/stepper/step-label/step-label.ts
@@ -1,18 +1,15 @@
 import { type CSSResultGroup, html, type TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import {
-  SbbButtonBaseElement,
-  SbbDisabledTabIndexActionMixin,
-  SbbIconNameMixin,
-  hostAttributes,
-} from '../../core/common-behaviors';
-import { ConnectedAbortController } from '../../core/eventing';
-import type { SbbStepElement } from '../step/step';
-import type { SbbStepperElement } from '../stepper';
+import { SbbButtonBaseElement } from '../../core/base-elements.js';
+import { SbbConnectedAbortController } from '../../core/controllers.js';
+import { hostAttributes } from '../../core/decorators.js';
+import { SbbDisabledTabIndexActionMixin } from '../../core/mixins.js';
+import { SbbIconNameMixin } from '../../icon.js';
+import type { SbbStepElement } from '../step/step.js';
+import type { SbbStepperElement } from '../stepper.js';
 
 import style from './step-label.scss?lit&inline';
-import '../../icon';
 
 let nextId = 0;
 
@@ -69,7 +66,7 @@ export class SbbStepLabelElement extends SbbIconNameMixin(
     this._internals.ariaSetSize = `${setSize}`;
   }
 
-  private _abort = new ConnectedAbortController(this);
+  private _abort = new SbbConnectedAbortController(this);
   private _stepper: SbbStepperElement | null = null;
   private _step: SbbStepElement | null = null;
 

diff --git a/src/components/stepper/step.ts b/src/components/stepper/step.ts
@@ -0,0 +1 @@
+export * from './step/step.js';
diff --git a/src/components/stepper/step/__snapshots__/step.spec.snap.js b/src/components/stepper/step/__snapshots__/step.spec.snap.js
@@ -15,13 +15,7 @@ snapshots["sbb-step A11y tree Chrome"] =
 `<p>
   {
   "role": "WebArea",
-  "name": "",
-  "children": [
-    {
-      "role": "text",
-      "name": "Label"
-    }
-  ]
+  "name": ""
 }
 </p>
 `;
@@ -31,13 +25,7 @@ snapshots["sbb-step A11y tree Firefox"] =
 `<p>
   {
   "role": "document",
-  "name": "",
-  "children": [
-    {
-      "role": "text leaf",
-      "name": "Label"
-    }
-  ]
+  "name": ""
 }
 </p>
 `;
@@ -47,13 +35,7 @@ snapshots["sbb-step A11y tree Safari"] =
 `<p>
   {
   "role": "WebArea",
-  "name": "",
-  "children": [
-    {
-      "role": "text",
-      "name": "Label"
-    }
-  ]
+  "name": ""
 }
 </p>
 `;

diff --git a/src/components/stepper/step/index.ts b/src/components/stepper/step/index.ts
diff --git a/src/components/stepper/step/step.spec.ts b/src/components/stepper/step/step.spec.ts
@@ -1,9 +1,9 @@
-import { expect, fixture } from '@open-wc/testing';
+import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import './step';
+import './step.js';
 
 describe('sbb-step', () => {
   it('renders', async () => {
@@ -16,5 +16,5 @@ describe('sbb-step', () => {
     await expect(root).shadowDom.to.be.equalSnapshot();
   });
 
-  testA11yTreeSnapshot(html`<sbb-step-label>Label</sbb-step-label>`);
+  testA11yTreeSnapshot(html`<sbb-step>Step content</sbb-step>`);
 });
diff --git a/src/components/stepper/step/step.stories.ts b/src/components/stepper/step/step.stories.ts
@@ -3,7 +3,7 @@ import type { Decorator, Meta, StoryObj } from '@storybook/web-components';
 import { html, type TemplateResult } from 'lit';
 
 import readme from './readme.md?raw';
-import './step';
+import './step.js';
 
 const Template = (): TemplateResult =>
   html`<sbb-step slot="step" data-selected>Step content.</sbb-step>`;

diff --git a/src/components/stepper/step/step.ts b/src/components/stepper/step/step.ts
@@ -1,12 +1,12 @@
 import { type CSSResultGroup, html, LitElement, type TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { hostAttributes } from '../../core/common-behaviors';
-import { isValidAttribute } from '../../core/dom';
-import { ConnectedAbortController, EventEmitter } from '../../core/eventing';
-import { AgnosticResizeObserver } from '../../core/observers';
-import type { SbbStepLabelElement } from '../step-label';
-import type { SbbStepperElement } from '../stepper';
+import { SbbConnectedAbortController } from '../../core/controllers.js';
+import { hostAttributes } from '../../core/decorators.js';
+import { EventEmitter } from '../../core/eventing.js';
+import { AgnosticResizeObserver } from '../../core/observers.js';
+import type { SbbStepLabelElement } from '../step-label.js';
+import type { SbbStepperElement } from '../stepper.js';
 
 import style from './step.scss?lit&inline';
 
@@ -45,7 +45,7 @@ export class SbbStepElement extends LitElement {
   );
 
   private _loaded: boolean = false;
-  private _abort = new ConnectedAbortController(this);
+  private _abort = new SbbConnectedAbortController(this);
   private _stepper: SbbStepperElement | null = null;
   private _label: SbbStepLabelElement | null = null;
   private _stepResizeObserver = new AgnosticResizeObserver((entries) =>
@@ -64,7 +64,7 @@ export class SbbStepElement extends LitElement {
    * @internal
    */
   public select(): void {
-    if (!this.label) {
+    if (!this._loaded || !this.label) {
       return;
     }
     this.toggleAttribute('data-selected', true);
@@ -106,11 +106,11 @@ export class SbbStepElement extends LitElement {
   }
 
   private _isGoNextElement(element: HTMLElement): boolean {
-    return element.hasAttribute('sbb-stepper-next') && !isValidAttribute(element, 'disabled');
+    return element.hasAttribute('sbb-stepper-next') && !element.hasAttribute('disabled');
   }
 
   private _isGoPreviousElement(element: HTMLElement): boolean {
-    return element.hasAttribute('sbb-stepper-previous') && !isValidAttribute(element, 'disabled');
+    return element.hasAttribute('sbb-stepper-previous') && !element.hasAttribute('disabled');
   }
 
   private _onStepElementResize(entries: ResizeObserverEntry[]): void {

diff --git a/src/components/stepper/stepper.ts b/src/components/stepper/stepper.ts
@@ -0,0 +1 @@
+export * from './stepper/stepper.js';
diff --git a/src/components/stepper/stepper/__snapshots__/stepper.spec.snap.js b/src/components/stepper/stepper/__snapshots__/stepper.spec.snap.js
@@ -6,6 +6,7 @@ snapshots["sbb-stepper renders - Dom"] =
   data-disable-animation=""
   orientation="horizontal"
   selected-index="0"
+  style="--sbb-stepper-marker-size: 188px;"
 >
   <sbb-step-label
     aria-controls="sbb-step-0"
@@ -117,6 +118,7 @@ snapshots["sbb-stepper A11y tree Chrome"] =
     {
       "role": "tab",
       "name": "Test step label 1",
+      "focused": true,
       "selected": true
     },
     {
@@ -151,6 +153,7 @@ snapshots["sbb-stepper A11y tree Firefox"] =
     {
       "role": "tab",
       "name": "1 Test step label 1",
+      "focused": true,
       "selected": true
     },
     {
@@ -205,6 +208,7 @@ snapshots["sbb-stepper A11y tree Safari"] =
     {
       "role": "tab",
       "name": "1 Test step label 1",
+      "focused": true,
       "selected": true
     },
     {

diff --git a/src/components/stepper/stepper/index.ts b/src/components/stepper/stepper/index.ts
diff --git a/src/components/stepper/stepper/readme.md b/src/components/stepper/stepper/readme.md
@@ -91,7 +91,7 @@ Use an `aria-label` attribute to describe the purpose of the stepper. The `sbb-s
 | `horizontalFrom` | `horizontal-from` | public  | `SbbHorizontalFrom \| undefined` |                | Overrides the behaviour of `orientation` property.                                |
 | `orientation`    | `orientation`     | public  | `SbbOrientation`                 | `'horizontal'` | Steps orientation, either horizontal or vertical.                                 |
 | `selected`       | -                 | public  | `SbbStepElement \| undefined`    |                | The currently selected step.                                                      |
-| `selectedIndex`  | -                 | public  | `number \| undefined`            |                | The currently selected step index.                                                |
+| `selectedIndex`  | `selected-index`  | public  | `number \| undefined`            |                | The currently selected step index.                                                |
 | `steps`          | -                 | public  | `SbbStepElement[]`               |                | The steps of the stepper.                                                         |
 
 ## Methods

diff --git a/src/components/stepper/stepper/stepper.e2e.ts b/src/components/stepper/stepper/stepper.e2e.ts
@@ -1,13 +1,14 @@
-import { assert, expect, fixture } from '@open-wc/testing';
+import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing';
-import { SbbStepElement } from '../step/step';
-import type { SbbStepLabelElement } from '../step-label';
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
+import { SbbStepElement } from '../step/step.js';
+import type { SbbStepLabelElement } from '../step-label.js';
 
-import { SbbStepperElement } from './stepper';
-import '../step-label';
-import '../step';
+import { SbbStepperElement } from './stepper.js';
+import '../step-label.js';
+import '../step.js';
 
 describe('sbb-stepper', () => {
   let element: SbbStepperElement;

diff --git a/src/components/stepper/stepper/stepper.spec.ts b/src/components/stepper/stepper/stepper.spec.ts
@@ -1,13 +1,13 @@
-import { expect, fixture } from '@open-wc/testing';
+import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { waitForLitRender } from '../../core/testing';
-import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+import { waitForLitRender } from '../../core/testing.js';
 
-import type { SbbStepperElement } from '.';
-import './stepper';
-import '../step';
-import '../step-label';
+import type { SbbStepperElement } from './stepper.js';
+import './stepper.js';
+import '../step.js';
+import '../step-label.js';
 
 describe('sbb-stepper', () => {
   let element: SbbStepperElement;

diff --git a/src/components/stepper/stepper/stepper.stories.ts b/src/components/stepper/stepper/stepper.stories.ts
@@ -4,19 +4,19 @@ import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-c
 import { html, type TemplateResult } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { sbbSpread } from '../../core/dom';
-import type { SbbFormErrorElement } from '../../form-error';
-import { SbbStepElement } from '../step';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
+import type { SbbFormErrorElement } from '../../form-error.js';
+import { SbbStepElement } from '../step.js';
 
 import readme from './readme.md?raw';
 
-import './stepper';
-import '../step-label';
-import '../../link/block-link-button';
-import '../../button/button';
-import '../../button/secondary-button';
-import '../../form-field';
-import '../../form-error';
+import './stepper.js';
+import '../step-label.js';
+import '../../link/block-link-button.js';
+import '../../button/button.js';
+import '../../button/secondary-button.js';
+import '../../form-field.js';
+import '../../form-error.js';
 
 const linear: InputType = {
   control: {
@@ -104,7 +104,8 @@ const WithSingleFormTemplate = (args: Args): TemplateResult => {
           }}
         >
           <div style="margin-block-end: var(--sbb-spacing-fixed-4x)">
-            <sbb-form-field error-space="reserve" label="Name" size="m">
+            <sbb-form-field error-space="reserve" size="m">
+              <label>Name</label>
               <input
                 @input=${(event: KeyboardEvent) => {
                   const input = event.currentTarget as HTMLInputElement;
@@ -129,7 +130,8 @@ const WithSingleFormTemplate = (args: Args): TemplateResult => {
         <sbb-step-label slot="step-label">Step 2</sbb-step-label>
         <sbb-step slot="step">
           <div style="margin-block-end: var(--sbb-spacing-fixed-4x)">
-            <sbb-form-field error-space="none" label="Favorite number" size="m">
+            <sbb-form-field error-space="none" size="m">
+              <label>Favorite number</label>
               <input type="number" placeholder="Your lucky number" name="number" value="75" />
             </sbb-form-field>
           </div>
@@ -140,7 +142,8 @@ const WithSingleFormTemplate = (args: Args): TemplateResult => {
         <sbb-step-label slot="step-label" icon-name="dog-small">Step 3</sbb-step-label>
         <sbb-step slot="step">
           <div style="margin-block-end: var(--sbb-spacing-fixed-4x)">
-            <sbb-form-field error-space="none" label="Favorite animal" size="m">
+            <sbb-form-field error-space="none" size="m">
+              <label>Favorite animal</label>
               <select name="animal">
                 <option>Panda 🐼</option>
                 <option>Jellyfish 🪼</option>
@@ -202,7 +205,8 @@ const WithMultipleFormsTemplate = (args: Args): TemplateResult => {
               );
             }}
           >
-            <sbb-form-field error-space="reserve" label="Name" size="m">
+            <sbb-form-field error-space="reserve" size="m">
+              <label>Name</label>
               <input
                 @input=${(event: KeyboardEvent) => {
                   const input = event.currentTarget as HTMLInputElement;
@@ -229,7 +233,8 @@ const WithMultipleFormsTemplate = (args: Args): TemplateResult => {
       <sbb-step slot="step">
         <div style="margin-block-end: var(--sbb-spacing-fixed-4x)">
           <form>
-            <sbb-form-field error-space="none" label="Favorite number" size="m">
+            <sbb-form-field error-space="none" size="m">
+              <label>Favorite number</label>
               <input type="number" placeholder="Your lucky number" name="number" value="75" />
             </sbb-form-field>
           </form>
@@ -242,7 +247,8 @@ const WithMultipleFormsTemplate = (args: Args): TemplateResult => {
       <sbb-step slot="step">
         <div style="margin-block-end: var(--sbb-spacing-fixed-4x)">
           <form>
-            <sbb-form-field error-space="none" label="Favorite animal" size="m">
+            <sbb-form-field error-space="none" size="m">
+              <label>Favorite animal</label>
               <select name="animal">
                 <option>Panda 🐼</option>
                 <option>Jellyfish 🪼</option>