Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(sbb-message): lit migration #2032

Merged
merged 2 commits into from
Oct 3, 2023
Merged

refactor(sbb-message): lit migration #2032

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c92423c
refactor: message component migration to Lit
dauriamarco Oct 2, 2023
094e74d
fix: review
dauriamarco Oct 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/components/sbb-message/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './sbb-message';
13 changes: 6 additions & 7 deletions src/components/sbb-message/sbb-message.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
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>');

element = await page.find('sbb-message');
expect(element).toHaveClass('hydrated');
element = await fixture(html`<sbb-message></sbb-message>`);
assert.instanceOf(element, SbbMessage);
});
});
81 changes: 44 additions & 37 deletions src/components/sbb-message/sbb-message.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Expand All @@ -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>
`);
`,
);
});
});
8 changes: 6 additions & 2 deletions src/components/sbb-message/sbb-message.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}>
Expand Down
45 changes: 26 additions & 19 deletions src/components/sbb-message/sbb-message.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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;
}
}