@aarhus-university/au-lib-react-components 12.5.1 → 12.6.1

package/src/components/AUDatepickerComponent.tsx

@@ -1,124 +1,124 @@
-/* eslint-env browser */
-import React, { FC, useState } from 'react';
-import dayjs from 'dayjs';
-import AUCalendarComponent from './AUCalendarComponent';
-
-type Props = {
-  id: string;
-  lang?: string;
-  date?: Date;
-  onDateChange: (date: Date, formatted: string) => void;
-  onHide: (date: Date, dateFormatted: string) => void;
-  format?: string;
-  showTime?: boolean;
-  showLabel?: boolean;
-  labelInline?: boolean;
-  labelText?: string;
-  fullWidth?: boolean;
-  sideBySideGrowth?: number;
-  yearSpanMinus?: number;
-  yearSpanPlus?: number;
-  limitStart?: Date | null;
-  limitEnd?: Date | null;
-  disabled?: boolean;
-};
-
-const AUDatepickerComponent: FC<Props> = ({
-  id,
-  lang = 'da',
-  date = new Date(),
-  onDateChange,
-  onHide,
-  format = 'YYYY-MM-DD HH:mm',
-  showTime = true,
-  showLabel = false,
-  labelInline = false,
-  labelText = 'Vælg dato:',
-  fullWidth = true,
-  yearSpanMinus = 5,
-  yearSpanPlus = 5,
-  limitStart = null,
-  limitEnd = null,
-  disabled = false,
-  sideBySideGrowth = 0,
-}) => {
-  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.displayName = 'AUDatepickerComponent';
-export default AUDatepickerComponent;
+/* eslint-env browser */
+import React, { FC, useState } from 'react';
+import dayjs from 'dayjs';
+import AUCalendarComponent from './AUCalendarComponent';
+
+type Props = {
+  id: string;
+  lang?: string;
+  date?: Date;
+  onDateChange: (date: Date, formatted: string) => void;
+  onHide: (date: Date, dateFormatted: string) => void;
+  format?: string;
+  showTime?: boolean;
+  showLabel?: boolean;
+  labelInline?: boolean;
+  labelText?: string;
+  fullWidth?: boolean;
+  sideBySideGrowth?: number;
+  yearSpanMinus?: number;
+  yearSpanPlus?: number;
+  limitStart?: Date | null;
+  limitEnd?: Date | null;
+  disabled?: boolean;
+};
+
+const AUDatepickerComponent: FC<Props> = ({
+  id,
+  lang = 'da',
+  date = new Date(),
+  onDateChange,
+  onHide,
+  format = 'YYYY-MM-DD HH:mm',
+  showTime = true,
+  showLabel = false,
+  labelInline = false,
+  labelText = 'Vælg dato:',
+  fullWidth = true,
+  yearSpanMinus = 5,
+  yearSpanPlus = 5,
+  limitStart = null,
+  limitEnd = null,
+  disabled = false,
+  sideBySideGrowth = 0,
+}) => {
+  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.displayName = 'AUDatepickerComponent';
+export default AUDatepickerComponent;

package/src/components/AUDialogModalComponent.tsx

@@ -1,124 +1,124 @@
-/* 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, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import AUButtonComponent from './AUButtonComponent';
-import { AUDialogModalContext } from '../lib/context';
-
-type Props = {
-  lang?: string;
-  domId: string;
-  className?: string;
-  children?: JSX.Element;
-  closeButton?: boolean;
-  closeButtonDisabled?: boolean;
-  show: boolean;
-  onClose?: () => void;
-};
-
-const AUDialogModalComponent: FC<Props> = ({
-  lang = 'da',
-  domId = 'modal-view1',
-  className = 'modal-view',
-  children,
-  closeButton = true,
-  closeButtonDisabled,
-  show,
-  onClose,
-}) => {
-  useEffect(() => {
-    const dialog = document.getElementById(domId) as HTMLDialogElement;
-    if (dialog) {
-      if (show) {
-        dialog.showModal();
-      } else {
-        dialog.close();
-      }
-    }
-
-    // Handler for click outside dialog
-    function handleClickOutside(event: MouseEvent) {
-      if (dialog && show && event.target === dialog) {
-        if (typeof onClose === 'function') {
-          dialog.close();
-          onClose();
-        }
-      }
-    }
-
-    // Handler for ESC key
-    function handleKeyDown(event: KeyboardEvent) {
-      if (dialog && show && event.key === 'Escape') {
-        if (typeof onClose === 'function') {
-          dialog.close();
-          onClose();
-        }
-      }
-    }
-
-    if (dialog && show) {
-      dialog.addEventListener('mousedown', handleClickOutside);
-      window.addEventListener('keydown', handleKeyDown);
-    }
-    return () => {
-      if (dialog) {
-        dialog.removeEventListener('mousedown', handleClickOutside);
-      }
-      window.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [show, domId, onClose]);
-
-  const closeModal = () => {
-    const dialog = document.getElementById(domId) as HTMLDialogElement;
-    if (dialog) {
-      dialog.close();
-      onClose?.();
-    }
-  };
-
-  return (
-    ReactDOM.createPortal(
-      <AUDialogModalContext.Provider value={closeModal}>
-        <dialog
-          id={domId}
-          className={`${className}${show ? ' modal-view--visible' : ''}`}
-        >
-          <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') {
-                      const dialog = document.getElementById(domId) as HTMLDialogElement;
-                      if (dialog) {
-                        dialog.close();
-                        onClose();
-                      }
-                    }
-                  }}
-                />
-              )
-            }
-            <div className="modal-view__container">
-              <div className="modal-view__body">
-                {children}
-              </div>
-            </div>
-          </div>
-        </dialog>
-      </AUDialogModalContext.Provider>,
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      document.querySelector('body')!,
-    )
-  );
-};
-
-AUDialogModalComponent.displayName = 'AUDialogModalComponent';
-export default AUDialogModalComponent;
+/* 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, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import AUButtonComponent from './AUButtonComponent';
+import { AUDialogModalContext } from '../lib/context';
+
+type Props = {
+  lang?: string;
+  domId: string;
+  className?: string;
+  children?: JSX.Element;
+  closeButton?: boolean;
+  closeButtonDisabled?: boolean;
+  show: boolean;
+  onClose?: () => void;
+};
+
+const AUDialogModalComponent: FC<Props> = ({
+  lang = 'da',
+  domId = 'modal-view1',
+  className = 'modal-view',
+  children,
+  closeButton = true,
+  closeButtonDisabled,
+  show,
+  onClose,
+}) => {
+  useEffect(() => {
+    const dialog = document.getElementById(domId) as HTMLDialogElement;
+    if (dialog) {
+      if (show) {
+        dialog.showModal();
+      } else {
+        dialog.close();
+      }
+    }
+
+    // Handler for click outside dialog
+    function handleClickOutside(event: MouseEvent) {
+      if (dialog && show && event.target === dialog) {
+        if (typeof onClose === 'function') {
+          dialog.close();
+          onClose();
+        }
+      }
+    }
+
+    // Handler for ESC key
+    function handleKeyDown(event: KeyboardEvent) {
+      if (dialog && show && event.key === 'Escape') {
+        if (typeof onClose === 'function') {
+          dialog.close();
+          onClose();
+        }
+      }
+    }
+
+    if (dialog && show) {
+      dialog.addEventListener('mousedown', handleClickOutside);
+      window.addEventListener('keydown', handleKeyDown);
+    }
+    return () => {
+      if (dialog) {
+        dialog.removeEventListener('mousedown', handleClickOutside);
+      }
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [show, domId, onClose]);
+
+  const closeModal = () => {
+    const dialog = document.getElementById(domId) as HTMLDialogElement;
+    if (dialog) {
+      dialog.close();
+      onClose?.();
+    }
+  };
+
+  return (
+    ReactDOM.createPortal(
+      <AUDialogModalContext.Provider value={closeModal}>
+        <dialog
+          id={domId}
+          className={`${className}${show ? ' modal-view--visible' : ''}`}
+        >
+          <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') {
+                      const dialog = document.getElementById(domId) as HTMLDialogElement;
+                      if (dialog) {
+                        dialog.close();
+                        onClose();
+                      }
+                    }
+                  }}
+                />
+              )
+            }
+            <div className="modal-view__container">
+              <div className="modal-view__body">
+                {children}
+              </div>
+            </div>
+          </div>
+        </dialog>
+      </AUDialogModalContext.Provider>,
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      document.querySelector('body')!,
+    )
+  );
+};
+
+AUDialogModalComponent.displayName = 'AUDialogModalComponent';
+export default AUDialogModalComponent;

package/src/components/AUDynamicContentComponent.tsx

@@ -0,0 +1,137 @@
+import React, { FC } from 'react';
+
+export interface IDynamicContentLink {
+  title: string;
+  description: string;
+  url: string;
+  linkType: 'system' | 'information';
+}
+
+export interface IDynamicContentVideo {
+  type: 'video';
+  url: string;
+}
+
+export interface IDynamicContentImage {
+  type: 'image';
+  url: string;
+  altText: string;
+  caption?: string;
+  linkUrl?: string;
+}
+
+export interface IDynamicContentInfoBox {
+  type: 'infoBox';
+  htmlContent: string;
+}
+
+export type IDynamicContentFeaturedContent =
+  | IDynamicContentVideo
+  | IDynamicContentImage
+  | IDynamicContentInfoBox;
+
+export interface IDynamicContentProps {
+  name: string;
+  featuredContentDescription: string;
+  links: IDynamicContentLink[];
+  featuredContent: IDynamicContentFeaturedContent;
+}
+
+const FeaturedVideo: FC<{
+  content: IDynamicContentVideo;
+  title: string;
+}> = ({ content, title }) => (
+  <iframe
+    src={content.url}
+    title={`Video player: ${title}`}
+    loading="lazy"
+    allow="clipboard-write; encrypted-media; picture-in-picture; web-share"
+    referrerPolicy="strict-origin-when-cross-origin"
+    allowFullScreen
+  />
+);
+
+const FeaturedImage: FC<{ content: IDynamicContentImage }> = ({ content }) => {
+  const imageElement = (
+    <figure>
+      <img
+        src={content.url}
+        alt={content.altText}
+        loading="lazy"
+      />
+      {content.caption && (
+        <figcaption className="text--small">{content.caption}</figcaption>
+      )}
+    </figure>
+  );
+
+  return content.linkUrl ? <a href={content.linkUrl}>{imageElement}</a> : imageElement;
+};
+
+// HTML content is expected to be sanitized by the backend
+const FeaturedInfoBox: FC<{ content: IDynamicContentInfoBox }> = ({ content }) => (
+  <div
+    className="dynamic-content__infobox"
+    dangerouslySetInnerHTML={{ __html: content.htmlContent }}
+  />
+);
+
+const AUDynamicContentComponent: FC<IDynamicContentProps> = ({
+  name,
+  featuredContentDescription,
+  links,
+  featuredContent,
+}) => {
+  // Determine which featured component to render
+  let featuredElement: React.ReactNode;
+  if (featuredContent) {
+    switch (featuredContent.type) {
+      case 'video':
+        featuredElement = <FeaturedVideo content={featuredContent} title={name} />;
+        break;
+      case 'image':
+        featuredElement = <FeaturedImage content={featuredContent} />;
+        break;
+      case 'infoBox':
+        featuredElement = <FeaturedInfoBox content={featuredContent} />;
+        break;
+      default:
+        featuredElement = null;
+    }
+  }
+
+  return (
+    <section className="dynamic-content" aria-labelledby="dynamic-content-heading">
+      {name && <h3 id="dynamic-content-heading">{name}</h3>}
+      <div className="dynamic-content__featured">
+        {featuredElement}
+        {/* HTML content is expected to be sanitized by the backend */}
+        {featuredContentDescription && (
+          <div dangerouslySetInnerHTML={{ __html: featuredContentDescription }} />
+        )}
+      </div>
+
+      <div className="dynamic-content__links">
+        {links?.length > 0 && links.map((link, index) => {
+          const isDimmed = link.linkType === 'information';
+
+          // Using index in key is safe here since links array is immutable after initial render
+          return (
+            <a
+              href={link.url}
+              // eslint-disable-next-line react/no-array-index-key
+              key={link.url + index}
+              className={`button button--block${isDimmed ? ' button--dimmed' : ''}`}
+            >
+              <span className="card__title">{link.title}</span>
+              <span className="card__subtitle">{link.description}</span>
+            </a>
+          );
+        })}
+      </div>
+    </section>
+  );
+};
+
+AUDynamicContentComponent.displayName = 'AUDynamicContentComponent';
+export default AUDynamicContentComponent;