fix: resolved merge conflicts

cfpb · Dec 4, 2023 · 365d1a6 · 365d1a6
2 parents c2e24ee + e37d2e9
commit 365d1a6
Showing 1 changed file with 27 additions and 47 deletions.
diff --git a/src/components/TextInput/TextInput.stories.tsx b/src/components/TextInput/TextInput.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Button, TextInput } from '~/src/index';
+import { Button, Icon, TextInput } from '~/src/index';
 
 const meta: Meta<typeof TextInput> = {
   title: 'Components (Draft)/Text inputs',
@@ -16,33 +16,30 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    id: 'Default',
     name: 'Default',
+    id: 'Default',
     value: 'Default',
     type: 'text'
   }
 };
 
 export const Hover: Story = {
-  render: _arguments => <TextInput {..._arguments} className='hover' />,
-  name: 'Hover',
   args: {
     ...Default.args,
     value: 'Hover'
-  }
+  },
+  render: _arguments => <TextInput {..._arguments} className='hover' />
 };
 
 export const Focus: Story = {
-  render: _arguments => <TextInput {..._arguments} className='focus' />,
-  name: 'Focus',
   args: {
     ...Default.args,
     value: 'Focus'
-  }
+  },
+  render: _arguments => <TextInput {..._arguments} className='focus' />
 };
 
 export const Disabled: Story = {
-  name: 'Disabled',
   args: {
     ...Default.args,
     value: 'Disabled',
@@ -51,7 +48,6 @@ export const Disabled: Story = {
 };
 
 export const Success: Story = {
-  name: 'Success',
   args: {
     ...Default.args,
     value: 'Success',
@@ -60,7 +56,6 @@ export const Success: Story = {
 };
 
 export const Warning: Story = {
-  name: 'Warning',
   args: {
     ...Default.args,
     value: 'Warning',
@@ -69,7 +64,6 @@ export const Warning: Story = {
 };
 
 export const Error: Story = {
-  name: 'Error',
   args: {
     ...Default.args,
     value: 'Error',
@@ -87,6 +81,11 @@ export const FullWidth: Story = {
 };
 
 export const WithButton: Story = {
+  name: 'Text input (with button)',
+  args: {
+    ...Default.args,
+    value: ''
+  },
   render: _arguments => (
     <div className='o-form__input-w-btn'>
       <div className='o-form__input-w-btn_input-container'>
@@ -96,65 +95,46 @@ export const WithButton: Story = {
         <Button label='Search' />
       </div>
     </div>
-  ),
-  name: 'Text input (with button)',
-  args: {
-    ...Default.args,
-    value: ''
-  }
+  )
 };
 
 export const WithButtonInsideText: Story = {
+  name: 'Button inside text input',
+  args: {
+    ...Default.args,
+    value:
+      "This is some really long text to make sure that the button doesn't overlap the content in such a way that this input becomes unusable."
+  },
   render: _arguments => (
     <div className='m-btn-inside-input'>
       <TextInput {..._arguments} />
       <button className='a-btn a-btn__link'>
-        <svg
-          xmlns='http://www.w3.org/2000/svg'
-          className='cf-icon-svg cf-icon-svg__error'
-          viewBox='0 0 12 19'
-        >
-          <path d='M11.383 13.644A1.03 1.03 0 0 1 9.928 15.1L6 11.172 2.072 15.1a1.03 1.03 0 1 1-1.455-1.456l3.928-3.928L.617 5.79a1.03 1.03 0 1 1 1.455-1.456L6 8.261l3.928-3.928a1.03 1.03 0 0 1 1.455 1.456L7.455 9.716z' />
-        </svg>
-        <span className='u-visually-hidden'>Clear</span>
+        <Icon name='error' />
       </button>
     </div>
-  ),
-  name: 'Button inside text input',
+  )
+};
+
+export const WithButtonInsideButton: Story = {
+  name: 'Button inside text input with another button',
   args: {
     ...Default.args,
     value:
       "This is some really long text to make sure that the button doesn't overlap the content in such a way that this input becomes unusable."
-  }
-};
-
-export const WithButtonInsideButton: Story = {
+  },
   render: _arguments => (
     <div className='o-form__input-w-btn'>
       <div className='o-form__input-w-btn_input-container'>
         <div className='m-btn-inside-input'>
           <TextInput {..._arguments} />
           <button className='a-btn a-btn__link'>
-            <svg
-              xmlns='http://www.w3.org/2000/svg'
-              className='cf-icon-svg cf-icon-svg__error'
-              viewBox='0 0 12 19'
-            >
-              <path d='M11.383 13.644A1.03 1.03 0 0 1 9.928 15.1L6 11.172 2.072 15.1a1.03 1.03 0 1 1-1.455-1.456l3.928-3.928L.617 5.79a1.03 1.03 0 1 1 1.455-1.456L6 8.261l3.928-3.928a1.03 1.03 0 0 1 1.455 1.456L7.455 9.716z' />
-            </svg>
-            <span className='u-visually-hidden'>Clear</span>
+            <Icon name='error' />
           </button>
         </div>
       </div>
       <div className='o-form__input-w-btn_btn-container'>
         <button className='a-btn'>Search</button>
       </div>
     </div>
-  ),
-  name: 'Button inside text input with another button',
-  args: {
-    ...Default.args,
-    value:
-      "This is some really long text to make sure that the button doesn't overlap the content in such a way that this input becomes unusable."
-  }
+  )
 };