@pure-ds/storybook 0.1.0

package/stories/enhancements/RangeSliders.stories.js

@@ -0,0 +1,232 @@
+import { html } from 'lit';
+
+const rangeSliderStoryStyles = html`
+  <style>
+    .range-slider-section {
+      max-width: 400px;
+      display: grid;
+      gap: var(--spacing-4);
+    }
+
+    .range-slider-section--wide {
+      max-width: 500px;
+    }
+
+    .range-slider-section--comparison {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: var(--spacing-6);
+      max-width: 1000px;
+    }
+
+    .range-slider-description {
+      color: var(--color-text-secondary);
+      font-size: 0.875rem;
+      margin: 0 0 var(--spacing-4);
+    }
+
+    .range-slider-form {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-4);
+    }
+
+    .range-slider-actions {
+      margin-top: var(--spacing-2);
+      align-self: flex-start;
+    }
+
+    .range-slider-card {
+      display: grid;
+      gap: var(--spacing-4);
+    }
+  </style>
+`;
+
+export default {
+  title: 'Enhancements/Range Sliders',
+  tags: ['forms', 'interaction'],
+  parameters: {
+    pds: {
+      tags: ['forms', 'interaction']
+    },
+    docs: {
+      description: {
+        component: `Enhanced range inputs with two display modes:
+
+**Standard Mode** (default): Floating bubble that appears on interaction.
+
+**Inline Output Mode**: Add \`range-output\` class to the label for persistent inline value display using semantic \`<output>\` element.
+
+Both modes automatically generate proper ARIA attributes and use the \`<output>\` tag for accessibility.`
+      }
+    }
+  }
+};
+
+export const StandardFloatingBubble = () => html`
+  ${rangeSliderStoryStyles}
+  <section class="range-slider-section">
+    <p class="range-slider-description">
+      Default behavior: A floating bubble appears when you interact with the slider.
+    </p>
+    <label>
+      <span>Volume</span>
+      <input type="range" min="0" max="100" value="50">
+    </label>
+  </section>
+`;
+
+StandardFloatingBubble.storyName = 'Standard (Floating Bubble)';
+
+export const MultipleRanges = () => html`
+  ${rangeSliderStoryStyles}
+  <form
+    class="range-slider-section range-slider-form"
+    @submit="${(event) => {
+      event.preventDefault();
+      toastFormData(new FormData(event.target));
+    }}"
+  >
+    <label>
+      <span>Brightness</span>
+      <input type="range" name="brightness" min="0" max="100" value="75">
+    </label>
+    <label>
+      <span>Contrast</span>
+      <input type="range" name="contrast" min="0" max="100" value="50">
+    </label>
+    <label>
+      <span>Saturation</span>
+      <input type="range" name="saturation" min="0" max="100" value="60">
+    </label>
+    <label>
+      <span>Temperature</span>
+      <input type="range" name="temperature" min="-100" max="100" value="0">
+    </label>
+    <button type="submit" class="btn-primary range-slider-actions">Apply Settings</button>
+  </form>
+`;
+
+export const CustomSteps = () => html`
+  ${rangeSliderStoryStyles}
+  <form
+    class="range-slider-section range-slider-form"
+    @submit="${(event) => {
+      event.preventDefault();
+      toastFormData(new FormData(event.target));
+    }}"
+  >
+    <label>
+      <span>Opacity (10% steps)</span>
+      <input type="range" name="opacity" min="0" max="100" value="100" step="10">
+    </label>
+    <label>
+      <span>Font Size (0.25rem steps)</span>
+      <input type="range" name="fontSize" min="0.5" max="3" value="1" step="0.25">
+    </label>
+    <button type="submit" class="btn-primary range-slider-actions">Apply Settings</button>
+  </form>
+`;
+
+export const InlineOutputMode = () => html`
+  ${rangeSliderStoryStyles}
+  <section class="range-slider-section range-slider-section--wide">
+    <p class="range-slider-description">
+      Add the <code>range-output</code> class to automatically create an inline output display.
+    </p>
+    <div class="range-slider-form">
+      <label class="range-output">
+        <span>Master Volume</span>
+        <input type="range" min="0" max="100" value="75">
+      </label>
+      <label class="range-output">
+        <span>Bass</span>
+        <input type="range" min="0" max="100" value="50">
+      </label>
+      <label class="range-output">
+        <span>Treble</span>
+        <input type="range" min="0" max="100" value="60">
+      </label>
+    </div>
+  </section>
+`;
+
+InlineOutputMode.storyName = 'Inline Output (range-output class)';
+
+export const AudioControlsExample = () => html`
+  ${rangeSliderStoryStyles}
+  <article class="card range-slider-section range-slider-section--wide range-slider-card">
+    <div>
+      <h3>Audio Controls</h3>
+      <p class="range-slider-description">
+        Complete example using <code>range-output</code> class for a real-world audio control interface.
+      </p>
+    </div>
+    <div class="range-slider-form">
+      <label class="range-output">
+        <span>Master Volume</span>
+        <input type="range" min="0" max="100" value="75">
+      </label>
+      <label class="range-output">
+        <span>Bass</span>
+        <input type="range" min="0" max="100" value="50">
+      </label>
+      <label class="range-output">
+        <span>Treble</span>
+        <input type="range" min="0" max="100" value="60">
+      </label>
+      <label class="range-output">
+        <span>Balance</span>
+        <input type="range" min="-50" max="50" value="0">
+      </label>
+    </div>
+  </article>
+`;
+
+AudioControlsExample.storyName = 'Real-world Example (Audio Controls)';
+
+export const ComparisonView = () => html`
+  ${rangeSliderStoryStyles}
+  <div class="range-slider-section range-slider-section--comparison">
+    <article class="card range-slider-card">
+      <div>
+        <h3>Standard Mode</h3>
+        <p class="range-slider-description">
+          Floating bubble appears on hover/focus. Best for simple forms.
+        </p>
+      </div>
+      <div class="range-slider-form">
+        <label>
+          <span>Volume</span>
+          <input type="range" min="0" max="100" value="75">
+        </label>
+        <label>
+          <span>Brightness</span>
+          <input type="range" min="0" max="100" value="50">
+        </label>
+      </div>
+    </article>
+
+    <article class="card range-slider-card">
+      <div>
+        <h3>Inline Output Mode</h3>
+        <p class="range-slider-description">
+          Persistent value display. Best for settings and controls.
+        </p>
+      </div>
+      <div class="range-slider-form">
+        <label class="range-output">
+          <span>Volume</span>
+          <input type="range" min="0" max="100" value="75">
+        </label>
+        <label class="range-output">
+          <span>Brightness</span>
+          <input type="range" min="0" max="100" value="50">
+        </label>
+      </div>
+    </article>
+  </div>
+`;
+
+ComparisonView.storyName = 'Side-by-side Comparison';

