feat: Restructure components to live in their own separate folders

src/components/Banner.tsx → src/components/Banner/Banner.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames';
-import type { JSXElement } from '../types/jsxElement';
+import type { JSXElement } from '../../types/jsxElement';
+import { Tagline } from '../Tagline/Tagline';
 import './Banner.less';
-import { Tagline } from './Tagline';
 
 interface BannerProperties {
   isHorizontal?: boolean;

src/components/BannerLanguageLink.tsx → src/components/Banner/BannerLanguageLink.tsx

@@ -1,4 +1,4 @@
-import type { JSXElement } from '../types/jsxElement';
+import type { JSXElement } from '../../types/jsxElement';
 
 export type LanguageDefinition = Record<
   string | symbol,

src/components/Checkbox.stories.tsx → src/components/Checkbox/Checkbox.stories.tsx

@@ -15,7 +15,7 @@ type Story = StoryObj<typeof meta>;
 
 export const DefaultCheckbox: Story = {
   args: { id: 'default', name: 'default', label: 'Default checkbox' }
-}
+};
 
 export const CheckboxWithHelper: Story = {
   args: {
@@ -25,7 +25,7 @@ export const CheckboxWithHelper: Story = {
     label: 'Checkbox With Helper',
     helperText: 'This is optional helper text for the checkbox'
   }
-}
+};
 
 export const LargeCheckbox: Story = {
   args: {
@@ -35,7 +35,7 @@ export const LargeCheckbox: Story = {
     label: 'Large Checkbox',
     isLarge: true
   }
-}
+};
 
 export const LargeCheckboxWithHelper: Story = {
   args: {
@@ -46,4 +46,4 @@ export const LargeCheckboxWithHelper: Story = {
     isLarge: true,
     helperText: 'This is optional helper text for the large checkbox'
   }
-}
+};

src/components/Dropdown.stories.tsx → src/components/Dropdown/Dropdown.stories.tsx

@@ -22,7 +22,7 @@ type Story = StoryObj<typeof meta>;
 
 const LAST_ELEMENT = -1;
 
