@reliability-design/web 1.0.2 → 1.0.3

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

@@ -1,412 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import { html } from 'lit';
-import './rel-alert';
-
-/**
- * The Alert component provides contextual feedback messages for user actions.
- * Built with Lit web components for framework-agnostic usage.
- *
- * ## Features
- * - **5 Types**: info, success, warning, error, neutral
- * - **Custom Icons**: Semantic icons for each alert type
- * - **Two-Line Messages**: Primary and secondary message support
- * - **Optional Links**: Inline action links within alerts
- * - **Dismissible**: Optional close button to dismiss alerts
- * - **Semantic Colors**: Token-based color system matching alert type
- */
-const meta: Meta = {
-  title: 'Components/Alert',
-  tags: ['autodocs'],
-  component: 'rel-alert',
-  argTypes: {
-    type: {
-      control: { type: 'select' },
-      options: ['info', 'success', 'warning', 'error', 'neutral'],
-      description: 'Alert type determines color and icon',
-      table: {
-        defaultValue: { summary: 'neutral' },
-        type: { summary: 'string' },
-      },
-    },
-    message1: {
-      control: 'text',
-      description: 'Primary message (required)',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    message2: {
-      control: 'text',
-      description: 'Secondary message (optional)',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    urlText: {
-      control: 'text',
-      description: 'Link text (optional)',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    urlHref: {
-      control: 'text',
-      description: 'Link URL (optional)',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    dismissible: {
-      control: 'boolean',
-      description: 'Show close button',
-      table: {
-        defaultValue: { summary: true },
-        type: { summary: 'boolean' },
-      },
-    },
-  },
-  render: (args) => html`
-    <rel-alert
-      type="${args.type || 'neutral'}"
-      message1="${args.message1 || 'Alert message'}"
-      message2="${args.message2 || ''}"
-      urlText="${args.urlText || ''}"
-      urlHref="${args.urlHref || ''}"
-      ?dismissible="${args.dismissible !== false}"
-    ></rel-alert>
-  `,
-};
-
-export default meta;
-type Story = StoryObj;
-
-/**
- * Info alert - used for informational messages
- */
-export const Info: Story = {
-  args: {
-    type: 'info',
-    message1: 'New features are available',
-    message2: 'Check out our latest updates and improvements to the platform.',
-    dismissible: true,
-  },
-};
-
-/**
- * Success alert - used for positive confirmations
- */
-export const Success: Story = {
-  args: {
-    type: 'success',
-    message1: 'Payment successful',
-    message2: 'Your transaction has been completed and receipt sent to your email.',
-    dismissible: true,
-  },
-};
-
-/**
- * Warning alert - used for important notices
- */
-export const Warning: Story = {
-  args: {
-    type: 'warning',
-    message1: 'Your session expires soon',
-    message2: 'Please save your work to avoid losing any changes.',
-    dismissible: true,
-  },
-};
-
-/**
- * Error alert - used for errors and failures
- */
-export const Error: Story = {
-  args: {
-    type: 'error',
-    message1: 'Failed to process request',
-    message2: 'An error occurred while processing your request. Please try again.',
-    dismissible: true,
-  },
-};
-
-/**
- * Neutral alert - used for general messages
- */
-export const Neutral: Story = {
-  args: {
-    type: 'neutral',
-    message1: 'System maintenance scheduled',
-    message2: 'Our systems will be offline for maintenance on Sunday at 2:00 AM.',
-    dismissible: true,
-  },
-};
-
-/**
- * Alert with link - includes an action link
- */
-export const WithLink: Story = {
-  args: {
-    type: 'info',
-    message1: 'Terms of Service updated',
-    message2: 'We have updated our terms and privacy policy.',
-    urlText: 'Read more',
-    urlHref: '#',
-    dismissible: true,
-  },
-};
-
-/**
- * Single message - alert with only primary message
- */
-export const SingleMessage: Story = {
-  args: {
-    type: 'success',
-    message1: 'Changes saved successfully',
-    dismissible: true,
-  },
-};
-
-/**
- * Non-dismissible - alert without close button
- */
-export const NonDismissible: Story = {
-  args: {
-    type: 'error',
-    message1: 'Critical system error',
-    message2: 'Please contact support immediately.',
-    dismissible: false,
-  },
-};
-
-/**
- * All alert types - showcase of all 5 alert types
- */
-export const AllTypes: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 16px; padding: 24px; background: #000;">
-      <rel-alert
-        type="info"
-        message1="Information alert"
-        message2="This is an informational message for the user."
-      ></rel-alert>
-
-      <rel-alert
-        type="success"
-        message1="Success alert"
-        message2="Operation completed successfully."
-      ></rel-alert>
-
-      <rel-alert
-        type="warning"
-        message1="Warning alert"
-        message2="Please review this important notice."
-      ></rel-alert>
-
-      <rel-alert
-        type="error"
-        message1="Error alert"
-        message2="An error occurred during the operation."
-      ></rel-alert>
-
-      <rel-alert
-        type="neutral"
-        message1="Neutral alert"
-        message2="This is a general message."
-      ></rel-alert>
-    </div>
-  `,
-};
-
-/**
- * Message variations - different message configurations
- */
-export const MessageVariations: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 16px; padding: 24px; background: #000;">
-      <rel-alert
-        type="info"
-        message1="Single message only"
-      ></rel-alert>
-
-      <rel-alert
-        type="success"
-        message1="Primary message"
-        message2="With secondary message"
-      ></rel-alert>
-
-      <rel-alert
-        type="warning"
-        message1="Message with link"
-        message2="Click the link below for more information."
-        urlText="Learn more"
-        urlHref="#"
-      ></rel-alert>
-    </div>
-  `,
-};
-
-/**
- * Dismissible variations - with and without close button
- */
-export const DismissibleVariations: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 16px; padding: 24px; background: #000;">
-      <rel-alert
-        type="info"
-        message1="Dismissible alert"
-        message2="Click the X to close this alert."
-        dismissible
-      ></rel-alert>
-
-      <rel-alert
-        type="error"
-        message1="Non-dismissible alert"
-        message2="This alert cannot be closed."
-        .dismissible="${false}"
-      ></rel-alert>
-    </div>
-  `,
-};
-
-/**
- * Real-world examples - practical use cases
- */
-export const RealWorldExamples: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 16px; padding: 24px; background: #000;">
-      <rel-alert
-        type="success"
-        message1="Account created successfully"
-        message2="Welcome to Reliability! Check your email for verification."
-        urlText="Go to dashboard"
-        urlHref="#"
-      ></rel-alert>
-
-      <rel-alert
-        type="warning"
-        message1="Storage almost full"
-        message2="You are using 95% of your storage limit."
-        urlText="Upgrade plan"
-        urlHref="#"
-      ></rel-alert>
-
-      <rel-alert
-        type="error"
-        message1="Network connection lost"
-        message2="Check your internet connection and try again."
-        .dismissible="${false}"
-      ></rel-alert>
-
-      <rel-alert
-        type="info"
-        message1="New version available"
-        message2="Version 2.0 is now available with new features."
-        urlText="See what's new"
-        urlHref="#"
-      ></rel-alert>
-    </div>
-  `,
-};
-
-/**
- * Non-dismissible info alert - informational alert without close button
- */
-export const NonDismissibleInfo: Story = {
-  args: {
-    type: 'info',
-    message1: 'System update in progress',
-    message2: 'Please do not close this window during the update.',
-    dismissible: false,
-  },
-};
-
-/**
- * Non-dismissible success alert - success message without close button
- */
-export const NonDismissibleSuccess: Story = {
-  args: {
-    type: 'success',
-    message1: 'Backup completed',
-    message2: 'All your data has been successfully backed up.',
-    dismissible: false,
-  },
-};
-
-/**
- * Non-dismissible warning alert - warning message without close button
- */
-export const NonDismissibleWarning: Story = {
-  args: {
-    type: 'warning',
-    message1: 'Scheduled maintenance',
-    message2: 'System will be unavailable from 2:00 AM to 4:00 AM.',
-    dismissible: false,
-  },
-};
-
-/**
- * Non-dismissible neutral alert - neutral message without close button
- */
-export const NonDismissibleNeutral: Story = {
-  args: {
-    type: 'neutral',
-    message1: 'Read-only mode active',
-    message2: 'You are currently viewing in read-only mode.',
-    dismissible: false,
-  },
-};
-
-/**
- * Success alert with link - success message with action link
- */
-export const SuccessWithLink: Story = {
-  args: {
-    type: 'success',
-    message1: 'Profile updated',
-    message2: 'Your profile information has been saved successfully.',
-    urlText: 'View profile',
-    urlHref: '#',
-    dismissible: true,
-  },
-};
-
-/**
- * Warning alert with link - warning message with action link
- */
-export const WarningWithLink: Story = {
-  args: {
-    type: 'warning',
-    message1: 'Password expires soon',
-    message2: 'Your password will expire in 3 days.',
-    urlText: 'Change password',
-    urlHref: '#',
-    dismissible: true,
-  },
-};
-
-/**
- * Error alert with link - error message with action link
- */
-export const ErrorWithLink: Story = {
-  args: {
-    type: 'error',
-    message1: 'Payment failed',
-    message2: 'There was an issue processing your payment.',
-    urlText: 'Try again',
-    urlHref: '#',
-    dismissible: true,
-  },
-};
-
-/**
- * Neutral alert with link - neutral message with action link
- */
-export const NeutralWithLink: Story = {
-  args: {
-    type: 'neutral',
-    message1: 'Cookie policy',
-    message2: 'We use cookies to improve your experience.',
-    urlText: 'Learn more',
-    urlHref: '#',
-    dismissible: true,
-  },
-};