feat: add notification docs with examples

pragmasoft-ua · Dec 12, 2023 · 3de185f · 3de185f
1 parent b5003c3
commit 3de185f
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 9 deletions.
diff --git a/packages/kite-chat-component/src/components/kite-toast-notification/index.ts b/packages/kite-chat-component/src/components/kite-toast-notification/index.ts
@@ -1 +1,2 @@
-export * from './kite-toast-notification';
+export * from './kite-toast-notification';
+export * from './kite-notification-container';
diff --git a/...kite-chat-component/src/components/kite-toast-notification/kite-notification-container.ts b/...kite-chat-component/src/components/kite-toast-notification/kite-notification-container.ts
@@ -0,0 +1,12 @@
+import {LitElement, html} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {NotificationContainerMixin} from '../../mixins';
+
+@customElement(KiteNotificationContainer.TAG)
+export class KiteNotificationContainer extends NotificationContainerMixin(LitElement) {
+  static TAG = 'kite-notification-container';
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
diff --git a/...es/kite-chat-component/src/components/kite-toast-notification/kite-toast-notification.css b/...es/kite-chat-component/src/components/kite-toast-notification/kite-toast-notification.css
@@ -2,10 +2,10 @@
 
 :host {
     background-color: var(--kite-notification-bg, theme('colors.neutral.600'));
-    --color-success: theme('colors.green.700');
-    --color-error: theme('colors.red.500');
-    --color-info: theme('colors.primary-color');
-    --color-warning: theme('colors.yellow.500');
+    --color-success: var(--kite-notification-success, theme('colors.green.700'));
+    --color-error: var(--kite-notification-error, theme('colors.red.500'));
+    --color-info: var(--kite-notification-info, theme('colors.primary-color'));
+    --color-warning: var(--kite-notification-warning, theme('colors.yellow.500'));
     @apply flex !border !border-solid !border-[var(--color-info)] !my-1.5 rounded shadow-md overflow-hidden snap-end scroll-my-1;
 }
 
@@ -54,7 +54,7 @@ span.collapsed {
 }
 
 span.icon {
-    @apply flex flex-col z-[-2] px-1.5 py-1 relative transform bg-[var(--color-info)] opacity-90 text-secondary-color;
+    @apply flex flex-col px-1.5 py-1 transform bg-[var(--color-info)] opacity-90 text-secondary-color;
 }
 
 :host([type="success"]) span.icon {
@@ -71,7 +71,7 @@ span.icon {
 
 :host([duration][state="active"]) span.icon::after {
     animation: progressBar var(--kite-notification-duration, 5000ms) linear forwards;
-    @apply content-[''] w-full h-full z-[-1] bg-opacity-30 bg-white absolute bottom-0 left-0;
+    @apply content-[''] w-full h-full bg-opacity-30 bg-white absolute bottom-0 left-0;
 }
 
 @keyframes progressBar {

diff --git a/...ges/kite-chat-component/src/components/kite-toast-notification/kite-toast-notification.ts b/...ges/kite-chat-component/src/components/kite-toast-notification/kite-toast-notification.ts
@@ -27,6 +27,18 @@ export enum NotificationState {
   VIEWED = "viewed",
 }
 
+/**
+ * @attr {Boolean} open - displays full message if true or only first line if false or missing
+ * @attr {number} duration - setting notification active state duration in ms, ignored if missing
+ * @attr {"new" | "active" | "viewed"} state - defines notification state, using prefers-color-scheme by default
+ * @attr {number} collapsedCount - displays collapsed messages count if bigger than one
+ * @attr {"info" | "warning" | "error" | "success"} type - setting the notification style
+ * @cssvar --kite-notification-bg - notification message background color
+ * @cssvar --kite-notification-success - success accent color, styles notification border and icon background
+ * @cssvar --kite-notification-error - error accent color, styles notification border and icon background
+ * @cssvar --kite-notification-warning - warning accent color, styles notification border and icon background
+ * @cssvar --kite-notification-info - info accent color, styles notification border and icon background
+ */
 @customElement(KiteNotificationElement.TAG)
 export class KiteNotificationElement extends LitElement {
   static TAG = 'kite-toast-notification';

diff --git a/packages/kite-chat-component/src/index.ts b/packages/kite-chat-component/src/index.ts
@@ -6,7 +6,7 @@ import type {
 } from './kite-chat';
 import {KiteFileElement} from './kite-file';
 import type {KiteMsgElement} from './kite-msg';
-import type {KiteNotificationElement} from './components/kite-toast-notification';
+import type {KiteNotificationElement} from './components';
 import "@oddbird/popover-polyfill";
 
 declare global {
@@ -33,6 +33,7 @@ declare global {
   }
 }
 
+export * from './components/kite-toast-notification';
 export * from './kite-chat';
 export * from './kite-msg';
 export * from './kite-file';

diff --git a/packages/kite-chat-docs/src/content/docs/en/reference/elements.mdx b/packages/kite-chat-docs/src/content/docs/en/reference/elements.mdx
@@ -12,4 +12,7 @@ import CustomElements from '@components/CustomElements.astro';
 <CustomElements element='kite-chat' tag='kite-msg'></CustomElements>
 
 ### Kite File
-<CustomElements element='kite-chat' tag='kite-file'></CustomElements>
+<CustomElements element='kite-chat' tag='kite-file'></CustomElements>
+
+### Kite Toast Notification
+<CustomElements element='kite-chat' tag='kite-toast-notification'></CustomElements>
diff --git a/packages/kite-chat-docs/src/content/docs/en/reference/examples.mdx b/packages/kite-chat-docs/src/content/docs/en/reference/examples.mdx
@@ -0,0 +1,64 @@
+---
+title: Elements Examples
+description: An example of Kite Chat elements.
+---
+
+### Kite Toast Notification
+
+##### Warning
+<kite-toast-notification message="You are using the demo version!" type="warning"></kite-toast-notification>
+```html
+<kite-toast-notification message="You are using the demo version!" type="warning"></kite-toast-notification>
+```
+
+##### Error
+<kite-toast-notification message="Oops! An error occurred while processing your request. It seems there was an issue with the server connection. Please try again later." type="error"></kite-toast-notification>
+```html
+<kite-toast-notification message="Oops! An error occurred while processing your request. It seems there was an issue with the server connection. Please try again later." type="error"></kite-toast-notification>
+```
+
+##### Success
+<kite-toast-notification message="Connected to host." type="success"></kite-toast-notification>
+```html
+<kite-toast-notification message="Connected to host." type="success"></kite-toast-notification>
+```
+
+##### Info
+<kite-toast-notification message="Your messages have been restored." type="info"></kite-toast-notification>
+```html
+<kite-toast-notification message="Your messages have been restored." type="info"></kite-toast-notification>
+```
+
+### Kite Notification Container
+
+##### Collapsed
+<kite-notification-container>
+    <kite-toast-notification message="You are using the demo version!" type="warning"></kite-toast-notification>
+    <kite-toast-notification message="You are using the demo version!" type="warning"></kite-toast-notification>
+    <kite-toast-notification message="You are using the demo version!" type="warning"></kite-toast-notification>
+    <kite-toast-notification message="An unexpected error occurred. Please try again later." type="error"></kite-toast-notification>
+    <kite-toast-notification message="An unexpected error occurred. Please try again later." type="error"></kite-toast-notification>
+</kite-notification-container>
+```html
+<kite-notification-container>
+    <kite-toast-notification message="You are using the demo version!" type="warning"></kite-toast-notification>
+    <kite-toast-notification message="You are using the demo version!" type="warning"></kite-toast-notification>
+    <kite-toast-notification message="You are using the demo version!" type="warning"></kite-toast-notification>
+    <kite-toast-notification message="An unexpected error occurred. Please try again later." type="error"></kite-toast-notification>
+    <kite-toast-notification message="An unexpected error occurred. Please try again later." type="error"></kite-toast-notification>
+</kite-notification-container>
+```
+
+##### Auto-dismiss
+<kite-notification-container>
+    <kite-toast-notification duration="5000" message="Connected to host." type="success"></kite-toast-notification>
+    <kite-toast-notification duration="6000" message="You are using the demo version!" type="warning"></kite-toast-notification>
+    <kite-toast-notification duration="7000" message="An unexpected error occurred. Please try again later." type="error"></kite-toast-notification>
+</kite-notification-container>
+```html
+<kite-notification-container>
+    <kite-toast-notification duration="5000" message="Connected to host." type="success"></kite-toast-notification>
+    <kite-toast-notification duration="6000" message="You are using the demo version!" type="warning"></kite-toast-notification>
+    <kite-toast-notification duration="7000" message="An unexpected error occurred. Please try again later." type="error"></kite-toast-notification>
+</kite-notification-container>
+```
diff --git a/packages/kite-chat-docs/src/tailwind.css b/packages/kite-chat-docs/src/tailwind.css
@@ -13,4 +13,8 @@
 
 .site-title > img {
     @apply h-8
+}
+
+main kite-toast-notification {
+    --kite-notification-bg: var(--sl-color-gray-7);
 }