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

package/src/components/AUDynamicContentComponent.tsx

@@ -1,137 +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 grid__item">{name}</h3>}
-      <div className="dynamic-content__featured">
-        {featuredElement}
-        {/* HTML content is expected to be sanitized by the backend */}
-        {featuredContentDescription && (
-          <div className="content-description" dangerouslySetInnerHTML={{ __html: featuredContentDescription }} />
-        )}
-      </div>
-
-      <div className="dynamic-content__links">
-        {links?.length > 0 && links.map((link, index) => {
-          const isSystemLink = link.linkType === 'system';
-
-          // Using index in key is safe here since links array is not mutated after initial render
-          return (
-            <a
-              href={link.url}
-              // eslint-disable-next-line react/no-array-index-key
-              key={link.url + index}
-              className={`grid__item shortcut${isSystemLink ? ' shortcut--highlighted' : ''}`}
-            >
-              <h3>{link.title}</h3>
-              <p>{link.description}</p>
-            </a>
-          );
-        })}
-      </div>
-    </section>
-  );
-};
-
-AUDynamicContentComponent.displayName = 'AUDynamicContentComponent';
-export default AUDynamicContentComponent;
+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 grid__item">{name}</h3>}
+      <div className="dynamic-content__featured">
+        {featuredElement}
+        {/* HTML content is expected to be sanitized by the backend */}
+        {featuredContentDescription && (
+          <div className="content-description" dangerouslySetInnerHTML={{ __html: featuredContentDescription }} />
+        )}
+      </div>
+
+      <div className="dynamic-content__links">
+        {links?.length > 0 && links.map((link, index) => {
+          const isSystemLink = link.linkType === 'system';
+
+          // Using index in key is safe here since links array is not mutated after initial render
+          return (
+            <a
+              href={link.url}
+              // eslint-disable-next-line react/no-array-index-key
+              key={link.url + index}
+              className={`grid__item shortcut${isSystemLink ? ' shortcut--highlighted' : ''}`}
+            >
+              <h3>{link.title}</h3>
+              <p>{link.description}</p>
+            </a>
+          );
+        })}
+      </div>
+    </section>
+  );
+};
+
+AUDynamicContentComponent.displayName = 'AUDynamicContentComponent';
+export default AUDynamicContentComponent;

package/src/components/AUEditorComponent.tsx

