feat(sbb-pearl-chain): implement new component structure

package.json

@@ -47,7 +47,9 @@
     "lint:js": "eslint \"**/*.js\"",
     "lint:yml": "eslint \"**/*.{yml,yaml}\"",
     "lint:styles": "stylelint \"**/*.scss\"",
-    "lint:lit": "yarn lit-analyzer \"src/**/*.ts\"",
+    "lint:lit": "npm-run-all --sequential lint:lit:*",
+    "lint:lit:components": "yarn lit-analyzer \"src/elements/**/*.ts\"",
+    "lint:lit:components-experimental": "yarn lit-analyzer \"src/elements-experimental/**/*.ts\"",
     "lint:circular-imports": "madge --circular --ts-config ./tsconfig.json --extensions ts ./src",
     "lint:tsc": "npm-run-all --sequential lint:tsc:*",
     "lint:tsc:components": "tsc --noEmit --project src/elements/tsconfig.json",

src/elements-experimental/journey-summary/journey-summary.stories.ts

@@ -10,7 +10,7 @@ import {
   longFutureLeg,
   pastLeg,
   progressLeg,
-} from '../pearl-chain/pearl-chain.sample-data.js';
+} from '../pearl-chain-legacy/pearl-chain-legacy.sample-data.js';
 
 import readme from './readme.md?raw';
 

src/elements-experimental/journey-summary/journey-summary.visual.spec.ts

@@ -9,7 +9,7 @@ import {
   longFutureLeg,
   pastLeg,
   progressLeg,
-} from '../pearl-chain/pearl-chain.sample-data.js';
+} from '../pearl-chain-legacy/pearl-chain-legacy.sample-data.js';
 
 import './journey-summary.js';
 import '@sbb-esta/lyne-elements/button/button.js';

src/elements-experimental/pearl-chain-legacy.ts

@@ -0,0 +1 @@
+export * from './pearl-chain-legacy/pearl-chain-legacy.js';

src/elements-experimental/pearl-chain/__snapshots__/pearl-chain.snapshot.spec.snap.js → src/elements-experimental/pearl-chain-legacy/__snapshots__/pearl-chain-legacy.snapshot.spec.snap.js

@@ -1,13 +1,13 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-pearl-chain renders with one leg DOM"] = 
-`<sbb-pearl-chain>
-</sbb-pearl-chain>
+snapshots["sbb-pearl-chain-legacy renders with one leg DOM"] = 
+`<sbb-pearl-chain-legacy>
+</sbb-pearl-chain-legacy>
 `;
-/* end snapshot sbb-pearl-chain renders with one leg DOM */
+/* end snapshot sbb-pearl-chain-legacy renders with one leg DOM */
 
-snapshots["sbb-pearl-chain renders with one leg Shadow DOM"] = 
+snapshots["sbb-pearl-chain-legacy renders with one leg Shadow DOM"] = 
 `<div class="sbb-pearl-chain">
   <span class="sbb-pearl-chain__bullet sbb-pearl-chain__bullet--past">
   </span>
@@ -20,15 +20,15 @@ snapshots["sbb-pearl-chain renders with one leg Shadow DOM"] =
   </span>
 </div>
 `;
-/* end snapshot sbb-pearl-chain renders with one leg Shadow DOM */
+/* end snapshot sbb-pearl-chain-legacy renders with one leg Shadow DOM */
 
-snapshots["sbb-pearl-chain renders with two legs DOM"] = 
-`<sbb-pearl-chain>
-</sbb-pearl-chain>
+snapshots["sbb-pearl-chain-legacy renders with two legs DOM"] = 
+`<sbb-pearl-chain-legacy>
+</sbb-pearl-chain-legacy>
 `;
-/* end snapshot sbb-pearl-chain renders with two legs DOM */
+/* end snapshot sbb-pearl-chain-legacy renders with two legs DOM */
 
-snapshots["sbb-pearl-chain renders with two legs Shadow DOM"] = 
+snapshots["sbb-pearl-chain-legacy renders with two legs Shadow DOM"] = 
 `<div class="sbb-pearl-chain">
   <span class="sbb-pearl-chain__bullet sbb-pearl-chain__bullet--past">
   </span>
@@ -48,15 +48,15 @@ snapshots["sbb-pearl-chain renders with two legs Shadow DOM"] =
   </span>
 </div>
 `;
-/* end snapshot sbb-pearl-chain renders with two legs Shadow DOM */
+/* end snapshot sbb-pearl-chain-legacy renders with two legs Shadow DOM */
 
