@pure-ds/storybook 0.3.19 → 0.4.0

package/stories/components/PdsTabstrip.stories.js

@@ -288,10 +288,10 @@ const tabstripCategories = [
 
 export default {
   title: "Components/Pds Tabstrip",
-  tags: ['autodocs', 'grouping'],
+  tags: ['autodocs', 'tab', 'tabs', 'tabstrip', 'navigation', 'panels', 'grouping'],
   parameters: {
     pds: {
-      tags: ["navigation", "grouping", "layout"],
+      tags: ['tab', 'tabs', 'tabstrip', 'navigation', 'panels', 'grouping', 'layout', 'pds-tabstrip']
     },
     docs: docsParameters,
   },

package/stories/components/PdsToaster.stories.js

@@ -1,186 +1,186 @@
-import { html } from 'lit';
-
-const docsParameters = {
-  description: {
-    component: 'Toast notification system with auto-dismiss and stacking. Toast notifications appear in the top-right corner and auto-dismiss after a few seconds based on message length.'
-  }
-};
-
-if (typeof window !== 'undefined') {
-  import('../reference/reference-docs.js')
-    .then(({ createComponentDocsPage }) => {
-      docsParameters.page = createComponentDocsPage('pds-toaster');
-    })
-    .catch((error) => {
-      console.warn('storybook: docs page failed to load for pds-toaster', error);
-    });
-}
-
-const toasterStoryStyles = html`
-  <style>
-    .toaster-story-description {
-      margin: 0 0 var(--spacing-4);
-    }
-  </style>
-`;
-
-export default {
-  title: 'Components/Pds Toaster',
-  tags: ['autodocs'],
-  parameters: {
-    pds: {
-      tags: ['interaction', 'notifications']
-    },
-    docs: docsParameters
-  }
-};
-
-export const Default = () => {
-  setTimeout(() => {
-    const toaster = document.getElementById('demo-toaster');
-    
-    document.getElementById('toast-success')?.addEventListener('click', () => {
-      toaster?.toast('Your changes have been saved successfully!', { 
-        type: 'success'
-      });
-    });
-    
-    document.getElementById('toast-info')?.addEventListener('click', () => {
-      toaster?.toast('This is an informational message with helpful context.', { 
-        type: 'info'
-      });
-    });
-    
-    document.getElementById('toast-warning')?.addEventListener('click', () => {
-      toaster?.toast('Warning: This action cannot be undone!', { 
-        type: 'warning'
-      });
-    });
-    
-    document.getElementById('toast-error')?.addEventListener('click', () => {
-      toaster?.toast('Error: Something went wrong. Please try again.', { 
-        type: 'error'
-      });
-    });
-    
-    document.getElementById('toast-long')?.addEventListener('click', () => {
-      toaster?.toast(
-        'This is a longer toast notification message that demonstrates how the duration is automatically calculated based on the message length. The toast will stay visible longer to give you enough time to read the entire message.',
-        { type: 'info' }
-      );
-    });
-    
-    document.getElementById('toast-persistent')?.addEventListener('click', () => {
-      toaster?.toast(
-        'This is a persistent toast that won\'t auto-dismiss. Click the × to close it.',
-        { type: 'info', persistent: true }
-      );
-    });
-  }, 0);
-  
-  return html`
-    ${toasterStoryStyles}
-    <pds-toaster id="demo-toaster"></pds-toaster>
-    
-    <p class="toaster-story-description">
-      Toast notifications appear in the top-right corner and auto-dismiss after a few seconds. Click the buttons below to see them in action:
-    </p>
-    
-    <div class="flex flex-wrap gap-md">
-      <button id="toast-success" class="btn-primary btn-sm">
-        <pds-icon icon="check-circle" size="sm"></pds-icon>
-        Success
-      </button>
-      <button id="toast-info" class="btn-secondary btn-sm">
-        <pds-icon icon="info" size="sm"></pds-icon>
-        Info
-      </button>
-      <button id="toast-warning" class="btn-warning btn-sm">
-        <pds-icon icon="warning" size="sm"></pds-icon>
-        Warning
-      </button>
-      <button id="toast-error" class="btn-danger btn-sm">
-        <pds-icon icon="x-circle" size="sm"></pds-icon>
-        Error
-      </button>
-      <button id="toast-long" class="btn-outline btn-sm">
-        <pds-icon icon="clock" size="sm"></pds-icon>
-        Long
-      </button>
-      <button id="toast-persistent" class="btn-outline btn-sm">
-        <pds-icon icon="bell" size="sm"></pds-icon>
-        Persistent
-      </button>
-    </div>
-  `;
-};
-
-export const ViaEvents = () => {
-  setTimeout(() => {
-    const { PDS } = window;
-    
-    document.getElementById('event-success')?.addEventListener('click', () => {
-      PDS?.dispatchEvent(new CustomEvent('pds:toast', {
-        detail: { 
-          message: 'Operation completed successfully!', 
-          type: 'success'
-        }
-      }));
-    });
-    
-    document.getElementById('event-info')?.addEventListener('click', () => {
-      PDS?.dispatchEvent(new CustomEvent('pds:toast', {
-        detail: { 
-          message: 'New updates are available for your application.', 
-          type: 'info'
-        }
-      }));
-    });
-    
-    document.getElementById('event-warning')?.addEventListener('click', () => {
-      PDS?.dispatchEvent(new CustomEvent('pds:toast', {
-        detail: { 
-          message: 'Please review your changes before continuing.', 
-          type: 'warning'
-        }
-      }));
-    });
-    
-    document.getElementById('event-error')?.addEventListener('click', () => {
-      PDS?.dispatchEvent(new CustomEvent('pds:toast', {
-        detail: { 
-          message: 'Failed to connect to server. Check your network connection.', 
-          type: 'error'
-        }
-      }));
-    });
-  }, 0);
-  
-  return html`
-    ${toasterStoryStyles}
-    <pds-toaster id="event-toaster"></pds-toaster>
-    
-    <p class="toaster-story-description">
-      Toast notifications can also be triggered via PDS events. This is useful for global notifications from anywhere in your application.
-    </p>
-    
-    <div class="flex flex-wrap gap-md">
-      <button id="event-success" class="btn-primary btn-sm">
-        <pds-icon icon="check-circle" size="sm"></pds-icon>
-        Success Event
-      </button>
-      <button id="event-info" class="btn-secondary btn-sm">
-        <pds-icon icon="info" size="sm"></pds-icon>
-        Info Event
-      </button>
-      <button id="event-warning" class="btn-warning btn-sm">
-        <pds-icon icon="warning" size="sm"></pds-icon>
-        Warning Event
-      </button>
-      <button id="event-error" class="btn-danger btn-sm">
-        <pds-icon icon="x-circle" size="sm"></pds-icon>
-        Error Event
-      </button>
-    </div>
-  `;
-};
+import { html } from 'lit';
+
+const docsParameters = {
+  description: {
+    component: 'Toast notification system with auto-dismiss and stacking. Toast notifications appear in the top-right corner and auto-dismiss after a few seconds based on message length.'
+  }
+};
+
+if (typeof window !== 'undefined') {
+  import('../reference/reference-docs.js')
+    .then(({ createComponentDocsPage }) => {
+      docsParameters.page = createComponentDocsPage('pds-toaster');
+    })
+    .catch((error) => {
+      console.warn('storybook: docs page failed to load for pds-toaster', error);
+    });
+}
+
+const toasterStoryStyles = html`
+  <style>
+    .toaster-story-description {
+      margin: 0 0 var(--spacing-4);
+    }
+  </style>
+`;
+
+export default {
+  title: 'Components/Pds Toaster',
+  tags: ['autodocs', 'toast', 'toaster', 'notification', 'alert', 'message', 'feedback'],
+  parameters: {
+    pds: {
+      tags: ['toast', 'toaster', 'notification', 'alert', 'message', 'feedback', 'pds-toaster', 'interaction']
+    },
+    docs: docsParameters
+  }
+};
+
+export const Default = () => {
+  setTimeout(() => {
+    const toaster = document.getElementById('demo-toaster');
+    
+    document.getElementById('toast-success')?.addEventListener('click', () => {
+      toaster?.toast('Your changes have been saved successfully!', { 
+        type: 'success'
+      });
+    });
+    
+    document.getElementById('toast-info')?.addEventListener('click', () => {
+      toaster?.toast('This is an informational message with helpful context.', { 
+        type: 'info'
+      });
+    });
+    
+    document.getElementById('toast-warning')?.addEventListener('click', () => {
+      toaster?.toast('Warning: This action cannot be undone!', { 
+        type: 'warning'
+      });
+    });
+    
+    document.getElementById('toast-error')?.addEventListener('click', () => {
+      toaster?.toast('Error: Something went wrong. Please try again.', { 
+        type: 'error'
+      });
+    });
+    
+    document.getElementById('toast-long')?.addEventListener('click', () => {
+      toaster?.toast(
+        'This is a longer toast notification message that demonstrates how the duration is automatically calculated based on the message length. The toast will stay visible longer to give you enough time to read the entire message.',
+        { type: 'info' }
+      );
+    });
+    
+    document.getElementById('toast-persistent')?.addEventListener('click', () => {
+      toaster?.toast(
+        'This is a persistent toast that won\'t auto-dismiss. Click the × to close it.',
+        { type: 'info', persistent: true }
+      );
+    });
+  }, 0);
+  
+  return html`
+    ${toasterStoryStyles}
+    <pds-toaster id="demo-toaster"></pds-toaster>
+    
+    <p class="toaster-story-description">
+      Toast notifications appear in the top-right corner and auto-dismiss after a few seconds. Click the buttons below to see them in action:
+    </p>
+    
+    <div class="flex flex-wrap gap-md">
+      <button id="toast-success" class="btn-primary btn-sm">
+        <pds-icon icon="check-circle" size="sm"></pds-icon>
+        Success
+      </button>
+      <button id="toast-info" class="btn-secondary btn-sm">
+        <pds-icon icon="info" size="sm"></pds-icon>
+        Info
+      </button>
+      <button id="toast-warning" class="btn-warning btn-sm">
+        <pds-icon icon="warning" size="sm"></pds-icon>
+        Warning
+      </button>
+      <button id="toast-error" class="btn-danger btn-sm">
+        <pds-icon icon="x-circle" size="sm"></pds-icon>
+        Error
+      </button>
+      <button id="toast-long" class="btn-outline btn-sm">
+        <pds-icon icon="clock" size="sm"></pds-icon>
+        Long
+      </button>
+      <button id="toast-persistent" class="btn-outline btn-sm">
+        <pds-icon icon="bell" size="sm"></pds-icon>
+        Persistent
+      </button>
+    </div>
+  `;
+};
+
+export const ViaEvents = () => {
+  setTimeout(() => {
+    const { PDS } = window;
+    
+    document.getElementById('event-success')?.addEventListener('click', () => {
+      PDS?.dispatchEvent(new CustomEvent('pds:toast', {
+        detail: { 
+          message: 'Operation completed successfully!', 
+          type: 'success'
+        }
+      }));
+    });
+    
+    document.getElementById('event-info')?.addEventListener('click', () => {
+      PDS?.dispatchEvent(new CustomEvent('pds:toast', {
+        detail: { 
+          message: 'New updates are available for your application.', 
+          type: 'info'
+        }
+      }));
+    });
+    
+    document.getElementById('event-warning')?.addEventListener('click', () => {
+      PDS?.dispatchEvent(new CustomEvent('pds:toast', {
+        detail: { 
+          message: 'Please review your changes before continuing.', 
+          type: 'warning'
+        }
+      }));
+    });
+    
+    document.getElementById('event-error')?.addEventListener('click', () => {
+      PDS?.dispatchEvent(new CustomEvent('pds:toast', {
+        detail: { 
+          message: 'Failed to connect to server. Check your network connection.', 
+          type: 'error'
+        }
+      }));
+    });
+  }, 0);
+  
+  return html`
+    ${toasterStoryStyles}
+    <pds-toaster id="event-toaster"></pds-toaster>
+    
+    <p class="toaster-story-description">
+      Toast notifications can also be triggered via PDS events. This is useful for global notifications from anywhere in your application.
+    </p>
+    
+    <div class="flex flex-wrap gap-md">
+      <button id="event-success" class="btn-primary btn-sm">
+        <pds-icon icon="check-circle" size="sm"></pds-icon>
+        Success Event
+      </button>
+      <button id="event-info" class="btn-secondary btn-sm">
+        <pds-icon icon="info" size="sm"></pds-icon>
+        Info Event
+      </button>
+      <button id="event-warning" class="btn-warning btn-sm">
+        <pds-icon icon="warning" size="sm"></pds-icon>
+        Warning Event
+      </button>
+      <button id="event-error" class="btn-danger btn-sm">
+        <pds-icon icon="x-circle" size="sm"></pds-icon>
+        Error Event
+      </button>
+    </div>
+  `;
+};

package/stories/components/PdsUpload.stories.js

@@ -1,66 +1,66 @@
-import { html } from 'lit';
-
-const docsParameters = {
-  description: {
-    component: 'File upload with preview and validation'
-  }
-};
-
-if (typeof window !== 'undefined') {
-  import('../reference/reference-docs.js')
-    .then(({ createComponentDocsPage }) => {
-      docsParameters.page = createComponentDocsPage('pds-upload');
-    })
-    .catch((error) => {
-      console.warn('storybook: docs page failed to load for pds-upload', error);
-    });
-}
-
-export default {
-  title: 'Components/Pds Upload',
-  tags: ['autodocs'],
-  parameters: {
-    pds: {
-      tags: ['forms']
-    },
-    docs: docsParameters
-  },
-  argTypes: {
-    accept: {
-      control: 'text',
-      description: 'Accepted file types (MIME or extensions)'
-    },
-    multiple: {
-      control: 'boolean',
-      description: 'Allow multiple file selection'
-    },
-    maxSize: {
-      control: 'number',
-      description: 'Max file size in bytes'
-    }
-  }
-};
-
-export const Default = {
-  render: (args) => html`
-    <pds-upload 
-      accept="${args.accept}"
-      ?multiple="${args.multiple}"
-      max-size="${args.maxSize}"
-      @files-changed="${(e) => toastFormData(e.detail)}">
-    </pds-upload>
-  `,
-  args: {
-    accept: 'image/*',
-    multiple: true,
-    maxSize: 5000000
-  }
-};
-
-export const SingleFile = () => html`
-  <pds-upload accept="application/pdf" max-size="10000000"></pds-upload>
-`;
-
-export const WithPreview = () => html`
-  <pds-upload accept="image/*" multiple max-files="5"></pds-upload>
-`;
+import { html } from 'lit';
+
+const docsParameters = {
+  description: {
+    component: 'File upload with preview and validation'
+  }
+};
+
+if (typeof window !== 'undefined') {
+  import('../reference/reference-docs.js')
+    .then(({ createComponentDocsPage }) => {
+      docsParameters.page = createComponentDocsPage('pds-upload');
+    })
+    .catch((error) => {
+      console.warn('storybook: docs page failed to load for pds-upload', error);
+    });
+}
+
+export default {
+  title: 'Components/Pds Upload',
+  tags: ['autodocs', 'upload', 'file', 'dropzone', 'input', 'forms'],
+  parameters: {
+    pds: {
+      tags: ['upload', 'file', 'dropzone', 'input', 'pds-upload', 'forms']
+    },
+    docs: docsParameters
+  },
+  argTypes: {
+    accept: {
+      control: 'text',
+      description: 'Accepted file types (MIME or extensions)'
+    },
+    multiple: {
+      control: 'boolean',
+      description: 'Allow multiple file selection'
+    },
+    maxSize: {
+      control: 'number',
+      description: 'Max file size in bytes'
+    }
+  }
+};
+
+export const Default = {
+  render: (args) => html`
+    <pds-upload 
+      accept="${args.accept}"
+      ?multiple="${args.multiple}"
+      max-size="${args.maxSize}"
+      @files-changed="${(e) => toastFormData(e.detail)}">
+    </pds-upload>
+  `,
+  args: {
+    accept: 'image/*',
+    multiple: true,
+    maxSize: 5000000
+  }
+};
+
+export const SingleFile = () => html`
+  <pds-upload accept="application/pdf" max-size="10000000"></pds-upload>
+`;
+
+export const WithPreview = () => html`
+  <pds-upload accept="image/*" multiple max-files="5"></pds-upload>
+`;