@pure-ds/storybook 0.1.0

package/stories/primitives/Buttons.stories.js

@@ -0,0 +1,229 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Primitives/Buttons',
+  tags: ['buttons', 'interaction'],
+  parameters: {
+    pds: {
+      tags: ['buttons', 'interaction']
+    },
+    docs: {
+      description: {
+        component: 'Button primitives with variants, sizes, and icon support. All buttons automatically adapt to your theme with proper focus states and accessibility.'
+      }
+    }
+  }
+};
+
+const buttonsStoryStyles = html`
+  <style>
+    .buttons-story-section {
+      padding: var(--spacing-4);
+    }
+    .buttons-story-heading-spacer {
+      margin-top: var(--spacing-6);
+    }
+    .buttons-story-helper {
+      margin-bottom: var(--spacing-4);
+      opacity: 0.8;
+    }
+    .buttons-story-row {
+      margin-bottom: var(--spacing-4);
+    }
+  </style>
+`;
+
+export const ButtonVariants = () => html`
+  ${buttonsStoryStyles}
+  <div class="buttons-story-section">
+    <h3>Button Variants</h3>
+    <div class="flex gap-sm flex-wrap">
+      <button class="btn-primary">Primary</button>
+      <button class="btn-secondary">Secondary</button>
+      <button class="btn-outline">Outline</button>
+      <button class="btn-primary" disabled>Disabled</button>
+    </div>
+  </div>
+`;
+
+ButtonVariants.storyName = 'Button Variants';
+
+export const ButtonSizes = () => html`
+  ${buttonsStoryStyles}
+  <div class="buttons-story-section">
+    <h3>Button Sizes</h3>
+    <div class="flex gap-sm flex-wrap items-center">
+      <button class="btn-primary btn-sm">Small</button>
+      <button class="btn-primary">Default</button>
+      <button class="btn-primary btn-lg">Large</button>
+    </div>
+  </div>
+`;
+
+ButtonSizes.storyName = 'Button Sizes';
+
+export const IconButtons = () => html`
+  ${buttonsStoryStyles}
+  <div class="buttons-story-section">
+    <h3>Buttons with Icons</h3>
+    <div class="flex gap-sm flex-wrap">
+      <button class="btn-primary">
+        <pds-icon icon="download"></pds-icon>
+        <span>Download</span>
+      </button>
+      <button class="btn-secondary">
+        <pds-icon icon="gear"></pds-icon>
+        <span>Settings</span>
+      </button>
+      <button class="btn-outline">
+        <pds-icon icon="bell"></pds-icon>
+        <span>Notifications</span>
+      </button>
+      <button class="btn-primary">
+        <pds-icon icon="heart"></pds-icon>
+        <span>Favorite</span>
+      </button>
+    </div>
+
+    <h3 class="buttons-story-heading-spacer">Icon on Right</h3>
+    <div class="flex gap-sm flex-wrap">
+      <button class="btn-primary">
+        <span>Next</span>
+        <pds-icon icon="arrow-right"></pds-icon>
+      </button>
+      <button class="btn-secondary">
+        <span>Previous</span>
+        <pds-icon icon="arrow-left"></pds-icon>
+      </button>
+    </div>
+  </div>
+`;
+
+IconButtons.storyName = 'Buttons with Icons';
+
+export const IconOnlyButtons = () => html`
+  ${buttonsStoryStyles}
+  <div class="buttons-story-section">
+    <h3>Icon-Only Buttons</h3>
+    <p class="buttons-story-helper">
+      Use <code>.icon-only</code> class for square icon buttons
+    </p>
+    
+    <div class="flex gap-sm flex-wrap">
+      <button class="icon-only btn-primary">
+        <pds-icon icon="gear" label="Settings"></pds-icon>
+      </button>
+      <button class="icon-only btn-secondary">
+        <pds-icon icon="bell" label="Notifications"></pds-icon>
+      </button>
+      <button class="icon-only btn-outline">
+        <pds-icon icon="heart" label="Favorite"></pds-icon>
+      </button>
+      <button class="icon-only btn-primary">
+        <pds-icon icon="trash" label="Delete"></pds-icon>
+      </button>
+      <button class="icon-only btn-secondary">
+        <pds-icon icon="pencil" label="Edit"></pds-icon>
+      </button>
+      <button class="icon-only btn-outline">
+        <pds-icon icon="copy" label="Copy"></pds-icon>
+      </button>
+    </div>
+
+    <h3 class="buttons-story-heading-spacer">Icon-Only Sizes</h3>
+    <div class="flex gap-sm flex-wrap items-center">
+      <button class="icon-only btn-primary btn-sm">
+        <pds-icon icon="plus" size="sm" label="Add"></pds-icon>
+      </button>
+      <button class="icon-only btn-primary">
+        <pds-icon icon="plus" label="Add"></pds-icon>
+      </button>
+      <button class="icon-only btn-primary btn-lg">
+        <pds-icon icon="plus" size="lg" label="Add"></pds-icon>
+      </button>
+    </div>
+  </div>
+`;
+
+IconOnlyButtons.storyName = 'Icon-Only Buttons';
+
+export const ButtonGroups = () => html`
+  ${buttonsStoryStyles}
+  <div class="buttons-story-section">
+    <h3>Button Groups</h3>
+    <div class="btn-group">
+      <button class="btn-primary">
+        <pds-icon icon="download"></pds-icon>
+        Get Started
+      </button>
+      <button class="btn-secondary">
+        <pds-icon icon="book-open"></pds-icon>
+        View Docs
+      </button>
+    </div>
+
+    <h3 class="buttons-story-heading-spacer">Icon-Only Group</h3>
+    <div class="btn-group">
+      <button class="icon-only btn-outline">
+        <pds-icon icon="text-align-left" label="Align left"></pds-icon>
+      </button>
+      <button class="icon-only btn-outline">
+        <pds-icon icon="text-align-center" label="Align center"></pds-icon>
+      </button>
+      <button class="icon-only btn-outline">
+        <pds-icon icon="text-align-right" label="Align right"></pds-icon>
+      </button>
+    </div>
+  </div>
+`;
+
+ButtonGroups.storyName = 'Button Groups';
+
+export const AllSizesCombinations = () => html`
+  ${buttonsStoryStyles}
+  <div class="buttons-story-section">
+    <h3>Small Buttons</h3>
+    <div class="flex gap-sm flex-wrap buttons-story-row">
+      <button class="btn-primary btn-sm">Primary</button>
+      <button class="btn-secondary btn-sm">Secondary</button>
+      <button class="btn-outline btn-sm">Outline</button>
+      <button class="btn-primary btn-sm">
+        <pds-icon icon="heart" size="sm"></pds-icon>
+        With Icon
+      </button>
+      <button class="icon-only btn-primary btn-sm">
+        <pds-icon icon="gear" size="sm" label="Settings"></pds-icon>
+      </button>
+    </div>
+
+    <h3>Default Buttons</h3>
+    <div class="flex gap-sm flex-wrap buttons-story-row">
+      <button class="btn-primary">Primary</button>
+      <button class="btn-secondary">Secondary</button>
+      <button class="btn-outline">Outline</button>
+      <button class="btn-primary">
+        <pds-icon icon="heart"></pds-icon>
+        With Icon
+      </button>
+      <button class="icon-only btn-primary">
+        <pds-icon icon="gear" label="Settings"></pds-icon>
+      </button>
+    </div>
+
+    <h3>Large Buttons</h3>
+    <div class="flex gap-sm flex-wrap">
+      <button class="btn-primary btn-lg">Primary</button>
+      <button class="btn-secondary btn-lg">Secondary</button>
+      <button class="btn-outline btn-lg">Outline</button>
+      <button class="btn-primary btn-lg">
+        <pds-icon icon="heart" size="lg"></pds-icon>
+        With Icon
+      </button>
+      <button class="icon-only btn-primary btn-lg">
+        <pds-icon icon="gear" size="lg" label="Settings"></pds-icon>
+      </button>
+    </div>
+  </div>
+`;
+
+AllSizesCombinations.storyName = 'All Sizes & Combinations';