@@ -1,126 +1,126 @@
-/* eslint-disable camelcase */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { FC, useState, useRef, useMemo } from 'react';
-import { Editor } from '@tinymce/tinymce-react';
-import AUTinyMCEBuilder from '../lib/tinymce';
-import { replace } from '../lib/helpers';
-
-type Translation = IGenericTranslation['generics']['forms'];
-type CounterType = 'recommended' | 'allowed';
-type Props = {
-  lang: string;
-  id: string;
-  initialValue: string;
-  textareaName: string;
-  showCounter?: boolean;
-  counterType?: CounterType;
-  maxChars?: number;
-  translations: Translation;
-  onEditorChange: (value: string) => void;
-  disabled?: boolean;
-};
-
-const onKeyUp = (
-  editor: any,
-  parent: HTMLDivElement,
-  maxChars: number,
-  counterType: string,
-  setOverflow: React.Dispatch<React.SetStateAction<number>>,
-): void => {
-  const container = editor.getContainer();
-  const numChars = editor.plugins.wordcount.body.getCharacterCount();
-  let isActive = false;
-  if (numChars >= maxChars) {
-    isActive = true;
-    parent.setAttribute(`data-${counterType}-length`, maxChars.toString());
-  }
-
-  if (isActive) {
-    container.classList.add('info-active');
-  } else {
-    container.classList.remove('info-active');
-    parent.removeAttribute(`data-${counterType}-length`);
-  }
-
-  const overflow = numChars - maxChars;
-  if (overflow > 0) {
-    parent.classList.add('form__field__character-count--overflow');
-  } else {
-    parent.classList.remove('form__field__character-count--overflow');
-  }
-  setOverflow(overflow);
-};
-
-const AUEditorComponent: FC<Props> = ({
-  lang,
-  id,
-  initialValue,
-  textareaName,
-  showCounter = false,
-  counterType = 'recommended',
-  maxChars = 0,
-  translations,
-  onEditorChange,
-  disabled = false,
-}) => {
-  const [overflow, setOverflow] = useState(0);
-  const parentRef = useRef<HTMLDivElement>(null);
-  // Capture initialValue on first render only.
-  // Passing a changing initialValue to TinyMCE's <Editor>
-  // causes it to call setContent() on every update,
-  // which resets the cursor to position 0.
-  const stableInitialValue = useRef(initialValue);
-  const tiny = useMemo(() => new AUTinyMCEBuilder(
-    lang,
-    showCounter as boolean,
-    (editor: any) => onKeyUp(
-      editor,
-      parentRef.current as HTMLDivElement,
-      maxChars as number,
-      counterType as string,
-      setOverflow,
-    ),
-  ), [lang, showCounter, maxChars, counterType]);
-  const tinyConfig = useMemo(() => tiny.tinyGeneralConfig(), [tiny]);
-
-  const { character_count } = translations;
-
-  return (
-    <div
-      ref={parentRef}
-      className="form__field__character-count"
-    >
-      <Editor
-        tinymceScriptSrc={tiny.tinyScriptSrc}
-        initialValue={stableInitialValue.current}
-        id={id}
-        // value={tinyDanish}
-        disabled={disabled}
-        textareaName={textareaName}
-        init={tinyConfig}
-        onEditorChange={onEditorChange}
-      />
-      {
-        (typeof showCounter !== 'undefined'
-          && typeof counterType !== 'undefined'
-          && typeof maxChars !== 'undefined') && (
-          <div
-            className="form__field__character-count__info"
-            aria-live="polite"
-          >
-            <span className="form__field__character-count__info__overflow-message">
-              {`${replace(character_count.overflow.message[counterType], ['maxchars'], [maxChars.toString()])}`}
-            </span>
-            {' '}
-            <span className="form__field__character-count__info__overflow-count">
-              {`${replace(character_count.overflow.count[counterType][overflow === 1 ? 'one' : 'other'], ['overflow'], [overflow.toString()])}`}
-            </span>
-          </div>
-        )
-      }
-    </div>
-  );
-};
-
-AUEditorComponent.displayName = 'AUEditorComponent';
-export default AUEditorComponent;
+/* eslint-disable camelcase */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { FC, useState, useRef, useMemo } from 'react';
+import { Editor } from '@tinymce/tinymce-react';
+import AUTinyMCEBuilder from '../lib/tinymce';
+import { replace } from '../lib/helpers';
+
+type Translation = IGenericTranslation['generics']['forms'];
+type CounterType = 'recommended' | 'allowed';
+type Props = {
+  lang: string;
+  id: string;
+  initialValue: string;
+  textareaName: string;
+  showCounter?: boolean;
+  counterType?: CounterType;
+  maxChars?: number;
+  translations: Translation;
+  onEditorChange: (value: string) => void;
+  disabled?: boolean;
+};
+
+const onKeyUp = (
+  editor: any,
+  parent: HTMLDivElement,
+  maxChars: number,
+  counterType: string,
+  setOverflow: React.Dispatch<React.SetStateAction<number>>,
+): void => {
+  const container = editor.getContainer();
+  const numChars = editor.plugins.wordcount.body.getCharacterCount();
+  let isActive = false;
+  if (numChars >= maxChars) {
+    isActive = true;
+    parent.setAttribute(`data-${counterType}-length`, maxChars.toString());
+  }
+
+  if (isActive) {
+    container.classList.add('info-active');
+  } else {
+    container.classList.remove('info-active');
+    parent.removeAttribute(`data-${counterType}-length`);
+  }
+
+  const overflow = numChars - maxChars;
+  if (overflow > 0) {
+    parent.classList.add('form__field__character-count--overflow');
+  } else {
+    parent.classList.remove('form__field__character-count--overflow');
+  }
+  setOverflow(overflow);
+};
+
+const AUEditorComponent: FC<Props> = ({
+  lang,
+  id,
+  initialValue,
+  textareaName,
+  showCounter = false,
+  counterType = 'recommended',
+  maxChars = 0,
+  translations,
+  onEditorChange,
+  disabled = false,
+}) => {
+  const [overflow, setOverflow] = useState(0);
+  const parentRef = useRef<HTMLDivElement>(null);
+  // Capture initialValue on first render only.
+  // Passing a changing initialValue to TinyMCE's <Editor>
+  // causes it to call setContent() on every update,
+  // which resets the cursor to position 0.
+  const stableInitialValue = useRef(initialValue);
+  const tiny = useMemo(() => new AUTinyMCEBuilder(
+    lang,
+    showCounter as boolean,
+    (editor: any) => onKeyUp(
+      editor,
+      parentRef.current as HTMLDivElement,
+      maxChars as number,
+      counterType as string,
+      setOverflow,
+    ),
+  ), [lang, showCounter, maxChars, counterType]);
+  const tinyConfig = useMemo(() => tiny.tinyGeneralConfig(), [tiny]);
+
+  const { character_count } = translations;
+
+  return (
+    <div
+      ref={parentRef}
+      className="form__field__character-count"
+    >
+      <Editor
+        tinymceScriptSrc={tiny.tinyScriptSrc}
+        initialValue={stableInitialValue.current}
+        id={id}
+        // value={tinyDanish}
+        disabled={disabled}
+        textareaName={textareaName}
+        init={tinyConfig}
+        onEditorChange={onEditorChange}
+      />
+      {
+        (typeof showCounter !== 'undefined'
+          && typeof counterType !== 'undefined'
+          && typeof maxChars !== 'undefined') && (
+          <div
+            className="form__field__character-count__info"
+            aria-live="polite"
+          >
+            <span className="form__field__character-count__info__overflow-message">
+              {`${replace(character_count.overflow.message[counterType], ['maxchars'], [maxChars.toString()])}`}
+            </span>
+            {' '}
+            <span className="form__field__character-count__info__overflow-count">
+              {`${replace(character_count.overflow.count[counterType][overflow === 1 ? 'one' : 'other'], ['overflow'], [overflow.toString()])}`}
+            </span>
+          </div>
+        )
+      }
+    </div>
+  );
+};
+
+AUEditorComponent.displayName = 'AUEditorComponent';
+export default AUEditorComponent;

