@pure-ds/storybook 0.4.17 → 0.4.19

package/stories/components/{PdsJsonformUiSchema.md → PdsFormUiSchema.md}

@@ -1,6 +1,6 @@
-# pds-jsonform uiSchema Reference
+# pds-form uiSchema Reference
 
-The **uiSchema** is the configuration object that controls how `pds-jsonform` renders and behaves. While JSON Schema defines *what* data to collect, uiSchema defines *how* to collect it.
+The **uiSchema** is the configuration object that controls how `pds-form` renders and behaves. While JSON Schema defines *what* data to collect, uiSchema defines *how* to collect it.
 
 ## Path Notation
 

package/stories/foundations/Spacing.stories.js

@@ -154,11 +154,11 @@ export const SpacingScale = {
           <h3>Vertical Stacks</h3>
           <article class="card spacing-demo-card">
             <div class="story-spacing-demo-card__stack">
-              <div class="story-spacing-demo-card__bar spacing-card-spacing-1"></div>
-              <div class="story-spacing-demo-card__bar spacing-card-spacing-2"></div>
-              <div class="story-spacing-demo-card__bar spacing-card-spacing-3"></div>
-              <div class="story-spacing-demo-card__bar spacing-card-spacing-4"></div>
-              <div class="story-spacing-demo-card__bar spacing-card-spacing-5"></div>
+              <div class="story-spacing-demo-card__bar story-spacing-card-spacing-1"></div>
+              <div class="story-spacing-demo-card__bar story-spacing-card-spacing-2"></div>
+              <div class="story-spacing-demo-card__bar story-spacing-card-spacing-3"></div>
+              <div class="story-spacing-demo-card__bar story-spacing-card-spacing-4"></div>
+              <div class="story-spacing-demo-card__bar story-spacing-card-spacing-5"></div>
             </div>
           </article>
         </div>

package/stories/layout/LayoutOverview.stories.js

@@ -15,18 +15,20 @@ const layoutOverviewStyles = html`
 `;
 
 // Code samples for comparison
-const tailwindCode = `<div class="p-4 mt-2 rounded-lg shadow-md bg-white 
-  flex flex-col gap-2">
-  <div class="text-lg font-bold">
-    A Nice Box With a Title
-  </div>
-  <div class="text-sm text-gray-500">
-    The subtitle of the item
-  </div>
-  <div class="text-base">
+const tailwindCode = `<article class="max-w-md rounded-lg bg-white p-4 shadow-md">
+  <header class="space-y-1">
+    <h3 class="text-lg font-semibold">
+      A Nice Box With a Title
+    </h3>
+    <small class="text-sm text-slate-500">
+      The subtitle of the item
+    </small>
+  </header>
+  <p class="mt-3 text-base">
     The body of the item with some descriptive text.
-  </div>
-</div>`;
+  </p>
+</article>
+`;
 
 const pdsCode = `<article class="card surface-overlay">
   <header>

package/stories/primitives/{Forms.stories.js → FormElements.stories.js}

@@ -1,4 +1,4 @@
-import { html } from 'lit';
+import { html } from 'lit';
 import { toastFormData } from '../utils/toast-utils.js';
 
 // Story-specific styles (not PDS classes - demo only)
@@ -9,7 +9,7 @@ const formsStoryStyles = html`
 `;
 
 export default {
-  title: 'Primitives/Forms',
+  title: 'Primitives/Form Elements',
   tags: ['buttons', 'forms'],
   parameters: {
     pds: {
@@ -19,7 +19,7 @@ export default {
       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.
+**💡 For modern apps, consider using [pds-form](/story/components-pds-form--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.`
       }

package/stories/primitives/HtmlFormElements.stories.js

