@aarhus-university/au-lib-react-components 11.5.1 → 11.6.1

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/AUEditFilterComponent.tsx

@@ -1,67 +1,24 @@
-/* eslint-disable jsx-a11y/label-has-associated-control */
-import React, { FC } from 'react';
-
-const AUEditFilterComponent: FC = () => (
-  <form className="form">
-    <h2>Rediger filter</h2>
-    <div className="form__field">
-      <label htmlFor="title">Titel</label>
-      <input type="text" id="title" />
-    </div>
-    <h3>Kriterier</h3>
-    <div>
-      <div className="form__field">
-        <label htmlFor="orgunit">
-          Organisatorisk enhed
-        </label>
-        <input type="text" id="orgunit" />
-      </div>
-      <div className="search-filter">
-        <h3 className="search-filter__label">Valgte enheder:</h3>
-        <div className="search-filter__items">
-          <button type="button" className="search-filter__item">
-            <span className="search-filter__item__value">
-              Arts
-            </span>
-          </button>
-          <button type="button" className="search-filter__item">
-            <span className="search-filter__item__value">
-              Health
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div>
-      <div className="form__field">
-        <label htmlFor="orgunit">
-          Uddannelser
-        </label>
-        <input type="text" id="orgunit" />
-      </div>
-      <div className="search-filter">
-        <h3 className="search-filter__label">Valgte uddannelser:</h3>
-        <div className="search-filter__items">
-          <button type="button" className="search-filter__item">
-            <span className="search-filter__item__value">
-              Bacheloruddannelsen i Medicin
-            </span>
-          </button>
-          <button type="button" className="search-filter__item">
-            <span className="search-filter__item__value">
-              Kandidatuddannelsen i Medicin
-            </span>
-          </button>
-          <button type="button" className="search-filter__item">
-            <span className="search-filter__item__value">
-              Den sundhedsfaglige kandidatuddannelse
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </form>
-);
-
-AUEditFilterComponent.displayName = 'AUEditFilterComponent';
-export default AUEditFilterComponent;
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import React, { FC } from 'react';
+
+const AUEditFilterComponent: FC = () => (
+  <form className="form">
+    <h2>Rediger filter</h2>
+    <div className="form__field">
+      <label htmlFor="title">Titel</label>
+      <input type="text" id="title" />
+    </div>
+    <h3>Kriterier</h3>
+    <div>
+      <div className="form__field">
+        <label htmlFor="orgunit">
+          Organisatorisk enhed
+        </label>
+        <input type="text" id="orgunit" />
+      </div>
+    </div>
+  </form>
+);
+
+AUEditFilterComponent.displayName = 'AUEditFilterComponent';
+export default AUEditFilterComponent;

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;