@pure-ds/storybook 0.1.0

package/stories/enhancements/MeshGradients.stories.js

@@ -0,0 +1,320 @@
+import { html } from 'lit';
+
+const meshGradientStoryStyles = html`
+  <style>
+    .mesh-story {
+      padding: var(--spacing-4);
+      display: grid;
+      gap: var(--spacing-6);
+    }
+
+    .mesh-story__intro {
+      margin: 0 0 var(--spacing-6);
+    }
+
+    .mesh-story__grid {
+      display: grid;
+      gap: var(--spacing-6);
+    }
+
+    .mesh-story__grid--featured {
+      grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
+    }
+
+    .mesh-story__grid--tiles {
+      grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
+      gap: var(--spacing-4);
+    }
+
+    .mesh-story__panel,
+    .mesh-story__surface {
+      border-radius: var(--radius-lg);
+      border: 1px solid var(--color-border);
+    }
+
+    .mesh-story__panel {
+      position: relative;
+      padding: var(--spacing-6);
+      min-height: 12.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .mesh-story__panel--mesh-01 {
+      background: var(--background-mesh-01);
+    }
+
+    .mesh-story__panel--mesh-02 {
+      background: var(--background-mesh-02);
+    }
+
+    .mesh-story__inner {
+      background: var(--color-surface-base);
+      padding: var(--spacing-4);
+      border-radius: var(--radius-md);
+      box-shadow: var(--shadow-md);
+      text-align: center;
+      display: grid;
+      gap: var(--spacing-2);
+    }
+
+    .mesh-story__inner-heading {
+      margin: 0;
+    }
+
+    .mesh-story__inner-subtitle {
+      margin: 0;
+      opacity: 0.7;
+    }
+
+    .mesh-story__tile {
+      position: relative;
+      padding: var(--spacing-5);
+      border-radius: var(--radius-md);
+      min-height: 9.375rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      border: 1px solid var(--color-border);
+    }
+
+    .mesh-story__tile--mesh-03 {
+      background: var(--background-mesh-03);
+    }
+
+    .mesh-story__tile--mesh-04 {
+      background: var(--background-mesh-04);
+    }
+
+    .mesh-story__tile--mesh-05 {
+      background: var(--background-mesh-05);
+    }
+
+    .mesh-story__tile-icon {
+      opacity: 0.9;
+      margin-bottom: var(--spacing-2);
+    }
+
+    .mesh-story__tile-code {
+      font-size: 0.75rem;
+    }
+
+    .mesh-story__subheading {
+      margin: var(--spacing-6) 0 var(--spacing-2);
+    }
+
+    .mesh-story__hero {
+      background: var(--background-mesh-01);
+      padding: var(--spacing-8);
+      text-align: center;
+    }
+
+    .mesh-story__hero-text {
+      font-size: 1.25rem;
+      margin-top: var(--spacing-3);
+    }
+
+    .mesh-story__hero-actions {
+      display: flex;
+      justify-content: center;
+      gap: var(--spacing-3);
+      margin-top: var(--spacing-4);
+    }
+
+    .mesh-story__card-surface {
+      background: var(--background-mesh-03);
+      padding: var(--spacing-6);
+    }
+
+    .mesh-story__card-overlay {
+      padding: var(--spacing-6);
+      max-width: 31.25rem;
+    }
+
+    .mesh-story__action-button {
+      margin-top: var(--spacing-3);
+    }
+
+    .mesh-story__grid-surface {
+      background: var(--background-mesh-05);
+      padding: var(--spacing-6);
+    }
+
+    .mesh-story__feature-card {
+      padding: var(--spacing-5);
+      text-align: center;
+    }
+
+    .mesh-story__feature-heading {
+      margin-top: var(--spacing-2);
+    }
+
+    .mesh-story__code-block {
+      background: var(--color-surface-subtle);
+      padding: var(--spacing-4);
+      border-radius: var(--radius-md);
+      overflow-x: auto;
+    }
+
+    .mesh-story__list {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    .mesh-story__list-item {
+      padding: var(--spacing-2);
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    .mesh-story__list-item:last-child {
+      border-bottom: 0;
+    }
+  </style>
+`;
+
+const featuredMeshCards = [
+  {
+    key: 'mesh-01',
+    title: 'Mesh 01',
+    description: 'Subtle radial blend'
+  },
+  {
+    key: 'mesh-02',
+    title: 'Mesh 02',
+    description: 'Corner accents'
+  }
+];
+
+const meshTileBackgrounds = ['mesh-03', 'mesh-04', 'mesh-05'];
+
+const meshVariableList = ['mesh-01', 'mesh-02', 'mesh-03', 'mesh-04', 'mesh-05'];
+
+export default {
+  title: 'Enhancements/Mesh Gradients',
+  parameters: {
+    pds: {
+      tags: ['colors']
+    },
+    docs: {
+      description: {
+        component: 'Beautiful mesh gradient backgrounds generated from your color palette. Automatically adapts to light and dark modes with 5 different variations.'
+      }
+    }
+  }
+};
+
+export const AllMeshGradients = () => html`
+  ${meshGradientStoryStyles}
+  <section class="mesh-story">
+    <h2>Mesh Gradient Backgrounds</h2>
+    <p class="mesh-story__intro">
+      Subtle, beautiful mesh gradient backgrounds using <code>--background-mesh-01</code> through <code>--background-mesh-05</code>. Toggle dark mode to see automatic adaptation.
+    </p>
+    <div class="mesh-story__grid mesh-story__grid--featured">
+      ${featuredMeshCards.map(({ key, title, description }) => html`
+        <div class="mesh-story__panel mesh-story__panel--${key}">
+          <div class="mesh-story__inner">
+            <h4 class="mesh-story__inner-heading">${title}</h4>
+            <p class="mesh-story__inner-subtitle">${description}</p>
+          </div>
+        </div>
+      `)}
+    </div>
+    <div class="mesh-story__grid mesh-story__grid--tiles">
+      ${meshTileBackgrounds.map((meshKey) => html`
+        <div class="mesh-story__tile mesh-story__tile--${meshKey}">
+          <pds-icon icon="sparkle" size="xl" class="mesh-story__tile-icon"></pds-icon>
+          <code class="mesh-story__tile-code">${meshKey}</code>
+        </div>
+      `)}
+    </div>
+  </section>
+`;
+
+AllMeshGradients.storyName = 'All Mesh Gradients';
+
+export const MeshUsageExamples = () => html`
+  ${meshGradientStoryStyles}
+  <section class="mesh-story">
+    <h2>Usage Examples</h2>
+
+    <h3 class="mesh-story__subheading">Hero Section</h3>
+    <div class="mesh-story__surface mesh-story__hero">
+      <h1>Welcome to Pure Design System</h1>
+      <p class="mesh-story__hero-text">
+        Beautiful backgrounds generated from your color palette
+      </p>
+      <div class="mesh-story__hero-actions">
+        <button class="btn-primary btn-lg">Get Started</button>
+        <button class="btn-secondary btn-lg">Learn More</button>
+      </div>
+    </div>
+
+    <h3 class="mesh-story__subheading">Card with Mesh Background</h3>
+    <div class="mesh-story__surface mesh-story__card-surface">
+      <div class="card surface-elevated mesh-story__card-overlay">
+        <h4>Layered Design</h4>
+        <p>Mesh gradients work beautifully as backgrounds with overlaid content using surface tokens.</p>
+        <button class="btn-primary mesh-story__action-button">
+          <pds-icon icon="rocket"></pds-icon>
+          Take Action
+        </button>
+      </div>
+    </div>
+
+    <h3 class="mesh-story__subheading">Grid Layout with Mesh</h3>
+    <div class="mesh-story__surface mesh-story__grid-surface">
+      <div class="grid grid-cols-3 gap-md">
+        ${Array.from({ length: 3 }, (_, index) => html`
+          <div class="card surface-base mesh-story__feature-card">
+            <pds-icon icon="star" size="xl" class="icon-accent"></pds-icon>
+            <h5 class="mesh-story__feature-heading">Feature ${index + 1}</h5>
+            <p>Mesh backgrounds create visual interest without overwhelming content</p>
+          </div>
+        `)}
+      </div>
+    </div>
+  </section>
+`;
+
+MeshUsageExamples.storyName = 'Usage Examples';
+
+export const CodeSamples = () => html`
+  ${meshGradientStoryStyles}
+  <section class="mesh-story">
+    <h2>Code Samples</h2>
+
+    <h3 class="mesh-story__subheading">Apply as Background</h3>
+    <pre class="mesh-story__code-block"><code>/* Use CSS custom properties */
+.hero-section {
+  background: var(--background-mesh-01);
+}
+
+/* Combine with surface colors */
+.card {
+  background: var(--background-mesh-03);
+  backdrop-filter: blur(10px);
+}
+
+/* Layer over solid colors */
+.container {
+  background-color: var(--color-surface-base);
+  background-image: var(--background-mesh-02);
+}</code></pre>
+
+    <h3 class="mesh-story__subheading">Available Variables</h3>
+    <ul class="mesh-story__list">
+      ${meshVariableList.map((meshKey) => html`
+        <li class="mesh-story__list-item">
+          <code>--background-${meshKey}</code>
+        </li>
+      `)}
+    </ul>
+  </section>
+`;
+
+CodeSamples.storyName = 'Code Samples';

