feat(Tabs): ✨ New Tabs Component

packages/react/src/components/Tabs/TabContent/TabContent.module.css

@@ -0,0 +1,3 @@
+.tabContent {
+  /* placeholder */
+}

packages/react/src/components/Tabs/TabContent/TabContent.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { Tabs } from '..';
+
+import { TabContent } from '.';
+
+describe('TabContent', () => {
+  test('renders ReactNodes as children when TabContents value is selected', () => {
+    render(
+      <Tabs defaultValue='value1'>
+        <TabContent value='value1'>
+          <div>content 1</div>
+        </TabContent>
+      </Tabs>,
+    );
+
+    const content = screen.queryByText('content 1');
+    expect(content).toBeInTheDocument();
+  });
+});

packages/react/src/components/Tabs/TabContent/TabContent.tsx

@@ -0,0 +1,33 @@
+import type { HTMLAttributes } from 'react';
+import React, { forwardRef, useContext } from 'react';
+import cn from 'classnames';
+
+import { TabsContext } from '../Tabs';
+
+import classes from './TabContent.module.css';
+
+export type TabContentProps = {
+  /** Value of the content to be dislpayed */
+  value?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'value'>;
+
+export const TabContent = forwardRef<HTMLDivElement, TabContentProps>(
+  ({ children, value, ...rest }, ref) => {
+    const tabs = useContext(TabsContext);
+    const active = value == tabs.value;
+
+    return (
+      <>
+        {active && (
+          <div
+            {...rest}
+            className={cn(classes.tabContent, rest.className)}
+            ref={ref}
+          >
+            {children}
+          </div>
+        )}
+      </>
+    );
+  },
+);

packages/react/src/components/Tabs/TabContent/index.ts

@@ -0,0 +1 @@
+export * from './TabContent';

packages/react/src/components/Tabs/TabItem/TabItem.module.css

@@ -0,0 +1,70 @@
+.tabItem {
+  --fdsc-icon-size: var(--fds-sizing-4);
+  --fdsc-typography-font-family: inherit;
+
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+  gap: var(--fds-spacing-1);
+  justify-content: center;
+  text-align: center;
+  align-items: center;
+  padding: var(--fds-spacing-2) var(--fds-spacing-3);
+  border: none;
+  border-bottom: var(--fds-border_width-active) solid transparent;
+  border-radius: 0;
+  background-color: transparent;
+  cursor: pointer;
+  color: var(--fds-semantic-text-neutral-default);
+  letter-spacing: var(--typography-default-letter-spacing);
+}
+
+.tabItem.small {
+  --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-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-7);
+
+  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;
+}
+
+.icon {
+  display: inline-block;
+  height: var(--fdsc-icon-size);
+  width: var(--fdsc-icon-size);
+}
+
+.tabItem:hover {
+  border-bottom: var(--fds-border_width-active) solid var(--fds-semantic-border-neutral-subtle);
+}
+
+.tabItem.isActive {
+  color: var(--fds-semantic-text-action-default);
+  border-bottom: var(--fds-border_width-active) solid var(--fds-semantic-border-action-default);
+}
+
+.tabItem:focus-visible {
+  background: var(--fds-semantic-border-focus-outline);
+  color: var(--fds-semantic-text-neutral-default);
+  border-bottom: var(--fds-border_width-active) solid var(--fds-semantic-border-focus-boxshadow);
+  outline: none;
+}

packages/react/src/components/Tabs/TabItem/TabItem.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { TabItemList } from '../TabItemList';
+import { Tabs } from '..';
+
+import { TabItem } from '.';
+
+const user = userEvent.setup();
+
+describe('TabItem', () => {
+  test('item renders with correct aria attributes', async () => {
+    render(
+      <Tabs defaultValue='value1'>
+        <TabItemList>
+          <TabItem value='value1'>Tab 1</TabItem>
+          <TabItem value='value2'>Tab 2</TabItem>
+        </TabItemList>
+      </Tabs>,
+    );
+
+    const tab = screen.getByRole('tab', { name: 'Tab 2' });
+    expect(tab).toHaveAttribute('aria-selected', 'false');
+    await user.click(tab);
+    expect(tab).toHaveAttribute('aria-selected', 'true');
+  });
+});

packages/react/src/components/Tabs/TabItem/TabItem.tsx

@@ -0,0 +1,48 @@
+import type { HTMLAttributes } from 'react';
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+
+import { RovingTabindexItem } from '../../../utility-components/RovingTabIndex';
+import { SvgIcon } from '../../SvgIcon';
+
+import classes from './TabItem.module.css';
+import { useTabItem } from './useTabItem';
+
+export type TabItemProps = {
+  /** Value of the TabItem */
+  value: string;
+  /** The Children */
+  children?: string;
+  /** Icon to display */
+  icon?: React.ReactNode;
+} & Omit<HTMLAttributes<HTMLButtonElement>, 'children' | 'value'>;
+
+export const TabItem = forwardRef<HTMLButtonElement, TabItemProps>(
+  (props, ref) => {
+    const { children, className, icon, ...rest } = props;
+    const { active, size = 'medium', buttonProps } = useTabItem(props);
+
+    return (
+      <RovingTabindexItem
+        {...rest}
+        {...buttonProps}
+        as={'button'}
+        className={cn(
+          classes.tabItem,
+          classes[size],
+          active && classes.isActive,
+          className,
+        )}
+        ref={ref}
+      >
+        {icon && (
+          <SvgIcon
+            svgIconComponent={icon}
+            className={classes.icon}
+          />
+        )}
+        {children}
+      </RovingTabindexItem>
+    );
+  },
+);

