@aarhus-university/au-lib-react-components 12.6.2 → 12.6.3

package/src/components/AUMobilePrefixComponent.tsx

@@ -1,20 +1,20 @@
-import React, { FC } from 'react';
-
-type Props = {
-  countryCodes: AU.ICountryCode[];
-  important: boolean;
-};
-
-const AUMobilePrefixComponent: FC<Props> = ({
-  countryCodes,
-  important,
-}) => {
-  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';
+
+type Props = {
+  countryCodes: AU.ICountryCode[];
+  important: boolean;
+};
+
+const AUMobilePrefixComponent: FC<Props> = ({
+  countryCodes,
+  important,
+}) => {
+  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,72 +1,72 @@
-/* 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';
-
-type Props = {
-  lang?: string;
-  domId: string;
-  className?: string;
-  children?: JSX.Element;
-  closeButton?: boolean;
-  closeButtonDisabled?: boolean;
-  sender: HTMLButtonElement | HTMLTableRowElement | null;
-  show: boolean;
-  onClose?: () => void;
-};
-
-const AUModalComponent: FC<Props> = ({
-  lang = 'da',
-  domId = 'modal-view1',
-  className = 'modal-view',
-  children,
-  closeButton = true,
-  closeButtonDisabled,
-  sender,
-  show,
-  onClose,
-}) => {
-  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="close"
-                hideLabel
-                classNames={['modal-view__close']}
-                onClick={() => {
-                  if (typeof onClose === 'function') {
-                    onClose();
-                  }
-                }}
-              />
-            )
-          }
-          <div className="modal-view__container">
-            <div className="modal-view__body">
-              {children}
-            </div>
-          </div>
-        </div>
-      </div>,
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      document.querySelector('body')!,
-    )
-  );
-};
-
-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';
+
+type Props = {
+  lang?: string;
+  domId: string;
+  className?: string;
+  children?: JSX.Element;
+  closeButton?: boolean;
+  closeButtonDisabled?: boolean;
+  sender: HTMLButtonElement | HTMLTableRowElement | null;
+  show: boolean;
+  onClose?: () => void;
+};
+
+const AUModalComponent: FC<Props> = ({
+  lang = 'da',
+  domId = 'modal-view1',
+  className = 'modal-view',
+  children,
+  closeButton = true,
+  closeButtonDisabled,
+  sender,
+  show,
+  onClose,
+}) => {
+  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="close"
+                hideLabel
+                classNames={['modal-view__close']}
+                onClick={() => {
+                  if (typeof onClose === 'function') {
+                    onClose();
+                  }
+                }}
+              />
+            )
+          }
+          <div className="modal-view__container">
+            <div className="modal-view__body">
+              {children}
+            </div>
+          </div>
+        </div>
+      </div>,
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      document.querySelector('body')!,
+    )
+  );
+};
+
+AUModalComponent.displayName = 'AUModalComponent';
+export default AUModalComponent;

package/src/components/AUNotificationComponent.tsx

@@ -1,44 +1,44 @@
-/* eslint-disable react/no-array-index-key */
-import React, { FC, Fragment } from 'react';
-
-type Props = {
-  header?: string | null;
-  content: JSX.Element[];
-  actions?: JSX.Element[];
-  type?: 'warning' | 'attention' | 'confirm' | 'information';
-  classNames?: string[];
-};
-
-const AUNotificationComponent: FC<Props> = ({
-  header = null,
-  content,
-  actions = [],
-  type = 'information',
-  classNames = [],
-}) => {
-  const typeClass = type === 'information' ? '' : `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.displayName = 'AUNotificationComponent';
-export default AUNotificationComponent;
+/* eslint-disable react/no-array-index-key */
+import React, { FC, Fragment } from 'react';
+
+type Props = {
+  header?: string | null;
+  content: JSX.Element[];
+  actions?: JSX.Element[];
+  type?: 'warning' | 'attention' | 'confirm' | 'information';
+  classNames?: string[];
+};
+
+const AUNotificationComponent: FC<Props> = ({
+  header = null,
+  content,
+  actions = [],
+  type = 'information',
+  classNames = [],
+}) => {
+  const typeClass = type === 'information' ? '' : `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.displayName = 'AUNotificationComponent';
+export default AUNotificationComponent;

package/src/components/AUReceiptComponent.tsx

@@ -1,34 +1,34 @@
-import React, { FC } from 'react';
-
-type Props = {
-  receiptText: string;
-  helpText?: JSX.Element | null;
-  showGoTo?: boolean;
-  buttons?: IReceiptButton[];
-};
-
-const AUReceiptComponent: FC<Props> = ({
-  receiptText,
-  helpText = null,
-  showGoTo = true,
-  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.displayName = 'AUReceiptComponent';
-export default AUReceiptComponent;
+import React, { FC } from 'react';
+
+type Props = {
+  receiptText: string;
+  helpText?: JSX.Element | null;
+  showGoTo?: boolean;
+  buttons?: IReceiptButton[];
+};
+
+const AUReceiptComponent: FC<Props> = ({
+  receiptText,
+  helpText = null,
+  showGoTo = true,
+  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.displayName = 'AUReceiptComponent';
+export default AUReceiptComponent;

package/src/components/AUSpinnerComponent.tsx

@@ -1,40 +1,40 @@
-/* eslint-disable react/static-property-placement */
-/* eslint-env browser */
-import React, { FC } from 'react';
-
-type Props = {
-  className?: string;
-  children: JSX.Element | null;
-  loaded: boolean;
-  height?: string;
-  init?: '' | 'table' | 'box';
-}
-
-const AUSpinnerComponent: FC<Props> = ({
-  loaded,
-  init = '',
-  height = 'auto',
-  className = '',
-  children,
-}) => {
-  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.displayName = 'AUSpinnerComponent';
-export default AUSpinnerComponent;
+/* eslint-disable react/static-property-placement */
+/* eslint-env browser */
+import React, { FC } from 'react';
+
+type Props = {
+  className?: string;
+  children: JSX.Element | null;
+  loaded: boolean;
+  height?: string;
+  init?: '' | 'table' | 'box';
+}
+
+const AUSpinnerComponent: FC<Props> = ({
+  loaded,
+  init = '',
+  height = 'auto',
+  className = '',
+  children,
+}) => {
+  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.displayName = 'AUSpinnerComponent';
+export default AUSpinnerComponent;

package/src/components/AUStepComponent.tsx

@@ -1,75 +1,75 @@
-/* eslint-disable max-len */
-/* eslint-disable react/no-array-index-key */
-import React, { FC } from 'react';
-
-const getStepItemClass = (current: boolean, final: boolean, finalIcon: string): string => {
-  let className = 'stepper__item';
-  if (current) {
-    className = `${className} stepper__item--active`;
-  }
-  if (final) {
-    className = `${className} stepper__item--final`;
-    if (finalIcon) {
-      className = `${className} icon-${finalIcon}`;
-    }
-  }
-
-  return className;
-};
-
-type Props = {
-  step: number;
-  children: JSX.Element[];
-  stepHeadlines: string[];
-  introElement?: JSX.Element;
-  outroElement?: JSX.Element;
-  showFinal?: boolean;
-  finalIcon?: string;
-  title: string;
-  showSteps?: boolean;
-};
-
-const AUStepComponent: FC<Props> = ({
-  title,
-  step,
-  children,
-  stepHeadlines,
-  introElement = undefined,
-  outroElement = undefined,
-  showFinal = false,
-  finalIcon = '',
-  showSteps = true,
-}) => (
-  <div className="stepper">
-    <h1 className="stepper__step-title">{title}</h1>
-    {
-      (showSteps && step > -1 && step < children.length) && (
-        <ol className="stepper__list" data-steps={children.length} aria-hidden>
-          {
-            stepHeadlines.map((headline, index) => (
-              <li key={headline} className={getStepItemClass(index === step, (typeof showFinal !== 'undefined' && showFinal) && (children.length - 1 === index), finalIcon || '')}>
-                <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
-    }
-  </div>
-);
-
-AUStepComponent.displayName = 'AUStepComponent';
-export default AUStepComponent;
+/* eslint-disable max-len */
+/* eslint-disable react/no-array-index-key */
+import React, { FC } from 'react';
+
+const getStepItemClass = (current: boolean, final: boolean, finalIcon: string): string => {
+  let className = 'stepper__item';
+  if (current) {
+    className = `${className} stepper__item--active`;
+  }
+  if (final) {
+    className = `${className} stepper__item--final`;
+    if (finalIcon) {
+      className = `${className} icon-${finalIcon}`;
+    }
+  }
+
+  return className;
+};
+
+type Props = {
+  step: number;
+  children: JSX.Element[];
+  stepHeadlines: string[];
+  introElement?: JSX.Element;
+  outroElement?: JSX.Element;
+  showFinal?: boolean;
+  finalIcon?: string;
+  title: string;
+  showSteps?: boolean;
+};
+
+const AUStepComponent: FC<Props> = ({
+  title,
+  step,
+  children,
+  stepHeadlines,
+  introElement = undefined,
+  outroElement = undefined,
+  showFinal = false,
+  finalIcon = '',
+  showSteps = true,
+}) => (
+  <div className="stepper">
+    <h1 className="stepper__step-title">{title}</h1>
+    {
+      (showSteps && step > -1 && step < children.length) && (
+        <ol className="stepper__list" data-steps={children.length} aria-hidden>
+          {
+            stepHeadlines.map((headline, index) => (
+              <li key={headline} className={getStepItemClass(index === step, (typeof showFinal !== 'undefined' && showFinal) && (children.length - 1 === index), finalIcon || '')}>
+                <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
+    }
+  </div>
+);
+
+AUStepComponent.displayName = 'AUStepComponent';
+export default AUStepComponent;