fix: styling dataset form

Informasjonsforvaltning · Dec 19, 2024 · fec1d57 · fec1d57
1 parent 37e7fc1
commit fec1d57
Show file tree

Hide file tree

Showing 27 changed files with 541 additions and 332 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,7 +1,13 @@
 import { Dataset } from '@catalog-frontend/types';
-import { FormikLanguageFieldset, TextareaWithPrefix, TitleWithTag } from '@catalog-frontend/ui';
+import {
+  FormikLanguageFieldset,
+  HelpMarkdown,
+  LabelWithHelpTextAndTag,
+  TextareaWithPrefix,
+  TitleWithTag,
+} from '@catalog-frontend/ui';
 import { localization } from '@catalog-frontend/utils';
-import { Textfield, Fieldset } from '@digdir/designsystemet-react';
+import { Textfield, Label } from '@digdir/designsystemet-react';
 import { Field, useFormikContext } from 'formik';
 import { FieldsetDivider } from '@catalog-frontend/ui';
 import { AccessRightFields } from './access-rights.tsx/dataset-form-access-rights-section';
@@ -15,19 +21,37 @@ export const AboutSection = () => {
         as={Textfield}
         requiredLanguages={['nb']}
         legend={
-          <TitleWithTag
-            title={localization.title}
-            tagTitle={localization.tag.required}
-          />
+          <>
+            <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}
+            />
+          </>
         }
       />
 
       <FormikLanguageFieldset
         name='description'
         as={TextareaWithPrefix}
+        requiredLanguages={['nb']}
         legend={
           <TitleWithTag
-            title={localization.description}
+            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>
+              </>
+            }
             tagTitle={localization.tag.required}
           />
         }
