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

package/package.json

@@ -1,7 +1,7 @@
 {
   "sideEffects": false,
   "name": "@aarhus-university/au-lib-react-components",
-  "version": "11.1.0",
+  "version": "11.1.2",
   "description": "Library for shared React components for various applications on au.dk",
   "scripts": {
     "test": "jest",
@@ -72,9 +72,9 @@
     "webpack-cli": "^4.9.2"
   },
   "dependencies": {
-    "@aarhus-university/au-designsystem-delphinus": "0.34.2",
+    "@aarhus-university/au-designsystem-delphinus": "0.34.8",
     "@aarhus-university/au-designsystem-delphinus-dev": "0.2.0",
-    "@aarhus-university/types": "^0.17.2",
+    "@aarhus-university/types": "^0.17.4",
     "@reduxjs/toolkit": "^1.8.3",
     "@types/google.analytics": "^0.0.42",
     "@types/history": "^5.0.0",

package/src/components/AUContentToggleComponent.tsx

@@ -3,8 +3,6 @@ import React, {
   useRef,
   FC,
 } from 'react';
-// import { setContentToggle } from '@aarhus-university/au-desi
-// gnsystem-delphinus/source/js/components/content-toggle';
 import { setContentToggle } from '@aarhus-university/au-designsystem-delphinus/source/js/components/content-toggle';
 
 const AUContentToggleComponent: FC<AUContentToggleComponentProps> = ({

package/src/components/AUErrorComponent.tsx

@@ -21,7 +21,7 @@ const AUErrorComponent: FC<AUErrorComponentExtendedProps> = ({
         type="warning"
         header={`${withStatus ? `${status}: ` : ''}${header}`}
         content={[
-          <p>{message}</p>,
+          <p dangerouslySetInnerHTML={{ __html: message }} />,
         ]}
       />
     );
@@ -33,7 +33,7 @@ const AUErrorComponent: FC<AUErrorComponentExtendedProps> = ({
         type="warning"
         header={withStatus ? status : undefined}
         content={[
-          <p>{error}</p>,
+          <p dangerouslySetInnerHTML={{ __html: error }} />,
         ]}
       />
     );
@@ -45,7 +45,7 @@ const AUErrorComponent: FC<AUErrorComponentExtendedProps> = ({
         type="warning"
         header={withStatus ? `${status}` : undefined}
         content={[
-          <p>{JSON.stringify(data)}</p>,
+          <p dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }} />,
         ]}
       />
     );
@@ -57,7 +57,7 @@ const AUErrorComponent: FC<AUErrorComponentExtendedProps> = ({
         type="warning"
         header={withStatus ? code : undefined}
         content={[
-          <p>{message}</p>,
+          <p dangerouslySetInnerHTML={{ __html: message || '' }} />,
         ]}
       />
     );

package/src/components/AUSpinnerComponent.tsx

@@ -9,18 +9,17 @@ const AUSpinnerComponent: FC<AUSpinnerComponentProps> = ({
   className,
   children,
 }: AUSpinnerComponentProps) => {
+  let classNames = 'processing-state';
+  if (init === 'table' || init === 'box') {
+    classNames = `${classNames} processing-state--init-${init}`;
+  }
+  if (className) {
+    classNames = `${classNames} ${className}`;
+  }
   if (!loaded) {
-    if (init === 'table' || init === 'box') {
-      return (
-        <div
-          className={`processing-state processing-state--init-${init} ${className}`}
-          style={{ minHeight: height }}
-        />
-      );
-    }
     return (
       <div
-        className={`processing-state ${className}`}
+        className={classNames}
         style={{ minHeight: height }}
       />
     );
@@ -29,5 +28,9 @@ const AUSpinnerComponent: FC<AUSpinnerComponentProps> = ({
   return children;
 };
 
+AUSpinnerComponent.defaultProps = {
+  className: '',
+};
+
 AUSpinnerComponent.displayName = 'AUSpinnerComponent';
 export default AUSpinnerComponent;

package/src/components/AUStepComponent.tsx

@@ -1,41 +1,41 @@
-import React, { FC } from 'react';
-
-const AUStepComponent: FC<AUStepComponentProps> = ({
-  step,
-  children,
-  stepHeadlines,
-  introElement,
-  outroElement,
-}: AUStepComponentProps) => (
-  <>
-    {
-      (step > -1 && step < children.length) && (
-        <ol className="stepper" data-steps={children.length}>
-          {
-            stepHeadlines.map((headline, index) => (
-              <li key={headline} className={`stepper__item${index === step ? ' stepper__item--active' : ''}`}>
-                <span className="stepper__item__label">{headline}</span>
-              </li>
-            ))
-          }
-        </ol>
-      )
-    }
-    {
-      step < 0 && introElement
-    }
-    {(
-      children[step]) || null}
-    {
-      (step > children.length - 1) && outroElement
-    }
-  </>
-);
-
-AUStepComponent.defaultProps = {
-  introElement: undefined,
-  outroElement: undefined,
-};
-
-AUStepComponent.displayName = 'AUStepComponent';
-export default AUStepComponent;
+import React, { FC } from 'react';
+
+const AUStepComponent: FC<AUStepComponentProps> = ({
+  step,
+  children,
+  stepHeadlines,
+  introElement,
+  outroElement,
+}: AUStepComponentProps) => (
+  <>
+    {
+      (step > -1 && step < children.length) && (
+        <ol className="stepper" data-steps={children.length}>
+          {
+            stepHeadlines.map((headline, index) => (
+              <li key={headline} className={`stepper__item${index === step ? ' stepper__item--active' : ''}`}>
+                <span className="stepper__item__label">{headline}</span>
+              </li>
+            ))
+          }
+        </ol>
+      )
+    }
+    {
+      step < 0 && introElement
+    }
+    {(
+      children[step]) || null}
+    {
+      (step > children.length - 1) && outroElement
+    }
+  </>
+);
+
+AUStepComponent.defaultProps = {
+  introElement: undefined,
+  outroElement: undefined,
+};
+
+AUStepComponent.displayName = 'AUStepComponent';
+export default AUStepComponent;

package/src/lib/hooks.ts

@@ -14,6 +14,7 @@ const useModal = (
   onClose: () => void = () => { },
 ): void => {
   useEffect(() => {
+    let cleanUp: ExtendedCleanUpPair[] = [];
     const modalView = document.getElementById(domId);
     if (modalView) {
       const header = modalView.querySelector('.modal-view__header');
@@ -24,7 +25,7 @@ const useModal = (
     }
 
     if (sender && show) {
-      showModal(domId, sender, () => {
+      cleanUp = showModal(domId, sender, () => {
         onClose();
       }, closeable);
     }
@@ -32,6 +33,17 @@ const useModal = (
     if (sender && !show && modalIsVisible(modalView)) {
       hideModal(domId, sender);
     }
+
+    return () => {
+      cleanUp.forEach((c) => {
+        if (c.clickEvent) {
+          c.element.removeEventListener('click', c.clickEvent);
+        }
+        if (c.keyUpEvent) {
+          c.element.removeEventListener('keyup', c.keyUpEvent);
+        }
+      });
+    };
   });
 };
 

package/stories/AUErrorComponent.stories.tsx

@@ -21,7 +21,7 @@ export const AU_Error = Template.bind({});
 AU_Error.args = {
   error: {
     header: 'Our own custom error',
-    message: 'With a nice header and descriptive error message',
+    message: 'With a nice header and descriptive error message, maybe a hint of some <a href="mailto:#">contact support info</a>',
     status: 500,
   },
 };

package/stories/AUToolbarComponent.stories.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { closeAllContentTogglesInToolbar, findToolbar } from '@aarhus-university/au-designsystem-delphinus/source/js/components/toolbar';
+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',
@@ -40,10 +41,15 @@ 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>,
+    <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" />,
@@ -102,16 +108,27 @@ Filter.args = {
   elements: [
     <AUContentToggleComponent
       toggled={false}
+      onClick={(popout: HTMLElement) => {
+        contentToggleEdgeHandling(popout);
+        lockBodyScroll();
+      }}
       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');
+        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">
@@ -119,55 +136,111 @@ Filter.args = {
           type="button"
           className="toolbar__filter__toggle content-toggle__toggle"
           aria-expanded={false}
+          aria-label="Filter 1"
         >
-          Sted
+          Filter 1
         </button>
         <div
-          className="toolbar__filter__content content-toggle__content"
+          className="toolbar__popout 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 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>
-              <div className="selection-list__option">
-                <input type="checkbox" id="option-3" />
-                <label htmlFor="option-3">Herning</label>
+            </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="selection-list__option">
-                <input type="checkbox" id="option-4" />
-                <label htmlFor="option-4">Øvrige</label>
+              <div className="toolbar__filter__content__actions">
+                <div className="button-container">
+                  <input type="submit" className="content-toggle__close button button--small" value="Gem" />
+                </div>
               </div>
-            </div>
-          </fieldset>
+            </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))}
-      onClick={(content: HTMLElement, button: HTMLButtonElement) => console.log(content, button)}
       afterCallback={(content: HTMLElement, button: HTMLButtonElement) => {
-        const toolbar = findToolbar(content);
         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">
@@ -175,44 +248,77 @@ Filter.args = {
           type="button"
           className="toolbar__filter__toggle content-toggle__toggle"
           aria-expanded={false}
+          aria-label="Filter 1"
         >
-          Fakultet
+          Filter 2
         </button>
         <div
-          className="toolbar__filter__content content-toggle__content"
+          className="toolbar__popout 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 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>
-              <div className="selection-list__option">
-                <input type="checkbox" id="option-8" />
-                <label htmlFor="option-8">Technical Sciences</label>
+            </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="selection-list__option">
-                <input type="checkbox" id="option-9" />
-                <label htmlFor="option-9">Aarhus BSS</label>
+              <div className="toolbar__filter__content__actions">
+                <div className="button-container">
+                  <input type="submit" className="content-toggle__close button button--small" value="Gem" />
+                </div>
               </div>
-            </div>
-          </fieldset>
+            </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>