Feature/2725 callout develop component

.changeset/icy-buttons-lay.md

@@ -0,0 +1,7 @@
+---
+'@sl-design-system/panel': minor
+---
+
+From now on, use `default` and `relaxed` for the `density` property.
+The `plain` and `comfortable` values are deprecated, they will be kept for the backward compatibility for now but removed in the future.
+Please use `default` or `relaxed` from now on.

.changeset/some-rabbits-wonder.md

@@ -0,0 +1,8 @@
+---
+'@sl-design-system/callout': patch
+---
+
+New `callout` component, visually similar to the `inline-message` but with a different purpose:
+it can be used to provide additional, non-interrupting information and may include actions (e.g. buttons).
+It must not be shown/hidden dynamically in response to user actions (unlike the `inline-message`).
+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

@@ -4,6 +4,7 @@ import { Colors, Sizes } from '../../../packages/components/avatar/src/avatar.st
 import { All as AllBadge } from '../../../packages/components/badge/src/badge.stories';
 import { All as AllBreadcrumbs } from '../../../packages/components/breadcrumbs/src/breadcrumbs.stories';
 import { All as AllButton } from '../../../packages/components/button/src/button.stories';
+import { All as AllCallout } from '../../../packages/components/callout/src/callout.stories';
 import { All as AllCard } from '../../../packages/components/card/src/card.stories';
 import { All as AllCheckbox } from '../../../packages/components/checkbox/src/root.stories';
 import { All as AllCombobox } from '../../../packages/components/combobox/src/combobox.stories';
@@ -69,6 +70,7 @@ export const AvatarSizes = { render: Sizes.render };
 export const Badge = { render: AllBadge.render };
 export const Breadcrumbs = { render: AllBreadcrumbs.render };
 export const Button = { render: AllButton.render };
+export const Callout = { render: AllCallout.render };
 export const Card = { render: AllCard.render };
 export const Checkbox = { render: AllCheckbox.render };
 export const Combobox = { render: AllCombobox.render };

packages/components/callout/index.ts

@@ -0,0 +1 @@
+export * from './src/callout.js';

packages/components/callout/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@sl-design-system/callout",
+  "version": "0.0.1",
+  "description": "Callout component for the SL Design System",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sl-design-system/components.git",
+    "directory": "packages/components/callout"
+  },
+  "homepage": "https://sanomalearning.design/components/callout",
+  "bugs": {
+    "url": "https://github.com/sl-design-system/components/issues"
+  },
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "customElements": "custom-elements.json",
+  "exports": {
+    ".": "./index.js",
+    "./package.json": "./package.json",
+    "./register.js": "./register.js"
+  },
+  "files": [
+    "**/*.d.ts",
+    "**/*.js",
+    "**/*.js.map",
+    "custom-elements.json"
+  ],
+  "sideEffects": [
+    "register.js"
+  ],
+  "scripts": {
+    "test": "echo \"Error: run tests from monorepo root.\" && exit 1"
+  },
+  "dependencies": {
+    "@sl-design-system/icon": "^1.3.0",
+    "@sl-design-system/shared": "^0.9.0"
+  },
+  "devDependencies": {
+    "@lit/localize": "^0.12.2",
+    "@open-wc/scoped-elements": "^3.0.6"
+  },
+  "peerDependencies": {
+    "@lit/localize": "^0.12.1",
+    "@open-wc/scoped-elements": "^3.0.6"
+  }
+}

packages/components/callout/register.ts

@@ -0,0 +1,3 @@
+import { Callout } from './src/callout.js';
+
+customElements.define('sl-callout', Callout);

packages/components/callout/src/callout.scss

@@ -0,0 +1,71 @@
+:host {
+  align-items: center;
+  background: var(--sl-color-background-info-subtlest);
+  border-radius: var(--sl-size-borderRadius-default);
+  color: var(--sl-color-foreground-info-bold);
+  display: grid;
+  gap: 0 var(--sl-size-100);
+  grid-template-columns: auto 1fr;
+  padding: var(--sl-size-150) var(--sl-size-200);
+}
+
+:host([density='relaxed']) {
+  padding: var(--sl-size-300);
+}
+
+:host([no-title]) {
+  [part='title'] {
+    display: none;
+  }
+
+  [part='content'] {
+    grid-area: 1 / 2;
+  }
+}
+
+:host([variant='positive']) {
+  background: var(--sl-color-background-positive-subtlest);
+  color: var(--sl-color-foreground-positive-bold);
+}
+
+:host([variant='negative']) {
+  background: var(--sl-color-background-negative-subtlest);
+  color: var(--sl-color-foreground-negative-bold);
+}
+
+:host([variant='caution']) {
+  background: var(--sl-color-background-caution-subtlest);
+  color: var(--sl-color-foreground-caution-bold);
+}
+
+[part='content'] {
+  grid-column: 2;
+
+  slot {
+    display: block;
+    text-wrap: pretty;
+  }
+}
+
+[part='content'] > * {
+  display: block;
+}
+
+[part='icon'] {
+  align-items: center;
+  align-self: start;
+  block-size: 1lh;
+  display: inline-flex;
+}
+
+[part='title'] {
+  align-self: start;
+  font-size: calc((16 / 14) * 1em);
+  font-weight: var(--sl-text-new-typeset-fontWeight-semiBold);
+  grid-area: 1 / 2;
+  margin-block-end: var(--sl-size-025);
+
+  slot {
+    display: block;
+  }
+}

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

@@ -0,0 +1,49 @@
+import { fixture } from '@sl-design-system/vitest-browser-lit';
+import { html } from 'lit';
+import { beforeEach, describe, expect, it } from 'vitest';
+import '../register.js';
+import { Callout } from './callout.js';
+
+describe('sl-callout', () => {
+  let el: Callout;
+
+  describe('defaults', () => {
+    beforeEach(async () => {
+      el = await fixture(html`<sl-callout>Callout component</sl-callout>`);
+    });
+
+    it('should not have an explicit density', () => {
+      expect(el).not.to.have.attribute('density');
+      expect(el.density).to.be.undefined;
+    });
+
+    it('should not have an explicit variant', () => {
+      expect(el).not.to.have.attribute('variant');
+      expect(el.variant).to.be.undefined;
+    });
+
+    it('should have positive variant when set', async () => {
+      el.variant = 'positive';
+      await el.updateComplete;
+
+      expect(el).to.have.attribute('variant', 'positive');
+    });
+  });
+
+  describe('no title', () => {
+    beforeEach(async () => {
+      el = await fixture(html`<sl-callout>Callout component text</sl-callout>`);
+    });
+
+    it('should not display a title', () => {
+      const title = el.renderRoot.querySelector('[part="title"]')!;
+
+      expect(title).to.exist;
+      expect(title).to.have.style('display', 'none');
+    });
+
+    it('should have the no-title attribute set', () => {
+      expect(el).to.have.attribute('no-title');
+    });
+  });
+});