Allow for a tooltip

ingef · Apr 15, 2024 · 6072133 · 6072133
1 parent 2f9c91b
commit 6072133
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/frontend/mock-api/forms/export-form.json b/frontend/mock-api/forms/export-form.json
@@ -67,6 +67,9 @@
           "de": "Datenschutz"
         },
         "creatable": true,
+        "tooltip": {
+          "de": "Der Datenschutz ist ein wichtiges Thema, deshalb musst du hier zustimmen."
+        },
         "fields": [
           {
             "type": "HEADLINE",

diff --git a/frontend/src/js/external-forms/config-types.ts b/frontend/src/js/external-forms/config-types.ts
@@ -38,10 +38,11 @@ export interface Group {
 
 export interface Disclosure {
   type: "DISCLOSURE";
-  name: string;
   creatable?: boolean;
   defaultOpen?: boolean;
+  name: string;
   label: TranslatableString;
+  tooltip?: TranslatableString;
   fields: GeneralField[];
 }
 

diff --git a/frontend/src/js/external-forms/form/fields/DisclosureField.tsx b/frontend/src/js/external-forms/form/fields/DisclosureField.tsx
@@ -4,7 +4,9 @@ import {
   faChevronRight,
 } from "@fortawesome/free-solid-svg-icons";
 import { ComponentProps, useState } from "react";
+import { exists } from "../../../common/helpers/exists";
 import FaIcon from "../../../icon/FaIcon";
+import InfoTooltip from "../../../tooltip/InfoTooltip";
 import { Disclosure } from "../../config-types";
 import { getFieldKey } from "../../helper";
 import Field from "../Field";
@@ -55,6 +57,7 @@ export const DisclosureField = ({
           <FaIcon icon={isOpen ? faChevronDown : faChevronRight} />
         </span>
         {field.label[locale]}
+        {exists(field.tooltip) && <InfoTooltip text={field.tooltip[locale]} />}
       </Summary>
       <DisclosureNestedFields>
         {field.fields.map((f, i) => {