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

package/src/components/{delphinus/AUModalComponent.js → AUModalComponent.tsx}

@@ -1,76 +1,78 @@
-/* eslint-env browser */
-/* eslint jsx-a11y/click-events-have-key-events: 0 */
-/* eslint jsx-a11y/no-noninteractive-element-interactions: 0 */
-/* eslint jsx-a11y/no-static-element-interactions: 0 */
-import React from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import { hideModal } from '@aarhus-university/au-designsystem-delphinus/source/js/components/modal-view';
-
-const AUModalComponent = (props) => {
-  const {
-    domId,
-    content,
-    children,
-    onClose,
-    closeButton,
-    lang,
-    sender,
-    className,
-  } = props;
-
-  return [
-    ReactDOM.createPortal(
-      <div
-        key={0}
-        id={domId}
-        className={className}
-      >
-        <div className="modal-view__wrapper theme--normal">
-          {
-            closeButton && (
-              <button
-                type="button"
-                className="modal-view__close button button--icon button--icon--hide-label"
-                data-icon=""
-                onClick={() => {
-                  if (typeof onClose === 'function') {
-                    onClose();
-                  }
-                  hideModal(domId, sender);
-                }}
-              >
-                {lang === 'da' ? 'Luk' : 'Close'}
-              </button>
-            )
-          }
-          {children || content}
-        </div>
-      </div>,
-      document.querySelector('body'),
-    ),
-  ];
-};
-
-AUModalComponent.defaultProps = {
-  children: null,
-  content: null,
-  onClose: null,
-  closeButton: true,
-  lang: 'da',
-  className: 'modal-view',
-};
-
-AUModalComponent.propTypes = {
-  domId: PropTypes.string.isRequired,
-  children: PropTypes.element,
-  content: PropTypes.element,
-  onClose: PropTypes.func,
-  closeButton: PropTypes.bool,
-  lang: PropTypes.string,
-  sender: PropTypes.element.isRequired,
-  className: PropTypes.string,
-};
-
-AUModalComponent.displayName = 'AUModalComponent';
-export default AUModalComponent;
+/* eslint-env browser */
+/* eslint jsx-a11y/click-events-have-key-events: 0 */
+/* eslint jsx-a11y/no-noninteractive-element-interactions: 0 */
+/* eslint jsx-a11y/no-static-element-interactions: 0 */
+import React, { FC, useLayoutEffect } from 'react';
+import ReactDOM from 'react-dom';
+import { hideModal } from '@aarhus-university/au-designsystem-delphinus/source/js/components/modal-view';
+
+export {
+  hideModal,
+};
+
+const AUModalComponent: FC<AUModalComponentProps> = ({
+  domId,
+  children,
+  onClose,
+  closeButton,
+  closeButtonDisabled,
+  lang,
+  sender,
+  className,
+}: AUModalComponentProps) => {
+  useLayoutEffect(() => {
+    const modalView = document.getElementById(domId);
+    if (modalView) {
+      const header = modalView.querySelector('.modal-view__header');
+      if (header && !header.getAttribute('id')) {
+        header.setAttribute('id', `${domId}-header`);
+        modalView.setAttribute('aria-labelledby', `${domId}-header`);
+      }
+    }
+  });
+
+  return (
+    ReactDOM.createPortal(
+      <div
+        key={0}
+        id={domId}
+        className={className}
+      >
+        <div className="modal-view__wrapper theme--normal">
+          {
+            closeButton && (
+              <button
+                type="button"
+                disabled={closeButtonDisabled}
+                className="modal-view__close button button--icon button--icon--hide-label"
+                data-icon=""
+                data-gtm="au-btn-modal-close"
+                title={lang === 'da' ? 'Luk' : 'Close'}
+                onClick={() => {
+                  if (typeof onClose === 'function') {
+                    onClose();
+                  }
+                  hideModal(domId, sender);
+                }}
+              >
+                {lang === 'da' ? 'Luk' : 'Close'}
+              </button>
+            )
+          }
+          {children}
+        </div>
+      </div>,
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      document.querySelector('body')!,
+    )
+  );
+};
+
+AUModalComponent.defaultProps = {
+  closeButton: true,
+  lang: 'da',
+  className: 'modal-view',
+};
+
+AUModalComponent.displayName = 'AUModalComponent';
+export default AUModalComponent;

package/src/components/{form/AUReceiptComponent.js → AUReceiptComponent.tsx}

