@aarhus-university/au-lib-react-components 10.18.1 → 10.19.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "sideEffects": false,
   "name": "@aarhus-university/au-lib-react-components",
-  "version": "10.18.1",
+  "version": "10.19.1",
   "description": "Library for shared React components for various applications on au.dk",
   "scripts": {
     "test": "jest",
@@ -73,7 +73,7 @@
   },
   "dependencies": {
     "@aarhus-university/au-designsystem-delphinus": "0.30.1",
-    "@aarhus-university/types": "0.10.2",
+    "@aarhus-university/types": "0.13.5",
     "@reduxjs/toolkit": "^1.8.3",
     "@types/google.analytics": "^0.0.42",
     "@types/history": "^5.0.0",
@@ -93,7 +93,7 @@
   },
   "peerDependencies": {
     "react": "18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "18.2.0"
   },
   "jest": {
     "rootDir": "__tests__/jest",

package/src/components/AUButtonComponent.tsx

@@ -14,6 +14,7 @@ const AUButtonComponent: FC<AUButtonComponentProps> = ({
   btnRef,
   classNames,
   ariaExpanded,
+  asSubmit,
   onClick,
 }: AUButtonComponentProps) => {
   const sizeClass = size === 'default' ? '' : `button--${size}`;
@@ -37,7 +38,7 @@ const AUButtonComponent: FC<AUButtonComponentProps> = ({
   return (
     <button
       ref={btnRef}
-      type="button"
+      type={asSubmit ? 'submit' : 'button'}
       disabled={disabled}
       className={[
         'button',
@@ -71,6 +72,7 @@ AUButtonComponent.defaultProps = {
   mode: 'none',
   classNames: [],
   ariaExpanded: false,
+  asSubmit: false,
   // eslint-disable-next-line no-console
   onClick: (
     event: MouseEvent<HTMLButtonElement>,

package/src/components/AUSubmitButtonContainerComponent.tsx

@@ -1,29 +1,27 @@
 import React, { FC } from 'react';
-import { profileLabels } from '../lib/i18n';
+import AUButtonComponent from './AUButtonComponent';
 
 const AUSubmitButtonContainerComponent: FC<AUSubmitButtonContainerComponentProps> = ({
-  lang,
   disabled,
+  submitText,
+  cancelText,
   onSubmit,
   onCancel,
 }: AUSubmitButtonContainerComponentProps) => (
   <div className="submit button-container">
-    <button
-      type="submit"
-      className={`button${disabled ? ' button--processing' : ''}`}
+    <AUButtonComponent
+      asSubmit
+      label={submitText}
+      classNames={[disabled ? 'button--processing' : '']}
       disabled={disabled}
       onClick={onSubmit}
-    >
-      {profileLabels[lang].save}
-    </button>
-    <button
-      type="button"
-      className="button button--text"
+    />
+    <AUButtonComponent
+      label={cancelText}
+      type="text"
       disabled={disabled}
       onClick={onCancel}
-    >
-      {profileLabels[lang].cancel}
-    </button>
+    />
   </div>
 );
 

package/src/components/AUToastComponent.tsx

@@ -2,6 +2,7 @@
 import React, {
   useEffect, useLayoutEffect, useRef, FC,
 } from 'react';
+import AUButtonComponent from './AUButtonComponent';
 
 const dismissTimeout = 5000;
 let timeoutId: NodeJS.Timeout | null = null;
@@ -56,10 +57,13 @@ const AUToastComponent: FC<AUToastComponentProps> = ({
     }
   }, []);
 
-  let className = `toast-notification toast-notification--${type}`;
+  let className = 'toast-notification';
   if (persistent) {
     className = `${className} toast-notification--persistent`;
   }
+  if (type !== 'default') {
+    className = `${className} toast-notification--${type}`;
+  }
   return (
     <div ref={toastRef} className={className}>
       <div className="toast-notification__content">
@@ -74,17 +78,14 @@ const AUToastComponent: FC<AUToastComponentProps> = ({
       </div>
       {
         persistent && (
-          <button
-            type="button"
-            className="button"
+          <AUButtonComponent
+            label={buttonText as string}
             onClick={() => {
               if (toastRef.current) {
                 moveOut(toastRef.current);
               }
             }}
-          >
-            {buttonText}
-          </button>
+          />
         )
       }
     </div>

package/src/lib/helpers.ts

@@ -141,7 +141,7 @@ const splitPhoneNumber = (
 
   const findPrefix = (): string => {
     if (countryCodes.length > 0) {
-      const skip = '';
+      const skip = phoneNumber.length > 0 ? '' : '+'; // Hackish...
       let count = 1;
       let prefix = `${countryCodes.find((x) => x.important)?.code}`;
       while (count < phoneNumber.length) {

package/stories/lib/helpers.tsx

@@ -29,7 +29,29 @@ const globalLang = (items = ['da', 'en'], defaultValue = 'da') => ({
   },
 });
 
-const ThemeWrapper = ({
+const ThemeWrapper = ({ theme, children }) => {
+  useEffect(() => {
+    const body = document.querySelector('body');
+    if (body) {
+      body.classList.remove('theme--normal');
+      body.classList.remove('theme--dark');
+      body.classList.add(`theme--${theme}`);
+    }
+  });
+  return (
+    <StrictMode>
+      <main className={`theme--${theme}`}>
+        <div className="page">
+          <div className="page__content__block">
+            {children}
+          </div>
+        </div>
+      </main>
+    </StrictMode>
+  );
+}
+
+const ThemeLanguageWrapper = ({
   theme,
   children,
   defaultLabels,
@@ -60,8 +82,10 @@ const ThemeWrapper = ({
   );
 }
 
+
 export {
   globalTheme,
   globalLang,
   ThemeWrapper,
+  ThemeLanguageWrapper,
 };

package/src/components/profile/AUProfileActions.js

@@ -1,128 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-export const GET_BASIC_USER = 'GET_BASIC_USER';
-export const SAVING_USER = 'SAVING_USER';
-export const PATCH_NAME = 'PATCH_NAME';
-export const PATCH_MAIL = 'PATCH_MAIL';
-export const PATCH_MOBILE = 'PATCH_MOBILE';
-export const PATCH_LANGUAGE = 'PATCH_LANGUAGE';
-export const PATCH_NEXTOFKIN = 'PATCH_NEXTOFKIN';
-export const DISMISS_MESSAGES = 'DISMISS_MESSAGES';
-export const SET_SAVED = 'SET_SAVED';
-export const GET_WORKMAIL_DOMAIN = 'GET_WORKMAIL_DOMAIN';
-
-export const getActionCreators = () => {
-  const actionCreators = {
-    getBasicUser: (callback) => async (dispatch) => { // Tror simpelthen ikke det her er i brug...
-      callback((ok, status, json) => {
-        const result = {};
-        result[ok ? 'user' : 'error'] = json;
-        result.status = status;
-        dispatch({
-          type: GET_BASIC_USER,
-          result,
-        });
-      });
-    },
-    getWorkMailDomain: () => async (dispatch) => {
-      const url = '/v1/person/getworkmaildomain';
-      const response = await fetch(url);
-      const json = await response.json();
-      const result = {};
-      result[response.ok ? 'user' : 'error'] = response.ok ? {
-        workMailDomain: json
-      } : json;
-      result.status = response.status;
-      dispatch({
-        type: GET_WORKMAIL_DOMAIN,
-        result,
-      });
-    },
-    clear: () => (dispatch) => {
-      dispatch({
-        type: SET_SAVED,
-      });
-    },
-    dismissMessages: () => (dispatch) => {
-      dispatch({
-        type: DISMISS_MESSAGES,
-      });
-    },
-    patchName: (data, callback) => async (dispatch) => {
-      dispatch({
-        type: SAVING_USER,
-      });
-
-      callback(data, (ok, status, json) => {
-        const result = {};
-        result[ok ? 'user' : 'error'] = json;
-        result.status = status;
-        dispatch({
-          type: PATCH_NAME,
-          result,
-        });
-      });
-    },
-    patchMail: (data, callback) => async (dispatch) => {
-      dispatch({
-        type: SAVING_USER,
-      });
-
-      callback(data, (ok, status, json) => {
-        const result = {};
-        result[ok ? 'user' : 'error'] = json;
-        result.status = status;
-        dispatch({
-          type: PATCH_MAIL,
-          result,
-        });
-      });
-    },
-    patchMobile: (data, callback) => async (dispatch) => {
-      dispatch({
-        type: SAVING_USER,
-      });
-
-      callback(data, (ok, status, json) => {
-        const result = {};
-        result[ok ? 'user' : 'error'] = json;
-        result.status = status;
-        dispatch({
-          type: PATCH_MOBILE,
-          result,
-        });
-      });
-    },
-    patchLanguage: (data, callback) => async (dispatch) => {
-      dispatch({
-        type: SAVING_USER,
-      });
-
-      callback(data, (ok, status, json) => {
-        const result = {};
-        result[ok ? 'user' : 'error'] = json;
-        result.status = status;
-        dispatch({
-          type: PATCH_LANGUAGE,
-          result,
-        });
-      });
-    },
-    patchNextOfKin: (data, callback) => async (dispatch) => {
-      dispatch({
-        type: SAVING_USER,
-      });
-
-      callback(data, (ok, status, json) => {
-        const result = {};
-        result[ok ? 'user' : 'error'] = json;
-        result.status = status;
-        dispatch({
-          type: PATCH_NEXTOFKIN,
-          result,
-        });
-      });
-    },
-  };
-
-  return actionCreators;
-};

package/src/components/profile/AUProfileAvatarComponent.js

@@ -1,83 +0,0 @@
-/* eslint-env browser */
-import React, { useEffect } from 'react';
-// eslint-disable-next-line import/extensions
-// import whyDidYouRender from '@welldone-software/
-// why-did-you-render/dist/no-classes-transpile/umd/whyDidYouRender.min.js';
-import PropTypes from 'prop-types';
-import AUProfileWidgetComponent from './AUProfileWidgetComponent';
-import AUSubNavComponent from '../delphinus/AUSubNavComponent';
-
-// whyDidYouRender(React);
-
-const AUProfileAvatarComponent = React.memo(({
-  user,
-  settings,
-  onLoad,
-  onLoadAction,
-  profileLabels,
-  logoutUri,
-  changeLanguageUrl,
-}) => {
-  const {
-    chosenFirstNames,
-    chosenLastName,
-    preferredLanguage,
-    auId,
-    studentNumber,
-  } = user;
-
-  useEffect(() => {
-    onLoad(onLoadAction);
-  }, []);
-
-  return (
-    <AUSubNavComponent
-      id="profile-menu-toggle"
-      className="nav__item nav__item--icon nav__item--icon--right"
-      dataIcon=""
-      text={chosenFirstNames}
-      ariaLabel={`${profileLabels[preferredLanguage].profileFor} ${chosenFirstNames} ${chosenLastName}`}
-    >
-      <AUProfileWidgetComponent
-        lang={preferredLanguage}
-        name={`${chosenFirstNames} ${chosenLastName}`}
-        auid={auId}
-        studentNumber={studentNumber}
-        settings={settings}
-        profileLabels={profileLabels}
-        changeLanguageUrl={changeLanguageUrl}
-        logoutUri={logoutUri}
-      />
-    </AUSubNavComponent>
-  );
-});
-
-// AUProfileAvatarComponent.whyDidYouRender = true;
-
-AUProfileAvatarComponent.defaultProps = {
-  onLoadAction: () => {
-
-  },
-};
-
-AUProfileAvatarComponent.propTypes = {
-  user: PropTypes.shape({
-    chosenFirstNames: PropTypes.string.isRequired,
-    chosenLastName: PropTypes.string.isRequired,
-    preferredLanguage: PropTypes.string.isRequired,
-    auId: PropTypes.number.isRequired,
-    studentNumber: PropTypes.string.isRequired,
-  }).isRequired,
-  settings: PropTypes.arrayOf(PropTypes.shape({
-    url: PropTypes.string.isRequired,
-    text: PropTypes.string.isRequired,
-  })).isRequired,
-  onLoad: PropTypes.func.isRequired,
-  onLoadAction: PropTypes.func,
-  profileLabels: PropTypes.shape({}).isRequired,
-  logoutUri: PropTypes.string.isRequired,
-  changeLanguageUrl: PropTypes.string.isRequired,
-};
-
-AUProfileAvatarComponent.displayName = 'AUProfileAvatarComponent';
-export default AUProfileAvatarComponent;

package/src/components/profile/AUProfileAvatarV2Component.js

@@ -1,91 +0,0 @@
-/* eslint-env browser */
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import AUProfileWidgetComponent from './AUProfileWidgetV2Component';
-import AUSubNavComponent from '../delphinus/AUSubNavComponent';
-
-const AUProfileAvatarComponent = React.memo(({
-  user,
-  settings,
-  onLoad,
-  onLoadAction,
-  profileLabels,
-  logoutUri,
-  changeLanguageUrl,
-}) => {
-  const {
-    person: {
-      auPerson: {
-        auId, foretrukketSprog, kaldeFornavne, kaldeEfternavn,
-      },
-    },
-  } = user;
-  const studentNumber = user.studerende?.auUddannelsesidentitet?.studienr;
-
-  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={kaldeFornavne}
-      ariaLabel={`${profileLabels[foretrukketSprog].profileFor} ${kaldeFornavne} ${kaldeEfternavn}`}
-    >
-      <AUProfileWidgetComponent
-        lang={foretrukketSprog}
-        name={`${kaldeFornavne} ${kaldeEfternavn}`}
-        auid={auId}
-        studentNumber={studentNumber}
-        settings={settings}
-        profileLabels={profileLabels}
-        changeLanguageUrl={changeLanguageUrl}
-        logoutUri={logoutUri}
-      />
-    </AUSubNavComponent>
-  );
-});
-
-AUProfileAvatarComponent.defaultProps = {
-  onLoad: null,
-  onLoadAction: () => {
-
-  },
-  changeLanguageUrl: '',
-};
-
-AUProfileAvatarComponent.propTypes = {
-  user: PropTypes.shape({
-    person: PropTypes.shape({
-      auPerson: PropTypes.shape({
-        kaldeFornavne: PropTypes.string.isRequired,
-        kaldeEfternavn: PropTypes.string.isRequired,
-        auId: PropTypes.number.isRequired,
-        foretrukketSprog: PropTypes.string.isRequired,
-      }).isRequired,
-    }).isRequired,
-    studerende: PropTypes.shape({
-      auUddannelsesidentitet: PropTypes.shape({
-        studienr: PropTypes.number.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,
-};
-
-AUProfileAvatarComponent.displayName = 'AUProfileAvatarComponent';
-export default AUProfileAvatarComponent;

package/src/components/profile/AUProfileAvatarV3Component.tsx

@@ -1,42 +0,0 @@
-/* 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;