refactor: Group TextInput stories into a shared sidebar folder with a shared Overview

Author: meissadia

src/components/TextInput/TextArea.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { TextArea } from './TextArea';
 
 const meta: Meta<typeof TextArea> = {
-  title: 'Components (Verified)/TextArea',
+  title: 'Components (Verified)/Text inputs/Text area',
   tags: ['autodocs'],
   component: TextArea,
   argTypes: {
@@ -17,55 +17,71 @@ type Story = StoryObj<typeof meta>;
 
 export const Enabled: Story = {
   args: {
-    placeholder: 'Enabled'
+    id: 'Enabled',
+    placeholder: 'Enabled',
+    name: 'Enabled'
   }
 };
 
 export const Hover: Story = {
   args: {
+    id: 'Hover',
     placeholder: 'Hover',
+    name: 'Hover',
     className: 'hover'
   }
 };
 
 export const Focus: Story = {
   args: {
+    id: 'Focus',
     placeholder: 'Focus',
+    name: 'Focus',
     className: 'focus'
   }
 };
 
 export const Disabled: Story = {
   args: {
+    id: 'Disabled',
     placeholder: 'Disabled',
+    name: 'Disabled',
     isDisabled: true
   }
 };
 
-export const FullWidth: Story = {
-  args: {
-    placeholder: 'Full width',
-    isFullWidth: true
-  }
-};
-
 export const Success: Story = {
   args: {
+    id: 'Success',
     placeholder: 'Success',
+    name: 'Success',
     className: 'a-text-input__success'
   }
 };
 
 export const Warning: Story = {
   args: {
+    id: 'Warning',
     placeholder: 'Warning',
+    name: 'Warning',
     className: 'a-text-input__warning'
   }
 };
 
 export const Error: Story = {
   args: {
+    id: 'Error',
     placeholder: 'Error',
+    name: 'Error',
     className: 'a-text-input__error'
   }
 };
+
+export const FullWidth: Story = {
+  args: {
+    id: 'Full width',
+    placeholder: 'Full width',
+    name: 'Full width',
+    isFullWidth: true
+  }
+};

src/components/TextInput/TextInput.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Button, Icon, TextInput } from '~/src/index';
 
 const meta: Meta<typeof TextInput> = {
-  title: 'Components (Verified)/Text inputs',
+  title: 'Components (Verified)/Text inputs/Text input',
   tags: ['autodocs'],
   component: TextInput,
   argTypes: {

src/components/TextInput/TextInputOverview.mdx

@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/addon-docs';
+import { List, Link, ListItem, Heading, Paragraph } from '~/src/index';
+
+<Meta title='Components (Verified)/Text inputs/Overview' />
+<Heading type='1'>Text inputs</Heading>
+
+<Paragraph>Text inputs allow the user to enter any combination of letters, numbers, or symbols. Text input fields can span single or multiple lines.</Paragraph>
+
+<Paragraph>Source: <Link href='https://cfpb.github.io/design-system/components/text-inputs'>https://cfpb.github.io/design-system/components/text-inputs</Link></Paragraph>
+
+<br />
+
+<div className="sb-unstyled">
+  <Heading type='4'>Types</Heading>
+  <List>
+    <ListItem><Link href='/?path=/docs/components-verified-text-inputs-text-area--overview'>Text area</Link></ListItem>
+    <ListItem><Link href='/?path=/docs/components-verified-text-inputs-text-input--overview'>Text input</Link></ListItem>
+  </List>
+</div>