@aarhus-university/au-lib-react-components 8.20.2 → 8.82.0

package/src/components/profile/AUProfileWidgetV2Component.js

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

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

package/src/components/wrapping/AUEmbedComponent.js

@@ -1,47 +1,47 @@
-/* eslint-env browser */
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import AUSpinnerComponent from '../delphinus/AUSpinnerComponent';
-import getSourceForFrame from '../../lib/wrapping';
-
-const AUEmbedComponent = ({
-  api,
-  path,
-  referrer,
-}) => {
-  const [source, setSource] = useState(null);
-  const [frameLoaded, setFrameLoaded] = useState(false);
-
-  return (
-    <AUSpinnerComponent
-      loaded={frameLoaded}
-      loadingCondition={!frameLoaded}
-      onLoad={() => {
-        getSourceForFrame(api, path, referrer, (frameSrc) => {
-          setSource(frameSrc.url);
-          setFrameLoaded(true);
-        });
-      }}
-    >
-      <iframe
-        id="AUEmbedIframe"
-        title="AUEmbed"
-        src={source}
-        onLoad={() => {
-          if (window.iFrameResize) {
-            window.iFrameResize({ heightCalculationMethods: 'taggedElement', log: false }, '#AUEmbedIframe');
-          }
-        }}
-      />
-    </AUSpinnerComponent>
-  );
-};
-
-AUEmbedComponent.propTypes = {
-  path: PropTypes.string.isRequired,
-  api: PropTypes.string.isRequired,
-  referrer: PropTypes.string.isRequired,
-};
-
-AUEmbedComponent.displayName = 'AUEmbedComponent';
-export default AUEmbedComponent;
+/* eslint-env browser */
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import AUSpinnerComponent from '../delphinus/AUSpinnerComponent';
+import getSourceForFrame from '../../lib/wrapping';
+
+const AUEmbedComponent = ({
+  api,
+  path,
+  referrer,
+}) => {
+  const [source, setSource] = useState(null);
+  const [frameLoaded, setFrameLoaded] = useState(false);
+
+  return (
+    <AUSpinnerComponent
+      loaded={frameLoaded}
+      loadingCondition={!frameLoaded}
+      onLoad={() => {
+        getSourceForFrame(api, path, referrer, (frameSrc) => {
+          setSource(frameSrc.url);
+          setFrameLoaded(true);
+        });
+      }}
+    >
+      <iframe
+        id="AUEmbedIframe"
+        title="AUEmbed"
+        src={source}
+        onLoad={() => {
+          if (window.iFrameResize) {
+            window.iFrameResize({ heightCalculationMethods: 'taggedElement', log: false }, '#AUEmbedIframe');
+          }
+        }}
+      />
+    </AUSpinnerComponent>
+  );
+};
+
+AUEmbedComponent.propTypes = {
+  path: PropTypes.string.isRequired,
+  api: PropTypes.string.isRequired,
+  referrer: PropTypes.string.isRequired,
+};
+
+AUEmbedComponent.displayName = 'AUEmbedComponent';
+export default AUEmbedComponent;

package/src/{components → layout-2016/components}/alphabox/AlphaBoxComponent.js

@@ -1,9 +1,8 @@
 /* eslint-env browser */
 import React from 'react';
 import PropTypes from 'prop-types';
-import axios from 'axios';
 import AlphaBoxContentComponent from './AlphaBoxContentComponent';
