Docs: Extended toast description in cookbook with example in Iframe

apps/cookbook/src/app/examples/examples.routes.ts

@@ -89,6 +89,7 @@ import { ModalExampleAlertWithGuardComponent } from './modal-example/modal-examp
 import { ModalEmbeddedAlertExampleComponent } from './modal-example/alert-example/modal-example-embedded-alert.component';
 import { ModalComponentExampleComponent } from './modal-example/modal-component-example.component';
 import { SlidesHeightExampleComponent } from './slides-example/slides-height-example/slides-height-example.component';
+import { ShowToastExampleComponent } from './toast-example/examples/show-toast-example.component';
 
 export const EXAMPLE_ROUTES: ModalEnabledRoutes = [
   {
@@ -515,6 +516,17 @@ export const EXAMPLE_ROUTES: ModalEnabledRoutes = [
   {
     path: 'toast',
     component: ToastExampleComponent,
+    children: [
+      {
+        path: '',
+        pathMatch: 'full',
+        redirectTo: 'show-toast',
+      },
+      {
+        path: 'show-toast',
+        component: ShowToastExampleComponent,
+      },
+    ],
   },
   {
     path: 'toggle',

apps/cookbook/src/app/examples/toast-example/examples/show-toast-example.component.ts

@@ -0,0 +1,67 @@
+import { Component } from '@angular/core';
+import { ButtonComponent } from '@kirbydesign/designsystem/button';
+import { MessageType, ToastConfig, ToastController } from '@kirbydesign/designsystem/toast';
+
+const config = {
+  selector: 'cookbook-show-toast-example',
+  template: `
+  <button kirby-button (click)="showToast()">Show success toast (default)</button>
+  <button kirby-button (click)="showToast('warning')">Show warning toast</button>
+  `,
+  styles: [
+    `:host {
+      justify-content: end;
+      align-items: center;
+      margin: 20px 10px;
+      button {
+        max-width: 300px;
+        width: 100%;
+      }
+   }`,
+  ],
+};
+
+const ts = `showToast(messageType?: MessageType) {
+  const message =
+    messageType === 'warning' ? 'Your warning toast message' : 'Your successful toast message';
+
+  const config: ToastConfig = {
+    message,
+    messageType,
+    durationInMs: 5000,
+  };
+  this.toastController.showToast(config, this.onToastClosed);
+}
+
+private onToastClosed() {
+  console.log(\`Toast closed\`);
+}`;
+
+@Component({
+  selector: config.selector,
+  template: config.template,
+  styles: config.styles,
+  imports: [ButtonComponent],
+})
+export class ShowToastExampleComponent {
+  template = config.template;
+  static readonly ts = ts;
+
+  constructor(public toastController: ToastController) {}
+
+  showToast(messageType?: MessageType) {
+    const message =
+      messageType === 'warning' ? 'Your warning toast message' : 'Your successful toast message';
+
+    const config: ToastConfig = {
+      message,
+      messageType,
+      durationInMs: 5000,
+    };
+    this.toastController.showToast(config, this.onToastClosed);
+  }
+
+  private onToastClosed() {
+    console.log(`Toast closed`);
+  }
+}

apps/cookbook/src/app/examples/toast-example/toast-example.component.html

@@ -1,3 +1,3 @@
-<button kirby-button (click)="showToast()">Show default toast (success)</button>
-<button kirby-button (click)="showToast('success')">Show toast (success)</button>
-<button kirby-button (click)="showToast('warning')">Show toast (warning)</button>
+<kirby-app>
+  <kirby-router-outlet></kirby-router-outlet>
+</kirby-app>

apps/cookbook/src/app/examples/toast-example/toast-example.component.ts

@@ -1,26 +1,11 @@
 import { Component } from '@angular/core';
 
-import { MessageType, ToastConfig } from '@kirbydesign/designsystem';
-import { ToastController } from '@kirbydesign/designsystem';
-import { ButtonComponent } from '@kirbydesign/designsystem/button';
+import { KirbyAppModule } from '@kirbydesign/designsystem/kirby-app';
+import { RouterOutletModule } from '@kirbydesign/designsystem/router-outlet';
 
 @Component({
   selector: 'cookbook-toast-example',
   templateUrl: './toast-example.component.html',
-  imports: [ButtonComponent],
+  imports: [KirbyAppModule, RouterOutletModule],
 })
-export class ToastExampleComponent {
-  constructor(public toastController: ToastController) {}
-  showToast(messageType?: MessageType) {
-    const config: ToastConfig = {
-      message: 'Your toast message',
-      messageType,
-      durationInMs: 5000,
-    };
-    this.toastController.showToast(config, this.onToastClosed);
-  }
-
-  private onToastClosed() {
-    console.log(`Toast closed`);
-  }
-}
+export class ToastExampleComponent {}

apps/cookbook/src/app/showcase/modal-showcase/modal-showcase.component.html

@@ -89,7 +89,7 @@ <h3 #componentBased>Using the Modal Component</h3>
   class="large-example"
   src="/examples/modal-component"
   viewMode="full-size"
-  [showViewModeToggle]="true"
+  showViewModeToggle="true"
   showExternalLink="true"
 ></cookbook-iphone>
 <cookbook-example-viewer [html]="componentExample.template"></cookbook-example-viewer>

apps/cookbook/src/app/showcase/toast-showcase/toast-showcase.component.html

@@ -1,31 +1,40 @@
 <div class="example">
-  <cookbook-toast-example></cookbook-toast-example>
-  <cookbook-code-viewer [html]="exampleHtml"></cookbook-code-viewer>
-  To show the toast, create a
-  <code>ToastConfig</code>
-  and pass it to
-  <code>toastController.showToast</code>
+  <p>
+    Toasts are the most subtle 'notification' available in Kirby. These messages give users
+    immediate feedback after taking an action. Users don't need to dismiss toast messages, as they
+    appear only for a moment before they disappear.
+  </p>
+  <p>There are two types of toasts:</p>
+
+  <ul>
+    <li>Success is used for confirmations on an action</li>
+    <li>Warning is used for warnings, eg. something the user should be aware of</li>
+  </ul>
+
+  <cookbook-iphone
+    src="/examples/toast/show-toast"
+    showExternalLink="true"
+    viewMode="full-size"
+    showViewModeToggle="true"
+  ></cookbook-iphone>
 
   <!-- prettier-ignore -->
-  <cookbook-code-viewer language="ts">const config: ToastConfig =
-      <pre>{{ '{' }}
-  message: 'Your toast message',
-  messageType: 'success',
-  durationInMs: 5000,
-{{ '}' }};
-this.toastController.showToast(config);
-</pre>
-    </cookbook-code-viewer>
-  (Optional) if you need to know when the toast is dismissed, you can pass a callback function:
+  <cookbook-example-viewer [ts]="showToastExampleComponent.ts"></cookbook-example-viewer>
+  <h4>Callback</h4>
+  If you need to know when the toast is dismissed, you can pass a callback function:
   <!-- prettier-ignore -->
   <cookbook-code-viewer language="ts">this.toastController.showToast(config, myCallback);</cookbook-code-viewer>
-  where
-  <code>myCallback</code>
-  can be e.g.:
-  <!-- prettier-ignore -->
-  <cookbook-code-viewer language="ts">myCallback() {{ '{' }}
-...
-{{ '}' }}</cookbook-code-viewer>
+
+  <h3>Best Practice</h3>
+  <ul>
+    <li>Use a toast when it's not critical for the user to read the message.</li>
+    <li>
+      If you don't have clear instructions and/or the user can find the given information in the
+      screen shown.
+    </li>
+    <li>Keep the amount of text below 1 line.</li>
+  </ul>
+
   <h4>Toast config properties:</h4>
   <cookbook-api-description-properties
     [properties]="properties"

apps/cookbook/src/app/showcase/toast-showcase/toast-showcase.component.scss

@@ -0,0 +1,2 @@
+@use '../showcase.shared';
+@use '@kirbydesign/core/src/scss/utils';

apps/cookbook/src/app/showcase/toast-showcase/toast-showcase.component.ts

@@ -3,15 +3,26 @@ import exampleHtml from '../../examples/toast-example/toast-example.component.ht
 import { ToastExampleComponent } from '../../examples/toast-example/toast-example.component';
 import { CodeViewerComponent } from '../../shared/code-viewer/code-viewer.component';
 import { ApiDescriptionPropertiesComponent } from '../../shared/api-description/api-description-properties/api-description-properties.component';
+import { ExampleViewerComponent } from '~/app/shared/example-viewer/example-viewer.component';
 import { ApiDescriptionProperty } from '~/app/shared/api-description/api-description-properties/api-description-properties.component';
+import { IphoneComponent } from '~/app/iphone/iphone.component';
+import { ShowToastExampleComponent } from '~/app/examples/toast-example/examples/show-toast-example.component';
 
 @Component({
   selector: 'cookbook-toast-showcase',
   templateUrl: './toast-showcase.component.html',
-  imports: [ToastExampleComponent, CodeViewerComponent, ApiDescriptionPropertiesComponent],
+  styleUrl: './toast-showcase.component.scss',
+  imports: [
+    ToastExampleComponent,
+    CodeViewerComponent,
+    ExampleViewerComponent,
+    ApiDescriptionPropertiesComponent,
+    IphoneComponent,
+  ],
 })
 export class ToastShowcaseComponent {
   exampleHtml = exampleHtml;
+  showToastExampleComponent = ShowToastExampleComponent;
   properties: ApiDescriptionProperty[] = [
     {
       name: 'message',