From a2d064582ed13f306d7edfa5030ea5e9ddd7ee06 Mon Sep 17 00:00:00 2001
From: PerIngeVaaje <per.inge.vaaje@ssb.no>
Date: Mon, 4 Mar 2024 15:44:59 +0100
Subject: [PATCH 01/10] PXWEB2-46 Refactor with icons

---
 .../src/lib/components/Link/Link.module.scss  | 15 +++++++-
 .../src/lib/components/Link/Link.stories.tsx  |  7 ++--
 .../src/lib/components/Link/Link.tsx          | 34 +++++++++++++++----
 3 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss b/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss
index ece73ef7..fb34f6d3 100644
--- a/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss
+++ b/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss
@@ -1,11 +1,24 @@
+@use '../../../../style-dictionary/dist/scss/fixed-variables.scss' as fixvar;
+
 .link {
-  font-family: 'Roboto', sans-serif;
+  font-family: PxWeb-font-400;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.75rem; /* 175% */
+  text-decoration-line: underline;
   color: var(--px-color-text-action);
+  display: flex;
+  align-items: flex-start;
+  gap: fixvar.$spacing-1;
+
   &:hover {
     text-decoration: none;
+    background-color: var(--px-color-surface-subtle-hover);
   }
 
   &:focus {
+    text-decoration-line: none;
     color: var(--px-color-text-on-action-subtle);
     background-color: var(--px-color-surface-subtle-active);
   }
diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx b/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx
index f5bbd75e..56eb2665 100644
--- a/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx
+++ b/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Link } from './Link';
 
 /* import { within } from '@storybook/testing-library';
@@ -10,9 +10,12 @@ const meta: Meta<typeof Link> = {
 };
 export default meta;
 
-export const Primary = {
+type Story = StoryObj<typeof Link>;
+
+export const Primary: Story = {
   args: {
     href: '#',
     children: 'En godt skrevet lenketekst',
+    icon: 'FileText',
   },
 };
diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.tsx b/libs/pxweb2-ui/src/lib/components/Link/Link.tsx
index d45b00bf..47d15467 100644
--- a/libs/pxweb2-ui/src/lib/components/Link/Link.tsx
+++ b/libs/pxweb2-ui/src/lib/components/Link/Link.tsx
@@ -1,17 +1,39 @@
 import React from 'react';
-import styles from './Link.module.scss';
+import classes from './Link.module.scss';
+import { Icon, IconProps } from '../Icon/Icon';
 
-interface LinkProps {
+interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  icon?: IconProps['iconName'];
+  iconPosition?: 'left' | 'right';
   children: React.ReactNode;
   href: string;
 }
-
-export const Link: React.FC<LinkProps> = ({ children, href }) => {
+export function Link({
+  children,
+  href,
+  icon,
+  iconPosition,
+  ...rest
+}: LinkProps) {
   return (
-    <a href={href} className={styles.link}>
+    <a href={href} className={classes.link}>
+      {icon && iconPosition === 'left' && (
+        <Icon iconName={icon} className=""></Icon>
+      )}
       {children}
+      {icon && iconPosition === 'right' && (
+        <Icon iconName={icon} className=""></Icon>
+      )}
     </a>
   );
-};
+}
+
+// export const Link: React.FC<LinkProps> = ({ children, href }) => {
+//   return (
+//     <a href={href} className={styles.link}>
+//       {children}
+//     </a>
+//   );
+// };
 
 export default Link;

From cf2aeae702bc9798cf720e84118221c11a2a4912 Mon Sep 17 00:00:00 2001
From: PerIngeVaaje <per.inge.vaaje@ssb.no>
Date: Thu, 7 Mar 2024 14:48:26 +0100
Subject: [PATCH 02/10] PXWEB2-46 Removed Typography. Should be inherited from
 parents. Added class for icons. Added properties for inline and noUnderline

---
 .../src/lib/components/Link/Link.module.scss  | 31 ++++++---
 .../src/lib/components/Link/Link.stories.tsx  | 67 +++++++++++++++++--
 .../src/lib/components/Link/Link.tsx          | 13 +++-
 3 files changed, 93 insertions(+), 18 deletions(-)

diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss b/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss
index fb34f6d3..91bd5147 100644
--- a/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss
+++ b/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss
@@ -1,25 +1,40 @@
 @use '../../../../style-dictionary/dist/scss/fixed-variables.scss' as fixvar;
 
 .link {
-  font-family: PxWeb-font-400;
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.75rem; /* 175% */
-  text-decoration-line: underline;
+  text-decoration-line:underline;
   color: var(--px-color-text-action);
-  display: flex;
+  display: inline-flex;
   align-items: flex-start;
   gap: fixvar.$spacing-1;
+  min-width: 24px;
+  min-height: 24px;
 
   &:hover {
     text-decoration: none;
     background-color: var(--px-color-surface-subtle-hover);
   }
 
