feat: strict mode first impl

sbb-design-systems · Jan 10, 2024 · 410d730 · 410d730
1 parent 06cbcf5
commit 410d730
Show file tree

Hide file tree

Showing 252 changed files with 2,107 additions and 1,710 deletions.
diff --git a/src/components/accordion/accordion.e2e.ts b/src/components/accordion/accordion.e2e.ts
@@ -46,14 +46,14 @@ describe('sbb-accordion', () => {
   it('should set accordion context on expansion panel when removing and adding expansion-panels', async () => {
     let panels: SbbExpansionPanelElement[];
 
-    element.querySelector('sbb-expansion-panel').remove();
+    element.querySelector('sbb-expansion-panel')?.remove();
     await waitForLitRender(element);
 
     panels = Array.from(element.querySelectorAll('sbb-expansion-panel'));
     expect(panels[0]).to.have.attribute('data-accordion-first');
     expect(panels[1]).to.have.attribute('data-accordion-last');
 
-    element.querySelector('sbb-expansion-panel').remove();
+    element.querySelector('sbb-expansion-panel')?.remove();
     await waitForLitRender(element);
 
     const lastRemainingPanel = element.querySelector('sbb-expansion-panel');
@@ -74,13 +74,13 @@ describe('sbb-accordion', () => {
     const panels = Array.from(element.querySelectorAll('sbb-expansion-panel'));
     expect(panels.length).to.be.equal(3);
     expect(
-      panels[0].shadowRoot.querySelector('.sbb-expansion-panel').firstElementChild.tagName,
+      panels[0].shadowRoot?.querySelector('.sbb-expansion-panel')?.firstElementChild?.tagName,
     ).to.be.equal('H4');
     expect(
-      panels[1].shadowRoot.querySelector('.sbb-expansion-panel').firstElementChild.tagName,
+      panels[1].shadowRoot?.querySelector('.sbb-expansion-panel')?.firstElementChild?.tagName,
     ).to.be.equal('H4');
     expect(
-      panels[2].shadowRoot.querySelector('.sbb-expansion-panel').firstElementChild.tagName,
+      panels[2].shadowRoot?.querySelector('.sbb-expansion-panel')?.firstElementChild?.tagName,
     ).to.be.equal('H4');
   });
 
@@ -90,24 +90,30 @@ describe('sbb-accordion', () => {
     const panels = Array.from(element.querySelectorAll('sbb-expansion-panel'));
     expect(panels.length).to.be.equal(3);
     expect(
-      panels[0].shadowRoot.querySelector('.sbb-expansion-panel').firstElementChild.tagName,
+      panels[0].shadowRoot?.querySelector('.sbb-expansion-panel')?.firstElementChild?.tagName,
     ).to.be.equal('H6');
     expect(
-      panels[1].shadowRoot.querySelector('.sbb-expansion-panel').firstElementChild.tagName,
+      panels[1].shadowRoot?.querySelector('.sbb-expansion-panel')?.firstElementChild?.tagName,
     ).to.be.equal('H6');
     expect(
-      panels[2].shadowRoot.querySelector('.sbb-expansion-panel').firstElementChild.tagName,
+      panels[2].shadowRoot?.querySelector('.sbb-expansion-panel')?.firstElementChild?.tagName,
     ).to.be.equal('H6');
   });
 
   it('should close others when expanding and multi = false', async () => {
     const willOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.willOpen);
-    const panelOne: SbbExpansionPanelElement = element.querySelector('#panel-1');
-    const headerOne: SbbExpansionPanelHeaderElement = element.querySelector('#header-1');
-    const panelTwo: SbbExpansionPanelElement = element.querySelector('#panel-2');
-    const headerTwo: SbbExpansionPanelHeaderElement = element.querySelector('#header-2');
-    const panelThree: SbbExpansionPanelElement = element.querySelector('#panel-3');
-    const headerThree: SbbExpansionPanelHeaderElement = element.querySelector('#header-3');
+    const panelOne: SbbExpansionPanelElement =
+      element.querySelector<SbbExpansionPanelElement>('#panel-1')!;
+    const headerOne: SbbExpansionPanelHeaderElement =
+      element.querySelector<SbbExpansionPanelHeaderElement>('#header-1')!;
+    const panelTwo: SbbExpansionPanelElement =
+      element.querySelector<SbbExpansionPanelElement>('#panel-2')!;
+    const headerTwo: SbbExpansionPanelHeaderElement =
+      element.querySelector<SbbExpansionPanelHeaderElement>('#header-2')!;
+    const panelThree: SbbExpansionPanelElement =
+      element.querySelector<SbbExpansionPanelElement>('#panel-3')!;
+    const headerThree: SbbExpansionPanelHeaderElement =
+      element.querySelector<SbbExpansionPanelHeaderElement>('#header-3')!;
 
     for (const panel of [panelOne, panelTwo, panelThree]) {
       expect(panel.expanded).to.be.equal(false);
@@ -139,12 +145,18 @@ describe('sbb-accordion', () => {
     element.multi = true;
     await waitForLitRender(element);
     const willOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.willOpen);
-    const panelOne: SbbExpansionPanelElement = element.querySelector('#panel-1');
-    const headerOne: SbbExpansionPanelHeaderElement = element.querySelector('#header-1');
-    const panelTwo: SbbExpansionPanelElement = element.querySelector('#panel-2');
-    const headerTwo: SbbExpansionPanelHeaderElement = element.querySelector('#header-2');
-    const panelThree: SbbExpansionPanelElement = element.querySelector('#panel-3');
-    const headerThree: SbbExpansionPanelHeaderElement = element.querySelector('#header-3');
+    const panelOne: SbbExpansionPanelElement =
+      element.querySelector<SbbExpansionPanelElement>('#panel-1')!;
+    const headerOne: SbbExpansionPanelHeaderElement =
+      element.querySelector<SbbExpansionPanelHeaderElement>('#header-1')!;
+    const panelTwo: SbbExpansionPanelElement =
+      element.querySelector<SbbExpansionPanelElement>('#panel-2')!;
+    const headerTwo: SbbExpansionPanelHeaderElement =
+      element.querySelector<SbbExpansionPanelHeaderElement>('#header-2')!;
+    const panelThree: SbbExpansionPanelElement =
+      element.querySelector<SbbExpansionPanelElement>('#panel-3')!;
+    const headerThree: SbbExpansionPanelHeaderElement =
+      element.querySelector<SbbExpansionPanelHeaderElement>('#header-3')!;
 
     for (const panel of [panelOne, panelTwo, panelThree]) {
       expect(panel.expanded).to.be.equal(false);
@@ -175,11 +187,16 @@ describe('sbb-accordion', () => {
   it('should close all panels except the first when multi changes from true to false', async () => {
     element.multi = true;
     await waitForLitRender(element);
-    const panelOne: SbbExpansionPanelElement = element.querySelector('#panel-1');
-    const panelTwo: SbbExpansionPanelElement = element.querySelector('#panel-2');
-    const headerTwo: SbbExpansionPanelHeaderElement = element.querySelector('#header-2');
-    const panelThree: SbbExpansionPanelElement = element.querySelector('#panel-3');
-    const headerThree: SbbExpansionPanelHeaderElement = element.querySelector('#header-3');
+    const panelOne: SbbExpansionPanelElement =
+      element.querySelector<SbbExpansionPanelElement>('#panel-1')!;
+    const panelTwo: SbbExpansionPanelElement =
+      element.querySelector<SbbExpansionPanelElement>('#panel-2')!;
+    const headerTwo: SbbExpansionPanelHeaderElement =
+      element.querySelector<SbbExpansionPanelHeaderElement>('#header-2')!;
+    const panelThree: SbbExpansionPanelElement =
+      element.querySelector<SbbExpansionPanelElement>('#panel-3')!;
+    const headerThree: SbbExpansionPanelHeaderElement =
+      element.querySelector<SbbExpansionPanelHeaderElement>('#header-3')!;
 
     for (const panel of [panelOne, panelTwo, panelThree]) {
       expect(panel.expanded).to.be.equal(false);

diff --git a/src/components/accordion/accordion.ts b/src/components/accordion/accordion.ts
@@ -68,7 +68,9 @@ export class SbbAccordionElement extends LitElement {
   }
 
   private _setTitleLevelOnChildren(): void {
-    this._expansionPanels.forEach((panel) => (panel.titleLevel = this.titleLevel));
+    this._expansionPanels.forEach(
+      (panel: SbbExpansionPanelElement) => (panel.titleLevel = this.titleLevel),
+    );
   }
 
   private get _expansionPanels(): SbbExpansionPanelElement[] {

diff --git a/src/components/action-group/action-group.stories.ts b/src/components/action-group/action-group.stories.ts
@@ -2,6 +2,7 @@ import { withActions } from '@storybook/addon-actions/decorator';
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-components';
 import { html, TemplateResult } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { sbbSpread } from '../core/dom';
@@ -11,77 +12,82 @@ import './action-group';
 import '../link';
 import '../button';
 
-const secondaryButtonTemplate = (alignSelf): TemplateResult => html`
-  <sbb-button align-self=${alignSelf} variant="secondary"> Button 1 </sbb-button>
+const secondaryButtonTemplate = (alignSelf?: string): TemplateResult => html`
+  <sbb-button align-self=${ifDefined(alignSelf)} variant="secondary"> Button 1 </sbb-button>
 `;
 
-const buttonTemplate = (alignSelf): TemplateResult => html`
-  <sbb-button align-self=${alignSelf}>Button 2</sbb-button>
+const buttonTemplate = (alignSelf?: string): TemplateResult => html`
+  <sbb-button align-self=${ifDefined(alignSelf)}>Button 2</sbb-button>
 `;
 
-const linkTemplate = (alignSelf): TemplateResult => html`
+const linkTemplate = (alignSelf?: string): TemplateResult => html`
   <sbb-link
-    align-self=${alignSelf}
+    align-self=${ifDefined(alignSelf)}
     icon-name="chevron-small-left-small"
     href="https://github.com/lyne-design-system/lyne-components"
   >
     Link
   </sbb-link>
 `;
 
-const TemplateTwoElements = (alignSelfFirst?, alignSelfSecond?): TemplateResult => html`
+const TemplateTwoElements = (
+  alignSelfFirst?: string,
+  alignSelfSecond?: string,
+): TemplateResult => html`
   ${secondaryButtonTemplate(alignSelfFirst)} ${buttonTemplate(alignSelfSecond)}
 `;
 
 const TemplateThreeElements = (
-  alignSelfFirst?,
-  alignSelfSecond?,
-  alignSelfThird?,
+  alignSelfFirst?: string,
+  alignSelfSecond?: string,
+  alignSelfThird?: string,
 ): TemplateResult => html`
   ${TemplateTwoElements(alignSelfFirst, alignSelfSecond)} ${linkTemplate(alignSelfThird)}
 `;
 
-const CommonTemplateThreeElementsAllocation = ({ ...args }): TemplateResult => html`
+const CommonTemplateThreeElementsAllocation = (args: Args): TemplateResult => html`
   <sbb-action-group ${sbbSpread(args)}>${TemplateThreeElements()}</sbb-action-group>
 `;
 
-const CommonTemplateTwoElementsAllocation = ({ ...args }): TemplateResult => html`
+const CommonTemplateTwoElementsAllocation = (args: Args): TemplateResult => html`
   <sbb-action-group ${sbbSpread(args)}>${TemplateTwoElements()}</sbb-action-group>
 `;
 
-const TemplateHorizontalAllocation111 = ({ ...args }): TemplateResult => html`
-  <sbb-action-group ${sbbSpread(args)}>${TemplateThreeElements(null, 'center')}</sbb-action-group>
+const TemplateHorizontalAllocation111 = (args: Args): TemplateResult => html`
+  <sbb-action-group ${sbbSpread(args)}
+    >${TemplateThreeElements(undefined, 'center')}</sbb-action-group
+  >
 `;
 
-const TemplateHorizontalAllocation201 = ({ ...args }): TemplateResult => html`
+const TemplateHorizontalAllocation201 = (args: Args): TemplateResult => html`
   <sbb-action-group ${sbbSpread(args)}
-    >${TemplateThreeElements(null, null, 'end')}</sbb-action-group
+    >${TemplateThreeElements(undefined, undefined, 'end')}</sbb-action-group
   >
 `;
 
-const TemplateHorizontalAllocation102 = ({ ...args }): TemplateResult => html`
+const TemplateHorizontalAllocation102 = (args: Args): TemplateResult => html`
   <sbb-action-group ${sbbSpread(args)}>${TemplateThreeElements('start')}</sbb-action-group>
 `;
 
-const TemplateHorizontalAllocation101 = ({ ...args }): TemplateResult => html`
-  <sbb-action-group ${sbbSpread(args)}>${TemplateTwoElements(null, 'end')}</sbb-action-group>
+const TemplateHorizontalAllocation101 = (args: Args): TemplateResult => html`
+  <sbb-action-group ${sbbSpread(args)}>${TemplateTwoElements(undefined, 'end')}</sbb-action-group>
 `;
 
-const TemplateVerticalAllocation300FullWidth = ({ ...args }): TemplateResult => html`
+const TemplateVerticalAllocation300FullWidth = (args: Args): TemplateResult => html`
   <sbb-action-group ${sbbSpread(args)}
-    >${TemplateThreeElements(null, null, 'start')}</sbb-action-group
+    >${TemplateThreeElements(undefined, undefined, 'start')}</sbb-action-group
   >
 `;
 
-const TemplateVerticalAllocation030FullWidth = ({ ...args }): TemplateResult => html`
+const TemplateVerticalAllocation030FullWidth = (args: Args): TemplateResult => html`
   <sbb-action-group ${sbbSpread(args)}
-    >${TemplateThreeElements(null, null, 'center')}</sbb-action-group
+    >${TemplateThreeElements(undefined, undefined, 'center')}</sbb-action-group
   >
 `;
 
-const TemplateVerticalAllocation003FullWidth = ({ ...args }): TemplateResult => html`
+const TemplateVerticalAllocation003FullWidth = (args: Args): TemplateResult => html`
   <sbb-action-group ${sbbSpread(args)}
-    >${TemplateThreeElements(null, null, 'end')}</sbb-action-group
+    >${TemplateThreeElements(undefined, undefined, 'end')}</sbb-action-group
   >
 `;
 

diff --git a/src/components/action-group/action-group.ts b/src/components/action-group/action-group.ts
@@ -1,9 +1,9 @@
 import { CSSResultGroup, html, LitElement, TemplateResult, PropertyValues } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { SbbButtonSize } from '../button';
+import { SbbButtonElement, SbbButtonSize } from '../button';
 import { SbbHorizontalFrom, SbbOrientation } from '../core/interfaces';
-import { SbbLinkSize } from '../link';
+import { SbbLinkElement, SbbLinkSize } from '../link';
 
 import style from './action-group.scss?lit&inline';
 
@@ -26,7 +26,7 @@ export class SbbActionGroupElement extends LitElement {
    * Overrides the behaviour of `orientation` property.
    */
   @property({ attribute: 'horizontal-from', reflect: true })
-  public horizontalFrom?: SbbHorizontalFrom = 'medium';
+  public horizontalFrom: SbbHorizontalFrom = 'medium';
 
   /**
    * Indicates the orientation of the components inside the `<sbb-action-group>`.
@@ -39,17 +39,19 @@ export class SbbActionGroupElement extends LitElement {
    * sbb-button instances.
    */
   @property({ attribute: 'button-size', reflect: true })
-  public buttonSize?: SbbButtonSize = 'l';
+  public buttonSize: SbbButtonSize = 'l';
 
   /**
    * Size of the nested sbb-link instances. This will overwrite the size attribute of nested
    * sbb-link instances.
    */
   @property({ attribute: 'link-size', reflect: true })
-  public linkSize?: SbbLinkSize = 'm';
+  public linkSize: SbbLinkSize = 'm';
 
   private _syncButtons(): void {
-    this.querySelectorAll?.('sbb-button').forEach((b) => (b.size = this.buttonSize));
+    this.querySelectorAll?.('sbb-button').forEach(
+      (b: SbbButtonElement) => (b.size = this.buttonSize),
+    );
   }
 
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
@@ -62,7 +64,7 @@ export class SbbActionGroupElement extends LitElement {
   }
 
   private _syncLinks(): void {
-    this.querySelectorAll?.('sbb-link').forEach((link) => {
+    this.querySelectorAll?.('sbb-link').forEach((link: SbbLinkElement) => {
       link.variant = 'block';
       link.size = this.linkSize;
     });

diff --git a/src/components/action-group/readme.md b/src/components/action-group/readme.md
@@ -123,10 +123,10 @@ The values for `align-group` and `align-self` for the various allocations are as
 | Name             | Attribute         | Privacy | Type                                        | Default        | Description                                                                                                     |
 | ---------------- | ----------------- | ------- | ------------------------------------------- | -------------- | --------------------------------------------------------------------------------------------------------------- |
 | `alignGroup`     | `align-group`     | public  | `'start' \| 'center' \| 'stretch' \| 'end'` | `'start'`      | Set the slotted `<sbb-action-group>` children's alignment.                                                      |
-| `horizontalFrom` | `horizontal-from` | public  | `SbbHorizontalFrom \| undefined`            | `'medium'`     | Overrides the behaviour of `orientation` property.                                                              |
+| `horizontalFrom` | `horizontal-from` | public  | `SbbHorizontalFrom`                         | `'medium'`     | Overrides the behaviour of `orientation` property.                                                              |
 | `orientation`    | `orientation`     | public  | `SbbOrientation`                            | `'horizontal'` | Indicates the orientation of the components inside the `<sbb-action-group>`.                                    |
-| `buttonSize`     | `button-size`     | public  | `SbbButtonSize \| undefined`                | `'l'`          | Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances. |
-| `linkSize`       | `link-size`       | public  | `SbbLinkSize \| undefined`                  | `'m'`          | Size of the nested sbb-link instances. This will overwrite the size attribute of nested sbb-link instances.     |
+| `buttonSize`     | `button-size`     | public  | `SbbButtonSize`                             | `'l'`          | Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances. |
+| `linkSize`       | `link-size`       | public  | `SbbLinkSize`                               | `'m'`          | Size of the nested sbb-link instances. This will overwrite the size attribute of nested sbb-link instances.     |
 
 ## Slots