@pure-ds/storybook 0.1.0

package/stories/primitives/FormGroups.stories.js

@@ -0,0 +1,569 @@
+import { html } from 'lit';
+import { toastFormData } from '../utils/toast-utils.js';
+
+export default {
+  title: "Primitives/Form Groups",
+  tags: ['grouping'],
+  parameters: {
+    pds: {
+      tags: ['forms', 'grouping']
+    },
+    docs: {
+      description: {
+        component: `Accessible radio groups and checkbox groups with proper ARIA attributes and semantic HTML.
+
+## Unified Styling
+
+Radio groups (\`role="radiogroup"\`) and checkbox groups (\`role="group"\`) share the same consolidated styling rules:
+
+### Default Style
+Both display with visible native controls in a vertical column layout:
+- Column layout with reduced spacing (\`gap: var(--spacing-2)\`)
+- Visible native radio buttons or checkboxes with primary accent color
+- Clean hover states that highlight text
+- Proper focus outlines for accessibility
+- Users can override layout with standard flex utilities
+
+### Button Style
+Add the \`.buttons\` class to either type for outlined button-style controls:
+- Horizontal flex wrap layout
+- Outlined style with transparent background
+- Selected state: subtle primary tint (8%) with thicker border (2px)
+- Compact/dense sizing (75% of regular button height)
+- Never looks like filled primary buttons - always outlined
+- Works identically for both radio and checkbox groups`,
+      },
+    },
+  },
+};
+
+const formGroupsStoryStyles = html`
+  <style>
+    .form-groups-section {
+      padding: var(--spacing-4);
+    }
+    .form-groups-helper {
+      margin-bottom: var(--spacing-4);
+      opacity: 0.8;
+    }
+    .form-groups-helper-lg {
+      margin-bottom: var(--spacing-6);
+      opacity: 0.8;
+    }
+    .form-groups-comparison {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: var(--spacing-8);
+    }
+    .form-groups-subheading {
+      margin-bottom: var(--spacing-4);
+    }
+    .form-groups-fieldset-spacing {
+      margin-bottom: var(--spacing-6);
+    }
+    .form-groups-card {
+      padding: var(--spacing-4);
+    }
+    .form-groups-horizontal {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--spacing-3);
+    }
+    .form-groups-grid {
+      display: grid;
+      gap: var(--spacing-6);
+      max-width: 50rem;
+    }
+    .form-groups-accessible-card {
+      padding: var(--spacing-6);
+      max-width: 37.5rem;
+    }
+    .form-groups-accessible-form {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-6);
+    }
+    .form-groups-topics-helper {
+      font-size: 0.9rem;
+      opacity: 0.8;
+      margin-bottom: var(--spacing-3);
+    }
+    .form-groups-actions {
+      margin-top: var(--spacing-6);
+      display: flex;
+      gap: var(--spacing-2);
+    }
+  </style>
+`;
+
+export const RadioGroupDefault = () => html`
+  ${formGroupsStoryStyles}
+  <div class="form-groups-section">
+    <h3>Radio Group - Default Style</h3>
+    <p class="form-groups-helper">
+      Default radio group with visible radio buttons, vertical layout
+    </p>
+    <fieldset role="radiogroup">
+      <legend>Select your plan</legend>
+      <label>
+        <input type="radio" name="plan-default" value="free" checked />
+        <span>Free - $0/month</span>
+      </label>
+      <label>
+        <input type="radio" name="plan-default" value="pro" />
+        <span>Pro - $29/month</span>
+      </label>
+      <label>
+        <input type="radio" name="plan-default" value="enterprise" />
+        <span>Enterprise - $99/month</span>
+      </label>
+    </fieldset>
+  </div>
+`;
+
+RadioGroupDefault.storyName = "Radio Group - Default";
+
+export const RadioGroupButtons = () => html`
+  ${formGroupsStoryStyles}
+  <div class="form-groups-section">
+    <h3>Radio Group - Button Style</h3>
+    <p class="form-groups-helper">
+      Add <code>class="buttons"</code> for outlined button-style radio controls
+    </p>
+    <fieldset role="radiogroup" class="buttons">
+      <legend>Select your plan</legend>
+      <label>
+        <input type="radio" name="plan-buttons" value="free" checked />
+        <span>Free</span>
+      </label>
+      <label>
+        <input type="radio" name="plan-buttons" value="pro" />
+        <span>Pro</span>
+      </label>
+      <label>
+        <input type="radio" name="plan-buttons" value="enterprise" />
+        <span>Enterprise</span>
+      </label>
+    </fieldset>
+  </div>
+`;
+
+RadioGroupButtons.storyName = "Radio Group - Buttons";
+
+export const CheckboxGroupDefault = () => html`
+  ${formGroupsStoryStyles}
+  <div class="form-groups-section">
+    <h3>Checkbox Group - Default Style</h3>
+    <p class="form-groups-helper">
+      Default checkbox group with visible checkboxes, vertical layout
+    </p>
+    <fieldset role="group">
+      <legend>Select features</legend>
+      <label>
+        <input type="checkbox" name="features-default" value="api" checked />
+        <span>API Access</span>
+      </label>
+      <label>
+        <input
+          type="checkbox"
+          name="features-default"
+          value="analytics"
+          checked
+        />
+        <span>Advanced Analytics</span>
+      </label>
+      <label>
+        <input type="checkbox" name="features-default" value="support" />
+        <span>Priority Support</span>
+      </label>
+      <label>
+        <input type="checkbox" name="features-default" value="sso" />
+        <span>Single Sign-On</span>
+      </label>
+    </fieldset>
+  </div>
+`;
+
+CheckboxGroupDefault.storyName = "Checkbox Group - Default";
+
+export const CheckboxGroupButtons = () => html`
+  ${formGroupsStoryStyles}
+  <div class="form-groups-section">
+    <h3>Checkbox Group - Button Style</h3>
+    <p class="form-groups-helper">
+      Add <code>class="buttons"</code> for outlined button-style checkboxes
+    </p>
+    <fieldset role="group" class="buttons">
+      <legend>Select features</legend>
+      <label>
+        <input type="checkbox" name="features-buttons" value="api" checked />
+        <span>API Access</span>
+      </label>
+      <label>
+        <input
+          type="checkbox"
+          name="features-buttons"
+          value="analytics"
+          checked
+        />
+        <span>Analytics</span>
+      </label>
+      <label>
+        <input type="checkbox" name="features-buttons" value="support" />
+        <span>Support</span>
+      </label>
+      <label>
+        <input type="checkbox" name="features-buttons" value="sso" />
+        <span>SSO</span>
+      </label>
+    </fieldset>
+  </div>
+`;
+
+CheckboxGroupButtons.storyName = "Checkbox Group - Buttons";
+
+export const StyleComparison = () => html`
+  ${formGroupsStoryStyles}
+  <div class="form-groups-section">
+    <h3>Side-by-Side Comparison</h3>
+    <p class="form-groups-helper-lg">
+      Compare default vs button styles for both radio and checkbox groups
+    </p>
+
+    <div class="form-groups-comparison">
+      <div>
+        <h4 class="form-groups-subheading">Default Style</h4>
+
+        <fieldset role="radiogroup" class="form-groups-fieldset-spacing">
+          <legend>Billing Cycle</legend>
+          <label>
+            <input
+              type="radio"
+              name="billing-default"
+              value="monthly"
+              checked
+            />
+            <span>Monthly</span>
+          </label>
+          <label>
+            <input type="radio" name="billing-default" value="annual" />
+            <span>Annual (Save 20%)</span>
+          </label>
+        </fieldset>
+
+        <fieldset role="group">
+          <legend>Add-ons</legend>
+          <label>
+            <input type="checkbox" name="addons-default" value="backup" />
+            <span>Daily Backups (+$5/mo)</span>
+          </label>
+          <label>
+            <input type="checkbox" name="addons-default" value="cdn" />
+            <span>Global CDN (+$10/mo)</span>
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              name="addons-default"
+              value="monitoring"
+              checked
+            />
+            <span>24/7 Monitoring (+$15/mo)</span>
+          </label>
+        </fieldset>
+      </div>
+
+      <div>
+        <h4 class="form-groups-subheading">Button Style</h4>
+
+        <fieldset
+          role="radiogroup"
+          class="buttons form-groups-fieldset-spacing"
+        >
+          <legend>Billing Cycle</legend>
+          <label>
+            <input
+              type="radio"
+              name="billing-buttons"
+              value="monthly"
+              checked
+            />
+            <span>Monthly</span>
+          </label>
+          <label>
+            <input type="radio" name="billing-buttons" value="annual" />
+            <span>Annual</span>
+          </label>
+        </fieldset>
+
+        <fieldset role="group" class="buttons">
+          <legend>Add-ons</legend>
+          <label>
+            <input type="checkbox" name="addons-buttons" value="backup" />
+            <span>Backups</span>
+          </label>
+          <label>
+            <input type="checkbox" name="addons-buttons" value="cdn" />
+            <span>CDN</span>
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              name="addons-buttons"
+              value="monitoring"
+              checked
+            />
+            <span>Monitoring</span>
+          </label>
+        </fieldset>
+      </div>
+    </div>
+  </div>
+`;
+
+StyleComparison.storyName = "Style Comparison";
+
+export const ToggleSwitches = () => html`
+  ${formGroupsStoryStyles}
+  <div class="form-groups-section">
+    <h3>Toggle Switches</h3>
+    <p class="form-groups-helper">
+      Uses <code>data-toggle</code> attribute for enhanced toggle switch styling
+    </p>
+
+    <section class="card form-groups-card">
+      <fieldset class="card" role="group">
+        <legend>Preferences</legend>
+
+        <label data-toggle>
+          <input type="checkbox" name="prefs" value="notifications" checked />
+          <span>Enable notifications</span>
+        </label>
+
+        <label data-toggle>
+          <input type="checkbox" name="prefs" value="dark" />
+          <span>Dark mode</span>
+          
+        </label>
+      </fieldset>
+    </section>
+
+    <section class="card form-groups-card">
+      <fieldset class="card" role="group">
+        <legend>Left-aligned knob</legend>
+        <label data-toggle>
+          <input type="checkbox" name="prefs" value="autosave" checked />
+          <span>Auto-save</span>
+        </label>
+
+        <label data-toggle>
+          <input type="checkbox" name="prefs" value="tooltips" />
+          <span>Show tooltips</span>
+        </label>
+      </fieldset>
+    </section>
+  </div>
+`;
+
+ToggleSwitches.storyName = "Toggle Switches";
+
+export const CustomLayout = () => html`
+  ${formGroupsStoryStyles}
+  <div class="card form-groups-card">
+    <h3>Custom Layout with Flex Utilities</h3>
+    <p class="alert alert-info">
+      Override default column layout using standard CSS flex properties
+    </p>
+
+    <fieldset role="radiogroup" class="form-groups-horizontal">
+      <legend>Horizontal Radio Group (flex-direction: row)</legend>
+      <label>
+        <input type="radio" name="horizontal-radio" value="1" checked />
+        <span>Option 1</span>
+      </label>
+      <label>
+        <input type="radio" name="horizontal-radio" value="2" />
+        <span>Option 2</span>
+      </label>
+      <label>
+        <input type="radio" name="horizontal-radio" value="3" />
+        <span>Option 3</span>
+      </label>
+    </fieldset>
+
+    <fieldset role="group" class="form-groups-horizontal">
+      <legend>Horizontal Checkbox Group (flex-direction: row)</legend>
+      <label>
+        <input type="checkbox" name="horizontal-check" value="1" checked />
+        <span>Feature 1</span>
+      </label>
+      <label>
+        <input type="checkbox" name="horizontal-check" value="2" />
+        <span>Feature 2</span>
+      </label>
+      <label>
+        <input type="checkbox" name="horizontal-check" value="3" checked />
+        <span>Feature 3</span>
+      </label>
+    </fieldset>
+  </div>
+`;
+
+CustomLayout.storyName = "Custom Layout";
+
+export const ButtonStyleVariants = () => html`
+  ${formGroupsStoryStyles}
+  <div class="form-groups-section">
+    <h3>Button Style Variants</h3>
+    <p class="form-groups-helper-lg">
+      Examples of button-style groups in different contexts
+    </p>
+
+    <div class="form-groups-grid">
+      <fieldset role="radiogroup" class="buttons">
+        <legend>Subscription Tier</legend>
+        <label>
+          <input type="radio" name="tier" value="starter" checked />
+          <span>Starter</span>
+        </label>
+        <label>
+          <input type="radio" name="tier" value="professional" />
+          <span>Professional</span>
+        </label>
+        <label>
+          <input type="radio" name="tier" value="business" />
+          <span>Business</span>
+        </label>
+        <label>
+          <input type="radio" name="tier" value="enterprise" />
+          <span>Enterprise</span>
+        </label>
+      </fieldset>
+
+      <fieldset role="group" class="buttons">
+        <legend>Available Integrations</legend>
+        <label>
+          <input type="checkbox" name="integrations" value="slack" checked />
+          <span>Slack</span>
+        </label>
+        <label>
+          <input type="checkbox" name="integrations" value="github" checked />
+          <span>GitHub</span>
+        </label>
+        <label>
+          <input type="checkbox" name="integrations" value="jira" />
+          <span>Jira</span>
+        </label>
+        <label>
+          <input type="checkbox" name="integrations" value="salesforce" />
+          <span>Salesforce</span>
+        </label>
+        <label>
+          <input type="checkbox" name="integrations" value="zapier" />
+          <span>Zapier</span>
+        </label>
+      </fieldset>
+
+      <fieldset role="radiogroup" class="buttons">
+        <legend>Payment Method</legend>
+        <label>
+          <input type="radio" name="payment" value="card" checked />
+          <span>💳 Credit Card</span>
+        </label>
+        <label>
+          <input type="radio" name="payment" value="paypal" />
+          <span>PayPal</span>
+        </label>
+        <label>
+          <input type="radio" name="payment" value="crypto" />
+          <span>₿ Crypto</span>
+        </label>
+      </fieldset>
+    </div>
+  </div>
+`;
+
+ButtonStyleVariants.storyName = "Button Style Variants";
+
+export const AccessibleFormGroups = {
+  render: () => {
+    const handleSubmit = (event) => {
+      event.preventDefault();
+      toastFormData(new FormData(event.target));
+    };
+
+    return html`
+      ${formGroupsStoryStyles}
+      <div class="form-groups-section">
+        <h2>Accessibility Features</h2>
+        <p class="form-groups-helper-lg">
+          Form groups include proper ARIA attributes, semantic HTML, and keyboard
+          navigation support.
+        </p>
+
+        <div class="card form-groups-accessible-card">
+          <form class="form-groups-accessible-form" @submit=${handleSubmit}>
+            <fieldset
+              role="radiogroup"
+              class="buttons"
+              aria-describedby="notification-help"
+            >
+              <legend>Notification Preferences</legend>
+
+              <p>Choose how you'd like to receive notifications</p>
+
+              <fieldset role="group" class="flex flex-row">
+                <label>
+                  <input type="radio" name="notification" value="email" checked />
+                  <span>Email only</span>
+                </label>
+                <label>
+                  <input type="radio" name="notification" value="sms" />
+                  <span>SMS only</span>
+                </label>
+                <label>
+                  <input type="radio" name="notification" value="both" />
+                  <span>Both</span>
+                </label>
+                <label>
+                  <input type="radio" name="notification" value="none" />
+                  <span>None</span>
+                </label>
+              </fieldset>
+            </fieldset>
+
+            <fieldset
+              role="group"
+              class="form-groups-fieldset-spacing"
+              aria-describedby="topics-help"
+            >
+              <legend>Topics to Follow</legend>
+              <p id="topics-help" class="form-groups-topics-helper">
+                Select all topics you're interested in
+              </p>
+              <label data-toggle>
+                <input type="checkbox" name="topics" value="product" checked />
+                <span>Product Updates</span>
+              </label>
+              <label data-toggle>
+                <input type="checkbox" name="topics" value="security" checked />
+                <span>Security Alerts</span>
+              </label>
+              <label data-toggle>
+                <input type="checkbox" name="topics" value="marketing" />
+                <span>Marketing & Promotions</span>
+              </label>
+            </fieldset>
+
+            <div class="form-groups-actions">
+              <button type="submit" class="btn-primary">Save Preferences</button>
+              <button type="reset" class="btn-secondary">Reset</button>
+            </div>
+          </form>
+        </div>
+      </div>
+    `;
+  }
+};
+
+AccessibleFormGroups.storyName = "Accessible Form Groups";

