From c92423c24af739a06b5d5fbe3cdad02b0b23c0fa Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Mon, 2 Oct 2023 15:32:28 +0200
Subject: [PATCH 1/2] refactor: message component migration to Lit

---
 src/components/sbb-message/index.ts           |  1 +
 src/components/sbb-message/sbb-message.e2e.ts | 13 +--
 .../sbb-message/sbb-message.spec.ts           | 81 ++++++++++---------
 .../sbb-message/sbb-message.stories.tsx       |  8 +-
 src/components/sbb-message/sbb-message.tsx    | 45 ++++++-----
 5 files changed, 84 insertions(+), 64 deletions(-)
 create mode 100644 src/components/sbb-message/index.ts

diff --git a/src/components/sbb-message/index.ts b/src/components/sbb-message/index.ts
new file mode 100644
index 0000000000..f6a9cea18c
--- /dev/null
+++ b/src/components/sbb-message/index.ts
@@ -0,0 +1 @@
+export * from './sbb-message';
diff --git a/src/components/sbb-message/sbb-message.e2e.ts b/src/components/sbb-message/sbb-message.e2e.ts
index 5386816b7b..9030005a53 100644
--- a/src/components/sbb-message/sbb-message.e2e.ts
+++ b/src/components/sbb-message/sbb-message.e2e.ts
@@ -1,13 +1,14 @@
-import { E2EElement, E2EPage, newE2EPage } from '@stencil/core/testing';
+import { assert, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import { SbbMessage } from './sbb-message';
 
 describe('sbb-message', () => {
-  let element: E2EElement, page: E2EPage;
+  let element: SbbMessage;
 
   it('renders', async () => {
-    page = await newE2EPage();
-    await page.setContent('<sbb-message></sbb-message>');
+    await fixture(html`<sbb-message></sbb-message>`);
 
-    element = await page.find('sbb-message');
-    expect(element).toHaveClass('hydrated');
+    element = document.querySelector('sbb-message');
+    assert.instanceOf(element, SbbMessage);
   });
 });
diff --git a/src/components/sbb-message/sbb-message.spec.ts b/src/components/sbb-message/sbb-message.spec.ts
index b35bf9f68b..9cd57e2302 100644
--- a/src/components/sbb-message/sbb-message.spec.ts
+++ b/src/components/sbb-message/sbb-message.spec.ts
@@ -1,25 +1,38 @@
-import { SbbMessage } from './sbb-message';
-import { newSpecPage } from '@stencil/core/testing';
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import '../sbb-message';
 
 describe('sbb-message', () => {
   it('renders', async () => {
-    const { root } = await newSpecPage({
-      components: [SbbMessage],
-      html: `
-      <sbb-message title-content="Title.">
+    const root = await fixture(
+      html` <sbb-message title-content="Title.">
         <sbb-image slot="image"></sbb-image>
         <p slot="subtitle">Subtitle.</p>
         <p slot="legend">Error code: 0001</p>
         <sbb-button slot="action" icon-name="arrows-circle-small"></sbb-button>
       </sbb-message>`,
-    });
+    );
 
-    expect(root).toEqualHtml(`
-    <sbb-message title-content="Title.">
-      <mock:shadow-root>
+    expect(root).dom.to.be.equal(
+      `
+        <sbb-message title-content="Title.">
+          
+          <sbb-image slot="image"></sbb-image>
+          <p slot="subtitle">
+            Subtitle.
+          </p>
+          <p slot="legend">
+            Error code: 0001
+          </p>
+          <sbb-button icon-name="arrows-circle-small" slot="action"></sbb-button>
+        </sbb-message>
+      `,
+    );
+    expect(root).shadowDom.to.be.equal(
+      `
         <div class="sbb-message__container">
           <slot name="image"></slot>
-          <sbb-title level="3" visuallevel="5" class="sbb-message__title">
+          <sbb-title level="3" visual-level="5" class="sbb-message__title">
             <slot name="title">
               Title.
             </slot>
@@ -28,34 +41,32 @@ describe('sbb-message', () => {
           <slot name="legend"></slot>
           <slot name="action"></slot>
         </div>
-      </mock:shadow-root>
-      <sbb-image slot="image"></sbb-image>
-      <p slot="subtitle">
-        Subtitle.
-      </p>
-      <p slot="legend">
-        Error code: 0001
-      </p>
-      <sbb-button icon-name="arrows-circle-small" slot="action"></sbb-button>
-    </sbb-message>
-    `);
+      `,
+    );
   });
 
   it('renders without optional slots', async () => {
-    const { root } = await newSpecPage({
-      components: [SbbMessage],
-      html: `
-      <sbb-message title-content="Title.">
+    const root = await fixture(
+      html` <sbb-message title-content="Title.">
         <p slot="subtitle">Subtitle.</p>
       </sbb-message>`,
-    });
+    );
 
-    expect(root).toEqualHtml(`
-    <sbb-message title-content="Title.">
-      <mock:shadow-root>
+    expect(root).dom.to.be.equal(
+      `
+        <sbb-message title-content="Title.">
+          
+          <p slot="subtitle">
+            Subtitle.
+          </p>
+        </sbb-message>
+      `,
+    );
+    expect(root).shadowDom.to.be.equal(
+      `
         <div class="sbb-message__container">
           <slot name="image"></slot>
-          <sbb-title level="3" visuallevel="5" class="sbb-message__title">
+          <sbb-title level="3" visual-level="5" class="sbb-message__title">
             <slot name="title">
               Title.
             </slot>
@@ -64,11 +75,7 @@ describe('sbb-message', () => {
           <slot name="legend"></slot>
           <slot name="action"></slot>
         </div>
-      </mock:shadow-root>
-      <p slot="subtitle">
-        Subtitle.
-      </p>
-    </sbb-message>
-    `);
+      `,
+    );
   });
 });
diff --git a/src/components/sbb-message/sbb-message.stories.tsx b/src/components/sbb-message/sbb-message.stories.tsx
index e8b01d17f7..1690bd5604 100644
--- a/src/components/sbb-message/sbb-message.stories.tsx
+++ b/src/components/sbb-message/sbb-message.stories.tsx
@@ -1,10 +1,14 @@
 /** @jsx h */
 import { h, JSX } from 'jsx-dom';
-import readme from './readme.md';
+import readme from './readme.md?raw';
 import { withActions } from '@storybook/addon-actions/decorator';
-import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/html';
+import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-components';
 import type { InputType } from '@storybook/types';
 import images from '../../global/images';
+import '../sbb-image';
+import '../sbb-title';
+import '../sbb-button';
+import './sbb-message';
 
 const DefaultTemplate = (args): JSX.Element => (
   <sbb-message {...args}>
diff --git a/src/components/sbb-message/sbb-message.tsx b/src/components/sbb-message/sbb-message.tsx
index d724e35c7d..e82b020bfc 100644
--- a/src/components/sbb-message/sbb-message.tsx
+++ b/src/components/sbb-message/sbb-message.tsx
@@ -1,5 +1,7 @@
-import { Component, ComponentInterface, JSX, Prop, h } from '@stencil/core';
-import { InterfaceTitleAttributes } from '../sbb-title/sbb-title.custom';
+import { TitleLevel } from '../sbb-title';
+import { CSSResult, html, LitElement, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import Style from './sbb-message.scss?lit&inline';
 
 /**
  * @slot image - Use this slot to provide an sbb-image component.
@@ -8,29 +10,34 @@ import { InterfaceTitleAttributes } from '../sbb-title/sbb-title.custom';
  * @slot legend - Use this slot to provide a legend, must be a paragraph.
  * @slot action - Use this slot to provide an sbb-button.
  */
-@Component({
-  shadow: true,
-  styleUrl: 'sbb-message.scss',
-  tag: 'sbb-message',
-})
-export class SbbMessage implements ComponentInterface {
+@customElement('sbb-message')
+export class SbbMessage extends LitElement {
+  public static override styles: CSSResult = Style;
+
   /** Content of title. */
-  @Prop() public titleContent?: string;
+  @property({ attribute: 'title-content' }) public titleContent?: string;
 
   /** Level of title, will be rendered as heading tag (e.g. h3). Defaults to level 3. */
-  @Prop() public titleLevel: InterfaceTitleAttributes['level'] = '3';
+  @property({ attribute: 'title-level' }) public titleLevel: TitleLevel = '3';
 
-  public render(): JSX.Element {
-    return (
+  protected override render(): TemplateResult {
+    return html`
       <div class="sbb-message__container">
-        <slot name="image" />
-        <sbb-title level={this.titleLevel} visualLevel="5" class="sbb-message__title">
-          <slot name="title">{this.titleContent}</slot>
+        <slot name="image"></slot>
+        <sbb-title level=${this.titleLevel} visual-level="5" class="sbb-message__title">
+          <slot name="title">${this.titleContent}</slot>
         </sbb-title>
-        <slot name="subtitle" />
-        <slot name="legend" />
-        <slot name="action" />
+        <slot name="subtitle"></slot>
+        <slot name="legend"></slot>
+        <slot name="action"></slot>
       </div>
-    );
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'sbb-message': SbbMessage;
   }
 }

From 094e74d4253669314817836ac81aec191dbff18b Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Tue, 3 Oct 2023 10:36:58 +0200
Subject: [PATCH 2/2] fix: review

---
 src/components/sbb-message/sbb-message.e2e.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/sbb-message/sbb-message.e2e.ts b/src/components/sbb-message/sbb-message.e2e.ts
index 9030005a53..7da14e1e12 100644
--- a/src/components/sbb-message/sbb-message.e2e.ts
+++ b/src/components/sbb-message/sbb-message.e2e.ts
@@ -6,9 +6,7 @@ describe('sbb-message', () => {
   let element: SbbMessage;
 
   it('renders', async () => {
-    await fixture(html`<sbb-message></sbb-message>`);
-
-    element = document.querySelector('sbb-message');
+    element = await fixture(html`<sbb-message></sbb-message>`);
     assert.instanceOf(element, SbbMessage);
   });
 });