package/stories/primitives/Cards.stories.js

@@ -0,0 +1,353 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Primitives/Cards',
+  tags: ['cards', 'layout', 'spacing', 'surface', 'colors'],
+  parameters: {
+    pds: {
+      tags: ['cards', 'layout', 'spacing', 'surface', 'colors']
+    },
+    docs: {
+      description: {
+        component: 'Versatile content containers with multiple surface variants. Cards automatically adapt to your theme and support nesting for complex layouts.'
+      }
+    }
+  }
+};
+
+const cardsStoryStyles = html`
+  <style>
+    .cards-story-section {
+      padding: var(--spacing-4);
+    }
+    .cards-basic-grid {
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    }
+    .cards-surface-grid {
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    }
+    .cards-helper {
+      margin-bottom: var(--spacing-4);
+      opacity: 0.8;
+    }
+    .cards-inline-actions {
+      margin-top: var(--spacing-3);
+    }
+    .cards-nested-shell {
+      max-width: 37.5rem;
+    }
+    .cards-nested-spacing {
+      margin-top: var(--spacing-4);
+    }
+    .cards-nested-deep {
+      margin-top: var(--spacing-3);
+    }
+    .cards-parent-action {
+      margin-top: var(--spacing-4);
+    }
+    .cards-horizontal-card {
+      max-width: 37.5rem;
+      margin-bottom: var(--spacing-6);
+    }
+    .cards-horizontal-media {
+      flex-shrink: 0;
+      width: 7.5rem;
+      height: 7.5rem;
+      background: var(--color-primary);
+      border-radius: var(--radius-md);
+    }
+    .cards-horizontal-icon {
+      color: white;
+      opacity: 0.6;
+    }
+    .cards-horizontal-body {
+      flex: 1;
+    }
+    .cards-grid-visuals {
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    }
+    .cards-visual-block {
+      height: 100px;
+      border-radius: var(--radius-sm);
+      margin-bottom: var(--spacing-3);
+    }
+    .cards-gradient-one {
+      background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
+    }
+    .cards-gradient-two {
+      background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
+    }
+    .cards-gradient-three {
+      background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
+    }
+    .cards-small-copy {
+      font-size: 0.9rem;
+    }
+    .cards-complex-grid {
+      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    }
+    .cards-profile-header {
+      margin-bottom: var(--spacing-4);
+    }
+    .cards-profile-avatar {
+      width: 48px;
+      height: 48px;
+      background: var(--color-primary);
+      border-radius: 50%;
+    }
+    .cards-profile-avatar pds-icon {
+      color: white;
+    }
+    .cards-profile-title {
+      margin: 0;
+    }
+    .cards-profile-meta {
+      margin: 0;
+      font-size: 0.85rem;
+      opacity: 0.7;
+    }
+    .cards-profile-actions {
+      margin-top: var(--spacing-4);
+    }
+    .cards-premium-header {
+      margin-bottom: var(--spacing-3);
+    }
+    .cards-pro-badge {
+      padding: var(--spacing-1) var(--spacing-2);
+      background: var(--color-primary);
+      color: white;
+      border-radius: var(--radius-full);
+      font-size: 0.75rem;
+      font-weight: 600;
+    }
+    .cards-premium-list {
+      margin: var(--spacing-3) 0;
+    }
+    .cards-stats-grid {
+      margin: var(--spacing-4) 0;
+    }
+    .cards-stat-value {
+      font-size: 2rem;
+      font-weight: 700;
+    }
+    .cards-stat-value.primary {
+      color: var(--color-primary);
+    }
+    .cards-stat-value.secondary {
+      color: var(--color-secondary);
+    }
+    .cards-stat-label {
+      font-size: 0.85rem;
+      opacity: 0.7;
+    }
+  </style>
+`;
+
+export const BasicCards = () => html`
+  ${cardsStoryStyles}
+  <div class="cards-story-section">
+    <h3>Basic Cards</h3>
+    <div class="grid gap-md cards-basic-grid">
+      <article class="card">
+        <h3>Default Card</h3>
+        <p>Card content goes here. This is a basic card primitive with automatic theming.</p>
+        <button class="btn-primary">Action</button>
+      </article>
+      
+      <article class="card">
+        <h3>With Icon</h3>
+        <div class="flex items-start gap-sm">
+          <pds-icon icon="star" size="lg" class="icon-primary"></pds-icon>
+          <div>
+            <p>Cards can contain icons, buttons, forms, and any other content.</p>
+          </div>
+        </div>
+        <button class="btn-outline">Learn More</button>
+      </article>
+
+      <article class="card">
+        <h3>Interactive Card</h3>
+        <p>With multiple actions and rich content.</p>
+        <div class="flex gap-sm cards-inline-actions">
+          <button class="btn-primary btn-sm">
+            <pds-icon icon="heart" size="sm"></pds-icon>
+            Like
+          </button>
+          <button class="btn-secondary btn-sm">
+            <pds-icon icon="share" size="sm"></pds-icon>
+            Share
+          </button>
+          <button class="icon-only btn-outline btn-sm">
+            <pds-icon icon="bookmark" size="sm" label="Bookmark"></pds-icon>
+          </button>
+        </div>
+      </article>
+    </div>
+  </div>
+`;
+
+BasicCards.storyName = 'Basic Cards';
+
+export const SurfaceVariants = () => html`
+  ${cardsStoryStyles}
+  <div class="cards-story-section">
+    <h3>Surface Variants</h3>
+    <p class="cards-helper">
+      Different surface levels create visual hierarchy
+    </p>
+    
+    <div class="grid gap-md cards-surface-grid">
+      <article class="card">
+        <h4>Default Surface</h4>
+        <p>Standard card surface level. Use for most content containers.</p>
+        <code>.card</code>
+      </article>
+
+      <article class="card surface-elevated">
+        <h4>Elevated Surface</h4>
+        <p>Appears raised above the default surface. Great for important content or hover states.</p>
+        <code>.surface-elevated</code>
+      </article>
+
+      <article class="card surface-overlay">
+        <h4>Overlay Surface</h4>
+        <p>Highest surface level. Perfect for modal dialogs and floating panels.</p>
+        <code>.surface-overlay</code>
+      </article>
+    </div>
+  </div>
+`;
+
+SurfaceVariants.storyName = 'Surface Variants';
+
+export const NestedCards = () => html`
+  ${cardsStoryStyles}
+  <div class="cards-story-section">
+    <h3>Nested Cards</h3>
+    <p class="cards-helper">
+      Surface variants enable natural nesting without visual confusion
+    </p>
+    
+    <article class="card cards-nested-shell">
+      <h3>Parent Card (Default Surface)</h3>
+      <p>This is the outer container using the default card surface.</p>
+
+      <div class="cards-nested-spacing">
+        <article class="card surface-elevated">
+          <h4>Nested Card (Elevated)</h4>
+          <p>This card is nested inside the parent and uses the elevated surface for clear visual separation.</p>
+          
+          <div class="cards-nested-deep">
+            <article class="card surface-overlay">
+              <h5>Deeply Nested (Overlay)</h5>
+              <p class="cards-small-copy">Even deeper nesting maintains readability with the overlay surface.</p>
+            </article>
+          </div>
+        </article>
+      </div>
+
+      <button class="btn-primary cards-parent-action">Parent Action</button>
+    </article>
+  </div>
+`;
+
+NestedCards.storyName = 'Nested Cards';
+
+export const CardLayouts = () => html`
+  ${cardsStoryStyles}
+  <div class="cards-story-section">
+    <h3>Horizontal Card</h3>
+    <article class="card flex gap-md cards-horizontal-card">
+      <div class="flex items-center justify-center cards-horizontal-media">
+        <pds-icon icon="image" size="xl" class="cards-horizontal-icon"></pds-icon>
+      </div>
+      <div class="cards-horizontal-body">
+        <h4>Horizontal Layout</h4>
+        <p>Cards work great with flexbox for horizontal layouts.</p>
+        <button class="btn-outline btn-sm">View Details</button>
+      </div>
+    </article>
+
+    <h3>Card Grid</h3>
+    <div class="grid gap-sm cards-grid-visuals">
+      <article class="card">
+        <div class="cards-visual-block cards-gradient-one"></div>
+        <h4>Card 1</h4>
+        <p class="cards-small-copy">Grid layout with cards.</p>
+      </article>
+      <article class="card">
+        <div class="cards-visual-block cards-gradient-two"></div>
+        <h4>Card 2</h4>
+        <p class="cards-small-copy">Responsive and flexible.</p>
+      </article>
+      <article class="card">
+        <div class="cards-visual-block cards-gradient-three"></div>
+        <h4>Card 3</h4>
+        <p class="cards-small-copy">Auto-fits to space.</p>
+      </article>
+    </div>
+  </div>
+`;
+
+CardLayouts.storyName = 'Card Layouts';
+
+export const ComplexCards = () => html`
+  ${cardsStoryStyles}
+  <div class="cards-story-section">
+    <h3>Complex Card Examples</h3>
+    <div class="grid gap-md cards-complex-grid">
+      
+      <article class="card">
+        <div class="flex items-center gap-sm cards-profile-header">
+          <div class="flex items-center justify-center cards-profile-avatar">
+            <pds-icon icon="user"></pds-icon>
+          </div>
+          <div>
+            <h4 class="cards-profile-title">User Profile</h4>
+            <p class="cards-profile-meta">@username</p>
+          </div>
+        </div>
+        <p>Profile description goes here with some interesting details about the user.</p>
+        <div class="flex gap-sm cards-profile-actions">
+          <button class="btn-primary btn-sm">Follow</button>
+          <button class="btn-outline btn-sm">Message</button>
+        </div>
+      </article>
+
+      <article class="card surface-elevated">
+        <div class="flex justify-between items-start cards-premium-header">
+          <h4>Premium Feature</h4>
+          <span class="cards-pro-badge">PRO</span>
+        </div>
+        <p>This elevated card highlights a premium feature with a badge and special styling.</p>
+        <ul class="cards-premium-list">
+          <li>Feature benefit one</li>
+          <li>Feature benefit two</li>
+          <li>Feature benefit three</li>
+        </ul>
+        <button class="btn-primary">
+          <pds-icon icon="star"></pds-icon>
+          Upgrade Now
+        </button>
+      </article>
+
+      <article class="card">
+        <h4>Stats Card</h4>
+        <div class="grid grid-cols-2 gap-md cards-stats-grid">
+          <div>
+            <div class="cards-stat-value primary">1.2K</div>
+            <div class="cards-stat-label">Followers</div>
+          </div>
+          <div>
+            <div class="cards-stat-value secondary">847</div>
+            <div class="cards-stat-label">Following</div>
+          </div>
+        </div>
+        <button class="btn-outline btn-sm">View All</button>
+      </article>
+
+    </div>
+  </div>
+`;
+
+ComplexCards.storyName = 'Complex Cards';