build(storybook): update to csf3 and match props from knapsack

libs/components/src/side-sheet/side-sheet.stories.js

@@ -4,57 +4,34 @@ import { Active as ActiveStatusHeader } from '../status-header/status-header.sto
 import tableRowSelectionContent from '../../stories/demos/table-row-selection.content.html?raw';
 import '../data-table/data-table.stories.scss';
 
-export default {
-  title: 'Components/Side sheet',
-  argTypes: {
-    onClick: { action: 'clicked' },
-    width: { control: { type: 'number' } },
-  },
-  args: {
-    width: 800,
-  },
-  parameters: {
-    actions: {
-      handles: ['click cv-button'],
-    },
-  },
-  tags: ['autodocs'],
-};
+const renderStory = (story, args = {}) =>
+  story.render({ ...(story.args ?? {}), ...args });
 
-export const Basic = ({ width }) => {
+const attachSideSheetToggle = ({
+  triggerSelector,
+  sideSheetSelector,
+  childTriggerSelector,
+  childSideSheetSelector,
+}) => {
   document.addEventListener(
     'DOMContentLoaded',
     () => {
-      const sideSheet = document.querySelector('cv-side-sheet');
+      const sideSheet = document.querySelector(sideSheetSelector);
+
       document
-        .querySelector('cv-button')
+        .querySelector(triggerSelector)
         ?.addEventListener('click', () =>
           sideSheet?.open ? sideSheet.close() : sideSheet?.show(),
         );
-    },
-    { once: true },
-  );
-  return `
-        <cv-button raised>Open side sheet</cv-button>
-        <cv-side-sheet heading="Sample side sheet" width="${width}">
-        </cv-side-sheet>
-    `;
-};
 
-export const Multiple = ({ width }) => {
-  document.addEventListener(
-    'DOMContentLoaded',
-    () => {
-      const sideSheet = document.querySelector('#parentSideSheet');
-      const childSideSheet = document.querySelector('#childSideSheet');
+      if (!childTriggerSelector || !childSideSheetSelector) {
+        return;
+      }
+
+      const childSideSheet = document.querySelector(childSideSheetSelector);
 
       document
-        .querySelector('#parentTarget')
-        ?.addEventListener('click', () =>
-          sideSheet?.open ? sideSheet.close() : sideSheet?.show(),
-        );
-      document
-        .querySelector('#childTarget')
+        .querySelector(childTriggerSelector)
         ?.addEventListener('click', () =>
           childSideSheet?.open
             ? childSideSheet.close()
@@ -63,38 +40,84 @@ export const Multiple = ({ width }) => {
     },
     { once: true },
   );
+};
+
+const renderSingleSideSheet = ({
+  heading = 'Sample side sheet',
+  open = false,
+  pushed = false,
+  noPadding = false,
+  width,
+  content = '',
+}) => {
+  attachSideSheetToggle({
+    triggerSelector: 'cv-button',
+    sideSheetSelector: 'cv-side-sheet',
+  });
+
+  return `
+        ${
+          width
+            ? `<style>
+            cv-side-sheet {
+                --cv-side-sheet-width: ${width};
+            }
+        </style>`
+            : ''
+        }
+        <cv-button raised>Open side sheet</cv-button>
+        <cv-side-sheet ${heading ? `heading="${heading}"` : ''} ${open ? 'open' : ''} ${pushed ? 'pushed' : ''} ${noPadding ? 'noPadding' : ''}>
+          ${content}
+        </cv-side-sheet>
+    `;
+};
+
+const renderMultipleSideSheets = () => {
+  attachSideSheetToggle({
+    triggerSelector: '#parentTarget',
+    sideSheetSelector: '#parentSideSheet',
+    childTriggerSelector: '#childTarget',
+    childSideSheetSelector: '#childSideSheet',
+  });
+
   return `
         <cv-button id="parentTarget" raised>Open side sheet</cv-button>
-        <cv-side-sheet id="parentSideSheet" heading="Sample side sheet" width="${width}">
+        <cv-side-sheet id="parentSideSheet" heading="Sample side sheet">
             <cv-button id="childTarget" raised>Open child</cv-button>
         </cv-side-sheet>
-        <cv-side-sheet id="childSideSheet" heading="Child side sheet" width="${width}">
+        <cv-side-sheet id="childSideSheet" heading="Child side sheet">
         </cv-side-sheet>
     `;
 };
 
-export const StatusHeader = ({ width }) => {
-  document.addEventListener(
-    'DOMContentLoaded',
-    () => {
-      const sideSheet = document.querySelector('cv-side-sheet');
-      console.log(sideSheet);
-      document
-        .querySelector('cv-button')
-        ?.addEventListener('click', () =>
-          sideSheet?.open ? sideSheet.close() : sideSheet?.show(),
-        );
+export default {
+  title: 'Components/Side sheet',
+  argTypes: { onClick: { action: 'clicked' } },
+  parameters: {
+    actions: {
+      handles: ['click cv-button'],
     },
-    { once: true },
-  );
-  return `
-        <cv-button raised>Open side sheet</cv-button>
-        <cv-side-sheet noPadding width="${width}">
-          ${ActiveStatusHeader({
-            state: 'active',
-            title: 'Example status from a side sheet',
-          })}
-          ${tableRowSelectionContent}
-        </cv-side-sheet>
-    `;
+  },
+  tags: ['autodocs'],
+};
+
+export const Basic = {
+  render: renderSingleSideSheet,
+};
+
+export const Multiple = {
+  render: renderMultipleSideSheets,
+};
+
+export const StatusHeader = {
+  render: renderSingleSideSheet,
+  args: {
+    noPadding: true,
+    width: '800px',
+    content: `${renderStory(ActiveStatusHeader, {
+      state: 'active',
+      titleText: 'Example status from a side sheet',
+    })}
+          ${tableRowSelectionContent}`,
+  },
 };

libs/components/src/skeleton/skeleton.stories.js

@@ -1,52 +1,68 @@
 import '../checkbox/checkbox';
 import '../formfield/formfield';
 
-import { Basic } from '../typography/typography.stories';
+import typographyMeta, { Basic } from '../typography/typography.stories';
 import loremIpsumContent from '../../stories/demos/lorem-ipsum.content.html?raw';
 import tableProgressContent from '../../stories/demos/table-progress-indicator.content.html?raw';
 
 import 'skeleton-elements/css';
 
-export default {
-  title: 'Components/Skeleton',
+const renderStory = (story, meta, args = {}) => {
+  if (typeof story === 'function') {
+    return story(args);
+  }
+
+  const render = story.render ?? meta?.render;
+
+  if (typeof render !== 'function') {
+    throw new Error('Story render function is not available');
+  }
+
+  return render({ ...(story.args ?? {}), ...args });
 };
 
-const skeletonClsName = 'skeleton-text';
-const skeletonEffect = 'skeleton-effect-fade';
+const applySkeletonClasses = (elements) => {
+  Array.from(elements).forEach((element) => {
+    element.classList.add(skeletonClsName);
+    element.classList.add(skeletonEffect);
+  });
+};
 
-export const DataTable = () => {
+const createSkeletonContainer = (content, applySkeleton) => {
   const container = document.createElement('div');
-  container.innerHTML = tableProgressContent;
-  const tableCell = container.getElementsByClassName('mdc-data-table__cell');
-  Array.from(tableCell).forEach((cell) => {
-    cell.classList.add(skeletonClsName);
-    cell.classList.add(skeletonEffect);
-  });
+  container.innerHTML = content;
+  applySkeleton?.(container);
 
   return container;
 };
 
-export const Typography = () => {
-  const container = document.createElement('div');
-  container.classList.add(skeletonClsName);
-  container.classList.add(skeletonEffect);
-  container.innerHTML = `${Basic()}`;
+const renderSkeletonContent = (content) => {
+  return createSkeletonContainer(content, (container) => {
+    applySkeletonClasses(
+      container.children.length ? container.children : [container],
+    );
+  });
+};
 
-  return container;
+const renderDataTable = () => {
+  return createSkeletonContainer(tableProgressContent, (container) => {
+    applySkeletonClasses(
+      container.getElementsByClassName('mdc-data-table__cell'),
+    );
+  });
 };
 
-export const Content = () => {
-  const container = document.createElement('div');
-  container.classList.add(skeletonClsName);
-  container.classList.add(skeletonEffect);
-  container.innerHTML = loremIpsumContent;
+const renderTypography = () => {
+  return renderSkeletonContent(renderStory(Basic, typographyMeta));
+};
 
-  return container;
+const renderContent = () => {
+  return renderSkeletonContent(loremIpsumContent);
 };
 
-export const Checkbox = ({ label = 'Bananas', indeterminate }) => {
-  const container = document.createElement('div');
-  container.innerHTML = `
+const renderCheckbox = ({ label = 'Bananas', indeterminate }) => {
+  const container = createSkeletonContainer(
+    `
       <style>
           cv-formfield {
               display: block;
@@ -65,13 +81,45 @@ export const Checkbox = ({ label = 'Bananas', indeterminate }) => {
 
       <cv-formfield label="${label}">
           <cv-checkbox class="child" checked></cv-checkbox>
-      </cv-formfield>`;
-
-  const labels = container.getElementsByTagName('cv-formfield');
-  Array.from(labels).forEach((label) => {
-    label.classList.add(skeletonClsName);
-    label.classList.add(skeletonEffect);
-  });
+      </cv-formfield>`,
+    (checkboxContainer) => {
+      applySkeletonClasses(
+        checkboxContainer.getElementsByTagName('cv-formfield'),
+      );
+    },
+  );
 
   return container;
 };
+
+export default {
+  title: 'Components/Skeleton',
+  argTypes: {
+    label: { control: 'text' },
+    indeterminate: { control: 'boolean' },
+  },
+  tags: ['autodocs'],
+};
+
+const skeletonClsName = 'skeleton-text';
+const skeletonEffect = 'skeleton-effect-fade';
+
+export const DataTable = {
+  render: renderDataTable,
+};
+
+export const Typography = {
+  render: renderTypography,
+};
+
+export const Content = {
+  render: renderContent,
+};
+
+export const Checkbox = {
+  render: renderCheckbox,
+  args: {
+    label: 'Bananas',
+    indeterminate: false,
+  },
+};