@aarhus-university/au-lib-react-components 10.21.1 → 11.0.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.1",
+  "version": "11.0.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.2",
+    "@aarhus-university/au-designsystem-delphinus": "0.34.2",
     "@aarhus-university/au-designsystem-delphinus-dev": "0.2.0",
-    "@aarhus-university/types": "0.13.8",
+    "@aarhus-university/types": "^0.16.1",
     "@reduxjs/toolkit": "^1.8.3",
     "@types/google.analytics": "^0.0.42",
     "@types/history": "^5.0.0",

package/src/components/AUButtonComponent.tsx

@@ -21,7 +21,7 @@ const AUButtonComponent: FC<AUButtonComponentProps> = ({
   const typeClass = type === 'default' ? '' : `button--${type}`;
   let iconClass = '';
   if (icon) {
-    iconClass = 'button--icon';
+    iconClass = `button--icon icon-${icon}`;
     if (iconPosition) {
       iconClass = `${iconClass} button--icon--${iconPosition}`;
     }
@@ -48,7 +48,6 @@ const AUButtonComponent: FC<AUButtonComponentProps> = ({
         modeClass,
         disabled && mode !== 'processing' ? 'visually-disabled' : '',
       ].concat(classNames || []).join(' ').replace(/\s+/g, ' ').trim()}
-      data-icon={icon === '' ? null : icon}
       title={icon && hideLabel ? label : undefined}
       aria-expanded={ariaExpanded}
       onClick={(event: MouseEvent<HTMLButtonElement>) => {

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/AUButtonComponent.stories.tsx

@@ -27,6 +27,12 @@ export default {
         'large',
       ]
     },
+    icon: {
+      control: {
+        type: 'select',
+      },
+      options: ['add', 'attachment', 'award', 'bike', 'bookmark', 'brand-linkedin', 'brand-mendeley', 'brand-orcid', 'brand-researchgate', 'brand-twitter', 'calendar', 'camera', 'car', 'class', 'close', 'collapse', 'confirm', 'confirm-circle', 'context-menu', 'copy', 'current-semester', 'dark-mode', 'delphinus', 'delete', 'design', 'download', 'edit', 'email', 'exam', 'expand', 'failed', 'failed-circle', 'file', 'filter', 'finish', 'heart', 'hide', 'infinity', 'info', 'info-circle', 'instructor', 'instructor-with-class', 'language', 'location', 'link-chain', 'link-internal', 'link-external', 'link-external-square', 'lms-course-common', 'lms-course-sections', 'lms-course-additional', 'lms-course-merge-with', 'lms-course-merged', 'mailbox', 'menu', 'news', 'next', 'note', 'notifications', 'passed-exemption', 'phone', 'phone-landline', 'previous', 'print', 'public-transport', 'receipt', 'refresh', 'reorder', 'replay', 'route', 'search', 'season-autumn', 'season-christmas', 'season-easter', 'season-halloween', 'season-spring', 'season-summer', 'season-winter', 'send', 'settings', 'source-system', 'student-place-accepted', 'student-place-not-offered', 'student-place-offered', 'student-place-rejected', 'student-place-standby', 'sign-in', 'sign-out', 'spock', 'sync', 'theme-chooser', 'tip', 'tools', 'tooltip', 'upload', 'user-profile', 'user-impersonation', 'view', 'viewport-default', 'viewport-medium', 'viewport-wide', 'walking', 'warning', 'warning-triangle'],
+    },
     iconPosition: {
       control: {
         type: 'select',
@@ -78,7 +84,7 @@ With_Icon.args = {
   type: 'default',
   size: 'default',
   mode: 'none',
-  icon: '',
+  icon: 'delphinus',
   iconPosition: 'left',
   hideLabel: false,
 };
@@ -89,7 +95,7 @@ Icon_Only.args = {
   type: 'default',
   size: 'default',
   mode: 'none',
-  icon: '',
+  icon: 'delphinus',
   iconPosition: 'left',
   hideLabel: true,
 };
@@ -100,7 +106,7 @@ Irreversible_Action.args = {
   type: 'default',
   size: 'default',
   mode: 'ireversable-action',
-  icon: '',
+  icon: 'delphinus',
 };
 
 export const Confirmable_Action = Template.bind({});
@@ -109,7 +115,7 @@ Confirmable_Action.args = {
   type: 'default',
   size: 'default',
   mode: 'confirmable-action',
-  icon: '',
+  icon: 'delphinus',
 };
 
 export const Processing = Template.bind({});