@@ -1,40 +1,33 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const AUReceiptComponent = ({
-  receiptText,
-  helpText,
-  showGoTo,
-  buttons,
-}) => {
-  const renderButtons = buttons.map((btn) => <a key={btn.gotoLink} href={btn.gotoLink} className="button">{btn.gotoText}</a>);
-  return (
-    <div className="receipt">
-      <div className="receipt__icon" data-icon="" />
-      <h1 className="receipt__header" dangerouslySetInnerHTML={{ __html: receiptText }} />
-      {helpText}
-      {
-        showGoTo && (
-          <div className="receipt__post-action">
-            {renderButtons}
-          </div>
-        )
-      }
-    </div>
-  );
-};
-
-AUReceiptComponent.defaultProps = {
-  showGoTo: true,
-  helpText: null,
-  buttons: [],
-};
-
-AUReceiptComponent.propTypes = {
-  receiptText: PropTypes.string.isRequired,
-  helpText: PropTypes.element,
-  showGoTo: PropTypes.bool,
-  buttons: PropTypes.arrayOf(PropTypes.shape({})),
-};
-AUReceiptComponent.displayName = 'AUReceiptComponent';
-export default AUReceiptComponent;
+import React, { FC } from 'react';
+
+const AUReceiptComponent: FC<AUReceiptComponentProps> = ({
+  receiptText,
+  helpText,
+  showGoTo,
+  buttons,
+}: AUReceiptComponentProps) => {
+  const renderButtons = buttons.map((btn) => <a key={btn.gotoLink} href={btn.gotoLink} className="button">{btn.gotoText}</a>);
+  return (
+    <div className="receipt">
+      <div className="receipt__icon" data-icon="" />
+      <h1 className="receipt__header" dangerouslySetInnerHTML={{ __html: receiptText }} />
+      {helpText}
+      {
+        showGoTo && (
+          <div className="receipt__post-action">
+            {renderButtons}
+          </div>
+        )
+      }
+    </div>
+  );
+};
+
+AUReceiptComponent.defaultProps = {
+  showGoTo: true,
+  helpText: null,
+  buttons: [],
+};
+
+AUReceiptComponent.displayName = 'AUReceiptComponent';
+export default AUReceiptComponent;

package/src/components/AUSpinnerComponent.tsx

@@ -0,0 +1,64 @@
+/* eslint-env browser */
+import React, { useEffect, FC } from 'react';
+import { isElementInViewport } from '@aarhus-university/au-designsystem-delphinus/source/js/components/helpers';
+
+const AUSpinnerComponent: FC<AUSpinnerComponentProps> = ({
+  domID,
+  className,
+  children,
+  visible,
+  loaded,
+  loadingCondition,
+  height,
+  init,
+  onLoad,
+}: AUSpinnerComponentProps) => {
+  const lazyLoad = (): void => {
+    const element = document.getElementById(domID as string);
+    if (element
+      && !loaded
+      && loadingCondition
+      && (visible || isElementInViewport(element))) {
+      onLoad();
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', () => {
+      lazyLoad();
+    });
+  }, []);
+
+  useEffect(() => {
+    lazyLoad();
+  });
+
+  if (!loaded) {
+    if (init === 'table') {
+      return (
+        <div id={domID} className={`processing-state processing-state--init-table ${className}`} style={{ minHeight: height }} />
+      );
+    }
+    if (init === 'box') {
+      return (
+        <div id={domID} className={`processing-state processing-state--init-box ${className}`} style={{ minHeight: height }} />
+      );
+    }
+    return (
+      <div id={domID} className={`processing-state ${className}`} style={{ minHeight: height }} />
+    );
+  }
+
+  return children;
+};
+
+AUSpinnerComponent.defaultProps = {
+  domID: 'au-spinner-component',
+  visible: false,
+  className: '',
+  height: 'auto',
+  init: '',
+};
+
+AUSpinnerComponent.displayName = 'AUSpinnerComponent';
+export default AUSpinnerComponent;

package/src/components/{delphinus/AUSubNavComponent.js → AUSubNavComponent.tsx}

