Skip to content

Commit

Permalink
fix: review
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeripeierSBB
jeripeierSBB committed Nov 18, 2024
1 parent 9a9ed7a commit 09a4332
Show file tree
Hide file tree
Showing 4 changed files with 40 additions and 40 deletions.
18 changes: 18 additions & 0 deletions src/elements/core/styles/core.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,3 +168,21 @@ sbb-train-formation:has(sbb-train-wagon[sector]) {
sbb-train-formation:not(:has(sbb-train-wagon[label])) {
--sbb-train-formation-wagon-label-display: none;
}

// TODO: Move to sbb-train-wagon after CSS refactoring
sbb-train-formation[view='side'] sbb-train-wagon {
--sbb-train-wagon-wagon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M12.5,0.5 h55 a12,12 0 0 1 12,12 v15 a12,12 0 0 1 -12,12 h-55 a12,12 0 0 1 -12,-12 v-15 a12,12 0 0 1 12,-12 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
--sbb-train-wagon-wagon-closed-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Crect x='0.5' y='0.5' width='79' height='39' rx='11.5' stroke='%23000000'/%3E%3Cpath d='M76 4L4 36' stroke='%23000000'/%3E%3Cpath d='M76 36L4 4' stroke='%23000000'/%3E%3C/svg%3E");
--sbb-train-wagon-wagon-end-left-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M10.745 7.90416C13.5624 3.30431 18.5686 0.5 23.9627 0.5H68C74.3513 0.5 79.5 5.64873 79.5 12V28C79.5 34.3513 74.3513 39.5 68 39.5H11.922C2.93614 39.5 -2.57807 29.6562 2.11537 21.9934L10.745 7.90416Z' stroke='%23000000'/%3E%3C/svg%3E");
--sbb-train-wagon-locomotive-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M10.745 7.90416C13.5624 3.30431 18.5686 0.5 23.9627 0.5H56.0373C61.4314 0.5 66.4376 3.30432 69.255 7.90416L77.8846 21.9934C82.5781 29.6562 77.0639 39.5 68.078 39.5H11.922C2.93615 39.5 -2.57807 29.6562 2.11537 21.9934L10.745 7.90416Z' stroke='%23000000'/%3E%3C/svg%3E");
--sbb-train-wagon-wagon-end-right-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M0.5 12C0.5 5.64873 5.64873 0.5 12 0.5H56.0373C61.4314 0.5 66.4376 3.30432 69.255 7.90416L77.8846 21.9934C82.5781 29.6562 77.0638 39.5 68.0779 39.5H12C5.64873 39.5 0.5 34.3513 0.5 28V12Z' stroke='%23000000'/%3E%3C/svg%3E");
}

// TODO: Move to sbb-train-wagon after CSS refactoring
sbb-train-formation[view='top'] sbb-train-wagon {
--sbb-train-wagon-wagon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M8.5,0.5 h63 a8,8 0 0 1 8,8 v23 a8,8 0 0 1 -8,8 h-63 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E%0A");
--sbb-train-wagon-wagon-closed-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Crect x='0.5' y='0.5' width='79' height='39' rx='7.5' stroke='%23000000'/%3E%3Cpath d='M77.5 2.5L2.5 37.5' stroke='%23000000'/%3E%3Cpath d='M77.5 37.5L2.5 2.5' stroke='%23000000'/%3E%3C/svg%3E");
--sbb-train-wagon-wagon-end-left-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath transform='translate(80,40) rotate(180)' d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
--sbb-train-wagon-locomotive-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M20,0.5 h40 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-40 a19.5,19.5 0 0 1 -19.5,-19.5 v0 a19.5,19.5 0 0 1 19.5,-19.5 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E%0A");
--sbb-train-wagon-wagon-end-right-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
}
18 changes: 0 additions & 18 deletions src/elements/train/train-formation/train-formation.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,24 +17,6 @@
}
}

// TODO: Move to sbb-train-wagon after CSS refactoring
:host([view='side']) {
--sbb-train-formation-wagon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M12.5,0.5 h55 a12,12 0 0 1 12,12 v15 a12,12 0 0 1 -12,12 h-55 a12,12 0 0 1 -12,-12 v-15 a12,12 0 0 1 12,-12 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
--sbb-train-formation-wagon-closed-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Crect x='0.5' y='0.5' width='79' height='39' rx='11.5' stroke='%23000000'/%3E%3Cpath d='M76 4L4 36' stroke='%23000000'/%3E%3Cpath d='M76 36L4 4' stroke='%23000000'/%3E%3C/svg%3E");
--sbb-train-formation-wagon-end-left-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M10.745 7.90416C13.5624 3.30431 18.5686 0.5 23.9627 0.5H68C74.3513 0.5 79.5 5.64873 79.5 12V28C79.5 34.3513 74.3513 39.5 68 39.5H11.922C2.93614 39.5 -2.57807 29.6562 2.11537 21.9934L10.745 7.90416Z' stroke='%23000000'/%3E%3C/svg%3E");
--sbb-train-formation-locomotive-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M10.745 7.90416C13.5624 3.30431 18.5686 0.5 23.9627 0.5H56.0373C61.4314 0.5 66.4376 3.30432 69.255 7.90416L77.8846 21.9934C82.5781 29.6562 77.0639 39.5 68.078 39.5H11.922C2.93615 39.5 -2.57807 29.6562 2.11537 21.9934L10.745 7.90416Z' stroke='%23000000'/%3E%3C/svg%3E");
--sbb-train-formation-wagon-end-right-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M0.5 12C0.5 5.64873 5.64873 0.5 12 0.5H56.0373C61.4314 0.5 66.4376 3.30432 69.255 7.90416L77.8846 21.9934C82.5781 29.6562 77.0638 39.5 68.0779 39.5H12C5.64873 39.5 0.5 34.3513 0.5 28V12Z' stroke='%23000000'/%3E%3C/svg%3E");
}

