[minor] add ToniqErrorMessage

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-root",
-    "version": "16.2.3",
+    "version": "16.3.0",
     "private": true,
     "description": "Root design system mono-repo package.",
     "homepage": "https://github.com/Toniq-Labs/toniq-labs-design-system",

packages/design-system/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system",
-    "version": "16.2.3",
+    "version": "16.3.0",
     "private": false,
     "description": "Design system elements for Toniq Labs",
     "keywords": [

packages/design-system/src/element-book/all-element-book-entries.ts

@@ -6,6 +6,7 @@ import {toniqCheckboxPage} from '../elements/toniq-checkbox/toniq-checkbox.eleme
 import {toniqChipBookPage} from '../elements/toniq-chip/toniq-chip.element.book';
 import {toniqDateTimeBookPage} from '../elements/toniq-date-time/toniq-date-time.element.book';
 import {toniqDropdownPage} from '../elements/toniq-dropdown/toniq-dropdown.element.book';
+import {toniqErrorMessageBookPage} from '../elements/toniq-error-message/toniq-error-message.element.book';
 import {toniqFeaturedFlipCardBookPage} from '../elements/toniq-featured-flip-card/toniq-featured-flip-card.element.book';
 import {toniqFlipCardBookPage} from '../elements/toniq-flip-card/toniq-flip-card.element.book';
 import {toniqHeadingBookPage} from '../elements/toniq-heading/toniq-heading.element.book';
@@ -47,6 +48,7 @@ const childPages = [
     toniqColorsBookPage,
     toniqDateTimeBookPage,
     toniqDropdownPage,
+    toniqErrorMessageBookPage,
     toniqFeaturedFlipCardBookPage,
     toniqFlipCardBookPage,
     toniqFontsBookPage,

packages/design-system/src/elements/index.ts

@@ -8,6 +8,7 @@ export * from './toniq-checkbox/toniq-checkbox.element';
 export * from './toniq-chip/toniq-chip.element';
 export * from './toniq-date-time/toniq-date-time.element';
 export * from './toniq-dropdown/toniq-dropdown.element';
+export * from './toniq-error-message/toniq-error-message.element';
 export * from './toniq-featured-flip-card/toniq-featured-flip-card-footer.element';
 export * from './toniq-featured-flip-card/toniq-featured-flip-card.element';
 export * from './toniq-flip-card/toniq-flip-card.element';

packages/design-system/src/elements/toniq-error-message/toniq-error-message.element.book.ts

@@ -0,0 +1,32 @@
+import {defineBookPage} from 'element-book';
+import {HtmlInterpolation, html} from 'element-vir';
+import {elementsBookPage} from '../../element-book/book-pages/elements.book';
+import {ToniqErrorMessage} from './toniq-error-message.element';
+
+const examples: ReadonlyArray<Readonly<{title: string; content: HtmlInterpolation}>> = [
+    {
+        title: 'empty',
+        content: '',
+    },
+    {
+        title: 'with text',
+        content: 'Error: there was an error',
+    },
+];
+
+export const toniqErrorMessageBookPage = defineBookPage({
+    title: ToniqErrorMessage.tagName,
+    parent: elementsBookPage,
+    elementExamplesCallback({defineExample}) {
+        examples.forEach((example) => {
+            defineExample({
+                title: example.title,
+                renderCallback() {
+                    return html`
+                        <${ToniqErrorMessage}>${example.content}</${ToniqErrorMessage}>
+                    `;
+                },
+            });
+        });
+    },
+});

packages/design-system/src/elements/toniq-error-message/toniq-error-message.element.ts

@@ -0,0 +1,22 @@
+import {css, html} from 'element-vir';
+import {defineToniqElementNoInputs} from '../define-toniq-element';
+
+export const ToniqErrorMessage = defineToniqElementNoInputs({
+    tagName: 'toniq-error-message',
+    styles: css`
+        :host {
+            display: block;
+            color: red;
+        }
+
+        p {
+            padding: 0;
+            margin: 0;
+        }
+    `,
+    renderCallback() {
+        return html`
+            <p><slot></slot></p>
+        `;
+    },
+});

packages/native-elements-test/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-native-elements-test",
-    "version": "16.2.3",
+    "version": "16.3.0",
     "private": true,
     "scripts": {
         "compile": "virmator compile",

packages/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-scripts",
-    "version": "16.2.3",
+    "version": "16.3.0",
     "private": true,
     "scripts": {
         "compile": "virmator compile",