fix(app): update software keyboard components to align with the lates…

…t design

First change component name

close AUTH-133

app/src/atoms/SoftwareKeyboard/Numpad/Numpad.stories.tsx → app/src/atoms/SoftwareKeyboard/NumericalKeyboard/NumericalKeyboard.stories.tsx

@@ -1,25 +1,36 @@
 import * as React from 'react'
 import {
-  Flex,
   DIRECTION_COLUMN,
+  Flex,
   POSITION_ABSOLUTE,
   SPACING,
 } from '@opentrons/components'
 import { touchScreenViewport } from '../../../DesignTokens/constants'
 import { InputField } from '../../InputField'
-import { Numpad } from './'
+import { NumericalKeyboard } from '.'
 import '../index.css'
 import './index.css'
 
 import type { Story, Meta } from '@storybook/react'
 
 export default {
-  title: 'ODD/Atoms/SoftwareKeyboard/Numpad',
-  component: Numpad,
+  title: 'ODD/Atoms/SoftwareKeyboard/NumericalKeyboard',
+  component: NumericalKeyboard,
   parameters: touchScreenViewport,
+  argTypes: {
+    isDecimal: {
+      control: {
+        type: 'boolean',
+        options: [true, false],
+      },
+      defaultValue: false,
+    },
+  },
 } as Meta
 
