diff --git a/src/elements/stepper/step-label/step-label.stories.ts b/src/elements/stepper/step-label/step-label.stories.ts index 9c707f6584..3d0e7dbdb8 100644 --- a/src/elements/stepper/step-label/step-label.stories.ts +++ b/src/elements/stepper/step-label/step-label.stories.ts @@ -1,6 +1,5 @@ -import { withActions } from '@storybook/addon-actions/decorator'; import type { InputType } from '@storybook/types'; -import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components'; +import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components'; import { html, type TemplateResult } from 'lit'; import { sbbSpread } from '../../../storybook/helpers/spread.js'; @@ -82,7 +81,6 @@ export const SlottedIcon: StoryObj = { }; const meta: Meta = { - decorators: [withActions as Decorator], parameters: { docs: { extractComponentDescription: () => readme, diff --git a/src/elements/stepper/step/__snapshots__/step.snapshot.spec.snap.js b/src/elements/stepper/step/__snapshots__/step.snapshot.spec.snap.js index fca8e7ea22..730f170dc5 100644 --- a/src/elements/stepper/step/__snapshots__/step.snapshot.spec.snap.js +++ b/src/elements/stepper/step/__snapshots__/step.snapshot.spec.snap.js @@ -1,7 +1,7 @@ /* @web/test-runner snapshot v1 */ export const snapshots = {}; -snapshots["sbb-step renders - DOM"] = +snapshots["sbb-step renders DOM"] = ` `; -/* end snapshot sbb-step renders - DOM */ +/* end snapshot sbb-step renders DOM */ -snapshots["sbb-step renders - Shadow DOM"] = +snapshots["sbb-step renders Shadow DOM"] = `
@@ -20,9 +20,9 @@ snapshots["sbb-step renders - Shadow DOM"] =
`; -/* end snapshot sbb-step renders - Shadow DOM */ +/* end snapshot sbb-step renders Shadow DOM */ -snapshots["sbb-step A11y tree Chrome"] = +snapshots["sbb-step renders A11y tree Chrome"] = `

{ "role": "WebArea", @@ -30,9 +30,9 @@ snapshots["sbb-step A11y tree Chrome"] = }

`; -/* end snapshot sbb-step A11y tree Chrome */ +/* end snapshot sbb-step renders A11y tree Chrome */ -snapshots["sbb-step A11y tree Firefox"] = +snapshots["sbb-step renders A11y tree Firefox"] = `

{ "role": "document", @@ -40,5 +40,5 @@ snapshots["sbb-step A11y tree Firefox"] = }

`; -/* end snapshot sbb-step A11y tree Firefox */ +/* end snapshot sbb-step renders A11y tree Firefox */ diff --git a/src/elements/stepper/step/step.snapshot.spec.ts b/src/elements/stepper/step/step.snapshot.spec.ts index ef3740060f..284b619f3c 100644 --- a/src/elements/stepper/step/step.snapshot.spec.ts +++ b/src/elements/stepper/step/step.snapshot.spec.ts @@ -7,19 +7,21 @@ import type { SbbStepElement } from './step.js'; import './step.js'; describe('sbb-step', () => { - let element: SbbStepElement; + describe('renders', () => { + let element: SbbStepElement; - beforeEach(async () => { - element = await fixture(html`Step content`); - }); + beforeEach(async () => { + element = await fixture(html`Step content`); + }); - it('renders - DOM', async () => { - await expect(element).dom.to.be.equalSnapshot(); - }); + it('DOM', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); - it('renders - Shadow DOM', async () => { - await expect(element).shadowDom.to.be.equalSnapshot(); - }); + it('Shadow DOM', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); - testA11yTreeSnapshot(); + testA11yTreeSnapshot(); + }); }); diff --git a/src/elements/stepper/step/step.stories.ts b/src/elements/stepper/step/step.stories.ts index 9485eba7bb..7e09b6aa15 100644 --- a/src/elements/stepper/step/step.stories.ts +++ b/src/elements/stepper/step/step.stories.ts @@ -1,5 +1,4 @@ -import { withActions } from '@storybook/addon-actions/decorator'; -import type { Decorator, Meta, StoryObj } from '@storybook/web-components'; +import type { Meta, StoryObj } from '@storybook/web-components'; import { html, type TemplateResult } from 'lit'; import readme from './readme.md?raw'; @@ -13,7 +12,6 @@ export const Default: StoryObj = { }; const meta: Meta = { - decorators: [withActions as Decorator], parameters: { docs: { extractComponentDescription: () => readme, diff --git a/src/elements/stepper/stepper/__snapshots__/stepper.snapshot.spec.snap.js b/src/elements/stepper/stepper/__snapshots__/stepper.snapshot.spec.snap.js index 2863b0d5c3..af1a6b458f 100644 --- a/src/elements/stepper/stepper/__snapshots__/stepper.snapshot.spec.snap.js +++ b/src/elements/stepper/stepper/__snapshots__/stepper.snapshot.spec.snap.js @@ -1,7 +1,7 @@ /* @web/test-runner snapshot v1 */ export const snapshots = {}; -snapshots["sbb-stepper renders - DOM"] = +snapshots["sbb-stepper renders DOM"] = ` `; -/* end snapshot sbb-stepper renders - DOM */ +/* end snapshot sbb-stepper renders DOM */ -snapshots["sbb-stepper renders - Shadow DOM"] = +snapshots["sbb-stepper renders Shadow DOM"] = `
`; -/* end snapshot sbb-stepper renders - Shadow DOM */ +/* end snapshot sbb-stepper renders Shadow DOM */ -snapshots["sbb-stepper A11y tree Chrome"] = +snapshots["sbb-stepper renders A11y tree Chrome"] = `

{ "role": "WebArea", @@ -141,9 +141,9 @@ snapshots["sbb-stepper A11y tree Chrome"] = }

`; -/* end snapshot sbb-stepper A11y tree Chrome */ +/* end snapshot sbb-stepper renders A11y tree Chrome */ -snapshots["sbb-stepper A11y tree Firefox"] = +snapshots["sbb-stepper renders A11y tree Firefox"] = `

{ "role": "document", @@ -182,5 +182,5 @@ snapshots["sbb-stepper A11y tree Firefox"] = }

`; -/* end snapshot sbb-stepper A11y tree Firefox */ +/* end snapshot sbb-stepper renders A11y tree Firefox */ diff --git a/src/elements/stepper/stepper/stepper.snapshot.spec.ts b/src/elements/stepper/stepper/stepper.snapshot.spec.ts index 3ede42d357..dcae2e0596 100644 --- a/src/elements/stepper/stepper/stepper.snapshot.spec.ts +++ b/src/elements/stepper/stepper/stepper.snapshot.spec.ts @@ -10,30 +10,32 @@ import '../step.js'; import '../step-label.js'; describe('sbb-stepper', () => { - let element: SbbStepperElement; + describe('renders', () => { + let element: SbbStepperElement; - beforeEach(async () => { - element = await fixture(html` - - Test step label 1 - Test step content 1 - Test step label 2 - Test step content 2 - Test step label 3 - Test step content 3 - Test step label 4 - - `); - await waitForLitRender(element); - }); + beforeEach(async () => { + element = await fixture(html` + + Test step label 1 + Test step content 1 + Test step label 2 + Test step content 2 + Test step label 3 + Test step content 3 + Test step label 4 + + `); + await waitForLitRender(element); + }); - it('renders - DOM', async () => { - await expect(element).dom.to.be.equalSnapshot(); - }); + it('DOM', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); - it('renders - Shadow DOM', async () => { - await expect(element).shadowDom.to.be.equalSnapshot(); - }); + it('Shadow DOM', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); - testA11yTreeSnapshot(); + testA11yTreeSnapshot(); + }); }); diff --git a/src/elements/stepper/stepper/stepper.stories.ts b/src/elements/stepper/stepper/stepper.stories.ts index 0b704fc90b..cba7e33cf6 100644 --- a/src/elements/stepper/stepper/stepper.stories.ts +++ b/src/elements/stepper/stepper/stepper.stories.ts @@ -1,7 +1,7 @@ import { withActions } from '@storybook/addon-actions/decorator'; import type { InputType } from '@storybook/types'; import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components'; -import { html, type TemplateResult } from 'lit'; +import { html, nothing, type TemplateResult } from 'lit'; import { styleMap } from 'lit/directives/style-map.js'; import { sbbSpread } from '../../../storybook/helpers/spread.js'; @@ -19,6 +19,14 @@ import '../../form-field.js'; import '../../form-error.js'; import '../../card.js'; +const loremIpsum = ` + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy + eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero + eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata + sanctus est Lorem ipsum dolor sit amet. +`; +const loremIpsumSubstring = [219, 58, 160, 304]; + const linear: InputType = { control: { type: 'boolean', @@ -64,6 +72,77 @@ const textBlock = (): TemplateResult => html` `; +const firstFormElement = (sbbFormError: SbbFormErrorElement): TemplateResult => html` + + + { + const input = event.currentTarget as HTMLInputElement; + if (input.value !== '') { + sbbFormError.remove(); + input.classList.remove('sbb-invalid'); + } else { + input.closest('sbb-form-field')!.append(sbbFormError); + input.classList.add('sbb-invalid'); + } + }} + required + placeholder="Your name" + name="name" + value="Christina Müller" + /> + +`; + +const secondFormElement = (): TemplateResult => html` + + + + +`; + +const thirdFormElement = (): TemplateResult => html` + + + + +`; + +const stepperContent = (disabled: boolean, longLabel: boolean): TemplateResult[] => + ['First', 'Second', 'Third', 'Fourth'].map( + (element, index, arr) => html` + ${longLabel + ? loremIpsum.substring(0, loremIpsumSubstring[index]) + : `${element} step`} + +
+ ${element} step + content${longLabel ? '.' : `: ${loremIpsum.substring(0, loremIpsumSubstring[index])}`} +
+ ${index !== 0 + ? html`Back` + : nothing} + ${index !== arr.length - 1 + ? html`Next` + : nothing} + ${index === arr.length - 1 + ? html`Submit` + : nothing} + + `, + ); + const WithSingleFormTemplate = (args: Args): TemplateResult => { document.querySelector('sbb-stepper')?.reset(); document.querySelector('sbb-form-error')?.remove(); @@ -98,37 +177,14 @@ const WithSingleFormTemplate = (args: Args): TemplateResult => { }} >
- - - { - const input = event.currentTarget as HTMLInputElement; - if (input.value !== '') { - sbbFormError.remove(); - input.classList.remove('sbb-invalid'); - } else { - input.closest('sbb-form-field')!.append(sbbFormError); - input.classList.add('sbb-invalid'); - } - }} - required - placeholder="Your name" - name="name" - value="Christina Müller" - /> - + ${firstFormElement(sbbFormError)}
Next Step 2 -
- - - - -
+
${secondFormElement()}
Back Next @@ -138,17 +194,7 @@ const WithSingleFormTemplate = (args: Args): TemplateResult => { Step 3 -
- - - - -
+
${thirdFormElement()}
Back Next @@ -212,25 +258,7 @@ const WithMultipleFormsTemplate = (args: Args): TemplateResult => { ); }} > - - - { - const input = event.currentTarget as HTMLInputElement; - if (input.value !== '') { - sbbFormError.remove(); - input.classList.remove('sbb-invalid'); - } else { - input.closest('sbb-form-field')!.append(sbbFormError); - input.classList.add('sbb-invalid'); - } - }} - required - placeholder="Your name" - name="name" - value="Christina Müller" - /> - + ${firstFormElement(sbbFormError)}
Next @@ -239,12 +267,7 @@ const WithMultipleFormsTemplate = (args: Args): TemplateResult => { Step 2
-
- - - - -
+
${secondFormElement()}
Back Next @@ -253,17 +276,7 @@ const WithMultipleFormsTemplate = (args: Args): TemplateResult => { Step 3
-
- - - - -
+
${thirdFormElement()}
Back Next @@ -295,132 +308,14 @@ const WithMultipleFormsTemplate = (args: Args): TemplateResult => { const Template = ({ disabled, ...args }: Args): TemplateResult => html` - Step 1 - -
- First step content: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero - eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata - sanctus est Lorem ipsum dolor sit amet. -
- Next - - - Step 2 - -
- Second step content: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam - nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At - vero eos et accusam et justo duo dolores et ea rebum. -
- Back - Next - - - Step 3 - -
- Third step content: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. -
- Back - Next - - - Step 4 - -
- Forth step content: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero - eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata - sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing - elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed - diam voluptua. -
- Back - Submit - + ${stepperContent(disabled, false)} ${textBlock()} `; const LongLabelsTemplate = (args: Args): TemplateResult => html` - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor - invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - -
- First step content. -
- Next - - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod - tempor. - -
- Second step content. -
- Back - Next - - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor - invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - -
- Third step content. -
- Back - Next - - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod - tempor. - -
- Forth step content. -
- Back - Submit - + ${stepperContent(false, true)} ${textBlock()} `;