@aarhus-university/au-lib-react-components 10.6.0 → 10.9.0

package/src/components/AUContentToggleComponent.tsx

@@ -1,33 +1,33 @@
-import React, {
-  useEffect,
-  useRef,
-  FC,
-} from 'react';
-import { setContentToggle } from '@aarhus-university/au-designsystem-delphinus/source/js/components/content-toggle';
-
-const AUContentToggleComponent: FC<AUContentToggleComponentProps> = ({
-  toggled,
-  classNames,
-  children,
-}: AUContentToggleComponentProps) => {
-  const toggleContainer = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    const toggle = toggleContainer?.current?.querySelector('.content-toggle__content');
-    if (toggle) {
-      const button = setContentToggle(toggle);
-      button?.setAttribute('aria-expanded', toggled ? 'true' : 'false');
-    }
-  }, []);
-  return (
-    <div ref={toggleContainer} className={classNames}>
-      {children}
-    </div>
-  );
-};
-
-AUContentToggleComponent.defaultProps = {
-  classNames: undefined,
-};
-
-AUContentToggleComponent.displayName = 'AUContentToggleComponent';
-export default AUContentToggleComponent;
+import React, {
+  useEffect,
+  useRef,
+  FC,
+} from 'react';
+import { setContentToggle } from '@aarhus-university/au-designsystem-delphinus/source/js/components/content-toggle';
+
+const AUContentToggleComponent: FC<AUContentToggleComponentProps> = ({
+  toggled,
+  classNames,
+  children,
+}: AUContentToggleComponentProps) => {
+  const toggleContainer = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const toggle = toggleContainer?.current?.querySelector('.content-toggle__content');
+    if (toggle) {
+      const button = setContentToggle(toggle);
+      button?.setAttribute('aria-expanded', toggled ? 'true' : 'false');
+    }
+  }, []);
+  return (
+    <div ref={toggleContainer} className={classNames}>
+      {children}
+    </div>
+  );
+};
+
+AUContentToggleComponent.defaultProps = {
+  classNames: undefined,
+};
+
+AUContentToggleComponent.displayName = 'AUContentToggleComponent';
+export default AUContentToggleComponent;

package/src/components/AUDatepickerComponent.tsx

