From fd7af6b1889bed6744e5073650d6dcf5ab833a5f Mon Sep 17 00:00:00 2001
From: PerIngeVaaje <per.inge.vaaje@ssb.no>
Date: Wed, 14 Feb 2024 15:22:31 +0100
Subject: [PATCH 01/16] PXWEB2-34 Added option for icon left and icon right.
 Added stories. Changed display from inline-felx to flex for .medium class

---
 .../lib/components/Button/Button.module.scss  |  2 +-
 .../lib/components/Button/Button.stories.tsx  | 23 +++++++++++++++++++
 .../src/lib/components/Button/Button.tsx      |  9 +++++++-
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss b/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
index ab491da6..5b79b9c5 100644
--- a/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
+++ b/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
@@ -102,7 +102,7 @@
 
 .medium {
   /* Layout */
-  display: inline-flex;
+  display: flex;
   padding: 0.75rem 1.25rem;
   justify-content: center;
   align-items: center;
diff --git a/libs/pxweb2-ui/src/lib/components/Button/Button.stories.tsx b/libs/pxweb2-ui/src/lib/components/Button/Button.stories.tsx
index 7b4395f5..63c3f729 100644
--- a/libs/pxweb2-ui/src/lib/components/Button/Button.stories.tsx
+++ b/libs/pxweb2-ui/src/lib/components/Button/Button.stories.tsx
@@ -127,6 +127,29 @@ export const Variants: StoryFn<typeof Button> = () => {
         onClick={test}
         aria-label={'Button with icon'}
       ></Button>
+      <br />
+      Primary icon left
+      <br />
+      <Button
+        variant="primary"
+        onClick={test}
+        iconPosition="left"
+        icon="Pencil"
+      >
+        Button
+      </Button>
+      <br />
+      Primary icon right
+      <br />
+      <Button
+        variant="primary"
+        onClick={test}
+        icon="Pencil"
+        iconPosition="right"
+      >
+        Button
+      </Button>
+      <br />
     </>
   );
 };
diff --git a/libs/pxweb2-ui/src/lib/components/Button/Button.tsx b/libs/pxweb2-ui/src/lib/components/Button/Button.tsx
index 3cf9746d..6a821273 100644
--- a/libs/pxweb2-ui/src/lib/components/Button/Button.tsx
+++ b/libs/pxweb2-ui/src/lib/components/Button/Button.tsx
@@ -8,11 +8,13 @@ export interface ButtonProps
   size?: 'small' | 'medium';
   variant: 'primary' | 'secondary' | 'tertiary';
   icon?: IconProps['iconName'];
+  iconPosition?: 'left' | 'right';
   children?: string;
 }
 
 export function Button({
   icon,
+  iconPosition = 'left',
   variant,
   size = 'medium',
   children,
@@ -25,8 +27,13 @@ export function Button({
       })}
       {...rest}
     >
-      {icon && <Icon iconName={icon}></Icon>}
+      {icon && iconPosition === 'left' && (
+        <Icon iconName={icon} className=""></Icon>
+      )}
       {children}
+      {icon && iconPosition === 'right' && (
+        <Icon iconName={icon} className=""></Icon>
+      )}
     </button>
   );
 }

From 43a9136375339004143ac97cdff0efeed6d3d684 Mon Sep 17 00:00:00 2001
From: PerIngeVaaje <per.inge.vaaje@ssb.no>
Date: Thu, 15 Feb 2024 11:22:46 +0100
Subject: [PATCH 02/16] PXWEB2-34 Changed alert message in stories

---
 libs/pxweb2-ui/src/lib/components/Button/Button.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/pxweb2-ui/src/lib/components/Button/Button.stories.tsx b/libs/pxweb2-ui/src/lib/components/Button/Button.stories.tsx