packages/react/src/components/Tabs/TabItem/index.ts

@@ -0,0 +1 @@
+export * from './TabItem';

packages/react/src/components/Tabs/TabItem/useTabItem.ts

@@ -0,0 +1,39 @@
+import { useContext, useId } from 'react';
+
+import { TabsContext } from '../Tabs';
+import type { ButtonProps } from '../../Button';
+
+import type { TabItemProps } from './TabItem';
+
+type UseTabItem = (props: TabItemProps) => {
+  active: boolean;
+  size?: 'small' | 'medium' | 'large';
+  buttonProps?: Pick<
+    ButtonProps,
+    'id' | 'onClick' | 'aria-checked' | 'aria-current'
+  >;
+};
+
+/** Handles props for `ToggleGroup.Item` in context with `ToggleGroup` and `RovingTabIndex` */
+export const useTabItem: UseTabItem = (props: TabItemProps) => {
+  const { ...rest } = props;
+  const tabs = useContext(TabsContext);
+  const itemValue =
+    props.value ?? (typeof props.children === 'string' ? props.children : '');
+  const active = tabs.value == itemValue;
+  const buttonId = `togglegroup-item-${useId()}`;
+
+  return {
+    ...rest,
+    active: active,
+    size: tabs?.size,
+    buttonProps: {
+      id: buttonId,
+      'aria-selected': active,
+      role: 'tab',
+      onClick: () => {
+        tabs.onChange?.(itemValue);
+      },
+    },
+  };
+};

packages/react/src/components/Tabs/TabItemList/TabItemList.module.css

@@ -0,0 +1,5 @@
+.tabItemList {
+  display: flex;
+  flex-direction: row;
+  border-bottom: var(--fds-border_width-default) solid var(--fds-semantic-border-neutral-subtle);
+}

packages/react/src/components/Tabs/TabItemList/TabItemList.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { TabItem } from '../TabItem';
+
+import { TabItemList } from '.';
+
+const user = userEvent.setup();
+
+describe('TabItemList', () => {
+  test('can navigate tabs with keyboard', async () => {
+    render(
+      <TabItemList>
+        <TabItem value='value1'>Tab 1</TabItem>
+        <TabItem value='value2'>Tab 2</TabItem>
+      </TabItemList>,
+    );
+
+    const tab1 = screen.getByRole('tab', { name: 'Tab 1' });
+    const tab2 = screen.getByRole('tab', { name: 'Tab 2' });
+    await user.tab();
+    expect(tab1).toHaveFocus();
+    await user.type(tab1, '{arrowright}');
+    expect(tab2).toHaveFocus();
+    await user.type(tab2, '{arrowleft}');
+    expect(tab1).toHaveFocus();
+  });
+});

packages/react/src/components/Tabs/TabItemList/TabItemList.tsx

@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from 'react';
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+
+import { RovingTabindexRoot } from '../../../utility-components/RovingTabIndex';
+
+import classes from './TabItemList.module.css';
+
+export const TabItemList = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ children, ...rest }, ref) => {
+  return (
+    <RovingTabindexRoot
+      {...rest}
+      role='tablist'
+      className={cn(classes.tabItemList, rest.className)}
+      ref={ref}
+    >
+      {children}
+    </RovingTabindexRoot>
+  );
+});

packages/react/src/components/Tabs/TabItemList/index.ts

@@ -0,0 +1 @@
+export * from './TabItemList';

packages/react/src/components/Tabs/Tabs.mdx

@@ -0,0 +1,44 @@
+import { Meta, Canvas, Story, Controls, Primary } from '@storybook/blocks';
+import { Information } from '../../../../../docs-components';
+import * as TabsStories from './Tabs.stories';
+
+<Meta of={TabsStories} />
+
+# Tabs
+
+<Information text='development' />
+
+Description of the Tabs component.
+
+<Primary />
+<Controls />
+
+## Bruk
+
+<Information text='token' />
+
+```tsx
+import '@digdir/design-system-tokens/brand/altinn/tokens.css'; // Importeres kun en gang i appen din.
+import { Tabs } from '@digdir/design-system-react';
+
+  <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>
+```
+
+## Icons only
+
+<Canvas of={TabsStories.IconsOnly} />
+
+## Controlled
+
+<Canvas of={TabsStories.Controlled} />

packages/react/src/components/Tabs/Tabs.module.css

@@ -0,0 +1,3 @@
+.tabs {
+  /* color: red; */
+}