@aarhus-university/au-lib-react-components 8.80.0 → 8.83.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "sideEffects": false,
   "name": "@aarhus-university/au-lib-react-components",
-  "version": "8.80.0",
+  "version": "8.83.0",
   "description": "Library for shared React components for various applications on au.dk",
   "scripts": {
     "build": "webpack --config ./webpack.config.js"

package/src/components/AUSpinnerComponent.tsx

@@ -1,6 +1,6 @@
 /* eslint-env browser */
 import React, { useEffect, FC } from 'react';
-import { isElementInViewport } from '@aarhus-university/au-designsystem-delphinus/source/js/components/helpers';
+import { isElementInViewport } from '../lib/helpers';
 
 const AUSpinnerComponent: FC<AUSpinnerComponentProps> = ({
   domID,

package/src/components/profile/AUProfileAvatarV3Component.tsx

@@ -0,0 +1,42 @@
+/* eslint-env browser */
+import React, { FC, memo } from 'react';
+import AUProfileWidgetComponent from './AUProfileWidgetV3Component';
+import AUSubNavComponent from '../AUSubNavComponent';
+
+const AUProfileAvatarComponent: FC<AUProfileAvatarComponentProps> = memo(({
+  user,
+  settings,
+  profileLabels,
+  logoutUri,
+  changeLanguageUri,
+  lang,
+}: AUProfileAvatarComponentProps) => {
+  const {
+    auId,
+    firstNames,
+    lastName,
+  } = user;
+
+  return (
+    <AUSubNavComponent
+      id="profile-menu-toggle"
+      className="nav__item nav__item--icon nav__item--icon--right"
+      dataIcon=""
+      text={firstNames}
+      ariaLabel={`${profileLabels[lang].profileFor} ${firstNames} ${lastName}`}
+    >
+      <AUProfileWidgetComponent
+        lang={lang}
+        name={`${firstNames} ${lastName}`}
+        auId={auId}
+        settings={settings}
+        profileLabels={profileLabels}
+        changeLanguageUri={changeLanguageUri || ''}
+        logoutUri={logoutUri}
+      />
+    </AUSubNavComponent>
+  );
+});
+
+AUProfileAvatarComponent.displayName = 'AUProfileAvatarComponent';
+export default AUProfileAvatarComponent;

package/src/components/profile/{AUProfileLoginComponent.js → AUProfileLoginComponent.tsx}

@@ -1,13 +1,12 @@
 /* eslint-env browser */
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FC } from 'react';
 
-const AUProfileLoginComponent = ({
+const AUProfileLoginComponent: FC<AUProfileLoginComponentProps> = ({
   loggedIn,
   loginUri,
   children,
   text,
-}) => {
+}: AUProfileLoginComponentProps) => {
   if (!loggedIn) {
     return (
       <a
@@ -23,17 +22,5 @@ const AUProfileLoginComponent = ({
   return children;
 };
 
-AUProfileLoginComponent.defaultProps = {
-  loggedIn: false,
-  loginUri: '',
-};
-
-AUProfileLoginComponent.propTypes = {
-  loggedIn: PropTypes.bool,
-  loginUri: PropTypes.string,
-  children: PropTypes.element.isRequired,
-  text: PropTypes.string.isRequired,
-};
-
 AUProfileLoginComponent.displayName = 'AUProfileLoginComponent';
 export default AUProfileLoginComponent;

package/src/components/profile/{AUProfileWidgetV3Component.js → AUProfileWidgetV3Component.tsx}

@@ -1,21 +1,28 @@
 /* eslint-env browser */
-import React, { useEffect, useState, useRef } from 'react';
-import PropTypes from 'prop-types';
+import React, {
+  FC, useEffect, useState, useRef, memo,
+} from 'react';
 import { setCopyToClipboard } from '@aarhus-university/au-designsystem-delphinus/source/js/components/nav';
 
-const AUProfileWidgetComponent = React.memo(({
+const AUProfileWidgetComponent: FC<AUProfileWidgetComponentProps> = memo(({
   lang,
   name,
-  auid,
+  auId,
   studentNumber,
   settings,
-  changeLanguageUrl,
+  changeLanguageUri,
   logoutUri,
   profileLabels,
-}) => {
-  const [ctcSet, setCtcSet] = useState(false);
-  const renderSettings = settings.map((s) => {
-    const btnRef = useRef();
+}: AUProfileWidgetComponentProps) => {
+  const [ctcSet, setCtcSet] = useState<boolean>(false);
+  const btnRefs = useRef<HTMLButtonElement[]>([]);
+  btnRefs.current = [];
+  const addToRefs = (el: HTMLButtonElement) => {
+    if (el && !btnRefs.current.includes(el)) {
+      btnRefs.current.push(el);
+    }
+  };
+  const renderSettings = settings.map((s, i) => {
     if (s.type === 'anchor') {
       return (
         <a
@@ -32,11 +39,15 @@ const AUProfileWidgetComponent = React.memo(({
     return (
       <button
         key={s.text}
-        ref={btnRef}
+        ref={addToRefs}
         type="button"
         disabled={s.disabled}
         className={`sub-nav__item ${s.classNames}`}
-        onClick={() => s.onClick(btnRef.current)}
+        onClick={() => {
+          if (typeof s.onClick === 'function') {
+            s.onClick(btnRefs.current[i]);
+          }
+        }}
         data-icon={s.icon}
         data-gtm={s.dataGtm}
       >
@@ -46,7 +57,7 @@ const AUProfileWidgetComponent = React.memo(({
   });
 
   useEffect(() => {
-    if (auid > 0 && !ctcSet) {
+    if (auId > 0 && !ctcSet) {
       setCopyToClipboard(lang);
       setCtcSet(true);
     }
@@ -60,11 +71,11 @@ const AUProfileWidgetComponent = React.memo(({
           type="button"
           className="copy-to-clipboard"
           title={profileLabels[lang].copyAuid}
-          aria-label={`${profileLabels[lang].auId}: AU${auid}`}
+          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>
+          <span className="copy-to-clipboard__this">{`AU${auId}`}</span>
         </button>
         {
           studentNumber && (
@@ -84,9 +95,9 @@ const AUProfileWidgetComponent = React.memo(({
       {renderSettings}
       <hr />
       {
-        changeLanguageUrl && (
+        changeLanguageUri && (
           <>
-            <a className="sub-nav__item sub-nav__item--icon" href={changeLanguageUrl} data-icon="" data-gtm="au-btn-header-profile-changelanguage">{profileLabels[lang].changeLanguage}</a>
+            <a className="sub-nav__item sub-nav__item--icon" href={changeLanguageUri} data-icon="" data-gtm="au-btn-header-profile-changelanguage">{profileLabels[lang].changeLanguage}</a>
             <hr />
           </>
         )
@@ -104,26 +115,7 @@ const AUProfileWidgetComponent = React.memo(({
 });
 
 AUProfileWidgetComponent.defaultProps = {
-  studentNumber: null,
-  changeLanguageUrl: '',
-};
-
-AUProfileWidgetComponent.propTypes = {
-  lang: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  auid: PropTypes.number.isRequired,
-  studentNumber: PropTypes.string,
-  settings: PropTypes.arrayOf(PropTypes.shape({
-    type: PropTypes.string.isRequired,
-    url: PropTypes.string,
-    text: PropTypes.string.isRequired,
-    onClick: PropTypes.func,
-    classNames: PropTypes.string,
-    icon: PropTypes.string,
-  })).isRequired,
-  profileLabels: PropTypes.shape({}).isRequired,
-  changeLanguageUrl: PropTypes.string,
-  logoutUri: PropTypes.string.isRequired,
+  studentNumber: '',
 };
 
 AUProfileWidgetComponent.displayName = 'AUProfileWidgetComponent';

package/src/lib/helpers.ts

@@ -47,7 +47,8 @@ const isElementPartlyInViewport = (element: HTMLElement): boolean => {
 
 const setCookie = (
   cookieName: string,
-  value: string,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value: any,
   maxAge: number | null = null,
   exdays: number | null = null,
   path = ';path=/;domain=au.dk',
@@ -139,11 +140,11 @@ const splitPhoneNumber = (countryCodes: ICountryCode[], phoneNumber: string): IP
     if (countryCodes.length > 0) {
       const skip = '';
       let count = 1;
-      let prefix = countryCodes.find((x) => x.important)?.code;
+      let prefix = `${countryCodes.find((x) => x.important)?.code}`;
       while (count < phoneNumber.length) {
         const split = phoneNumber.substring(skip.length, skip.length + count);
         if (countryCodeFound(split)) {
-          prefix = parseInt(split, 10);
+          prefix = split;
         }
         count += 1;
       }

package/types/common/interfaces.d.ts

@@ -62,3 +62,30 @@ interface ITrackers {
   account: string,
   name: string,
 }
+
+interface IProfileSettings {
+  type: string,
+  url: string,
+  classNames?: string,
+  icon?: string,
+  dataGtm: string,
+  text: string,
+  disabled?: boolean,
+  onClick?: (el: Element) => void,
+}
+
+interface IUserContext {
+  auId: number,
+  firstNames: string,
+  lastName: string,
+  name: string,
+  preferredLanguage: string,
+  userName: string,
+  memberOfGroups: IAdGroup[],
+  impersonatingUser: IUserContext | null,
+}
+
+interface IAdGroup {
+  id: string,
+  name: string,
+}

package/types/common/props.d.ts

@@ -136,3 +136,30 @@ interface AUReceiptComponentProps {
   showGoTo: boolean,
   buttons: IReceiptButton[],
 }
+
+interface AUProfileWidgetComponentProps {
+  lang: string,
+  name: string,
+  auId: number,
+  studentNumber?: string,
+  settings: IProfileSettings[],
+  changeLanguageUri: string,
+  logoutUri: string,
+  profileLabels: any, // Noget med labels her?
+}
+
+interface AUProfileAvatarComponentProps {
+  user: IUserContext,
+  settings: IProfileSettings[],
+  profileLabels: any, // Noget med labels her?
+  logoutUri: string,
+  changeLanguageUri?: string,
+  lang: string,
+}
+
+interface AUProfileLoginComponentProps {
+  loggedIn: boolean,
+  loginUri: string,
+  children: JSX.Element,
+  text: string,
+}

package/src/components/profile/AUProfileAvatarV3Component.js

@@ -1,80 +0,0 @@
-/* eslint-env browser */
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import AUProfileWidgetComponent from './AUProfileWidgetV3Component';
-import AUSubNavComponent from '../delphinus/AUSubNavComponent';
-
-const AUProfileAvatarComponent = React.memo(({
-  user,
-  settings,
-  onLoad,
-  onLoadAction,
-  profileLabels,
-  logoutUri,
-  changeLanguageUrl,
-  lang,
-}) => {
-  const {
-    auId,
-    firstNames,
-    lastName,
-  } = user;
-
-  useEffect(() => {
-    if (typeof onLoad === 'function') {
-      onLoad(onLoadAction);
-    }
-  }, []);
-
-  return (
-    <AUSubNavComponent
-      id="profile-menu-toggle"
-      className="nav__item nav__item--icon nav__item--icon--right"
-      dataIcon=""
-      text={firstNames}
-      ariaLabel={`${profileLabels[lang].profileFor} ${firstNames} ${lastName}`}
-    >
-      <AUProfileWidgetComponent
-        lang={lang}
-        name={`${firstNames} ${lastName}`}
-        auid={auId}
-        settings={settings}
-        profileLabels={profileLabels}
-        changeLanguageUrl={changeLanguageUrl}
-        logoutUri={logoutUri}
-      />
-    </AUSubNavComponent>
-  );
-});
-
-AUProfileAvatarComponent.defaultProps = {
-  onLoad: null,
-  onLoadAction: () => {
-
-  },
-  changeLanguageUrl: '',
-};
-
-AUProfileAvatarComponent.propTypes = {
-  user: PropTypes.shape({
-    auId: PropTypes.number.isRequired,
-    firstNames: PropTypes.string.isRequired,
-    lastName: PropTypes.string.isRequired,
-    preferredLanguage: PropTypes.string.isRequired,
-  }).isRequired,
-  settings: PropTypes.arrayOf(PropTypes.shape({
-    type: PropTypes.string.isRequired,
-    url: PropTypes.string,
-    text: PropTypes.string.isRequired,
-    onClick: PropTypes.func,
-  })).isRequired,
-  onLoad: PropTypes.func,
-  onLoadAction: PropTypes.func,
-  profileLabels: PropTypes.shape({}).isRequired,
-  logoutUri: PropTypes.string.isRequired,
-  changeLanguageUrl: PropTypes.string,
-  lang: PropTypes.string.isRequired,
-};
-
-AUProfileAvatarComponent.displayName = 'AUProfileAvatarComponent';
-export default AUProfileAvatarComponent;