Merge pull request #1946 from navikt/klikkbar-h3-lenke

Gjør h3 anker klikkbare og flytter offset til Header

Author: terjeofnorway

src/components/_common/headers/Header.module.scss

@@ -12,7 +12,12 @@
     }
 }
 
-.anchor {
+.anchorOffset {
+    position: relative;
+    transform: translateY(calc(var(--a-spacing-20) * -1));
+}
+
+.anchorLink {
     font-size: inherit;
     color: inherit;
     text-decoration: inherit;

src/components/_common/headers/Header.tsx

@@ -11,30 +11,19 @@ type Props = {
     level: Level;
     size?: Size;
     anchorId?: string;
-    addAnchorId?: boolean;
     className?: string;
 };
 
-export const Header = ({
-    children,
-    size,
-    level,
-    anchorId,
-    className,
-    addAnchorId = true, // Can be set to false if anchor is added outside of Header
-}: Props) => {
+export const Header = ({ children, size, level, anchorId, className }: Props) => {
     const anchor = anchorId ? (anchorId.startsWith('#') ? anchorId : `#${anchorId}`) : undefined;
     const fallbackSizeByLevel = levelToSize[level] || 'large';
 
     return (
-        <div
-            className={classNames(style.header, className)}
-            id={addAnchorId ? anchorId : undefined}
-            tabIndex={-1}
-        >
+        <div className={classNames(style.header, className)}>
+            <div className={style.anchorOffset} id={anchorId} tabIndex={-1} />
             <Heading size={size || fallbackSizeByLevel} level={level}>
-                {anchor && level === '2' ? (
-                    <a href={anchor} className={style.anchor}>
+                {anchor && (level === '2' || level === '3') ? (
+                    <a href={anchor} className={style.anchorLink}>
                         {children}
                     </a>
                 ) : (

src/components/layouts/flex-cols/FlexColsLayout.module.scss

@@ -135,11 +135,6 @@
     }
 }
 
-.anchorOffset {
-    position: relative;
-    transform: translateY(calc(var(--a-spacing-20) * -1));
-}
-
 .shelfHeader:before {
     @include common.header-before-rectangle();
 }

src/components/layouts/flex-cols/SituationPageFlexColsLayout.tsx

@@ -50,13 +50,11 @@ export const SituationPageFlexColsLayout = ({ pageProps, layoutProps }: Props) =
             layoutProps={layoutProps}
         >
             <div className={style.contentWrapper}>
-                <div className={style.anchorOffset} id={anchorId} />
                 {title && (
                     <Header
                         level="2"
                         size="large"
                         anchorId={anchorId}
-                        addAnchorId={false}
                         className={classNames(style.header, isShelf && style.shelfHeader)}
                     >
                         {title}

src/components/layouts/section-with-header/SectionWithHeaderLayout.tsx

@@ -97,13 +97,11 @@ export const SectionWithHeaderLayout = ({ pageProps, layoutProps }: Props) => {
                     />
                 </div>
             )}
-            <div className={style.anchorOffset} id={anchorId} />
             {title && (
                 <Header
                     size="large"
                     level="2"
                     anchorId={anchorId}
-                    addAnchorId={false}
                     className={classNames(style.header, !!iconImgProps && style.headerWithIcon)}
                 >
                     {title}

src/components/layouts/section-with-header/SectionWithHeaderLayoutV2.module.scss

@@ -42,11 +42,6 @@ $defaultBgColor: white;
     @include common.header-before-rectangle();
 }
 
-.anchorOffset {
-    position: relative;
-    transform: translateY(calc(var(--a-spacing-20) * -1));
-}
-
 .header {
     margin-bottom: var(--a-spacing-4);
     color: var(--brand-purple-deep);