Skip to content

Commit be3b2b8

Browse files
anna-lachCopilot
anna-lach
and
Copilot
authored
Feature/2725 callout develop component (#2842)
* First version of a callout component * callout component changes * callout component changes, styling, two sizes, examples improvements * callout component changes, styling, some cleanup * unit tests * changeset, callout added to chromatic * some fixes * component's status updated * Update callout.stories.ts Co-authored-by: Copilot <[email protected]> * some changes after review * density instead of size * cleanup * fixing imports * changes after review * changes after review * callout density changes * density for the panel changes * fixes the panel status on the website (draft instead of preview) * deprecated density values description --------- Co-authored-by: Copilot <[email protected]>
1 parent eef141a commit be3b2b8

File tree

17 files changed

+598
-13
lines changed

17 files changed

+598
-13
lines changed

‎.changeset/icy-buttons-lay.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@sl-design-system/panel': minor
3+
---
4+
5+
From now on, use `default` and `relaxed` for the `density` property.
6+
The `plain` and `comfortable` values are deprecated, they will be kept for the backward compatibility for now but removed in the future.
7+
Please use `default` or `relaxed` from now on.

‎.changeset/some-rabbits-wonder.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
'@sl-design-system/callout': patch
3+
---
4+
5+
New `callout` component, visually similar to the `inline-message` but with a different purpose:
6+
it can be used to provide additional, non-interrupting information and may include actions (e.g. buttons).
7+
It must not be shown/hidden dynamically in response to user actions (unlike the `inline-message`).
8+
There is no ARIA role on this component as it is not meant to interrupt the user (no live region).

‎chromatic/.storybook/stories/all.stories.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Colors, Sizes } from '../../../packages/components/avatar/src/avatar.st
44
import { All as AllBadge } from '../../../packages/components/badge/src/badge.stories';
55
import { All as AllBreadcrumbs } from '../../../packages/components/breadcrumbs/src/breadcrumbs.stories';
66
import { All as AllButton } from '../../../packages/components/button/src/button.stories';
7+
import { All as AllCallout } from '../../../packages/components/callout/src/callout.stories';
78
import { All as AllCard } from '../../../packages/components/card/src/card.stories';
89
import { All as AllCheckbox } from '../../../packages/components/checkbox/src/root.stories';
910
import { All as AllCombobox } from '../../../packages/components/combobox/src/combobox.stories';
@@ -69,6 +70,7 @@ export const AvatarSizes = { render: Sizes.render };
6970
export const Badge = { render: AllBadge.render };
7071
export const Breadcrumbs = { render: AllBreadcrumbs.render };
7172
export const Button = { render: AllButton.render };
73+
export const Callout = { render: AllCallout.render };
7274
export const Card = { render: AllCard.render };
7375
export const Checkbox = { render: AllCheckbox.render };
7476
export const Combobox = { render: AllCombobox.render };

‎packages/components/callout/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './src/callout.js';

‎packages/components/callout/package.json‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
{
2+
"name": "@sl-design-system/callout",
3+
"version": "0.0.1",
4+
"description": "Callout component for the SL Design System",
5+
"license": "Apache-2.0",
6+
"publishConfig": {
7+
"registry": "https://npm.pkg.github.com"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "https://github.com/sl-design-system/components.git",
12+
"directory": "packages/components/callout"
13+
},
14+
"homepage": "https://sanomalearning.design/components/callout",
15+
"bugs": {
16+
"url": "https://github.com/sl-design-system/components/issues"
17+
},
18+
"type": "module",
19+
"main": "./index.js",
20+
"module": "./index.js",
21+
"types": "./index.d.ts",
22+
"customElements": "custom-elements.json",
23+
"exports": {
24+
".": "./index.js",
25+
"./package.json": "./package.json",
26+
"./register.js": "./register.js"
27+
},
28+
"files": [
29+
"**/*.d.ts",
30+
"**/*.js",
31+
"**/*.js.map",
32+
"custom-elements.json"
33+
],
34+
"sideEffects": [
35+
"register.js"
36+
],
37+
"scripts": {
38+
"test": "echo \"Error: run tests from monorepo root.\" && exit 1"
39+
},
40+
"dependencies": {
41+
"@sl-design-system/icon": "^1.3.0",
42+
"@sl-design-system/shared": "^0.9.0"
43+
},
44+
"devDependencies": {
45+
"@lit/localize": "^0.12.2",
46+
"@open-wc/scoped-elements": "^3.0.6"
47+
},
48+
"peerDependencies": {
49+
"@lit/localize": "^0.12.1",
50+
"@open-wc/scoped-elements": "^3.0.6"
51+
}
52+
}

