refactor: resolve todos (#2200)

Co-authored-by: TomMenga <[email protected]>
sbb-design-systems · Nov 23, 2023 · 83af539 · 83af539
1 parent d6b0143
commit 83af539
Show file tree

Hide file tree

Showing 8 changed files with 214 additions and 49 deletions.
diff --git a/src/components/core/interfaces/link-button-properties.ts b/src/components/core/interfaces/link-button-properties.ts
@@ -65,7 +65,6 @@ export interface LinkButtonRenderVariables {
  * The interface contains the possible attributes of both the <a> and the <button> tags.
  * It is intended to be used in all cases where a component needs to render a tag that can be an <a> or a <button>,
  * for instance depending on whether the value of the href attribute is present or not.
- * TODO: a class could not be created with StencilJS. Check if a refactor is needed.
  */
 export interface LinkButtonProperties extends LinkProperties, ButtonProperties {}
 

diff --git a/src/components/form-field/form-field/form-field.e2e.ts b/src/components/form-field/form-field/form-field.e2e.ts
@@ -161,8 +161,7 @@ describe('sbb-form-field', () => {
       await waitForLitRender(element);
       expect(element).to.have.attribute('data-input-focused');
 
-      // TODO The select should also handle the 'blur' function
-      (document.querySelector('.sbb-select-invisible-trigger') as HTMLDivElement).blur();
+      select.blur();
       await waitForLitRender(element);
       expect(element).not.to.have.attribute('data-input-focused');
     });

diff --git a/src/components/icon/icon-request.ts b/src/components/icon/icon-request.ts
@@ -4,10 +4,8 @@ import { validateContent } from './icon-validate';
 
 const iconCdn = 'https://icons.app.sbb.ch/';
 
-// TODO: remove picto-legacy namespace
 const iconNamespaces = new Map<string, string>()
   .set('default', `${iconCdn}icons/`)
-  .set('picto-legacy', `${iconCdn}pictograms/`)
   .set('picto', `${iconCdn}picto/`);
 const requests = new Map<string, Promise<any>>();
 

diff --git a/src/components/link-list/__snapshots__/link-list.spec.snap.js b/src/components/link-list/__snapshots__/link-list.spec.snap.js
@@ -0,0 +1,197 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots['sbb-link-list rendered with a slotted title'] = `<sbb-link-list
+  orientation="vertical"
+  size="s"
+  title-level="2"
+>
+  <span slot="title">
+    Help & Contact
+  </span>
+  <sbb-link
+    dir="ltr"
+    href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html"
+    role="link"
+    size="s"
+    slot="link-0"
+    tabindex="0"
+    variant="block"
+  >
+    Rückerstattungen
+  </sbb-link>
+  <sbb-link
+    dir="ltr"
+    href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html"
+    role="link"
+    size="s"
+    slot="link-1"
+    tabindex="0"
+    variant="block"
+  >
+    Fundbüro
+  </sbb-link>
+  <sbb-link
+    dir="ltr"
+    href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html"
+    role="link"
+    size="s"
+    slot="link-2"
+    tabindex="0"
+    variant="block"
+  >
+    Beschwerden
+  </sbb-link>
+  <sbb-link
+    dir="ltr"
+    href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html"
+    role="link"
+    size="s"
+    slot="link-3"
+    tabindex="0"
+    variant="block"
+  >
+    Lob aussprechen
+  </sbb-link>
+  <sbb-link
+    dir="ltr"
+    href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html"
+    role="link"
+    size="s"
+    slot="link-4"
+    tabindex="0"
+    variant="block"
+  >
+    Sachbeschädigung melden
+  </sbb-link>
+</sbb-link-list>
+`;
+/* end snapshot sbb-link-list rendered with a slotted title */
+
+snapshots['sbb-link-list rendered with a title from properties'] = `<sbb-link-list
+  orientation="vertical"
+  size="s"
+  title-content="Help &amp; Contact"
+  title-level="2"
+>
+  <sbb-link
+    dir="ltr"
+    href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html"
+    role="link"
+    size="s"
+    slot="link-0"
+    tabindex="0"
+    variant="block"
+  >
+    Rückerstattungen
+  </sbb-link>
+  <sbb-link
+    dir="ltr"
+    href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html"
+    role="link"
+    size="s"
+    slot="link-1"
+    tabindex="0"
+    variant="block"
+  >
+    Fundbüro
+  </sbb-link>
+  <sbb-link
+    dir="ltr"
+    href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html"
+    role="link"
+    size="s"
+    slot="link-2"
+    tabindex="0"
+    variant="block"
+  >
+    Beschwerden
+  </sbb-link>
+  <sbb-link
+    dir="ltr"
+    href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html"
+    role="link"
+    size="s"
+    slot="link-3"
+    tabindex="0"
+    variant="block"
+  >
+    Lob aussprechen
+  </sbb-link>
+  <sbb-link
+    dir="ltr"
+    href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html"
+    role="link"
+    size="s"
+    slot="link-4"
+    tabindex="0"
+    variant="block"
+  >
+    Sachbeschädigung melden
+  </sbb-link>
+</sbb-link-list>
+`;
+/* end snapshot sbb-link-list rendered with a title from properties */
+
+snapshots['sbb-link-list rendered without a title'] = `<sbb-link-list
+  orientation="vertical"
+  size="s"
+>
+  <sbb-link
+    dir="ltr"
+    href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html"
+    role="link"
+    size="s"
+    slot="link-0"
+    tabindex="0"
+    variant="block"
+  >
+    Rückerstattungen
+  </sbb-link>
+  <sbb-link
+    dir="ltr"
+    href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html"
+    role="link"
+    size="s"
+    slot="link-1"
+    tabindex="0"
+    variant="block"
+  >
+    Fundbüro
+  </sbb-link>
+  <sbb-link
+    dir="ltr"
+    href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html"
+    role="link"
+    size="s"
+    slot="link-2"
+    tabindex="0"
+    variant="block"
+  >
+    Beschwerden
+  </sbb-link>
+  <sbb-link
+    dir="ltr"
+    href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html"
+    role="link"
+    size="s"
+    slot="link-3"
+    tabindex="0"
+    variant="block"
+  >
+    Lob aussprechen
+  </sbb-link>
+  <sbb-link
+    dir="ltr"
+    href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html"
+    role="link"
+    size="s"
+    slot="link-4"
+    tabindex="0"
+    variant="block"
+  >
+    Sachbeschädigung melden
+  </sbb-link>
+</sbb-link-list>
+`;
+/* end snapshot sbb-link-list rendered without a title */
diff --git a/src/components/link-list/link-list.spec.ts b/src/components/link-list/link-list.spec.ts
@@ -5,7 +5,7 @@ import type { SbbLink } from '../link';
 
 import type { SbbLinkList } from './link-list';
 
-// TODO: Add import '../link';
+import '../link';
 import './link-list';
 
 describe('sbb-link-list', () => {
@@ -42,19 +42,7 @@ describe('sbb-link-list', () => {
       </sbb-link-list>`,
     );
 
-    expect(element).dom.to.be.equal(
-      `
-        <sbb-link-list title-level="2" orientation="vertical" size="s">
-
-          <span slot="title">Help &amp; Contact</span>
-          <sbb-link href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" slot="link-0">Rückerstattungen</sbb-link>
-          <sbb-link href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" slot="link-1">Fundbüro</sbb-link>
-          <sbb-link href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" slot="link-2">Beschwerden</sbb-link>
-          <sbb-link href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" slot="link-3">Lob aussprechen</sbb-link>
-          <sbb-link href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" slot="link-4">Sachbeschädigung melden</sbb-link>
-        </sbb-link-list>
-      `,
-    );
+    await expect(element).dom.to.equalSnapshot();
     expect(element).shadowDom.to.be.equal(
       `
             <div class="sbb-link-list-wrapper">
@@ -83,23 +71,7 @@ describe('sbb-link-list', () => {
       </sbb-link-list>`,
     );
 
-    expect(element).dom.to.be.equal(
-      `
-        <sbb-link-list
-            title-level="2"
-            title-content="Help &amp; Contact"
-            orientation="vertical"
-            size="s"
-          >
-
-          <sbb-link href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" slot="link-0">Rückerstattungen</sbb-link>
-          <sbb-link href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" slot="link-1">Fundbüro</sbb-link>
-          <sbb-link href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" slot="link-2">Beschwerden</sbb-link>
-          <sbb-link href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" slot="link-3">Lob aussprechen</sbb-link>
-          <sbb-link href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" slot="link-4">Sachbeschädigung melden</sbb-link>
-        </sbb-link-list>
-      `,
-    );
+    await expect(element).dom.to.equalSnapshot();
     expect(element).shadowDom.to.be.equal(
       `
             <div class="sbb-link-list-wrapper">
@@ -125,18 +97,7 @@ describe('sbb-link-list', () => {
   it('rendered without a title', async () => {
     element = await fixture(html` <sbb-link-list> ${sbbLinkSnippet} </sbb-link-list>`);
 
-    expect(element).dom.to.be.equal(
-      `
-        <sbb-link-list orientation="vertical" size="s">
-
-          <sbb-link href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" slot="link-0">Rückerstattungen</sbb-link>
-          <sbb-link href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" slot="link-1">Fundbüro</sbb-link>
-          <sbb-link href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" slot="link-2">Beschwerden</sbb-link>
-          <sbb-link href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" slot="link-3">Lob aussprechen</sbb-link>
-          <sbb-link href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" slot="link-4">Sachbeschädigung melden</sbb-link>
-        </sbb-link-list>
-      `,
-    );
+    await expect(element).dom.to.equalSnapshot();
     expect(element).shadowDom.to.be.equal(
       `
             <div class="sbb-link-list-wrapper">

diff --git a/src/components/select/select.e2e.ts b/src/components/select/select.e2e.ts
@@ -354,4 +354,14 @@ describe('sbb-select', () => {
     expect(secondOption).to.have.attribute('selected');
     expect(comboBoxElement).to.have.attribute('aria-expanded', 'true');
   });
+
+  it('correctly forward focus and blur', async () => {
+    element.focus();
+    await waitForLitRender(element);
+    expect(document.activeElement).to.have.attribute('role', 'combobox');
+
+    element.blur();
+    await waitForLitRender(element);
+    expect(document.activeElement).not.to.have.attribute('role', 'combobox');
+  });
 });
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
@@ -222,6 +222,7 @@ export class SbbSelect extends LitElement {
 
     // Override the default focus behavior
     this.focus = () => this._triggerElement.focus();
+    this.blur = () => this._triggerElement.blur();
     this._didLoad = true;
   }
 

diff --git a/src/components/time-input/time-input.ts b/src/components/time-input/time-input.ts
@@ -93,8 +93,8 @@ export class SbbTimeInput extends LitElement {
     this._handlerRepository.disconnect();
   }
 
-  // TODO: refactor this to be a get/set
   /** Gets the input value with the correct date format. */
+  // TODO: refactor this to be a get/set
   public getValueAsDate(): Date | null {
     return this._formatValueAsDate(this._parseInput(this._inputElement?.value));
   }