Skip to content

Commit

Permalink
fix: review Jeri/Lukas
Browse files Browse the repository at this point in the history
  • Loading branch information
@DavideMininni-Fincons
DavideMininni-Fincons committed Dec 17, 2024
1 parent ca15fd3 commit cc89dae
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 32 deletions.
8 changes: 4 additions & 4 deletions src/elements/stepper/step/step.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@ import style from './step.scss?lit&inline';
let nextId = 0;

export type SbbStepValidateEventDetails = {
currentIndex?: number;
currentStep?: SbbStepElement;
nextIndex?: number;
nextStep?: SbbStepElement;
currentIndex: number | null;
currentStep: SbbStepElement | null;
nextIndex: number | null;
nextStep: SbbStepElement | null;
};

/**
Expand Down
18 changes: 9 additions & 9 deletions src/elements/stepper/stepper/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,15 +103,15 @@ Use an `aria-label` attribute to describe the purpose of the stepper. The `sbb-s

## Properties

| Name | Attribute | Privacy | Type | Default | Description |
| ---------------- | ----------------- | ------- | -------------------------------- | ------------------ | --------------------------------------------------------------------------------- |
| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom \| undefined` | | Overrides the behaviour of `orientation` property. |
| `linear` | `linear` | public | `boolean` | `false` | If set to true, only the current and previous labels can be clicked and selected. |
| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Steps orientation, either horizontal or vertical. |
| `selected` | - | public | `SbbStepElement \| undefined` | | The currently selected step. |
| `selectedIndex` | `selected-index` | public | `number \| undefined` | | The currently selected step index. |
| `size` | `size` | public | `'s' \| 'm'` | `'m' / 's' (lean)` | Size variant, either s or m. |
| `steps` | - | public | `SbbStepElement[]` | | The steps of the stepper. |
| Name | Attribute | Privacy | Type | Default | Description |
| ---------------- | ----------------- | ------- | --------------------------- | ------------------ | --------------------------------------------------------------------------------- |
| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom \| null` | `null` | Overrides the behaviour of `orientation` property. |
| `linear` | `linear` | public | `boolean` | `false` | If set to true, only the current and previous labels can be clicked and selected. |
| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Steps orientation, either horizontal or vertical. |
| `selected` | - | public | `SbbStepElement \| null` | | The currently selected step. |
| `selectedIndex` | `selected-index` | public | `number \| null` | | The currently selected step index. |
| `size` | `size` | public | `'s' \| 'm'` | `'m' / 's' (lean)` | Size variant, either s or m. |
| `steps` | - | public | `SbbStepElement[]` | | The steps of the stepper. |

## Methods

Expand Down
38 changes: 19 additions & 19 deletions src/elements/stepper/stepper/stepper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,16 +37,16 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) {

/** Overrides the behaviour of `orientation` property. */
@property({ attribute: 'horizontal-from', reflect: true })
public set horizontalFrom(value: SbbHorizontalFrom | undefined) {
this._horizontalFrom = value && breakpoints.includes(value) ? value : undefined;
public set horizontalFrom(value: SbbHorizontalFrom | null) {
this._horizontalFrom = value && breakpoints.includes(value) ? value : null;

Check warning on line 41 in src/elements/stepper/stepper/stepper.ts

View check run for this annotation

Codecov / codecov/patch

src/elements/stepper/stepper/stepper.ts#L41 

Added line #L41 was not covered by tests
if (this._horizontalFrom && this._loaded) {
this._checkOrientation();
}
}
public get horizontalFrom(): SbbHorizontalFrom | undefined {
public get horizontalFrom(): SbbHorizontalFrom | null {
return this._horizontalFrom;
}
private _horizontalFrom?: SbbHorizontalFrom | undefined;
private _horizontalFrom: SbbHorizontalFrom | null = null;

/** Steps orientation, either horizontal or vertical. */
@property({ reflect: true })
Expand All @@ -60,24 +60,24 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) {

/** The currently selected step. */
@property({ attribute: false })
public set selected(step: SbbStepElement | undefined) {
public set selected(step: SbbStepElement | null) {
if (this._loaded) {
this._select(step);
}
}
public get selected(): SbbStepElement | undefined {
return this.querySelector?.<SbbStepElement>('sbb-step[data-selected]') ?? undefined;
public get selected(): SbbStepElement | null {
return this.querySelector?.<SbbStepElement>('sbb-step[data-selected]') ?? null;
}

/** The currently selected step index. */
@property({ attribute: 'selected-index', type: Number })
public set selectedIndex(index: number | undefined) {
if (this._loaded && index !== undefined) {
public set selectedIndex(index: number | null) {
if (this._loaded && index !== null) {
this._select(this.steps[index]);
}
}
public get selectedIndex(): number | undefined {
return this.selected ? this.steps.indexOf(this.selected) : undefined;
public get selectedIndex(): number | null {
return this.selected ? this.steps.indexOf(this.selected) : null;
}

/** The steps of the stepper. */
Expand All @@ -95,14 +95,14 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) {

/** Selects the next step. */
public next(): void {
if (this.selectedIndex !== undefined) {
if (this.selectedIndex !== null) {
this._select(this.steps[this.selectedIndex + 1]);
}
}

/** Selects the previous step. */
public previous(): void {
if (this.selectedIndex !== undefined) {
if (this.selectedIndex !== null) {
this._select(this.steps[this.selectedIndex - 1]);
}
}
Expand All @@ -122,7 +122,7 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) {
}
}

private _isValidStep(step: SbbStepElement | undefined): boolean {
private _isValidStep(step: SbbStepElement | null): boolean {
if (!step || (!this.linear && step.label?.hasAttribute('disabled'))) {
return false;
}
Expand All @@ -131,23 +131,23 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) {
return step === this.steps[0];
}

if (this.linear && this.selectedIndex !== undefined) {
if (this.linear && this.selectedIndex !== null) {
const index = this.steps.indexOf(step);
return index < this.selectedIndex || index === this.selectedIndex + 1;
}

return true;
}

private _select(step: SbbStepElement | undefined): void {
private _select(step: SbbStepElement | null): void {
if (!this._isValidStep(step)) {
return;
}
const validatePayload: SbbStepValidateEventDetails = {
currentIndex: this.selectedIndex,
currentStep: this.selected,
nextIndex: this.selectedIndex !== undefined ? this.selectedIndex + 1 : undefined,
nextStep: this.selectedIndex !== undefined ? this.steps[this.selectedIndex + 1] : undefined,
nextIndex: this.selectedIndex !== null ? this.selectedIndex + 1 : null,
nextStep: this.selectedIndex !== null ? this.steps[this.selectedIndex + 1] : null,
};
if (this.selected && !this.selected.validate(validatePayload)) {
return;
Expand Down Expand Up @@ -181,7 +181,7 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) {
}

private _calculateLabelOffsetTop(): number | undefined {
if (this.selectedIndex === undefined) {
if (this.selectedIndex === null) {

Check warning on line 184 in src/elements/stepper/stepper/stepper.ts

View check run for this annotation

Codecov / codecov/patch

src/elements/stepper/stepper/stepper.ts#L184 

Added line #L184 was not covered by tests
return;
}
let offset = 0;
Expand Down

0 comments on commit cc89dae

Please sign in to comment.