diff --git a/skills/tedi-angular/references/components.md b/skills/tedi-angular/references/components.md index a967265f4..842c2dcfe 100644 --- a/skills/tedi-angular/references/components.md +++ b/skills/tedi-angular/references/components.md @@ -637,26 +637,6 @@ Implements `ControlValueAccessor`. Value type is `T` (single) or `T[]` (multisel Go to page ``` -### HorizontalStepper -**Selector:** `tedi-horizontal-stepper` -**Inputs:** -- `ariaLabel: string` -- `background: "default" | "transparent" = "default"` -- `compact: boolean | "sm" | "md" | "lg" | "xl" = "sm"` — collapse labels to show only indicators plus the selected step's label. `true` = always collapsed; a breakpoint = collapsed below that breakpoint. - -**Sub-component:** `tedi-horizontal-stepper-item` -- `label: string` (required), `description: string` -- `completed`, `error`, `selected` (booleanAttribute inputs) -- `(stepSelect)` — emitted on click - -```html - - - - - -``` - ## Notifications ### Alert diff --git a/tedi/components/navigation/horizontal-stepper/horizontal-stepper-item/horizontal-stepper-item.component.html b/tedi/components/navigation/horizontal-stepper/horizontal-stepper-item/horizontal-stepper-item.component.html deleted file mode 100644 index 7b2b413ff..000000000 --- a/tedi/components/navigation/horizontal-stepper/horizontal-stepper-item/horizontal-stepper-item.component.html +++ /dev/null @@ -1,32 +0,0 @@ - diff --git a/tedi/components/navigation/horizontal-stepper/horizontal-stepper-item/horizontal-stepper-item.component.scss b/tedi/components/navigation/horizontal-stepper/horizontal-stepper-item/horizontal-stepper-item.component.scss deleted file mode 100644 index 3678daee4..000000000 --- a/tedi/components/navigation/horizontal-stepper/horizontal-stepper-item/horizontal-stepper-item.component.scss +++ /dev/null @@ -1,224 +0,0 @@ -.tedi-horizontal-stepper-item { - $host: &; - - position: relative; - display: flex; - - &__step { - position: relative; - display: flex; - gap: var(--stepper-item-horizontal-inner-spacing); - align-items: flex-start; - width: auto; - min-height: 40px; - padding: var(--stepper-item-horizontal-padding-y) var(--stepper-item-horizontal-padding-x); - font-family: var(--family-default); - text-align: left; - cursor: pointer; - background: none; - border: none; - border-radius: 0; - - &:focus-visible { - z-index: 2; - outline: 2px solid var(--general-focus-outline); - outline-offset: -2px; - } - } - - &__indicator { - display: flex; - flex-shrink: 0; - align-items: center; - justify-content: center; - width: var(--stepper-item-vertical-step-size-lg); - height: var(--stepper-item-vertical-step-size-lg); - background-color: var(--stepper-step-default-bg); - border: 1px solid var(--stepper-step-default-border); - border-radius: 100%; - } - - &__number { - font-size: var(--body-small-bold-size); - font-weight: var(--body-bold-weight); - line-height: var(--body-small-bold-line-height); - color: var(--general-text-secondary); - } - - &__content { - display: flex; - flex-direction: column; - justify-content: center; - white-space: nowrap; - } - - &__label { - font-size: var(--body-regular-size); - font-weight: var(--body-regular-weight); - line-height: var(--body-regular-line-height); - color: var(--stepper-item-horizontal-text-default); - } - - &__description { - font-size: var(--body-small-regular-size); - font-weight: var(--body-small-regular-weight); - line-height: var(--body-small-regular-line-height); - color: var(--general-text-tertiary); - } - - &:not(#{$host}--selected):not(#{$host}--completed):not(#{$host}--error) { - #{$host}__step:hover { - #{$host}__indicator { - background-color: var(--stepper-step-default-bg-hover); - border-color: transparent; - } - - #{$host}__number { - color: var(--general-text-white); - } - - #{$host}__label { - color: var(--stepper-item-horizontal-text-hover); - } - } - - #{$host}__step:active { - background-color: var(--stepper-item-horizontal-type-default-bg-active); - - #{$host}__indicator { - background-color: var(--stepper-step-default-bg); - border-color: transparent; - } - - #{$host}__number { - color: var(--general-text-primary); - } - - #{$host}__label { - color: var(--stepper-item-horizontal-text-hover); - } - } - } - - // ------------------------------------------------------- - // Selected - // ------------------------------------------------------- - &--selected { - --_step-arrow-width: 1rem; - - z-index: 1; - - #{$host}__step { - padding-right: calc(var(--stepper-item-horizontal-padding-x) + var(--_step-arrow-width)); - cursor: default; - background-color: var(--stepper-item-horizontal-type-selected-bg-default); - clip-path: polygon(0 0, calc(100% - var(--_step-arrow-width)) 0, 100% 50%, calc(100% - var(--_step-arrow-width)) 100%, 0 100%); - } - - #{$host}__indicator { - background-color: var(--stepper-step-default-bg); - border-color: transparent; - } - - #{$host}__number { - font-weight: var(--body-bold-weight); - color: var(--general-text-brand); - } - - #{$host}__label { - font-weight: var(--body-bold-weight); - line-height: var(--body-bold-line-height); - color: var(--stepper-item-horizontal-text-selected); - } - - #{$host}__description { - color: var(--general-text-white); - } - } - - &--completed { - #{$host}__step { - background-color: var(--stepper-item-horizontal-type-completed-bg-default); - } - - #{$host}__indicator { - background-color: var(--stepper-step-completed-bg); - border-color: transparent; - } - - #{$host}__label { - color: var(--stepper-item-horizontal-text-completed-default); - } - - #{$host}__description { - color: var(--stepper-item-horizontal-text-completed-default); - } - - #{$host}__step:hover { - #{$host}__indicator { - background-color: var(--stepper-step-completed-bg-hover); - } - - #{$host}__label, - #{$host}__description { - color: var(--stepper-item-horizontal-text-completed-hover); - } - } - - #{$host}__step:active { - background-color: var(--stepper-item-horizontal-type-completed-bg-active); - - #{$host}__indicator { - background-color: var(--stepper-step-completed-bg-hover); - } - - #{$host}__label, - #{$host}__description { - color: var(--stepper-item-horizontal-text-completed-hover); - } - } - } - - &--error { - #{$host}__step { - background-color: var(--stepper-item-horizontal-type-danger-bg-default); - } - - #{$host}__indicator { - background-color: var(--stepper-step-danger-bg); - border-color: transparent; - } - - #{$host}__label { - color: var(--stepper-item-horizontal-text-danger-default); - } - - #{$host}__description { - color: var(--stepper-item-horizontal-text-danger-default); - } - - #{$host}__step:hover { - #{$host}__indicator { - background-color: var(--stepper-step-danger-bg-hover); - } - - #{$host}__label, - #{$host}__description { - color: var(--stepper-item-horizontal-text-danger-hover); - } - } - - #{$host}__step:active { - background-color: var(--stepper-item-horizontal-type-danger-bg-active); - - #{$host}__indicator { - background-color: var(--stepper-step-danger-bg-hover); - } - - #{$host}__label, - #{$host}__description { - color: var(--stepper-item-horizontal-text-danger-hover); - } - } - } -} diff --git a/tedi/components/navigation/horizontal-stepper/horizontal-stepper-item/horizontal-stepper-item.component.spec.ts b/tedi/components/navigation/horizontal-stepper/horizontal-stepper-item/horizontal-stepper-item.component.spec.ts deleted file mode 100644 index 6672d9e8e..000000000 --- a/tedi/components/navigation/horizontal-stepper/horizontal-stepper-item/horizontal-stepper-item.component.spec.ts +++ /dev/null @@ -1,196 +0,0 @@ -import { Component } from "@angular/core"; -import { ComponentFixture, TestBed } from "@angular/core/testing"; -import { TediTranslationService } from "../../../../services/translation/translation.service"; -import { TEDI_TRANSLATION_DEFAULT_TOKEN } from "../../../../tokens/translation.token"; -import { HorizontalStepperItemComponent } from "./horizontal-stepper-item.component"; - -class TranslationMock { - translate(key: string) { - return key; - } - - track(key: string) { - return () => key; - } -} - -@Component({ - standalone: true, - imports: [HorizontalStepperItemComponent], - template: ` - - `, -}) -class TestHostComponent { - label = "Step"; - description?: string; - completed = false; - error = false; - selected = false; - onStepSelect = jest.fn(); -} - -describe("HorizontalStepperItemComponent", () => { - let fixture: ComponentFixture; - let host: TestHostComponent; - - function getItem(): HTMLElement { - return fixture.nativeElement.querySelector("tedi-horizontal-stepper-item"); - } - - function getButton(): HTMLButtonElement { - return fixture.nativeElement.querySelector( - ".tedi-horizontal-stepper-item__step", - ); - } - - beforeEach(() => { - TestBed.configureTestingModule({ - imports: [TestHostComponent], - providers: [ - { provide: TediTranslationService, useClass: TranslationMock }, - { provide: TEDI_TRANSLATION_DEFAULT_TOKEN, useValue: "et" }, - ], - }); - - fixture = TestBed.createComponent(TestHostComponent); - host = fixture.componentInstance; - fixture.detectChanges(); - }); - - it("should create", () => { - expect(getItem()).toBeTruthy(); - }); - - it("should have tedi-horizontal-stepper-item class", () => { - expect(getItem().classList).toContain("tedi-horizontal-stepper-item"); - }); - - it("should render label text", () => { - const label = fixture.nativeElement.querySelector( - ".tedi-horizontal-stepper-item__label", - ); - expect(label.textContent.trim()).toBe("Step"); - }); - - it("should render step number when set", () => { - const itemComponent = fixture.debugElement.children[0].componentInstance; - itemComponent._stepNumber.set(3); - fixture.detectChanges(); - - const number = fixture.nativeElement.querySelector( - ".tedi-horizontal-stepper-item__number", - ); - expect(number.textContent.trim()).toBe("3"); - }); - - it("should render description when provided", () => { - host.description = "Some description"; - fixture.detectChanges(); - - const desc = fixture.nativeElement.querySelector( - ".tedi-horizontal-stepper-item__description", - ); - expect(desc).toBeTruthy(); - expect(desc.textContent.trim()).toBe("Some description"); - }); - - it("should not render description when not provided", () => { - const desc = fixture.nativeElement.querySelector( - ".tedi-horizontal-stepper-item__description", - ); - expect(desc).toBeFalsy(); - }); - - it("should apply selected class and aria-current", () => { - host.selected = true; - fixture.detectChanges(); - - expect(getItem().classList).toContain( - "tedi-horizontal-stepper-item--selected", - ); - expect(getButton().getAttribute("aria-current")).toBe("step"); - }); - - it("should not set aria-current when not selected", () => { - expect(getButton().getAttribute("aria-current")).toBeNull(); - }); - - it("should apply completed class and show check icon", () => { - host.completed = true; - fixture.detectChanges(); - - expect(getItem().classList).toContain( - "tedi-horizontal-stepper-item--completed", - ); - - const icon = fixture.nativeElement.querySelector("tedi-icon"); - expect(icon).toBeTruthy(); - expect(icon.textContent).toContain("check"); - }); - - it("should apply error class and show exclamation icon", () => { - host.error = true; - fixture.detectChanges(); - - expect(getItem().classList).toContain( - "tedi-horizontal-stepper-item--error", - ); - - const icon = fixture.nativeElement.querySelector("tedi-icon"); - expect(icon).toBeTruthy(); - expect(icon.textContent).toContain("exclamation"); - }); - - it("should prioritize error over completed", () => { - host.completed = true; - host.error = true; - fixture.detectChanges(); - - expect(getItem().classList).toContain( - "tedi-horizontal-stepper-item--error", - ); - expect(getItem().classList).not.toContain( - "tedi-horizontal-stepper-item--completed", - ); - - const icon = fixture.nativeElement.querySelector("tedi-icon"); - expect(icon.textContent).toContain("exclamation"); - }); - - it("should show step number for default type", () => { - const number = fixture.nativeElement.querySelector( - ".tedi-horizontal-stepper-item__number", - ); - expect(number).toBeTruthy(); - }); - - it("should not show step number for completed type", () => { - host.completed = true; - fixture.detectChanges(); - - const number = fixture.nativeElement.querySelector( - ".tedi-horizontal-stepper-item__number", - ); - expect(number).toBeFalsy(); - }); - - it("should emit stepSelect on click", () => { - getButton().click(); - fixture.detectChanges(); - - expect(host.onStepSelect).toHaveBeenCalled(); - }); - - it("should render a button element", () => { - expect(getButton().tagName).toBe("BUTTON"); - expect(getButton().getAttribute("type")).toBe("button"); - }); -}); diff --git a/tedi/components/navigation/horizontal-stepper/horizontal-stepper-item/horizontal-stepper-item.component.ts b/tedi/components/navigation/horizontal-stepper/horizontal-stepper-item/horizontal-stepper-item.component.ts deleted file mode 100644 index 2f4b2e804..000000000 --- a/tedi/components/navigation/horizontal-stepper/horizontal-stepper-item/horizontal-stepper-item.component.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { - booleanAttribute, - ChangeDetectionStrategy, - Component, - input, - output, - signal, - ViewEncapsulation, -} from "@angular/core"; -import { IconComponent } from "../../../base/icon/icon.component"; -import { TediTranslationPipe } from "../../../../services/translation/translation.pipe"; - -@Component({ - selector: "tedi-horizontal-stepper-item", - imports: [IconComponent, TediTranslationPipe], - templateUrl: "./horizontal-stepper-item.component.html", - styleUrl: "./horizontal-stepper-item.component.scss", - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush, - host: { - "[class.tedi-horizontal-stepper-item]": "true", - "[class.tedi-horizontal-stepper-item--selected]": "selected()", - "[class.tedi-horizontal-stepper-item--completed]": - "completed() && !error()", - "[class.tedi-horizontal-stepper-item--error]": "error()", - }, -}) -export class HorizontalStepperItemComponent { - label = input.required(); - description = input(); - completed = input(false, { transform: booleanAttribute }); - error = input(false, { transform: booleanAttribute }); - selected = input(false, { transform: booleanAttribute }); - - stepSelect = output(); - - /** @internal Set by parent HorizontalStepperComponent */ - _stepNumber = signal(0); -} diff --git a/tedi/components/navigation/horizontal-stepper/horizontal-stepper-item/index.ts b/tedi/components/navigation/horizontal-stepper/horizontal-stepper-item/index.ts deleted file mode 100644 index cb50d2187..000000000 --- a/tedi/components/navigation/horizontal-stepper/horizontal-stepper-item/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./horizontal-stepper-item.component"; diff --git a/tedi/components/navigation/horizontal-stepper/horizontal-stepper.component.html b/tedi/components/navigation/horizontal-stepper/horizontal-stepper.component.html deleted file mode 100644 index 40b372640..000000000 --- a/tedi/components/navigation/horizontal-stepper/horizontal-stepper.component.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/tedi/components/navigation/horizontal-stepper/horizontal-stepper.component.scss b/tedi/components/navigation/horizontal-stepper/horizontal-stepper.component.scss deleted file mode 100644 index 727d4bf32..000000000 --- a/tedi/components/navigation/horizontal-stepper/horizontal-stepper.component.scss +++ /dev/null @@ -1,46 +0,0 @@ -@use "@tedi-design-system/core/bootstrap-utility/breakpoints"; - -@mixin compact-styles { - .tedi-horizontal-stepper-item { - flex: 1 0 0; - - &--selected { - flex: 0 0 auto; - } - - .tedi-horizontal-stepper-item__step { - align-items: center; - justify-content: center; - width: 100%; - } - - .tedi-horizontal-stepper-item__content { - display: none; - } - - &--selected .tedi-horizontal-stepper-item__content { - display: flex; - } - } -} - -.tedi-horizontal-stepper { - display: flex; - background-color: var(--stepper-background); - - &--transparent { - background-color: transparent; - } - - &--compact { - @include compact-styles; - } - - @each $bp in (sm, md, lg, xl) { - &--compact-#{$bp} { - @include breakpoints.media-breakpoint-down($bp) { - @include compact-styles; - } - } - } -} diff --git a/tedi/components/navigation/horizontal-stepper/horizontal-stepper.component.spec.ts b/tedi/components/navigation/horizontal-stepper/horizontal-stepper.component.spec.ts deleted file mode 100644 index 746189c28..000000000 --- a/tedi/components/navigation/horizontal-stepper/horizontal-stepper.component.spec.ts +++ /dev/null @@ -1,177 +0,0 @@ -import { Component } from "@angular/core"; -import { ComponentFixture, TestBed } from "@angular/core/testing"; -import { TediTranslationService } from "../../../services/translation/translation.service"; -import { TEDI_TRANSLATION_DEFAULT_TOKEN } from "../../../tokens/translation.token"; -import { - HorizontalStepperComponent, - HorizontalStepperCompact, -} from "./horizontal-stepper.component"; -import { HorizontalStepperItemComponent } from "./horizontal-stepper-item/horizontal-stepper-item.component"; - -class TranslationMock { - translate(key: string) { - return key; - } - - track(key: string) { - return () => key; - } -} - -@Component({ - standalone: true, - imports: [HorizontalStepperComponent, HorizontalStepperItemComponent], - template: ` - - - - - - - `, -}) -class TestHostComponent { - ariaLabel = "Form progress"; - background: "default" | "transparent" = "default"; - compact: HorizontalStepperCompact = "sm"; -} - -describe("HorizontalStepperComponent", () => { - let fixture: ComponentFixture; - let host: TestHostComponent; - - function getStepper(): HTMLElement { - return fixture.nativeElement.querySelector("tedi-horizontal-stepper"); - } - - function getItems(): NodeListOf { - return fixture.nativeElement.querySelectorAll( - "tedi-horizontal-stepper-item", - ); - } - - beforeEach(() => { - TestBed.configureTestingModule({ - imports: [TestHostComponent], - providers: [ - { provide: TediTranslationService, useClass: TranslationMock }, - { provide: TEDI_TRANSLATION_DEFAULT_TOKEN, useValue: "et" }, - ], - }); - - fixture = TestBed.createComponent(TestHostComponent); - host = fixture.componentInstance; - fixture.detectChanges(); - }); - - it("should create", () => { - expect(getStepper()).toBeTruthy(); - }); - - it("should have tedi-horizontal-stepper class", () => { - expect(getStepper().classList).toContain("tedi-horizontal-stepper"); - }); - - it("should have navigation role", () => { - expect(getStepper().getAttribute("role")).toBe("navigation"); - }); - - it("should set aria-label", () => { - expect(getStepper().getAttribute("aria-label")).toBe("Form progress"); - }); - - it("should render all step items", () => { - expect(getItems().length).toBe(4); - }); - - it("should assign step numbers to items", () => { - const numbers = fixture.nativeElement.querySelectorAll( - ".tedi-horizontal-stepper-item__number", - ); - // Item 1 is completed (no number), item 2 is selected (shows number) - // Items 3 and 4 are default (show numbers) - // Step 2 = selected, step 3 and 4 = default - expect(numbers.length).toBe(3); - expect(numbers[0].textContent.trim()).toBe("2"); - expect(numbers[1].textContent.trim()).toBe("3"); - expect(numbers[2].textContent.trim()).toBe("4"); - }); - - it("should apply transparent background class", () => { - host.background = "transparent"; - fixture.detectChanges(); - - expect(getStepper().classList).toContain( - "tedi-horizontal-stepper--transparent", - ); - }); - - it("should not apply transparent class by default", () => { - expect(getStepper().classList).not.toContain( - "tedi-horizontal-stepper--transparent", - ); - }); - - it("should apply correct states to items", () => { - const items = getItems(); - - expect(items[0].classList).toContain( - "tedi-horizontal-stepper-item--completed", - ); - expect(items[1].classList).toContain( - "tedi-horizontal-stepper-item--selected", - ); - expect(items[2].classList).not.toContain( - "tedi-horizontal-stepper-item--selected", - ); - expect(items[3].classList).not.toContain( - "tedi-horizontal-stepper-item--completed", - ); - }); - - describe("compact input", () => { - it("should apply compact-sm class by default", () => { - expect(getStepper().classList).toContain( - "tedi-horizontal-stepper--compact-sm", - ); - expect(getStepper().classList).not.toContain( - "tedi-horizontal-stepper--compact", - ); - }); - - it("should apply compact class when compact is true", () => { - host.compact = true; - fixture.detectChanges(); - - expect(getStepper().classList).toContain( - "tedi-horizontal-stepper--compact", - ); - expect(getStepper().classList).not.toContain( - "tedi-horizontal-stepper--compact-sm", - ); - }); - - it("should not apply any compact class when compact is false", () => { - host.compact = false; - fixture.detectChanges(); - - const classes = Array.from(getStepper().classList); - expect(classes.some((c) => c.startsWith("tedi-horizontal-stepper--compact"))).toBe(false); - }); - - it("should apply the matching breakpoint class", () => { - for (const bp of ["sm", "md", "lg", "xl"] as const) { - host.compact = bp; - fixture.detectChanges(); - - expect(getStepper().classList).toContain( - `tedi-horizontal-stepper--compact-${bp}`, - ); - } - }); - }); -}); diff --git a/tedi/components/navigation/horizontal-stepper/horizontal-stepper.component.ts b/tedi/components/navigation/horizontal-stepper/horizontal-stepper.component.ts deleted file mode 100644 index c4af1150d..000000000 --- a/tedi/components/navigation/horizontal-stepper/horizontal-stepper.component.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { - ChangeDetectionStrategy, - Component, - contentChildren, - effect, - input, - ViewEncapsulation, -} from "@angular/core"; -import { HorizontalStepperItemComponent } from "./horizontal-stepper-item/horizontal-stepper-item.component"; - -export type HorizontalStepperBackground = "default" | "transparent"; -export type HorizontalStepperBreakpoint = "sm" | "md" | "lg" | "xl"; -export type HorizontalStepperCompact = boolean | HorizontalStepperBreakpoint; - -@Component({ - selector: "tedi-horizontal-stepper", - templateUrl: "./horizontal-stepper.component.html", - styleUrl: "./horizontal-stepper.component.scss", - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush, - host: { - "[class.tedi-horizontal-stepper]": "true", - "[class.tedi-horizontal-stepper--transparent]": - "background() === 'transparent'", - "[class.tedi-horizontal-stepper--compact]": "compact() === true", - "[class.tedi-horizontal-stepper--compact-sm]": "compact() === 'sm'", - "[class.tedi-horizontal-stepper--compact-md]": "compact() === 'md'", - "[class.tedi-horizontal-stepper--compact-lg]": "compact() === 'lg'", - "[class.tedi-horizontal-stepper--compact-xl]": "compact() === 'xl'", - role: "navigation", - "[attr.aria-label]": "ariaLabel()", - }, -}) -export class HorizontalStepperComponent { - ariaLabel = input(); - background = input("default"); - /** - * Collapse labels so only indicators plus the selected step's label are visible. - * `true` — always collapsed. A breakpoint (`'sm'`, `'md'`, `'lg'`, `'xl'`) — collapsed below that breakpoint. @default 'sm' - */ - compact = input("sm"); - - items = contentChildren(HorizontalStepperItemComponent); - - private assignStepNumbers = effect(() => { - this.items().forEach((item, index) => { - item._stepNumber.set(index + 1); - }); - }); -} diff --git a/tedi/components/navigation/horizontal-stepper/horizontal-stepper.stories.ts b/tedi/components/navigation/horizontal-stepper/horizontal-stepper.stories.ts deleted file mode 100644 index 1f3096b67..000000000 --- a/tedi/components/navigation/horizontal-stepper/horizontal-stepper.stories.ts +++ /dev/null @@ -1,214 +0,0 @@ -import { Meta, StoryObj, moduleMetadata } from "@storybook/angular"; -import { HorizontalStepperComponent } from "./horizontal-stepper.component"; -import { HorizontalStepperItemComponent } from "./horizontal-stepper-item/horizontal-stepper-item.component"; - -/** - * Figma ↗
- * A horizontal stepper component for displaying multi-step progress flows. - * Each step can be in default, selected, completed, or error state. - */ -export default { - title: "TEDI-Ready/Components/Navigation/HorizontalStepper", - component: HorizontalStepperComponent, - decorators: [ - moduleMetadata({ - imports: [HorizontalStepperComponent, HorizontalStepperItemComponent], - }), - ], - argTypes: { - ariaLabel: { - control: "text", - description: "Accessible label for the navigation landmark.", - table: { - type: { summary: "string" }, - category: "inputs", - }, - }, - background: { - control: "select", - options: ["default", "transparent"], - description: "Background style of the stepper container.", - table: { - defaultValue: { summary: "default" }, - type: { summary: "'default' | 'transparent'" }, - category: "inputs", - }, - }, - compact: { - control: "select", - options: [true, false, "sm", "md", "lg", "xl"], - description: - "Collapse labels (show only indicators + selected step's label). `true` = always; a breakpoint string = collapse below that breakpoint.", - table: { - defaultValue: { summary: "'sm'" }, - type: { summary: "boolean | 'sm' | 'md' | 'lg' | 'xl'" }, - category: "inputs", - }, - }, - }, -} as Meta; - -type Story = StoryObj; - -export const Default: Story = { - render: (props) => ({ - props, - template: ` - - - - - - - `, - }), - args: { - background: "default", - }, -}; - -export const SecondStep: Story = { - render: (props) => ({ - props, - template: ` - - - - - - - `, - }), - args: { - background: "default", - }, -}; - -export const ThirdStep: Story = { - render: (props) => ({ - props, - template: ` - - - - - - - `, - }), - args: { - background: "default", - }, -}; - -export const WithErrors: Story = { - render: (props) => ({ - props, - template: ` -
- - - - - - - - - - - - -
- `, - }), - args: { - background: "default", - }, -}; - -export const WithDescriptions: Story = { - render: (props) => ({ - props, - template: ` -
- - - - - - - - - - - - - - - - - - - - - - - - -
- `, - }), - args: { - background: "default", - }, -}; - -export const TransparentBackground: Story = { - render: (props) => ({ - props, - template: ` - - - - - - - `, - }), -}; - -/** - * Always collapsed — only indicators plus the selected step's label are shown, - * regardless of viewport width. - */ -export const AlwaysCompact: Story = { - render: (props) => ({ - props, - template: ` - - - - - - - `, - }), -}; - -/** - * Collapses at the `md` breakpoint — useful when labels with descriptions - * would overflow on narrower desktops. - */ -export const CompactAtMdBreakpoint: Story = { - render: (props) => ({ - props, - template: ` - - - - - - - `, - }), -}; diff --git a/tedi/components/navigation/horizontal-stepper/index.ts b/tedi/components/navigation/horizontal-stepper/index.ts deleted file mode 100644 index 17a879dd9..000000000 --- a/tedi/components/navigation/horizontal-stepper/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./horizontal-stepper.component"; -export * from "./horizontal-stepper-item"; diff --git a/tedi/components/navigation/index.ts b/tedi/components/navigation/index.ts index 4cae8b5eb..b7336cf96 100644 --- a/tedi/components/navigation/index.ts +++ b/tedi/components/navigation/index.ts @@ -1,2 +1 @@ -export * from "./horizontal-stepper"; export * from "./link/link.component"; \ No newline at end of file diff --git a/tedi/services/translation/translations.ts b/tedi/services/translation/translations.ts index c42513236..7665e5351 100644 --- a/tedi/services/translation/translations.ts +++ b/tedi/services/translation/translations.ts @@ -289,14 +289,6 @@ export const translationsMap = { en: "Not completed", ru: "Не завершено", }, - "stepper.error": { - description: - "Label for screen-reader that this step has errors (visually hidden)", - components: ["HorizontalStepper"], - et: "Viga", - en: "Error", - ru: "Ошибка", - }, "skeleton.loading": { description: "Announced by screen-readers when skeleton is loading", components: ["Skeleton"],