-snapshots["sbb-pearl-chain renders with departure stop skipped DOM"] = 
-`<sbb-pearl-chain>
-</sbb-pearl-chain>
+snapshots["sbb-pearl-chain-legacy renders with departure stop skipped DOM"] = 
+`<sbb-pearl-chain-legacy>
+</sbb-pearl-chain-legacy>
 `;
-/* end snapshot sbb-pearl-chain renders with departure stop skipped DOM */
+/* end snapshot sbb-pearl-chain-legacy renders with departure stop skipped DOM */
 
-snapshots["sbb-pearl-chain renders with departure stop skipped Shadow DOM"] = 
+snapshots["sbb-pearl-chain-legacy renders with departure stop skipped Shadow DOM"] = 
 `<div class="sbb-pearl-chain">
   <span class="sbb-pearl-chain__bullet sbb-pearl-chain__bullet--past">
   </span>
@@ -76,15 +76,15 @@ snapshots["sbb-pearl-chain renders with departure stop skipped Shadow DOM"] =
   </span>
 </div>
 `;
-/* end snapshot sbb-pearl-chain renders with departure stop skipped Shadow DOM */
+/* end snapshot sbb-pearl-chain-legacy renders with departure stop skipped Shadow DOM */
 
-snapshots["sbb-pearl-chain renders with arrival stop skipped DOM"] = 
-`<sbb-pearl-chain>
-</sbb-pearl-chain>
+snapshots["sbb-pearl-chain-legacy renders with arrival stop skipped DOM"] = 
+`<sbb-pearl-chain-legacy>
+</sbb-pearl-chain-legacy>
 `;
-/* end snapshot sbb-pearl-chain renders with arrival stop skipped DOM */
+/* end snapshot sbb-pearl-chain-legacy renders with arrival stop skipped DOM */
 
-snapshots["sbb-pearl-chain renders with arrival stop skipped Shadow DOM"] = 
+snapshots["sbb-pearl-chain-legacy renders with arrival stop skipped Shadow DOM"] = 
 `<div class="sbb-pearl-chain">
   <span class="sbb-pearl-chain__bullet sbb-pearl-chain__bullet--past">
   </span>
@@ -104,15 +104,15 @@ snapshots["sbb-pearl-chain renders with arrival stop skipped Shadow DOM"] =
   </span>
 </div>
 `;
-/* end snapshot sbb-pearl-chain renders with arrival stop skipped Shadow DOM */
+/* end snapshot sbb-pearl-chain-legacy renders with arrival stop skipped Shadow DOM */
 
-snapshots["sbb-pearl-chain renders with progress leg DOM"] = 
-`<sbb-pearl-chain>
-</sbb-pearl-chain>
+snapshots["sbb-pearl-chain-legacy renders with progress leg DOM"] = 
+`<sbb-pearl-chain-legacy>
+</sbb-pearl-chain-legacy>
 `;
-/* end snapshot sbb-pearl-chain renders with progress leg DOM */
+/* end snapshot sbb-pearl-chain-legacy renders with progress leg DOM */
 
-snapshots["sbb-pearl-chain renders with progress leg Shadow DOM"] = 
+snapshots["sbb-pearl-chain-legacy renders with progress leg Shadow DOM"] = 
 `<div class="sbb-pearl-chain">
   <span class="sbb-pearl-chain__bullet sbb-pearl-chain__bullet--progress">
   </span>
@@ -137,15 +137,15 @@ snapshots["sbb-pearl-chain renders with progress leg Shadow DOM"] =
   </span>
 </div>
 `;
-/* end snapshot sbb-pearl-chain renders with progress leg Shadow DOM */
+/* end snapshot sbb-pearl-chain-legacy renders with progress leg Shadow DOM */
 
-snapshots["sbb-pearl-chain renders with cancelled instead of progress leg DOM"] = 
-`<sbb-pearl-chain>
-</sbb-pearl-chain>
+snapshots["sbb-pearl-chain-legacy renders with cancelled instead of progress leg DOM"] = 
+`<sbb-pearl-chain-legacy>
+</sbb-pearl-chain-legacy>
 `;
-/* end snapshot sbb-pearl-chain renders with cancelled instead of progress leg DOM */
+/* end snapshot sbb-pearl-chain-legacy renders with cancelled instead of progress leg DOM */
 
-snapshots["sbb-pearl-chain renders with cancelled instead of progress leg Shadow DOM"] = 
+snapshots["sbb-pearl-chain-legacy renders with cancelled instead of progress leg Shadow DOM"] = 
 `<div class="sbb-pearl-chain">
   <span class="sbb-pearl-chain--departure-skipped sbb-pearl-chain__bullet sbb-pearl-chain__bullet--progress">
   </span>
@@ -165,5 +165,5 @@ snapshots["sbb-pearl-chain renders with cancelled instead of progress leg Shadow
   </span>
 </div>
 `;
