Story updates and formatting

capitec · Aug 16, 2023 · 53ec5d9 · 53ec5d9
1 parent c9795ae
commit 53ec5d9
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
diff --git a/src/expander/Expander.stories.ts b/src/expander/Expander.stories.ts
@@ -156,7 +156,7 @@ const App = () =>
 export const Expand_Icon: ComponentStoryFormat<Args> = {
     render: (args: Args) => html`
     <omni-expander data-testid="test-expander" label="${ifNotEmpty(args.label)}">
-        <svg slot="expand-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100%" height="100%"><path d="m7.446 6.397.084.073L13 11.939l5.47-5.47a.75.75 0 0 1 1.133.977l-.073.084L14.061 13l5.47 5.47a.75.75 0 0 1-.977 1.133l-.084-.073L13 14.061l-5.47 5.47a.75.75 0 0 1-1.133-.977l.073-.084L11.939 13l-5.47-5.47a.75.75 0 0 1 .977-1.133Z"/></svg>
+        ${unsafeHTML(args.expand_icon)}
         <omni-label label="The content of the expander"></omni-label>
     </omni-expander>
     `,
@@ -176,14 +176,15 @@ const App = () =>
     name: 'Slotted Expand Icon',
     description: 'Custom slotted expand icon',
     args: {
-        label: 'Slotted Expand Icon'
+        label: 'Slotted Expand Icon',
+        expand_icon: raw`<svg slot="expand-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100%" height="100%"><path d="m7.446 6.397.084.073L13 11.939l5.47-5.47a.75.75 0 0 1 1.133.977l-.073.084L14.061 13l5.47 5.47a.75.75 0 0 1-.977 1.133l-.084-.073L13 14.061l-5.47 5.47a.75.75 0 0 1-1.133-.977l.073-.084L11.939 13l-5.47-5.47a.75.75 0 0 1 .977-1.133Z"/></svg>`
     }
 };
 
 export const Header_Icon: ComponentStoryFormat<Args> = {
     render: (args: Args) => html`
     <omni-expander data-testid="test-expander" label="${ifNotEmpty(args.label)}">
-        <svg slot="header-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100%" height="100%"><path d="m7.446 6.397.084.073L13 11.939l5.47-5.47a.75.75 0 0 1 1.133.977l-.073.084L14.061 13l5.47 5.47a.75.75 0 0 1-.977 1.133l-.084-.073L13 14.061l-5.47 5.47a.75.75 0 0 1-1.133-.977l.073-.084L11.939 13l-5.47-5.47a.75.75 0 0 1 .977-1.133Z"/></svg>
+        ${unsafeHTML(args.header_icon)}       
         <omni-label label="The content of the expander"></omni-label>
     </omni-expander>
     `,
@@ -203,6 +204,7 @@ const App = () =>
     name: 'Slotted Header Icon',
     description: 'Custom slotted header icon',
     args: {
-        label: 'Slotted Header Icon'
+        label: 'Slotted Header Icon',
+        header_icon: raw`<svg slot="header-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100%" height="100%"><path d="m7.446 6.397.084.073L13 11.939l5.47-5.47a.75.75 0 0 1 1.133.977l-.073.084L14.061 13l5.47 5.47a.75.75 0 0 1-.977 1.133l-.084-.073L13 14.061l-5.47 5.47a.75.75 0 0 1-1.133-.977l.073-.084L11.939 13l-5.47-5.47a.75.75 0 0 1 .977-1.133Z"/></svg>`
     }
 };
diff --git a/src/expander/ExpanderGroup.stories.ts b/src/expander/ExpanderGroup.stories.ts
@@ -51,14 +51,15 @@ export const Expand_Mode: ComponentStoryFormat<Args> = {
             load: (args) => `import { OmniExpanderGroup, OmniExpander } from "@capitec/omni-components-react/expander";
             import { OmniLabel } from "@capitec/omni-components-react/label";
         
-            const App = () => <OmniExpanderGroup ${args.expandMode ? ` expand-mode='${args.expandMode}'` : ''}>
-            <OmniExpander label="First Expander">
-             <OmniLabel label="First expander content"></OmniLabel>
-            </OmniExpander>
-            <OmniExpander label="Second Expander">
-             <OmniLabel label="Second expander content"></OmniLabel>
-            </OmniExpander>
-            </OmniExpanderGroup>;`
+const App = () => 
+<OmniExpanderGroup ${args.expandMode ? ` expand-mode='${args.expandMode}'` : ''}>
+    <OmniExpander label="First Expander">
+        <OmniLabel label="First expander content"></OmniLabel>
+    </OmniExpander>
+    <OmniExpander label="Second Expander">
+        <OmniLabel label="Second expander content"></OmniLabel>
+    </OmniExpander>
+</OmniExpanderGroup>;`
         }
     ],
     description: () => html`<p>

diff --git a/src/expander/ExpanderGroup.ts b/src/expander/ExpanderGroup.ts
@@ -22,6 +22,8 @@ import { OmniElement } from '../core/OmniElement.js';
  * ```
  *
  * @element omni-expander-group
+ * 
+ * @slot - Default slot to slot multiple expanders.
  *
  * @cssprop --omni-expander-group-container-min-width - Expander group min width.
  * @cssprop --omni-expander-group-container-min-height - Expander group min height.