Merge pull request #60 from input-output-hk/feat/lw-9231-improve-simple-asset-input

feat: improve simple asset input [LW-9231]

Author: DominikGuzei

src/design-system/asset-input/amount-input.component.tsx

@@ -10,13 +10,15 @@ interface Props {
   onChange?: (value: string) => void;
   value?: string;
   id: string;
+  testId?: string;
 }
 
 export const AmountInput = ({
   alignment = 'right',
   onChange,
   value,
   id,
+  testId,
 }: Readonly<Props>): JSX.Element => {
   return (
     <Box className={cx.amountInputSizer} data-value={value}>
@@ -26,7 +28,7 @@ export const AmountInput = ({
         size={1}
         onChange={({ target }): void => onChange?.(target.value)}
         placeholder="0.0"
-        data-testid={`asset-input-amount-input-${id}`}
+        data-testid={testId ?? `asset-input-amount-input-${id}`}
       />
     </Box>
   );

src/design-system/asset-input/index.ts

@@ -1,3 +1,3 @@
 export { AssetInput } from './asset-input.component';
 export { SimpleAssetInput } from './simple-asset-input.component';
-export * as Data from './asset-input.data';
+export * from './asset-input.data';

src/design-system/asset-input/simple-asset-input.component.tsx

@@ -12,12 +12,14 @@ interface Props {
   state: AssetState<Asset>;
   balanceLabel: string;
   onAmountChange?: (asset: Readonly<Asset>, amount: string) => void;
+  testId?: string;
 }
 
 export const SimpleAssetInput = ({
   state,
   balanceLabel,
   onAmountChange,
+  testId,
 }: Readonly<Props>): JSX.Element => (
   <div className={cx.root}>
     <Box className={cx.amountBox}>
@@ -28,6 +30,7 @@ export const SimpleAssetInput = ({
         onChange={(value): void => {
           onAmountChange?.(state.asset, value);
         }}
+        testId={testId}
       />
     </Box>
     <Box className={cx.balance}>

src/design-system/bundle-input/bundle-input.component.tsx

@@ -3,26 +3,21 @@ import type { PropsWithChildren } from 'react';
 
 import PlusSmall from '@icons/PlusSmallComponent';
 
-import { AssetInput } from '../asset-input';
+import { AssetInput, AssetState, AssetWithFiat } from '../asset-input';
 import { Box } from '../box';
 import * as ControlButtons from '../control-buttons';
 import { Divider } from '../divider';
 
 import * as cx from './bundle-input.css';
 import { RemoveButton } from './remove-button.component';
 
-import type { Data } from '../asset-input';
-
 export type Props = PropsWithChildren<{
-  state?: Data.AssetState[];
+  state?: AssetState[];
   onAddAsset?: () => void;
-  onRemoveAsset?: (asset: Readonly<Data.AssetWithFiat>) => void;
-  onAmountChange?: (
-    asset: Readonly<Data.AssetWithFiat>,
-    amount: string,
-  ) => void;
-  onTickerClick?: (asset: Readonly<Data.AssetWithFiat>) => void;
-  onMaxClick?: (asset: Readonly<Data.AssetWithFiat>) => void;
+  onRemoveAsset?: (asset: Readonly<AssetWithFiat>) => void;
+  onAmountChange?: (asset: Readonly<AssetWithFiat>, amount: string) => void;
+  onTickerClick?: (asset: Readonly<AssetWithFiat>) => void;
+  onMaxClick?: (asset: Readonly<AssetWithFiat>) => void;
 }>;
 
 export const BundleInput = ({

src/design-system/index.ts

@@ -6,7 +6,7 @@ export { Divider } from './divider';
 export { Flex } from './flex';
 export { Grid, Cell } from './grid';
 export { Text } from './text';
-export { AssetInput, SimpleAssetInput } from './asset-input';
+export * from './asset-input';
 export { BundleInput } from './bundle-input';
 export * as SubNavigation from './sub-navigation';
 export * as NavigationButton from './navigation-buttons';