package/src/components/AUErrorComponent.tsx

@@ -1,73 +1,73 @@
-import { SerializedError } from '@reduxjs/toolkit';
-import { FetchBaseQueryError } from '@reduxjs/toolkit/dist/query';
-import React, { FC } from 'react';
-import AUNotificationComponent from './AUNotificationComponent';
-
-type Props = {
-  error?: AU.IError;
-  withStatus?: boolean;
-  fetchError?: FetchBaseQueryError,
-  serializedError?: SerializedError,
-  type?: 'warning' | 'attention' | 'confirm' | 'information';
-};
-
-const AUErrorComponent: FC<Props> = ({
-  error: auError = undefined,
-  fetchError = undefined,
-  serializedError = undefined,
-  withStatus = false,
-  type = 'warning',
-}) => {
-  if (auError) {
-    const { status, header, message } = auError;
-    return (
-      <AUNotificationComponent
-        type={type}
-        header={`${withStatus ? `${status}: ` : ''}${header}`}
-        content={[
-          <p dangerouslySetInnerHTML={{ __html: message }} />,
-        ]}
-      />
-    );
-  }
-  if (fetchError && 'error' in fetchError) {
-    const { status, error } = fetchError;
-    return (
-      <AUNotificationComponent
-        type={type}
-        header={withStatus ? status : undefined}
-        content={[
-          <p dangerouslySetInnerHTML={{ __html: error }} />,
-        ]}
-      />
-    );
-  }
-  if (fetchError && 'data' in fetchError) {
-    const { status, data } = fetchError;
-    return (
-      <AUNotificationComponent
-        type={type}
-        header={withStatus ? `${status}` : undefined}
-        content={[
-          <p dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }} />,
-        ]}
-      />
-    );
-  }
-  if (serializedError && 'message' in serializedError) {
-    const { code, message } = serializedError;
-    return (
-      <AUNotificationComponent
-        type={type}
-        header={withStatus ? code : undefined}
-        content={[
-          <p dangerouslySetInnerHTML={{ __html: message || '' }} />,
-        ]}
-      />
-    );
-  }
-  return null;
-};
-
-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';
+
+type Props = {
+  error?: AU.IError;
+  withStatus?: boolean;
+  fetchError?: FetchBaseQueryError,
+  serializedError?: SerializedError,
+  type?: 'warning' | 'attention' | 'confirm' | 'information';
+};
+
+const AUErrorComponent: FC<Props> = ({
+  error: auError = undefined,
+  fetchError = undefined,
+  serializedError = undefined,
+  withStatus = false,
+  type = 'warning',
+}) => {
+  if (auError) {
+    const { status, header, message } = auError;
+    return (
+      <AUNotificationComponent
+        type={type}
+        header={`${withStatus ? `${status}: ` : ''}${header}`}
+        content={[
+          <p dangerouslySetInnerHTML={{ __html: message }} />,
+        ]}
+      />
+    );
+  }
+  if (fetchError && 'error' in fetchError) {
+    const { status, error } = fetchError;
+    return (
+      <AUNotificationComponent
+        type={type}
+        header={withStatus ? status : undefined}
+        content={[
+          <p dangerouslySetInnerHTML={{ __html: error }} />,
+        ]}
+      />
+    );
+  }
+  if (fetchError && 'data' in fetchError) {
+    const { status, data } = fetchError;
+    return (
+      <AUNotificationComponent
+        type={type}
+        header={withStatus ? `${status}` : undefined}
+        content={[
+          <p dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }} />,
+        ]}
+      />
+    );
+  }
+  if (serializedError && 'message' in serializedError) {
+    const { code, message } = serializedError;
+    return (
+      <AUNotificationComponent
+        type={type}
+        header={withStatus ? code : undefined}
+        content={[
+          <p dangerouslySetInnerHTML={{ __html: message || '' }} />,
+        ]}
+      />
+    );
+  }
+  return null;
+};
+
+AUErrorComponent.displayName = 'AUErrorComponent';
+export default AUErrorComponent;