package/stories/enhancements/RequiredFields.stories.js

@@ -0,0 +1,189 @@
+import { html } from 'lit';
+
+const requiredFieldsStoryStyles = html`
+  <style>
+    .required-form {
+      max-width: 400px;
+      display: grid;
+      gap: var(--spacing-3);
+    }
+
+    .required-form--wide {
+      max-width: 500px;
+    }
+
+    .required-fieldset {
+      display: grid;
+      gap: var(--spacing-3);
+    }
+
+    .required-fieldset--spaced {
+      margin-top: var(--spacing-4);
+    }
+
+    .required-actions {
+      margin-top: var(--spacing-4);
+    }
+
+    .required-help-text {
+      color: var(--surface-text-secondary);
+      display: block;
+      margin-top: 0.25rem;
+    }
+
+    .required-field--spaced {
+      margin-top: var(--spacing-3);
+    }
+
+    .required-form__button {
+      justify-self: start;
+    }
+  </style>
+`;
+
+export default {
+  title: 'Enhancements/Required Fields',
+  tags: ['forms', 'interaction'],
+  parameters: {
+    pds: {
+      tags: ['forms', 'interaction']
+    },
+    docs: {
+      description: {
+        component: 'Automatic asterisk indicators for required form fields'
+      }
+    }
+  }
+};
+
+export const BasicRequired = () => html`
+  ${requiredFieldsStoryStyles}
+  <form
+    class="required-form"
+    @submit="${(event) => {
+      event.preventDefault();
+      toastFormData(new FormData(event.target));
+    }}"
+  >
+    <label>
+      <span>Full Name</span>
+      <input type="text" required placeholder="John Doe">
+    </label>
+    <label>
+      <span>Email</span>
+      <div class="input-icon">
+        <pds-icon icon="envelope"></pds-icon>
+        <input type="email" required placeholder="john@example.com">
+      </div>
+    </label>
+    <label>
+      <span>Phone (optional)</span>
+      <div class="input-icon">
+        <pds-icon icon="phone"></pds-icon>
+        <input type="tel" placeholder="+1 (555) 123-4567">
+      </div>
+    </label>
+    <button type="submit" class="btn-primary required-form__button">Submit</button>
+  </form>
+`;
+
+export const MixedRequired = () => html`
+  ${requiredFieldsStoryStyles}
+  <form
+    class="required-form required-form--wide"
+    @submit="${(event) => {
+      event.preventDefault();
+      toastFormData(new FormData(event.target));
+    }}"
+  >
+    <fieldset class="required-fieldset">
+      <legend>Account Information</legend>
+      <label>
+        <span>Username</span>
+        <div class="input-icon">
+          <pds-icon icon="user"></pds-icon>
+          <input type="text" required placeholder="username">
+        </div>
+      </label>
+      <label>
+        <span>Password</span>
+        <div class="input-icon">
+          <pds-icon icon="lock"></pds-icon>
+          <input type="password" required placeholder="••••••••">
+        </div>
+      </label>
+      <label>
+        <span>Confirm Password</span>
+        <div class="input-icon">
+          <pds-icon icon="lock"></pds-icon>
+          <input type="password" required placeholder="••••••••">
+        </div>
+      </label>
+    </fieldset>
+
+    <fieldset class="required-fieldset required-fieldset--spaced">
+      <legend>Optional Details</legend>
+      <label>
+        <span>Company</span>
+        <input type="text" placeholder="Acme Corp">
+      </label>
+      <label>
+        <span>Website</span>
+        <div class="input-icon">
+          <pds-icon icon="globe"></pds-icon>
+          <input type="url" placeholder="https://example.com">
+        </div>
+      </label>
+    </fieldset>
+
+    <div class="required-actions">
+      <button type="submit" class="btn-primary required-form__button">Create Account</button>
+    </div>
+  </form>
+`;
+
+export const InlineHelp = () => html`
+  ${requiredFieldsStoryStyles}
+  <form
+    class="required-form required-form--wide"
+    @submit="${(event) => {
+      event.preventDefault();
+      toastFormData(new FormData(event.target));
+    }}"
+  >
+    <label>
+      <span>Email Address</span>
+      <div class="input-icon">
+        <pds-icon icon="envelope"></pds-icon>
+        <input type="email" required placeholder="you@example.com">
+      </div>
+      <small class="required-help-text">
+        We'll never share your email with anyone else.
+      </small>
+    </label>
+    <label class="required-field--spaced">
+      <span>Password</span>
+      <div class="input-icon">
+        <pds-icon icon="lock"></pds-icon>
+        <input type="password" required placeholder="••••••••">
+      </div>
+      <small class="required-help-text">
+        Must be at least 8 characters long.
+      </small>
+    </label>
+    <label class="required-field--spaced">
+      <span>Newsletter Frequency</span>
+      <select>
+        <option>Weekly</option>
+        <option>Monthly</option>
+        <option>Never</option>
+      </select>
+      <small class="required-help-text">
+        Optional - choose how often you want updates.
+      </small>
+    </label>
+    <div class="required-actions">
+      <button type="submit" class="btn-primary required-form__button">Sign Up</button>
+    </div>
+  </form>
+`;

