@pure-ds/storybook 0.7.25 → 0.7.26

package/stories/primitives/Tables.stories.js

@@ -17,6 +17,10 @@ export default {
 
 export const DefaultTable = () => html`
   <section class="card">
+    <header>
+      <h3>Default Table</h3>
+      <small class="text-muted">Baseline semantic table styling for common data presentation.</small>
+    </header>
     <table>
       <thead>
         <tr>
@@ -60,6 +64,10 @@ DefaultTable.storyName = 'Default Table';
 
 export const StripedTable = () => html`
   <section class="card">
+    <header>
+      <h3>Striped Table</h3>
+      <small class="text-muted">Use <code>.table-striped</code> for alternating row backgrounds.</small>
+    </header>
     <table class="table-striped">
       <thead>
         <tr>
@@ -109,6 +117,10 @@ StripedTable.storyName = 'Striped Table';
 
 export const BorderedCompactTable = () => html`
   <section class="card">
+    <header>
+      <h3>Bordered Compact Table</h3>
+      <small class="text-muted">Dense data table using <code>.table-bordered</code> and <code>.table-compact</code>.</small>
+    </header>
     <table class="table-bordered table-compact">
       <thead>
         <tr>
@@ -157,13 +169,13 @@ export const BorderedCompactTable = () => html`
 BorderedCompactTable.storyName = 'Bordered Compact Table';
 
 export const TableResponsiveWrapper = () => html`
-  <div class="card">
-    <h2>Responsive Table Wrapper</h2>
-    <p class="text-muted">
+  <header class="card">
+    <h3>Responsive Table Wrapper</h3>
+    <small class="text-muted">
       Wrap tables in <code>.table-responsive</code> for horizontal scrolling on mobile.
       This is the recommended approach for wide data tables.
-    </p>
-  </div>
+    </small>
+  </header>
   
   <div class="table-responsive">
     <table class="table-striped">
@@ -241,7 +253,10 @@ TableResponsiveWrapper.storyName = 'Responsive Wrapper';
 
 export const ResponsiveTable = () => html`
   <section class="card">
-    <small class="text-muted">Resize the window to see horizontal scrolling on small screens</small>
+    <header>
+      <h3>Responsive Table</h3>
+      <small class="text-muted">Resize the window to see horizontal scrolling on small screens.</small>
+    </header>
     <div class="table-responsive">
       <table class="table-striped">
         <thead>
@@ -297,7 +312,10 @@ ResponsiveTable.storyName = 'Responsive Table';
 
 export const TablesReference = () => html`
   <div class="card">
-    <h2>Table Classes Reference</h2>
+    <header>
+      <h3>Table Classes Reference</h3>
+      <small class="text-muted">Quick reference for table primitives and responsive wrappers.</small>
+    </header>
   
     <table class="table-bordered">
     <thead>

package/stories/utils/PdsAsk.stories.js

@@ -75,7 +75,7 @@ const formDataToObject = (formData) => {
 };
 
 export default {
-  title: 'Utilities/PDS ask',
+  title: 'PDS/PDS Object',
   tags: ['interaction', 'dialogs', 'forms', 'modal', 'dialog', 'alert', 'confirm', 'prompt', 'popup', 'overlay'],
   parameters: {
     pds: {
@@ -90,7 +90,7 @@ Use it to collect quick confirmations or to stage entire forms before committing
   }
 };
 
-export const BareConfirm = {
+const AreYouSure = {
   name: 'Are you sure?',
   render: () => {
     const handleClick = async (event) => {
@@ -129,7 +129,7 @@ export const BareConfirm = {
   }
 };
 
-export const MiniForm = {
+const MiniFormSubmission = {
   name: 'Mini form submission',
   render: () => {
     const handleClick = async (event) => {
@@ -202,7 +202,7 @@ export const MiniForm = {
   }
 };
 
-export const QuickConfirm = {
+const BooleanConfirmFlow = {
   name: 'Boolean confirm flow',
   render: () => {
     const handleClick = async (event) => {
@@ -264,7 +264,7 @@ export const QuickConfirm = {
   }
 };
 
-export const formSubdialog = {
+const EmbedPdsFormSubform = {
   name: 'Embed a pds-form subform',
   render: () => {
     const handleClick = async (event) => {
@@ -377,3 +377,15 @@ export const formSubdialog = {
     `;
   }
 };
+
+export const PDSAsk = {
+  name: 'PDS.ask()',
+  render: () => html`
+    <section class="stack-lg">
+      ${AreYouSure.render()}
+      ${MiniFormSubmission.render()}
+      ${BooleanConfirmFlow.render()}
+      ${EmbedPdsFormSubform.render()}
+    </section>
+  `
+};

package/stories/utils/PdsObjectApi.stories.js

@@ -187,22 +187,33 @@ const makeCard = ({
   code,
   outputLabel = 'Runtime output',
   initialOutput,
+  outputVariant = 'pre',
   buttonLabel,
   onRun,
   maxWidth = 'max-w-2xl'
 }) => {
   const section = document.createElement('section');
   section.className = `card stack-md ${maxWidth}`;
+  const outputTemplate = outputVariant === 'callout'
+    ? `
+      <div class="callout callout-info">
+        <strong class="callout-title">${outputLabel}</strong>
+        <div class="text-sm" data-output>${initialOutput || 'Click to inspect.'}</div>
+      </div>
+    `
+    : `
+      <div class="stack-sm">
+        <strong>${outputLabel}</strong>
+        <pre class="text-sm" data-output>${initialOutput || 'Click to inspect.'}</pre>
+      </div>
+    `;
   section.innerHTML = `
     ${renderCardHeader(title, description)}
     <div>
       <strong>Example</strong>
       <div data-code-host>Loading code sample…</div>
     </div>
-    <div class="stack-sm">
-      <strong>${outputLabel}</strong>
-      <pre class="text-sm" data-output>${initialOutput || 'Click to inspect.'}</pre>
-    </div>
+    ${outputTemplate}
     ${buttonLabel ? `<button class="btn btn-outline" type="button" data-run>${buttonLabel}</button>` : ''}
   `;
 
@@ -536,6 +547,7 @@ export const PDSAdoptLayers = {
       description: 'Adopt selected shared PDS layers plus local constructable stylesheets in one call.',
       code: adoptLayersCode,
       outputLabel: 'Notes',
+      outputVariant: 'callout',
       initialOutput: 'Use this pattern in custom elements that need tokens/primitives/utilities inside Shadow DOM.',
       maxWidth: 'max-w-3xl'
     });