Feat/ha/add helptexts dataset form (#915)

Informasjonsforvaltning · Jan 8, 2025 · 385671b · 385671b
1 parent b50ef8e
commit 385671b
Show file tree

Hide file tree

Showing 20 changed files with 674 additions and 421 deletions.
diff --git a/apps/dataset-catalog/components/dataset-form/components/about-section.tsx b/apps/dataset-catalog/components/dataset-form/components/about-section.tsx
@@ -1,13 +1,7 @@
 import { Dataset } from '@catalog-frontend/types';
-import {
-  FormikLanguageFieldset,
-  HelpMarkdown,
-  LabelWithHelpTextAndTag,
-  TextareaWithPrefix,
-  TitleWithTag,
-} from '@catalog-frontend/ui';
+import { FormikLanguageFieldset, LabelWithHelpTextAndTag, TextareaWithPrefix } from '@catalog-frontend/ui';
 import { localization } from '@catalog-frontend/utils';
-import { Textfield, Label } from '@digdir/designsystemet-react';
+import { Textfield } from '@digdir/designsystemet-react';
 import { FastField, useFormikContext } from 'formik';
 import { FieldsetDivider } from '@catalog-frontend/ui';
 import { AccessRightFields } from './access-rights.tsx/dataset-form-access-rights-section';
@@ -21,19 +15,13 @@ export const AboutSection = () => {
         as={Textfield}
         requiredLanguages={['nb']}
         legend={
-          <>
-            <TitleWithTag
-              title={
-                <>
-                  <Label size='sm'>{localization.title}</Label>
-                  <HelpMarkdown title={'Tittel'}>
-                    Tittelen skal være kortfattet, kunne stå alene og gi mening. Forkortelser skal skrives helt ut
-                  </HelpMarkdown>
-                </>
-              }
-              tagTitle={localization.tag.required}
-            />
-          </>
+          <LabelWithHelpTextAndTag
+            tagTitle={localization.tag.required}
+            helpAriaLabel={localization.title}
+            helpText={localization.datasetForm.helptext.title}
+          >
+            {localization.title}
+          </LabelWithHelpTextAndTag>
         }
       />
 
@@ -42,18 +30,13 @@ export const AboutSection = () => {
         as={TextareaWithPrefix}
         requiredLanguages={['nb']}
         legend={
-          <TitleWithTag
-            title={
-              <>
-                <Label size='sm'>{localization.description}</Label>
-                <HelpMarkdown title={'Beskrivelse'}>
-                  Beskrivelsen skal være kortfattet. Det bør fremgå hvilke opplysninger som utgjør kjernen i datasettet,
-                  samt formålet til datasettet.
-                </HelpMarkdown>
-              </>
-            }
+          <LabelWithHelpTextAndTag
+            helpText={localization.datasetForm.helptext.description}
+            helpAriaLabel={localization.description}
             tagTitle={localization.tag.required}
-          />
+          >
+            {localization.description}
+          </LabelWithHelpTextAndTag>
         }
       />
 
@@ -71,11 +54,11 @@ export const AboutSection = () => {
         label={
           <LabelWithHelpTextAndTag
             tagTitle={localization.tag.recommended}
-            helpText='Hjelpetext'
-            helpTitle='Heisann'
+            helpText={localization.datasetForm.helptext.releaseDate}
+            helpAriaLabel={localization.datasetForm.fieldLabel.releaseDate}
             tagColor='info'
           >
-            {localization.datasetForm.heading.releaseDate}
+            {localization.datasetForm.fieldLabel.releaseDate}
           </LabelWithHelpTextAndTag>
         }
       />

diff --git a/...-catalog/components/dataset-form/components/access-rights.tsx/access-rights-uri-table.tsx b/...-catalog/components/dataset-form/components/access-rights.tsx/access-rights-uri-table.tsx
@@ -1,5 +1,12 @@
 import { Dataset, UriWithLabel } from '@catalog-frontend/types';
-import { AddButton, DeleteButton, EditButton, FieldsetDivider, FormikLanguageFieldset } from '@catalog-frontend/ui';
+import {
+  AddButton,
+  DeleteButton,
+  EditButton,
+  FieldsetDivider,
+  FormikLanguageFieldset,
+  LabelWithHelpTextAndTag,
+} from '@catalog-frontend/ui';
 import { getTranslateText, localization, trimObjectWhitespace } from '@catalog-frontend/utils';
 import { Button, Label, Modal, Radio, Table, Textfield } from '@digdir/designsystemet-react';
 import { FastField, Formik, useFormikContext } from 'formik';
@@ -63,9 +70,14 @@ export const AccessRightsUriTable = () => {
 
   return (
     <div className={styles.fieldContainer}>
-      <Label size='sm'>{localization.datasetForm.fieldLabel.legalBasis}</Label>
-
-      {allLegalBases && allLegalBases?.length > 0 && !hasNoFieldValues(allLegalBases[0].uriWithLabel) && (
+      <LabelWithHelpTextAndTag
+        helpAriaLabel={localization.datasetForm.fieldLabel.legalBasis}
+        helpText={localization.datasetForm.helptext.legalBasis}
+      >
+        {localization.datasetForm.fieldLabel.legalBasis}
+      </LabelWithHelpTextAndTag>
+
+      {allLegalBases && allLegalBases?.length > 0 && !hasNoFieldValues(allLegalBases[0]?.uriWithLabel) && (
         <Table size='sm'>
           <Table.Head>
             <Table.Row>
@@ -147,7 +159,14 @@ const FieldModal = ({ template, formType, onSuccess, initialType = 'legalBasisFo
                 <Modal.Content>
                   <Radio.Group
                     size='sm'
-                    legend={localization.type}
+                    legend={
+                      <LabelWithHelpTextAndTag
+                        helpText={localization.datasetForm.helptext.legalBasisType}
+                        helpAriaLabel={localization.type}
+                      >
+                        {localization.type}
+                      </LabelWithHelpTextAndTag>
+                    }
                     onChange={(val) => {
                       setLegalBasis(val);
                     }}

diff --git a/...mponents/dataset-form/components/access-rights.tsx/dataset-form-access-rights-section.tsx b/...mponents/dataset-form/components/access-rights.tsx/dataset-form-access-rights-section.tsx
@@ -1,7 +1,7 @@
 import { AccessRights, Dataset } from '@catalog-frontend/types';
-import { TitleWithTag } from '@catalog-frontend/ui';
+import { LabelWithHelpTextAndTag } from '@catalog-frontend/ui';
 import { localization } from '@catalog-frontend/utils';
-import { Card, Combobox } from '@digdir/designsystemet-react';
+import { Card, Combobox, Fieldset } from '@digdir/designsystemet-react';
 import { useFormikContext } from 'formik';
 import { AccessRightsUriTable } from './access-rights-uri-table';
 import styles from '../../dataset-form.module.css';
@@ -17,26 +17,34 @@ export const AccessRightFields = () => {
 
   return (
     <Card className={styles.card}>
-      <div className={styles.fieldContainer}>
-        <TitleWithTag
-          title={localization.access}
-          tagColor='info'
-          tagTitle={localization.tag.recommended}
-        />
-        <Combobox
-          size='sm'
-          value={[values.accessRights?.uri || AccessRights.PUBLIC]}
-          onValueChange={(values) => setFieldValue('accessRights.uri', values.toString())}
-        >
-          {accessRightsOptions.map((option) => (
-            <Combobox.Option
-              key={option.value}
-              value={option.value}
+      <div>
+        <Fieldset
+          legend={
+            <LabelWithHelpTextAndTag
+              helpAriaLabel={localization.access}
+              helpText={localization.datasetForm.helptext.accessRights}
+              tagColor='info'
+              tagTitle={localization.tag.recommended}
             >
-              {option.label}
-            </Combobox.Option>
-          ))}
-        </Combobox>
+              {localization.access}
+            </LabelWithHelpTextAndTag>
+          }
+        >
+          <Combobox
+            size='sm'
+            value={[values.accessRights?.uri || AccessRights.PUBLIC]}
+            onValueChange={(values) => setFieldValue('accessRights.uri', values.toString())}
+          >
+            {accessRightsOptions.map((option) => (
+              <Combobox.Option
+                key={option.value}
+                value={option.value}
+              >
+                {option.label}
+              </Combobox.Option>
+            ))}
+          </Combobox>
+        </Fieldset>
       </div>
 
       {(values.accessRights?.uri === AccessRights.RESTRICTED ||

diff --git a/apps/dataset-catalog/components/dataset-form/components/concept-section.tsx b/apps/dataset-catalog/components/dataset-form/components/concept-section.tsx
@@ -6,7 +6,7 @@ import { useState } from 'react';
 import { capitalizeFirstLetter, getTranslateText, localization } from '@catalog-frontend/utils';
 import styles from '../dataset-form.module.css';
 import { useSearchConceptsByUri, useSearchConceptSuggestions } from '../../../hooks/useSearchService';
-import { FormikLanguageFieldset, TitleWithTag } from '@catalog-frontend/ui';
+import { FormikLanguageFieldset, LabelWithHelpTextAndTag } from '@catalog-frontend/ui';
 
 interface Props {
   searchEnv: string; // Environment variable to search service
@@ -43,11 +43,15 @@ export const ConceptSection = ({ searchEnv }: Props) => {
   return (
     <>
       <>
-        <TitleWithTag
-          title={localization.datasetForm.fieldLabel.concept}
+        <LabelWithHelpTextAndTag
           tagTitle={localization.tag.recommended}
           tagColor='info'
-        />
+          helpAriaLabel={localization.datasetForm.fieldLabel.concept}
+          helpText={localization.datasetForm.helptext.concept}
+        >
+          {localization.datasetForm.fieldLabel.concept}
+        </LabelWithHelpTextAndTag>
+
         <Combobox
           size='sm'
           onValueChange={(selectedValues: string[]) => setFieldValue('conceptList', selectedValues)}
@@ -83,11 +87,14 @@ export const ConceptSection = ({ searchEnv }: Props) => {
         multiple
         name={'keywordList'}
         legend={
-          <TitleWithTag
-            title={localization.datasetForm.fieldLabel.keyword}
+          <LabelWithHelpTextAndTag
             tagTitle={localization.tag.recommended}
             tagColor='info'
-          />
+            helpAriaLabel={localization.datasetForm.fieldLabel.keyword}
+            helpText={localization.datasetForm.helptext.keyword}
+          >
+            {localization.datasetForm.fieldLabel.keyword}
+          </LabelWithHelpTextAndTag>
         }
       />
     </>