@pure-ds/storybook 0.7.23 → 0.7.26

package/.storybook/htmlPreview.css

@@ -75,3 +75,11 @@ pds-config-form {
     right: 0;
   }
 }
+
+#storybook-root {
+  header:has(.text-muted){
+    margin-bottom: var(--spacing-6, 1rem);
+    border-bottom: 1px solid var(--color-border);
+    border-radius: 0;
+  }
+}

package/.storybook/preview.js

@@ -1,6 +1,7 @@
 import { addons } from '@storybook/preview-api';
 import { SELECT_STORY, UPDATE_GLOBALS } from '@storybook/core-events';
 import React from 'react';
+import { html } from 'lit';
 import { Title, Subtitle, Description as DocsDescription, Controls } from '@storybook/blocks';
 import { PDS } from '@pds-src/js/pds.js';
 import { presets } from '@pds-src/js/pds-core/pds-config.js';
@@ -1424,6 +1425,26 @@ const withRelatedStories = (story, context) => {
   return result;
 };
 
+const withComponentStoryHeader = (story, context) => {
+  if (context.viewMode !== 'story') return story();
+
+  const titlePath = context.title || '';
+  if (!titlePath.startsWith('Components/')) return story();
+
+  const tagName = titlePath.split('/').pop() || 'component';
+  const storyTitle = context.name || 'Story';
+
+  return html`
+    <div class="stack-md">
+      <header>
+        <h2>${tagName}</h2>
+        <small class="text-muted">${storyTitle}</small>
+      </header>
+      ${story()}
+    </div>
+  `;
+};
+
 const DocsPage = () => React.createElement(
   React.Fragment,
   null,
@@ -1435,7 +1456,7 @@ const DocsPage = () => React.createElement(
 
 /** @type { import('@storybook/web-components').Preview } */
 const preview = {
-  decorators: [withGlobalsHandler, withPDS, withHTMLExtractor, withDescription, withRelatedStories],
+  decorators: [withGlobalsHandler, withPDS, withHTMLExtractor, withDescription, withComponentStoryHeader, withRelatedStories],
   parameters: {
     controls: {
       matchers: {
@@ -1457,6 +1478,7 @@ const preview = {
     },
     options: {
       storySort: {
+        method: 'alphabetical',
         order: [
           'About PDS',
           ['What Is PDS', 'Getting Started'],
@@ -1467,7 +1489,7 @@ const preview = {
             'Foundations',
             ['Colors', 'Typography', 'HTML Defaults', 'Icons', 'Spacing', 'Smart Surfaces'],
             'Primitives',
-            ['Buttons', 'Forms', 'Form Groups', 'Alerts', 'Badges', 'Cards', 'Tables', 'Media', 'Accordion'],
+            ['Buttons', 'Forms', 'Form Groups', 'Alerts', 'Badges', 'Cards', 'Articles', 'Tables', 'Media', 'Accordion'],
             'Layout',
             ['Overview', 'System'],
             'Utilities',
@@ -1477,7 +1499,7 @@ const preview = {
             'Enhancements',
             ['Mesh Gradients', 'Interactive States', 'Toggles', 'Dropdowns', 'Range Sliders', 'Required Fields'],
             'Components',
-            ['pds-form', 'Pds Icon', 'Pds Drawer', 'Pds Toaster', 'Pds Tabstrip', 'Pds Splitpanel', 'Pds Scrollrow', 'Pds Richtext', 'Pds Upload'],
+            ['*'],
             'Reference'
           ],
           'About PDS',
@@ -1485,7 +1507,7 @@ const preview = {
           'Foundations',
           ['Colors', 'Typography', 'HTML Defaults', 'Icons', 'Spacing', 'Smart Surfaces'],
           'Primitives',
-          ['Buttons', 'Forms', 'Form Groups', 'Alerts', 'Badges', 'Cards', 'Tables', 'Media', 'Accordion'],
+          ['Buttons', 'Forms', 'Form Groups', 'Alerts', 'Badges', 'Cards', 'Articles', 'Tables', 'Media', 'Accordion'],
           'Layout',
           ['Overview', 'System'],
           'Utilities',
@@ -1495,7 +1517,7 @@ const preview = {
           'Enhancements',
           ['Mesh Gradients', 'Interactive States', 'Toggles', 'Dropdowns', 'Range Sliders', 'Required Fields'],
           'Components',
-          ['pds-form', 'Pds Icon', 'Pds Drawer', 'Pds Toaster', 'Pds Tabstrip', 'Pds Splitpanel', 'Pds Scrollrow', 'Pds Richtext', 'Pds Upload'],
+          ['*'],
           'Reference',
           '*'
         ]