-import AutoSuggestComponent from '../AutoSuggestComponent';
+import AUAutoSuggestComponent from '../../../components/AUAutoSuggestComponent';
 import DataBoxSuggestionComponent from '../databox/DataBoxSuggestionComponent';
 
 class AlphaBoxComponent extends React.Component {
@@ -24,19 +23,22 @@ class AlphaBoxComponent extends React.Component {
       if (data.itemsOnly) {
         data.source += '?itemsOnly=true';
       }
-      axios.get(data.source).then((promise) => {
-        const { data: pData } = promise;
+      fetch(data.source).then((promise) => promise.json()).then((pData) => {
         this.setState({ items: pData.items });
       });
     }
   }
 
-  getSuggestions(value, collection, callback) {
+  getSuggestions(value, _, callback) {
     const { items } = this.state;
     const inputValue = value.trim().toLowerCase();
     const inputLength = inputValue.length;
     callback(inputLength < 2 ? []
-      : items.filter((x) => x.name.toLowerCase().indexOf(inputValue) > -1)
+      : items.filter(
+        (x) => x.name.toLowerCase().indexOf(inputValue) > -1
+          || x.name.replace(/-/ig, ' ').toLowerCase().indexOf(inputValue) > -1
+          || x.name.replace(/ /ig, '-').toLowerCase().indexOf(inputValue) > -1,
+      )
         .sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase(), 'da', { ignorePunctuation: true })));
   }
 
@@ -64,35 +66,18 @@ class AlphaBoxComponent extends React.Component {
       <div className="au_alphabox" style={{ backgroundColor: box.background.color }}>
         <div>
           <h2>
-            <strong>
-              <a href={config.url}>{config.title}</a>
-            </strong>
+            <a href={config.url}>{config.title}</a>
           </h2>
-          {(() => {
-            if (config.description !== '') {
-              return <p>{config.description}</p>;
-            }
-            return null;
-          })()}
-          {(() => {
-            if (config.links.length > 0) {
-              return (
-                <ul className="quicklinks resetlist">
-                  {renderLinks}
-                </ul>
-              );
-            }
-            return null;
-          })()}
           <AlphaBoxContentComponent
             items={items}
             linkColor={box.background.linkColor}
+            noResultsText={config.noResultsAlphabet}
+            noResultsUri={config.noResultsUri}
           />
-          <AutoSuggestComponent
+          <AUAutoSuggestComponent
             placeholder={box.search.placeHolder}
-            setQuery={() => { }}
             setResults={(_items) => {
-              if (_items.length === 1 && _items[0].url) {
+              if (_items.length >= 1 && _items[0].url) {
                 window.location.href = _items[0].url;
               }
             }}
@@ -100,7 +85,20 @@ class AlphaBoxComponent extends React.Component {
             getSuggestions={this.getSuggestions}
             getSuggestionValue={(suggestion) => suggestion.name}
             renderSuggestion={(suggestion) => <DataBoxSuggestionComponent item={suggestion} />}
+            noResultsText={config.noResultsSearch}
           />
+          {
+            config.description !== '' && (
+              <h3>{config.description}</h3>
+            )
+          }
+          {
+            config.links.length > 0 && (
+              <ul className="quicklinks resetlist">
+                {renderLinks}
+              </ul>
+            )
+          }
         </div>
       </div>
     );
@@ -126,6 +124,9 @@ AlphaBoxComponent.propTypes = {
         url: PropTypes.string.isRequired,
       })).isRequired,
       title: PropTypes.string.isRequired,
+      noResultsAlphabet: PropTypes.string.isRequired,
+      noResultsSearch: PropTypes.string.isRequired,
+      noResultsUri: PropTypes.string.isRequired,
     }).isRequired,
     background: PropTypes.shape({
       color: PropTypes.string.isRequired,

package/src/{components → layout-2016/components}/alphabox/AlphaBoxContentComponent.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { sortAlphaObj } from '../../lib/helpers';
+import { sortAlphaObj } from '../../../lib/helpers';
 
 class AlphaBoxContentComponent extends React.Component {
   constructor(props) {
@@ -13,7 +13,9 @@ class AlphaBoxContentComponent extends React.Component {
 
   render() {
     const { letterIndex } = this.state;
-    const { items, linkColor } = this.props;
+    const {
+      items, linkColor, noResultsText, noResultsUri,
+    } = this.props;
 
     const renderLetters = this.letters.map((l, i) => {
       const available = items.filter(
@@ -96,29 +98,38 @@ class AlphaBoxContentComponent extends React.Component {
         <ul className="letters">
           {renderLetters}
         </ul>
-        {(() => {
-          if (letterIndex > -1) {
-            return (
-              <div>
-                <ul className="items">
-                  {renderItems}
-                </ul>
-              </div>
-            );
-          }
-          return null;
-        })()}
+        {
+          letterIndex > -1 && (
+            <div>
+              <ul className="items">
+                {renderItems}
+                {
+                  (noResultsText && noResultsUri) && (
+                    <li className="no-results"><a href={noResultsUri}>{noResultsText}</a></li>
+                  )
+                }
+              </ul>
+            </div>
+          )
+        }
       </div>
     );
   }
 }
 
+AlphaBoxContentComponent.defaultProps = {
+  noResultsText: '',
+  noResultsUri: '',
+};
+
 AlphaBoxContentComponent.propTypes = {
   linkColor: PropTypes.string.isRequired,
   items: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string.isRequired,
     url: PropTypes.string.isRequired,
   })).isRequired,
+  noResultsText: PropTypes.string,
+  noResultsUri: PropTypes.string,
 };
 
 AlphaBoxContentComponent.displayName = 'AlphaBoxContentComponent';

package/src/{components → layout-2016/components/common}/AUCollapsibleComponent.js

@@ -1,28 +1,7 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
 import React from 'react';
 import PropTypes from 'prop-types';
 
-/**
- * AU Kollapserbart Komponent
- *
- * Eksempel:
- * ```jsx
- *  <AUCollapsibleComponent
-            key="collapse"
-            collapsed
-            header="Collapsible element"
-            level={2}
-            className="hide-for-small-only"
-            onClick={(collapsed, node) => {
-              this.setState({
-                spinnerVisible: !collapsed,
-              });
-            }}
-          >
-            <h1>Test</h1>
-          </AUCollapsibleComponent>
- * ```
- */
-
 class AUCollapsibleComponent extends React.Component {
   constructor(props) {
     super(props);

package/src/{components → layout-2016/components/common}/AUSpinnerComponent.js

@@ -1,30 +1,8 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-env browser */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { isElementInViewport } from '../lib/helpers';
-/**
- * AU Spinner Komponent
- * Bliver brugt til lazy-loading af elementer, der først skal indlæses når de er synlige.
- *
- * Eksempel:
- * ```jsx
- * <AUSpinnerComponent
-          domID={spinnerID}
-          visible={this.state.spinnerVisible}
-          columns="large-12 medium-12 small-12"
-          content={<h1>Hej</h1>}
-          loaded={this.state.spinnerLoaded}
-          loadingCondition
-          onLoad={() => {
-            setTimeout(() => {
-              this.setState({
-                spinnerLoaded: true,
-              });
-            }, 2000);
-          }}
-        />
- * ```
- */
+import { isElementInViewport } from '../../../lib/helpers';
 
 class AUSpinnerComponent extends React.Component {
   constructor(props) {

package/src/{components → layout-2016/components}/databox/DataBoxAlphabetComponent.js

@@ -1,7 +1,7 @@
 /* eslint-env browser */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { sortAlphaObj } from '../../lib/helpers';
+import { sortAlphaObj } from '../../../lib/helpers';
 
 class DataBoxAlphabetComponent extends React.Component {
   constructor(props) {

package/src/{components → layout-2016/components}/databox/DataBoxAssociationComponent.js

@@ -1,8 +1,8 @@
 /* eslint-env browser */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { sortAlphaObj } from '../../lib/helpers';
-import AUCollapsibleComponent from '../AUCollapsibleComponent';
+import { sortAlphaObj } from '../../../lib/helpers';
+import AUCollapsibleComponent from '../common/AUCollapsibleComponent';
 
 class DataBoxAssociationComponent extends React.Component {
   constructor(props) {

package/src/{components → layout-2016/components}/databox/DataBoxButtonComponent.js

@@ -1,7 +1,8 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-env browser */
 import React from 'react';
 import PropTypes from 'prop-types';
-import AutoSuggestComponent from '../AutoSuggestComponent';
+import AUAutoSuggestComponent from '../../../components/AUAutoSuggestComponent';
 import DataBoxSuggestionComponent from './DataBoxSuggestionComponent';
 
 class DataBoxButtonComponent extends React.Component {
@@ -58,7 +59,7 @@ class DataBoxButtonComponent extends React.Component {
         return (
           <div className={classNames} key={i}>
             <span dangerouslySetInnerHTML={{ __html: b.text }} />
-            <AutoSuggestComponent
+            <AUAutoSuggestComponent
               placeholder={box.search.placeHolder}
               setQuery={() => { }}
               setResults={(items) => {
@@ -130,7 +131,10 @@ DataBoxButtonComponent.propTypes = {
   searchValue: PropTypes.string,
   setActive: PropTypes.func.isRequired,
   setSearchValue: PropTypes.func.isRequired,
-  button: PropTypes.shape({}).isRequired,
+  button: PropTypes.shape({
+    text: PropTypes.string.isRequired,
+    link: PropTypes.string.isRequired,
+  }).isRequired,
   box: PropTypes.shape({
     background: PropTypes.shape({
       color: PropTypes.string.isRequired,

package/src/{components → layout-2016/components}/databox/DataBoxComponent.js

@@ -7,8 +7,8 @@ import DataBoxButtonComponent from './DataBoxButtonComponent';
 import DataBoxGroupingComponent from './DataBoxGroupingComponent';
 import DataBoxSearchResultComponent from './DataBoxSearchResultComponent';
 import DataBoxAlphabetComponent from './DataBoxAlphabetComponent';
-import AUSpinnerComponent from '../AUSpinnerComponent';
-import { sortAlphaObj } from '../../lib/helpers';
+import AUSpinnerComponent from '../common/AUSpinnerComponent';
+import { sortAlphaObj } from '../../../lib/helpers';
 
 class DataBoxComponent extends React.Component {
   constructor(props) {

package/src/{components → layout-2016/components}/databox/DataBoxGroupingComponent.js

@@ -14,10 +14,12 @@ const DataBoxGroupingComponent = (props) => {
   } = props;
   let renderAssociations;
   if (stacked && grouping.associations.length === 1) {
+    // eslint-disable-next-line react/destructuring-assignment
     renderAssociations = props.grouping.associations.map(
       (a) => <DataBoxStackedAssociationComponent key={a.id} assoc={a} />,
     );
   } else {
+    // eslint-disable-next-line react/destructuring-assignment
     renderAssociations = props.grouping.associations.map((a, i) => {
       const open = expand
         || grouping.associations.length === 1

package/src/{components → layout-2016/components}/databox/DataBoxSearchResultComponent.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { sortAlphaObj } from '../../lib/helpers';
+import { sortAlphaObj } from '../../../lib/helpers';
 
 const DataBoxSearchResultComponent = (props) => {
   const { items, searchValue } = props;
@@ -23,10 +23,6 @@ const DataBoxSearchResultComponent = (props) => {
   );
 };
 
-DataBoxSearchResultComponent.defaultProps = {
-
-};
-
 DataBoxSearchResultComponent.propTypes = {
   items: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.number.isRequired,