package/stories/primitives/Forms.stories.js

@@ -0,0 +1,131 @@
+import { html } from 'lit';
+import { toastFormData } from '../utils/toast-utils.js';
+
+export default {
+  title: 'Primitives/Forms',
+  tags: ['buttons', 'forms'],
+  parameters: {
+    pds: {
+      tags: ['buttons', 'forms']
+    },
+    docs: {
+      description: {
+        component: `Standard HTML form controls styled by PDS. 
+
+**💡 For modern apps, consider using [pds-jsonform](/story/components-pds-jsonform--simple-form)** - a powerful web component that automatically generates forms from JSON Schema with built-in validation, conditional logic, and data binding.
+
+These primitive form controls provide the foundation for manual form building when you need full control over the markup.`
+      }
+    }
+  },
+  argTypes: {
+  preset: {
+    control: 'select',
+    options: ['default', 'ocean-breeze', 'midnight-steel', 'sunset-vibes', 'forest-calm', 'lavender-dream'],
+    description: 'Choose a design preset'
+  },
+  primaryColor: {
+    control: 'color',
+    description: 'Override primary color'
+  },
+  secondaryColor: {
+    control: 'color',
+    description: 'Override secondary color'
+  }
+  }
+};
+
+export const Default = {
+  render: (args) => {
+    // Preset changes are handled by toolbar in preview.js
+    const handleSubmit = (event) => {
+      event.preventDefault();
+      toastFormData(new FormData(event.target));
+    };
+    
+    return html`
+      <style>
+        .forms-default-form {
+          max-width: 25rem;
+        }
+      </style>
+      <div class="card">
+        
+    <form class="forms-default-form" @submit=${handleSubmit}>
+      <label>
+        <span>Text Input</span>
+        <input type="text" name="text" placeholder="Enter text...">
+      </label>
+      <label>
+        <span>Email</span>
+        <div class="input-icon">
+          <pds-icon icon="envelope"></pds-icon>
+          <input type="email" name="email" required placeholder="email@example.com">
+        </div>
+      </label>
+      <label>
+        <span>Select</span>
+        <select name="select">
+          <option>Option 1</option>
+          <option>Option 2</option>
+          <option>Option 3</option>
+        </select>
+      </label>
+      <label>
+        <span>Textarea</span>
+        <textarea name="textarea" rows="4" placeholder="Enter longer text..."></textarea>
+      </label>
+      <button type="submit" class="btn-primary">Submit</button>
+    </form>
+  
+      </div>
+    `;
+  },
+  args: {
+    preset: 'default'
+  }
+};
+
+export const InputsWithIcons = {
+  render: (args) => {
+    return html`
+      <style>
+        .forms-inputs-demo {
+          max-width: 25rem;
+        }
+      </style>
+      <div class="card">
+        <h3>Inputs with Icons</h3>
+        <p>Enhance inputs with icons for better UX. Icons can be positioned at the start or end of the input.</p>
+        
+        <div class="flex flex-col gap-lg forms-inputs-demo">
+          <label>
+            <span>Search (Icon Start)</span>
+            <div class="input-icon">
+              <pds-icon icon="magnifying-glass"></pds-icon>
+              <input type="search" placeholder="Search..." />
+            </div>
+          </label>
+          
+          <label>
+            <span>Username (Icon End)</span>
+            <div class="input-icon input-icon-end">
+              <input type="text" placeholder="Username" />
+              <pds-icon icon="user"></pds-icon>
+            </div>
+          </label>
+        </div>
+      </div>
+    `;
+  },
+  args: {
+    preset: 'default'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Input fields can be enhanced with icons to provide visual context. Use the `input-icon` class wrapper and position icons at the start (default) or end (`input-icon-end`) of the input.'
+      }
+    }
+  }
+};