Skip to content

Commit

Permalink
feat: add notification docs with examples
Browse files Browse the repository at this point in the history
  • Loading branch information
RomanenkoStud committed Dec 12, 2023
1 parent b5003c3 commit 3de185f
Show file tree
Hide file tree
Showing 8 changed files with 106 additions and 9 deletions.
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export * from './kite-toast-notification';
export * from './kite-toast-notification';
export * from './kite-notification-container';
Original file line number Diff line number Diff line change
@@ -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>`;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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 {
Expand All @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
3 changes: 2 additions & 1 deletion packages/kite-chat-component/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -33,6 +33,7 @@ declare global {
}
}

export * from './components/kite-toast-notification';
export * from './kite-chat';
export * from './kite-msg';
export * from './kite-file';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
64 changes: 64 additions & 0 deletions packages/kite-chat-docs/src/content/docs/en/reference/examples.mdx
Original file line number Diff line number Diff line change
@@ -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>
```
4 changes: 4 additions & 0 deletions packages/kite-chat-docs/src/tailwind.css
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,8 @@

.site-title > img {
@apply h-8
}

main kite-toast-notification {
--kite-notification-bg: var(--sl-color-gray-7);
}

0 comments on commit 3de185f

Please sign in to comment.