-  &:focus {
+  &:focus   {
+    text-decoration-line: none;
+    color: var(--px-color-text-on-action-subtle);
+    background-color: var(--px-color-surface-subtle-active);
+  }
+
+  &:active   {
     text-decoration-line: none;
     color: var(--px-color-text-on-action-subtle);
     background-color: var(--px-color-surface-subtle-active);
   }
 }
+ .no_underline {
+  text-decoration-line: none;
+ }
+ .inline {
+  display: inline;
+ }
+ .link_inline_svg{
+  margin: 0 0 -0.3em;
+  display: inline;
+  vertical-align: baseline;
+ }
+
diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx b/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx
index 56eb2665..37f0f917 100644
--- a/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx
+++ b/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx
@@ -1,8 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj, StoryFn } from '@storybook/react';
 import { Link } from './Link';
-
-/* import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest'; */
+import { BodyLong } from '../Typography/BodyLong/BodyLong';
 
 const meta: Meta<typeof Link> = {
   component: Link,
@@ -12,10 +10,65 @@ export default meta;
 
 type Story = StoryObj<typeof Link>;
 
-export const Primary: Story = {
+export const variants: Story = {
   args: {
     href: '#',
-    children: 'En godt skrevet lenketekst',
-    icon: 'FileText',
+    children: 'En godt skrevet lenketekst'
   },
 };
+
+
+export const inlineAndStandalone: StoryFn<typeof BodyLong> = () => {
+  return (
+    <>
+      <h1>Inline link in BodyLong</h1>
+
+      <h2>medium without icon:</h2>      
+      <BodyLong>Gå til <Link href="#" inline >Statistikkbanken</Link> dersom du vil se flere tabeller </BodyLong>
+
+      <h2>small without icon right:</h2>
+      <BodyLong size='small'>Gå til <Link href="#" inline>Statistikkbanken</Link> dersom du vil se flere tabeller </BodyLong>
+
+      <h2>medium icon left:</h2>      
+      <BodyLong>Gå til <Link href="#" inline icon="FileText" iconPosition="left">Statistikkbanken</Link> dersom du vil se flere tabeller </BodyLong>
+
+      <h2>small icon left:</h2>
+      <BodyLong size='small'>Gå til <Link href="#" inline icon="FileText" iconPosition="left">Statistikkbanken</Link> dersom du vil se flere tabeller </BodyLong>
+
+
+      <h2>medium icon right:</h2>      
+      <BodyLong>Gå til <Link href="#" inline icon="FileText" iconPosition="right">Statistikkbanken</Link> dersom du vil se flere tabeller </BodyLong>
+
+      <h2>small icon right:</h2>
+      <BodyLong size='small'>Gå til <Link href="#"  inline icon="FileText" iconPosition="right">Statistikkbanken</Link> dersom du vil se flere tabeller </BodyLong>
+
+      
+      <h1>Standalone link in BodyLong</h1>
+
+      <h2>medium without icon:</h2>      
+      <BodyLong><Link href="#">Statistikkbanken</Link></BodyLong>
+
+      
+      <h2>small without icon:</h2>   
+      <BodyLong size='small'><Link href="#">Statistikkbanken</Link></BodyLong>
+
+      <h2>small icon left:</h2>
+      <BodyLong size='small'><Link href="#" icon="FileText" iconPosition="left">Statistikkbanken </Link></BodyLong>
+      
+      <h2>medium icon left:</h2>      
+      <BodyLong><Link href="#" icon="FileText" iconPosition="left">Statistikkbanken</Link></BodyLong>
+
+      <h2>medium icon right:</h2>      
+      <BodyLong><Link href="#" icon="FileText" iconPosition="right">Statistikkbanken</Link></BodyLong>
+
+      <h2>small icon right:</h2>
+      <BodyLong size='small'><Link href="#" icon="FileText" iconPosition="right">Statistikkbanken</Link></BodyLong>
+
+      <h2>Short text less then 24px:</h2>
+     <Link href="#" noUnderline>x</Link><br />
+    </>
+  );
+};
+
+/* import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest'; */
diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.tsx b/libs/pxweb2-ui/src/lib/components/Link/Link.tsx
index 47d15467..10b2729b 100644
--- a/libs/pxweb2-ui/src/lib/components/Link/Link.tsx
+++ b/libs/pxweb2-ui/src/lib/components/Link/Link.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import classes from './Link.module.scss';
+import cl from 'clsx';
 import { Icon, IconProps } from '../Icon/Icon';
 
 interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -7,22 +8,28 @@ interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   iconPosition?: 'left' | 'right';
   children: React.ReactNode;
   href: string;
+  inline?:boolean;
+  noUnderline?:boolean
 }
 export function Link({
   children,
   href,
   icon,
   iconPosition,
+  inline=false,
+  noUnderline=false,
   ...rest
 }: LinkProps) {
   return (
-    <a href={href} className={classes.link}>
+    <a href={href} className={cl(classes.link, {
+      [classes.no_underline]: noUnderline,[classes.inline]: inline
+    })}   >
       {icon && iconPosition === 'left' && (
-        <Icon iconName={icon} className=""></Icon>
+        <Icon iconName={icon} className={cl({[classes.link_inline_svg]:inline})}></Icon>
       )}
       {children}
       {icon && iconPosition === 'right' && (
-        <Icon iconName={icon} className=""></Icon>
+        <Icon iconName={icon} className={cl({[classes.link_inline_svg]:inline})}></Icon>
       )}
     </a>
   );

From 6d8c3bb835afa02afe889747f2ee29b16eb16bb5 Mon Sep 17 00:00:00 2001
From: PerIngeVaaje <per.inge.vaaje@ssb.no>
Date: Mon, 11 Mar 2024 11:10:52 +0100
Subject: [PATCH 03/10] PXWEB2-46 Changed svc specific SCCS definition to be 
 child  to link

---
 .../src/lib/components/Link/Link.module.scss      | 15 ++++++++++-----
 libs/pxweb2-ui/src/lib/components/Link/Link.tsx   |  4 ++--
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss b/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss
index 91bd5147..8e22f2fd 100644
--- a/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss
+++ b/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss
@@ -8,6 +8,9 @@
   gap: fixvar.$spacing-1;
   min-width: 24px;
   min-height: 24px;
+  >svg{
+    align-self: center;
+  }
 
   &:hover {
     text-decoration: none;
@@ -31,10 +34,12 @@
  }
  .inline {
   display: inline;
+  >svg{
+    margin: 0 0 -0.3em;
+    display: inline;
+  }
  }
- .link_inline_svg{
-  margin: 0 0 -0.3em;
-  display: inline;
-  vertical-align: baseline;
- }
+
+
+
 
diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.tsx b/libs/pxweb2-ui/src/lib/components/Link/Link.tsx
index 10b2729b..0b630501 100644
--- a/libs/pxweb2-ui/src/lib/components/Link/Link.tsx
+++ b/libs/pxweb2-ui/src/lib/components/Link/Link.tsx
@@ -25,11 +25,11 @@ export function Link({
       [classes.no_underline]: noUnderline,[classes.inline]: inline
     })}   >
       {icon && iconPosition === 'left' && (
-        <Icon iconName={icon} className={cl({[classes.link_inline_svg]:inline})}></Icon>
+        <Icon iconName={icon} className=""></Icon>
       )}
       {children}
       {icon && iconPosition === 'right' && (
-        <Icon iconName={icon} className={cl({[classes.link_inline_svg]:inline})}></Icon>
+        <Icon iconName={icon} className=""></Icon>
       )}
     </a>
   );

