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

package/src/components/profile/AUProfileWidgetComponent.js

@@ -1,95 +0,0 @@
-/* eslint-env browser */
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import { setCopyToClipboard } from '@aarhus-university/au-designsystem-delphinus/source/js/components/nav';
-
-const AUProfileWidgetComponent = React.memo(({
-  lang,
-  name,
-  auid,
-  studentNumber,
-  settings,
-  changeLanguageUrl,
-  logoutUri,
-  profileLabels,
-}) => {
-  const [ctcSet, setCtcSet] = useState(false);
-  const renderSettings = settings.map((s) => <a key={s.url} className="sub-nav__item" href={s.url}>{s.text}</a>);
-
-  useEffect(() => {
-    if (auid > 0 && !ctcSet) {
-      setCopyToClipboard(lang);
-      setCtcSet(true);
-    }
-  });
-
-  return (
-    <div className="sub-nav__content theme--normal" aria-labelledby="profile-menu-toggle">
-      <div className="sub-nav__user">
-        <h2 className="sub-nav__user-name">{name}</h2>
-        <button
-          type="button"
-          className="copy-to-clipboard"
-          title={profileLabels[lang].copyAuid}
-          aria-label={`${profileLabels[lang].auId}: AU${auid}`}
-        >
-          {`${profileLabels[lang].auId}: `}
-          <span className="copy-to-clipboard__this">{`AU${auid}`}</span>
-        </button>
-        {
-          studentNumber && (
-            <button
-              type="button"
-              className="copy-to-clipboard"
-              title={profileLabels[lang].copyStudentNumber}
-              aria-label={`${profileLabels[lang].studentNumber}: ${studentNumber}`}
-            >
-              {`${profileLabels[lang].studentNumber}: `}
-              <span className="copy-to-clipboard__this">{studentNumber}</span>
-            </button>
-          )
-        }
-      </div>
-      <hr />
-      {renderSettings}
-      <hr />
-      {
-        changeLanguageUrl && (
-          <>
-            <a className="sub-nav__item sub-nav__item--icon" href={changeLanguageUrl} data-icon="">{profileLabels[lang].changeLanguage}</a>
-            <hr />
-          </>
-        )
-      }
-      <a
-        className="sub-nav__item sub-nav__item--icon"
-        data-icon=""
-        href={logoutUri}
-      >
-        {profileLabels[lang].logout}
-      </a>
-    </div>
-  );
-});
-
-AUProfileWidgetComponent.defaultProps = {
-  studentNumber: null,
-  changeLanguageUrl: null,
-};
-
-AUProfileWidgetComponent.propTypes = {
-  lang: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  auid: PropTypes.number.isRequired,
-  studentNumber: PropTypes.string,
-  settings: PropTypes.arrayOf(PropTypes.shape({
-    url: PropTypes.string.isRequired,
-    text: PropTypes.string.isRequired,
-  })).isRequired,
-  profileLabels: PropTypes.shape({}).isRequired,
-  changeLanguageUrl: PropTypes.string,
-  logoutUri: PropTypes.string.isRequired,
-};
-
-AUProfileWidgetComponent.displayName = 'AUProfileWidgetComponent';
-export default AUProfileWidgetComponent;

package/src/components/profile/AUProfileWidgetV2Component.js