-/* end snapshot sbb-pearl-chain renders with cancelled instead of progress leg Shadow DOM */
+/* end snapshot sbb-pearl-chain-legacy renders with cancelled instead of progress leg Shadow DOM */
 

src/elements-experimental/pearl-chain/pearl-chain.scss → src/elements-experimental/pearl-chain-legacy/pearl-chain-legacy.scss

@@ -4,8 +4,9 @@
   background-color: unset;
   background-image: linear-gradient(to right, currentcolor 0%, currentcolor 50%, Canvas 50%);
   background-repeat: repeat-x;
-  background-size: calc(2 * var(--sbb-pearl-chain-spacing-small)) var(--sbb-pearl-chain-height);
-  inset-inline-end: var(--sbb-pearl-chain-height);
+  background-size: calc(2 * var(--sbb-pearl-chain-leg-spacing-small))
+    var(--sbb-pearl-chain-leg-height);
+  inset-inline-end: var(--sbb-pearl-chain-leg-height);
 
   @include sbb.if-forced-colors {
     background: unset;
@@ -18,11 +19,11 @@
 @include sbb.box-sizing;
 
 :host {
-  --sbb-pearl-chain-height: var(--sbb-border-width-2x);
-  --sbb-pearl-chain-spacing-small: #{sbb.px-to-rem-build(2)};
+  --sbb-pearl-chain-leg-height: var(--sbb-border-width-2x);
+  --sbb-pearl-chain-leg-spacing-small: #{sbb.px-to-rem-build(2)};
   --sbb-pearl-chain-color: var(--sbb-pearl-chain-bullet-color);
-  --sbb-pearl-chain-color-disruption: var(--sbb-pearl-chain-bullet-color-disruption);
-  --sbb-pearl-chain-color-past: var(--sbb-pearl-chain-bullet-color-past);
+  --sbb-pearl-chain-leg-color-disruption: var(--sbb-pearl-chain-bullet-color-disruption);
+  --sbb-pearl-chain-leg-color-past: var(--sbb-pearl-chain-bullet-color-past);
   --sbb-pearl-chain-leg-width: 100%;
 
   display: block;
@@ -38,7 +39,7 @@
   color: var(--sbb-pearl-chain-color);
   width: 100%;
   padding-block: calc(
-    (var(--sbb-pearl-chain-bullet-size-start-end) - var(--sbb-pearl-chain-height)) / 2
+    (var(--sbb-pearl-chain-bullet-size-start-end) - var(--sbb-pearl-chain-leg-height)) / 2
   );
   padding-inline-end: var(--sbb-pearl-chain-bullet-size-start-end);
 }
@@ -69,8 +70,8 @@
   flex-shrink: 0;
   flex-grow: 0;
   position: relative;
-  height: var(--sbb-pearl-chain-height);
-  border-inline-end: var(--sbb-pearl-chain-spacing-small) solid Canvas;
+  height: var(--sbb-pearl-chain-leg-height);
+  border-inline-end: var(--sbb-pearl-chain-leg-spacing-small) solid Canvas;
   background-color: currentcolor;
   width: var(--sbb-pearl-chain-leg-width);
   display: flex;
@@ -112,7 +113,7 @@
 .sbb-pearl-chain__leg--progress .sbb-pearl-chain__stop,
 .sbb-pearl-chain--progress,
 .sbb-pearl-chain__bullet--past {
-  color: var(--sbb-pearl-chain-color-past);
+  color: var(--sbb-pearl-chain-leg-color-past);
 
   @include sbb.pearl-chain-bullet-past;
 
@@ -131,7 +132,7 @@
 .sbb-pearl-chain--arrival-disruption,
 .sbb-pearl-chain--departure-disruption,
 .sbb-pearl-chain__leg--disruption {
-  color: var(--sbb-pearl-chain-color-disruption);
+  color: var(--sbb-pearl-chain-leg-color-disruption);
 
   @include sbb.pearl-chain-bullet-disruption;
 
@@ -154,7 +155,7 @@
 }
 
 .sbb-pearl-chain__leg--skipped {
-  color: var(--sbb-pearl-chain-color-disruption);
+  color: var(--sbb-pearl-chain-leg-color-disruption);
 
   &::after {
     @include sbb-pearl-chain-dotted;
@@ -179,7 +180,7 @@
   inset-block: 0;
   inset-inline-start: 0;
   background-color: currentcolor;
-  border-radius: var(--sbb-pearl-chain-height);
+  border-radius: var(--sbb-pearl-chain-leg-height);
   z-index: 1;
 
   @include sbb.if-forced-colors {
@@ -192,11 +193,11 @@
 }
 
 .sbb-pearl-chain__leg:last-of-type::after {
-  inset-inline-end: calc(-1 * var(--sbb-pearl-chain-height));
+  inset-inline-end: calc(-1 * var(--sbb-pearl-chain-leg-height));
 }
 
 .sbb-pearl-chain__leg--progress::after {
-  background-color: var(--sbb-pearl-chain-color-past);
+  background-color: var(--sbb-pearl-chain-leg-color-past);
 
   // --sbb-pearl-chain-leg-status: defined in .ts file
   width: var(--sbb-pearl-chain-leg-status);

src/elements-experimental/pearl-chain/pearl-chain.snapshot.spec.ts → src/elements-experimental/pearl-chain-legacy/pearl-chain-legacy.snapshot.spec.ts

@@ -4,26 +4,26 @@ import { html } from 'lit/static-html.js';
 
 import type { PtRideLeg } from '../core/timetable.js';
 
-import type { SbbPearlChainElement } from './pearl-chain.js';
-import './pearl-chain.js';
+import type { SbbPearlChainLegacyElement } from './pearl-chain-legacy.js';
+import './pearl-chain-legacy.js';
 
 const now = '2022-08-16T15:00:00';
 
-describe(`sbb-pearl-chain`, () => {
-  let element: SbbPearlChainElement;
+describe(`sbb-pearl-chain-legacy`, () => {
+  let element: SbbPearlChainLegacyElement;
 
   describe('renders with one leg', () => {
     beforeEach(async () => {
       element = await fixture(html`
-        <sbb-pearl-chain
+        <sbb-pearl-chain-legacy
           .legs=${[
             {
               __typename: 'PTRideLeg',
               arrival: { time: '2022-08-18T05:00' },
               departure: { time: '2022-08-18T04:00' },
             },
           ]}
-        ></sbb-pearl-chain>
+        ></sbb-pearl-chain-legacy>
       `);
     });
 
@@ -39,7 +39,7 @@ describe(`sbb-pearl-chain`, () => {
   describe('renders with two legs', () => {
     beforeEach(async () => {
       element = await fixture(html`
-        <sbb-pearl-chain
+        <sbb-pearl-chain-legacy
           .legs=${[
             {
               __typename: 'PTRideLeg',
@@ -62,7 +62,7 @@ describe(`sbb-pearl-chain`, () => {
               },
             } as PtRideLeg,
           ]}
-        ></sbb-pearl-chain>
+        ></sbb-pearl-chain-legacy>
       `);
     });
 
@@ -78,7 +78,7 @@ describe(`sbb-pearl-chain`, () => {
   describe('renders with departure stop skipped', () => {
     beforeEach(async () => {
       element = await fixture(html`
-        <sbb-pearl-chain
+        <sbb-pearl-chain-legacy
           .legs=${[
             {
               __typename: 'PTRideLeg',
@@ -109,7 +109,7 @@ describe(`sbb-pearl-chain`, () => {
               },
             } as PtRideLeg,
           ]}
-        ></sbb-pearl-chain>
+        ></sbb-pearl-chain-legacy>
       `);
     });
 
@@ -125,7 +125,7 @@ describe(`sbb-pearl-chain`, () => {
   describe('renders with arrival stop skipped', () => {
     beforeEach(async () => {
       element = await fixture(html`
-        <sbb-pearl-chain
+        <sbb-pearl-chain-legacy
           .legs=${[
             {
               __typename: 'PTRideLeg',
@@ -156,7 +156,7 @@ describe(`sbb-pearl-chain`, () => {
               },
             } as PtRideLeg,
           ]}
-        ></sbb-pearl-chain>
+        ></sbb-pearl-chain-legacy>
       `);
     });
 
@@ -172,7 +172,7 @@ describe(`sbb-pearl-chain`, () => {
   describe('renders with progress leg', () => {
     beforeEach(async () => {
       element = await fixture(html`
-        <sbb-pearl-chain
+        <sbb-pearl-chain-legacy
           .now=${now}
           .legs=${[
             {
@@ -196,7 +196,7 @@ describe(`sbb-pearl-chain`, () => {
               },
             } as PtRideLeg,
           ]}
-        ></sbb-pearl-chain>
+        ></sbb-pearl-chain-legacy>
       `);
     });
 
@@ -212,7 +212,7 @@ describe(`sbb-pearl-chain`, () => {
   describe('renders with cancelled instead of progress leg', () => {
     beforeEach(async () => {
       element = await fixture(html`
-        <sbb-pearl-chain
+        <sbb-pearl-chain-legacy
           .now=${now}
           .legs=${[
             {
@@ -244,7 +244,7 @@ describe(`sbb-pearl-chain`, () => {
               },
             } as PtRideLeg,
           ]}
-        ></sbb-pearl-chain>
+        ></sbb-pearl-chain-legacy>
       `);
     });