index 63c3f729..f6767008 100644
--- a/libs/pxweb2-ui/src/lib/components/Button/Button.stories.tsx
+++ b/libs/pxweb2-ui/src/lib/components/Button/Button.stories.tsx
@@ -9,7 +9,7 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 
 function test() {
-  alert('test');
+  alert('Button clicked');
 }
 
 export const ButtonSettings: Story = {

From be8ad6a8e82e576ff81b2cda8679c04240148dab Mon Sep 17 00:00:00 2001
From: PerIngeVaaje <per.inge.vaaje@ssb.no>
Date: Thu, 15 Feb 2024 14:36:11 +0100
Subject: [PATCH 03/16] PXWEB2-34 changed icon for icon left and right on
 button in story

---
 .../src/lib/components/Button/Button.stories.tsx         | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/libs/pxweb2-ui/src/lib/components/Button/Button.stories.tsx b/libs/pxweb2-ui/src/lib/components/Button/Button.stories.tsx
index f6767008..7c7349d3 100644
--- a/libs/pxweb2-ui/src/lib/components/Button/Button.stories.tsx
+++ b/libs/pxweb2-ui/src/lib/components/Button/Button.stories.tsx
@@ -130,12 +130,7 @@ export const Variants: StoryFn<typeof Button> = () => {
       <br />
       Primary icon left
       <br />
-      <Button
-        variant="primary"
-        onClick={test}
-        iconPosition="left"
-        icon="Pencil"
-      >
+      <Button variant="primary" onClick={test} iconPosition="left" icon="Clock">
         Button
       </Button>
       <br />
@@ -144,7 +139,7 @@ export const Variants: StoryFn<typeof Button> = () => {
       <Button
         variant="primary"
         onClick={test}
-        icon="Pencil"
+        icon="Clock"
         iconPosition="right"
       >
         Button

From 1b96e24ecb99d4c5832f6fdac61d36c6edd8d2c3 Mon Sep 17 00:00:00 2001
From: PerIngeVaaje <per.inge.vaaje@ssb.no>
Date: Wed, 21 Feb 2024 15:44:49 +0100
Subject: [PATCH 04/16] PXWEB2-34 -Set border-radius to 4px for small button on
 hover and active

-Use box-shadow instead of border to get "inset border" which will not increase button compares to button without border, Set Spread to 2px to get ticker "border",

-Set display to inline-flex as in Figma spec
---
 .../lib/components/Button/Button.module.scss  | 33 +++++++++----------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss b/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
index 5b79b9c5..d5a08890 100644
--- a/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
+++ b/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
@@ -7,6 +7,7 @@
   font-style: normal;
   font-weight: 500;
   line-height: 1.5rem; /* 150% */
+  border: none;
 
   &:disabled {
     cursor: not-allowed;
@@ -24,16 +25,7 @@
   color: var(--px-color-text-on-action);
   border-radius: var(--px-border-radius-full);
   background: var(--px-color-surface-action);
-
-  // Override browser default styles
-  border: none;
-  border-style: none;
-
-  &:hover {
-    border-radius: var(--px-border-radius-medium);
-  }
   &:active {
-    border-radius: var(--px-border-radius-medium);
     background: var(--px-color-surface-action-active);
   }
   &:disabled {
@@ -47,16 +39,14 @@
 
   color: var(--px-color-text-action);
   border-radius: var(--px-border-radius-full);
-  border: 1.5px solid var(--px-color-border-action);
+  box-shadow: 0 0 0 2px var(--px-color-border-action) inset;
 
   &:hover {
     color: var(--px-color-text-on-action-subtle);
-    border-radius: var(--px-border-radius-medium);
     background: var(--px-color-surface-subtle-hover);
   }
   &:active {
     color: var(--px-color-text-on-action);
-    border-radius: var(--px-border-radius-medium);
     background: var(--px-color-surface-action-active);
   }
   &:disabled {
@@ -68,19 +58,16 @@
 .tertiary {
   // Override browser defaults styles
   background-color: inherit;
-
   color: var(--px-color-text-action);
   border: none;
   border-radius: var(--px-border-radius-full);
 
   &:hover {
     color: var(--px-color-text-on-action-subtle);
-    border-radius: var(--px-border-radius-medium);
     background: var(--px-color-surface-subtle-hover);
   }
   &:active {
     color: var(--px-color-text-on-action);
-    border-radius: var(--px-border-radius-medium);
     background: var(--px-color-surface-action-active);
   }
   &:disabled {
@@ -90,7 +77,7 @@
 }
 
 .small {
-  display: flex;
+  display: inline-flex;
   width: 2rem;
   height: 2rem;
   padding: 0.75rem;
@@ -98,15 +85,27 @@
   align-items: center;
   gap: 0.5rem;
   flex-shrink: 0;
+  &:hover {
+    border-radius: var(--px-border-radius-small);
+  }
+  &:active {
+    border-radius: var(--px-border-radius-small);
+  }
 }
 
 .medium {
   /* Layout */
-  display: flex;
+  display: inline-flex;
   padding: 0.75rem 1.25rem;
   justify-content: center;
   align-items: center;
   gap: 0.5rem;
+  &:hover {
+    border-radius: var(--px-border-radius-medium);
+  }
+  &:active {
+    border-radius: var(--px-border-radius-medium);
+  }
 }
 
 .iconOnly {

From 6df5742ab01cf1eb184bcd72e109b53edcb2fd22 Mon Sep 17 00:00:00 2001
From: PerIngeVaaje <per.inge.vaaje@ssb.no>
Date: Thu, 22 Feb 2024 12:29:23 +0100
Subject: [PATCH 05/16] PXWEB2-34 Box shadow decreased from 2 to 1.5 px Padding
 top/bottom 0.375 rem (6px) for small icons with text Removed fixed with for
 small icons with text.

---
 libs/pxweb2-ui/src/lib/components/Button/Button.module.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss b/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
index d5a08890..c8910a07 100644
--- a/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
+++ b/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
@@ -39,7 +39,7 @@
 
   color: var(--px-color-text-action);
   border-radius: var(--px-border-radius-full);
-  box-shadow: 0 0 0 2px var(--px-color-border-action) inset;
+  box-shadow: 0 0 0 1.5px var(--px-color-border-action) inset;
 
   &:hover {
     color: var(--px-color-text-on-action-subtle);
@@ -78,9 +78,9 @@
 
 .small {
   display: inline-flex;
-  width: 2rem;
+  // width: 2rem;
   height: 2rem;
-  padding: 0.75rem;
+  padding: 0.375rem 0.75rem;
   justify-content: center;
   align-items: center;
   gap: 0.5rem;

From a20213aa3efc927d593be38e856cda243878e216 Mon Sep 17 00:00:00 2001
From: PerIngeVaaje <per.inge.vaaje@ssb.no>
Date: Thu, 22 Feb 2024 14:58:05 +0100
Subject: [PATCH 06/16] PXWEB2-34 Separate classes for icon-only. Small button
 should have 4px(0.25rem) for left and right padding when having icon without
 text .

---
 .../src/lib/components/Button/Button.module.scss   |  7 +++++--
 .../pxweb2-ui/src/lib/components/Button/Button.tsx | 14 +++++++++++---
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss b/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
index c8910a07..d8ea51d5 100644
--- a/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
+++ b/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
@@ -78,7 +78,6 @@
 
 .small {
   display: inline-flex;
-  // width: 2rem;
   height: 2rem;
   padding: 0.375rem 0.75rem;
   justify-content: center;
@@ -108,6 +107,10 @@
   }
 }
 
-.iconOnly {
+.iconOnlyMedium {
   padding: 0.75rem;
 }
+
+.iconOnlySmall {
+  padding: 0.75rem 0.25rem;
+}
diff --git a/libs/pxweb2-ui/src/lib/components/Button/Button.tsx b/libs/pxweb2-ui/src/lib/components/Button/Button.tsx
index 6a821273..392a8440 100644
--- a/libs/pxweb2-ui/src/lib/components/Button/Button.tsx
+++ b/libs/pxweb2-ui/src/lib/components/Button/Button.tsx
@@ -22,9 +22,17 @@ export function Button({
 }: ButtonProps) {
   return (
     <button
-      className={cl(classes.button, classes[size], classes[variant], {
-        [classes.iconOnly]: !children && icon,
-      })}
+      className={cl(
+        classes.button,
+        classes[size],
+        classes[variant],
+        {
+          [classes.iconOnlyMedium]: !children && icon && size === 'medium',
+        },
+        {
+          [classes.iconOnlySmall]: !children && icon && size === 'small',
+        }
+      )}
       {...rest}
     >
       {icon && iconPosition === 'left' && (

From 4cd0c6f1e0335e1d805420c7c73634a344e8dc8e Mon Sep 17 00:00:00 2001
From: PerIngeVaaje <per.inge.vaaje@ssb.no>
Date: Tue, 27 Feb 2024 10:45:07 +0100
Subject: [PATCH 07/16] PXWEB2-34 Set font-size to 14 px for small buttons

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

diff --git a/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss b/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
index d8ea51d5..0d837706 100644
--- a/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
+++ b/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
@@ -78,6 +78,7 @@
 
 .small {
   display: inline-flex;
+  font-size: 0.875rem;
   height: 2rem;
   padding: 0.375rem 0.75rem;
   justify-content: center;

From cb4c8fe3130d258d14ab41f295f3dffd81653999 Mon Sep 17 00:00:00 2001
From: PerIngeVaaje <per.inge.vaaje@ssb.no>
Date: Tue, 27 Feb 2024 11:29:07 +0100
Subject: [PATCH 08/16] PXWEB2-34 Ser line-height to 20px for small buttons

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

diff --git a/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss b/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
index 0d837706..9249a900 100644
--- a/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
+++ b/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
@@ -79,6 +79,7 @@
 .small {
   display: inline-flex;
   font-size: 0.875rem;
+  line-height: 1.25rem;
   height: 2rem;
   padding: 0.375rem 0.75rem;
   justify-content: center;

From c6a0d677b7531f7d9dd8ebcfaf7845eb1dfedc61 Mon Sep 17 00:00:00 2001
From: PerIngeVaaje <per.inge.vaaje@ssb.no>
Date: Wed, 14 Feb 2024 15:22:31 +0100
Subject: [PATCH 09/16] PXWEB2-34 Added option for icon left and icon right.
 Added stories. Changed display from inline-felx to flex for .medium class

---
 .../lib/components/Button/Button.module.scss  |  2 +-
 .../lib/components/Button/Button.stories.tsx  | 23 +++++++++++++++++++
 .../src/lib/components/Button/Button.tsx      |  9 +++++++-
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss b/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
index ab491da6..5b79b9c5 100644
--- a/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
+++ b/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
@@ -102,7 +102,7 @@
 
 .medium {
   /* Layout */
-  display: inline-flex;
+  display: flex;
   padding: 0.75rem 1.25rem;
   justify-content: center;
   align-items: center;
diff --git a/libs/pxweb2-ui/src/lib/components/Button/Button.stories.tsx b/libs/pxweb2-ui/src/lib/components/Button/Button.stories.tsx
index 7b4395f5..63c3f729 100644
--- a/libs/pxweb2-ui/src/lib/components/Button/Button.stories.tsx
+++ b/libs/pxweb2-ui/src/lib/components/Button/Button.stories.tsx
@@ -127,6 +127,29 @@ export const Variants: StoryFn<typeof Button> = () => {
         onClick={test}
         aria-label={'Button with icon'}
       ></Button>
+      <br />
+      Primary icon left
+      <br />
+      <Button
+        variant="primary"
+        onClick={test}
+        iconPosition="left"
+        icon="Pencil"
+      >
+        Button
+      </Button>
+      <br />
+      Primary icon right
+      <br />
+      <Button
+        variant="primary"
+        onClick={test}
+        icon="Pencil"
+        iconPosition="right"
+      >
+        Button
+      </Button>
+      <br />
     </>
   );
 };
diff --git a/libs/pxweb2-ui/src/lib/components/Button/Button.tsx b/libs/pxweb2-ui/src/lib/components/Button/Button.tsx
index 3cf9746d..6a821273 100644
--- a/libs/pxweb2-ui/src/lib/components/Button/Button.tsx
+++ b/libs/pxweb2-ui/src/lib/components/Button/Button.tsx
@@ -8,11 +8,13 @@ export interface ButtonProps
   size?: 'small' | 'medium';
   variant: 'primary' | 'secondary' | 'tertiary';
   icon?: IconProps['iconName'];
+  iconPosition?: 'left' | 'right';
   children?: string;
 }
 
 export function Button({
   icon,
+  iconPosition = 'left',
   variant,
   size = 'medium',
   children,
@@ -25,8 +27,13 @@ export function Button({
       })}
       {...rest}
     >
-      {icon && <Icon iconName={icon}></Icon>}
+      {icon && iconPosition === 'left' && (
+        <Icon iconName={icon} className=""></Icon>
+      )}
       {children}
+      {icon && iconPosition === 'right' && (
+        <Icon iconName={icon} className=""></Icon>
+      )}
     </button>
   );
 }

From dacd6fa592710308fb3e2df5a891027cf1139dd1 Mon Sep 17 00:00:00 2001
From: PerIngeVaaje <per.inge.vaaje@ssb.no>
Date: Thu, 15 Feb 2024 11:22:46 +0100
Subject: [PATCH 10/16] PXWEB2-34 Changed alert message in stories

---
 libs/pxweb2-ui/src/lib/components/Button/Button.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/pxweb2-ui/src/lib/components/Button/Button.stories.tsx b/libs/pxweb2-ui/src/lib/components/Button/Button.stories.tsx
index 63c3f729..f6767008 100644
--- a/libs/pxweb2-ui/src/lib/components/Button/Button.stories.tsx
+++ b/libs/pxweb2-ui/src/lib/components/Button/Button.stories.tsx
@@ -9,7 +9,7 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 
 function test() {
-  alert('test');
+  alert('Button clicked');
 }
 
 export const ButtonSettings: Story = {

From 188b0edd856abcba7190bda54bf6794df999815b Mon Sep 17 00:00:00 2001
From: PerIngeVaaje <per.inge.vaaje@ssb.no>
Date: Thu, 15 Feb 2024 14:36:11 +0100
Subject: [PATCH 11/16] PXWEB2-34 changed icon for icon left and right on
 button in story

---
 .../src/lib/components/Button/Button.stories.tsx         | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/libs/pxweb2-ui/src/lib/components/Button/Button.stories.tsx b/libs/pxweb2-ui/src/lib/components/Button/Button.stories.tsx
index f6767008..7c7349d3 100644
--- a/libs/pxweb2-ui/src/lib/components/Button/Button.stories.tsx
+++ b/libs/pxweb2-ui/src/lib/components/Button/Button.stories.tsx
@@ -130,12 +130,7 @@ export const Variants: StoryFn<typeof Button> = () => {
       <br />
       Primary icon left
       <br />
-      <Button
-        variant="primary"
-        onClick={test}
-        iconPosition="left"
-        icon="Pencil"
-      >
+      <Button variant="primary" onClick={test} iconPosition="left" icon="Clock">
         Button
       </Button>
       <br />
@@ -144,7 +139,7 @@ export const Variants: StoryFn<typeof Button> = () => {
       <Button
         variant="primary"
         onClick={test}
-        icon="Pencil"
+        icon="Clock"
         iconPosition="right"
       >
         Button

From 3382d2aeeab29c1029c357743a90d9b9249f5b00 Mon Sep 17 00:00:00 2001
From: PerIngeVaaje <per.inge.vaaje@ssb.no>
Date: Wed, 21 Feb 2024 15:44:49 +0100
Subject: [PATCH 12/16] PXWEB2-34 -Set border-radius to 4px for small button on
 hover and active

-Use box-shadow instead of border to get "inset border" which will not increase button compares to button without border, Set Spread to 2px to get ticker "border",

-Set display to inline-flex as in Figma spec
---
 .../lib/components/Button/Button.module.scss  | 33 +++++++++----------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss b/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
index 5b79b9c5..d5a08890 100644
--- a/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
+++ b/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
@@ -7,6 +7,7 @@
   font-style: normal;
   font-weight: 500;
   line-height: 1.5rem; /* 150% */
+  border: none;
 
   &:disabled {
     cursor: not-allowed;
@@ -24,16 +25,7 @@
   color: var(--px-color-text-on-action);
   border-radius: var(--px-border-radius-full);
   background: var(--px-color-surface-action);
-
-  // Override browser default styles
-  border: none;
-  border-style: none;
-
-  &:hover {
-    border-radius: var(--px-border-radius-medium);
-  }
   &:active {
-    border-radius: var(--px-border-radius-medium);
     background: var(--px-color-surface-action-active);
   }
   &:disabled {
@@ -47,16 +39,14 @@
 
   color: var(--px-color-text-action);
   border-radius: var(--px-border-radius-full);
-  border: 1.5px solid var(--px-color-border-action);
+  box-shadow: 0 0 0 2px var(--px-color-border-action) inset;
 
   &:hover {
     color: var(--px-color-text-on-action-subtle);
-    border-radius: var(--px-border-radius-medium);
     background: var(--px-color-surface-subtle-hover);
   }
   &:active {
     color: var(--px-color-text-on-action);
-    border-radius: var(--px-border-radius-medium);
     background: var(--px-color-surface-action-active);
   }
   &:disabled {
@@ -68,19 +58,16 @@
 .tertiary {
   // Override browser defaults styles
   background-color: inherit;
-
   color: var(--px-color-text-action);
   border: none;
   border-radius: var(--px-border-radius-full);
 
   &:hover {
     color: var(--px-color-text-on-action-subtle);
-    border-radius: var(--px-border-radius-medium);
     background: var(--px-color-surface-subtle-hover);
   }
   &:active {
     color: var(--px-color-text-on-action);
-    border-radius: var(--px-border-radius-medium);
     background: var(--px-color-surface-action-active);
   }
   &:disabled {
@@ -90,7 +77,7 @@
 }
 
 .small {
-  display: flex;
+  display: inline-flex;
   width: 2rem;
   height: 2rem;
   padding: 0.75rem;
@@ -98,15 +85,27 @@
   align-items: center;
   gap: 0.5rem;
   flex-shrink: 0;
+  &:hover {
+    border-radius: var(--px-border-radius-small);
+  }
+  &:active {
+    border-radius: var(--px-border-radius-small);
+  }
 }
 
 .medium {
   /* Layout */
-  display: flex;
+  display: inline-flex;
   padding: 0.75rem 1.25rem;
   justify-content: center;
   align-items: center;
   gap: 0.5rem;
+  &:hover {
+    border-radius: var(--px-border-radius-medium);
+  }
+  &:active {
+    border-radius: var(--px-border-radius-medium);
+  }
 }
 
 .iconOnly {

From a4894a0ae6db967828d583aa95c8dc3fcce0982e Mon Sep 17 00:00:00 2001
From: PerIngeVaaje <per.inge.vaaje@ssb.no>
Date: Thu, 22 Feb 2024 12:29:23 +0100
Subject: [PATCH 13/16] PXWEB2-34 Box shadow decreased from 2 to 1.5 px Padding
 top/bottom 0.375 rem (6px) for small icons with text Removed fixed with for
 small icons with text.

---
 libs/pxweb2-ui/src/lib/components/Button/Button.module.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss b/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
index d5a08890..c8910a07 100644
--- a/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
+++ b/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
@@ -39,7 +39,7 @@
 
   color: var(--px-color-text-action);
   border-radius: var(--px-border-radius-full);
-  box-shadow: 0 0 0 2px var(--px-color-border-action) inset;
+  box-shadow: 0 0 0 1.5px var(--px-color-border-action) inset;
 
   &:hover {
     color: var(--px-color-text-on-action-subtle);
@@ -78,9 +78,9 @@
 
 .small {
   display: inline-flex;
-  width: 2rem;
+  // width: 2rem;
   height: 2rem;
-  padding: 0.75rem;
+  padding: 0.375rem 0.75rem;
   justify-content: center;
   align-items: center;
   gap: 0.5rem;

From 21b6a7f87ba591e775afd9d4d9e978890170fe33 Mon Sep 17 00:00:00 2001
From: PerIngeVaaje <per.inge.vaaje@ssb.no>
Date: Thu, 22 Feb 2024 14:58:05 +0100
Subject: [PATCH 14/16] PXWEB2-34 Separate classes for icon-only. Small button
 should have 4px(0.25rem) for left and right padding when having icon without
 text .

---
 .../src/lib/components/Button/Button.module.scss   |  7 +++++--
 .../pxweb2-ui/src/lib/components/Button/Button.tsx | 14 +++++++++++---
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss b/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
index c8910a07..d8ea51d5 100644
--- a/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
+++ b/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
@@ -78,7 +78,6 @@
 
 .small {
   display: inline-flex;
-  // width: 2rem;
   height: 2rem;
   padding: 0.375rem 0.75rem;
   justify-content: center;
@@ -108,6 +107,10 @@
   }
 }
 
-.iconOnly {
+.iconOnlyMedium {
   padding: 0.75rem;
 }
+
+.iconOnlySmall {
+  padding: 0.75rem 0.25rem;
+}
diff --git a/libs/pxweb2-ui/src/lib/components/Button/Button.tsx b/libs/pxweb2-ui/src/lib/components/Button/Button.tsx
index 6a821273..392a8440 100644
--- a/libs/pxweb2-ui/src/lib/components/Button/Button.tsx
+++ b/libs/pxweb2-ui/src/lib/components/Button/Button.tsx
@@ -22,9 +22,17 @@ export function Button({
 }: ButtonProps) {
   return (
     <button
-      className={cl(classes.button, classes[size], classes[variant], {
-        [classes.iconOnly]: !children && icon,
-      })}
+      className={cl(
+        classes.button,
+        classes[size],
+        classes[variant],
+        {
+          [classes.iconOnlyMedium]: !children && icon && size === 'medium',
+        },
+        {
+          [classes.iconOnlySmall]: !children && icon && size === 'small',
+        }
+      )}
       {...rest}
     >
       {icon && iconPosition === 'left' && (

From 0d90d4a54af6c45ac528bd929cf72173c8ac9540 Mon Sep 17 00:00:00 2001
From: PerIngeVaaje <per.inge.vaaje@ssb.no>
Date: Tue, 27 Feb 2024 10:45:07 +0100
Subject: [PATCH 15/16] PXWEB2-34 Set font-size to 14 px for small buttons

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

diff --git a/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss b/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
index d8ea51d5..0d837706 100644
--- a/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
+++ b/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
@@ -78,6 +78,7 @@
 
 .small {
   display: inline-flex;
+  font-size: 0.875rem;
   height: 2rem;
   padding: 0.375rem 0.75rem;
   justify-content: center;

From 10e2806cbf454b99eb3b4e6c639439d9bf9432ee Mon Sep 17 00:00:00 2001
From: PerIngeVaaje <per.inge.vaaje@ssb.no>
Date: Tue, 27 Feb 2024 11:29:07 +0100
Subject: [PATCH 16/16] PXWEB2-34 Ser line-height to 20px for small buttons

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

diff --git a/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss b/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
index 0d837706..9249a900 100644
--- a/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
+++ b/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
@@ -79,6 +79,7 @@
 .small {
   display: inline-flex;
   font-size: 0.875rem;
+  line-height: 1.25rem;
   height: 2rem;
   padding: 0.375rem 0.75rem;
   justify-content: center;