-const Template: Story<React.ComponentProps<typeof Numpad>> = args => {
+const Template: Story<
+  React.ComponentProps<typeof NumericalKeyboard>
+> = args => {
   const [showKeyboard, setShowKeyboard] = React.useState(false)
   const [value, setValue] = React.useState<string>('')
   const keyboardRef = React.useRef(null)
@@ -30,14 +41,18 @@ const Template: Story<React.ComponentProps<typeof Numpad>> = args => {
           value={value}
           type="text"
           placeholder="When focusing, the numpad shows up"
-          onFocus={() => setShowKeyboard(true)}
+          onFocus={() => {
+            setShowKeyboard(true)
+          }}
         />
       </form>
       <Flex position={POSITION_ABSOLUTE} top="20%" width="15rem">
         {showKeyboard && (
-          <Numpad
+          <NumericalKeyboard
+            // eslint-disable-next-line @typescript-eslint/no-confusing-void-expression
             onChange={e => e != null && setValue(String(e))}
             keyboardRef={keyboardRef}
+            isDecimal={args.isDecimal}
           />
         )}
       </Flex>
@@ -46,3 +61,6 @@ const Template: Story<React.ComponentProps<typeof Numpad>> = args => {
 }
 
 export const NormalSoftwareKeyboard = Template.bind({})
+NormalSoftwareKeyboard.args = {
+  isDecimal: false,
+}

app/src/atoms/SoftwareKeyboard/NumericalKeyboard/__tests__/NumericalKeyboard.test.tsx

@@ -0,0 +1,98 @@
+import * as React from 'react'
+import { describe, it, expect, vi } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+import { fireEvent, renderHook, screen } from '@testing-library/react'
+import { renderWithProviders } from '../../../../__testing-utils__'
+import { NumericalKeyboard } from '..'
+
+const render = (props: React.ComponentProps<typeof NumericalKeyboard>) => {
+  return renderWithProviders(<NumericalKeyboard {...props} />)[0]
+}
+
+describe('NumericalKeyboard', () => {
+  it('should render the numpad keys decimal off', () => {
+    const { result } = renderHook(() => React.useRef(null))
+    const props = {
+      onChange: vi.fn(),
+      keyboardRef: result.current,
+      isDecimal: false,
+    }
+    render(props)
+    const buttons = screen.getAllByRole('button')
+    const expectedButtonNames = [
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      '',
+      '0',
+      'del',
+    ]
+
+    buttons.forEach((button, index) => {
+      const expectedName = expectedButtonNames[index]
+      expect(button).toHaveTextContent(expectedName)
+    })
+  })
+
+  it('should render the numpad keys decimal on', () => {
+    const { result } = renderHook(() => React.useRef(null))
+    const props = {
+      onChange: vi.fn(),
+      keyboardRef: result.current,
+      isDecimal: true,
+    }
+    render(props)
+    const buttons = screen.getAllByRole('button')
+    const expectedButtonNames = [
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      '.',
+      '0',
+      'del',
+    ]
+
+    buttons.forEach((button, index) => {
+      const expectedName = expectedButtonNames[index]
+      expect(button).toHaveTextContent(expectedName)
+    })
+  })
+
+  it('should call mock function when clicking num key', () => {
+    const { result } = renderHook(() => React.useRef(null))
+    const props = {
+      onChange: vi.fn(),
+      keyboardRef: result.current,
+      isDecimal: false,
+    }
+    render(props)
+    const numKey = screen.getByRole('button', { name: '1' })
+    fireEvent.click(numKey)
+    expect(props.onChange).toHaveBeenCalled()
+  })
+
+  it('should call mock function when clicking decimal point key', () => {
+    const { result } = renderHook(() => React.useRef(null))
+    const props = {
+      onChange: vi.fn(),
+      keyboardRef: result.current,
+      isDecimal: true,
+    }
+    render(props)
+    const numKey = screen.getByRole('button', { name: '.' })
+    fireEvent.click(numKey)
+    expect(props.onChange).toHaveBeenCalled()
+  })
+})

app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.css

@@ -0,0 +1,27 @@
+/* stylelint-disable */
+
+.numerical-keyboard button.hg-button.hg-button-backspace,
+.numerical-keyboard button.hg-button.hg-button-abc,
+.numerical-keyboard button.hg-button.hg-standardBtn {
+  flex: 1;
+}
+
+.numerical-keyboard button.hg-button.hg-button-backspace span,
+.numerical-keyboard button.hg-button.hg-button-abc span,
+.numerical-keyboard button.hg-button.hg-standardBtn span {
+  text-align: center;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+div:nth-child(4) .hg-button.hg-standardBtn:nth-child(1) {
+  background-color: transparent;
+  box-shadow: none;
+  cursor: none;
+}
+
+.numerical-keyboard button.hg-button.hg-standardBtn.hg-decimal-point {
+  background-color: #fff;
+  cursor: pointer;
+}

app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react'
+import Keyboard from 'react-simple-keyboard'
+
+const customDisplay = {
+  '{backspace}': 'del',
+}
+interface NumericalKeyboardProps {
+  onChange: (input: string) => void
+  keyboardRef: React.MutableRefObject<null>
+  isDecimal?: boolean
+}
+
+const decimalOffKeyboard = ['1 2 3', '4 5 6', '7 8 9', ' 0 {backspace}']
+const decimalOnKeyboard = ['1 2 3', '4 5 6', '7 8 9', '. 0 {backspace}']
+
+export function NumericalKeyboard({
+  onChange,
+  keyboardRef,
+  isDecimal = false,
+}: NumericalKeyboardProps): JSX.Element {
+  const numericalKeyboard = {
+    layout: {
+      default: isDecimal ? decimalOnKeyboard : decimalOffKeyboard,
+    },
+  }
+  return (
+    /*
+     *  autoUseTouchEvents: for Flex on-device app
+     *  useButtonTag: this is for testing purpose that each key renders as a button
+     */
+    <Keyboard
+      keyboardRef={r => (keyboardRef.current = r)}
+      theme={'hg-theme-default oddTheme1 numerical-keyboard'}
+      onChange={onChange}
+      layoutName="default"
+      buttonTheme={[
+        {
+          class: 'hg-decimal-point',
+          buttons: '.',
+        },
+      ]}
+      display={customDisplay}
+      autoUseTouchEvents={true}
+      useButtonTag={true}
+      {...numericalKeyboard}
+    />
+  )
+}

app/src/atoms/SoftwareKeyboard/index.ts

@@ -1,3 +1,3 @@
 export { CustomKeyboard } from './CustomKeyboard'
 export { NormalKeyboard } from './NormalKeyboard'
-export { Numpad } from './Numpad'
+export { Numpad } from './NumericalKeyboard'