From d6c7e56b717cb9e2615124323c6e294d6e07209e Mon Sep 17 00:00:00 2001
From: PerIngeVaaje <per.inge.vaaje@ssb.no>
Date: Mon, 11 Mar 2024 11:11:46 +0100
Subject: [PATCH 04/10] PXWEB2-46 Removed stories for small size inline links.
 Would not be used

---
 libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx b/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx
index 37f0f917..c832a3da 100644
--- a/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx
+++ b/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx
@@ -26,22 +26,14 @@ export const inlineAndStandalone: StoryFn<typeof BodyLong> = () => {
       <h2>medium without icon:</h2>      
       <BodyLong>Gå til <Link href="#" inline >Statistikkbanken</Link> dersom du vil se flere tabeller </BodyLong>
 
-      <h2>small without icon right:</h2>
-      <BodyLong size='small'>Gå til <Link href="#" inline>Statistikkbanken</Link> dersom du vil se flere tabeller </BodyLong>
 
       <h2>medium icon left:</h2>      
       <BodyLong>Gå til <Link href="#" inline icon="FileText" iconPosition="left">Statistikkbanken</Link> dersom du vil se flere tabeller </BodyLong>
 
-      <h2>small icon left:</h2>
-      <BodyLong size='small'>Gå til <Link href="#" inline icon="FileText" iconPosition="left">Statistikkbanken</Link> dersom du vil se flere tabeller </BodyLong>
-
 
       <h2>medium icon right:</h2>      
       <BodyLong>Gå til <Link href="#" inline icon="FileText" iconPosition="right">Statistikkbanken</Link> dersom du vil se flere tabeller </BodyLong>
 
-      <h2>small icon right:</h2>
-      <BodyLong size='small'>Gå til <Link href="#"  inline icon="FileText" iconPosition="right">Statistikkbanken</Link> dersom du vil se flere tabeller </BodyLong>
-
       
       <h1>Standalone link in BodyLong</h1>
 

From 29c8717cfe9ffd03c1115f2b01324db5588c4450 Mon Sep 17 00:00:00 2001
From: PerIngeVaaje <per.inge.vaaje@ssb.no>
Date: Wed, 13 Mar 2024 15:57:18 +0100
Subject: [PATCH 05/10] PXWEB2-46 Removed story with icon left inline. Made
 styling problem and would propably not be used. Made css simpler. possible
 without icon left inline

Added padding for standalone links to meet WCAG requirements.

Set smaller gap for links with icon.  2px for standalone and 0px for inline
---
 .../src/lib/components/Link/Link.module.scss  |  41 +++---
 .../src/lib/components/Link/Link.stories.tsx  | 130 ++++++++++++++----
 .../src/lib/components/Link/Link.tsx          |  27 ++--
 3 files changed, 131 insertions(+), 67 deletions(-)

diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss b/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss
index 8e22f2fd..dfe8da62 100644
--- a/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss
+++ b/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss
@@ -1,45 +1,42 @@
 @use '../../../../style-dictionary/dist/scss/fixed-variables.scss' as fixvar;
 
 .link {
-  text-decoration-line:underline;
+  text-decoration-line: underline;
   color: var(--px-color-text-action);
   display: inline-flex;
   align-items: flex-start;
-  gap: fixvar.$spacing-1;
-  min-width: 24px;
-  min-height: 24px;
-  >svg{
-    align-self: center;
-  }
+  gap: 2px;
+  padding: 22px;
+  align-items: center;
 
   &:hover {
     text-decoration: none;
     background-color: var(--px-color-surface-subtle-hover);
   }
 
-  &:focus   {
+  &:focus {
     text-decoration-line: none;
     color: var(--px-color-text-on-action-subtle);
     background-color: var(--px-color-surface-subtle-active);
   }
 
-  &:active   {
+  &:focus-visible {
+    text-decoration-line: none;
+    color: var(--px-color-text-on-action-subtle);
+    background-color: var(--px-color-surface-subtle-active);
+  }
+
+  &:active {
     text-decoration-line: none;
     color: var(--px-color-text-on-action-subtle);
     background-color: var(--px-color-surface-subtle-active);
   }
 }
- .no_underline {
+.no_underline {
   text-decoration-line: none;
- }
- .inline {
-  display: inline;
-  >svg{
-    margin: 0 0 -0.3em;
-    display: inline;
-  }
- }
-
-
-
-
+}
+.inline {
+  display: inline-flex;
+  gap: 0px;
+  padding: 0px;
+}
diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx b/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx
index c832a3da..e1a7c9ae 100644
--- a/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx
+++ b/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx
@@ -13,51 +13,123 @@ type Story = StoryObj<typeof Link>;
 export const variants: Story = {
   args: {
     href: '#',
-    children: 'En godt skrevet lenketekst'
+    children: 'En godt skrevet lenketekst',
   },
 };
 
-
 export const inlineAndStandalone: StoryFn<typeof BodyLong> = () => {
   return (
     <>
       <h1>Inline link in BodyLong</h1>
 
-      <h2>medium without icon:</h2>      
-      <BodyLong>Gå til <Link href="#" inline >Statistikkbanken</Link> dersom du vil se flere tabeller </BodyLong>
-
-
-      <h2>medium icon left:</h2>      
-      <BodyLong>Gå til <Link href="#" inline icon="FileText" iconPosition="left">Statistikkbanken</Link> dersom du vil se flere tabeller </BodyLong>
-
+      <h2>medium without icon:</h2>
+      <BodyLong>
+        This is a story about Little Red Ridinghood. One day she went into the
+        wood to visit her grandmother. The day after too, She visited her every
+        day, every week, every month, every year. She never saw a wolf, no even
+        a little fox. Go to{' '}
+        <Link href="#" inline>
+          Statistikkbanken
+        </Link>{' '}
+        to read more. This is a story about Little Red Ridinghood. One day she
+        went into the wood to visit her grandmother. The day after too, She
+        visited her every day, every week, every month, every year. She never
+        saw a wolf, no even a little fox.
+      </BodyLong>
+
+      <h2>medium icon right:</h2>
+      <BodyLong>
+        This is a story about Little Red Ridinghood. One day she went into the
+        wood to visit her grandmother. The day after too, She visited her every
+        day, every week, every month, every year. She never saw a wolf, no even
+        a little fox. Go to{' '}
+        <Link href="#" inline icon="FileText" iconPosition="right">
+          Statistikkbanken
+        </Link>{' '}
+        to read more This is a story about Little Red Ridinghood. One day she
+        went into the wood to visit her grandmother. The day after too, She
+        visited her every day, every week, every month, every year. She never
+        saw a wolf, no even a little fox.
+      </BodyLong>
+
+      <h2>small without icon:</h2>
+      <BodyLong size="small">
+        This is a story about Little Red Ridinghood. One day she went into the
+        wood to visit her grandmother. The day after too, She visited her every
+        day, every week, every month, every year. She never saw a wolf, no even
+        a little fox. Go to{' '}
+        <Link href="#" inline>
+          Statistikkbanken
+        </Link>{' '}
+        to read more. This is a story about Little Red Ridinghood. One day she
+        went into the wood to visit her grandmother. The day after too, She
+        visited her every day, every week, every month, every year. She never
+        saw a wolf, no even a little fox.
+      </BodyLong>
 
-      <h2>medium icon right:</h2>      
-      <BodyLong>Gå til <Link href="#" inline icon="FileText" iconPosition="right">Statistikkbanken</Link> dersom du vil se flere tabeller </BodyLong>
+      <h2>small icon right:</h2>
+      <BodyLong size="small">
+        This is a story about Little Red Ridinghood. One day she went into the
+        wood to visit her grandmother. The day after too, She visited her every
+        day, every week, every month, every year. She never saw a wolf, no even
+        a little fox. Go to{' '}
+        <Link href="#" inline icon="FileText" iconPosition="right">
+          Statistikkbanken
+        </Link>{' '}
+        to read more This is a story about Little Red Ridinghood. One day she
+        went into the wood to visit her grandmother. The day after too, She
+        visited her every day, every week, every month, every year. She never
+        saw a wolf, no even a little fox.
+      </BodyLong>
+      {/*       
+      <h2>small without icon:</h2>      
+      <BodyLong size="small">This is a story about Little Red Ridinghood. One day she went into the wood to visit her grandmother. The day after too, She visited her every day, every week, every month, every year. She never saw a wolf, no even a little fox. Go to  <Link href="#" inline >Statistikkbanken</Link> to read more</BodyLong> */}
 
-      
       <h1>Standalone link in BodyLong</h1>
 
-      <h2>medium without icon:</h2>      
-      <BodyLong><Link href="#">Statistikkbanken</Link></BodyLong>
-
-      
-      <h2>small without icon:</h2>   
-      <BodyLong size='small'><Link href="#">Statistikkbanken</Link></BodyLong>
+      <h2>medium without icon:</h2>
+      <BodyLong>
+        <Link href="#">Statistikkbanken</Link>
+      </BodyLong>
+
+      <h2>medium icon left:</h2>
+      <BodyLong>
+        <Link href="#" icon="FileText" iconPosition="left">
+          Statistikkbanken
+        </Link>
+      </BodyLong>
+
+      <h2>medium icon right:</h2>
+      <BodyLong>
+        <Link href="#" icon="FileText" iconPosition="right">
+          Statistikkbanken
+        </Link>
+      </BodyLong>
+
+      <h2>small without icon:</h2>
+      <BodyLong size="small">
+        <Link href="#">Statistikkbanken</Link>
+      </BodyLong>
 
       <h2>small icon left:</h2>
-      <BodyLong size='small'><Link href="#" icon="FileText" iconPosition="left">Statistikkbanken </Link></BodyLong>
-      
-      <h2>medium icon left:</h2>      
-      <BodyLong><Link href="#" icon="FileText" iconPosition="left">Statistikkbanken</Link></BodyLong>
-
-      <h2>medium icon right:</h2>      
-      <BodyLong><Link href="#" icon="FileText" iconPosition="right">Statistikkbanken</Link></BodyLong>
+      <BodyLong size="small">
+        <Link href="#" icon="FileText" iconPosition="left">
+          Statistikkbanken{' '}
+        </Link>
+      </BodyLong>
 
       <h2>small icon right:</h2>
-      <BodyLong size='small'><Link href="#" icon="FileText" iconPosition="right">Statistikkbanken</Link></BodyLong>
-
-      <h2>Short text less then 24px:</h2>
-     <Link href="#" noUnderline>x</Link><br />
+      <BodyLong size="small">
+        <Link href="#" icon="FileText" iconPosition="right">
+          Statistikkbanken
+        </Link>
+      </BodyLong>
+
+      <h2>Short text less then 44px:</h2>
+      <Link href="#" noUnderline>
+        x
+      </Link>
+      <br />
     </>
   );
 };
diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.tsx b/libs/pxweb2-ui/src/lib/components/Link/Link.tsx
index 0b630501..2eee376f 100644
--- a/libs/pxweb2-ui/src/lib/components/Link/Link.tsx
+++ b/libs/pxweb2-ui/src/lib/components/Link/Link.tsx
@@ -8,22 +8,26 @@ interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   iconPosition?: 'left' | 'right';
   children: React.ReactNode;
   href: string;
-  inline?:boolean;
-  noUnderline?:boolean
+  inline?: boolean;
+  noUnderline?: boolean;
 }
 export function Link({
   children,
   href,
   icon,
   iconPosition,
-  inline=false,
-  noUnderline=false,
+  inline = false,
+  noUnderline = false,
   ...rest
 }: LinkProps) {
   return (
-    <a href={href} className={cl(classes.link, {
-      [classes.no_underline]: noUnderline,[classes.inline]: inline
-    })}   >
+    <a
+      href={href}
+      className={cl(classes.link, {
+        [classes.no_underline]: noUnderline,
+        [classes.inline]: inline,
+      })}
+    >
       {icon && iconPosition === 'left' && (
         <Icon iconName={icon} className=""></Icon>
       )}
@@ -34,13 +38,4 @@ export function Link({
     </a>
   );
 }
-
-// export const Link: React.FC<LinkProps> = ({ children, href }) => {
-//   return (
-//     <a href={href} className={styles.link}>
-//       {children}
-//     </a>
-//   );
-// };
-
 export default Link;

From c43eb4b710c02d910cfeba96abcf846ae594bd5b Mon Sep 17 00:00:00 2001
From: PerIngeVaaje <per.inge.vaaje@ssb.no>
Date: Thu, 21 Mar 2024 16:10:03 +0100
Subject: [PATCH 06/10] PXWEB2-46 added property for text size. if not given
 use style from parents.

Removed stories showing combination not to be used

Added classes for BosyLong medium /small. Should be moved to common text-styles class
---
 .../src/lib/components/Link/Link.module.scss  | 31 +++++++++-
 .../src/lib/components/Link/Link.stories.tsx  | 61 +++++++------------
 .../src/lib/components/Link/Link.tsx          |  8 ++-
 3 files changed, 59 insertions(+), 41 deletions(-)

diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss b/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss
index dfe8da62..ceee710d 100644
--- a/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss
+++ b/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss
@@ -6,12 +6,15 @@
   display: inline-flex;
   align-items: flex-start;
   gap: 2px;
-  padding: 22px;
+  padding-top: 12px;
+  padding-bottom: 12px;
   align-items: center;
 
   &:hover {
     text-decoration: none;
     background-color: var(--px-color-surface-subtle-hover);
+    // padding-top: 0px;
+    // padding-bottom: 0px;
   }
 
   &:focus {
@@ -40,3 +43,29 @@
   gap: 0px;
   padding: 0px;
 }
+
+.padding-small {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.padding-medium {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.bodylong-small {
+  font-family: PxWeb-font-400;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}
+
+.bodylong-medium {
+  font-family: PxWeb-font-400;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.75rem;
+}
diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx b/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx
index e1a7c9ae..f619d8b2 100644
--- a/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx
+++ b/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx
@@ -14,6 +14,7 @@ export const variants: Story = {
   args: {
     href: '#',
     children: 'En godt skrevet lenketekst',
+    size: 'medium',
   },
 };
 
@@ -67,7 +68,7 @@ export const inlineAndStandalone: StoryFn<typeof BodyLong> = () => {
         saw a wolf, no even a little fox.
       </BodyLong>
 
-      <h2>small icon right:</h2>
+      {/* <h2>small icon right:</h2>
       <BodyLong size="small">
         This is a story about Little Red Ridinghood. One day she went into the
         wood to visit her grandmother. The day after too, She visited her every
@@ -80,55 +81,39 @@ export const inlineAndStandalone: StoryFn<typeof BodyLong> = () => {
         went into the wood to visit her grandmother. The day after too, She
         visited her every day, every week, every month, every year. She never
         saw a wolf, no even a little fox.
-      </BodyLong>
-      {/*       
-      <h2>small without icon:</h2>      
-      <BodyLong size="small">This is a story about Little Red Ridinghood. One day she went into the wood to visit her grandmother. The day after too, She visited her every day, every week, every month, every year. She never saw a wolf, no even a little fox. Go to  <Link href="#" inline >Statistikkbanken</Link> to read more</BodyLong> */}
+      </BodyLong> */}
 
-      <h1>Standalone link in BodyLong</h1>
+      <h1>Standalone link </h1>
 
       <h2>medium without icon:</h2>
-      <BodyLong>
-        <Link href="#">Statistikkbanken</Link>
-      </BodyLong>
+      <Link href="#" size="medium">
+        Statistikkbanken
+      </Link>
 
       <h2>medium icon left:</h2>
-      <BodyLong>
-        <Link href="#" icon="FileText" iconPosition="left">
-          Statistikkbanken
-        </Link>
-      </BodyLong>
+      <Link href="#" icon="FileText" iconPosition="left" size="medium">
+        Statistikkbanken
+      </Link>
 
       <h2>medium icon right:</h2>
-      <BodyLong>
-        <Link href="#" icon="FileText" iconPosition="right">
-          Statistikkbanken
-        </Link>
-      </BodyLong>
+      <Link href="#" icon="FileText" iconPosition="right" size="medium">
+        Statistikkbanken
+      </Link>
 
       <h2>small without icon:</h2>
-      <BodyLong size="small">
-        <Link href="#">Statistikkbanken</Link>
-      </BodyLong>
+      <Link href="#" size="small">
+        Statistikkbanken
+      </Link>
 
-      <h2>small icon left:</h2>
-      <BodyLong size="small">
-        <Link href="#" icon="FileText" iconPosition="left">
-          Statistikkbanken{' '}
-        </Link>
-      </BodyLong>
+      {/* <h2>small icon left:</h2>
+      <Link href="#" icon="FileText" iconPosition="left" size="small">
+        Statistikkbanken{' '}
+      </Link>
 
       <h2>small icon right:</h2>
-      <BodyLong size="small">
-        <Link href="#" icon="FileText" iconPosition="right">
-          Statistikkbanken
-        </Link>
-      </BodyLong>
-
-      <h2>Short text less then 44px:</h2>
-      <Link href="#" noUnderline>
-        x
-      </Link>
+      <Link href="#" icon="FileText" iconPosition="right" size="small">
+        Statistikkbanken
+      </Link> */}
       <br />
     </>
   );
diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.tsx b/libs/pxweb2-ui/src/lib/components/Link/Link.tsx
index 2eee376f..5faac18a 100644
--- a/libs/pxweb2-ui/src/lib/components/Link/Link.tsx
+++ b/libs/pxweb2-ui/src/lib/components/Link/Link.tsx
@@ -4,6 +4,7 @@ import cl from 'clsx';
 import { Icon, IconProps } from '../Icon/Icon';
 
 interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  size?: 'small' | 'medium';
   icon?: IconProps['iconName'];
   iconPosition?: 'left' | 'right';
   children: React.ReactNode;
@@ -13,6 +14,7 @@ interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
 }
 export function Link({
   children,
+  size,
   href,
   icon,
   iconPosition,
@@ -26,13 +28,15 @@ export function Link({
       className={cl(classes.link, {
         [classes.no_underline]: noUnderline,
         [classes.inline]: inline,
+        [classes[`bodylong-${size}`]]: size,
+        [classes[`padding-${size}`]]: size,
       })}
     >
-      {icon && iconPosition === 'left' && (
+      {icon && iconPosition === 'left' && size === 'medium' && (
         <Icon iconName={icon} className=""></Icon>
       )}
       {children}
-      {icon && iconPosition === 'right' && (
+      {icon && iconPosition === 'right' && size === 'medium' && (
         <Icon iconName={icon} className=""></Icon>
       )}
     </a>

From 8634abfbd4aaf16be6afe9e457f633b8cbdfb895 Mon Sep 17 00:00:00 2001
From: PerIngeVaaje <per.inge.vaaje@ssb.no>
Date: Fri, 22 Mar 2024 08:42:57 +0100
Subject: [PATCH 07/10] PXWEB2-46 Should be allowed with icons for small
 standalone links. Redone some of last commit

---
 libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx | 4 ++--
 libs/pxweb2-ui/src/lib/components/Link/Link.tsx         | 7 ++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx b/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx
index f619d8b2..30711e2e 100644
--- a/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx
+++ b/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx
@@ -105,7 +105,7 @@ export const inlineAndStandalone: StoryFn<typeof BodyLong> = () => {
         Statistikkbanken
       </Link>
 
-      {/* <h2>small icon left:</h2>
+       <h2>small icon left:</h2>
       <Link href="#" icon="FileText" iconPosition="left" size="small">
         Statistikkbanken{' '}
       </Link>
@@ -113,7 +113,7 @@ export const inlineAndStandalone: StoryFn<typeof BodyLong> = () => {
       <h2>small icon right:</h2>
       <Link href="#" icon="FileText" iconPosition="right" size="small">
         Statistikkbanken
-      </Link> */}
+      </Link> 
       <br />
     </>
   );
diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.tsx b/libs/pxweb2-ui/src/lib/components/Link/Link.tsx
index 5faac18a..f756dc62 100644
--- a/libs/pxweb2-ui/src/lib/components/Link/Link.tsx
+++ b/libs/pxweb2-ui/src/lib/components/Link/Link.tsx
@@ -22,6 +22,7 @@ export function Link({
   noUnderline = false,
   ...rest
 }: LinkProps) {
+
   return (
     <a
       href={href}
@@ -29,14 +30,14 @@ export function Link({
         [classes.no_underline]: noUnderline,
         [classes.inline]: inline,
         [classes[`bodylong-${size}`]]: size,
-        [classes[`padding-${size}`]]: size,
+        [classes[`padding-${size}`]]: size
       })}
     >
-      {icon && iconPosition === 'left' && size === 'medium' && (
+      {icon && iconPosition === 'left' && (
         <Icon iconName={icon} className=""></Icon>
       )}
       {children}
-      {icon && iconPosition === 'right' && size === 'medium' && (
+      {icon && iconPosition === 'right' && (
         <Icon iconName={icon} className=""></Icon>
       )}
     </a>

From 3733b1d40705d515e593568ba47232939636b862 Mon Sep 17 00:00:00 2001
From: PerIngeVaaje <per.inge.vaaje@ssb.no>
Date: Tue, 2 Apr 2024 12:27:58 +0200
Subject: [PATCH 08/10] PXWEB-46 Gap between text and icon for standalone
 increased from 2 to 4px

---
 libs/pxweb2-ui/src/lib/components/Link/Link.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss b/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss
index ceee710d..b1fab693 100644
--- a/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss
+++ b/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss
@@ -5,7 +5,7 @@
   color: var(--px-color-text-action);
   display: inline-flex;
   align-items: flex-start;
-  gap: 2px;
+  gap: 4px;
   padding-top: 12px;
   padding-bottom: 12px;
   align-items: center;

From da96d09bbfed30575335fea6074935dc5aad6994 Mon Sep 17 00:00:00 2001
From: PerIngeVaaje <per.inge.vaaje@ssb.no>
Date: Wed, 3 Apr 2024 14:25:49 +0200
Subject: [PATCH 09/10] PXWEB2-46 Code celanup

---
 .../src/lib/components/Link/Link.module.scss  |  2 --
 .../src/lib/components/Link/Link.stories.tsx  | 23 +++----------------
 .../src/lib/components/Link/Link.tsx          |  3 +--
 3 files changed, 4 insertions(+), 24 deletions(-)

diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss b/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss
index b1fab693..1b26eac0 100644
--- a/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss
+++ b/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss
@@ -13,8 +13,6 @@
   &:hover {
     text-decoration: none;
     background-color: var(--px-color-surface-subtle-hover);
-    // padding-top: 0px;
-    // padding-bottom: 0px;
   }
 
   &:focus {
diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx b/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx
index 30711e2e..9d0a4da0 100644
--- a/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx
+++ b/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj, StoryFn } from '@storybook/react';
+
 import { Link } from './Link';
 import { BodyLong } from '../Typography/BodyLong/BodyLong';
 
@@ -68,21 +69,6 @@ export const inlineAndStandalone: StoryFn<typeof BodyLong> = () => {
         saw a wolf, no even a little fox.
       </BodyLong>
 
-      {/* <h2>small icon right:</h2>
-      <BodyLong size="small">
-        This is a story about Little Red Ridinghood. One day she went into the
-        wood to visit her grandmother. The day after too, She visited her every
-        day, every week, every month, every year. She never saw a wolf, no even
-        a little fox. Go to{' '}
-        <Link href="#" inline icon="FileText" iconPosition="right">
-          Statistikkbanken
-        </Link>{' '}
-        to read more This is a story about Little Red Ridinghood. One day she
-        went into the wood to visit her grandmother. The day after too, She
-        visited her every day, every week, every month, every year. She never
-        saw a wolf, no even a little fox.
-      </BodyLong> */}
-
       <h1>Standalone link </h1>
 
       <h2>medium without icon:</h2>
@@ -105,7 +91,7 @@ export const inlineAndStandalone: StoryFn<typeof BodyLong> = () => {
         Statistikkbanken
       </Link>
 
-       <h2>small icon left:</h2>
+      <h2>small icon left:</h2>
       <Link href="#" icon="FileText" iconPosition="left" size="small">
         Statistikkbanken{' '}
       </Link>
@@ -113,11 +99,8 @@ export const inlineAndStandalone: StoryFn<typeof BodyLong> = () => {
       <h2>small icon right:</h2>
       <Link href="#" icon="FileText" iconPosition="right" size="small">
         Statistikkbanken
-      </Link> 
+      </Link>
       <br />
     </>
   );
 };
-
-/* import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest'; */
diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.tsx b/libs/pxweb2-ui/src/lib/components/Link/Link.tsx
index f756dc62..a0888bd4 100644
--- a/libs/pxweb2-ui/src/lib/components/Link/Link.tsx
+++ b/libs/pxweb2-ui/src/lib/components/Link/Link.tsx
@@ -22,7 +22,6 @@ export function Link({
   noUnderline = false,
   ...rest
 }: LinkProps) {
-
   return (
     <a
       href={href}
@@ -30,7 +29,7 @@ export function Link({
         [classes.no_underline]: noUnderline,
         [classes.inline]: inline,
         [classes[`bodylong-${size}`]]: size,
-        [classes[`padding-${size}`]]: size
+        [classes[`padding-${size}`]]: size,
       })}
     >
       {icon && iconPosition === 'left' && (

From 00588cab4b24c5d26753ba599ea32240c60cfc81 Mon Sep 17 00:00:00 2001
From: Sjur Sutterud Sagen <sjur@sutterudsagen.no>
Date: Wed, 3 Apr 2024 14:33:28 +0200
Subject: [PATCH 10/10] PXWEB2-46-Rearrange imports in link.tsx

---
 libs/pxweb2-ui/src/lib/components/Link/Link.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.tsx b/libs/pxweb2-ui/src/lib/components/Link/Link.tsx
index a0888bd4..d4d282b2 100644
--- a/libs/pxweb2-ui/src/lib/components/Link/Link.tsx
+++ b/libs/pxweb2-ui/src/lib/components/Link/Link.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import classes from './Link.module.scss';
 import cl from 'clsx';
+
+import classes from './Link.module.scss';
 import { Icon, IconProps } from '../Icon/Icon';
 
 interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {