feat(TextInput): Replace deprecated implementation

Royal-Navy · Feb 21, 2022 · 2592488 · 2592488
1 parent 67897e4
commit 2592488
Show file tree

Hide file tree

Showing 43 changed files with 252 additions and 859 deletions.
diff --git a/packages/react-component-library/cypress/selectors/form.ts b/packages/react-component-library/cypress/selectors/form.ts
@@ -1,7 +1,7 @@
 export default {
   input: {
-    email: '[data-testid="form-example-TextInputE-email"]',
-    password: '[data-testid="form-example-TextInputE-password"]',
+    email: '[data-testid="form-example-TextInput-email"]',
+    password: '[data-testid="form-example-TextInput-password"]',
     description: '[data-testid="form-example-TextArea-description"]',
     checkbox: '[data-testid="checkbox"]',
     radio: '[data-testid="radio"]',

diff --git a/packages/react-component-library/src/components/Autocomplete/partials/StyledNoResults.tsx b/packages/react-component-library/src/components/Autocomplete/partials/StyledNoResults.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components'
 import { selectors } from '@defencedigital/design-tokens'
 
 import { COMPONENT_SIZE } from '../../Forms'
-import { TEXT_INPUT_INPUT_HEIGHT } from '../../TextInputE/partials/StyledInput'
+import { TEXT_INPUT_INPUT_HEIGHT } from '../../TextInput/partials/StyledInput'
 
 const { color, fontSize } = selectors
 

diff --git a/packages/react-component-library/src/components/DatePicker/DatePicker.tsx b/packages/react-component-library/src/components/DatePicker/DatePicker.tsx
@@ -13,12 +13,12 @@ import { hasClass } from '../../helpers'
 import { InlineButton } from '../InlineButtons/InlineButton'
 import { InputValidationProps } from '../../common/InputValidationProps'
 import { isDateValid } from './utils'
-import { StyledLabel } from '../TextInputE/partials/StyledLabel'
+import { StyledLabel } from '../TextInput/partials/StyledLabel'
 import { StyledDatePickerInput } from './partials/StyledDatePickerInput'
 import { StyledDayPicker } from './partials/StyledDayPicker'
 import { StyledFloatingBox } from './partials/StyledFloatingBox'
 import { StyledInlineButtons } from '../InlineButtons/partials/StyledInlineButtons'
-import { StyledInput } from '../TextInputE/partials/StyledInput'
+import { StyledInput } from '../TextInput/partials/StyledInput'
 import { StyledInputWrapper } from './partials/StyledInputWrapper'
 import { StyledOuterWrapper } from './partials/StyledOuterWrapper'
 import { useExternalId } from '../../hooks/useExternalId'

diff --git a/...ages/react-component-library/src/components/DatePicker/partials/StyledDatePickerInput.tsx b/...ages/react-component-library/src/components/DatePicker/partials/StyledDatePickerInput.tsx
@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components'
 
-import { StyledInput } from '../../TextInputE/partials/StyledInput'
+import { StyledInput } from '../../TextInput/partials/StyledInput'
 
 interface StyledDatePickerInputProps {
   $isDisabled?: boolean

diff --git a/packages/react-component-library/src/components/Field/Field.stories.tsx b/packages/react-component-library/src/components/Field/Field.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
 
 import { Field } from './index'
-import { TextInputE } from '../TextInputE'
+import { TextInput } from '../TextInput'
 
 export default {
   component: Field,
@@ -12,7 +12,7 @@ export default {
 
 const Template: ComponentStory<typeof Field> = (args) => (
   <Field {...args}>
-    <TextInputE label="Example text input" name="example" />
+    <TextInput label="Example text input" name="example" />
   </Field>
 )
 

diff --git a/packages/react-component-library/src/components/Field/Field.test.tsx b/packages/react-component-library/src/components/Field/Field.test.tsx
@@ -3,7 +3,7 @@ import '@testing-library/jest-dom/extend-expect'
 import { render, RenderResult } from '@testing-library/react'
 
 import { Field } from '.'
-import { TextInputE } from '../TextInputE'
+import { TextInput } from '../TextInput'
 
 describe('Field', () => {
   let wrapper: RenderResult
@@ -12,7 +12,7 @@ describe('Field', () => {
     beforeEach(() => {
       wrapper = render(
         <Field hintText="Example hint text." errors={[{ error: 'Required' }]}>
-          <TextInputE
+          <TextInput
             label="Example text input"
             name="example"
             data-testid="example-component"

diff --git a/packages/react-component-library/src/components/Fieldset/Fieldset.stories.tsx b/packages/react-component-library/src/components/Fieldset/Fieldset.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'
 
 import { Fieldset } from './index'
 import { Field } from '../Field'
-import { TextInputE } from '../TextInputE'
+import { TextInput } from '../TextInput'
 
 export default {
   component: Fieldset,
@@ -14,13 +14,13 @@ export default {
 const Template: ComponentStory<typeof Fieldset> = (args) => (
   <Fieldset {...args}>
     <Field>
-      <TextInputE label="Address line 1" name="address1" />
+      <TextInput label="Address line 1" name="address1" />
     </Field>
     <Field>
-      <TextInputE label="Address line 2" name="address2" />
+      <TextInput label="Address line 2" name="address2" />
     </Field>
     <Field>
-      <TextInputE label="City" name="city" />
+      <TextInput label="City" name="city" />
     </Field>
   </Fieldset>
 )
@@ -34,24 +34,24 @@ const TemplateHorizontal: ComponentStory<typeof Fieldset> = (_) => (
   <>
     <Fieldset legend="Home address">
       <Field>
-        <TextInputE label="Address line 1" name="address1" />
+        <TextInput label="Address line 1" name="address1" />
       </Field>
       <Field>
-        <TextInputE label="Address line 2" name="address2" />
+        <TextInput label="Address line 2" name="address2" />
       </Field>
       <Field>
-        <TextInputE label="City" name="city" />
+        <TextInput label="City" name="city" />
       </Field>
     </Fieldset>
     <Fieldset legend="Work address">
       <Field>
-        <TextInputE label="Address line 1" name="address1" />
+        <TextInput label="Address line 1" name="address1" />
       </Field>
       <Field>
-        <TextInputE label="Address line 2" name="address2" />
+        <TextInput label="Address line 2" name="address2" />
       </Field>
       <Field>
-        <TextInputE label="City" name="city" />
+        <TextInput label="City" name="city" />
       </Field>
     </Fieldset>
   </>
@@ -63,24 +63,24 @@ const TemplateVertical: ComponentStory<typeof Fieldset> = (_) => (
   <>
     <Fieldset type="block" legend="Home address">
       <Field>
-        <TextInputE label="Address line 1" name="address1" />
+        <TextInput label="Address line 1" name="address1" />
       </Field>
       <Field>
-        <TextInputE label="Address line 2" name="address2" />
+        <TextInput label="Address line 2" name="address2" />
       </Field>
       <Field>
-        <TextInputE label="City" name="city" />
+        <TextInput label="City" name="city" />
       </Field>
     </Fieldset>
     <Fieldset type="block" legend="Work address">
       <Field>
-        <TextInputE label="Address line 1" name="address1" />
+        <TextInput label="Address line 1" name="address1" />
       </Field>
       <Field>
-        <TextInputE label="Address line 2" name="address2" />
+        <TextInput label="Address line 2" name="address2" />
       </Field>
       <Field>
-        <TextInputE label="City" name="city" />
+        <TextInput label="City" name="city" />
       </Field>
     </Fieldset>
   </>

diff --git a/packages/react-component-library/src/components/NumberInput/Input.tsx b/packages/react-component-library/src/components/NumberInput/Input.tsx
@@ -2,9 +2,9 @@ import React from 'react'
 import { isNil } from 'lodash'
 
 import { ComponentSizeType } from '../Forms'
-import { StyledInput } from '../TextInputE/partials/StyledInput'
+import { StyledInput } from '../TextInput/partials/StyledInput'
 import { StyledInputWrapper } from './partials/StyledInputWrapper'
-import { StyledLabel } from '../TextInputE/partials/StyledLabel'
+import { StyledLabel } from '../TextInput/partials/StyledLabel'
 
 export interface InputProps {
   hasFocus: boolean

diff --git a/packages/react-component-library/src/components/Pagination/Pagination.tsx b/packages/react-component-library/src/components/Pagination/Pagination.tsx
@@ -75,6 +75,7 @@ export const Pagination: React.FC<PaginationProps> = ({
       <StyledListItem>
         {hasError && <PaginationErrorMessage />}
         <StyledTextInput
+          label=""
           aria-label="Enter page number"
           onKeyDown={onKeyDown}
           name={name}

diff --git a/packages/react-component-library/src/components/Pagination/partials/StyledTextInput.tsx b/packages/react-component-library/src/components/Pagination/partials/StyledTextInput.tsx
@@ -1,13 +1,17 @@
 import styled from 'styled-components'
+import { selectors } from '@defencedigital/design-tokens'
 
 import { TextInput } from '../../TextInput'
 import { StyledInput } from '../../TextInput/partials/StyledInput'
 
+const { spacing } = selectors
+
 export const StyledTextInput = styled(TextInput)`
   width: 51px;
   margin: 0;
 
   ${StyledInput} {
     height: 31px;
+    padding: 0 0 0 ${spacing('6')};
   }
 `
diff --git a/packages/react-component-library/src/components/SelectBase/SelectLayout.tsx b/packages/react-component-library/src/components/SelectBase/SelectLayout.tsx
@@ -10,7 +10,7 @@ import { SelectChildWithStringType } from './types'
 import { StyledInlineButtons } from './partials/StyledInlineButtons'
 import { StyledInput } from './partials/StyledInput'
 import { StyledInputWrapper } from './partials/StyledInputWrapper'
-import { StyledLabel } from '../TextInputE/partials/StyledLabel'
+import { StyledLabel } from '../TextInput/partials/StyledLabel'
 import { StyledOptions } from './partials/StyledOptions'
 import { StyledOptionsWrapper } from './partials/StyledOptionsWrapper'
 import { StyledOuterWrapper } from './partials/StyledOuterWrapper'

diff --git a/packages/react-component-library/src/components/SelectBase/partials/StyledInput.tsx b/packages/react-component-library/src/components/SelectBase/partials/StyledInput.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import {
   StyledInput as StyledTextInputInput,
   StyledInputProps,
-} from '../../TextInputE/partials/StyledInput'
+} from '../../TextInput/partials/StyledInput'
 
 export const StyledInput = styled(StyledTextInputInput)<StyledInputProps>`
   overflow: hidden;

diff --git a/packages/react-component-library/src/components/SelectBase/partials/StyledOption.tsx b/packages/react-component-library/src/components/SelectBase/partials/StyledOption.tsx
@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components'
 import { selectors } from '@defencedigital/design-tokens'
 
 import { COMPONENT_SIZE } from '../../Forms'
-import { TEXT_INPUT_INPUT_HEIGHT } from '../../TextInputE/partials/StyledInput'
+import { TEXT_INPUT_INPUT_HEIGHT } from '../../TextInput/partials/StyledInput'
 
 const { color, fontSize, spacing } = selectors
 

diff --git a/packages/react-component-library/src/components/SelectBase/partials/StyledOptionsWrapper.tsx b/packages/react-component-library/src/components/SelectBase/partials/StyledOptionsWrapper.tsx
@@ -3,7 +3,7 @@ import { selectors } from '@defencedigital/design-tokens'
 
 import { BORDER_RADIUS } from '../../../styled-components'
 import { COMPONENT_SIZE } from '../../Forms'
-import { TEXT_INPUT_INPUT_HEIGHT } from '../../TextInputE/partials/StyledInput'
+import { TEXT_INPUT_INPUT_HEIGHT } from '../../TextInput/partials/StyledInput'
 
 const { color, zIndex } = selectors
 

diff --git a/packages/react-component-library/src/components/SelectBase/partials/StyledTextInput.tsx b/packages/react-component-library/src/components/SelectBase/partials/StyledTextInput.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { StyledTextInput as StyledTextInputBase } from '../../TextInputE/partials/StyledTextInput'
+import { StyledTextInput as StyledTextInputBase } from '../../TextInput/partials/StyledTextInput'
 
 export const StyledTextInput = styled(StyledTextInputBase)`
   margin-bottom: 0;

diff --git a/...brary/src/components/TextInputE/Input.tsx → ...ibrary/src/components/TextInput/Input.tsx b/...brary/src/components/TextInputE/Input.tsx → ...ibrary/src/components/TextInput/Input.tsx
diff --git a/packages/react-component-library/src/components/TextInput/TextInput.stories.tsx b/packages/react-component-library/src/components/TextInput/TextInput.stories.tsx
@@ -7,7 +7,9 @@ import { TextInput } from '.'
 export default {
   component: TextInput,
   title: 'Text Input',
-  argTypes: { onBlur: { action: 'onBlur' } },
+  parameters: {
+    argTypes: { onBlur: { action: 'onBlur' } },
+  },
 } as ComponentMeta<typeof TextInput>
 
 export const Default: ComponentStory<typeof TextInput> = (props) => (
@@ -19,12 +21,6 @@ Default.args = {
   label: 'Example label',
 }
 
-export const WithLabel: ComponentStory<typeof TextInput> = (props) => (
-  <TextInput {...props} name="text-input-label" label="Example label" />
-)
-
-WithLabel.storyName = 'With label'
-
 export const Disabled: ComponentStory<typeof TextInput> = (props) => (
   <TextInput
     {...props}
@@ -57,3 +53,14 @@ export const WithEndAdornment: ComponentStory<typeof TextInput> = (props) => (
 )
 
 WithEndAdornment.storyName = 'With end adornment'
+
+export const WithError: ComponentStory<typeof TextInput> = (props) => (
+  <TextInput
+    {...props}
+    isInvalid
+    label="Example label"
+    name="text-input-end-adornment"
+  />
+)
+
+WithError.storyName = 'With error'