@aarhus-university/au-lib-react-components 11.4.0 → 11.4.2

package/src/components/AUNotificationComponent.tsx

@@ -1,43 +1,43 @@
-/* eslint-disable react/no-array-index-key */
-import React, { FC, Fragment } 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, i) => <Fragment key={i}>{c}</Fragment>)}
-      </div>
-      {
-        (actions || []).length > 0 && (
-          <div className="notification__actions">
-            {(actions || []).map((a, i) => <Fragment key={i}>{a}</Fragment>)}
-          </div>
-        )
-      }
-    </div>
-  );
-};
-
-AUNotificationComponent.defaultProps = {
-  header: null,
-  actions: [],
-  type: 'default',
-  classNames: [],
-};
-
-AUNotificationComponent.displayName = 'AUNotificationComponent';
-export default AUNotificationComponent;
+/* eslint-disable react/no-array-index-key */
+import React, { FC, Fragment } 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, i) => <Fragment key={i}>{c}</Fragment>)}
+      </div>
+      {
+        (actions || []).length > 0 && (
+          <div className="notification__actions">
+            {(actions || []).map((a, i) => <Fragment key={i}>{a}</Fragment>)}
+          </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;

package/src/components/AUSpinnerComponent.tsx

@@ -1,36 +1,36 @@
-/* eslint-disable react/static-property-placement */
-/* eslint-env browser */
-import React, { FC } from 'react';
-
-const AUSpinnerComponent: FC<AUSpinnerComponentProps> = ({
-  loaded,
-  init,
-  height,
-  className,
-  children,
-}: AUSpinnerComponentProps) => {
-  let classNames = 'processing-state';
-  if (init === 'table' || init === 'box') {
-    classNames = `${classNames} processing-state--init-${init}`;
-  }
-  if (className) {
-    classNames = `${classNames} ${className}`;
-  }
-  if (!loaded) {
-    return (
-      <div
-        className={classNames}
-        style={{ minHeight: height }}
-      />
-    );
-  }
-
-  return children;
-};
-
-AUSpinnerComponent.defaultProps = {
-  className: '',
-};
-
-AUSpinnerComponent.displayName = 'AUSpinnerComponent';
-export default AUSpinnerComponent;
+/* eslint-disable react/static-property-placement */
+/* eslint-env browser */
+import React, { FC } from 'react';
+
+const AUSpinnerComponent: FC<AUSpinnerComponentProps> = ({
+  loaded,
+  init,
+  height,
+  className,
+  children,
+}: AUSpinnerComponentProps) => {
+  let classNames = 'processing-state';
+  if (init === 'table' || init === 'box') {
+    classNames = `${classNames} processing-state--init-${init}`;
+  }
+  if (className) {
+    classNames = `${classNames} ${className}`;
+  }
+  if (!loaded) {
+    return (
+      <div
+        className={classNames}
+        style={{ minHeight: height }}
+      />
+    );
+  }
+
+  return children;
+};
+
+AUSpinnerComponent.defaultProps = {
+  className: '',
+};
+
+AUSpinnerComponent.displayName = 'AUSpinnerComponent';
+export default AUSpinnerComponent;

package/src/components/AUStepComponent.tsx

@@ -1,47 +1,47 @@
-/* eslint-disable react/no-array-index-key */
-import React, { FC } from 'react';
-
-const AUStepComponent: FC<AUStepComponentProps> = ({
-  step,
-  children,
-  stepHeadlines,
-  introElement,
-  outroElement,
-}: AUStepComponentProps) => (
-  <>
-    {
-      (step > -1 && step < children.length) && (
-        <ol className="stepper" data-steps={children.length}>
-          {
-            stepHeadlines.map((headline, index) => (
-              <li key={headline} className={`stepper__item${index === step ? ' stepper__item--active' : ''}`}>
-                <span className="stepper__item__label">{headline}</span>
-              </li>
-            ))
-          }
-        </ol>
-      )
-    }
-    {
-      step < 0 && introElement
-    }
-    {
-      children.map((child, index) => (
-        <div key={index} style={{ display: step === index ? 'initial' : 'none' }}>
-          {child}
-        </div>
-      ))
-    }
-    {
-      (step > children.length - 1) && outroElement
-    }
-  </>
-);
-
-AUStepComponent.defaultProps = {
-  introElement: undefined,
-  outroElement: undefined,
-};
-
-AUStepComponent.displayName = 'AUStepComponent';
-export default AUStepComponent;
+/* eslint-disable react/no-array-index-key */
+import React, { FC } from 'react';
+
+const AUStepComponent: FC<AUStepComponentProps> = ({
+  step,
+  children,
+  stepHeadlines,
+  introElement,
+  outroElement,
+}: AUStepComponentProps) => (
+  <>
+    {
+      (step > -1 && step < children.length) && (
+        <ol className="stepper" data-steps={children.length}>
+          {
+            stepHeadlines.map((headline, index) => (
+              <li key={headline} className={`stepper__item${index === step ? ' stepper__item--active' : ''}`}>
+                <span className="stepper__item__label">{headline}</span>
+              </li>
+            ))
+          }
+        </ol>
+      )
+    }
+    {
+      step < 0 && introElement
+    }
+    {
+      children.map((child, index) => (
+        <div key={index} style={{ display: step === index ? 'initial' : 'none' }}>
+          {child}
+        </div>
+      ))
+    }
+    {
+      (step > children.length - 1) && outroElement
+    }
+  </>
+);
+
+AUStepComponent.defaultProps = {
+  introElement: undefined,
+  outroElement: undefined,
+};
+
+AUStepComponent.displayName = 'AUStepComponent';
+export default AUStepComponent;

package/src/components/AUSubNavComponent.tsx

@@ -1,48 +1,48 @@
-/* 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');
-    const {
-      element,
-      bodyClickEvent,
-      buttonClickEvent,
-    } = setSubNavToggle(subNavBtns, buttonRef.current as Element);
-    return () => {
-      if (element) {
-        element.removeEventListener('click', bodyClickEvent);
-      }
-      buttonRef.current?.removeEventListener('click', buttonClickEvent);
-    };
-  }, []);
-
-  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;
+/* 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');
+    const {
+      element,
+      bodyClickEvent,
+      buttonClickEvent,
+    } = setSubNavToggle(subNavBtns, buttonRef.current as Element);
+    return () => {
+      if (element) {
+        element.removeEventListener('click', bodyClickEvent);
+      }
+      buttonRef.current?.removeEventListener('click', buttonClickEvent);
+    };
+  }, []);
+
+  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/AUSubmitButtonContainerComponent.tsx

@@ -1,29 +1,29 @@
-import React, { FC } from 'react';
-import AUButtonComponent from './AUButtonComponent';
-
-const AUSubmitButtonContainerComponent: FC<AUSubmitButtonContainerComponentProps> = ({
-  disabled,
-  submitText,
-  cancelText,
-  onSubmit,
-  onCancel,
-}: AUSubmitButtonContainerComponentProps) => (
-  <div className="submit button-container">
-    <AUButtonComponent
-      asSubmit
-      label={submitText}
-      classNames={[disabled ? 'button--processing' : '']}
-      disabled={disabled}
-      onClick={onSubmit}
-    />
-    <AUButtonComponent
-      label={cancelText}
-      type="text"
-      disabled={disabled}
-      onClick={onCancel}
-    />
-  </div>
-);
-
-AUSubmitButtonContainerComponent.displayName = 'AUSubmitButtonContainerComponent';
-export default AUSubmitButtonContainerComponent;
+import React, { FC } from 'react';
+import AUButtonComponent from './AUButtonComponent';
+
+const AUSubmitButtonContainerComponent: FC<AUSubmitButtonContainerComponentProps> = ({
+  disabled,
+  submitText,
+  cancelText,
+  onSubmit,
+  onCancel,
+}: AUSubmitButtonContainerComponentProps) => (
+  <div className="submit button-container">
+    <AUButtonComponent
+      asSubmit
+      label={submitText}
+      classNames={[disabled ? 'button--processing' : '']}
+      disabled={disabled}
+      onClick={onSubmit}
+    />
+    <AUButtonComponent
+      label={cancelText}
+      type="text"
+      disabled={disabled}
+      onClick={onCancel}
+    />
+  </div>
+);
+
+AUSubmitButtonContainerComponent.displayName = 'AUSubmitButtonContainerComponent';
+export default AUSubmitButtonContainerComponent;