@aarhus-university/au-lib-react-components 10.0.1 → 10.0.4

package/src/components/AUToastComponent.tsx

@@ -2,17 +2,17 @@
 import React, {
   useEffect, useLayoutEffect, useRef, FC,
 } from 'react';
-import PropTypes from 'prop-types';
 
 const dismissTimeout = 5000;
 let timeoutId: NodeJS.Timeout | null = null;
 
 const AUToastComponent: FC<AUToastComponentProps> = ({
   message: pMessage,
+  buttonText,
   dismiss,
   onOpen,
 }: AUToastComponentProps) => {
-  const { type, message } = pMessage;
+  const { type, message, header } = pMessage;
   const toastRef = useRef<HTMLDivElement>(null);
   const persistent = type !== 'confirm';
 
@@ -63,6 +63,13 @@ const AUToastComponent: FC<AUToastComponentProps> = ({
   return (
     <div ref={toastRef} className={className}>
       <div className="toast-notification__content">
+        {
+          header && (
+            <h2 className="toast-notification__header">
+              {header}
+            </h2>
+          )
+        }
         <p dangerouslySetInnerHTML={{ __html: message }} />
       </div>
       {
@@ -76,7 +83,7 @@ const AUToastComponent: FC<AUToastComponentProps> = ({
               }
             }}
           >
-            OK
+            {buttonText}
           </button>
         )
       }
@@ -85,20 +92,12 @@ const AUToastComponent: FC<AUToastComponentProps> = ({
 };
 
 AUToastComponent.defaultProps = {
+  buttonText: 'OK',
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   dismiss: () => { },
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   onOpen: () => { },
 };
 
-AUToastComponent.propTypes = {
-  message: PropTypes.shape({
-    type: PropTypes.string.isRequired,
-    message: PropTypes.string.isRequired,
-  }).isRequired,
-  dismiss: PropTypes.func,
-  onOpen: PropTypes.func,
-};
-
 AUToastComponent.displayName = 'AUToastComponent';
 export default AUToastComponent;

package/src/components/profile/AUProfileLoginComponent.tsx

@@ -1,26 +1,26 @@
-/* eslint-env browser */
-import React, { FC } from 'react';
-
-const AUProfileLoginComponent: FC<AUProfileLoginComponentProps> = ({
-  loggedIn,
-  loginUri,
-  children,
-  text,
-}: AUProfileLoginComponentProps) => {
-  if (!loggedIn) {
-    return (
-      <a
-        className="nav__item nav__item--icon nav__item--icon--right nav__item--icon--always-show-label"
-        data-icon=""
-        href={loginUri}
-      >
-        {text}
-      </a>
-    );
-  }
-
-  return children;
-};
-
-AUProfileLoginComponent.displayName = 'AUProfileLoginComponent';
-export default AUProfileLoginComponent;
+/* eslint-env browser */
+import React, { FC } from 'react';
+
+const AUProfileLoginComponent: FC<AUProfileLoginComponentProps> = ({
+  loggedIn,
+  loginUri,
+  children,
+  text,
+}: AUProfileLoginComponentProps) => {
+  if (!loggedIn) {
+    return (
+      <a
+        className="nav__item nav__item--icon nav__item--icon--right nav__item--icon--always-show-label"
+        data-icon=""
+        href={loginUri}
+      >
+        {text}
+      </a>
+    );
+  }
+
+  return children;
+};
+
+AUProfileLoginComponent.displayName = 'AUProfileLoginComponent';
+export default AUProfileLoginComponent;

package/src/layout-2016/components/alphabox/AlphaBoxComponent.js

@@ -1,143 +1,143 @@
-/* eslint-env browser */
-import React from 'react';
-import PropTypes from 'prop-types';
-import AlphaBoxContentComponent from './AlphaBoxContentComponent';
-import AUAutoSuggestComponent from '../../../components/AUAutoSuggestComponent';
-import DataBoxSuggestionComponent from '../databox/DataBoxSuggestionComponent';
-
-class AlphaBoxComponent extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      items: [],
-    };
-
-    this.getSuggestions = this.getSuggestions.bind(this);
-  }
-
-  componentDidMount() {
-    const { box } = this.props;
-    const { data } = box;
-    if (data.mode === 'json' && data.source !== '') {
-      if (data.itemsOnly) {
-        data.source += '?itemsOnly=true';
-      }
-      fetch(data.source).then((promise) => promise.json()).then((pData) => {
-        this.setState({ items: pData.items });
-      });
-    }
-  }
-
-  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
-          || 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 })));
-  }
-
-  render() {
-    const { box } = this.props;
-    const { items } = this.state;
-    const { config } = box;
-    const renderLinks = config.links.map((l) => (
-      <li key={l.title}>
-        <a
-          href={l.url}
-          onClick={() => {
-            if (typeof l.onClick === 'function') {
-              l.onClick();
-            }
-          }}
-          style={{ backgroundColor: box.background.linkColor }}
-        >
-          {l.title}
-        </a>
-      </li>
-    ));
-
-    return (
-      <div className="au_alphabox" style={{ backgroundColor: box.background.color }}>
-        <div>
-          <h2>
-            <a href={config.url}>{config.title}</a>
-          </h2>
-          <AlphaBoxContentComponent
-            items={items}
-            linkColor={box.background.linkColor}
-            noResultsText={config.noResultsAlphabet}
-            noResultsUri={config.noResultsUri}
-          />
-          <AUAutoSuggestComponent
-            placeholder={box.search.placeHolder}
-            setResults={(_items) => {
-              if (_items.length >= 1 && _items[0].url) {
-                window.location.href = _items[0].url;
-              }
-            }}
-            collection={[]}
-            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>
-    );
-  }
-}
-
-AlphaBoxComponent.propTypes = {
-  box: PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    data: PropTypes.shape({
-      itemsOnly: PropTypes.bool.isRequired,
-      mode: PropTypes.string.isRequired,
-      source: PropTypes.string.isRequired,
-    }),
-    config: PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      url: PropTypes.string.isRequired,
-      description: PropTypes.string.isRequired,
-      container: PropTypes.string.isRequired,
-      tracking: PropTypes.string.isRequired,
-      links: PropTypes.arrayOf(PropTypes.shape({
-        title: PropTypes.string.isRequired,
-        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,
-      linkColor: PropTypes.string.isRequired,
-    }).isRequired,
-    search: PropTypes.shape({
-      placeHolder: PropTypes.string.isRequired,
-      minLength: PropTypes.number.isRequired,
-    }).isRequired,
-  }).isRequired,
-};
-
-AlphaBoxComponent.displayName = 'AlphaBoxComponent';
-export default AlphaBoxComponent;
+/* eslint-env browser */
+import React from 'react';
+import PropTypes from 'prop-types';
+import AlphaBoxContentComponent from './AlphaBoxContentComponent';
+import AUAutoSuggestComponent from '../../../components/AUAutoSuggestComponent';
+import DataBoxSuggestionComponent from '../databox/DataBoxSuggestionComponent';
+
+class AlphaBoxComponent extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      items: [],
+    };
+
+    this.getSuggestions = this.getSuggestions.bind(this);
+  }
+
+  componentDidMount() {
+    const { box } = this.props;
+    const { data } = box;
+    if (data.mode === 'json' && data.source !== '') {
+      if (data.itemsOnly) {
+        data.source += '?itemsOnly=true';
+      }
+      fetch(data.source).then((promise) => promise.json()).then((pData) => {
+        this.setState({ items: pData.items });
+      });
+    }
+  }
+
+  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
+          || 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 })));
+  }
+
+  render() {
+    const { box } = this.props;
+    const { items } = this.state;
+    const { config } = box;
+    const renderLinks = config.links.map((l) => (
+      <li key={l.title}>
+        <a
+          href={l.url}
+          onClick={() => {
+            if (typeof l.onClick === 'function') {
+              l.onClick();
+            }
+          }}
+          style={{ backgroundColor: box.background.linkColor }}
+        >
+          {l.title}
+        </a>
+      </li>
+    ));
+
+    return (
+      <div className="au_alphabox" style={{ backgroundColor: box.background.color }}>
+        <div>
+          <h2>
+            <a href={config.url}>{config.title}</a>
+          </h2>
+          <AlphaBoxContentComponent
+            items={items}
+            linkColor={box.background.linkColor}
+            noResultsText={config.noResultsAlphabet}
+            noResultsUri={config.noResultsUri}
+          />
+          <AUAutoSuggestComponent
+            placeholder={box.search.placeHolder}
+            setResults={(_items) => {
+              if (_items.length >= 1 && _items[0].url) {
+                window.location.href = _items[0].url;
+              }
+            }}
+            collection={[]}
+            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>
+    );
+  }
+}
+
+AlphaBoxComponent.propTypes = {
+  box: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    data: PropTypes.shape({
+      itemsOnly: PropTypes.bool.isRequired,
+      mode: PropTypes.string.isRequired,
+      source: PropTypes.string.isRequired,
+    }),
+    config: PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      url: PropTypes.string.isRequired,
+      description: PropTypes.string.isRequired,
+      container: PropTypes.string.isRequired,
+      tracking: PropTypes.string.isRequired,
+      links: PropTypes.arrayOf(PropTypes.shape({
+        title: PropTypes.string.isRequired,
+        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,
+      linkColor: PropTypes.string.isRequired,
+    }).isRequired,
+    search: PropTypes.shape({
+      placeHolder: PropTypes.string.isRequired,
+      minLength: PropTypes.number.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
+
+AlphaBoxComponent.displayName = 'AlphaBoxComponent';
+export default AlphaBoxComponent;

package/src/layout-2016/components/alphabox/AlphaBoxContentComponent.js

@@ -1,136 +1,136 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { sortAlphaObj } from '../../../lib/helpers';
-
-class AlphaBoxContentComponent extends React.Component {
-  constructor(props) {
-    super(props);
-    this.letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'æ', 'ø', 'å'];
-    this.state = {
-      letterIndex: -1,
-    };
-  }
-
-  render() {
-    const { letterIndex } = this.state;
-    const {
-      items, linkColor, noResultsText, noResultsUri,
-    } = this.props;
-
-    const renderLetters = this.letters.map((l, i) => {
-      const available = items.filter(
-        (x) => x.name.toLowerCase().indexOf(l) === 0,
-      ).length > 0;
-
-      let classNames = '';
-      if (available) {
-        classNames += 'available';
-      }
-
-      if (i === letterIndex) {
-        classNames += ' active';
-      }
-
-      let style = {};
-      if (available) {
-        if (letterIndex === i) {
-          style = { backgroundColor: '#fff', color: linkColor };
-        } else {
-          style = { backgroundColor: linkColor };
-        }
-      }
-
-      return (
-        <li
-          key={l}
-          className={classNames}
-        >
-          <button
-            type="button"
-            style={style}
-            onClick={() => {
-              if (available) {
-                this.setState({
-                  letterIndex: i,
-                });
-              }
-            }}
-          >
-            {l}
-          </button>
-        </li>
-      );
-    });
-
-    let filtered = [];
-    if (letterIndex > -1) {
-      filtered = items.filter(
-        (x) => x.name.toLowerCase().indexOf(this.letters[letterIndex]) === 0,
-      );
-    }
-
-    const renderItems = filtered.sort(sortAlphaObj).map((item, i) => {
-      const key = i;
-      const renderChildren = item.children.map(
-        (c) => <li key={c.name}><a href={c.url}>{c.name}</a></li>,
-      );
-
-      if (item.children.length > 0) {
-        return (
-          <li key={key}>
-            <a href={item.url}>{item.name}</a>
-            <ul>
-              {renderChildren}
-            </ul>
-          </li>
-        );
-      }
-
-      return (
-        <li key={key}>
-          <a href={item.url}>{item.name}</a>
-        </li>
-      );
-    });
-
-    return (
-      <div className="au_alphabox_content">
-        <ul className="letters">
-          {renderLetters}
-        </ul>
-        {
-          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';
-export default AlphaBoxContentComponent;
+import React from 'react';
+import PropTypes from 'prop-types';
+import { sortAlphaObj } from '../../../lib/helpers';
+
+class AlphaBoxContentComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'æ', 'ø', 'å'];
+    this.state = {
+      letterIndex: -1,
+    };
+  }
+
+  render() {
+    const { letterIndex } = this.state;
+    const {
+      items, linkColor, noResultsText, noResultsUri,
+    } = this.props;
+
+    const renderLetters = this.letters.map((l, i) => {
+      const available = items.filter(
+        (x) => x.name.toLowerCase().indexOf(l) === 0,
+      ).length > 0;
+
+      let classNames = '';
+      if (available) {
+        classNames += 'available';
+      }
+
+      if (i === letterIndex) {
+        classNames += ' active';
+      }
+
+      let style = {};
+      if (available) {
+        if (letterIndex === i) {
+          style = { backgroundColor: '#fff', color: linkColor };
+        } else {
+          style = { backgroundColor: linkColor };
+        }
+      }
+
+      return (
+        <li
+          key={l}
+          className={classNames}
+        >
+          <button
+            type="button"
+            style={style}
+            onClick={() => {
+              if (available) {
+                this.setState({
+                  letterIndex: i,
+                });
+              }
+            }}
+          >
+            {l}
+          </button>
+        </li>
+      );
+    });
+
+    let filtered = [];
+    if (letterIndex > -1) {
+      filtered = items.filter(
+        (x) => x.name.toLowerCase().indexOf(this.letters[letterIndex]) === 0,
+      );
+    }
+
+    const renderItems = filtered.sort(sortAlphaObj).map((item, i) => {
+      const key = i;
+      const renderChildren = item.children.map(
+        (c) => <li key={c.name}><a href={c.url}>{c.name}</a></li>,
+      );
+
+      if (item.children.length > 0) {
+        return (
+          <li key={key}>
+            <a href={item.url}>{item.name}</a>
+            <ul>
+              {renderChildren}
+            </ul>
+          </li>
+        );
+      }
+
+      return (
+        <li key={key}>
+          <a href={item.url}>{item.name}</a>
+        </li>
+      );
+    });
+
+    return (
+      <div className="au_alphabox_content">
+        <ul className="letters">
+          {renderLetters}
+        </ul>
+        {
+          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';
+export default AlphaBoxContentComponent;