feat(elements|ino-snackbar): allow usage of custom icons

packages/elements/src/components.d.ts

@@ -1383,7 +1383,7 @@ export namespace Components {
         "value"?: string;
     }
     /**
-     * Snackbars provide brief messages about app processes at the bottom of the screen. It functions as a wrapper around the material design's [Snackbar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar) component
+     * Snackbars provide brief messages about app processes at the bottom of the screen. It functions as a wrapper around the material design's [Snackbar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar) component.
      */
     interface InoSnackbar {
         /**
@@ -2261,7 +2261,7 @@ declare global {
         new (): HTMLInoSelectElement;
     };
     /**
-     * Snackbars provide brief messages about app processes at the bottom of the screen. It functions as a wrapper around the material design's [Snackbar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar) component
+     * Snackbars provide brief messages about app processes at the bottom of the screen. It functions as a wrapper around the material design's [Snackbar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar) component.
      */
     interface HTMLInoSnackbarElement extends Components.InoSnackbar, HTMLStencilElement {
     }
@@ -3861,7 +3861,7 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     /**
-     * Snackbars provide brief messages about app processes at the bottom of the screen. It functions as a wrapper around the material design's [Snackbar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar) component
+     * Snackbars provide brief messages about app processes at the bottom of the screen. It functions as a wrapper around the material design's [Snackbar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar) component.
      */
     interface InoSnackbar {
         /**
@@ -4488,7 +4488,7 @@ declare module "@stencil/core" {
              */
             "ino-select": LocalJSX.InoSelect & JSXBase.HTMLAttributes<HTMLInoSelectElement>;
             /**
-             * Snackbars provide brief messages about app processes at the bottom of the screen. It functions as a wrapper around the material design's [Snackbar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar) component
+             * Snackbars provide brief messages about app processes at the bottom of the screen. It functions as a wrapper around the material design's [Snackbar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar) component.
              */
             "ino-snackbar": LocalJSX.InoSnackbar & JSXBase.HTMLAttributes<HTMLInoSnackbarElement>;
             /**

packages/elements/src/components/ino-snackbar/ino-snackbar.tsx

@@ -11,9 +11,12 @@ import {
 } from '@stencil/core';
 import classNames from 'classnames';
 import { SnackbarType } from '../types';
+import { hasSlotContent } from '../../util/component-utils';
 
 /**
- * Snackbars provide brief messages about app processes at the bottom of the screen. It functions as a wrapper around the material design's [Snackbar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar) component
+ * Snackbars provide brief messages about app processes at the bottom of the screen. It functions as a wrapper around the material design's [Snackbar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar) component.
+ *
+ * @slot icon-slot - Use this slot to add a custom icon (e.g., `<ino-icon>` or `<img>`) inside the `ino-snackbar`.
  */
 @Component({
   tag: 'ino-snackbar',
@@ -138,14 +141,13 @@ export class Snackbar implements ComponentInterface {
 
   render() {
     const hasActionText = Boolean(this.actionText);
+    const hasSlot = hasSlotContent(this.el, 'icon-slot');
 
     const hostClasses = classNames(`ino-snackbar--type-${this.type}`);
-
     const snackbarClasses = classNames(
       'mdc-snackbar',
       'ino-snackbar-layout-container',
     );
-
     return (
       <Host class={hostClasses}>
         <div
@@ -157,10 +159,14 @@ export class Snackbar implements ComponentInterface {
         >
           <div class="mdc-snackbar__surface ino-snackbar-container">
             <div class="mdc-snackbar__actions ino-snackbar-icon-container">
-              <ino-icon
-                class="ino-snackbar-icon"
-                icon={this.mapTypeToIconName(this.type)}
-              />
+              {hasSlot ? (
+                <slot name="icon-slot" />
+              ) : (
+                <ino-icon
+                  class="ino-snackbar-icon"
+                  icon={this.mapTypeToIconName(this.type)}
+                />
+              )}
             </div>
             <div
               class="mdc-snackbar__label ino-snackbar-message-container"

packages/elements/src/components/ino-snackbar/readme.md

@@ -6,7 +6,7 @@
 
 ## Overview
 
-Snackbars provide brief messages about app processes at the bottom of the screen. It functions as a wrapper around the material design's [Snackbar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar) component
+Snackbars provide brief messages about app processes at the bottom of the screen. It functions as a wrapper around the material design's [Snackbar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar) component.
 
 ## Properties
 
@@ -27,6 +27,13 @@ Snackbars provide brief messages about app processes at the bottom of the screen
 | `hideEl`      | Event that emits as soon as the snackbar hides. Listen to this event to hide or destroy this element. | `CustomEvent<any>` |
 
 
+## Slots
+
+| Slot          | Description                                                                                   |
+| ------------- | --------------------------------------------------------------------------------------------- |
+| `"icon-slot"` | Use this slot to add a custom icon (e.g., `<ino-icon>` or `<img>`) inside the `ino-snackbar`. |
+
+
 ## CSS Custom Properties
 
 | Name                    | Description                 |

packages/storybook/elements-stencil-docs.json

@@ -9099,10 +9099,15 @@
       "fileName": "ino-snackbar.tsx",
       "tag": "ino-snackbar",
       "readme": "# ino-snackbar\n\n",
-      "overview": "Snackbars provide brief messages about app processes at the bottom of the screen. It functions as a wrapper around the material design's [Snackbar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar) component",
+      "overview": "Snackbars provide brief messages about app processes at the bottom of the screen. It functions as a wrapper around the material design's [Snackbar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar) component.",
       "usage": {},
-      "docs": "Snackbars provide brief messages about app processes at the bottom of the screen. It functions as a wrapper around the material design's [Snackbar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar) component",
-      "docsTags": [],
+      "docs": "Snackbars provide brief messages about app processes at the bottom of the screen. It functions as a wrapper around the material design's [Snackbar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar) component.",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "icon-slot - Use this slot to add a custom icon (e.g., `<ino-icon>` or `<img>`) inside the `ino-snackbar`."
+        }
+      ],
       "encapsulation": "none",
       "dependents": [],
       "dependencies": [
@@ -9301,7 +9306,12 @@
           "docs": "Distance to the top edge"
         }
       ],
-      "slots": [],
+      "slots": [
+        {
+          "name": "icon-slot",
+          "docs": "Use this slot to add a custom icon (e.g., `<ino-icon>` or `<img>`) inside the `ino-snackbar`."
+        }
+      ],
       "parts": [],
       "listeners": []
     },

packages/storybook/src/stories/ino-snackbar/ino-snackbar.scss

@@ -9,13 +9,6 @@
     padding: 10px;
   }
 
-  .snackbar-template {
-    position: absolute;
-    inset: -200px;
-    z-index: 999;
-    pointer-events: none;
-  }
-
   .hidden {
     display: none;
   }

packages/storybook/src/stories/ino-snackbar/ino-snackbar.stories.ts

@@ -5,6 +5,8 @@ import { useEffect } from '@storybook/preview-api';
 import Story from '../StoryWrapper';
 import './ino-snackbar.scss';
 
+import inovexElementsLogo from '../../assets/images/elements.svg';
+
 type InoSnackbarExtended = Components.InoSnackbar & {
   id: string;
   defaultSlot: string;
@@ -22,63 +24,45 @@ const InoSnackbarMeta = {
   },
   decorators: [
     (story) => {
-      const templates = Array.from(
-        document.getElementsByClassName('snackbar-template'),
-      );
-
-      const snackbarStayVisibleOnHover = document.getElementById(
-        'snackbar-stayVisibleOnHover',
-      );
-      console.log(
-        'snackbar-stayVisibleOnHover Element',
-        snackbarStayVisibleOnHover,
-      );
-      console.log('all templates', templates);
-      const btnClickHandler = (e) => {
-        if (!e.target.parentElement.classList.contains('snackbar-trigger')) {
-          return;
-        }
-
-        const triggerId = e.target.parentElement.dataset.templateId;
-        console.log('triggerID', triggerId);
-        const templateWithId = templates.find(
-          (template) => template.id === triggerId,
-        );
-
-        console.log('templateWithId', templateWithId);
-        templateWithId?.classList.remove('hidden');
-
-        const currentSnackbars =
-          document.body.getElementsByTagName('ino-snackbar');
-
-        const snackbarWithIdExists = Array.from(currentSnackbars).some(
-          (snackbar) => snackbar.id === triggerId,
-        );
+      useEffect(() => {
+        const handleOpen = (e) => {
+          const button = e.target.closest('.snackbar-trigger');
+          if (button) {
+            const snackbarId = button.getAttribute('data-template-id');
+            const snackbarWrapper = document.getElementById(snackbarId);
+            if (snackbarWrapper) {
+              snackbarWrapper.classList.remove('hidden');
+            }
+          }
+        };
 
-        if (snackbarWithIdExists) {
-          return;
-        }
-      };
+        const snackbarHideHandler = (e) => {
+          const snackbarElement = e.target.closest('ino-snackbar');
+          if (snackbarElement) {
+            const snackbarWrapper = snackbarElement.parentElement;
+            snackbarWrapper.classList.add('hidden');
+          }
+        };
 
-      const snackbarHideHandler = (e) =>
-        (e.target as HTMLInoSnackbarElement).remove();
+        const btns = document.querySelectorAll('.snackbar-trigger');
+        btns.forEach((btn) => btn.addEventListener('click', handleOpen));
 
-      useEffect(() => {
-        document.addEventListener('click', btnClickHandler);
         document.addEventListener('hideEl', snackbarHideHandler);
+
         return () => {
-          document.removeEventListener('click', btnClickHandler);
-          document.addEventListener('hideEl', snackbarHideHandler);
+          btns.forEach((btn) => btn.removeEventListener('click', handleOpen));
+          document.removeEventListener('hideEl', snackbarHideHandler);
         };
       });
+
       return story();
     },
   ],
   render: (args) => html`
-    <ino-button class="snackbar-trigger" data-template-id="${args.id}"
-      >Show Snackbar
+    <ino-button class="snackbar-trigger" data-template-id="${args.id}">
+      Show Snackbar
     </ino-button>
-    <div class="snackbar-template hidden" id="${args.id}">
+    <div class="hidden" id="${args.id}">
       <ino-snackbar
         id="${args.id}"
         action-text="${args.actionText}"
@@ -160,3 +144,41 @@ export const StayVisibleOnHover = Story({
       'This snackbar stays visible on hover otherwise it will disappear in 5s',
   },
 });
+
+/**
+ * To add a custom icon inside the `ino-snackbar` element, follow these steps:
+ * 1. Inside the `ino-snackbar` element, insert an `ino-icon` or a similar element (e.g. `img`).
+ * 2. Assign a `slot` attribute to the custom element and set it to `"icon-slot"`.
+ *
+ * Example usage of the `ino-snackbar` element with a custom ino-icon:
+ */
+export const CustomIcon = {
+  ...Default,
+  args: {
+    id: 'snackbar-customIcon',
+    actionText: 'Some Action',
+    defaultSlot: html`
+      <ino-icon slot="icon-slot" icon="star"></ino-icon>
+      This snackbar uses a custom ino-icon.
+    `,
+  },
+};
+/*
+ * Ensure that the custom element has the desired size. In the example below, we set the width and height of the img icon to 20px.
+ */
+export const CustomElements = {
+  ...Default,
+  args: {
+    id: 'snackbar-customElements',
+    actionText: 'Some Action',
+    defaultSlot: html`
+      <img
+        slot="icon-slot"
+        src=${inovexElementsLogo}
+        alt="Custom Icon"
+        style="width: 20px; height: 20px;"
+      />
+      This snackbar uses a custom img.
+    `,
+  },
+};