@@ -1,117 +1,117 @@
-/* eslint-env browser */
-import React, { FC, useState } from 'react';
-import dayjs from 'dayjs';
-import AUCalendarComponent from './AUCalendarComponent';
-
-const AUDatepickerComponent: FC<AUDatepickerComponentProps> = ({
-  id,
-  lang,
-  date,
-  onDateChange,
-  onHide,
-  format,
-  showTime,
-  showLabel,
-  labelInline,
-  labelText,
-  fullWidth,
-  yearSpanMinus,
-  yearSpanPlus,
-  limitStart,
-  limitEnd,
-  disabled,
-}: AUDatepickerComponentProps) => {
-  const [showCalendar, setShowCalendar] = useState(false);
-  const [sDate, setDate] = useState<Date>(date as Date);
-  const dateFormatted = dayjs(sDate).format(format);
-
-  const hideDatePicker = () => {
-    setShowCalendar(false);
-    onHide(sDate, dateFormatted);
-  };
-
-  let className = 'form__field';
-  if (fullWidth) {
-    className = `${className} form__field--full-width`;
-  }
-
-  if (labelInline) {
-    className = `${className} form__field--inline-label`;
-  }
-
-  if (disabled) {
-    className = `${className} visually-disabled`;
-  }
-
-  return (
-    <div
-      className="datepicker"
-      aria-owns={`${id}-calendar`}
-      aria-haspopup="true"
-      aria-expanded={showCalendar}
-    >
-      <div className={className}>
-        {showLabel && <label htmlFor={id}>{labelText}</label>}
-        <input
-          id={id}
-          type="text"
-          value={dateFormatted}
-          title={
-            lang === 'da'
-              ? 'Klik for at åbne datovælger'
-              : 'Click to open datepicker'
-          }
-          readOnly
-          disabled={disabled}
-          onClick={() => setShowCalendar(!showCalendar)}
-        />
-      </div>
-      {showCalendar && (
-        <div className="datepicker__calendar-container">
-          <AUCalendarComponent
-            key={`${showCalendar}`}
-            minuteInterval={1}
-            selected={date}
-            day={(date as Date).getDate()}
-            month={(date as Date).getMonth() + 1}
-            year={(date as Date).getFullYear()}
-            hour={(date as Date).getHours()}
-            minute={(date as Date).getMinutes()}
-            onSelected={(selected) => {
-              const formatted = dayjs(selected).format(format);
-              setDate(selected);
-              onDateChange(selected, formatted);
-            }}
-            showTime={showTime}
-            yearSpanMinus={yearSpanMinus}
-            yearSpanPlus={yearSpanPlus}
-            closeable
-            onClose={hideDatePicker}
-            controls={id}
-            limitStart={limitStart}
-            limitEnd={limitEnd}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-
-AUDatepickerComponent.defaultProps = {
-  date: new Date(),
-  format: 'YYYY-MM-DD HH:mm',
-  showTime: true,
-  lang: 'da',
-  showLabel: false,
-  labelInline: false,
-  labelText: 'Vælg dato:',
-  fullWidth: true,
-  yearSpanMinus: 5,
-  yearSpanPlus: 5,
-  limitStart: null,
-  limitEnd: null,
-  disabled: false,
-};
-
-AUDatepickerComponent.displayName = 'AUDatepickerComponent';
-export default AUDatepickerComponent;
+/* eslint-env browser */
+import React, { FC, useState } from 'react';
+import dayjs from 'dayjs';
+import AUCalendarComponent from './AUCalendarComponent';
+
+const AUDatepickerComponent: FC<AUDatepickerComponentProps> = ({
+  id,
+  lang,
+  date,
+  onDateChange,
+  onHide,
+  format,
+  showTime,
+  showLabel,
+  labelInline,
+  labelText,
+  fullWidth,
+  yearSpanMinus,
+  yearSpanPlus,
+  limitStart,
+  limitEnd,
+  disabled,
+}: AUDatepickerComponentProps) => {
+  const [showCalendar, setShowCalendar] = useState(false);
+  const [sDate, setDate] = useState<Date>(date as Date);
+  const dateFormatted = dayjs(sDate).format(format);
+
+  const hideDatePicker = () => {
+    setShowCalendar(false);
+    onHide(sDate, dateFormatted);
+  };
+
+  let className = 'form__field';
+  if (fullWidth) {
+    className = `${className} form__field--full-width`;
+  }
+
+  if (labelInline) {
+    className = `${className} form__field--inline-label`;
+  }
+
+  if (disabled) {
+    className = `${className} visually-disabled`;
+  }
+
+  return (
+    <div
+      className="datepicker"
+      aria-owns={`${id}-calendar`}
+      aria-haspopup="true"
+      aria-expanded={showCalendar}
+    >
+      <div className={className}>
+        {showLabel && <label htmlFor={id}>{labelText}</label>}
+        <input
+          id={id}
+          type="text"
+          value={dateFormatted}
+          title={
+            lang === 'da'
+              ? 'Klik for at åbne datovælger'
+              : 'Click to open datepicker'
+          }
+          readOnly
+          disabled={disabled}
+          onClick={() => setShowCalendar(!showCalendar)}
+        />
+      </div>
+      {showCalendar && (
+        <div className="datepicker__calendar-container">
+          <AUCalendarComponent
+            key={`${showCalendar}`}
+            minuteInterval={1}
+            selected={date}
+            day={(date as Date).getDate()}
+            month={(date as Date).getMonth() + 1}
+            year={(date as Date).getFullYear()}
+            hour={(date as Date).getHours()}
+            minute={(date as Date).getMinutes()}
+            onSelected={(selected) => {
+              const formatted = dayjs(selected).format(format);
+              setDate(selected);
+              onDateChange(selected, formatted);
+            }}
+            showTime={showTime}
+            yearSpanMinus={yearSpanMinus}
+            yearSpanPlus={yearSpanPlus}
+            closeable
+            onClose={hideDatePicker}
+            controls={id}
+            limitStart={limitStart}
+            limitEnd={limitEnd}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+AUDatepickerComponent.defaultProps = {
+  date: new Date(),
+  format: 'YYYY-MM-DD HH:mm',
+  showTime: true,
+  lang: 'da',
+  showLabel: false,
+  labelInline: false,
+  labelText: 'Vælg dato:',
+  fullWidth: true,
+  yearSpanMinus: 5,
+  yearSpanPlus: 5,
+  limitStart: null,
+  limitEnd: null,
+  disabled: false,
+};
+
+AUDatepickerComponent.displayName = 'AUDatepickerComponent';
+export default AUDatepickerComponent;

package/src/components/AUErrorComponent.tsx

@@ -0,0 +1,78 @@
+import React, { FC } from 'react';
+import { SerializedError } from '@reduxjs/toolkit';
+import { FetchBaseQueryError } from '@reduxjs/toolkit/query';
+import AUNotificationComponent from './AUNotificationComponent';
+
+interface AUErrorComponentProps {
+  error?: AU.IError,
+  fetchError?: FetchBaseQueryError,
+  serializedError?: SerializedError,
+  withStatus?: boolean,
+}
+
+const AUErrorComponent: FC<AUErrorComponentProps> = ({
+  error: auError,
+  fetchError,
+  serializedError,
+  withStatus,
+}: AUErrorComponentProps) => {
+  if (auError) {
+    const { status, header, message } = auError;
+    return (
+      <AUNotificationComponent
+        type="warning"
+        header={`${withStatus ? `${status}: ` : ''}${header}`}
+        content={[
+          <p>{message}</p>,
+        ]}
+      />
+    );
+  }
+  if (fetchError && 'error' in fetchError) {
+    const { status, error } = fetchError;
+    return (
+      <AUNotificationComponent
+        type="warning"
+        header={withStatus ? status : undefined}
+        content={[
+          <p>{error}</p>,
+        ]}
+      />
+    );
+  }
+  if (fetchError && 'data' in fetchError) {
+    const { status, data } = fetchError;
+    return (
+      <AUNotificationComponent
+        type="warning"
+        header={withStatus ? `${status}` : undefined}
+        content={[
+          <p>{JSON.stringify(data)}</p>,
+        ]}
+      />
+    );
+  }
+  if (serializedError && 'message' in serializedError) {
+    const { code, message } = serializedError;
+    return (
+      <AUNotificationComponent
+        type="warning"
+        header={withStatus ? code : undefined}
+        content={[
+          <p>{message}</p>,
+        ]}
+      />
+    );
+  }
+  return null;
+};
+
+AUErrorComponent.defaultProps = {
+  error: undefined,
+  fetchError: undefined,
+  serializedError: undefined,
+  withStatus: false,
+};
+
+AUErrorComponent.displayName = 'AUErrorComponent';
+export default AUErrorComponent;

package/src/components/AUMobilePrefixComponent.tsx

@@ -1,15 +1,15 @@
-import React, { FC } from 'react';
-
-const AUMobilePrefixComponent: FC<AUMobilePrefixComponentProps> = ({
-  countryCodes,
-  important,
-}: AUMobilePrefixComponentProps) => {
-  const renderCountryCodes = (codes:AU.ICountryCode[]) => codes.map(c => <option key={c.da} value={`+${c.code}`}>{`${c.da} (+${c.code})`}</option>);
-  if (important) {
-    return <>{renderCountryCodes(countryCodes.filter(c => c.important))}</>;
-  }
-  return <>{renderCountryCodes(countryCodes)}</>;
-};
-
-AUMobilePrefixComponent.displayName = 'AUMobilePrefixComponent';
-export default AUMobilePrefixComponent;
+import React, { FC } from 'react';
+
+const AUMobilePrefixComponent: FC<AUMobilePrefixComponentProps> = ({
+  countryCodes,
+  important,
+}: AUMobilePrefixComponentProps) => {
+  const renderCountryCodes = (codes:AU.ICountryCode[]) => codes.map(c => <option key={c.da} value={`+${c.code}`}>{`${c.da} (+${c.code})`}</option>);
+  if (important) {
+    return <>{renderCountryCodes(countryCodes.filter(c => c.important))}</>;
+  }
+  return <>{renderCountryCodes(countryCodes)}</>;
+};
+
+AUMobilePrefixComponent.displayName = 'AUMobilePrefixComponent';
+export default AUMobilePrefixComponent;

package/src/components/AUModalComponent.tsx

@@ -1,80 +1,64 @@
-/* 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();
-                  }
-                  if (sender) {
-                    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;
+/* 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 } from 'react';
+import ReactDOM from 'react-dom';
+import AUButtonComponent from './AUButtonComponent';
+import { useModal } from '../lib/hooks';
+
+const AUModalComponent: FC<AUModalComponentProps> = ({
+  lang,
+  domId,
+  className,
+  children,
+  closeButton,
+  closeButtonDisabled,
+  sender,
+  show,
+  onClose,
+}: AUModalComponentProps) => {
+  useModal(domId, sender, show, !closeButtonDisabled, onClose);
+
+  return (
+    ReactDOM.createPortal(
+      <div
+        id={domId}
+        className={className}
+      >
+        <div className="modal-view__wrapper theme--normal">
+          {
+            closeButton && (
+              <AUButtonComponent
+                label={lang === 'da' ? 'Luk' : 'Close'}
+                disabled={closeButtonDisabled}
+                icon=""
+                hideLabel
+                classNames={['modal-view__close']}
+                dataGtm="au-btn-modal-close"
+                onClick={() => {
+                  if (typeof onClose === 'function') {
+                    onClose();
+                  }
+                }}
+              />
+            )
+          }
+          {children}
+        </div>
+      </div>,
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      document.querySelector('body')!,
+    )
+  );
+};
+
+AUModalComponent.defaultProps = {
+  domId: 'modal-view1',
+  closeButton: true,
+  lang: 'da',
+  className: 'modal-view',
+};
+
+AUModalComponent.displayName = 'AUModalComponent';
+export default AUModalComponent;

package/src/components/AUNotificationComponent.tsx

@@ -0,0 +1,42 @@
+import React, { FC } from 'react';
+
+const AUNotificationComponent: FC<AUNotificationComponentProps> = ({
+  header,
+  content,
+  actions,
+  type,
+  classNames,
+}: AUNotificationComponentProps) => {
+  const typeClass = type === 'default' ? '' : `notification--${type}`;
+  return (
+    <div className={[
+      'notification',
+      typeClass,
+    ].concat(classNames || []).join(' ').replace(/\s+/g, ' ').trim()}
+    >
+      <div className="notification__content">
+        {
+          header && <h2 className="notification__header">{header}</h2>
+        }
+        {content.map((c) => c)}
+      </div>
+      {
+        (actions || []).length > 0 && (
+          <div className="notification__actions">
+            {(actions || []).map((a) => a)}
+          </div>
+        )
+      }
+    </div>
+  );
+};
+
+AUNotificationComponent.defaultProps = {
+  header: null,
+  actions: [],
+  type: 'default',
+  classNames: [],
+};
+
+AUNotificationComponent.displayName = 'AUNotificationComponent';
+export default AUNotificationComponent;

package/src/components/AUReceiptComponent.tsx

@@ -1,33 +1,33 @@
-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;
+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;