@aarhus-university/au-lib-react-components 10.21.0 → 10.22.0

package/.storybook/preview.js

@@ -1,4 +1,4 @@
-import '@aarhus-university/au-designsystem-delphinus-dev/build/style.css';
+import '@aarhus-university/au-designsystem-delphinus/build/style.css';
 import { globalTheme, globalLang } from '../stories/lib/helpers';
 
 export const parameters = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "sideEffects": false,
   "name": "@aarhus-university/au-lib-react-components",
-  "version": "10.21.0",
+  "version": "10.22.0",
   "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.33.1",
+    "@aarhus-university/au-designsystem-delphinus": "0.34.2",
     "@aarhus-university/au-designsystem-delphinus-dev": "0.2.0",
-    "@aarhus-university/types": "0.13.7",
+    "@aarhus-university/types": "^0.15.0",
     "@reduxjs/toolkit": "^1.8.3",
     "@types/google.analytics": "^0.0.42",
     "@types/history": "^5.0.0",

package/src/components/AUContentToggleComponent.tsx

@@ -3,28 +3,33 @@ 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> = ({
   toggled,
   classNames,
   children,
+  onClick,
   beforeCallback,
   afterCallback,
 }: AUContentToggleComponentProps) => {
   const toggleContainer = useRef<HTMLDivElement>(null);
   useEffect(() => {
     const toggle = toggleContainer?.current?.querySelector('.content-toggle__content');
-    let cleanUp: CleanUpPair | null = null;
+    let cleanUp: CleanUpPair[];
     if (toggle) {
-      cleanUp = setContentToggle(toggle, beforeCallback, afterCallback);
-      cleanUp?.element.setAttribute('aria-expanded', toggled ? 'true' : 'false');
+      cleanUp = setContentToggle(toggle, onClick, beforeCallback, afterCallback);
+      if (cleanUp.length > 0) { // Den første er altid knappen (og ikke luk-knappen)
+        cleanUp[0].element.setAttribute('aria-expanded', toggled ? 'true' : 'false');
+      }
     }
 
     return () => {
-      if (cleanUp) {
-        cleanUp.element.removeEventListener('click', cleanUp.clickEvent);
-      }
+      cleanUp.forEach((c) => {
+        c.element.removeEventListener('click', c.clickEvent);
+      });
     };
   }, []);
   return (

package/src/components/AUToolbarComponent.tsx

@@ -1,52 +1,101 @@
 /* eslint-disable react/no-array-index-key */
 /* eslint-env browser */
-import React, { useEffect, FC } from 'react';
-import { setToolbars, setToolbarToggle } from '@aarhus-university/au-designsystem-delphinus/source/js/components/toolbar';
-
-let windowInnerWidth = 0;
+import React, { useEffect, FC, useRef } from 'react';
+import {
+  setToolbar, closeAllContentTogglesInToolbar, ExtendedCleanUpPair, setOverflow,
+} from '@aarhus-university/au-designsystem-delphinus/source/js/components/toolbar';
 
 const AUToolbarComponent: FC<AUToolbarComponentProps> = ({
   lang,
   elements,
+  noCollapse,
+  center,
+  title,
+  buttonClass,
+  buttonElements,
 }: AUToolbarComponentProps) => {
+  const toolbarRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
-    setToolbars();
-    const cleanUp: CleanUpPair[] = setToolbarToggle();
-    windowInnerWidth = window.innerWidth;
-    window.addEventListener('resize', () => {
-      if (windowInnerWidth > 0 && window.innerWidth !== windowInnerWidth) {
-        windowInnerWidth = window.innerWidth;
-        setToolbars();
+    const onResize = () => {
+      if (toolbarRef.current?.querySelector('.toolbar__items')) {
+        closeAllContentTogglesInToolbar(toolbarRef.current);
+        setOverflow(toolbarRef.current);
       }
-    });
+    };
+
+    let toolbarCleanUp: ExtendedCleanUpPair[];
+    if (toolbarRef.current) {
+      // eslint-disable-next-line max-len
+      toolbarCleanUp = setToolbar(toolbarRef.current, (toolbar: HTMLElement) => {
+        closeAllContentTogglesInToolbar(toolbar);
+      }, false);
+    }
+
+    window.addEventListener('resize', onResize);
 
     // Runs on unmounting
     return () => {
-      cleanUp.forEach((pair: CleanUpPair) => {
-        pair.element.removeEventListener('click', pair.clickEvent);
+      toolbarCleanUp.forEach((pair: ExtendedCleanUpPair) => {
+        if (typeof pair.clickEvent === 'function') {
+          pair.element.removeEventListener('click', pair.clickEvent);
+        }
+        if (typeof pair.keyUpEvent === 'function') {
+          pair.element.removeEventListener('keyup', pair.keyUpEvent);
+        }
       });
+
+      window.removeEventListener('resize', onResize);
     };
   }, []);
 
   const renderElements = elements.map((e, i) => <React.Fragment key={i}>{e}</React.Fragment>);
   const label = lang === 'da' ? 'Muligheder' : 'Options';
 
+  let toolbarClass = 'toolbar';
+  if (noCollapse) {
+    toolbarClass = `${toolbarClass} toolbar--no-collapse`;
+  }
+  if (center) {
+    toolbarClass = `${toolbarClass} toolbar--center-align-items`;
+  }
+
   return (
-    <div className="toolbar">
+    <div
+      ref={toolbarRef}
+      className={toolbarClass}
+    >
       <div className="toolbar__items">
         {renderElements}
       </div>
       <button
         type="button"
-        className="toolbar__toggle"
-        title={label}
+        className={buttonClass}
+        title={title || label}
+        aria-label={title}
         aria-haspopup="true"
       >
-        {label}
+        {
+          buttonElements?.length === 0 && (title || label)
+        }
+        {
+          (buttonElements || []).map((element, index) => (
+            <React.Fragment key={index}>
+              {element}
+            </React.Fragment>
+          ))
+        }
       </button>
     </div>
   );
 };
 
+AUToolbarComponent.defaultProps = {
+  noCollapse: false,
+  center: false,
+  title: undefined,
+  buttonClass: 'toolbar__toggle',
+  buttonElements: [],
+};
+
 AUToolbarComponent.displayName = 'AUToolbarComponent';
 export default AUToolbarComponent;

package/src/components/AUTruncatorComponent.tsx

@@ -0,0 +1,129 @@
+import React, {
+  FC, useEffect, useRef, useState,
+} from 'react';
+import { overflowsY } from '@aarhus-university/au-designsystem-delphinus/source/js/components/helpers';
+
+const focusableSelector = 'a[href]:not([tabindex="-1"]), area[href]:not([tabindex="-1"]), input:not([disabled]):not([tabindex="-1"]), select:not([disabled]):not([tabindex="-1"]), textarea:not([disabled]):not([tabindex="-1"]), button:not([disabled]):not([tabindex="-1"]), iframe:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"]), [contentEditable=true]:not([tabindex="-1"])';
+const getMaxLinesStyle = (maxLines: number): React.CSSProperties => ({ '--max-lines': maxLines } as React.CSSProperties);
+
+const setTruncate = (
+  expandElement: HTMLElement,
+  contentElement: HTMLElement,
+  expanded: boolean,
+): void => {
+  if (!expanded && overflowsY(contentElement)) {
+    expandElement.removeAttribute('hidden');
+  } else {
+    expandElement.parentElement?.classList.add('truncator--no-truncation');
+  }
+};
+
+const AUTruncatorComponent: FC<AUTruncatorComponentProps> = ({
+  maxLines,
+  header,
+  headerLevel,
+  children,
+  classNames,
+  buttonChild,
+}: AUTruncatorComponentProps) => {
+  const expandRef = useRef<HTMLButtonElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [expanded, setExpanded] = useState<boolean>(false);
+  useEffect(() => {
+    setTruncate(expandRef.current as HTMLElement, contentRef.current as HTMLElement, expanded);
+    const focusElements = contentRef.current?.querySelectorAll(focusableSelector);
+
+    const onFocus = (event: Event) => {
+      if (overflowsY(event.target as HTMLElement)) {
+        setExpanded(true);
+      }
+    };
+
+    if (focusElements) {
+      focusElements.forEach((f) => {
+        f.addEventListener('focus', onFocus);
+      });
+    }
+
+    const onResize = () => {
+      setTruncate(expandRef.current as HTMLElement, contentRef.current as HTMLElement, expanded);
+    };
+
+    window.addEventListener('resize', onResize);
+
+    return () => {
+      if (focusElements) {
+        focusElements.forEach((f) => {
+          f.removeEventListener('focus', onFocus);
+        });
+      }
+      window.removeEventListener('resize', onResize);
+    };
+  }, [expanded]);
+
+  return (
+    <div className={`${classNames}${expanded ? ' truncator--no-truncation' : ''}`} style={getMaxLinesStyle(maxLines)}>
+      {
+        header && (
+          <>
+            {
+              headerLevel === 1 && (
+                <h1 className="truncator__header">{header}</h1>
+              )
+            }
+            {
+              headerLevel === 2 && (
+                <h2 className="truncator__header">{header}</h2>
+              )
+            }
+            {
+              headerLevel === 3 && (
+                <h3 className="truncator__header">{header}</h3>
+              )
+            }
+            {
+              headerLevel === 4 && (
+                <h4 className="truncator__header">{header}</h4>
+              )
+            }
+            {
+              headerLevel === 5 && (
+                <h5 className="truncator__header">{header}</h5>
+              )
+            }
+            {
+              headerLevel === 6 && (
+                <h6 className="truncator__header">{header}</h6>
+              )
+            }
+          </>
+        )
+      }
+      <button
+        ref={expandRef}
+        type="button"
+        className="truncator__expand"
+        hidden
+        aria-expanded={expanded}
+        onClick={() => setExpanded(true)}
+      >
+        {buttonChild}
+      </button>
+      <div
+        ref={contentRef}
+        className="truncator__content"
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+AUTruncatorComponent.defaultProps = {
+  header: undefined,
+  headerLevel: 2,
+  classNames: 'truncator',
+};
+
+AUTruncatorComponent.displayName = 'AUTruncatorComponent';
+export default AUTruncatorComponent;

package/stories/AUToolbarComponent.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { closeAllContentTogglesInToolbar } from '@aarhus-university/au-designsystem-delphinus/source/js/components/toolbar';
+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';
@@ -102,9 +102,9 @@ Filter.args = {
   elements: [
     <AUContentToggleComponent
       toggled={false}
-      beforeCallback={() => closeAllContentTogglesInToolbar(document.querySelector('.toolbar') as HTMLElement)}
-      afterCallback={(button: HTMLButtonElement) => {
-        const toolbar = document.querySelector('.toolbar') as HTMLElement;
+      beforeCallback={(content: HTMLElement) => closeAllContentTogglesInToolbar(findToolbar(content))}
+      afterCallback={(content: HTMLElement, button: HTMLButtonElement) => {
+        const toolbar = findToolbar(content);
         const ariaExpanded = button.getAttribute('aria-expanded');
         if (ariaExpanded === 'true') {
           toolbar?.classList.add('toolbar--has-popout');
@@ -157,9 +157,9 @@ Filter.args = {
     </AUContentToggleComponent>,
     <AUContentToggleComponent
       toggled={false}
-      beforeCallback={() => closeAllContentTogglesInToolbar(document.querySelector('.toolbar') as HTMLElement)}
-      afterCallback={(button: HTMLButtonElement) => {
-        const toolbar = document.querySelector('.toolbar') as HTMLElement;
+      beforeCallback={(content: HTMLElement) => closeAllContentTogglesInToolbar(findToolbar(content))}
+      afterCallback={(content: HTMLElement, button: HTMLButtonElement) => {
+        const toolbar = findToolbar(content);
         const ariaExpanded = button.getAttribute('aria-expanded');
         if (ariaExpanded === 'true') {
           toolbar?.classList.add('toolbar--has-popout');