From c528cb482fe338d1b3173f6db268451753915394 Mon Sep 17 00:00:00 2001 From: Stefan Dietz Date: Thu, 26 Oct 2023 15:27:34 +0200 Subject: [PATCH 1/3] Move toast service documentation from deprecated toast component to toast-container --- .../src/components/toast-container/readme.md | 45 +++++++++- .../components/src/components/toast/readme.md | 90 ------------------- 2 files changed, 44 insertions(+), 91 deletions(-) delete mode 100644 packages/components/src/components/toast/readme.md diff --git a/packages/components/src/components/toast-container/readme.md b/packages/components/src/components/toast-container/readme.md index a79e3b2a39..18794d02a0 100644 --- a/packages/components/src/components/toast-container/readme.md +++ b/packages/components/src/components/toast-container/readme.md @@ -1,4 +1,47 @@ -Siehe [Toast](/docs/components/toast). +# Toast + +Mit dem **Toast**-Service geben Sie ein optisches Feedback an die Nutzer:innen. Sie wird am Kopf des Browserfenster +angezeigt, bis sie geschlossen wird. Werden mehrere Toasts geöffnet, ohne das die bisherigen geschlossen wurden, so werden diese untereinander angezeigt. + +## Konstruktion + +Die Toast-Komponenten werden nicht direkt verwendet, sondern immer über den ToasterService konstruiert. + +### Code + +```js +import { ToasterService } from '@public-ui/components'; + +// Get the toaster instance for the current HTML document. +const toaster = ToasterService.getInstance(document); + +// Enqueue a new toast to the toaster to display: +toaster.enqueue({ + label: 'This is the title', + description: 'Magna eu sit adipisicing cillum amet esse in aute quis in dolore.', + type: 'info', +}); +``` + +## Verwendung + +### Überschrift + +Verwenden Sie das Attribut **`_label`**, um die Überschrift des Toasts zu bestimmen. + +### Inhalt + +Verwenden Sie das Attribut **`_description`**, um den Text-Inhalt des Toasts zu bestimmen. + +### Anzeigetyp des Toast + +Verwenden Sie das Attribut **`_type`**, um den Typ des Toasts festzulegen. Mögliche Werte sind: + +- `default` +- `error` +- `info` +- `success` +- `warning` diff --git a/packages/components/src/components/toast/readme.md b/packages/components/src/components/toast/readme.md deleted file mode 100644 index 989a6c18db..0000000000 --- a/packages/components/src/components/toast/readme.md +++ /dev/null @@ -1,90 +0,0 @@ -# Toast - -Mit der **Toast**-Komponente geben Sie ein optisches Feedback an die Nutzer:innen. Sie wird am Kopf des Browserfenster -angezeigt, bis sie geschlossen wird. Werden mehrere Toasts geöffnet, ohne das die bisherigen geschlossen wurden, so werden diese untereinander angezeigt. - -## Konstruktion - -Die Toast-Komponente wird nicht direkt verwendet, sondern immer über den ToasterService konstruiert. - -### Code - -```js -import { ToasterService } from '@public-ui/components'; - -// Get the toaster instance for the current HTML document. -const toaster = ToasterService.getInstance(document); - -// Enqueue a new toast to the toaster to display: -toaster.enqueue({ - label: 'This is the title', - description: 'Magna eu sit adipisicing cillum amet esse in aute quis in dolore.', - type: 'info', -}); -``` - -## Verwendung - -### Überschrift - -Verwenden Sie das Attribut **`_label`**, um die Überschrift des Toasts zu bestimmen. - -### Inhalt - -Verwenden Sie das Attribut **`_description`**, um den Text-Inhalt des Toasts zu bestimmen. - -### Anzeigetyp des Toast - -Verwenden Sie das Attribut **`_type`**, um den Typ des Toasts festzulegen. Mögliche Werte sind: - -- `default` -- `error` -- `info` -- `success` -- `warning` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ---------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- | ----------- | -| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` | -| `_on` | -- | Defines the event callback functions for the component. | `undefined \| { onClose?: EventCallback \| undefined; }` | `undefined` | -| `_status` _(required)_ | `_status` | Defines the current toast status. | `"adding" \| "removing" \| "settled"` | `undefined` | -| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `"default" \| "error" \| "info" \| "success" \| "warning" \| undefined` | `'default'` | - -## Slots - -| Slot | Description | -| ---- | ----------------------- | -| | Der Inhalt der Meldung. | - -## Dependencies - -### Used by - -- [kol-toast-container](../toast-container) - -### Depends on - -- [kol-alert](../alert) - -### Graph - -```mermaid -graph TD; - kol-toast --> kol-alert - kol-alert --> kol-alert-wc - kol-alert-wc --> kol-heading-wc - kol-alert-wc --> kol-button-wc - kol-alert-wc --> kol-icon - kol-button-wc --> kol-span-wc - kol-button-wc --> kol-tooltip-wc - kol-span-wc --> kol-icon - kol-tooltip-wc --> kol-span-wc - kol-toast-container --> kol-toast - style kol-toast fill:#f9f,stroke:#333,stroke-width:4px -``` - ---- From 6558cc2b6958aa1db35aec8b85005702123455c8 Mon Sep 17 00:00:00 2001 From: Stefan Dietz Date: Fri, 27 Oct 2023 09:22:10 +0200 Subject: [PATCH 2/3] Refactor toast-container to toaster --- packages/components/src/components.d.ts | 4 ++-- packages/components/src/components/component-list.ts | 2 +- .../components/{toast-container => toaster}/InternalToast.tsx | 0 .../src/components/{toast-container => toaster}/component.tsx | 0 .../src/components/{toast-container => toaster}/readme.md | 0 .../src/components/{toast-container => toaster}/style.css | 0 .../src/components/{toast-container => toaster}/toaster.tsx | 0 .../src/components/{toast-container => toaster}/types.ts | 0 packages/components/src/dev/toaster.ts | 2 +- packages/components/src/index.ts | 2 +- 10 files changed, 5 insertions(+), 5 deletions(-) rename packages/components/src/components/{toast-container => toaster}/InternalToast.tsx (100%) rename packages/components/src/components/{toast-container => toaster}/component.tsx (100%) rename packages/components/src/components/{toast-container => toaster}/readme.md (100%) rename packages/components/src/components/{toast-container => toaster}/style.css (100%) rename packages/components/src/components/{toast-container => toaster}/toaster.tsx (100%) rename packages/components/src/components/{toast-container => toaster}/types.ts (100%) diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts index 020f74d6f0..7eb161b543 100644 --- a/packages/components/src/components.d.ts +++ b/packages/components/src/components.d.ts @@ -59,7 +59,7 @@ import { SpinVariantPropType } from "./types/props/variant/spin"; import { KoliBriTableDataType, KoliBriTableHeaders, KoliBriTablePaginationProps } from "./components/table/types"; import { KoliBriTabsCallbacks, TabButtonProps } from "./components/tabs/types"; import { CSSResize } from "./components/textarea/types"; -import { Toast, ToastState } from "./components/toast-container/types"; +import { Toast, ToastState } from "./components/toaster/types"; export { LabelPropType, LabelWithExpertSlotPropType } from "./types/props/label"; export { TooltipAlignPropType } from "./types/props/tooltip-align"; export { HeadingLevel } from "./types/heading-level"; @@ -114,7 +114,7 @@ export { SpinVariantPropType } from "./types/props/variant/spin"; export { KoliBriTableDataType, KoliBriTableHeaders, KoliBriTablePaginationProps } from "./components/table/types"; export { KoliBriTabsCallbacks, TabButtonProps } from "./components/tabs/types"; export { CSSResize } from "./components/textarea/types"; -export { Toast, ToastState } from "./components/toast-container/types"; +export { Toast, ToastState } from "./components/toaster/types"; export namespace Components { interface KolAbbr { /** diff --git a/packages/components/src/components/component-list.ts b/packages/components/src/components/component-list.ts index b9aa88f723..886ab11de2 100644 --- a/packages/components/src/components/component-list.ts +++ b/packages/components/src/components/component-list.ts @@ -53,7 +53,7 @@ import { KolSymbol } from './symbol/component'; import { KolTable } from './table/component'; import { KolTabs } from './tabs/component'; import { KolTextarea } from './textarea/component'; -import { KolToastContainer } from './toast-container/component'; +import { KolToastContainer } from './toaster/component'; import { KolTooltip } from './tooltip/component'; import { KolVersion } from './version/component'; diff --git a/packages/components/src/components/toast-container/InternalToast.tsx b/packages/components/src/components/toaster/InternalToast.tsx similarity index 100% rename from packages/components/src/components/toast-container/InternalToast.tsx rename to packages/components/src/components/toaster/InternalToast.tsx diff --git a/packages/components/src/components/toast-container/component.tsx b/packages/components/src/components/toaster/component.tsx similarity index 100% rename from packages/components/src/components/toast-container/component.tsx rename to packages/components/src/components/toaster/component.tsx diff --git a/packages/components/src/components/toast-container/readme.md b/packages/components/src/components/toaster/readme.md similarity index 100% rename from packages/components/src/components/toast-container/readme.md rename to packages/components/src/components/toaster/readme.md diff --git a/packages/components/src/components/toast-container/style.css b/packages/components/src/components/toaster/style.css similarity index 100% rename from packages/components/src/components/toast-container/style.css rename to packages/components/src/components/toaster/style.css diff --git a/packages/components/src/components/toast-container/toaster.tsx b/packages/components/src/components/toaster/toaster.tsx similarity index 100% rename from packages/components/src/components/toast-container/toaster.tsx rename to packages/components/src/components/toaster/toaster.tsx diff --git a/packages/components/src/components/toast-container/types.ts b/packages/components/src/components/toaster/types.ts similarity index 100% rename from packages/components/src/components/toast-container/types.ts rename to packages/components/src/components/toaster/types.ts diff --git a/packages/components/src/dev/toaster.ts b/packages/components/src/dev/toaster.ts index c1d41e4858..be24700bd4 100644 --- a/packages/components/src/dev/toaster.ts +++ b/packages/components/src/dev/toaster.ts @@ -1,4 +1,4 @@ -import { ToasterService } from '../components/toast-container/toaster'; +import { ToasterService } from '../components/toaster/toaster'; const toaster = ToasterService.getInstance(document); diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index deb26d7a88..a828b978d7 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -3,7 +3,7 @@ export { register } from './core'; export * from './enums/bund'; export { translations } from './i18n'; export * from './kolibri'; -export { ToasterService } from './components/toast-container/toaster'; +export { ToasterService } from './components/toaster/toaster'; export { Optgroup, Option, SelectOption } from './types/input/types'; export { configKoliBri } from './utils/dev.utils'; export { KoliBriDevHelper } from './utils/prop.validators'; From ced49027994408f91b2d92f7dd6619aaa290c2f2 Mon Sep 17 00:00:00 2001 From: Stefan Dietz Date: Fri, 27 Oct 2023 09:52:57 +0200 Subject: [PATCH 3/3] Describe toast render function --- .../components/src/components/toaster/readme.md | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/components/src/components/toaster/readme.md b/packages/components/src/components/toaster/readme.md index 18794d02a0..cc33fa4e8a 100644 --- a/packages/components/src/components/toaster/readme.md +++ b/packages/components/src/components/toaster/readme.md @@ -1,4 +1,4 @@ -# Toast +# Toaster Mit dem **Toast**-Service geben Sie ein optisches Feedback an die Nutzer:innen. Sie wird am Kopf des Browserfenster angezeigt, bis sie geschlossen wird. Werden mehrere Toasts geöffnet, ohne das die bisherigen geschlossen wurden, so werden diese untereinander angezeigt. @@ -33,6 +33,21 @@ Verwenden Sie das Attribut **`_label`**, um die Überschrift des Toasts zu besti Verwenden Sie das Attribut **`_description`**, um den Text-Inhalt des Toasts zu bestimmen. +Alternativ zur statischen Description können Sie über das Attribut **`_render`** eine eigene Render-Funktion definieren. Diese wird mit einer Referenz zum +HTMLElement der Toast-Komponente aufgerufen. Zudem wird auch ein Objekt übergeben, das eine `close`-Funktion zum Schließen des Toasts bereitstellt. + +```ts +void toaster.enqueue({ + render: (element: HTMLElement, { close }) => { + element.textContent = 'Mein Inhalt'; + const customCloseButton = document.createElement('button'); + customCloseButton.textContent = 'Toast schließen'; + element.appendChild(customCloseButton); + customCloseButton.addEventListener('click', close, { once: true }); + }, +}); +``` + ### Anzeigetyp des Toast Verwenden Sie das Attribut **`_type`**, um den Typ des Toasts festzulegen. Mögliche Werte sind: