@aarhus-university/au-lib-react-components 11.5.1 → 11.6.0

package/stories/AUToolbarComponent.stories.tsx

@@ -1,327 +1,326 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } 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: {
-      control: {
-        type: 'radio',
-      },
-      options: [
-        'da',
-        'en',
-      ],
-    },
-  },
-  decorators: [
-    (Story, context) => (
-      <ThemeWrapper theme={context.globals.theme}>
-        {Story()}
-      </ThemeWrapper>
-    )
-  ],
-} as ComponentMeta<typeof AUToolbarComponent>;
-
-const Template: ComponentStory<typeof AUToolbarComponent> = (args) => (
-  <>
-    <AUToolbarComponent {...args} />
-    <div className="box theme--background-secondary"><p>Content goes here...</p></div>
-  </>
-);
-
-export const Form_Field_and_Buttons_and_Link = Template.bind({});
-Form_Field_and_Buttons_and_Link.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>,
-  ]
-};
-
-export const Many_Actions = Template.bind({});
-Many_Actions.args = {
-  lang: 'da',
-  elements: Array(25).fill(null).map((_, i) => <AUButtonComponent label={`Action ${i + 1}`} />),
-};
-
-export const Groupings = Template.bind({});
-Groupings.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>,
-  ],
-};
-
-export const Filter = Template.bind({});
-Filter.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?'),
-};
+import React from 'react';
+import { ComponentStory, ComponentMeta } 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: {
+      control: {
+        type: 'radio',
+      },
+      options: [
+        'da',
+        'en',
+      ],
+    },
+  },
+  decorators: [
+    (Story, context) => (
+      <ThemeWrapper theme={context.globals.theme}>
+        {Story()}
+      </ThemeWrapper>
+    )
+  ],
+} as ComponentMeta<typeof AUToolbarComponent>;
+
+const Template: ComponentStory<typeof AUToolbarComponent> = (args) => (
+  <>
+    <AUToolbarComponent {...args} />
+    <div className="box theme--background-secondary"><p>Content goes here...</p></div>
+  </>
+);
+
+export const Form_Field_and_Buttons_and_Link = Template.bind({});
+Form_Field_and_Buttons_and_Link.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>,
+  ]
+};
+
+export const Many_Actions = Template.bind({});
+Many_Actions.args = {
+  lang: 'da',
+  elements: Array(25).fill(null).map((_, i) => <AUButtonComponent label={`Action ${i + 1}`} />),
+};
+
+export const Groupings = Template.bind({});
+Groupings.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>,
+  ],
+};
+
+export const Filter = Template.bind({});
+Filter.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>
+  ],
+};