package/stories/enhancements/OpenGroups.stories.js

@@ -0,0 +1,227 @@
+import { html } from 'lit';
+
+const openGroupsStoryStyles = html`
+  <style>
+    .open-groups-container {
+      max-width: 37.5rem;
+      display: grid;
+      gap: var(--spacing-4);
+    }
+
+    .open-groups-description {
+      color: var(--surface-text-secondary);
+      margin: 0;
+    }
+
+    .open-groups-description + .open-groups-fieldset,
+    .open-groups-description + .open-groups-form-fieldset {
+      margin-top: var(--spacing-4);
+    }
+
+    .open-groups-fieldset {
+      display: grid;
+      gap: var(--spacing-3);
+      margin: 0;
+    }
+
+    .open-groups-form {
+      max-width: 37.5rem;
+      display: grid;
+      gap: var(--spacing-4);
+    }
+
+    .open-groups-form-fieldset {
+      display: grid;
+      gap: var(--spacing-3);
+    }
+
+    .open-groups-actions {
+      display: flex;
+      gap: var(--spacing-3);
+    }
+
+    .open-groups-card {
+      max-width: 37.5rem;
+      display: grid;
+      gap: var(--spacing-4);
+    }
+
+    .open-groups-card-actions {
+      margin-top: var(--spacing-4);
+    }
+  </style>
+`;
+
+export default {
+  title: 'Enhancements/Open Groups',
+  tags: ['forms', 'interaction'],
+  parameters: {
+    pds: {
+      tags: ['forms', 'interaction']
+    },
+    docs: {
+      description: {
+        component:
+          'Dynamic checkbox/radio groups that allow users to add custom options at runtime using the data-open attribute'
+      }
+    }
+  }
+};
+
+export const RadioGroupOpen = () => html`
+  ${openGroupsStoryStyles}
+  <section class="open-groups-container">
+    <h3>Select Your Preferences</h3>
+    <p class="open-groups-description">
+      Choose from existing options or add your own
+    </p>
+    <fieldset role="group" data-open >
+      <legend>Favorite Programming Language</legend>
+      <label>
+        <span data-label>JavaScript</span>
+        <input value="javascript" name="language" type="radio">
+      </label>
+      <label>
+        <span data-label>Python</span>
+        <input value="python" name="language" type="radio">
+      </label>
+      <label>
+        <span data-label>TypeScript</span>
+        <input value="typescript" name="language" type="radio">
+      </label>
+    </fieldset>
+  </section>
+`;
+
+export const CheckboxGroupOpen = () => html`
+  ${openGroupsStoryStyles}
+  <section class="open-groups-container">
+    <h3>Select Features</h3>
+    <p class="open-groups-description">
+      Select multiple features and add custom ones
+    </p>
+    <fieldset role="group" data-open>
+      <legend>Desired Features</legend>
+      <label>
+        <span data-label>Dark Mode</span>
+        <input value="dark-mode" name="features" type="checkbox">
+      </label>
+      <label>
+        <span data-label>Notifications</span>
+        <input value="notifications" name="features" type="checkbox">
+      </label>
+      <label>
+        <span data-label>Analytics</span>
+        <input value="analytics" name="features" type="checkbox">
+      </label>
+    </fieldset>
+  </section>
+`;
+
+export const InForm = () => html`
+  ${openGroupsStoryStyles}
+  <form
+    class="open-groups-form"
+    @submit="${(event) => {
+      event.preventDefault();
+      window.toastFormData(new FormData(event.target));
+    }}"
+  >
+    <h3>Survey Form</h3>
+
+    <fieldset role="group" data-open>
+      <legend>How did you hear about us?</legend>
+      <label>
+        <span data-label>Social Media</span>
+        <input value="social" name="source" type="radio">
+      </label>
+      <label>
+        <span data-label>Search Engine</span>
+        <input value="search" name="source" type="radio">
+      </label>
+      <label>
+        <span data-label>Friend</span>
+        <input value="friend" name="source" type="radio">
+      </label>
+    </fieldset>
+
+    <fieldset role="group" data-open>
+      <legend>Interests (select all that apply)</legend>
+      <label>
+        <span data-label>Web Development</span>
+        <input value="webdev" name="interests" type="checkbox">
+      </label>
+      <label>
+        <span data-label>Design</span>
+        <input value="design" name="interests" type="checkbox">
+      </label>
+      <label>
+        <span data-label>Marketing</span>
+        <input value="marketing" name="interests" type="checkbox">
+      </label>
+    </fieldset>
+
+    <div class="open-groups-actions">
+      <button type="submit" class="btn-primary">Submit Survey</button>
+    </div>
+  </form>
+`;
+
+export const PrefilledValues = () => html`
+  ${openGroupsStoryStyles}
+  <section class="open-groups-container">
+    <h3>Tag Editor</h3>
+    <p class="open-groups-description">
+      Select existing tags or create new ones by typing and pressing Enter
+    </p>
+    <fieldset role="group" data-open >
+      <legend>Article Tags</legend>
+      <label>
+        <span data-label>JavaScript</span>
+        <input value="javascript" name="tags" type="checkbox" checked>
+      </label>
+      <label>
+        <span data-label>Tutorial</span>
+        <input value="tutorial" name="tags" type="checkbox" checked>
+      </label>
+      <label>
+        <span data-label>Beginner</span>
+        <input value="beginner" name="tags" type="checkbox">
+      </label>
+      <label>
+        <span data-label>Advanced</span>
+        <input value="advanced" name="tags" type="checkbox">
+      </label>
+    </fieldset>
+  </section>
+`;
+
+export const InCard = () => html`
+  ${openGroupsStoryStyles}
+  <article class="card open-groups-card">
+    <h3>Customize Your Experience</h3>
+    <p class="open-groups-description">
+      Choose your preferences and add custom options as needed
+    </p>
+
+    <fieldset role="group" data-open>
+      <legend>Notification Channels</legend>
+      <label>
+        <span data-label>Email</span>
+        <input value="email" name="channels" type="checkbox" checked>
+      </label>
+      <label>
+        <span data-label>SMS</span>
+        <input value="sms" name="channels" type="checkbox">
+      </label>
+      <label>
+        <span data-label>Push</span>
+        <input value="push" name="channels" type="checkbox" checked>
+      </label>
+    </fieldset>
+
+    <div class="open-groups-card-actions">
+      <button class="btn-primary">Save Preferences</button>
+    </div>
+  </article>
+`;