@@ -0,0 +1,128 @@
+import { html } from 'lit';
+import { toastFormData } from '../utils/toast-utils.js';
+
+// Story-specific styles (not PDS classes - demo only)
+const formsStoryStyles = html`
+  <style>
+    .story-form-max { max-width: 24rem; }
+  </style>
+`;
+
+export default {
+  title: 'Primitives/HTML Form Elements',
+  tags: ['buttons', 'forms'],
+  parameters: {
+    pds: {
+      tags: ['buttons', 'forms']
+    },
+    docs: {
+      description: {
+        component: `Standard HTML form controls styled by PDS. 
+
+**💡 For modern apps, consider using [pds-form](/story/components-pds-form--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`
+      ${formsStoryStyles}
+      <div class="card">
+        <form class="story-form-max" @submit=${handleSubmit}>
+          <label>
+            <span data-label>Text Input</span>
+            <input type="text" name="text" placeholder="Enter text...">
+          </label>
+          <label>
+            <span data-label>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 data-label>Select</span>
+            <select name="select">
+              <option>Option 1</option>
+              <option>Option 2</option>
+              <option>Option 3</option>
+            </select>
+          </label>
+          <label>
+            <span data-label>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`
+      ${formsStoryStyles}
+      <div class="card stack-md">
+        <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="stack-lg story-form-max">
+          <label>
+            <span data-label>Search (Icon Start)</span>
+            <div class="input-icon">
+              <pds-icon icon="magnifying-glass"></pds-icon>
+              <input type="search" placeholder="Search..." />
+            </div>
+          </label>
+          
+          <label>
+            <span data-label>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.'
+      }
+    }
+  }
+};

package/stories/primitives/{FormGroups.stories.js → HtmlFormGroups.stories.js}

@@ -1,12 +1,20 @@
-import { html } from 'lit';
-import { toastFormData } from '../utils/toast-utils.js';
-
+import { html } from "lit";
+import { toastFormData } from "../utils/toast-utils.js";
+
+const styles = html`
+  <style>
+    /* Story-specific styles for form group demos */
+    .card:has(fieldset) {
+      max-width: 28rem;
+    }
+  </style>
+`;
 export default {
-  title: "Primitives/Form Groups",
-  tags: ['grouping'],
+  title: 'Primitives/HTML Form Groups',
+  tags: ["grouping"],
   parameters: {
     pds: {
-      tags: ['forms', 'grouping']
+      tags: ["forms", "radio", "checkbox", "grouping"],
     },
     docs: {
       description: {
@@ -38,10 +46,13 @@ Add the \`.buttons\` class to either type for outlined button-style controls:
 };
 
 export const RadioGroupDefault = () => html`
+  ${styles}
   <div class="card stack-md">
     <header>
       <h3>Radio Group - Default Style</h3>
-      <small class="text-muted">Default radio group with visible radio buttons, vertical layout</small>
+      <small class="text-muted"
+        >Default radio group with visible radio buttons, vertical layout</small
+      >
     </header>
     <fieldset role="radiogroup">
       <legend>Select your plan</legend>
@@ -64,10 +75,14 @@ export const RadioGroupDefault = () => html`
 RadioGroupDefault.storyName = "Radio Group - Default";
 
 export const RadioGroupButtons = () => html`
+  ${styles}
   <div class="card stack-md">
     <header>
       <h3>Radio Group - Button Style</h3>
-      <small class="text-muted">Add <code>class="buttons"</code> for outlined button-style radio controls</small>
+      <small class="text-muted"
+        >Add <code>class="buttons"</code> for outlined button-style radio
+        controls</small
+      >
     </header>
     <fieldset role="radiogroup" class="buttons">
       <legend>Select your plan</legend>
@@ -90,10 +105,13 @@ export const RadioGroupButtons = () => html`
 RadioGroupButtons.storyName = "Radio Group - Buttons";
 
 export const CheckboxGroupDefault = () => html`
+${styles}
   <div class="card stack-md">
     <header>
       <h3>Checkbox Group - Default Style</h3>
-      <small class="text-muted">Default checkbox group with visible checkboxes, vertical layout</small>
+      <small class="text-muted"
+        >Default checkbox group with visible checkboxes, vertical layout</small
+      >
     </header>
     <fieldset role="group">
       <legend>Select features</legend>
@@ -125,10 +143,14 @@ export const CheckboxGroupDefault = () => html`
 CheckboxGroupDefault.storyName = "Checkbox Group - Default";
 
 export const CheckboxGroupButtons = () => html`
+${styles}
   <div class="card stack-md">
     <header>
       <h3>Checkbox Group - Button Style</h3>
-      <small class="text-muted">Add <code>class="buttons"</code> for outlined button-style checkboxes</small>
+      <small class="text-muted"
+        >Add <code>class="buttons"</code> for outlined button-style
+        checkboxes</small
+      >
     </header>
     <fieldset role="group" class="buttons">
       <legend>Select features</legend>
@@ -160,10 +182,15 @@ export const CheckboxGroupButtons = () => html`
 CheckboxGroupButtons.storyName = "Checkbox Group - Buttons";
 
 export const StyleComparison = () => html`
+
+${styles}
   <div class="card stack-md">
     <header>
       <h3>Side-by-Side Comparison</h3>
-      <small class="text-muted">Compare default vs button styles for both radio and checkbox groups</small>
+      <small class="text-muted"
+        >Compare default vs button styles for both radio and checkbox
+        groups</small
+      >
     </header>
     <div class="grid grid-cols-2 gap-lg">
       <div class="stack-md">
@@ -256,10 +283,14 @@ export const StyleComparison = () => html`
 StyleComparison.storyName = "Style Comparison";
 
 export const ToggleSwitches = () => html`
+${styles}
   <div class="card stack-md gap-lg">
     <header>
       <h3>Toggle Switches</h3>
-      <small class="text-muted">Uses <code>data-toggle</code> attribute for enhanced toggle switch styling</small>
+      <small class="text-muted"
+        >Uses <code>data-toggle</code> attribute for enhanced toggle switch
+        styling</small
+      >
     </header>
 
     <section class="card">
@@ -298,11 +329,14 @@ export const ToggleSwitches = () => html`
 ToggleSwitches.storyName = "Toggle Switches";
 
 export const CustomLayout = () => html`
+${styles}
   <div class="card stack-md">
     <h3>Custom Layout with Flex Utilities</h3>
-    <div class="alert alert-info">Override default column layout using standard CSS flex properties</div>
+    <div class="alert alert-info">
+      Override default column layout using standard CSS flex properties
+    </div>
 
-    <fieldset role="radiogroup" class="flex flex-wrap gap-sm">
+    <fieldset role="radiogroup" class="flex-row flex-wrap gap-sm">
       <legend>Horizontal Radio Group (flex-direction: row)</legend>
       <label>
         <input type="radio" name="horizontal-radio" value="1" checked />
@@ -318,7 +352,7 @@ export const CustomLayout = () => html`
       </label>
     </fieldset>
 
-    <fieldset role="group" class="flex flex-wrap gap-sm">
+    <fieldset role="group" class="flex-row flex-wrap gap-sm">
       <legend>Horizontal Checkbox Group (flex-direction: row)</legend>
       <label>
         <input type="checkbox" name="horizontal-check" value="1" checked />
@@ -339,10 +373,13 @@ export const CustomLayout = () => html`
 CustomLayout.storyName = "Custom Layout";
 
 export const ButtonStyleVariants = () => html`
+${styles}
   <div class="card stack-md">
     <header>
       <h3>Button Style Variants</h3>
-      <small class="text-muted">Examples of button-style groups in different contexts</small>
+      <small class="text-muted"
+        >Examples of button-style groups in different contexts</small
+      >
     </header>
     <div class="stack-md gap-lg max-w-lg">
       <fieldset role="radiogroup" class="buttons">
@@ -421,7 +458,10 @@ export const AccessibleFormGroups = {
       <div class="card stack-md">
         <header>
           <h2>Accessibility Features</h2>
-          <small class="text-muted">Form groups include proper ARIA attributes, semantic HTML, and keyboard navigation support.</small>
+          <small class="text-muted"
+            >Form groups include proper ARIA attributes, semantic HTML, and
+            keyboard navigation support.</small
+          >
         </header>
         <div class="card max-w-md">
           <form class="stack-md gap-lg" @submit=${handleSubmit}>
@@ -436,7 +476,12 @@ export const AccessibleFormGroups = {
 
               <fieldset role="group" class="flex flex-row">
                 <label>
-                  <input type="radio" name="notification" value="email" checked />
+                  <input
+                    type="radio"
+                    name="notification"
+                    value="email"
+                    checked
+                  />
                   <span>Email only</span>
                 </label>
                 <label>
@@ -456,7 +501,9 @@ export const AccessibleFormGroups = {
 
             <fieldset role="group" aria-describedby="topics-help">
               <legend>Topics to Follow</legend>
-              <small id="topics-help" class="text-muted">Select all topics you're interested in</small>
+              <small id="topics-help" class="text-muted"
+                >Select all topics you're interested in</small
+              >
               <label data-toggle>
                 <input type="checkbox" name="topics" value="product" checked />
                 <span>Product Updates</span>
@@ -472,14 +519,16 @@ export const AccessibleFormGroups = {
             </fieldset>
 
             <nav class="flex gap-sm">
-              <button type="submit" class="btn-primary">Save Preferences</button>
+              <button type="submit" class="btn-primary">
+                Save Preferences
+              </button>
               <button type="reset" class="btn-secondary">Reset</button>
             </nav>
           </form>
         </div>
       </div>
     `;
-  }
+  },
 };
 
 AccessibleFormGroups.storyName = "Accessible Form Groups";

package/stories/utils/PdsAsk.stories.js

@@ -1,4 +1,4 @@
-import { html } from 'lit';
+import { html } from 'lit';
 import { ask as askFallback } from '../../../../src/js/common/ask.js';
 import { toastFormData } from './toast-utils.js';
 
@@ -50,13 +50,13 @@ const marketingSchema = {
 
 const marketingUiSchema = {
   description: {
-    'ui:widget': 'textarea',
-    'ui:options': {
-      rows: 3
-    }
+    'ui:widget': 'richtext'
+  },
+  emphasis: {
+    'ui:class': 'buttons'
   },
   audiences: {
-    'ui:widget': 'checkboxes'
+    'ui:class': 'buttons'
   }
 };
 
@@ -128,7 +128,7 @@ export const BareConfirm = {
   }
 };
 
-export const SimpleForm = {
+export const MiniForm = {
   name: 'Mini form submission',
   render: () => {
     const handleClick = async (event) => {
@@ -263,8 +263,8 @@ export const QuickConfirm = {
   }
 };
 
-export const JsonformSubdialog = {
-  name: 'Embed a pds-jsonform subform',
+export const formSubdialog = {
+  name: 'Embed a pds-form subform',
   render: () => {
     const handleClick = async (event) => {
       const ask = ensureAsk();
@@ -278,19 +278,20 @@ export const JsonformSubdialog = {
       const dialogResult = await ask(
         html`
           <form method="dialog" class="stack-md min-w-sm">
-            <pds-jsonform
+            <pds-form
               id="spotlight-form"
               .jsonSchema=${marketingSchema}
               .uiSchema=${marketingUiSchema}
               .values=${marketingInitialValues}
               hide-actions
-            ></pds-jsonform>
+            ></pds-form>
             <input type="hidden" name="spotlight" value="" />
           </form>
         `,
         {
           title: 'Marketing spotlight',
           useForm: true,
+          maxHeight: '500px',
           buttons: {
             ok: { name: 'Save changes', primary: true },
             cancel: { name: 'Cancel', cancel: true }
@@ -329,7 +330,7 @@ export const JsonformSubdialog = {
               });
 
               if (typeof customElements?.whenDefined === 'function') {
-                customElements.whenDefined('pds-jsonform').then(() => syncHidden());
+                customElements.whenDefined('pds-form').then(() => syncHidden());
               } else {
                 syncHidden();
               }
@@ -366,7 +367,7 @@ export const JsonformSubdialog = {
       >
         <h3>Deep editing workflows</h3>
         <p>
-          Use <code>PDS.ask()</code> with <code>useForm: true</code> to mount an entire <code>&lt;pds-jsonform&gt;</code>
+          Use <code>PDS.ask()</code> with <code>useForm: true</code> to mount an entire <code>&lt;pds-form&gt;</code>
           inside the dialog. The promise resolves with the form data, letting you merge the changes into the parent flow.
         </p>
         <button class="btn btn-outline" @click=${handleClick}>Edit spotlight copy</button>