feat(NumberInput): Replace deprecated implementation

packages/react-component-library/cypress/selectors/index.ts

@@ -5,7 +5,7 @@ import contextMenu from './ContextMenu'
 import datePicker from './DatePicker'
 import dismissibleBanner from './DismissibleBanner'
 import form from './form'
-import numberInputE from './NumberInputE'
+import NumberInput from './NumberInput'
 import rangeSliderE from './RangeSliderE'
 import selectE from './SelectE'
 import timeline from './timeline'
@@ -18,7 +18,7 @@ export default {
   datePicker,
   dismissibleBanner,
   form,
-  numberInputE,
+  NumberInput,
   rangeSliderE,
   selectE,
   timeline,

packages/react-component-library/cypress/specs/NumberInputE/index.spec.ts → packages/react-component-library/cypress/specs/NumberInput/index.spec.ts

@@ -2,34 +2,32 @@ import { before, cy, describe, it } from 'local-cypress'
 
 import selectors from '../../selectors'
 
-describe('NumberInputE', () => {
+describe('NumberInput', () => {
   beforeEach(() => {
-    cy.visit(
-      '/iframe.html?id=number-input-experimental--default&viewMode=story'
-    )
+    cy.visit('/iframe.html?id=number-input--default&viewMode=story')
   })
 
   it('renders the number input without a value', () => {
-    cy.get(selectors.numberInputE.input).should('have.value', '')
+    cy.get(selectors.NumberInput.input).should('have.value', '')
   })
 
   describe('when the increase button is clicked', () => {
     beforeEach(() => {
-      cy.get(selectors.numberInputE.increase).click()
+      cy.get(selectors.NumberInput.increase).click()
     })
 
     it('should increment the value', () => {
-      cy.get(selectors.numberInputE.input).should('have.value', '1')
+      cy.get(selectors.NumberInput.input).should('have.value', '1')
     })
   })
 
   describe('when the decrease button is clicked', () => {
     beforeEach(() => {
-      cy.get(selectors.numberInputE.decrease).click()
+      cy.get(selectors.NumberInput.decrease).click()
     })
 
     it('should decrement the value', () => {
-      cy.get(selectors.numberInputE.input).should('have.value', '-1')
+      cy.get(selectors.NumberInput.input).should('have.value', '-1')
     })
   })
 
@@ -48,11 +46,11 @@ describe('NumberInputE', () => {
   TYPED_VALUE_CASES.forEach(([textToType, expectedValue]) => {
     describe(`when typing "${textToType}"`, () => {
       beforeEach(() => {
-        cy.get(selectors.numberInputE.input).type(textToType)
+        cy.get(selectors.NumberInput.input).type(textToType)
       })
 
       it(`the value is "${expectedValue}"`, () => {
-        cy.get(selectors.numberInputE.input).should('have.value', expectedValue)
+        cy.get(selectors.NumberInput.input).should('have.value', expectedValue)
       })
     })
   })

packages/react-component-library/src/components/NumberInput/Input.tsx

@@ -1,85 +1,58 @@
 import React from 'react'
-import { isFinite, isNil } from 'lodash'
-import { selectors } from '@defencedigital/design-tokens'
+import { isNil } from 'lodash'
 
-import { NumberInputUnit } from './NumberInputUnit'
-import { UnitPosition } from './NumberInput'
-import { useInputText } from './useInputText'
-import { InputValidationProps } from '../../common/InputValidationProps'
-import { StyledInput } from './partials/StyledInput'
-import { StyledLabel } from './partials/StyledLabel'
+import { ComponentSizeType } from '../Forms'
+import { StyledInput } from '../TextInputE/partials/StyledInput'
 import { StyledInputWrapper } from './partials/StyledInputWrapper'
+import { StyledLabel } from '../TextInputE/partials/StyledLabel'
 
-export interface InputProps extends InputValidationProps {
+export interface InputProps {
   hasFocus: boolean
   isDisabled?: boolean
   id?: string
-  isCondensed: boolean
   label?: string
   name: string
+  onBeforeInput: (event: React.FormEvent<HTMLInputElement>) => void
   onBlur: (event: React.FormEvent<HTMLInputElement>) => void
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
   onFocus: (event: React.FormEvent<HTMLInputElement>) => void
+  onPaste: (event: React.ClipboardEvent<HTMLInputElement>) => void
   placeholder?: string
-  unit: string
-  unitPosition: UnitPosition
-  value?: number
+  size: ComponentSizeType
+  value?: string | null
 }
 
-const { spacing } = selectors
-
 export const Input: React.FC<InputProps> = ({
   hasFocus,
-  isDisabled = false,
+  isDisabled,
   id,
-  isCondensed,
   label,
-  placeholder = '',
-  unit,
-  unitPosition,
+  size,
   value,
   ...rest
 }) => {
   const hasLabel = !!(label && label.length)
-  const { canShow, inputOffset, inputRef, unitOffset } = useInputText(
-    value,
-    unitPosition
-  )
 
   return (
     <StyledInputWrapper>
       {hasLabel && (
         <StyledLabel
           $hasContent={!isNil(value)}
           $hasFocus={hasFocus}
-          $hasUnit={!isNil(unit)}
-          data-testid="number-input-label"
+          $size={size}
           htmlFor={id}
+          data-testid="number-input-label"
         >
           {label}
         </StyledLabel>
       )}
-
-      {canShow && (
-        <NumberInputUnit
-          left={`${unitOffset}px`}
-          top={hasLabel && spacing('4')}
-        >
-          {unit}
-        </NumberInputUnit>
-      )}
-
       <StyledInput
         $hasLabel={hasLabel}
-        $isCondensed={isCondensed}
-        $offset={inputOffset}
+        $size={size}
         data-testid="number-input-input"
         disabled={isDisabled}
         id={id}
-        placeholder={placeholder}
-        ref={inputRef}
-        type="text"
-        value={isFinite(value) && canShow ? value : ''}
+        value={value || ''}
         {...rest}
       />
     </StyledInputWrapper>