@@ -1,53 +1,38 @@
-/* eslint-env browser */
-import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { setSubNavToggle } from '@aarhus-university/au-designsystem-delphinus/source/js/components/nav';
-
-const AUSubNavComponent = ({
-  children,
-  className,
-  dataIcon,
-  text,
-  ariaLabel,
-  id,
-}) => {
-  const buttonRef = useRef();
-  useEffect(() => {
-    const subNavBtns = document.querySelectorAll('.sub-nav > button.nav__item');
-    setSubNavToggle(subNavBtns, buttonRef.current);
-  }, []);
-
-  return (
-    <div className="sub-nav">
-      <button
-        ref={buttonRef}
-        id={id}
-        type="button"
-        className={className}
-        data-icon={dataIcon}
-        aria-label={ariaLabel}
-        aria-expanded={false}
-      >
-        {text}
-      </button>
-      {children}
-    </div>
-  );
-};
-
-AUSubNavComponent.propTypes = {
-  ariaLabel: null,
-  id: null,
-};
-
-AUSubNavComponent.propTypes = {
-  children: PropTypes.element.isRequired,
-  className: PropTypes.string.isRequired,
-  dataIcon: PropTypes.string.isRequired,
-  text: PropTypes.string.isRequired,
-  ariaLabel: PropTypes.string,
-  id: PropTypes.string,
-};
-
-AUSubNavComponent.displayName = 'AUSubNavComponent';
-export default AUSubNavComponent;
+/* eslint-env browser */
+import React, { useEffect, useRef, FC } from 'react';
+import { setSubNavToggle } from '@aarhus-university/au-designsystem-delphinus/source/js/components/nav';
+
+const AUSubNavComponent: FC<AUSubNavComponentProps> = ({
+  children,
+  className,
+  dataIcon,
+  text,
+  ariaLabel,
+  id,
+}: AUSubNavComponentProps) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
+    const subNavBtns = document.querySelectorAll('.sub-nav > button.nav__item');
+    setSubNavToggle(subNavBtns, buttonRef.current as Element);
+  }, []);
+
+  return (
+    <div className="sub-nav">
+      <button
+        ref={buttonRef}
+        id={id}
+        type="button"
+        className={className}
+        data-icon={dataIcon}
+        aria-label={ariaLabel}
+        aria-expanded={false}
+      >
+        {text}
+      </button>
+      {children}
+    </div>
+  );
+};
+
+AUSubNavComponent.displayName = 'AUSubNavComponent';
+export default AUSubNavComponent;

package/src/components/{form/AUSubmitButtonContainerComponent.js → AUSubmitButtonContainerComponent.tsx}

@@ -1,39 +1,31 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { profileLabels } from '../../lib/i18n';
-
-const AUSubmitButtonContainerComponent = ({
-  lang,
-  disabled,
-  onSubmit,
-  onCancel,
-}) => (
-  <div className="submit button-container">
-    <button
-      type="submit"
-      className={`button${disabled ? ' button--processing' : ''}`}
-      disabled={disabled}
-      onClick={onSubmit}
-    >
-      {profileLabels[lang].save}
-    </button>
-    <button
-      type="button"
-      className="button button--text"
-      disabled={disabled}
-      onClick={onCancel}
-    >
-      {profileLabels[lang].cancel}
-    </button>
-  </div>
-);
-
-AUSubmitButtonContainerComponent.propTypes = {
-  lang: PropTypes.string.isRequired,
-  disabled: PropTypes.bool.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  onCancel: PropTypes.func.isRequired,
-};
-
-AUSubmitButtonContainerComponent.displayName = 'AUSubmitButtonContainerComponent';
-export default AUSubmitButtonContainerComponent;
+import React, { FC } from 'react';
+import { profileLabels } from '../lib/i18n';
+
+const AUSubmitButtonContainerComponent: FC<AUSubmitButtonContainerComponentProps> = ({
+  lang,
+  disabled,
+  onSubmit,
+  onCancel,
+}: AUSubmitButtonContainerComponentProps) => (
+  <div className="submit button-container">
+    <button
+      type="submit"
+      className={`button${disabled ? ' button--processing' : ''}`}
+      disabled={disabled}
+      onClick={onSubmit}
+    >
+      {profileLabels[lang].save}
+    </button>
+    <button
+      type="button"
+      className="button button--text"
+      disabled={disabled}
+      onClick={onCancel}
+    >
+      {profileLabels[lang].cancel}
+    </button>
+  </div>
+);
+
+AUSubmitButtonContainerComponent.displayName = 'AUSubmitButtonContainerComponent';
+export default AUSubmitButtonContainerComponent;

package/src/components/AUTabbedContentComponent.tsx

