@aarhus-university/au-lib-react-components 11.1.0 → 11.1.1

package/stories/AUToolbarComponent.stories.tsx

@@ -1,220 +1,326 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { closeAllContentTogglesInToolbar, findToolbar } 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';
-
-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: [
-    <div className="form__field">
-      <label htmlFor="demo-search">Search</label>
-      <input type="search" autoComplete="off" autoCorrect="off" autoCapitalize="off" id="demo-search" />
-    </div>,
-    <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}
-      beforeCallback={(content: HTMLElement) => closeAllContentTogglesInToolbar(findToolbar(content))}
-      onClick={(content: HTMLElement, button: HTMLButtonElement) => console.log(content, button)}
-      afterCallback={(content: HTMLElement, button: HTMLButtonElement) => {
-        const toolbar = findToolbar(content);
-        const ariaExpanded = button.getAttribute('aria-expanded');
-        if (ariaExpanded === 'true') {
-          toolbar?.classList.add('toolbar--has-popout');
-        } else {
-          toolbar?.classList.remove('toolbar--has-popout');
-        }
-      }}
-    >
-      <div className="toolbar__filter">
-        <button
-          type="button"
-          className="toolbar__filter__toggle content-toggle__toggle"
-          aria-expanded={false}
-        >
-          Sted
-        </button>
-        <div
-          className="toolbar__filter__content content-toggle__content"
-          hidden
-        >
-          <fieldset className="selection-list">
-            <legend>
-              Vælg sted
-            </legend>
-            <div className="form__field form__field--inline-label">
-              <label htmlFor="search-location">Søg</label>
-              <input type="search" id="search-location" />
-            </div>
-            <div className="toolbar__filter__content__options">
-              <div className="selection-list__option">
-                <input type="checkbox" id="option-1" />
-                <label htmlFor="option-1">Aarhus</label>
-              </div>
-              <div className="selection-list__option">
-                <input type="checkbox" id="option-2" />
-                <label htmlFor="option-2">København</label>
-              </div>
-              <div className="selection-list__option">
-                <input type="checkbox" id="option-3" />
-                <label htmlFor="option-3">Herning</label>
-              </div>
-              <div className="selection-list__option">
-                <input type="checkbox" id="option-4" />
-                <label htmlFor="option-4">Øvrige</label>
-              </div>
-            </div>
-          </fieldset>
-        </div>
-      </div>
-    </AUContentToggleComponent>,
-    <AUContentToggleComponent
-      toggled={false}
-      beforeCallback={(content: HTMLElement) => closeAllContentTogglesInToolbar(findToolbar(content))}
-      onClick={(content: HTMLElement, button: HTMLButtonElement) => console.log(content, button)}
-      afterCallback={(content: HTMLElement, button: HTMLButtonElement) => {
-        const toolbar = findToolbar(content);
-        const ariaExpanded = button.getAttribute('aria-expanded');
-        if (ariaExpanded === 'true') {
-          toolbar?.classList.add('toolbar--has-popout');
-        } else {
-          toolbar?.classList.remove('toolbar--has-popout');
-        }
-      }}
-    >
-      <div className="toolbar__filter">
-        <button
-          type="button"
-          className="toolbar__filter__toggle content-toggle__toggle"
-          aria-expanded={false}
-        >
-          Fakultet
-        </button>
-        <div
-          className="toolbar__filter__content content-toggle__content"
-          hidden
-        >
-          <fieldset className="selection-list">
-            <legend>
-              Vælg fakultet
-            </legend>
-            <div className="form__field form__field--inline-label">
-              <label htmlFor="search-faculty">Søg</label>
-              <input type="search" id="search-faculty" />
-            </div>
-            <div className="toolbar__filter__content__options">
-              <div className="selection-list__option">
-                <input type="checkbox" id="option-5" />
-                <label htmlFor="option-5">Arts</label>
-              </div>
-              <div className="selection-list__option">
-                <input type="checkbox" id="option-6" />
-                <label htmlFor="option-6">Health</label>
-              </div>
-              <div className="selection-list__option">
-                <input type="checkbox" id="option-7" />
-                <label htmlFor="option-7">Natural Sciences</label>
-              </div>
-              <div className="selection-list__option">
-                <input type="checkbox" id="option-8" />
-                <label htmlFor="option-8">Technical Sciences</label>
-              </div>
-              <div className="selection-list__option">
-                <input type="checkbox" id="option-9" />
-                <label htmlFor="option-9">Aarhus BSS</label>
-              </div>
-            </div>
-          </fieldset>
-        </div>
-      </div>
-    </AUContentToggleComponent>
-  ],
-};
+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>
+  ],
+};