Merged main

Author: eivindskifjeld

src/components/_common/card/LargeCardV2/LargeCardV2.tsx

@@ -42,14 +42,12 @@ export const LargeCardV2 = (props: Props) => {
             )}
             <div>
                 <LenkeBase className={style.link} href={link.url} {...analyticsProps}>
-                    <BodyShort className={style.linkText} size="large">
+                    <BodyLong as="span" size="large" className={style.linkText}>
                         {link.text}
-                    </BodyShort>
+                    </BodyLong>
                 </LenkeBase>
                 <BodyLong className={style.description}>{description}</BodyLong>
-                <BodyShort className={style.tagline} size="medium">
-                    {tagline}
-                </BodyShort>
+                <BodyShort className={style.tagline}>{tagline}</BodyShort>
             </div>
         </div>
     );

src/components/_common/card/MiniCardV2/MiniCardV2.module.scss

@@ -29,8 +29,9 @@
     color: var(--default-action-color);
 }
 
-.linkText {
+.linkText.linkText {
     font-weight: 600;
+    margin-bottom: 0;
 }
 
 .tagline {

src/components/_common/card/MiniCardV2/MiniCardV2.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ArrowRightIcon } from '@navikt/aksel-icons';
-import { BodyShort } from '@navikt/ds-react';
+import { BodyLong, BodyShort } from '@navikt/ds-react';
 import { LenkeBase } from 'components/_common/lenke/lenkeBase/LenkeBase';
 import { LinkProps } from 'types/link-props';
 import { useCard } from 'components/_common/card/useCard';
@@ -30,11 +30,11 @@ export const MiniCardV2 = ({ link, type, tagline, className }: MiniCardProps) =>
             {...analyticsProps}
         >
             <div className={style.textContainer}>
-                <BodyShort className={style.linkText} size="medium">
+                <BodyLong as="span" className={style.linkText}>
                     {link.text}
-                </BodyShort>
+                </BodyLong>
                 {tagline && (
-                    <BodyShort className={style.tagline} size="medium">
+                    <BodyShort as="span" className={style.tagline}>
                         {tagline}
                     </BodyShort>
                 )}

src/components/_common/pageNavigationMenu/PageNavigationMenu.module.scss

@@ -42,4 +42,8 @@
             text-decoration-line: underline;
         }
     }
+
+    .linkText {
+        margin-bottom: 0;
+    }
 }

src/components/_common/pageNavigationMenu/PageNavigationMenu.tsx

@@ -1,6 +1,6 @@
 import React, { useId } from 'react';
 import { ArrowDownRightIcon } from '@navikt/aksel-icons';
-import { BodyShort, Heading } from '@navikt/ds-react';
+import { BodyLong, Heading } from '@navikt/ds-react';
 import { AnchorLink } from 'components/parts/page-navigation-menu/PageNavigationMenuPart';
 import { LenkeBase } from 'components/_common/lenke/lenkeBase/LenkeBase';
 import { classNames } from 'utils/classnames';
@@ -64,7 +64,9 @@ export const PageNavigationMenu = ({
                             className={style.link}
                         >
                             <ArrowDownRightIcon aria-hidden className={style.icon} />
-                            <BodyShort as="span">{anchorLink.linkText}</BodyShort>
+                            <BodyLong as="span" className={style.linkText}>
+                                {anchorLink.linkText}
+                            </BodyLong>
                         </LenkeBase>
                     </li>
                 ))}

src/global-override-styles.scss

@@ -29,7 +29,6 @@
     --text-fluid-32-36: clamp(2rem, 1.9167rem + 0.4167vi, 2.25rem);
     --text-fluid-36-48: clamp(2.25rem, 2rem + 1.25vi, 3rem);
     --default-action-color: var(--a-blue-600);
-
     --brand-purple-deep: #99185e;
     --brand-purple-light: #e6c7d8;
     --brand-beige: #fef5ef;
@@ -64,39 +63,36 @@
     .navds-body-short--large {
         font-size: var(--text-fluid-20-22);
     }
-
     .navds-body-long--small,
     .navds-body-long--medium,
     .navds-body-long--large {
-        line-height: 1.75;
+        line-height: 1.65;
         margin-bottom: var(--a-spacing-9);
     }
 
+    .navds-heading {
+        line-height: 1.3;
+    }
     .navds-heading--xsmall,
     .navds-heading--small,
     .navds-heading--medium {
         margin-bottom: var(--a-spacing-2);
     }
-
     .navds-heading--xsmall {
         font-size: var(--text-fluid-18-20);
     }
-
     .navds-heading--small {
         font-size: var(--text-fluid-18-20);
         font-weight: 650;
     }
-
     .navds-heading--medium {
         font-size: var(--text-fluid-22-24);
         font-weight: 650;
     }
-
     .navds-heading--large {
         font-size: var(--text-fluid-32-36);
         font-weight: 650;
     }
-
     .navds-heading--xlarge {
         font-size: var(--text-fluid-36-48);
         font-weight: 650;