add sizing

digdir · Oct 2, 2023 · 4111089 · 4111089
1 parent c242756
commit 4111089
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 13 deletions.
diff --git a/packages/react/src/components/Tabs/TabItem/TabItem.module.css b/packages/react/src/components/Tabs/TabItem/TabItem.module.css
@@ -1,13 +1,13 @@
 .tabItem {
   --fdsc-icon-size: var(--fds-sizing-4);
+  --fdsc-typography-font-family: inherit;
 
   padding: var(--fds-spacing-2) var(--fds-spacing-3);
   border: none;
   background-color: transparent;
   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
@@ -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
@@ -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'