@@ -44,7 +68,16 @@ export const AboutSection = () => {
         size='sm'
         type='date'
         name='issued'
-        label={localization.datasetForm.heading.releaseDate}
+        label={
+          <LabelWithHelpTextAndTag
+            tagTitle={localization.tag.recommended}
+            helpText='Hjelpetext'
+            helpTitle='Heisann'
+            tagColor='info'
+          >
+            {localization.datasetForm.heading.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,7 +1,7 @@
 import { Dataset, UriWithLabel } from '@catalog-frontend/types';
 import { AddButton, DeleteButton, EditButton, FieldsetDivider, FormikLanguageFieldset } from '@catalog-frontend/ui';
 import { getTranslateText, localization, trimObjectWhitespace } from '@catalog-frontend/utils';
-import { Button, Divider, Label, Modal, Radio, Table, Textfield } from '@digdir/designsystemet-react';
+import { Button, Label, Modal, Radio, Table, Textfield } from '@digdir/designsystemet-react';
 import { FastField, Formik, useFormikContext } from 'formik';
 import styles from '../../dataset-form.module.css';
 import { useRef, useState } from 'react';
@@ -62,7 +62,7 @@ export const AccessRightsUriTable = () => {
   };
 
   return (
-    <>
+    <div className={styles.fieldContainer}>
       <Label size='sm'>{localization.datasetForm.fieldLabel.legalBasis}</Label>
 
       {allLegalBases && allLegalBases?.length > 0 && !hasNoFieldValues(allLegalBases[0].uriWithLabel) && (
@@ -84,7 +84,7 @@ export const AccessRightsUriTable = () => {
                     <Table.Cell>{item?.uriWithLabel.uri}</Table.Cell>
                     <Table.Cell>{localization.datasetForm.fieldLabel[item?.type]}</Table.Cell>
                     <Table.Cell>
-                      <span className={styles.buttonSet}>
+                      <span className={styles.set}>
                         <FieldModal
                           template={item.uriWithLabel}
                           formType='edit'
@@ -109,7 +109,7 @@ export const AccessRightsUriTable = () => {
           onSuccess={(formValues: LegalBasis) => setFieldValue(getField(formValues), formValues.uriWithLabel)}
         />
       </div>
-    </>
+    </div>
   );
 };
 
@@ -122,10 +122,7 @@ const FieldModal = ({ template, formType, onSuccess, initialType = 'legalBasisFo
     <>
       <Modal.Root>
         <Modal.Trigger asChild>{formType === 'edit' ? <EditButton /> : <AddButton />}</Modal.Trigger>
-        <Modal.Dialog
-          ref={modalRef}
-          className={styles.dialog}
-        >
+        <Modal.Dialog ref={modalRef}>
           <Formik
             initialValues={template}
             validateOnChange={submitted}
@@ -167,6 +164,8 @@ const FieldModal = ({ template, formType, onSuccess, initialType = 'legalBasisFo
                     ))}
                   </Radio.Group>
 
+                  <FieldsetDivider />
+
                   <FormikLanguageFieldset
                     as={Textfield}
                     name='prefLabel'

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
@@ -4,6 +4,7 @@ import { localization } from '@catalog-frontend/utils';
 import { Card, Combobox } from '@digdir/designsystemet-react';
 import { useFormikContext } from 'formik';
 import { AccessRightsUriTable } from './access-rights-uri-table';
+import styles from '../../dataset-form.module.css';
 
 const accessRightsOptions = [
   { value: AccessRights.PUBLIC, label: localization.datasetForm.accessRight.public },
@@ -15,8 +16,8 @@ export const AccessRightFields = () => {
   const { values, setFieldValue } = useFormikContext<Dataset>();
 
   return (
-    <Card>
-      <div>
+    <Card className={styles.card}>
+      <div className={styles.fieldContainer}>
         <TitleWithTag
           title={localization.access}
           tagColor='info'

diff --git a/apps/dataset-catalog/components/dataset-form/components/concept-section.tsx b/apps/dataset-catalog/components/dataset-form/components/concept-section.tsx
@@ -1,12 +1,13 @@
 'use client';
 import { Dataset } from '@catalog-frontend/types';
-import { Heading, Textfield, Chip, Button, Combobox } from '@digdir/designsystemet-react';
+import { Textfield, Chip, Button, Combobox } from '@digdir/designsystemet-react';
 import { useFormikContext } from 'formik';
 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 { FormContainer, TitleWithTag } from '@catalog-frontend/ui';
+import { TitleWithTag } from '@catalog-frontend/ui';
+import classNames from 'classnames';
 
 interface Props {
   searchEnv: string; // Environment variable to search service
@@ -55,14 +56,15 @@ export const ConceptSection = ({ searchEnv }: Props) => {
   };
 
   return (
-    <div>
-      <>
+    <>
+      <div className={styles.fieldContainer}>
         <TitleWithTag
           title={localization.datasetForm.fieldLabel.concept}
           tagTitle={localization.tag.recommended}
           tagColor='info'
         />
         <Combobox
+          size='sm'
           onValueChange={(selectedValues: string[]) => setFieldValue('conceptList', selectedValues)}
           onChange={(input: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(input.target.value)}
           loading={searching}
@@ -90,11 +92,12 @@ export const ConceptSection = ({ searchEnv }: Props) => {
             </Combobox.Option>
           ))}
         </Combobox>
-      </>
+      </div>
 
-      <div className={styles.bottomRow}>
+      <div className={classNames(styles.set, styles.fullWidth)}>
         <div className={styles.fullWidth}>
           <Textfield
+            size='sm'
             label={
               <TitleWithTag
                 title={localization.datasetForm.fieldLabel.keyword}
@@ -113,11 +116,15 @@ export const ConceptSection = ({ searchEnv }: Props) => {
             }}
           />
         </div>
-        <div className={styles.button}>
-          <Button onClick={addKeyword}>{`${localization.add}...`}</Button>
+        <div className={styles.tagsButton}>
+          <Button
+            size='sm'
+            onClick={addKeyword}
+            variant='secondary'
+          >{`${localization.add}...`}</Button>
         </div>
       </div>
-      <Chip.Group>
+      <Chip.Group size='sm'>
         {values.keywordList?.nb?.map((value: string) => (
           <Chip.Removable
             key={value}
@@ -127,6 +134,6 @@ export const ConceptSection = ({ searchEnv }: Props) => {
           </Chip.Removable>
         ))}
       </Chip.Group>
-    </div>
+    </>
   );
 };
diff --git a/apps/dataset-catalog/components/dataset-form/components/contact-point-section.tsx b/apps/dataset-catalog/components/dataset-form/components/contact-point-section.tsx
@@ -33,7 +33,7 @@ export const ContactPointSection = () => {
   };
 
   return (
-    <Box>
+    <>
       <CheckboxGroup
         className={styles.field}
         size='sm'
@@ -63,49 +63,51 @@ export const ContactPointSection = () => {
         ))}
       </CheckboxGroup>
 
-      {selectedFields.includes('email') && (
-        <Field
-          as={Textfield}
-          name='contactPoint[0].email'
-          size='sm'
-          label={localization.email}
-          className={styles.field}
-          // @ts-expect-error: email exists on the object
-          error={errors?.contactPoint?.[0]?.email}
-        />
-      )}
+      <div className={styles.fieldContainer}>
+        {selectedFields.includes('email') && (
+          <Field
+            as={Textfield}
+            name='contactPoint[0].email'
+            size='sm'
+            label={localization.email}
+            className={styles.field}
+            // @ts-expect-error: email exists on the object
+            error={errors?.contactPoint?.[0]?.email}
+          />
+        )}
 
-      {selectedFields.includes('hasTelephone') && (
-        <Field
-          as={Textfield}
-          name='contactPoint[0].hasTelephone'
-          size='sm'
-          label={localization.telephone}
-          className={styles.field}
-          // @ts-expect-error: hasTelephone exists on the object
-          error={errors?.contactPoint?.[0]?.hasTelephone}
-        />
-      )}
-      {selectedFields.includes('organizationUnit') && (
-        <Field
-          as={Textfield}
-          name='contactPoint[0].organizationUnit'
-          size='sm'
-          label={localization.contactPoint.organizationUnit}
-          className={styles.field}
-        />
-      )}
-      {selectedFields.includes('hasURL') && (
-        <Field
-          as={Textfield}
-          name='contactPoint[0].hasURL'
-          size='sm'
-          label={localization.contactPoint.form}
-          className={styles.field}
-          // @ts-expect-error: hasURL exists on the object
-          error={errors?.contactPoint?.[0]?.hasURL}
-        />
-      )}
-    </Box>
+        {selectedFields.includes('hasTelephone') && (
+          <Field
+            as={Textfield}
+            name='contactPoint[0].hasTelephone'
+            size='sm'
+            label={localization.telephone}
+            className={styles.field}
+            // @ts-expect-error: hasTelephone exists on the object
+            error={errors?.contactPoint?.[0]?.hasTelephone}
+          />
+        )}
+        {selectedFields.includes('organizationUnit') && (
+          <Field
+            as={Textfield}
+            name='contactPoint[0].organizationUnit'
+            size='sm'
+            label={localization.contactPoint.organizationUnit}
+            className={styles.field}
+          />
+        )}
+        {selectedFields.includes('hasURL') && (
+          <Field
+            as={Textfield}
+            name='contactPoint[0].hasURL'
+            size='sm'
+            label={localization.contactPoint.form}
+            className={styles.field}
+            // @ts-expect-error: hasURL exists on the object
+            error={errors?.contactPoint?.[0]?.hasURL}
+          />
+        )}
+      </div>
+    </>
   );
 };