@aarhus-university/au-lib-react-components 12.5.1 → 12.6.1

package/stories/AUToolbarComponent.stories.tsx

@@ -1,389 +1,389 @@
-import React from 'react';
-import { StoryObj, Meta } from '@storybook/react';
-import { closeAllContentTogglesInToolbar, contentToggleEdgeHandling, findToolbar, lockBodyScroll, unlockBodyScroll } from '@aarhus-university/au-designsystem-delphinus/source/js/components/toolbar';
-import AUToolbarComponent from '../src/components/AUToolbarComponent';
-import AUButtonComponent from '../src/components/AUButtonComponent';
-import AUContentToggleComponent from '../src/components/AUContentToggleComponent';
-import { ThemeWrapper } from './lib/helpers';
-import { isElementWithClassNameInEventPath } from '@aarhus-university/au-designsystem-delphinus/source/js/components/helpers';
-
-export default {
-  title: 'Delphinus/Toolbar',
-  component: AUToolbarComponent,
-  argTypes: {
-    lang: {
-      table: {
-        disable: true,
-      }
-    },
-    elements: {
-      table: {
-        disable: true,
-      }
-    },
-    onCloseContentToggles: {
-      table: {
-        disable: true,
-      }
-    },
-    buttonElements: {
-      table: {
-        disable: true,
-      }
-    },
-    buttonClass: {
-      table: {
-        disable: true,
-      }
-    },
-    title: {
-      table: {
-        disable: true,
-      }
-    },
-    center: {
-      table: {
-        disable: true,
-      }
-    },
-    noCollapse: {
-      table: {
-        disable: true,
-      }
-    },
-  },
-  decorators: [
-    (Story, context) => (
-      <ThemeWrapper theme={context.globals.theme}>
-        {Story()}
-      </ThemeWrapper>
-    )
-  ],
-} as Meta<typeof AUToolbarComponent>;
-
-type Story = StoryObj<typeof AUToolbarComponent>;
-
-export const Form_Field_and_Buttons_and_Link: Story = {
-  args: {
-    lang: 'da',
-    elements: [
-      <form className="form">
-        <div className="form__inline-submit">
-          <div className="form__field form__field--inline-label">
-            <label htmlFor="demo-search">Search</label>
-            <input type="search" autoComplete="off" autoCorrect="off" autoCapitalize="off" id="demo-search" />
-          </div>
-          <input className="form__inline-submit__button" type="submit" value="Submit" />
-        </div>
-      </form>,
-      <AUButtonComponent icon="confirm-circle" label="Mark as read" />,
-      <AUButtonComponent icon="delete" hideLabel label="Delete" />,
-      <AUButtonComponent type="text" label="Select all" />,
-      <div className="toolbar__split" />,
-      <div className="toolbar__text-item">
-        <a className="a--text-link" href="#">Open in new tab</a>
-      </div>,
-    ],
-  },
-  render: (args) => (
-    <>
-      <AUToolbarComponent {...args} />
-      <div className="box theme--background-secondary">
-        <p>Content goes here...</p>
-      </div>
-    </>
-  ),
-};
-
-export const Many_Actions: Story = {
-  args: {
-    lang: 'da',
-    elements: Array(25).fill(null).map((_, i) => <AUButtonComponent label={`Action ${i + 1}`} />),
-  },
-  render: (args) => (
-    <>
-      <AUToolbarComponent {...args} />
-      <div className="box theme--background-secondary">
-        <p>Content goes here...</p>
-      </div>
-    </>
-  ),
-};
-
-export const Groupings: Story = {
-  args: {
-    lang: 'da',
-    elements: [
-      <div className="toolbar__group">
-        <div className="form__field form__field--horizontal">
-          <label htmlFor="demo-all">All issues</label>
-          <input type="radio" name="demo" value="all" id="demo-all" defaultChecked />
-        </div>
-        <div className="form__field form__field--horizontal">
-          <label htmlFor="demo-open">Open</label>
-          <input type="radio" name="demo" value="all" id="demo-open" />
-        </div>
-        <div className="form__field form__field--horizontal">
-          <label htmlFor="demo-resolved">Resolved</label>
-          <input type="radio" name="demo" value="all" id="demo-resolved" />
-        </div>
-      </div>,
-      <div className="toolbar__split" />,
-      <div className="toolbar__group">
-        <div className="form__field form__field--horizontal">
-          <label htmlFor="demo-epics">Epics</label>
-          <input type="checkbox" id="demo-epics" defaultChecked />
-        </div>
-        <div className="form__field form__field--horizontal">
-          <label htmlFor="demo-stories">Stories</label>
-          <input type="checkbox" id="demo-stories" defaultChecked />
-        </div>
-        <div className="form__field form__field--horizontal">
-          <label htmlFor="demo-tasks">Tasks</label>
-          <input type="checkbox" id="demo-tasks" defaultChecked />
-        </div>
-      </div>,
-    ],
-  },
-  render: (args) => (
-    <>
-      <AUToolbarComponent {...args} />
-      <div className="box theme--background-secondary">
-        <p>Content goes here...</p>
-      </div>
-    </>
-  ),
-};
-
-export const Filter: Story = {
-  args: {
-    lang: 'da',
-    elements: [
-      <AUContentToggleComponent
-        toggled={false}
-        onClick={(popout: HTMLElement) => {
-          contentToggleEdgeHandling(popout);
-          lockBodyScroll();
-        }}
-        beforeCallback={(content: HTMLElement) => closeAllContentTogglesInToolbar(findToolbar(content))}
-        afterCallback={(content: HTMLElement, button: HTMLButtonElement) => {
-          const ariaExpanded = button.getAttribute('aria-expanded');
-          const toolbar = findToolbar(content);
-          if (ariaExpanded === 'true') {
-            toolbar?.classList.add('toolbar--has-popout');
-          } else {
-            toolbar?.classList.remove('toolbar--has-popout');
-          }
-  
-          content.addEventListener('click', (event: MouseEvent) => {
-            if ((event.target as HTMLElement).classList.contains('toolbar__popout')
-              && !isElementWithClassNameInEventPath(event as MouseEvent, 'toolbar__filter__content')) {
-              closeAllContentTogglesInToolbar(toolbar);
-              unlockBodyScroll();
-            }
-          });
-        }}
-      >
-        <div className="toolbar__filter">
-          <button
-            type="button"
-            className="toolbar__filter__toggle content-toggle__toggle"
-            aria-expanded={false}
-            aria-label="Filter 1"
-          >
-            Filter 1
-          </button>
-          <div
-            className="toolbar__popout content-toggle__content"
-            hidden
-          >
-            <div className="toolbar__filter__content toolbar__popout__content theme--normal">
-              <h3 className="toolbar__filter__content__title">
-                Vælg Filter 1
-              </h3>
-  
-              <form className="form toolbar__filter__content__search">
-                <div className="form__inline-submit">
-                  <div className="form__field form__field--inline-label">
-                    <label htmlFor="search-filter-1">
-                      Søg
-                    </label>
-                    <input
-                      type="search"
-                      id="search-filter-1"
-                    />
-                  </div>
-                  <input className="form__inline-submit__button" type="submit" value="Søg" />
-                </div>
-              </form>
-              <form
-                className="toolbar__filter__content__options-and-actions"
-                onSubmit={(event) => {
-                  event.preventDefault();
-                  unlockBodyScroll();
-                }}
-              >
-                <div
-                  className="toolbar__filter__content__options"
-                >
-                  <div className="toolbar__filter__content__options__scroll-container">
-                    <fieldset className="selection-list">
-                      <legend>
-                        5 valgmuligheder
-                      </legend>
-                      <div className="selection-list__option">
-                        <input type="checkbox" id="option-1" />
-                        <label htmlFor="option-1">Valgmulighed 1</label>
-                      </div>
-                      <div className="selection-list__option">
-                        <input type="checkbox" id="option-2" />
-                        <label htmlFor="option-2">Valgmulighed 2</label>
-                      </div>
-                      <div className="selection-list__option">
-                        <input type="checkbox" id="option-3" />
-                        <label htmlFor="option-3">Valgmulighed 3</label>
-                      </div>
-                      <div className="selection-list__option">
-                        <input type="checkbox" id="option-4" />
-                        <label htmlFor="option-4">Valgmulighed 4</label>
-                      </div>
-                      <div className="selection-list__option">
-                        <input type="checkbox" id="option-5" />
-                        <label htmlFor="option-5">Valgmulighed 5</label>
-                      </div>
-                    </fieldset>
-                  </div>
-                </div>
-                <div className="toolbar__filter__content__actions">
-                  <div className="button-container">
-                    <input type="submit" className="content-toggle__close button button--small" value="Gem" />
-                  </div>
-                </div>
-              </form>
-            </div>
-            <button
-              type="button"
-              className="toolbar__popout__close content-toggle__close button button--icon button--icon--hide-label icon-close"
-              onClick={() => unlockBodyScroll()}
-            >
-              Luk
-            </button>
-          </div>
-        </div>
-      </AUContentToggleComponent>,
-      <AUContentToggleComponent
-        toggled={false}
-        onClick={(popout: HTMLElement) => {
-          contentToggleEdgeHandling(popout);
-          lockBodyScroll();
-        }}
-        beforeCallback={(content: HTMLElement) => closeAllContentTogglesInToolbar(findToolbar(content))}
-        afterCallback={(content: HTMLElement, button: HTMLButtonElement) => {
-          const ariaExpanded = button.getAttribute('aria-expanded');
-          const toolbar = findToolbar(content);
-          if (ariaExpanded === 'true') {
-            toolbar?.classList.add('toolbar--has-popout');
-          } else {
-            toolbar?.classList.remove('toolbar--has-popout');
-          }
-  
-          content.addEventListener('click', (event: MouseEvent) => {
-            if ((event.target as HTMLElement).classList.contains('toolbar__popout')
-              && !isElementWithClassNameInEventPath(event as MouseEvent, 'toolbar__filter__content')) {
-              closeAllContentTogglesInToolbar(toolbar);
-              unlockBodyScroll();
-            }
-          });
-        }}
-      >
-        <div className="toolbar__filter">
-          <button
-            type="button"
-            className="toolbar__filter__toggle content-toggle__toggle"
-            aria-expanded={false}
-            aria-label="Filter 1"
-          >
-            Filter 2
-          </button>
-          <div
-            className="toolbar__popout content-toggle__content"
-            hidden
-          >
-            <div className="toolbar__filter__content toolbar__popout__content theme--normal">
-              <h3 className="toolbar__filter__content__title">
-                Vælg Filter 2
-              </h3>
-  
-              <form className="form toolbar__filter__content__search">
-                <div className="form__inline-submit">
-                  <div className="form__field form__field--inline-label">
-                    <label htmlFor="search-filter-2">
-                      Søg
-                    </label>
-                    <input
-                      type="search"
-                      id="search-filter-2"
-                    />
-                  </div>
-                  <input className="form__inline-submit__button" type="submit" value="Søg" />
-                </div>
-              </form>
-              <form
-                className="toolbar__filter__content__options-and-actions"
-                onSubmit={(event) => {
-                  event.preventDefault();
-                  unlockBodyScroll();
-                }}
-              >
-                <div
-                  className="toolbar__filter__content__options"
-                >
-                  <div className="toolbar__filter__content__options__scroll-container">
-                    <fieldset className="selection-list">
-                      <legend>
-                        3 valgmuligheder
-                      </legend>
-                      <div className="selection-list__option">
-                        <input type="checkbox" id="option-10" />
-                        <label htmlFor="option-10">Valgmulighed 1</label>
-                      </div>
-                      <div className="selection-list__option">
-                        <input type="checkbox" id="option-20" />
-                        <label htmlFor="option-20">Valgmulighed 2</label>
-                      </div>
-                      <div className="selection-list__option">
-                        <input type="checkbox" id="option-30" />
-                        <label htmlFor="option-30">Valgmulighed 3</label>
-                      </div>
-                    </fieldset>
-                  </div>
-                </div>
-                <div className="toolbar__filter__content__actions">
-                  <div className="button-container">
-                    <input type="submit" className="content-toggle__close button button--small" value="Gem" />
-                  </div>
-                </div>
-              </form>
-            </div>
-            <button
-              type="button"
-              className="toolbar__popout__close content-toggle__close button button--icon button--icon--hide-label icon-close"
-              onClick={() => unlockBodyScroll()}
-            >
-              Luk
-            </button>
-          </div>
-        </div>
-      </AUContentToggleComponent>
-    ],
-    onCloseContentToggles: () => console.log('luuuuuk?'),
-  },
-  render: (args) => (
-    <>
-      <AUToolbarComponent {...args} />
-      <div className="box theme--background-secondary">
-        <p>Content goes here...</p>
-      </div>
-    </>
-  ),
-};
+import React from 'react';
+import { StoryObj, Meta } from '@storybook/react';
+import { closeAllContentTogglesInToolbar, contentToggleEdgeHandling, findToolbar, lockBodyScroll, unlockBodyScroll } from '@aarhus-university/au-designsystem-delphinus/source/js/components/toolbar';
+import AUToolbarComponent from '../src/components/AUToolbarComponent';
+import AUButtonComponent from '../src/components/AUButtonComponent';
+import AUContentToggleComponent from '../src/components/AUContentToggleComponent';
+import { ThemeWrapper } from './lib/helpers';
+import { isElementWithClassNameInEventPath } from '@aarhus-university/au-designsystem-delphinus/source/js/components/helpers';
+
+export default {
+  title: 'Delphinus/Toolbar',
+  component: AUToolbarComponent,
+  argTypes: {
+    lang: {
+      table: {
+        disable: true,
+      }
+    },
+    elements: {
+      table: {
+        disable: true,
+      }
+    },
+    onCloseContentToggles: {
+      table: {
+        disable: true,
+      }
+    },
+    buttonElements: {
+      table: {
+        disable: true,
+      }
+    },
+    buttonClass: {
+      table: {
+        disable: true,
+      }
+    },
+    title: {
+      table: {
+        disable: true,
+      }
+    },
+    center: {
+      table: {
+        disable: true,
+      }
+    },
+    noCollapse: {
+      table: {
+        disable: true,
+      }
+    },
+  },
+  decorators: [
+    (Story, context) => (
+      <ThemeWrapper theme={context.globals.theme}>
+        {Story()}
+      </ThemeWrapper>
+    )
+  ],
+} as Meta<typeof AUToolbarComponent>;
+
+type Story = StoryObj<typeof AUToolbarComponent>;
+
+export const Form_Field_and_Buttons_and_Link: Story = {
+  args: {
+    lang: 'da',
+    elements: [
+      <form className="form">
+        <div className="form__inline-submit">
+          <div className="form__field form__field--inline-label">
+            <label htmlFor="demo-search">Search</label>
+            <input type="search" autoComplete="off" autoCorrect="off" autoCapitalize="off" id="demo-search" />
+          </div>
+          <input className="form__inline-submit__button" type="submit" value="Submit" />
+        </div>
+      </form>,
+      <AUButtonComponent icon="confirm-circle" label="Mark as read" />,
+      <AUButtonComponent icon="delete" hideLabel label="Delete" />,
+      <AUButtonComponent type="text" label="Select all" />,
+      <div className="toolbar__split" />,
+      <div className="toolbar__text-item">
+        <a className="a--text-link" href="#">Open in new tab</a>
+      </div>,
+    ],
+  },
+  render: (args) => (
+    <>
+      <AUToolbarComponent {...args} />
+      <div className="box theme--background-secondary">
+        <p>Content goes here...</p>
+      </div>
+    </>
+  ),
+};
+
+export const Many_Actions: Story = {
+  args: {
+    lang: 'da',
+    elements: Array(25).fill(null).map((_, i) => <AUButtonComponent label={`Action ${i + 1}`} />),
+  },
+  render: (args) => (
+    <>
+      <AUToolbarComponent {...args} />
+      <div className="box theme--background-secondary">
+        <p>Content goes here...</p>
+      </div>
+    </>
+  ),
+};
+
+export const Groupings: Story = {
+  args: {
+    lang: 'da',
+    elements: [
+      <div className="toolbar__group">
+        <div className="form__field form__field--horizontal">
+          <label htmlFor="demo-all">All issues</label>
+          <input type="radio" name="demo" value="all" id="demo-all" defaultChecked />
+        </div>
+        <div className="form__field form__field--horizontal">
+          <label htmlFor="demo-open">Open</label>
+          <input type="radio" name="demo" value="all" id="demo-open" />
+        </div>
+        <div className="form__field form__field--horizontal">
+          <label htmlFor="demo-resolved">Resolved</label>
+          <input type="radio" name="demo" value="all" id="demo-resolved" />
+        </div>
+      </div>,
+      <div className="toolbar__split" />,
+      <div className="toolbar__group">
+        <div className="form__field form__field--horizontal">
+          <label htmlFor="demo-epics">Epics</label>
+          <input type="checkbox" id="demo-epics" defaultChecked />
+        </div>
+        <div className="form__field form__field--horizontal">
+          <label htmlFor="demo-stories">Stories</label>
+          <input type="checkbox" id="demo-stories" defaultChecked />
+        </div>
+        <div className="form__field form__field--horizontal">
+          <label htmlFor="demo-tasks">Tasks</label>
+          <input type="checkbox" id="demo-tasks" defaultChecked />
+        </div>
+      </div>,
+    ],
+  },
+  render: (args) => (
+    <>
+      <AUToolbarComponent {...args} />
+      <div className="box theme--background-secondary">
+        <p>Content goes here...</p>
+      </div>
+    </>
+  ),
+};
+
+export const Filter: Story = {
+  args: {
+    lang: 'da',
+    elements: [
+      <AUContentToggleComponent
+        toggled={false}
+        onClick={(popout: HTMLElement) => {
+          contentToggleEdgeHandling(popout);
+          lockBodyScroll();
+        }}
+        beforeCallback={(content: HTMLElement) => closeAllContentTogglesInToolbar(findToolbar(content))}
+        afterCallback={(content: HTMLElement, button: HTMLButtonElement) => {
+          const ariaExpanded = button.getAttribute('aria-expanded');
+          const toolbar = findToolbar(content);
+          if (ariaExpanded === 'true') {
+            toolbar?.classList.add('toolbar--has-popout');
+          } else {
+            toolbar?.classList.remove('toolbar--has-popout');
+          }
+  
+          content.addEventListener('click', (event: MouseEvent) => {
+            if ((event.target as HTMLElement).classList.contains('toolbar__popout')
+              && !isElementWithClassNameInEventPath(event as MouseEvent, 'toolbar__filter__content')) {
+              closeAllContentTogglesInToolbar(toolbar);
+              unlockBodyScroll();
+            }
+          });
+        }}
+      >
+        <div className="toolbar__filter">
+          <button
+            type="button"
+            className="toolbar__filter__toggle content-toggle__toggle"
+            aria-expanded={false}
+            aria-label="Filter 1"
+          >
+            Filter 1
+          </button>
+          <div
+            className="toolbar__popout content-toggle__content"
+            hidden
+          >
+            <div className="toolbar__filter__content toolbar__popout__content theme--normal">
+              <h3 className="toolbar__filter__content__title">
+                Vælg Filter 1
+              </h3>
+  
+              <form className="form toolbar__filter__content__search">
+                <div className="form__inline-submit">
+                  <div className="form__field form__field--inline-label">
+                    <label htmlFor="search-filter-1">
+                      Søg
+                    </label>
+                    <input
+                      type="search"
+                      id="search-filter-1"
+                    />
+                  </div>
+                  <input className="form__inline-submit__button" type="submit" value="Søg" />
+                </div>
+              </form>
+              <form
+                className="toolbar__filter__content__options-and-actions"
+                onSubmit={(event) => {
+                  event.preventDefault();
+                  unlockBodyScroll();
+                }}
+              >
+                <div
+                  className="toolbar__filter__content__options"
+                >
+                  <div className="toolbar__filter__content__options__scroll-container">
+                    <fieldset className="selection-list">
+                      <legend>
+                        5 valgmuligheder
+                      </legend>
+                      <div className="selection-list__option">
+                        <input type="checkbox" id="option-1" />
+                        <label htmlFor="option-1">Valgmulighed 1</label>
+                      </div>
+                      <div className="selection-list__option">
+                        <input type="checkbox" id="option-2" />
+                        <label htmlFor="option-2">Valgmulighed 2</label>
+                      </div>
+                      <div className="selection-list__option">
+                        <input type="checkbox" id="option-3" />
+                        <label htmlFor="option-3">Valgmulighed 3</label>
+                      </div>
+                      <div className="selection-list__option">
+                        <input type="checkbox" id="option-4" />
+                        <label htmlFor="option-4">Valgmulighed 4</label>
+                      </div>
+                      <div className="selection-list__option">
+                        <input type="checkbox" id="option-5" />
+                        <label htmlFor="option-5">Valgmulighed 5</label>
+                      </div>
+                    </fieldset>
+                  </div>
+                </div>
+                <div className="toolbar__filter__content__actions">
+                  <div className="button-container">
+                    <input type="submit" className="content-toggle__close button button--small" value="Gem" />
+                  </div>
+                </div>
+              </form>
+            </div>
+            <button
+              type="button"
+              className="toolbar__popout__close content-toggle__close button button--icon button--icon--hide-label icon-close"
+              onClick={() => unlockBodyScroll()}
+            >
+              Luk
+            </button>
+          </div>
+        </div>
+      </AUContentToggleComponent>,
+      <AUContentToggleComponent
+        toggled={false}
+        onClick={(popout: HTMLElement) => {
+          contentToggleEdgeHandling(popout);
+          lockBodyScroll();
+        }}
+        beforeCallback={(content: HTMLElement) => closeAllContentTogglesInToolbar(findToolbar(content))}
+        afterCallback={(content: HTMLElement, button: HTMLButtonElement) => {
+          const ariaExpanded = button.getAttribute('aria-expanded');
+          const toolbar = findToolbar(content);
+          if (ariaExpanded === 'true') {
+            toolbar?.classList.add('toolbar--has-popout');
+          } else {
+            toolbar?.classList.remove('toolbar--has-popout');
+          }
+  
+          content.addEventListener('click', (event: MouseEvent) => {
+            if ((event.target as HTMLElement).classList.contains('toolbar__popout')
+              && !isElementWithClassNameInEventPath(event as MouseEvent, 'toolbar__filter__content')) {
+              closeAllContentTogglesInToolbar(toolbar);
+              unlockBodyScroll();
+            }
+          });
+        }}
+      >
+        <div className="toolbar__filter">
+          <button
+            type="button"
+            className="toolbar__filter__toggle content-toggle__toggle"
+            aria-expanded={false}
+            aria-label="Filter 1"
+          >
+            Filter 2
+          </button>
+          <div
+            className="toolbar__popout content-toggle__content"
+            hidden
+          >
+            <div className="toolbar__filter__content toolbar__popout__content theme--normal">
+              <h3 className="toolbar__filter__content__title">
+                Vælg Filter 2
+              </h3>
+  
+              <form className="form toolbar__filter__content__search">
+                <div className="form__inline-submit">
+                  <div className="form__field form__field--inline-label">
+                    <label htmlFor="search-filter-2">
+                      Søg
+                    </label>
+                    <input
+                      type="search"
+                      id="search-filter-2"
+                    />
+                  </div>
+                  <input className="form__inline-submit__button" type="submit" value="Søg" />
+                </div>
+              </form>
+              <form
+                className="toolbar__filter__content__options-and-actions"
+                onSubmit={(event) => {
+                  event.preventDefault();
+                  unlockBodyScroll();
+                }}
+              >
+                <div
+                  className="toolbar__filter__content__options"
+                >
+                  <div className="toolbar__filter__content__options__scroll-container">
+                    <fieldset className="selection-list">
+                      <legend>
+                        3 valgmuligheder
+                      </legend>
+                      <div className="selection-list__option">
+                        <input type="checkbox" id="option-10" />
+                        <label htmlFor="option-10">Valgmulighed 1</label>
+                      </div>
+                      <div className="selection-list__option">
+                        <input type="checkbox" id="option-20" />
+                        <label htmlFor="option-20">Valgmulighed 2</label>
+                      </div>
+                      <div className="selection-list__option">
+                        <input type="checkbox" id="option-30" />
+                        <label htmlFor="option-30">Valgmulighed 3</label>
+                      </div>
+                    </fieldset>
+                  </div>
+                </div>
+                <div className="toolbar__filter__content__actions">
+                  <div className="button-container">
+                    <input type="submit" className="content-toggle__close button button--small" value="Gem" />
+                  </div>
+                </div>
+              </form>
+            </div>
+            <button
+              type="button"
+              className="toolbar__popout__close content-toggle__close button button--icon button--icon--hide-label icon-close"
+              onClick={() => unlockBodyScroll()}
+            >
+              Luk
+            </button>
+          </div>
+        </div>
+      </AUContentToggleComponent>
+    ],
+    onCloseContentToggles: () => console.log('luuuuuk?'),
+  },
+  render: (args) => (
+    <>
+      <AUToolbarComponent {...args} />
+      <div className="box theme--background-secondary">
+        <p>Content goes here...</p>
+      </div>
+    </>
+  ),
+};