‎packages/components/callout/register.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { Callout } from './src/callout.js';
2+
3+
customElements.define('sl-callout', Callout);

‎packages/components/callout/src/callout.scss‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
:host {
2+
align-items: center;
3+
background: var(--sl-color-background-info-subtlest);
4+
border-radius: var(--sl-size-borderRadius-default);
5+
color: var(--sl-color-foreground-info-bold);
6+
display: grid;
7+
gap: 0 var(--sl-size-100);
8+
grid-template-columns: auto 1fr;
9+
padding: var(--sl-size-150) var(--sl-size-200);
10+
}
11+
12+
:host([density='relaxed']) {
13+
padding: var(--sl-size-300);
14+
}
15+
16+
:host([no-title]) {
17+
[part='title'] {
18+
display: none;
19+
}
20+
21+
[part='content'] {
22+
grid-area: 1 / 2;
23+
}
24+
}
25+
26+
:host([variant='positive']) {
27+
background: var(--sl-color-background-positive-subtlest);
28+
color: var(--sl-color-foreground-positive-bold);
29+
}
30+
31+
:host([variant='negative']) {
32+
background: var(--sl-color-background-negative-subtlest);
33+
color: var(--sl-color-foreground-negative-bold);
34+
}
35+
36+
:host([variant='caution']) {
37+
background: var(--sl-color-background-caution-subtlest);
38+
color: var(--sl-color-foreground-caution-bold);
39+
}
40+
41+
[part='content'] {
42+
grid-column: 2;
43+
44+
slot {
45+
display: block;
46+
text-wrap: pretty;
47+
}
48+
}
49+
50+
[part='content'] > * {
51+
display: block;
52+
}
53+
54+
[part='icon'] {
55+
align-items: center;
56+
align-self: start;
57+
block-size: 1lh;
58+
display: inline-flex;
59+
}
60+
61+
[part='title'] {
62+
align-self: start;
63+
font-size: calc((16 / 14) * 1em);
64+
font-weight: var(--sl-text-new-typeset-fontWeight-semiBold);
65+
grid-area: 1 / 2;
66+
margin-block-end: var(--sl-size-025);
67+
68+
slot {
69+
display: block;
70+
}
71+
}

‎packages/components/callout/src/callout.spec.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { fixture } from '@sl-design-system/vitest-browser-lit';
2+
import { html } from 'lit';
3+
import { beforeEach, describe, expect, it } from 'vitest';
4+
import '../register.js';
5+
import { Callout } from './callout.js';
6+
7+
describe('sl-callout', () => {
8+
let el: Callout;
9+
10+
describe('defaults', () => {
11+
beforeEach(async () => {
12+
el = await fixture(html`<sl-callout>Callout component</sl-callout>`);
13+
});
14+
15+
it('should not have an explicit density', () => {
16+
expect(el).not.to.have.attribute('density');
17+
expect(el.density).to.be.undefined;
18+
});
19+
20+
it('should not have an explicit variant', () => {
21+
expect(el).not.to.have.attribute('variant');
22+
expect(el.variant).to.be.undefined;
23+
});
24+
25+
it('should have positive variant when set', async () => {
26+
el.variant = 'positive';
27+
await el.updateComplete;
28+
29+
expect(el).to.have.attribute('variant', 'positive');
30+
});
31+
});
32+
33+
describe('no title', () => {
34+
beforeEach(async () => {
35+
el = await fixture(html`<sl-callout>Callout component text</sl-callout>`);
36+
});
37+
38+
it('should not display a title', () => {
39+
const title = el.renderRoot.querySelector('[part="title"]')!;
40+
41+
expect(title).to.exist;
42+
expect(title).to.have.style('display', 'none');
43+
});
44+
45+
it('should have the no-title attribute set', () => {
46+
expect(el).to.have.attribute('no-title');
47+
});
48+
});
49+
});

0 commit comments

Comments
 (0)