@reliability-design/web 1.0.2

package/dist/components/rel-snackbar/rel-snackbar.stories.ts

@@ -0,0 +1,808 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import { html } from 'lit';
+import './rel-snackbar';
+
+/**
+ * The Snackbar component provides brief messages about app processes at the bottom of the screen.
+ * Built with Lit web components for framework-agnostic usage with full token support.
+ *
+ * ## Features
+ * - **Auto-dismiss**: Automatically disappears after specified duration
+ * - **Action Button**: Optional action button with custom text
+ * - **Close Icon**: Optional close button
+ * - **Layout Modes**: Single or double line layouts
+ * - **Longer Action**: Doubles the duration for actions requiring more time
+ * - **Token-Based Styling**: Uses design system tokens
+ * - **Animated Entry**: Slides up with fade-in animation
+ */
+const meta: Meta = {
+  title: 'Components/Snackbar',
+  tags: ['autodocs'],
+  component: 'rel-snackbar',
+  argTypes: {
+    lines: {
+      control: { type: 'select' },
+      options: ['single', 'double'],
+      description: 'Layout style',
+      table: {
+        defaultValue: { summary: 'single' },
+        type: { summary: 'single | double' },
+      },
+    },
+    duration: {
+      control: { type: 'number' },
+      description: 'Auto-dismiss duration in milliseconds (0 to disable)',
+      table: {
+        defaultValue: { summary: '4000' },
+      },
+    },
+    longerAction: {
+      control: { type: 'boolean' },
+      description: 'Doubles the duration for longer actions',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    iconClose: {
+      control: { type: 'boolean' },
+      description: 'Show close button',
+      table: {
+        defaultValue: { summary: 'true' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Default snackbar with message and close icon
+ */
+export const Default: Story = {
+  render: () => {
+    const snackbar = document.createElement('rel-snackbar') as any;
+    snackbar.message = 'This is a snackbar message';
+    snackbar.duration = 0; // Disable auto-dismiss for demo
+    snackbar.addEventListener('close', () => {
+      console.log('Snackbar closed');
+    });
+
+    return snackbar;
+  },
+};
+
+/**
+ * Snackbar with action button
+ */
+export const WithAction: Story = {
+  render: () => {
+    const snackbar = document.createElement('rel-snackbar') as any;
+    snackbar.message = 'Connection lost';
+    snackbar.action = 'Retry';
+    snackbar.duration = 0;
+    snackbar.addEventListener('actionClick', () => {
+      console.log('Action clicked');
+    });
+
+    return snackbar;
+  },
+};
+
+/**
+ * Snackbar without close icon
+ */
+export const WithoutCloseIcon: Story = {
+  render: () => {
+    const snackbar = document.createElement('rel-snackbar') as any;
+    snackbar.message = 'Message sent successfully';
+    snackbar.iconClose = false;
+    snackbar.duration = 0;
+
+    return snackbar;
+  },
+};
+
+/**
+ * Snackbar with action and no close icon
+ */
+export const ActionOnly: Story = {
+  render: () => {
+    const snackbar = document.createElement('rel-snackbar') as any;
+    snackbar.message = 'Your changes have been saved';
+    snackbar.action = 'Undo';
+    snackbar.iconClose = false;
+    snackbar.duration = 0;
+    snackbar.addEventListener('actionClick', () => {
+      console.log('Undo clicked');
+    });
+
+    return snackbar;
+  },
+};
+
+/**
+ * Double line layout
+ */
+export const DoubleLine: Story = {
+  render: () => {
+    const snackbar = document.createElement('rel-snackbar') as any;
+    snackbar.message = 'This is a longer snackbar message that needs more space';
+    snackbar.action = 'View Details';
+    snackbar.lines = 'double';
+    snackbar.duration = 0;
+
+    return snackbar;
+  },
+};
+
+/**
+ * Double line with longer action
+ */
+export const DoubleLineWithLongerAction: Story = {
+  render: () => {
+    const snackbar = document.createElement('rel-snackbar') as any;
+    snackbar.message = 'Please review the details before continuing with this action';
+    snackbar.action = 'Review';
+    snackbar.lines = 'double';
+    snackbar.longerAction = true;
+    snackbar.duration = 0;
+
+    return snackbar;
+  },
+};
+
+/**
+ * Success message
+ */
+export const SuccessMessage: Story = {
+  render: () => {
+    const snackbar = document.createElement('rel-snackbar') as any;
+    snackbar.message = 'File uploaded successfully';
+    snackbar.iconClose = false;
+    snackbar.duration = 0;
+
+    return snackbar;
+  },
+};
+
+/**
+ * Error message with retry
+ */
+export const ErrorWithRetry: Story = {
+  render: () => {
+    const snackbar = document.createElement('rel-snackbar') as any;
+    snackbar.message = 'Failed to save changes';
+    snackbar.action = 'Retry';
+    snackbar.duration = 0;
+    snackbar.addEventListener('actionClick', () => {
+      console.log('Retrying...');
+    });
+
+    return snackbar;
+  },
+};
+
+/**
+ * Network status
+ */
+export const NetworkStatus: Story = {
+  render: () => {
+    const snackbar = document.createElement('rel-snackbar') as any;
+    snackbar.message = 'No internet connection';
+    snackbar.action = 'Retry';
+    snackbar.duration = 0;
+
+    return snackbar;
+  },
+};
+
+/**
+ * Download complete
+ */
+export const DownloadComplete: Story = {
+  render: () => {
+    const snackbar = document.createElement('rel-snackbar') as any;
+    snackbar.message = 'Download complete';
+    snackbar.action = 'Open';
+    snackbar.iconClose = false;
+    snackbar.duration = 0;
+    snackbar.addEventListener('actionClick', () => {
+      console.log('Opening file...');
+    });
+
+    return snackbar;
+  },
+};
+
+/**
+ * Undo action
+ */
+export const UndoAction: Story = {
+  render: () => {
+    const snackbar = document.createElement('rel-snackbar') as any;
+    snackbar.message = 'Item deleted';
+    snackbar.action = 'Undo';
+    snackbar.duration = 0;
+    snackbar.addEventListener('actionClick', () => {
+      console.log('Undo delete');
+    });
+
+    return snackbar;
+  },
+};
+
+/**
+ * Long message
+ */
+export const LongMessage: Story = {
+  render: () => {
+    const snackbar = document.createElement('rel-snackbar') as any;
+    snackbar.message = 'Your request is being processed. This may take a few moments to complete.';
+    snackbar.action = 'View Status';
+    snackbar.lines = 'double';
+    snackbar.duration = 0;
+
+    return snackbar;
+  },
+};
+
+/**
+ * Update available
+ */
+export const UpdateAvailable: Story = {
+  render: () => {
+    const snackbar = document.createElement('rel-snackbar') as any;
+    snackbar.message = 'A new version is available';
+    snackbar.action = 'Update';
+    snackbar.duration = 0;
+    snackbar.addEventListener('actionClick', () => {
+      console.log('Updating...');
+    });
+
+    return snackbar;
+  },
+};
+
+/**
+ * Multiple snackbars stacked
+ */
+export const StackedSnackbars: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; align-items: flex-start;">
+      ${(() => {
+        const snackbar1 = document.createElement('rel-snackbar') as any;
+        snackbar1.message = 'First notification';
+        snackbar1.action = 'Action';
+        snackbar1.duration = 0;
+
+        return snackbar1;
+      })()}
+      ${(() => {
+        const snackbar2 = document.createElement('rel-snackbar') as any;
+        snackbar2.message = 'Second notification';
+        snackbar2.duration = 0;
+
+        return snackbar2;
+      })()}
+      ${(() => {
+        const snackbar3 = document.createElement('rel-snackbar') as any;
+        snackbar3.message = 'Third notification';
+        snackbar3.action = 'View';
+        snackbar3.duration = 0;
+
+        return snackbar3;
+      })()}
+    </div>
+  `,
+};
+
+/**
+ * Interactive demo with auto-dismiss
+ */
+export const InteractiveDemo: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <button
+        style="padding: 12px 24px; background: var(--rel-colors-black); color: white; border: none; border-radius: 6px; cursor: pointer; font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm);"
+        @click=${(e: Event) => {
+          const container = (e.target as HTMLElement).parentElement!.querySelector('.snackbar-container');
+          const snackbar = document.createElement('rel-snackbar') as any;
+          snackbar.message = 'This will auto-dismiss in 4 seconds';
+          snackbar.action = 'Dismiss';
+          snackbar.duration = 4000;
+          snackbar.addEventListener('close', () => {
+            snackbar.remove();
+          });
+          snackbar.addEventListener('actionClick', () => {
+            console.log('Action clicked');
+          });
+          container!.appendChild(snackbar);
+        }}>
+        Show Snackbar
+      </button>
+      <div class="snackbar-container" style="min-height: 100px;"></div>
+    </div>
+  `,
+};
+
+/**
+ * Single line - basic message only
+ */
+export const SingleLineBasic: Story = {
+  render: () => {
+    const snackbar = document.createElement('rel-snackbar') as any;
+    snackbar.message = 'Operation completed';
+    snackbar.lines = 'single';
+    snackbar.iconClose = false;
+    snackbar.duration = 0;
+
+    return snackbar;
+  },
+};
+
+/**
+ * Single line - with action and close
+ */
+export const SingleLineComplete: Story = {
+  render: () => {
+    const snackbar = document.createElement('rel-snackbar') as any;
+    snackbar.message = 'Email sent to john@example.com';
+    snackbar.action = 'View';
+    snackbar.lines = 'single';
+    snackbar.duration = 0;
+    snackbar.addEventListener('actionClick', () => {
+      console.log('View email');
+    });
+
+    return snackbar;
+  },
+};
+
+/**
+ * Double line - no action
+ */
+export const DoubleLineNoAction: Story = {
+  render: () => {
+    const snackbar = document.createElement('rel-snackbar') as any;
+    snackbar.message = 'Your data has been synchronized across all devices successfully';
+    snackbar.lines = 'double';
+    snackbar.duration = 0;
+
+    return snackbar;
+  },
+};
+
+/**
+ * Double line - action only (no close)
+ */
+export const DoubleLineActionOnly: Story = {
+  render: () => {
+    const snackbar = document.createElement('rel-snackbar') as any;
+    snackbar.message = 'New features are available in this release. Check them out!';
+    snackbar.action = 'Learn More';
+    snackbar.lines = 'double';
+    snackbar.iconClose = false;
+    snackbar.duration = 0;
+    snackbar.addEventListener('actionClick', () => {
+      console.log('Navigate to features page');
+    });
+
+    return snackbar;
+  },
+};
+
+/**
+ * Duration - 2 seconds (short)
+ */
+export const ShortDuration: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <button
+        style="padding: 12px 24px; background: var(--rel-colors-black); color: white; border: none; border-radius: 6px; cursor: pointer; font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm);"
+        @click=${(e: Event) => {
+          const container = (e.target as HTMLElement).parentElement!.querySelector('.snackbar-container');
+          const snackbar = document.createElement('rel-snackbar') as any;
+          snackbar.message = 'Quick notification (2s)';
+          snackbar.duration = 2000;
+          snackbar.addEventListener('close', () => {
+            snackbar.remove();
+          });
+          container!.appendChild(snackbar);
+        }}>
+        Show 2-Second Snackbar
+      </button>
+      <div class="snackbar-container" style="min-height: 100px;"></div>
+    </div>
+  `,
+};
+
+/**
+ * Duration - 6 seconds (long)
+ */
+export const LongDuration: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <button
+        style="padding: 12px 24px; background: var(--rel-colors-black); color: white; border: none; border-radius: 6px; cursor: pointer; font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm);"
+        @click=${(e: Event) => {
+          const container = (e.target as HTMLElement).parentElement!.querySelector('.snackbar-container');
+          const snackbar = document.createElement('rel-snackbar') as any;
+          snackbar.message = 'Important message (6s)';
+          snackbar.action = 'Acknowledge';
+          snackbar.duration = 6000;
+          snackbar.addEventListener('close', () => {
+            snackbar.remove();
+          });
+          snackbar.addEventListener('actionClick', () => {
+            console.log('Acknowledged');
+          });
+          container!.appendChild(snackbar);
+        }}>
+        Show 6-Second Snackbar
+      </button>
+      <div class="snackbar-container" style="min-height: 100px;"></div>
+    </div>
+  `,
+};
+
+/**
+ * Longer action demonstration - duration doubles
+ */
+export const LongerActionDemo: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <div style="margin-bottom: 12px;">
+        <p style="margin: 0; font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm); color: var(--rel-colors-gray-heading);">
+          The longerAction property doubles the auto-dismiss duration (4s → 8s)
+        </p>
+      </div>
+      <button
+        style="padding: 12px 24px; background: var(--rel-colors-black); color: white; border: none; border-radius: 6px; cursor: pointer; font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm);"
+        @click=${(e: Event) => {
+          const container = (e.target as HTMLElement).parentElement!.querySelector('.snackbar-container');
+          const snackbar = document.createElement('rel-snackbar') as any;
+          snackbar.message = 'Review this carefully before deciding';
+          snackbar.action = 'Review & Approve';
+          snackbar.lines = 'double';
+          snackbar.longerAction = true;
+          snackbar.duration = 4000; // Will become 8000ms due to longerAction
+          snackbar.addEventListener('close', () => {
+            snackbar.remove();
+          });
+          snackbar.addEventListener('actionClick', () => {
+            console.log('Review action clicked');
+          });
+          container!.appendChild(snackbar);
+        }}>
+        Show Longer Action Snackbar (8s)
+      </button>
+      <div class="snackbar-container" style="min-height: 100px;"></div>
+    </div>
+  `,
+};
+
+/**
+ * Interactive - Form submission success
+ */
+export const FormSubmissionSuccess: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <div style="padding: 24px; border: 1px solid var(--rel-colors-gray-border); border-radius: 8px;">
+        <h4 style="margin: 0 0 16px; font-family: var(--rel-fontFamilies-primary); color: var(--rel-colors-gray-heading);">Contact Form</h4>
+        <input type="text" placeholder="Name" style="width: 100%; padding: 8px; margin-bottom: 12px; border: 1px solid var(--rel-colors-gray-border); border-radius: 4px; font-family: var(--rel-fontFamilies-primary);" />
+        <input type="email" placeholder="Email" style="width: 100%; padding: 8px; margin-bottom: 12px; border: 1px solid var(--rel-colors-gray-border); border-radius: 4px; font-family: var(--rel-fontFamilies-primary);" />
+        <button
+          style="padding: 12px 24px; background: var(--rel-colors-black); color: white; border: none; border-radius: 6px; cursor: pointer; font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm);"
+          @click=${(e: Event) => {
+            const container = (e.target as HTMLElement).closest('div')!.parentElement!.querySelector('.snackbar-container');
+            const snackbar = document.createElement('rel-snackbar') as any;
+            snackbar.message = 'Form submitted successfully';
+            snackbar.action = 'View';
+            snackbar.iconClose = false;
+            snackbar.duration = 3000;
+            snackbar.addEventListener('close', () => {
+              snackbar.remove();
+            });
+            snackbar.addEventListener('actionClick', () => {
+              console.log('View submission');
+            });
+            container!.appendChild(snackbar);
+          }}>
+          Submit
+        </button>
+      </div>
+      <div class="snackbar-container" style="min-height: 100px;"></div>
+    </div>
+  `,
+};
+
+/**
+ * Interactive - Delete with undo
+ */
+export const DeleteWithUndo: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <div style="padding: 24px; border: 1px solid var(--rel-colors-gray-border); border-radius: 8px;">
+        <h4 style="margin: 0 0 16px; font-family: var(--rel-fontFamilies-primary); color: var(--rel-colors-gray-heading);">File Manager</h4>
+        <div style="padding: 12px; background: var(--rel-colors-gray-bg); border-radius: 4px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center;">
+          <span style="font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm);">document.pdf</span>
+          <button
+            style="padding: 8px 16px; background: #dc2626; color: white; border: none; border-radius: 4px; cursor: pointer; font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm);"
+            @click=${(e: Event) => {
+              const container = (e.target as HTMLElement).closest('div')!.parentElement!.parentElement!.querySelector('.snackbar-container');
+              const snackbar = document.createElement('rel-snackbar') as any;
+              snackbar.message = 'document.pdf deleted';
+              snackbar.action = 'Undo';
+              snackbar.duration = 5000;
+              snackbar.addEventListener('close', () => {
+                snackbar.remove();
+              });
+              snackbar.addEventListener('actionClick', () => {
+                console.log('File restored');
+                alert('File restored!');
+              });
+              container!.appendChild(snackbar);
+            }}>
+            Delete
+          </button>
+        </div>
+      </div>
+      <div class="snackbar-container" style="min-height: 100px;"></div>
+    </div>
+  `,
+};
+
+/**
+ * Interactive - Network error with retry
+ */
+export const NetworkErrorRetry: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <button
+        style="padding: 12px 24px; background: var(--rel-colors-black); color: white; border: none; border-radius: 6px; cursor: pointer; font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm);"
+        @click=${(e: Event) => {
+          const container = (e.target as HTMLElement).parentElement!.querySelector('.snackbar-container');
+          // Clear any existing snackbars
+          container!.innerHTML = '';
+          const snackbar = document.createElement('rel-snackbar') as any;
+          snackbar.message = 'Failed to connect to server';
+          snackbar.action = 'Retry';
+          snackbar.lines = 'single';
+          snackbar.duration = 0; // Don't auto-dismiss on error
+          let retryCount = 0;
+          snackbar.addEventListener('actionClick', () => {
+            retryCount++;
+            console.log(`Retry attempt ${retryCount}`);
+
+            // Simulate retry
+            setTimeout(() => {
+              snackbar.remove();
+              if (retryCount === 1) {
+                // First retry fails
+                const retrySnackbar = document.createElement('rel-snackbar') as any;
+                retrySnackbar.message = 'Still unable to connect';
+                retrySnackbar.action = 'Retry';
+                retrySnackbar.duration = 0;
+                retrySnackbar.addEventListener('actionClick', () => {
+                  retrySnackbar.remove();
+                  // Second retry succeeds
+                  const successSnackbar = document.createElement('rel-snackbar') as any;
+                  successSnackbar.message = 'Connected successfully';
+                  successSnackbar.iconClose = false;
+                  successSnackbar.duration = 3000;
+                  successSnackbar.addEventListener('close', () => {
+                    successSnackbar.remove();
+                  });
+                  container!.appendChild(successSnackbar);
+                });
+                container!.appendChild(retrySnackbar);
+              }
+            }, 1000);
+          });
+          container!.appendChild(snackbar);
+        }}>
+        Simulate Connection Error
+      </button>
+      <div class="snackbar-container" style="min-height: 100px;"></div>
+    </div>
+  `,
+};
+
+/**
+ * Interactive - Multiple notification queue
+ */
+export const NotificationQueue: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <div style="display: flex; gap: 12px;">
+        <button
+          style="padding: 12px 24px; background: var(--rel-colors-black); color: white; border: none; border-radius: 6px; cursor: pointer; font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm);"
+          @click=${(e: Event) => {
+            const container = (e.target as HTMLElement).parentElement!.parentElement!.querySelector('.snackbar-container');
+            const messages = [
+              { msg: 'Task 1 completed', action: 'View' },
+              { msg: 'Task 2 completed', action: 'View' },
+              { msg: 'Task 3 completed', action: 'View' },
+            ];
+
+            messages.forEach((item, index) => {
+              setTimeout(() => {
+                const snackbar = document.createElement('rel-snackbar') as any;
+                snackbar.message = item.msg;
+                snackbar.action = item.action;
+                snackbar.duration = 3000;
+                snackbar.addEventListener('close', () => {
+                  snackbar.remove();
+                });
+                snackbar.addEventListener('actionClick', () => {
+                  console.log(`View task ${index + 1}`);
+                });
+                container!.appendChild(snackbar);
+              }, index * 500);
+            });
+          }}>
+          Queue Multiple Notifications
+        </button>
+        <button
+          style="padding: 12px 24px; background: #dc2626; color: white; border: none; border-radius: 6px; cursor: pointer; font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm);"
+          @click=${(e: Event) => {
+            const container = (e.target as HTMLElement).parentElement!.parentElement!.querySelector('.snackbar-container');
+            container!.innerHTML = '';
+          }}>
+          Clear All
+        </button>
+      </div>
+      <div class="snackbar-container" style="display: flex; flex-direction: column; gap: 12px; min-height: 200px;"></div>
+    </div>
+  `,
+};
+
+/**
+ * Use case - File upload progress
+ */
+export const FileUploadProgress: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <button
+        style="padding: 12px 24px; background: var(--rel-colors-black); color: white; border: none; border-radius: 6px; cursor: pointer; font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm);"
+        @click=${(e: Event) => {
+          const container = (e.target as HTMLElement).parentElement!.querySelector('.snackbar-container');
+          container!.innerHTML = '';
+
+          // Show uploading
+          const uploadingSnackbar = document.createElement('rel-snackbar') as any;
+          uploadingSnackbar.message = 'Uploading image.jpg...';
+          uploadingSnackbar.iconClose = false;
+          uploadingSnackbar.duration = 0;
+          container!.appendChild(uploadingSnackbar);
+
+          // After 2 seconds, show success
+          setTimeout(() => {
+            uploadingSnackbar.remove();
+            const successSnackbar = document.createElement('rel-snackbar') as any;
+            successSnackbar.message = 'image.jpg uploaded successfully';
+            successSnackbar.action = 'View';
+            successSnackbar.duration = 4000;
+            successSnackbar.addEventListener('close', () => {
+              successSnackbar.remove();
+            });
+            successSnackbar.addEventListener('actionClick', () => {
+              console.log('View uploaded file');
+            });
+            container!.appendChild(successSnackbar);
+          }, 2000);
+        }}>
+        Upload File
+      </button>
+      <div class="snackbar-container" style="min-height: 100px;"></div>
+    </div>
+  `,
+};
+
+/**
+ * Use case - Settings saved
+ */
+export const SettingsSaved: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <div style="padding: 24px; border: 1px solid var(--rel-colors-gray-border); border-radius: 8px;">
+        <h4 style="margin: 0 0 16px; font-family: var(--rel-fontFamilies-primary); color: var(--rel-colors-gray-heading);">User Preferences</h4>
+        <label style="display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm);">
+          <input type="checkbox" />
+          Enable notifications
+        </label>
+        <label style="display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm);">
+          <input type="checkbox" />
+          Auto-save
+        </label>
+        <button
+          style="padding: 12px 24px; background: var(--rel-colors-black); color: white; border: none; border-radius: 6px; cursor: pointer; font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm);"
+          @click=${(e: Event) => {
+            const container = (e.target as HTMLElement).closest('div')!.parentElement!.parentElement!.querySelector('.snackbar-container');
+            const snackbar = document.createElement('rel-snackbar') as any;
+            snackbar.message = 'Settings saved';
+            snackbar.iconClose = false;
+            snackbar.duration = 2000;
+            snackbar.addEventListener('close', () => {
+              snackbar.remove();
+            });
+            container!.appendChild(snackbar);
+          }}>
+          Save Settings
+        </button>
+      </div>
+      <div class="snackbar-container" style="min-height: 100px;"></div>
+    </div>
+  `,
+};
+
+/**
+ * All variants showcase
+ */
+export const AllVariants: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 24px;">
+      <div>
+        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 16px;">Default</h4>
+        ${(() => {
+          const snackbar = document.createElement('rel-snackbar') as any;
+          snackbar.message = 'This is a snackbar message';
+          snackbar.duration = 0;
+
+          return snackbar;
+        })()}
+      </div>
+
+      <div>
+        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 16px;">With Action</h4>
+        ${(() => {
+          const snackbar = document.createElement('rel-snackbar') as any;
+          snackbar.message = 'Connection lost';
+          snackbar.action = 'Retry';
+          snackbar.duration = 0;
+
+          return snackbar;
+        })()}
+      </div>
+
+      <div>
+        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 16px;">Without Close Icon</h4>
+        ${(() => {
+          const snackbar = document.createElement('rel-snackbar') as any;
+          snackbar.message = 'Message sent successfully';
+          snackbar.iconClose = false;
+          snackbar.duration = 0;
+
+          return snackbar;
+        })()}
+      </div>
+
+      <div>
+        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 16px;">Action Only</h4>
+        ${(() => {
+          const snackbar = document.createElement('rel-snackbar') as any;
+          snackbar.message = 'Your changes have been saved';
+          snackbar.action = 'Undo';
+          snackbar.iconClose = false;
+          snackbar.duration = 0;
+
+          return snackbar;
+        })()}
+      </div>
+
+      <div>
+        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 16px;">Double Line</h4>
+        ${(() => {
+          const snackbar = document.createElement('rel-snackbar') as any;
+          snackbar.message = 'This is a longer snackbar message that needs more space';
+          snackbar.action = 'View Details';
+          snackbar.lines = 'double';
+          snackbar.duration = 0;
+
+          return snackbar;
+        })()}
+      </div>
+    </div>
+  `,
+};