@@ -1,116 +0,0 @@
-/* eslint-env browser */
-import React, { useEffect, useState, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { setCopyToClipboard } from '@aarhus-university/au-designsystem-delphinus/source/js/components/nav';
-
-const AUProfileWidgetComponent = React.memo(({
-  lang,
-  name,
-  auid,
-  studentNumber,
-  settings,
-  changeLanguageUrl,
-  logoutUri,
-  profileLabels,
-}) => {
-  const [ctcSet, setCtcSet] = useState(false);
-  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 (
-      <button
-        key={s.text}
-        ref={btnRef}
-        type="button"
-        className={`sub-nav__item ${s.classNames}`}
-        onClick={() => s.onClick(btnRef.current)}
-        data-icon={s.icon}
-      >
-        {s.text}
-      </button>
-    );
-  });
-
-  useEffect(() => {
-    if (auid > 0 && !ctcSet) {
-      setCopyToClipboard(lang);
-      setCtcSet(true);
-    }
-  });
-
-  return (
-    <div className="sub-nav__content theme--normal" aria-labelledby="profile-menu-toggle">
-      <div className="sub-nav__user">
-        <h2 className="sub-nav__user-name">{name}</h2>
-        <button
-          type="button"
-          className="copy-to-clipboard"
-          title={profileLabels[lang].copyAuid}
-          aria-label={`${profileLabels[lang].auId}: AU${auid}`}
-        >
-          {`${profileLabels[lang].auId}: `}
-          <span className="copy-to-clipboard__this">{`AU${auid}`}</span>
-        </button>
-        {
-          studentNumber && (
-            <button
-              type="button"
-              className="copy-to-clipboard"
-              title={profileLabels[lang].copyStudentNumber}
-              aria-label={`${profileLabels[lang].studentNumber}: ${studentNumber}`}
-            >
-              {`${profileLabels[lang].studentNumber}: `}
-              <span className="copy-to-clipboard__this">{studentNumber}</span>
-            </button>
-          )
-        }
-      </div>
-      <hr />
-      {renderSettings}
-      <hr />
-      {
-        changeLanguageUrl && (
-          <>
-            <a className="sub-nav__item sub-nav__item--icon" href={changeLanguageUrl} data-icon="">{profileLabels[lang].changeLanguage}</a>
-            <hr />
-          </>
-        )
-      }
-      <a
-        className="sub-nav__item sub-nav__item--icon"
-        data-icon=""
-        href={logoutUri}
-      >
-        {profileLabels[lang].logout}
-      </a>
-    </div>
-  );
-});
-
-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,
-};
-
-AUProfileWidgetComponent.displayName = 'AUProfileWidgetComponent';
-export default AUProfileWidgetComponent;

package/src/components/profile/AUProfileWidgetV3Component.tsx

@@ -1,122 +0,0 @@
-/* eslint-env browser */
-import React, {
-  FC, useEffect, useState, useRef, memo,
-} from 'react';
-import { setCopyToClipboard } from '@aarhus-university/au-designsystem-delphinus/source/js/components/nav';
-
-const AUProfileWidgetComponent: FC<AUProfileWidgetComponentProps> = memo(({
-  lang,
-  name,
-  auId,
-  studentNumber,
-  settings,
-  changeLanguageUri,
-  logoutUri,
-  profileLabels,
-}: 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
-          key={s.url}
-          className={`sub-nav__item ${s.classNames}`}
-          href={s.url}
-          data-icon={s.icon}
-          data-gtm={s.dataGtm}
-        >
-          {s.text}
-        </a>
-      );
-    }
-    return (
-      <button
-        key={s.text}
-        ref={addToRefs}
-        type="button"
-        disabled={s.disabled}
-        className={`sub-nav__item ${s.classNames}`}
-        onClick={() => {
-          if (typeof s.onClick === 'function') {
-            s.onClick(btnRefs.current[i]);
-          }
-        }}
-        data-icon={s.icon}
-        data-gtm={s.dataGtm}
-      >
-        {s.text}
-      </button>
-    );
-  });
-
-  useEffect(() => {
-    if (auId > 0 && !ctcSet) {
-      setCopyToClipboard(lang);
-      setCtcSet(true);
-    }
-  });
-
-  return (
-    <div className="sub-nav__content theme--normal" aria-labelledby="profile-menu-toggle">
-      <div className="sub-nav__user">
-        <h2 className="sub-nav__user-name">{name}</h2>
-        <button
-          type="button"
-          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>
-        </button>
-        {
-          studentNumber && (
-            <button
-              type="button"
-              className="copy-to-clipboard"
-              title={profileLabels[lang].copyStudentNumber}
-              aria-label={`${profileLabels[lang].studentNumber}: ${studentNumber}`}
-            >
-              {`${profileLabels[lang].studentNumber}: `}
-              <span className="copy-to-clipboard__this">{studentNumber}</span>
-            </button>
-          )
-        }
-      </div>
-      <hr />
-      {renderSettings}
-      <hr />
-      {
-        changeLanguageUri && (
-          <>
-            <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 />
-          </>
-        )
-      }
-      <a
-        className="sub-nav__item sub-nav__item--icon"
-        data-icon=""
-        data-gtm="au-a-header-signout"
-        href={logoutUri}
-      >
-        {profileLabels[lang].logout}
-      </a>
-    </div>
-  );
-});
-
-AUProfileWidgetComponent.defaultProps = {
-  studentNumber: '',
-};
-
-AUProfileWidgetComponent.displayName = 'AUProfileWidgetComponent';
-export default AUProfileWidgetComponent;