package/stories/enhancements/Toggles.stories.js

@@ -0,0 +1,167 @@
+import { html } from 'lit';
+
+const toggleStoryStyles = html`
+  <style>
+    .toggle-story-form {
+      max-width: 400px;
+    }
+
+    .toggle-story-form__button {
+      margin-top: var(--spacing-3);
+      align-self: flex-start;
+    }
+
+    .toggle-story-layout {
+      max-width: 600px;
+      display: grid;
+      gap: var(--spacing-4);
+    }
+
+    .toggle-story-muted {
+      color: var(--surface-text-secondary);
+      margin-bottom: var(--spacing-4);
+    }
+
+    .toggle-story-section {
+      display: grid;
+      gap: var(--spacing-3);
+    }
+
+    .toggle-story-subheading {
+      margin-bottom: var(--spacing-2);
+    }
+
+    .toggle-story-card {
+      max-width: 500px;
+      display: grid;
+      gap: var(--spacing-4);
+    }
+  </style>
+`;
+
+export default {
+  title: 'Enhancements/Toggles',
+  tags: ['forms', 'interaction'],
+  parameters: {
+    pds: {
+      tags: ['forms', 'interaction']
+    },
+    docs: {
+      description: {
+        component: 'Transform checkboxes into toggle switches using data-toggle attribute'
+      }
+    }
+  }
+};
+
+export const BasicToggle = () => html`
+  ${toggleStoryStyles}
+  <label data-toggle>
+    <span data-label>Enable notifications</span>
+    <input type="checkbox">
+  </label>
+`;
+
+export const PreChecked = () => html`
+  ${toggleStoryStyles}
+  <label data-toggle>
+    <span data-label>Dark mode</span>
+    <input type="checkbox" checked>
+  </label>
+`;
+
+export const MultipleToggles = () => html`
+  ${toggleStoryStyles}
+  <form
+    class="flex flex-col gap-sm toggle-story-form"
+    @submit="${(event) => {
+      event.preventDefault();
+      toastFormData(new FormData(event.target));
+    }}"
+  >
+    <label data-toggle>
+      <span data-label>Email notifications</span>
+      <input type="checkbox" name="email" checked>
+    </label>
+    <label data-toggle>
+      <span data-label>Push notifications</span>
+      <input type="checkbox" name="push">
+    </label>
+    <label data-toggle>
+      <span data-label>SMS notifications</span>
+      <input type="checkbox" name="sms">
+    </label>
+    <label data-toggle>
+      <span data-label>Weekly digest</span>
+      <input type="checkbox" name="digest" checked>
+    </label>
+    <button type="submit" class="btn-primary toggle-story-form__button">Save Preferences</button>
+  </form>
+`;
+
+export const TogglePositions = () => html`
+  ${toggleStoryStyles}
+  <div class="toggle-story-layout">
+    <div>
+      <h3>Toggle Position Variations</h3>
+      <p class="toggle-story-muted">
+        Toggle knob position adapts based on label placement in DOM
+      </p>
+    </div>
+    <div class="flex flex-col gap-md">
+      <section class="toggle-story-section">
+        <h4 class="toggle-story-subheading">Label First (Knob on Right)</h4>
+        <div class="flex flex-col gap-sm">
+          <label data-toggle>
+            <span data-label>Email notifications</span>
+            <input type="checkbox" checked>
+          </label>
+          <label data-toggle>
+            <span data-label>Push notifications</span>
+            <input type="checkbox">
+          </label>
+        </div>
+      </section>
+
+      <section class="toggle-story-section">
+        <h4 class="toggle-story-subheading">Label Last (Knob on Left)</h4>
+        <div class="flex flex-col gap-sm">
+          <label data-toggle>
+            <input type="checkbox" checked>
+            <span data-label>Dark mode enabled</span>
+          </label>
+          <label data-toggle>
+            <input type="checkbox">
+            <span data-label>Auto-save changes</span>
+          </label>
+        </div>
+      </section>
+    </div>
+  </div>
+`;
+
+export const InCard = () => html`
+  ${toggleStoryStyles}
+  <article class="card toggle-story-card">
+    <div>
+      <h3>Privacy Settings</h3>
+      <p class="toggle-story-muted">
+        Control your privacy preferences
+      </p>
+    </div>
+    <div class="flex flex-col gap-sm">
+      <label data-toggle>
+        <span data-label>Profile visibility</span>
+        <input type="checkbox" checked>
+      </label>
+      <label data-toggle>
+        <span data-label>Show online status</span>
+        <input type="checkbox">
+      </label>
+      <label data-toggle>
+        <span data-label>Allow message requests</span>
+        <input type="checkbox" checked>
+      </label>
+    </div>
+  </article>
+`;