add jsdoc and cleanup some comments

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

@@ -1,4 +1,3 @@
-// tests for TabContent
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 

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

@@ -7,9 +7,9 @@ import { TabsContext } from '../Tabs';
 import classes from './TabContent.module.css';
 
 export type TabContentProps = {
-  /** Description of what myProp does in the component */
+  /** Value of the content to be dislpayed */
   value?: string;
-} & HTMLAttributes<HTMLDivElement>;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'value'>;
 
 export const TabContent = forwardRef<HTMLDivElement, TabContentProps>(
   ({ children, value, ...rest }, ref) => {

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

@@ -1,12 +1,12 @@
-// tests for TabItem
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { TabItem } from '.';
 import { TabItemList } from '../TabItemList';
 import { Tabs } from '..';
 
+import { TabItem } from '.';
+
 const user = userEvent.setup();
 
 describe('TabItem', () => {

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

@@ -1,5 +1,3 @@
-// react component that takes a list of tabitems and selects one of them as active. uses the RovingTabindex pattern.
-
 import type { HTMLAttributes } from 'react';
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
@@ -11,9 +9,11 @@ import classes from './TabItem.module.css';
 import { useTabItem } from './useTabItem';
 
 export type TabItemProps = {
-  /** Description of what myProp does in the component */
+  /** Value of the TabItem */
   value: string;
+  /** The Children */
   children?: string;
+  /** Icon to display */
   icon?: React.ReactNode;
 } & Omit<HTMLAttributes<HTMLButtonElement>, 'children' | 'value'>;
 

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

@@ -1,5 +1,3 @@
-// tests for TabItemList
-
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';

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

@@ -1,5 +1,3 @@
-// react component that takes a list of tabitems and selects one of them as active. uses the RovingTabindex pattern.
-
 import type { HTMLAttributes } from 'react';
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
@@ -8,23 +6,18 @@ import { RovingTabindexRoot } from '../../../utility-components/RovingTabIndex';
 
 import classes from './TabItemList.module.css';
 
-export type TabItemListProps = {
-  /** Description of what myProp does in the component */
-  value?: string;
-  defaultValue?: string;
-} & HTMLAttributes<HTMLDivElement>;
-
-export const TabItemList = forwardRef<HTMLDivElement, TabItemListProps>(
-  ({ children, ...rest }, ref) => {
-    return (
-      <RovingTabindexRoot
-        {...rest}
-        role='tablist'
-        className={cn(classes.tabItemList, rest.className)}
-        ref={ref}
-      >
-        {children}
-      </RovingTabindexRoot>
-    );
-  },
-);
+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/Tabs.stories.tsx

@@ -2,9 +2,10 @@ 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';
 
+import { Tabs } from '.';
+
 const icon = (
   <svg
     viewBox='0 0 24 24'

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

@@ -5,13 +5,31 @@ import cn from 'classnames';
 import classes from './Tabs.module.css';
 
 export type TabsProps = {
-  /** Description of what myProp does in the component */
+  /** Controlled state for `Tabs` component. */
   value?: string;
+  /** Default value. */
   defaultValue?: string;
+  /** Callback with selected `TabItem` `value` */
   onChange?: (value: string) => void;
+  /** Changes items size and paddings */
   size?: 'small' | 'medium' | 'large';
 } & Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'>;
 
+/** `Tabs` component.
+ * @example
+ * ```tsx
+ * <Tabs onChange={(value) => console.log(value)}>
+ *   <Tabs.List>
+ *     <Tabs.Item value='1'>Tab 1</Tabs.Item>
+ *     <Tabs.Item value='2'>Tab 2</Tabs.Item>
+ *     <Tabs.Item value='3'>Tab 3</Tabs.Item>
+ *   </Tabs.List>
+ *   <Tabs.Content value='1'>content 1</Tabs.Content>
+ *   <Tabs.Content value='2'>content 2</Tabs.Content>
+ *   <Tabs.Content value='3'>content 3</Tabs.Content>
+ * </Tabs>
+ * ```
+ */
 export type TabsContextProps = {
   value?: string;
   defaultValue?: string;

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

@@ -5,7 +5,6 @@ import { TabContent } from './TabContent';
 
 export type { TabsProps } from './Tabs';
 export type { TabItemProps } from './TabItem';
-export type { TabItemListProps } from './TabItemList';
 export type { TabContentProps } from './TabContent';
 
 type TabsComponent = typeof TabsRoot & {