// TODO: Move to sbb-train-wagon after CSS refactoring
:host([view='top']) {
--sbb-train-formation-wagon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M8.5,0.5 h63 a8,8 0 0 1 8,8 v23 a8,8 0 0 1 -8,8 h-63 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E%0A");
--sbb-train-formation-wagon-closed-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Crect x='0.5' y='0.5' width='79' height='39' rx='7.5' stroke='%23000000'/%3E%3Cpath d='M77.5 2.5L2.5 37.5' stroke='%23000000'/%3E%3Cpath d='M77.5 37.5L2.5 2.5' stroke='%23000000'/%3E%3C/svg%3E");
--sbb-train-formation-wagon-end-left-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath transform='translate(80,40) rotate(180)' d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
--sbb-train-formation-locomotive-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M20,0.5 h40 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-40 a19.5,19.5 0 0 1 -19.5,-19.5 v0 a19.5,19.5 0 0 1 19.5,-19.5 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E%0A");
--sbb-train-formation-wagon-end-right-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
}

.sbb-train-formation {
@include sbb.scrollbar;

Expand Down
10 changes: 5 additions & 5 deletions src/elements/train/train-wagon/train-wagon.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,23 +40,23 @@
}

:host(:is([type='wagon'], [type='restaurant'], [type='sleeping'], [type='couchette'])) {
--sbb-train-wagon-shape: var(--sbb-train-formation-wagon-shape);
--sbb-train-wagon-shape: var(--sbb-train-wagon-wagon-shape);
}

:host([type='closed']) {
--sbb-train-wagon-shape: var(--sbb-train-formation-wagon-closed-shape);
--sbb-train-wagon-shape: var(--sbb-train-wagon-wagon-closed-shape);
}

:host([type='locomotive']) {
--sbb-train-wagon-shape: var(--sbb-train-formation-locomotive-shape);
--sbb-train-wagon-shape: var(--sbb-train-wagon-locomotive-shape);
}

:host([type='wagon-end-left']) {
--sbb-train-wagon-shape: var(--sbb-train-formation-wagon-end-left-shape);
--sbb-train-wagon-shape: var(--sbb-train-wagon-wagon-end-left-shape);
}

:host([type='wagon-end-right']) {
--sbb-train-wagon-shape: var(--sbb-train-formation-wagon-end-right-shape);
--sbb-train-wagon-shape: var(--sbb-train-wagon-wagon-end-right-shape);
}

.sbb-train-wagon {
Expand Down
34 changes: 17 additions & 17 deletions src/elements/train/train-wagon/train-wagon.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,22 +110,22 @@ class SbbTrainWagonElement extends SbbNamedSlotListMixin<SbbIconElement, typeof
this._sectorChange.emit();
}

protected override render(): TemplateResult {
const typeLabel = (): string => {
if (this.type === 'closed') {
return i18nClosedCompartmentLabel[this._language.current];
} else if (this.type === 'locomotive') {
return i18nLocomotiveLabel[this._language.current];
} else if (this.type === 'couchette') {
return i18nCouchetteWagonLabel[this._language.current];
} else if (this.type === 'sleeping') {
return i18nSleepingWagonLabel[this._language.current];
} else if (this.type === 'restaurant') {
return i18nRestaurantWagonLabel[this._language.current];
}
return i18nWagonLabel[this._language.current];
};
private _typeLabel(): string {
if (this.type === 'closed') {
return i18nClosedCompartmentLabel[this._language.current];
} else if (this.type === 'locomotive') {
return i18nLocomotiveLabel[this._language.current];
} else if (this.type === 'couchette') {
return i18nCouchetteWagonLabel[this._language.current];

Check warning on line 119 in src/elements/train/train-wagon/train-wagon.ts

View check run for this annotation

Codecov / codecov/patch

src/elements/train/train-wagon/train-wagon.ts#L119 

Added line #L119 was not covered by tests
} else if (this.type === 'sleeping') {
return i18nSleepingWagonLabel[this._language.current];
} else if (this.type === 'restaurant') {
return i18nRestaurantWagonLabel[this._language.current];
}
return i18nWagonLabel[this._language.current];
}

protected override render(): TemplateResult {
const blockedPassage =
this.type === 'wagon-end-left' && this.blockedPassage === 'none'
? 'previous'
Expand Down Expand Up @@ -172,7 +172,7 @@ class SbbTrainWagonElement extends SbbNamedSlotListMixin<SbbIconElement, typeof
${when(
listEntriesCount > 1,
() =>
html`<ul aria-label=${typeLabel()} class="sbb-train-wagon__compartment">
html`<ul aria-label=${this._typeLabel()} class="sbb-train-wagon__compartment">
${this.sector
? html`<li class="sbb-screen-reader-only">${sectorString}</li>`
: nothing}
Expand All @@ -199,7 +199,7 @@ class SbbTrainWagonElement extends SbbNamedSlotListMixin<SbbIconElement, typeof
() =>
html`<div class="sbb-train-wagon__compartment">
<span class="sbb-screen-reader-only">
${`${typeLabel()}${this.sector ? `, ${sectorString}` : ''}`}
${`${this._typeLabel()}${this.sector ? `, ${sectorString}` : ''}`}
</span>
<span class="sbb-train-wagon__label" aria-hidden=${`${!this.label}`}>
${labelContent}
Expand Down

0 comments on commit 09a4332

Please sign in to comment.