Merge pull request #2422 from navikt/oversiktssider-v3

fjerner overstyrende padding på Header i ProductPanelExpandable

Author: taniaholst

package-lock.json

@@ -13,14 +13,10 @@
 }
 
 .expandableHeader {
-    padding: var(--a-spacing-5);
+    padding: var(--a-spacing-5) var(--a-spacing-1) var(--a-spacing-5) var(--a-spacing-3);
     gap: var(--a-spacing-4);
     border-radius: var(--a-border-radius-large);
 
-    @media #{common.$mq-screen-mobile} {
-        padding: var(--a-spacing-3) 0;
-    }
-
     &:after {
         display: none;
     }
@@ -29,20 +25,23 @@
     &:focus {
         background-color: var(--a-deepblue-100);
         color: var(--a-text-default);
-        box-shadow: 0 0 0 0;
+        box-shadow: none;
         outline: 5px solid var(--a-bg-default);
 
         & + :global(.navds-expansioncard__content) {
-            box-shadow: 0 0 0 0;
+            box-shadow: none;
         }
-
         .illustration {
             & > :first-child:not(:last-child) * {
                 fill: var(--a-white);
             }
         }
     }
 
+    &:hover :global(.navds-expansioncard__header-button) {
+        background-color: transparent;
+    }
+
     &.alignCenter {
         :global(.navds-expansioncard__header-content) {
             align-items: center;
@@ -59,12 +58,6 @@
     :global(.navds-expansioncard__header-button) {
         align-self: center;
     }
-
-    @media #{common.$mq-screen-mobile} {
-        :global(.navds-expansioncard__header-button) {
-            transform: translateX(10px);
-        }
-    }
 }
 
 .expandableContent {
@@ -73,7 +66,7 @@
     // Remove when we remove the old overview pages.
     &:not(.noLeftPadding) {
         @media #{common.$mq-screen-tablet-and-desktop} {
-            padding-left: 82px;
+            padding-left: 76px;
         }
     }
 }
@@ -103,19 +96,14 @@
 }
 
 .panelHeader {
-    font-size: 22px;
     display: flex;
     flex-direction: column;
+}
+
+.title {
+    font-size: var(--text-fluid-20-22);
     font-weight: var(--a-font-weight-bold);
     word-break: break-word;
-
-    > * {
-        line-height: 1.5;
-    }
-
-    @media #{common.$mq-screen-mobile} {
-        font-size: var(--a-font-size-xlarge);
-    }
 }
 
 .ingress {

packages/nextjs/playwright/screenshot.spec.ts-snapshots/components-common-productpanelexpandable--default-desktop-linux-desktop-linux.png

@@ -94,7 +94,7 @@ export const ProductPanelExpandable = ({
             >
                 <IllustrationStatic className={style.illustration} illustration={illustration} />
                 <div className={style.panelHeader}>
-                    {header}
+                    <span className={style.title}>{header}</span>
                     {ingress && <BodyLong className={style.ingress}>{ingress}</BodyLong>}
                 </div>
             </ExpansionCard.Header>

packages/nextjs/playwright/screenshot.spec.ts-snapshots/components-common-productpanelexpandable--default-mobile-linux-mobile-linux.png

@@ -12,13 +12,12 @@
 
 .tjenesterPanel {
     border-bottom: 1px solid var(--a-gray-300);
-    padding: var(--a-spacing-5) 0 var(--a-spacing-5) var(--a-spacing-4);
+    padding: var(--a-spacing-5) var(--a-spacing-2) var(--a-spacing-5) var(--a-spacing-3);
     display: grid;
-    grid-template-columns: var(--a-spacing-16) 1fr auto;
+    grid-template-columns: auto 1fr auto;
     grid-template-areas:
-        'icon . arrow'
         'icon title arrow'
-        'icon tjenesterIngress arrow';
+        'icon ingress arrow';
     column-gap: var(--a-spacing-4);
     position: relative;
 
@@ -27,7 +26,7 @@
         flex-shrink: 0;
         width: var(--a-spacing-12);
         height: var(--a-spacing-12);
-        align-self: center;
+        align-self: start;
 
         & > :first-child:not(:last-child) * {
             fill: var(--a-deepblue-100);
@@ -39,22 +38,16 @@
         display: flex;
         flex-direction: column;
         word-break: break-word;
-    }
-
-    .lenketekst {
-        font-size: 22px;
+        font-size: var(--text-fluid-20-22);
         text-decoration: none;
         font-weight: 600;
-
-        @media #{common.$mq-screen-mobile} {
-            font-size: var(--a-font-size-xlarge);
-        }
     }
 
-    .tjenesterIngress {
-        grid-area: tjenesterIngress;
+    .ingress {
+        grid-area: ingress;
         text-wrap: pretty;
         text-decoration: none;
+        color: var(--a-text-subtle);
     }
 
     .arrow {
@@ -74,7 +67,7 @@
         box-shadow: 0 0 0 0;
         outline: 5px solid var(--a-bg-default);
 
-        .lenketekst {
+        .title {
             text-decoration: underline;
             text-decoration-color: var(--a-border-action-hover);
         }

packages/nextjs/playwright/screenshot.spec.ts-snapshots/components-common-productpanelexpandable--with-ingress-desktop-linux-desktop-linux.png

@@ -15,7 +15,7 @@ import { ProductDetailsProps } from 'types/content-props/dynamic-page-props';
 import { ProductDetails } from 'components/_common/productDetails/ProductDetails';
 import { ProductDetailType } from 'types/content-props/product-details';
 import { IllustrationStatic } from 'components/_common/illustration/static/IllustrationStatic';
-import { LenkeStandalone } from 'components/_common/lenke/lenkeStandalone/LenkeStandalone';
+import { LenkeInline } from 'components/_common/lenke/lenkeInline/LenkeInline';
 import style from './OversiktListPanel.module.scss';
 
 type OversiktType = OversiktPageData['oversiktType'];
@@ -95,15 +95,10 @@ export const OversiktListPanel = ({ panelDetails, oversiktType, formNumberSelect
         return (
             <div className={style.tjenesterPanel}>
                 <IllustrationStatic illustration={illustration} className={style.icon} />
-                <LenkeStandalone
-                    href={url}
-                    title={title}
-                    className={style.title}
-                    tekstClassName={style.lenketekst}
-                >
+                <LenkeInline href={url} title={title} className={style.title}>
                     {title}
-                </LenkeStandalone>
-                <BodyLong className={style.tjenesterIngress}>{ingress}</BodyLong>
+                </LenkeInline>
+                <BodyLong className={style.ingress}>{ingress}</BodyLong>
                 <ArrowRightIcon title="Pil høyre" className={style.arrow} />
             </div>
         );