update icon sizing and add story

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

Hide file tree

Showing 4 changed files with 57 additions and 8 deletions.
diff --git a/packages/react/src/components/Tabs/TabItem/TabItem.module.css b/packages/react/src/components/Tabs/TabItem/TabItem.module.css
@@ -19,23 +19,23 @@
 }
 
 .tabItem.small {
-  --fdsc-icon-size: var(--fds-sizing-4);
+  --fdsc-icon-size: var(--fds-sizing-5);
 
   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);
+  --fdsc-icon-size: var(--fds-sizing-6);
 
   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);
+  --fdsc-icon-size: var(--fds-sizing-7);
 
   font: var(--fds-typography-interactive-large);
   font-family: var(--fdsc-typography-font-family);

diff --git a/packages/react/src/components/Tabs/Tabs.mdx b/packages/react/src/components/Tabs/Tabs.mdx
@@ -38,3 +38,7 @@ import { Tabs } from '@digdir/design-system-react';
 ## Icons only
 
 <Canvas of={TabsStories.IconsOnly} />
+
+## Controlled
+
+<Canvas of={TabsStories.Controlled} />
diff --git a/packages/react/src/components/Tabs/Tabs.stories.tsx b/packages/react/src/components/Tabs/Tabs.stories.tsx
@@ -1,8 +1,9 @@
-import React from 'react';
-import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import type { Meta, StoryFn } from '@storybook/react';
 import * as icons from '@navikt/aksel-icons';
 
 import { Tabs } from '.';
+import { Button } from '../Button';
 
 const icon = (
   <svg
@@ -24,8 +25,6 @@ const AkselIcon2 = icons.NewspaperFillIcon;
 const AkselIcon3 = icons.BrailleIcon;
 const AkselIcon4 = icons.BackpackFillIcon;
 
-type Story = StoryObj<typeof Tabs>;
-
 export default {
   title: 'Felles/Tabs',
   component: Tabs,
@@ -88,3 +87,46 @@ export const IconsOnly: StoryFn<typeof Tabs> = () => (
     <Tabs.Content value='value3'>content 3</Tabs.Content>
   </Tabs>
 );
+
+export const Controlled: StoryFn<typeof Tabs> = () => {
+  const [value, setValue] = useState('value1');
+
+  return (
+    <>
+      <Button
+        size='small'
+        onClick={() => setValue('value3')}
+      >
+        Choose Tab 3
+      </Button>
+      <Tabs
+        value={value}
+        onChange={setValue}
+      >
+        <Tabs.List>
+          <Tabs.Tab
+            value='value1'
+            icon={icon}
+          >
+            Tab 1
+          </Tabs.Tab>
+          <Tabs.Tab
+            value='value2'
+            icon={<AkselIcon2 />}
+          >
+            Tab 2
+          </Tabs.Tab>
+          <Tabs.Tab
+            value='value3'
+            icon={<AkselIcon4 />}
+          >
+            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>
+    </>
+  );
+};
diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx
@@ -22,7 +22,10 @@ export type TabsContextProps = {
 export const TabsContext = createContext<TabsContextProps>({});
 
 export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
-  ({ children, value, defaultValue, onChange, size, ...rest }, ref) => {
+  (
+    { children, value, defaultValue, onChange, size = 'medium', ...rest },
+    ref,
+  ) => {
     const isControlled = value !== undefined;
     const [uncontrolledValue, setUncontrolledValue] = useState<
       string | undefined