fix(app) dqa software keyboard round3 (#13493)

* fix(app): dqa software keyboard round3

app/src/atoms/SoftwareKeyboard/CustomKeyboard.stories.tsx → app/src/atoms/SoftwareKeyboard/CustomKeyboard/CustomKeyboard.stories.tsx

@@ -5,13 +5,14 @@ import {
   POSITION_ABSOLUTE,
   SPACING,
 } from '@opentrons/components'
-import { InputField } from '../InputField'
-import { CustomKeyboard } from './'
+import { InputField } from '../../InputField'
+import { CustomKeyboard } from '.'
+import '../../../styles.global.css'
 
 import type { Story, Meta } from '@storybook/react'
 
 export default {
-  title: 'Odd/Atoms/SoftwareKeyboard/CustomKeyboard',
+  title: 'ODD/Atoms/SoftwareKeyboard/CustomKeyboard',
   component: CustomKeyboard,
 } as Meta
 

app/src/atoms/SoftwareKeyboard/__tests__/CustomKeyboard.test.tsx → app/src/atoms/SoftwareKeyboard/CustomKeyboard/__tests__/CustomKeyboard.test.tsx

@@ -84,7 +84,7 @@ describe('CustomKeyboard', () => {
       'J',
       'K',
       'L',
-      'SHIFT',
+      'abc',
       'Z',
       'X',
       'C',

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

@@ -0,0 +1,33 @@
+/* stylelint-disable */
+
+.simple-keyboard.oddTheme1.hg-theme-default {
+  width: 100%;
+  height: 100%;
+  background-color: #d0d0d0;
+  font-family: 'Public Sans', sans-serif;
+  padding: 8px;
+  font-size: 28px;
+}
+
+.simple-keyboard.oddTheme1
+  .hg-row:not(:last-child)
+  .hg-button:not(:last-child) {
+  margin-right: 8px;
+  margin-bottom: 3px;
+}
+
+.simple-keyboard.simple-keyboard.oddTheme1 .hg-button {
+  height: 48px;
+}
+
+.simple-keyboard .hg-button:active {
+  color: #16212d;
+  background-color: #e3e3e3;
+}
+
+/* Numeric keyboard in custom keyboard */
+.hg-layout-numbers button.hg-button.hg-button-backspace,
+.hg-layout-numbers button.hg-button.hg-button-abc,
+.hg-layout-numbers button.hg-button.hg-standardBtn {
+  flex: 1;
+}

app/src/atoms/SoftwareKeyboard/CustomKeyboard.tsx → app/src/atoms/SoftwareKeyboard/CustomKeyboard/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import Keyboard from 'react-simple-keyboard'
-import { customDisplay } from './constants'
+import { customDisplay } from '../constants'
 
 interface CustomKeyboardProps {
   onChange: (input: string) => void
@@ -17,7 +17,7 @@ const customLayout = {
   shift: [
     'Q W E R T Y U I O P',
     'A S D F G H J K L',
-    '{shift} Z X C V B N M {backspace}',
+    '{abc} Z X C V B N M {backspace}',
     '{numbers}',
   ],
   numbers: ['1 2 3', '4 5 6', '7 8 9', '{abc} 0 {backspace}'],

app/src/atoms/SoftwareKeyboard/NormalKeyboard.stories.tsx → app/src/atoms/SoftwareKeyboard/NormalKeyboard/NormalKeyboard.stories.tsx

@@ -5,14 +5,14 @@ import {
   POSITION_ABSOLUTE,
   SPACING,
 } from '@opentrons/components'
-import { InputField } from '../InputField'
-import { NormalKeyboard } from './'
-import '../../styles.global.css'
+import { InputField } from '../../InputField'
+import { NormalKeyboard } from '.'
+import '../../../styles.global.css'
 
 import type { Story, Meta } from '@storybook/react'
 
 export default {
-  title: 'Odd/Atoms/SoftwareKeyboard/NormalKeyboard',
+  title: 'ODD/Atoms/SoftwareKeyboard/NormalKeyboard',
   component: NormalKeyboard,
 } as Meta
 

app/src/atoms/SoftwareKeyboard/__tests__/NormalKeyboard.test.tsx → app/src/atoms/SoftwareKeyboard/NormalKeyboard/__tests__/NormalKeyboard.test.tsx

@@ -87,7 +87,7 @@ describe('SoftwareKeyboard', () => {
       'J',
       'K',
       'L',
-      'SHIFT',
+      'abc',
       'Z',
       'X',
       'C',

app/src/atoms/SoftwareKeyboard/index.css → app/src/atoms/SoftwareKeyboard/NormalKeyboard/index.css

@@ -13,14 +13,14 @@
   .hg-row:not(:last-child)
   .hg-button:not(:last-child) {
   margin-right: 8px;
-  margin-bottom: 2px;
+  margin-bottom: 3px;
 }
 
 .simple-keyboard.simple-keyboard.oddTheme1 .hg-button {
   height: 48px;
 }
 
 .simple-keyboard .hg-button:active {
-  color: white;
+  color: #16212d;
   background-color: #e3e3e3;
 }

app/src/atoms/SoftwareKeyboard/NormalKeyboard.tsx → app/src/atoms/SoftwareKeyboard/NormalKeyboard/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import Keyboard from 'react-simple-keyboard'
-import { customDisplay } from './constants'
+import { customDisplay } from '../constants'
 
 interface NormalKeyboardProps {
   onChange: (input: string) => void
@@ -20,7 +20,7 @@ const customLayout = {
   shift: [
     'Q W E R T Y U I O P',
     '{numbers} A S D F G H J K L',
-    '{shift} Z X C V B N M {backspace}',
+    '{abc} Z X C V B N M {backspace}',
     '{space}',
   ],
   symbols: [

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

@@ -5,13 +5,14 @@ import {
   POSITION_ABSOLUTE,
   SPACING,
 } from '@opentrons/components'
-import { InputField } from '../InputField'
-import { Numpad } from './'
+import { InputField } from '../../InputField'
+import { Numpad } from '.'
+import '../../../styles.global.css'
 
 import type { Story, Meta } from '@storybook/react'
 
 export default {
-  title: 'Odd/Atoms/SoftwareKeyboard/Numpad',
+  title: 'ODD/Atoms/SoftwareKeyboard/Numpad',
   component: Numpad,
 } as Meta
 

app/src/atoms/SoftwareKeyboard/__tests__/Numpad.test.tsx → app/src/atoms/SoftwareKeyboard/Numpad/__tests__/Numpad.test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { fireEvent } from '@testing-library/react'
 import { renderHook } from '@testing-library/react-hooks'
 import { renderWithProviders } from '@opentrons/components'
-import { Numpad } from '../'
+import { Numpad } from '..'
 
 const render = (props: React.ComponentProps<typeof Numpad>) => {
   return renderWithProviders(<Numpad {...props} />)[0]

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

@@ -0,0 +1,7 @@
+/* stylelint-disable */
+
+.numpad button.hg-button.hg-button-backspace,
+.numpad button.hg-button.hg-button-abc,
+.numpad button.hg-button.hg-standardBtn {
+  flex: 1;
+}

app/src/atoms/SoftwareKeyboard/Numpad.tsx → app/src/atoms/SoftwareKeyboard/Numpad/index.tsx

@@ -22,7 +22,7 @@ export function Numpad({ onChange, keyboardRef }: NumpadProps): JSX.Element {
      */
     <Keyboard
       keyboardRef={r => (keyboardRef.current = r)}
-      theme={'hg-theme-default oddTheme1'}
+      theme={'hg-theme-default oddTheme1 numpad'}
       onChange={onChange}
       layoutName="default"
       display={customDisplay}

app/src/atoms/SoftwareKeyboard/index.ts

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

app/src/styles.global.css

@@ -3,4 +3,6 @@
 */
 
 @import '../../node_modules/react-simple-keyboard/build/css/index.css';
-@import './atoms/SoftwareKeyboard/index.css';
+@import './atoms/SoftwareKeyboard/CustomKeyboard/index.css';
+@import './atoms/SoftwareKeyboard/NormalKeyboard/index.css';
+@import './atoms/SoftwareKeyboard/Numpad/index.css';