From 41110895027868da94e6787c4b8365094fbba25a Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 2 Oct 2023 14:52:36 +0200
Subject: [PATCH] add sizing

---
 .../Tabs/TabItem/TabItem.module.css           | 26 ++++++++++++++++++-
 packages/react/src/components/Tabs/Tabs.mdx   | 17 ++++++++----
 .../src/components/Tabs/Tabs.stories.tsx      | 12 ++++-----
 3 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/packages/react/src/components/Tabs/TabItem/TabItem.module.css b/packages/react/src/components/Tabs/TabItem/TabItem.module.css
index 09382478c8..7d5dead840 100644
--- a/packages/react/src/components/Tabs/TabItem/TabItem.module.css
+++ b/packages/react/src/components/Tabs/TabItem/TabItem.module.css
@@ -1,5 +1,6 @@
 .tabItem {
   --fdsc-icon-size: var(--fds-sizing-4);
+  --fdsc-typography-font-family: inherit;
 
   padding: var(--fds-spacing-2) var(--fds-spacing-3);
   border: none;
@@ -7,7 +8,6 @@
   color: var(--fds-semantic-text-neutral-default);
   box-sizing: border-box;
   cursor: pointer;
-  font-family: inherit;
   display: flex;
   flex-direction: row;
   gap: var(--fds-spacing-1);
@@ -18,6 +18,30 @@
   border-radius: 0;
 }
 
+.tabItem.small {
+  --fdsc-icon-size: var(--fds-sizing-4);
+
+  font: var(--fds-typography-interactive-small);
+  font-family: var(--fdsc-typography-font-family);
+  padding: var(--fds-spacing-2) var(--fds-spacing-4);
+}
+
+.tabItem.medium {
+  --fdsc-icon-size: var(--fds-sizing-5);
+
+  font: var(--fds-typography-interactive-medium);
+  font-family: var(--fdsc-typography-font-family);
+  padding: var(--fds-spacing-3) var(--fds-spacing-5);
+}
+
+.tabItem.large {
+  --fdsc-icon-size: var(--fds-sizing-5);
+
+  font: var(--fds-typography-interactive-large);
+  font-family: var(--fdsc-typography-font-family);
+  padding: var(--fds-spacing-4) var(--fds-spacing-6);
+}
+
 .tabItem svg {
   overflow: visible;
 }
diff --git a/packages/react/src/components/Tabs/Tabs.mdx b/packages/react/src/components/Tabs/Tabs.mdx
index 29fdd602bb..6a5eee4c11 100644
--- a/packages/react/src/components/Tabs/Tabs.mdx
+++ b/packages/react/src/components/Tabs/Tabs.mdx
@@ -21,13 +21,20 @@ Description of the Tabs component.
 import '@digdir/design-system-tokens/brand/altinn/tokens.css'; // Importeres kun en gang i appen din.
 import { Tabs } from '@digdir/design-system-react';
 
-<Tabs>You are using the Tabs component!</Tabs>;
+  <Tabs
+    defaultValue='value1'
+  >
+    <Tabs.List>
+      <Tabs.Tab value='value1' >Tab 1</Tabs.Tab>
+      <Tabs.Tab value='value2' >Tab 2</Tabs.Tab>
+      <Tabs.Tab value='value3' >Tab 3</Tabs.Tab>
+    </Tabs.List>
+    <Tabs.Content value='value1'>content 1</Tabs.Content>
+    <Tabs.Content value='value2'>content 2</Tabs.Content>
+    <Tabs.Content value='value3'>content 3</Tabs.Content>
+  </Tabs>
 ```
 
-## Composed
-
-<Canvas of={TabsStories.Composed} />
-
 ## Icons only
 
 <Canvas of={TabsStories.IconsOnly} />
diff --git a/packages/react/src/components/Tabs/Tabs.stories.tsx b/packages/react/src/components/Tabs/Tabs.stories.tsx
index 8ee60d4a63..e6be2f31ce 100644
--- a/packages/react/src/components/Tabs/Tabs.stories.tsx
+++ b/packages/react/src/components/Tabs/Tabs.stories.tsx
@@ -33,16 +33,14 @@ export default {
 
 // Simple story
 // First story is the one displayed by <Preview /> and used for <Controls />
-export const Preview: Story = {
-  args: {
-    children: 'You created the Tabs component!',
-  },
-};
 
 // Function story
 // Use this story for listing our different variants, patterns with other components or examples usage with useState
-export const Composed: StoryFn<typeof Tabs> = () => (
-  <Tabs defaultValue='value1'>
+export const Preview: StoryFn<typeof Tabs> = (args) => (
+  <Tabs
+    {...args}
+    defaultValue='value1'
+  >
     <Tabs.List>
       <Tabs.Tab
         value='value1'