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

package/src/components/AUContentToggleComponent.tsx

@@ -1,47 +1,47 @@
-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,
-  onClick,
-  beforeCallback,
-  afterCallback,
-}: AUContentToggleComponentProps) => {
-  const toggleContainer = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    const toggle = toggleContainer?.current?.querySelector('.content-toggle__content');
-    let cleanUp: CleanUpPair[];
-    if (toggle) {
-      cleanUp = setContentToggle(toggle, onClick, beforeCallback, afterCallback);
-      if (cleanUp.length > 0) { // Den første er altid knappen (og ikke luk-knappen)
-        cleanUp[0].element.setAttribute('aria-expanded', toggled ? 'true' : 'false');
-      }
-    }
-
-    return () => {
-      cleanUp.forEach((c) => {
-        c.element.removeEventListener('click', c.clickEvent);
-      });
-    };
-  }, []);
-  return (
-    <div ref={toggleContainer} className={classNames}>
-      {children}
-    </div>
-  );
-};
-
-AUContentToggleComponent.defaultProps = {
-  classNames: undefined,
-  beforeCallback: undefined,
-  afterCallback: 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,
+  onClick,
+  beforeCallback,
+  afterCallback,
+}: AUContentToggleComponentProps) => {
+  const toggleContainer = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const toggle = toggleContainer?.current?.querySelector('.content-toggle__content');
+    let cleanUp: CleanUpPair[];
+    if (toggle) {
+      cleanUp = setContentToggle(toggle, onClick, beforeCallback, afterCallback);
+      if (cleanUp.length > 0) { // Den første er altid knappen (og ikke luk-knappen)
+        cleanUp[0].element.setAttribute('aria-expanded', toggled ? 'true' : 'false');
+      }
+    }
+
+    return () => {
+      cleanUp.forEach((c) => {
+        c.element.removeEventListener('click', c.clickEvent);
+      });
+    };
+  }, []);
+  return (
+    <div ref={toggleContainer} className={classNames}>
+      {children}
+    </div>
+  );
+};
+
+AUContentToggleComponent.defaultProps = {
+  classNames: undefined,
+  beforeCallback: undefined,
+  afterCallback: undefined,
+};
+
+AUContentToggleComponent.displayName = 'AUContentToggleComponent';
+export default AUContentToggleComponent;

package/src/components/AUDatepickerComponent.tsx

