@aarhus-university/au-lib-react-components 9.11.0 → 9.11.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "sideEffects": false,
   "name": "@aarhus-university/au-lib-react-components",
-  "version": "9.11.0",
+  "version": "9.11.4",
   "description": "Library for shared React components for various applications on au.dk",
   "main": "build/cjs/index.js",
   "scripts": {

package/src/components/delphinus/AUModalComponent.js

@@ -2,7 +2,7 @@
 /* eslint jsx-a11y/click-events-have-key-events: 0 */
 /* eslint jsx-a11y/no-noninteractive-element-interactions: 0 */
 /* eslint jsx-a11y/no-static-element-interactions: 0 */
-import React from 'react';
+import React, { useLayoutEffect } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { hideModal } from '@aarhus-university/au-designsystem-delphinus/source/js/components/modal-view';
@@ -19,6 +19,17 @@ const AUModalComponent = (props) => {
     className,
   } = props;
 
+  useLayoutEffect(() => {
+    const modalView = document.getElementById(domId);
+    if (modalView) {
+      const header = modalView.querySelector('.modal-view__header');
+      if (header && !header.getAttribute('id')) {
+        header.setAttribute('id', `${domId}-header`);
+        modalView.setAttribute('aria-labelledby', `${domId}-header`);
+      }
+    }
+  });
+
   return [
     ReactDOM.createPortal(
       <div
@@ -33,6 +44,7 @@ const AUModalComponent = (props) => {
                 type="button"
                 className="modal-view__close button button--icon button--icon--hide-label"
                 data-icon=""
+                data-gtm="au-btn-modal-close"
                 onClick={() => {
                   if (typeof onClose === 'function') {
                     onClose();

package/src/components/delphinus/AUTabbedContentComponent.js

@@ -103,7 +103,7 @@ const AUTabbedContentComponent = ({
   }
 
   // eslint-disable-next-line jsx-a11y/control-has-associated-label
-  const renderTabs = tabs.map((tab) => <a key={tab.href} href={tab.href} className="nav__item" dangerouslySetInnerHTML={{ __html: tab.text }} />);
+  const renderTabs = tabs.map((tab) => <a key={tab.href} href={tab.href} className="nav__item" data-gtm={tab.dataGtm} dangerouslySetInnerHTML={{ __html: tab.text }} />);
 
   return (
     <div ref={tabsElement} className={classNames}>

package/src/components/profile/AUProfileWidgetV3Component.js

@@ -17,16 +17,18 @@ const AUProfileWidgetComponent = React.memo(({
   const renderSettings = settings.map((s) => {
     const btnRef = useRef();
     if (s.type === 'anchor') {
-      return <a key={s.url} className="sub-nav__item" href={s.url}>{s.text}</a>;
+      return <a key={s.url} className="sub-nav__item" href={s.url} data-gtm={s.dataGtm}>{s.text}</a>;
     }
     return (
       <button
         key={s.text}
         ref={btnRef}
         type="button"
+        disabled={s.disabled}
         className={`sub-nav__item ${s.classNames}`}
         onClick={() => s.onClick(btnRef.current)}
         data-icon={s.icon}
+        data-gtm={s.dataGtm}
       >
         {s.text}
       </button>
@@ -49,6 +51,7 @@ const AUProfileWidgetComponent = React.memo(({
           className="copy-to-clipboard"
           title={profileLabels[lang].copyAuid}
           aria-label={`${profileLabels[lang].auId}: AU${auid}`}
+          data-gtm="au-btn-header-copy-auid"
         >
           {`${profileLabels[lang].auId}: `}
           <span className="copy-to-clipboard__this">{`AU${auid}`}</span>
@@ -73,7 +76,7 @@ const AUProfileWidgetComponent = React.memo(({
       {
         changeLanguageUrl && (
           <>
-            <a className="sub-nav__item sub-nav__item--icon" href={changeLanguageUrl} data-icon="">{profileLabels[lang].changeLanguage}</a>
+            <a className="sub-nav__item sub-nav__item--icon" href={changeLanguageUrl} data-icon="" data-gtm="au-btn-header-profile-changelanguage">{profileLabels[lang].changeLanguage}</a>
             <hr />
           </>
         )
@@ -81,6 +84,7 @@ const AUProfileWidgetComponent = React.memo(({
       <a
         className="sub-nav__item sub-nav__item--icon"
         data-icon=""
+        data-gtm="au-a-header-signout"
         href={logoutUri}
       >
         {profileLabels[lang].logout}