@magmamath/students-features 1.3.26-rc.13 → 1.3.26-rc.14

package/src/features/keyboard/components/SwitchableLayout/SwitchableLayout.tsx

@@ -8,6 +8,7 @@ import {
   SelectOptionSize,
   SPACING,
 } from '@magmamath/react-native-ui'
+import { TEST_IDS } from '@magmamath/students-qa'
 import { KeyboardType } from '../../types/types'
 import { SelectedLayout, SwitchableLayoutProps } from './types'
 import { getMainKeyboardGroup } from '../../helpers'
@@ -18,6 +19,7 @@ export const SwitchableLayout = ({
   onLayoutChange,
   keys,
   config,
+  testID,
   ...props
 }: SwitchableLayoutProps) => {
   const [selectedLayout, setSelectedLayout] = useState<SelectedLayout>(SelectedLayout.BASIC)
@@ -63,7 +65,7 @@ export const SwitchableLayout = ({
   const currentKeys = keyboardGroups.get(selectedLayout)?.keys ?? []
 
   return (
-    <View style={styles.container}>
+    <View style={styles.container} testID={testID}>
       {isDesktop && (
         <SelectGroup
           numOfRows={2}
@@ -79,7 +81,15 @@ export const SwitchableLayout = ({
           ]}
         />
       )}
-      <KeysList keys={currentKeys} numOfRows={3} {...props} />
+      <View
+        testID={
+          selectedLayout === SelectedLayout.BASIC
+            ? TEST_IDS.KEYBOARD_KEYS_BASIC
+            : TEST_IDS.KEYBOARD_KEYS_SECONDARY
+        }
+      >
+        <KeysList keys={currentKeys} numOfRows={3} {...props} />
+      </View>
     </View>
   )
 }

package/src/features/keyboard/components/SwitchableLayout/helpers.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react'
+import { TEST_IDS } from '@magmamath/students-qa'
 import { SelectedLayout, LayoutOption } from './types'
 
 type GetSelectOptionsProps = {
@@ -21,11 +22,13 @@ export function getSelectOptions({
       key: SelectedLayout.BASIC,
       title: BasicIcon(selectedLayout === SelectedLayout.BASIC),
       onPressIn: onBasicPressIn,
+      testID: TEST_IDS.KEYBOARD_LAYOUT_SWITCH_BASIC,
     },
     {
       key: SelectedLayout.SECONDARY,
       title: SecondaryIcon(selectedLayout === SelectedLayout.SECONDARY),
       onPressIn: onSecondaryPressIn,
+      testID: TEST_IDS.KEYBOARD_LAYOUT_SWITCH_SECONDARY,
     },
   ]
 }

package/src/features/keyboard/components/SwitchableLayout/types.ts

@@ -11,6 +11,7 @@ export type LayoutOption = {
   key: SelectedLayout
   title: ReactNode
   onPressIn: () => void
+  testID?: string
 }
 
 export type SwitchableLayoutConfig = {
@@ -21,4 +22,5 @@ export type SwitchableLayoutConfig = {
 
 export type SwitchableLayoutProps = KeyboardLayoutProps & {
   config: SwitchableLayoutConfig
+  testID?: string
 }

package/src/features/keyboard/constants/groups/currency.constants.ts

@@ -17,4 +17,7 @@ export const KEYBOARD_CURRENCY: Record<string, KeyboardGroup> = {
   ZLOTY_GROSZ: {
     keys: [MATH_CURRENCY_UNITS.ZLOTY, MATH_CURRENCY_UNITS.GROSZ],
   },
+  FRANC_RAPPEN: {
+    keys: [MATH_CURRENCY_UNITS.FRANC, MATH_CURRENCY_UNITS.RAPPEN],
+  },
 }

package/src/features/keyboard/constants/keyboard.helpers.ts

@@ -100,6 +100,7 @@ const CURRENCY_MAP: Record<KeyboardCurrencyVariant, KeyboardGroup> = {
   [KeyboardCurrencyVariant.KRONE_EURO_POUND]: KEYBOARD_CURRENCY.KRONE_EURO_POUND,
   [KeyboardCurrencyVariant.EURO_DOLLAR_POUND]: KEYBOARD_CURRENCY.EURO_DOLLAR_POUND,
   [KeyboardCurrencyVariant.ZLOTY_GROSZ]: KEYBOARD_CURRENCY.ZLOTY_GROSZ,
+  [KeyboardCurrencyVariant.FRANC_RAPPEN]: KEYBOARD_CURRENCY.FRANC_RAPPEN,
 }
 
 const TIME_MAP: Record<KeyboardTimeVariant, KeyboardGroup> = {

package/src/features/keyboard/constants/keys/units.constants.tsx

@@ -10,6 +10,8 @@ import { PesoIcon } from '../../../../shared/icons/keyboard/PesoIcon'
 import { CentIcon } from '../../../../shared/icons/keyboard/CentIcon'
 import { ZlotyIcon } from '../../../../shared/icons/keyboard/ZlotyIcon'
 import { GroszIcon } from '../../../../shared/icons/keyboard/GroszIcon'
+import { FrancIcon } from '../../../../shared/icons/keyboard/FrancIcon'
+import { RappenIcon } from '../../../../shared/icons/keyboard/RappenIcon'
 
 export const MATH_CURRENCY_UNITS: MathOperatorsGroup = {
   KRONE: {
@@ -58,6 +60,16 @@ export const MATH_CURRENCY_UNITS: MathOperatorsGroup = {
     mathliveValue: '\\mathrm{gr}',
     katexValue: 'gr',
   },
+  FRANC: {
+    icon: <FrancIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '\\mathrm{Fr}',
+    katexValue: 'Fr',
+  },
+  RAPPEN: {
+    icon: <RappenIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '\\mathrm{Rp}',
+    katexValue: 'Rp',
+  },
 } as const
 
 export const MATH_LENGTH_UNITS: MathOperatorsGroup = {

package/src/shared/icons/keyboard/FrancIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { IconProps } from './icon.types'
+import Svg, { Text as SvgText } from 'react-native-svg'
+
+export const FrancIcon = ({ size = 20, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <SvgText
+        x="8"
+        y="12"
+        fill={color}
+        fontSize="10"
+        fontWeight="600"
+        textAnchor="middle"
+      >
+        Fr
+      </SvgText>
+    </Svg>
+  )
+}

package/src/shared/icons/keyboard/RappenIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { IconProps } from './icon.types'
+import Svg, { Text as SvgText } from 'react-native-svg'
+
+export const RappenIcon = ({ size = 20, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <SvgText
+        x="8"
+        y="12"
+        fill={color}
+        fontSize="8"
+        fontWeight="600"
+        textAnchor="middle"
+      >
+        Rp
+      </SvgText>
+    </Svg>
+  )
+}