@@ -1,121 +1,121 @@
-/* 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,
-  sideBySideGrowth,
-}: 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 = 'datepicker form__field';
-  if (fullWidth) {
-    className = `${className} form__field--full-width`;
-  }
-
-  if (labelInline) {
-    className = `${className} form__field--inline-label`;
-  }
-
-  if (disabled) {
-    className = `${className} visually-disabled`;
-  }
-
-  if (typeof sideBySideGrowth !== 'undefined' && sideBySideGrowth > 0) {
-    className = `${className} form__field--width-relative-${sideBySideGrowth}`;
-  }
-
-  return (
-    <div
-      className={className}
-      aria-owns={`${id}-calendar`}
-      aria-haspopup="true"
-      aria-expanded={showCalendar}
-    >
-      {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)}
-      />
-      {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,
-  sideBySideGrowth: 0,
-};
-
-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,
+  sideBySideGrowth,
+}: 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 = 'datepicker form__field';
+  if (fullWidth) {
+    className = `${className} form__field--full-width`;
+  }
+
+  if (labelInline) {
+    className = `${className} form__field--inline-label`;
+  }
+
+  if (disabled) {
+    className = `${className} visually-disabled`;
+  }
+
+  if (typeof sideBySideGrowth !== 'undefined' && sideBySideGrowth > 0) {
+    className = `${className} form__field--width-relative-${sideBySideGrowth}`;
+  }
+
+  return (
+    <div
+      className={className}
+      aria-owns={`${id}-calendar`}
+      aria-haspopup="true"
+      aria-expanded={showCalendar}
+    >
+      {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)}
+      />
+      {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,
+  sideBySideGrowth: 0,
+};
+
+AUDatepickerComponent.displayName = 'AUDatepickerComponent';
+export default AUDatepickerComponent;

package/src/components/AUErrorComponent.tsx

@@ -1,78 +1,78 @@
-import { SerializedError } from '@reduxjs/toolkit';
-import { FetchBaseQueryError } from '@reduxjs/toolkit/dist/query';
-import React, { FC } from 'react';
-import AUNotificationComponent from './AUNotificationComponent';
-
-interface AUErrorComponentExtendedProps extends AUErrorComponentProps {
-  fetchError?: FetchBaseQueryError,
-  serializedError?: SerializedError,
-}
-
-const AUErrorComponent: FC<AUErrorComponentExtendedProps> = ({
-  error: auError,
-  fetchError,
-  serializedError,
-  withStatus,
-}: AUErrorComponentExtendedProps) => {
-  if (auError) {
-    const { status, header, message } = auError;
-    return (
-      <AUNotificationComponent
-        type="warning"
-        header={`${withStatus ? `${status}: ` : ''}${header}`}
-        content={[
-          <p dangerouslySetInnerHTML={{ __html: message }} />,
-        ]}
-      />
-    );
-  }
-  if (fetchError && 'error' in fetchError) {
-    const { status, error } = fetchError;
-    return (
-      <AUNotificationComponent
-        type="warning"
-        header={withStatus ? status : undefined}
-        content={[
-          <p dangerouslySetInnerHTML={{ __html: error }} />,
-        ]}
-      />
-    );
-  }
-  if (fetchError && 'data' in fetchError) {
-    const { status, data } = fetchError;
-    return (
-      <AUNotificationComponent
-        type="warning"
-        header={withStatus ? `${status}` : undefined}
-        content={[
-          <p dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }} />,
-        ]}
-      />
-    );
-  }
-  if (serializedError && 'message' in serializedError) {
-    const { code, message } = serializedError;
-    return (
-      <AUNotificationComponent
-        type="warning"
-        header={withStatus ? code : undefined}
-        content={[
-          <p dangerouslySetInnerHTML={{ __html: message || '' }} />,
-        ]}
-      />
-    );
-  }
-  return null;
-};
-
-AUErrorComponent.defaultProps = {
-  // eslint-disable-next-line react/default-props-match-prop-types
-  error: undefined,
-  fetchError: undefined,
-  serializedError: undefined,
-  // eslint-disable-next-line react/default-props-match-prop-types
-  withStatus: false,
-};
-
-AUErrorComponent.displayName = 'AUErrorComponent';
-export default AUErrorComponent;
+import { SerializedError } from '@reduxjs/toolkit';
+import { FetchBaseQueryError } from '@reduxjs/toolkit/dist/query';
+import React, { FC } from 'react';
+import AUNotificationComponent from './AUNotificationComponent';
+
+interface AUErrorComponentExtendedProps extends AUErrorComponentProps {
+  fetchError?: FetchBaseQueryError,
+  serializedError?: SerializedError,
+}
+
+const AUErrorComponent: FC<AUErrorComponentExtendedProps> = ({
+  error: auError,
+  fetchError,
+  serializedError,
+  withStatus,
+}: AUErrorComponentExtendedProps) => {
+  if (auError) {
+    const { status, header, message } = auError;
+    return (
+      <AUNotificationComponent
+        type="warning"
+        header={`${withStatus ? `${status}: ` : ''}${header}`}
+        content={[
+          <p dangerouslySetInnerHTML={{ __html: message }} />,
+        ]}
+      />
+    );
+  }
+  if (fetchError && 'error' in fetchError) {
+    const { status, error } = fetchError;
+    return (
+      <AUNotificationComponent
+        type="warning"
+        header={withStatus ? status : undefined}
+        content={[
+          <p dangerouslySetInnerHTML={{ __html: error }} />,
+        ]}
+      />
+    );
+  }
+  if (fetchError && 'data' in fetchError) {
+    const { status, data } = fetchError;
+    return (
+      <AUNotificationComponent
+        type="warning"
+        header={withStatus ? `${status}` : undefined}
+        content={[
+          <p dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }} />,
+        ]}
+      />
+    );
+  }
+  if (serializedError && 'message' in serializedError) {
+    const { code, message } = serializedError;
+    return (
+      <AUNotificationComponent
+        type="warning"
+        header={withStatus ? code : undefined}
+        content={[
+          <p dangerouslySetInnerHTML={{ __html: message || '' }} />,
+        ]}
+      />
+    );
+  }
+  return null;
+};
+
+AUErrorComponent.defaultProps = {
+  // eslint-disable-next-line react/default-props-match-prop-types
+  error: undefined,
+  fetchError: undefined,
+  serializedError: undefined,
+  // eslint-disable-next-line react/default-props-match-prop-types
+  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,68 +1,68 @@
-/* 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="close"
-                hideLabel
-                classNames={['modal-view__close']}
-                dataGtm="au-btn-modal-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.defaultProps = {
-  domId: 'modal-view1',
-  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="close"
+                hideLabel
+                classNames={['modal-view__close']}
+                dataGtm="au-btn-modal-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.defaultProps = {
+  domId: 'modal-view1',
+  closeButton: true,
+  lang: 'da',
+  className: 'modal-view',
+};
+
+AUModalComponent.displayName = 'AUModalComponent';
+export default AUModalComponent;