@@ -0,0 +1,145 @@
+/* eslint-env browser */
+/* eslint-disable max-len */
+import React, { useEffect, useRef, FC } from 'react';
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  NavLink,
+  useLocation,
+} from 'react-router-dom';
+import { setTabbedContent, isBelowViewportLimit, destroyTabs } from '@aarhus-university/au-designsystem-delphinus/source/js/components/tabs';
+
+const TabRoutes: FC<TabRoutesProps> = ({ onRouteChange, content }: TabRoutesProps) => {
+  const location = useLocation();
+  useEffect(() => {
+    onRouteChange(location);
+  }, [location]);
+
+  return (
+    <Routes>
+      {content}
+    </Routes>
+  );
+};
+
+TabRoutes.displayName = 'Routes';
+
+let windowInnerWidth = 0;
+let tabbedObject: ITabbedObject | null = null;
+
+const AUTabbedContentComponent: FC<AUTabbedContentComponentProps> = ({
+  tabKey,
+  tabs,
+  tabContent,
+  children,
+  focus,
+  initial,
+  lang,
+  callback,
+  withRouter,
+  classNames,
+}: AUTabbedContentComponentProps) => {
+  const tabsElement = useRef<HTMLDivElement>(null);
+
+  const setTabs = () => {
+    if (tabbedObject != null) {
+      if (isBelowViewportLimit(tabbedObject.domElement.classList)) {
+        if (!tabbedObject.rendered) {
+          setTabbedContent(tabKey as number, tabbedObject.domElement, initial, focus, callback);
+          tabbedObject.rendered = true;
+        }
+      } else if (tabbedObject.rendered) {
+        destroyTabs(tabbedObject.domElement);
+        tabbedObject.rendered = false;
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (!withRouter) {
+      tabbedObject = {
+        domElement: tabsElement.current as HTMLElement,
+        rendered: false,
+      };
+      setTabs();
+      windowInnerWidth = window.innerWidth;
+      window.addEventListener('resize', () => {
+        if (windowInnerWidth > 0 && window.innerWidth !== windowInnerWidth) {
+          windowInnerWidth = window.innerWidth;
+          setTabs();
+        }
+      });
+    }
+  }, []);
+
+  if (withRouter) {
+    const renderRouteTabs = tabs.map((tab) => (
+      <NavLink
+        key={tab.href}
+        to={tab.href}
+        className={({ isActive }) => isActive ? 'nav__item nav__item--active' : 'nav__item'}
+        dangerouslySetInnerHTML={{ __html: tab.text }}
+      />
+    ));
+    const renderContent = (tabContent || []).map((content, index: number) => (
+      <Route
+        key={tabs[index].href}
+        path={tabs[index].href}
+      >
+        {content}
+      </Route>
+    ));
+
+    return (
+      <Router>
+        <div ref={tabsElement} className={classNames}>
+          <div className="nav nav--has-active-item">
+            <div className="nav__items">
+              {renderRouteTabs}
+            </div>
+          </div>
+          <TabRoutes
+            content={renderContent}
+            onRouteChange={() => {
+              if (typeof callback === 'function') {
+                callback();
+              }
+            }}
+          />
+        </div>
+      </Router>
+    );
+  }
+
+  // eslint-disable-next-line jsx-a11y/control-has-associated-label
+  const renderTabs = tabs.map((tab: ITabbedTab) => <a key={tab.href} href={tab.href} className="nav__item" data-gtm={tab.dataGtm} dangerouslySetInnerHTML={{ __html: tab.text }} />);
+
+  return (
+    <div ref={tabsElement} className={classNames}>
+      <div className="nav nav--has-active-item">
+        <div className="nav__items">
+          {renderTabs}
+        </div>
+        <button type="button" className="nav__toggle">{lang === 'da' ? 'Mere' : 'More'}</button>
+      </div>
+      {children}
+    </div>
+  );
+};
+
+AUTabbedContentComponent.defaultProps = {
+  tabKey: 0,
+  children: null,
+  tabContent: null,
+  focus: true,
+  initial: 0,
+  lang: 'da',
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  callback: () => { },
+  withRouter: false,
+  classNames: 'tabbed-content',
+};
+
+AUTabbedContentComponent.displayName = 'AUTabbedContentComponent';
+export default AUTabbedContentComponent;

package/src/components/{delphinus/AUTableComponent.js → AUTableComponent.tsx}

@@ -1,28 +1,24 @@
-import React, { useLayoutEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { setResponsiveTable } from '@aarhus-university/au-designsystem-delphinus/source/js/components/table';
-
-
-const AUTableComponent = ({ children, className }) => {
-  const tableRef = useRef(null);
-  useLayoutEffect(() => {
-    const element = tableRef.current;
-    if (element) {
-      setResponsiveTable(element);
-    }
-  }, []);
-
-  return (
-    <table ref={tableRef} className={className}>
-      {children}
-    </table>
-  );
-};
-
-AUTableComponent.propTypes = {
-  className: PropTypes.string.isRequired,
-  children: PropTypes.element.isRequired,
-};
-
-AUTableComponent.displayName = 'AUTableComponent';
-export default AUTableComponent;
+import React, { useLayoutEffect, useRef, FC } from 'react';
+import { setResponsiveTable } from '@aarhus-university/au-designsystem-delphinus/source/js/components/table';
+
+const AUTableComponent: FC<AUTableComponentProps> = ({
+  children,
+  className,
+}: AUTableComponentProps) => {
+  const tableRef = useRef<HTMLTableElement>(null);
+  useLayoutEffect(() => {
+    const element = tableRef.current;
+    if (element) {
+      setResponsiveTable(element);
+    }
+  }, []);
+
+  return (
+    <table ref={tableRef} className={className}>
+      {children}
+    </table>
+  );
+};
+
+AUTableComponent.displayName = 'AUTableComponent';
+export default AUTableComponent;