From 37827ba779aefc549b1894a9f81469b30520c599 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marianne=20R=C3=B8svik?= <marianne.rosvik@digdir.no>
Date: Thu, 23 May 2024 11:37:24 +0200
Subject: [PATCH] docs: sizing guidelines for Button (#2013)

Co-authored-by: Tobias Barsnes <tobias.barsnes@digdir.no>
Co-authored-by: Michael Marszalek <mimarz@gmail.com>
---
 .../react/src/components/Button/Button.mdx    | 23 ++++++++++---
 .../src/components/Button/Button.stories.tsx  | 34 +++++++++++++++++--
 2 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/components/Button/Button.mdx b/packages/react/src/components/Button/Button.mdx
index f098ff6660..8aaab305f4 100644
--- a/packages/react/src/components/Button/Button.mdx
+++ b/packages/react/src/components/Button/Button.mdx
@@ -69,6 +69,7 @@ Knappene kommer i to hovedfarger `first` og `second`. Hvis du har overstyrt farg
 
 ### Success
 
+**Denne fargen er deprecated, dvs den kommer til å bli fjernet så vi anbefaler å ikke bruke den**
 `Success`-fargen bruker vi bare når brukeren fullfører en prosess.
 
 <Canvas of={ButtonStories.Success} />
@@ -109,18 +110,30 @@ Som regel er det **venstre** som er den beste plasseringen, men det finnes unnta
 - Er det en knapp som sier “Start” med en høyrepekende pil, er det naturlig at pilen plasseres til høyre for teksten.
 - Er knappen fast plassert på høyre side av grensesnittet er det best at ikonet også er høyrestilt for teksten.
 
+<br />
+
 ### Størrelse på ikon
 
 Når du bruker ikon må du sette størrelsen på ikonet selv. Vi anbefaler å bruke disse størrelsene for [Aksel](https://aksel.nav.no/ikoner) sine ikoner:
 
-| Størrelse på Button | Aksel Ikon `fontSize` |
-| :------------------ | :-------------------- |
-| sm                  | 1rem                  |
-| md                  | 1.5rem                |
-| lg                  | 2rem                  |
+| Størrelse på knapp | Aksels ikon `fontSize` |
+| :----------------- | :--------------------- |
+| sm                 | 1rem                   |
+| md                 | 1.5rem                 |
+| lg                 | 2rem                   |
 
 <Canvas of={ButtonStories.Ikoner} />
 
+For knapper med kun ikon anbefaler vi å bruke større ikon:
+
+| Størrelse på knapp | Aksels ikon `fontSize` |
+| :----------------- | :--------------------- |
+| sm                 | 1.5rem                 |
+| md                 | 2rem                   |
+| lg                 | 2.5rem                 |
+
+<Canvas of={ButtonStories.Kunikoner} />
+
 <br />
 
 ### Full bredde
diff --git a/packages/react/src/components/Button/Button.stories.tsx b/packages/react/src/components/Button/Button.stories.tsx
index 17188f61c7..b1e5270e4e 100644
--- a/packages/react/src/components/Button/Button.stories.tsx
+++ b/packages/react/src/components/Button/Button.stories.tsx
@@ -374,23 +374,51 @@ export const Ikoner: StoryFn<typeof Button> = () => (
       size='sm'
     >
       <CogIcon fontSize='1rem' />
-      small
+      Small
     </Button>
     <Button
       variant='primary'
       size='md'
     >
       <CogIcon fontSize='1.5rem' />
-      medium
+      Medium
     </Button>
     <Button
       variant='primary'
       size='lg'
     >
       <CogIcon fontSize='2rem' />
-      large
+      Large
     </Button>
   </>
 );
 
 Ikoner.decorators = [stack];
+
+export const Kunikoner: StoryFn<typeof Button> = () => (
+  <>
+    <Button
+      icon={true}
+      variant='primary'
+      size='sm'
+    >
+      <CogIcon fontSize='1.5rem' />
+    </Button>
+    <Button
+      icon={true}
+      variant='primary'
+      size='md'
+    >
+      <CogIcon fontSize='2rem' />
+    </Button>
+    <Button
+      icon={true}
+      variant='primary'
+      size='lg'
+    >
+      <CogIcon fontSize='2.5rem' />
+    </Button>
+  </>
+);
+
+Kunikoner.decorators = [stack];