Merge master into alltid-vise-aktuell-maalgruppetekst

Author: terjeofnorway

src/components/_common/copyLink/copyLink.tsx

@@ -12,12 +12,12 @@ type CopyLinkProps = {
     anchor: string;
     heading: string;
     className?: string;
-    label?: string;
+    showLabel?: boolean;
 };
 
 const linkCopiedDisplayTimeMs = 2500;
 
-export const CopyLink = ({ anchor, heading, label, className }: CopyLinkProps) => {
+export const CopyLink = ({ anchor, heading, className, showLabel = true }: CopyLinkProps) => {
     const [showCopyTooltip, setShowCopyTooltip] = useState(false);
     const { language } = usePageContentProps();
     const { layoutConfig } = useLayoutConfig();
@@ -52,7 +52,7 @@ export const CopyLink = ({ anchor, heading, label, className }: CopyLinkProps) =
                 aria-label={`${getLabel('copyLinkTo')}: "${heading}"`}
             >
                 <LinkIcon className={style.anchorIcon} aria-hidden />
-                {label || getLabel('copyLink')}
+                {showLabel && getLabel('copyLink')}
             </a>
             <span
                 className={classNames(

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

@@ -11,3 +11,9 @@
         box-shadow: none;
     }
 }
+
+.anchor {
+    font-size: inherit;
+    color: inherit;
+    text-decoration: inherit;
+}

src/components/_common/headers/Header.tsx

@@ -1,9 +1,7 @@
 import React from 'react';
 import { Heading } from '@navikt/ds-react';
-import { onlyText } from 'utils/react-children';
 import { classNames } from 'utils/classnames';
 import { Level, levelToSize, Size } from 'types/typo-style';
-import { CopyLink } from 'components/_common/copyLink/copyLink';
 
 // eslint-disable-next-line css-modules/no-unused-class
 import style from './Header.module.scss';
@@ -12,22 +10,37 @@ type Props = {
     children: React.ReactNode;
     level: Level;
     size?: Size;
-    hideCopyButton?: boolean;
     anchorId?: string;
+    addAnchorId?: boolean;
     className?: string;
 };
 
-export const Header = ({ children, size, level, hideCopyButton, anchorId, className }: Props) => {
+export const Header = ({
+    children,
+    size,
+    level,
+    anchorId,
+    className,
+    addAnchorId = true, // Can be set to false if anchor is added outside of Header
+}: Props) => {
     const anchor = anchorId ? (anchorId.startsWith('#') ? anchorId : `#${anchorId}`) : undefined;
-
     const fallbackSizeByLevel = levelToSize[level] || 'large';
 
     return (
-        <div className={classNames(style.header, className)} id={anchorId} tabIndex={-1}>
+        <div
+            className={classNames(style.header, className)}
+            id={addAnchorId ? anchorId : undefined}
+            tabIndex={-1}
+        >
             <Heading size={size || fallbackSizeByLevel} level={level}>
-                {children}
+                {anchor && level === '2' ? (
+                    <a href={anchor} className={style.anchor}>
+                        {children}
+                    </a>
+                ) : (
+                    children
+                )}
             </Heading>
-            {anchor && !hideCopyButton && <CopyLink heading={onlyText(children)} anchor={anchor} />}
         </div>
     );
 };

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

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

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

@@ -20,7 +20,7 @@ export const FlexColsLayout = ({ pageProps, layoutProps }: Props) => {
     }
 
     const { config } = layoutProps;
-    const { numCols, justifyContent, toggleCopyButton, collapse, title, anchorId } = config;
+    const { numCols, justifyContent, collapse, title, anchorId } = config;
 
     const regionStyle = {
         ...(justifyContent && { justifyContent }),
@@ -36,13 +36,7 @@ export const FlexColsLayout = ({ pageProps, layoutProps }: Props) => {
     return (
         <LayoutContainer pageProps={pageProps} layoutProps={layoutProps} className={style.flexCols}>
             {title && (
-                <Header
-                    level={'2'}
-                    size={'large'}
-                    hideCopyButton={!toggleCopyButton}
-                    anchorId={anchorId}
-                    className={style.header}
-                >
+                <Header level={'2'} size={'large'} anchorId={anchorId} className={style.header}>
                     {title}
                 </Header>
             )}

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

@@ -21,7 +21,7 @@ export const ProductPageFlexColsLayout = ({ pageProps, layoutProps }: Props) =>
     }
 
     const { config } = layoutProps;
-    const { title, anchorId, toggleCopyButton } = config;
+    const { title, anchorId } = config;
 
     const calculateColCount = () => {
         return regionProps.components.length % 3 === 0 ? 3 : 2;
@@ -34,13 +34,7 @@ export const ProductPageFlexColsLayout = ({ pageProps, layoutProps }: Props) =>
             layoutProps={layoutProps}
         >
             {title && (
-                <Header
-                    level="2"
-                    size="large"
-                    hideCopyButton={!toggleCopyButton}
-                    anchorId={anchorId}
-                    className={style.header}
-                >
+                <Header level="2" size="large" anchorId={anchorId} className={style.header}>
                     {title}
                 </Header>
             )}

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

@@ -21,7 +21,7 @@ export const SituationPageFlexColsLayout = ({ pageProps, layoutProps }: Props) =
     }
 
     const { config } = layoutProps;
-    const { title, numCols, justifyContent, anchorId, toggleCopyButton } = config;
+    const { title, numCols, justifyContent, anchorId } = config;
 
     const regionStyle = {
         ...(justifyContent && { justifyContent }),
@@ -50,12 +50,13 @@ export const SituationPageFlexColsLayout = ({ pageProps, layoutProps }: Props) =
             layoutProps={layoutProps}
         >
             <div className={style.contentWrapper}>
+                <div className={style.anchorOffset} id={anchorId} />
                 {title && (
                     <Header
                         level="2"
                         size="large"
-                        hideCopyButton={!toggleCopyButton}
                         anchorId={anchorId}
+                        addAnchorId={false}
                         className={classNames(style.header, isShelf && style.shelfHeader)}
                     >
                         {title}

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

@@ -75,13 +75,11 @@ export const SectionWithHeaderLayout = ({ pageProps, layoutProps }: Props) => {
             pageProps={pageProps}
             layoutProps={layoutProps}
             layoutStyle={border && getBorderStyle(border)}
-            id={!showIcon ? anchorId : undefined}
             tabIndex={-1}
         >
             {showIcon && (
                 <div
                     className={'icon-container'}
-                    id={anchorId} // Ensures anchor links scrolls to the correct position if the icon is rendered
                     tabIndex={-1}
                     style={{
                         ...(icon.color && { backgroundColor: icon.color }),
@@ -99,11 +97,13 @@ export const SectionWithHeaderLayout = ({ pageProps, layoutProps }: Props) => {
                     />
                 </div>
             )}
+            <div className={style.anchorOffset} id={anchorId} />
             {title && (
                 <Header
                     size="large"
                     level="2"
-                    hideCopyButton={true}
+                    anchorId={anchorId}
+                    addAnchorId={false}
                     className={classNames(style.header, !!iconImgProps && style.headerWithIcon)}
                 >
                     {title}

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

@@ -42,6 +42,11 @@ $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);

src/components/macros/header-with-anchor/MacroHeaderWithAnchor.tsx

@@ -23,13 +23,7 @@ export const MacroHeaderWithAnchor = ({ config }: MacroHeaderWithAnchorProps) =>
     }
 
     return (
-        <Header
-            level={level}
-            size={size}
-            anchorId={id}
-            hideCopyButton={true}
-            className={style.headerWithAnchor}
-        >
+        <Header level={level} size={size} anchorId={id} className={style.headerWithAnchor}>
             {headerText}
         </Header>
     );

src/components/parts/header/HeaderPart.tsx

@@ -27,13 +27,7 @@ export const HeaderPart = ({ config }: PartComponentProps<PartType.Header>) => {
     const size = headingToSize[tag];
 
     return (
-        <Header
-            level={level}
-            size={size}
-            anchorId={anchorId}
-            hideCopyButton={true}
-            className={style.headerPart}
-        >
+        <Header level={level} size={size} anchorId={anchorId} className={style.headerPart}>
             {title}
         </Header>
     );

src/types/component-props/_mixins.ts

@@ -10,7 +10,6 @@ export type HeaderWithAnchorMixin = {
     title: string;
     description?: string;
     anchorId: string;
-    toggleCopyButton: boolean;
 };
 
 export enum Audience {