Feature/lookup-adjustments (#2787)

* fix font size for descriptions * fix spacing for horisontal and vericatl view * move styling to description
Altinn · Dec 6, 2024 · 507313c · 507313c
1 parent 5f68329
commit 507313c
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 6 deletions.
diff --git a/src/app-components/Label/Fieldset.tsx b/src/app-components/Label/Fieldset.tsx
@@ -88,7 +88,7 @@ export function Fieldset({
             </span>
           }
           // FIXME: find a way to use classnames for setting font size. Not working currently
-          description={description && <div style={{ fontSize: '1rem' }}>{description}</div>}
+          description={description}
         >
           {children}
         </DesignsystemetFieldset>

diff --git a/src/components/form/Description.module.css b/src/components/form/Description.module.css
@@ -1,7 +1,8 @@
 .description {
   word-break: break-word;
-  line-height: 1.5rem;
+  line-height: var(--fds-sizing-6);
   color: var(--semantic-text-neutral-subtle);
   display: inline-block;
   font-weight: normal;
+  font-size: var(--fds-sizing-4);
 }
diff --git a/src/layout/OrganisationLookup/OrganisationLookupComponent.module.css b/src/layout/OrganisationLookup/OrganisationLookupComponent.module.css
@@ -7,7 +7,9 @@
       'orgname'
       'submit'
       'apiError';
-    gap: var(--fds-spacing-2);
+  }
+  .submit {
+    margin-top: var(--fds-spacing-6);
   }
 }
 
@@ -21,7 +23,10 @@
       'orgname .'
       'apiError .';
     align-items: end;
-    column-gap: var(--fds-spacing-2);
+    column-gap: var(--fds-spacing-6);
+  }
+  .submit {
+    margin-top: 0;
   }
 }
 

diff --git a/src/layout/PersonLookup/PersonLookupComponent.module.css b/src/layout/PersonLookup/PersonLookupComponent.module.css
@@ -2,7 +2,11 @@
 @media only screen and (min-width: 0) {
   .componentWrapper {
     grid-template-areas: 'ssnLabel' 'ssn' 'nameLabel' 'name' 'submit' 'apiError';
-    gap: var(--fds-spacing-2);
+  }
+
+  .nameLabel,
+  .submit {
+    margin-top: var(--fds-spacing-6);
   }
 }
 
@@ -12,7 +16,11 @@
     grid-template-columns: repeat(2, minmax(250px, 250px)) auto;
     grid-template-areas: 'ssnLabel nameLabel .' 'ssn name submit' 'apiError apiError .';
     align-items: end;
-    column-gap: var(--fds-spacing-2);
+    column-gap: var(--fds-spacing-6);
+  }
+  .nameLabel,
+  .submit {
+    margin-top: 0;
   }
 }
 

diff --git a/src/layout/PersonLookup/PersonLookupComponent.tsx b/src/layout/PersonLookup/PersonLookupComponent.tsx
@@ -167,6 +167,7 @@ export function PersonLookupComponent({ node, overrideDisplay }: PropsFromGeneri
                   <Description
                     description={langAsString('person_lookup.from_registry_description')}
                     componentId={`${id}_ssn`}
+                    style={{ fontSize: '1rem' }}
                   />
                 ) : undefined
               }