-export const options = [
+export const MockOptions = [
   { value: 'value1', label: 'Option A' },
   { value: 'value2', label: 'Option B' },
   { value: 'value3', label: 'Option C' }
@@ -32,32 +32,33 @@ export const DefaultDropdown: Story = {
   args: {
     label: 'Default Dropdown',
     id: 'dropdown',
-    options
+    options: MockOptions
   }
 };
 
 export const WithDefaultValue: Story = {
-  args:{
-  ...DefaultDropdown.args,
-  id: 'with-default',
-  defaultValue: options.at(LAST_ELEMENT),
-  label: 'With Default Value'
+  args: {
+    ...DefaultDropdown.args,
+    id: 'with-default',
+    defaultValue: MockOptions.at(LAST_ELEMENT),
+    label: 'With Default Value'
   }
 };
 
 export const Disabled: Story = {
-  args:{
-  ...DefaultDropdown.args,
-  id: 'disabled',
-  label: 'Disabled',
-  isDisabled: true
-}};
+  args: {
+    ...DefaultDropdown.args,
+    id: 'disabled',
+    label: 'Disabled',
+    isDisabled: true
+  }
+};
 
 export const MultiSelect: Story = {
   args: {
     ...DefaultDropdown.args,
     options: [
-      ...options,
+      ...MockOptions,
       {
         value: 'long',
         label:
@@ -74,14 +75,14 @@ export const MultiSelectWithDefaultValue: Story = {
   args: {
     ...DefaultDropdown.args,
     options: [
-      ...options,
+      ...MockOptions,
       {
         value: 'long',
         label:
           'Multiselect options can also contain long words that will be wrapped like supercalifragilisticexpialidocious'
       }
     ],
-    defaultValue: [options[0]],
+    defaultValue: [MockOptions[0]],
     id: 'multi',
     isMulti: true,
     label: 'Multi-select'

src/components/Dropdown.test.tsx → src/components/Dropdown/Dropdown.test.tsx

@@ -2,7 +2,7 @@ import '@testing-library/jest-dom';
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Dropdown } from './Dropdown';
-import { options } from './Dropdown.stories';
+import { MockOptions } from './Dropdown.stories';
 
 /**
  * TODO
@@ -28,10 +28,16 @@ const placeholder = 'HOLD MY PLACE';
  * Single select
  */
 describe('Default Dropdown', () => {
-  const defaultProps = { id, label, options, onSelect, placeholder };
+  const defaultProps = {
+    id,
+    label,
+    options: MockOptions,
+    onSelect,
+    placeholder
+  };
 
   it('Renders default labels correctly', () => {
-    render(<Dropdown {...{ id, options, onSelect }} />);
+    render(<Dropdown {...{ id, options: MockOptions, onSelect }} />);
     expect(screen.queryByText(label)).not.toBeInTheDocument();
     expect(screen.getByText('Dropdown w/ Multi-select')).toBeInTheDocument();
     expect(screen.getByText('Select...')).toBeInTheDocument();
@@ -83,10 +89,10 @@ describe('Default Dropdown', () => {
         {...{
           id,
           label,
-          options,
+          options: MockOptions,
           onSelect,
           placeholder,
-          defaultValue: options.at(-1)
+          defaultValue: MockOptions.at(-1)
         }}
       />
     );
@@ -106,7 +112,7 @@ describe('Multi-select Dropdown', () => {
   const multiProperties = {
     id,
     label,
-    options,
+    options: MockOptions,
     onSelect,
     placeholder,
     isMulti: true
@@ -180,7 +186,7 @@ describe('Multi-select Dropdown', () => {
     const user = userEvent.setup();
 
     // All options selected by default
-    render(<Dropdown {...multiProperties} defaultValue={options} />);
+    render(<Dropdown {...multiProperties} defaultValue={MockOptions} />);
 
     // Verify pills displayed
     const afterSelection = screen.queryAllByRole('listitem');
@@ -206,7 +212,7 @@ describe('Multi-select Dropdown', () => {
       <Dropdown
         {...{
           ...multiProperties,
-          defaultValue: [options[1], options[2]]
+          defaultValue: [MockOptions[1], MockOptions[2]]
         }}
       />
     );

src/components/Dropdown.tsx → src/components/Dropdown/Dropdown.tsx

@@ -10,8 +10,8 @@ import type {
   SelectInstance
 } from 'react-select';
 import Select, { createFilter } from 'react-select';
+import { Label } from '../Label/Label';
 import { DropdownPills } from './DropdownPills';
-import { Label } from './Label';
 
 export interface SelectOption {
   value: string;

src/components/DropdownPills.test.tsx → src/components/Dropdown/DropdownPills.test.tsx

@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom';
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { options } from './Dropdown.stories';
+import { MockOptions } from './Dropdown.stories';
 import { DropdownPill, DropdownPills, onCloser } from './DropdownPills';
 
 describe('DropdownPill', () => {
@@ -26,7 +26,7 @@ describe('DropdownPills', () => {
   it('Calls onChange when pill is clicked', async () => {
     const user = userEvent.setup();
     const onChange = vi.fn();
-    const selected = options[0];
+    const selected = MockOptions[0];
 
     render(<DropdownPills selected={[selected]} onChange={onChange} isMulti />);
 
@@ -48,7 +48,7 @@ describe('DropdownPills', () => {
   it('(Keyboard) Calls onChange when pill is activated', async () => {
     const user = userEvent.setup();
     const onChange = vi.fn();
-    const selected = options[0];
+    const selected = MockOptions[0];
 
     render(<DropdownPills selected={[selected]} onChange={onChange} isMulti />);
 

src/components/DropdownPills.tsx → src/components/Dropdown/DropdownPills.tsx

@@ -1,8 +1,8 @@
 import type { ReactEventHandler } from 'react';
 import type { PropsValue } from 'react-select';
+import { Icon } from '../Icon/Icon';
+import { Label } from '../Label/Label';
 import type { SelectOption } from './Dropdown';
-import { Icon } from './Icon';
-import { Label } from './Label';
 
 /**
  * Event Handlers

src/components/Expandable.stories.tsx → src/components/Expandable/Expandable.stories.tsx

@@ -1,7 +1,7 @@
 import { expect } from '@storybook/jest';
 import type { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
-import { sleep } from '../utils/sleep';
+import { sleep } from '../../utils/sleep';
 import { Expandable } from './Expandable';
 
 const meta: Meta<typeof Expandable> = {
@@ -56,7 +56,7 @@ export const TestExpandCollapse: Story = {
     // Wait for initialization
     await sleep(waitTime);
 
-    const heading = canvas.getByText(OpenOnLoad.args.header);
+    const heading = canvas.getByText(OpenOnLoad.args?.header ?? '');
     expect(heading).toBeInTheDocument();
 
     // Content wrapper collapsed

src/components/Expandable.tsx → src/components/Expandable/Expandable.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import type React from 'react';
 import type { ReactNode } from 'react';
 import { useEffect } from 'react';
-import { Icon } from './Icon';
+import { Icon } from '../Icon/Icon';
 
 export interface ExpandableProperties {
   header: string;

src/components/Expandable/ExpandableGroup.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Expandable } from './Expandable';
+import { ExpandableGroup } from './ExpandableGroup';
+
+const meta: Meta<typeof ExpandableGroup> = {
+  component: ExpandableGroup,
+  argTypes: {
+    accordion: { control: 'boolean' }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+### CFPB DS - ExpandableGroup component
+
+Source: https://cfpb.github.io/design-system/components/expandables
+`
+      }
+    }
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const Content = ({
+  accordion
+}: {
+  accordion: boolean | undefined;
+}): JSX.Element => {
+  const linkPath = `/?path=/story/components-expandablegroup--${
+    accordion ? 'accordion' : 'default'
+  }`;
+
+  return (
+    <div>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque ipsa
+      voluptatibus soluta nobis unde quisquam temporibus magnam debitis quidem.
+      Ducimus ratione corporis nesciunt earum vel est quaerat blanditiis dolore
+      ipsa?&nbsp;
+      <a href={linkPath}>Lorem link</a>
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: arguments_ => (
+    <ExpandableGroup {...arguments_}>
+      {['A', 'B', 'C'].map(value => (
+        <Expandable
+          key={`item-${value}`}
+          header={`Expandable ${value}`}
+          inAccordion={arguments_.accordion}
+        >
+          <Content accordion={arguments_.accordion} />
+        </Expandable>
+      ))}
+    </ExpandableGroup>
+  ),
+  args: {
+    groupId: 'DefaultGroup'
+  }
+};
+
+export const Accordion: Story = {
+  ...Default,
+  args: {
+    accordion: true,
+    groupId: 'AccordionGroup'
+  }
+};