Tab component

src/components/Buttons/button.tsx

@@ -2,11 +2,12 @@ import {
   forwardRef,
   JSX,
   type ButtonHTMLAttributes,
+  type MouseEvent,
   type ReactNode,
 } from 'react';
 import { Icon } from '../Icon/icon';
 
-interface ButtonProperties extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProperties extends ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * Button contents
    */
@@ -26,7 +27,7 @@ interface ButtonProperties extends ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * Optional click handler
    */
-  onClick?: () => void;
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
   /**
    * Button should be styled as a link?
    */

src/components/Tabs/tab.scss

@@ -0,0 +1,40 @@
+@use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/utilities' as *;
+
+.tablist {
+  display: flex;
+  border-bottom: 1px solid var(--gray-40);
+  // margin-bottom: -1px;
+  // position: relative;
+  // z-index: 10;
+
+  button.tab {
+    @include heading-4($has-margin-bottom: false);
+    padding: math.div(math.div($grid-gutter-width, 3), $base-font-size-px) + rem 
+             math.div($grid-gutter-width, $base-font-size-px) + rem;
+    margin-bottom: -1px;
+    border: 1px solid transparent;
+
+    &:focus:not(:focus-visible) {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline-offset: -1px;
+    }
+
+    &--active {
+      color: var(--black);
+      background: var(--gray-5);
+      text-decoration: none;
+      pointer-events: none;
+      border-color: var(--gray-40);
+      border-bottom-color: transparent;
+    } 
+  }
+}
+
+.tab-panel {
+  // border-top: 1px solid var(--gray-40);
+}

src/components/Tabs/tab.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { Heading, Tab, TabList, TabPanel } from '~/src/index';
+
+const meta: Meta<typeof Tab> = {
+  title: 'Components (Draft)/Tabs',
+  tags: ['autodocs'],
+  component: Tab,
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: 'Tabs',
+    render: ()  => {
+      const [activeTab, setActiveTab] = useState('one')
+      const onClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setActiveTab(event.currentTarget.value);
+      }
+      return (
+        <>
+          <TabList>
+            <Tab 
+              id='one' 
+              value='one'
+              isActive={activeTab === 'one'} 
+              iconLeft='list' 
+              label='Tab one' 
+              onClick={onClick}/>
+            <Tab 
+              id='two' 
+              value='two'
+              isActive={activeTab === 'two'} 
+              iconLeft='chart' 
+              label='Tab two' 
+              onClick={onClick}/>
+            <Tab 
+              id='three' 
+              value='three'
+              isActive={activeTab === 'three'} 
+              iconLeft='map' 
+              label='Tab three' 
+              onClick={onClick}/>
+          </TabList>
+          <TabPanel id={activeTab} style={{padding: '30px'}}>
+            <Heading type='4'>Panel {activeTab}</Heading>
+          </TabPanel>
+        </>
+      )
+    }
+};
+

src/components/Tabs/tab.test.tsx

@@ -0,0 +1,20 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { Tab, TabList } from './tab';
+
+describe('<Tabs />', () => {
+
+  it('renders tabs', () => {
+    render(
+      <TabList>
+        <Tab id='one'>One tab</Tab>
+        <Tab id='two'>Second tab</Tab>
+      </TabList>
+    );
+
+    const tabs = screen.getByRole('tablist');
+    expect(tabs).toBeInTheDocument();
+  });
+
+
+});

src/components/Tabs/tab.tsx

@@ -0,0 +1,99 @@
+import classnames from 'classnames';
+import type { HTMLAttributes, ReactNode, MouseEvent } from 'react';
+import type { JSXElement } from '../../types/jsx-element';
+import { Button } from '../Buttons/button';
+import type { ButtonProperties } from '../Buttons/button';
+import './tab.scss';
+
+export interface TabProperties extends Omit<ButtonProperties, 'appearance' | 'size' | 'isLink'> {
+  /**
+   * Id for the tab. Allows it to be associated with its content panel.
+   */
+  id: string;
+  /**
+   * Any additional classes for the tab
+   */
+  className?: string;
+  /**
+   * Whether this is the active tab
+   */
+  isActive?: boolean;
+  /**
+   * Any children to render within the tab. Allows you to wrap any node with tab tag
+   */
+  children?: ReactNode;
+  /**
+   * Optional click handler
+   */
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+
+export const Tab = ({
+  id,
+  className,
+  isActive,
+  onClick = () => null,
+  children,
+  ...properties
+}: TabProperties): JSXElement => {
+  const cname = classnames('tab', className, {'tab--active': isActive});
+
+  return (
+     <Button
+      role='tab'
+      onClick={onClick}
+      isLink
+      className={cname}
+      id={`tab-${id}`}
+      aria-controls={`tabpanel-${id}`}
+      aria-selected={isActive}
+      tabIndex={isActive ? -1 : 0}
+      {...properties}>
+        {children}
+      </Button>
+  );
+};
+
+export interface TabListProperties extends HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  children?: ReactNode;
+}
+
+export const TabList = ({
+  className,
+  children,
+  ...properties
+}: TabListProperties): JSXElement => {
+  const cname = classnames('tablist', className);
+
+  return (
+    <div role="tablist" className={cname} {...properties}>
+      {children}
+    </div>
+  );
+};
+
+export interface TabPanelProperties extends HTMLAttributes<HTMLDivElement> {
+  id: string;
+  className?: string;
+  children?: ReactNode;
+}
+
+export const TabPanel = ({
+  id,
+  className,
+  children,
+  ...properties
+}: TabPanelProperties): JSXElement => {
+  const cname = classnames('tab-panel', className);
+
+  return (
+    <div role='tabpanel'
+         id={`tabpanel-${id}`}
+         aria-labelledby={`tab-${id}`}
+         className={cname}
+         {...properties}>
+      {children}
+    </div>
+  );
+};

src/index.ts

@@ -44,6 +44,7 @@ export { SelectMulti } from './components/Select/select-multi';
 export { SelectSingle } from './components/Select/select-single';
 export { default as SkipNav } from './components/SkipNav/skip-nav';
 export { Summary } from './components/Summaries/summary';
+export { Tab, TabList, TabPanel } from './components/Tabs/tab';
 export { Table } from './components/Table/table';
 export { TextArea } from './components/TextInput/text-area';
 export { TextInput } from './components/TextInput/text-input';