feat: add simple version of asset input [LW-9231]

Author: DominikGuzei

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

@@ -3,22 +3,25 @@ import React from 'react';
 import { Box } from '../box';
 
 import * as cx from './amount-input.css';
+import { AmountInputAlignments } from './amount-input.css';
 
 interface Props {
+  alignment?: AmountInputAlignments;
   onChange?: (value: string) => void;
   value?: string;
   id: string;
 }
 
 export const AmountInput = ({
+  alignment = AmountInputAlignments.right,
   onChange,
   value,
   id,
 }: Readonly<Props>): JSX.Element => {
   return (
     <Box className={cx.amountInputSizer} data-value={value}>
       <input
-        className={cx.amountInput}
+        className={cx.amountInput[alignment]}
         value={value}
         size={1}
         onChange={({ target }): void => onChange?.(target.value)}

src/design-system/asset-input/amount-input.css.ts

@@ -1,3 +1,5 @@
+import { styleVariants } from '@vanilla-extract/css';
+
 import { style, vars } from '../../design-tokens';
 import { bold } from '../text/text.css';
 
@@ -20,12 +22,16 @@ export const amountInputSizer = style([
   },
 ]);
 
-export const amountInput = style([
+export enum AmountInputAlignments {
+  left = 'left',
+  right = 'right',
+}
+
+const amountInputBase = style([
   inputTypography,
   bold,
   {
     gridArea: '1 / 2',
-    textAlign: 'right',
     border: 'none',
     width: 'auto',
     background: 'none',
@@ -39,3 +45,18 @@ export const amountInput = style([
     },
   },
 ]);
+
+export const amountInput = styleVariants({
+  left: [
+    amountInputBase,
+    {
+      textAlign: AmountInputAlignments.left,
+    },
+  ],
+  right: [
+    amountInputBase,
+    {
+      textAlign: AmountInputAlignments.right,
+    },
+  ],
+});

src/design-system/asset-input/asset-input.stories.tsx

@@ -13,12 +13,12 @@ import {
   ColorSchemaTable,
 } from '../decorators';
 import { Divider } from '../divider';
-import { Grid } from '../grid';
-import { Cell } from '../grid/cell.component';
+import { Cell, Grid } from '../grid';
 
 import { AssetInput } from './asset-input.component';
 import { invalidState, validState } from './asset-input.fixtures';
 import { MaxButton } from './max-button.component';
+import { SimpleAssetInput } from './simple-asset-input.component';
 
 import type { Asset, AssetState } from './asset-input.data';
 
@@ -61,7 +61,12 @@ export const Overview = (): JSX.Element => (
     <Cell>
       <Section title="Overview">
         <Variants.Table
-          headers={['Browser view — simple', 'Browser view — simple + error']}
+          headers={[
+            'Complex — valid',
+            'Complex — invalid',
+            'Simple - invalid',
+            'Simple - invalid',
+          ]}
         >
           <Variants.Row>
             <Variants.Cell>
@@ -70,6 +75,18 @@ export const Overview = (): JSX.Element => (
             <Variants.Cell>
               <AssetInput state={invalidState('1')} />
             </Variants.Cell>
+            <Variants.Cell>
+              <SimpleAssetInput
+                state={validState('1')}
+                translations={{ balance: 'Balance Available' }}
+              />
+            </Variants.Cell>
+            <Variants.Cell>
+              <SimpleAssetInput
+                state={invalidState('1')}
+                translations={{ balance: 'Balance Available' }}
+              />
+            </Variants.Cell>
           </Variants.Row>
         </Variants.Table>
       </Section>

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

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

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

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { Box } from '../box';
+import { Text } from '../text';
+
+import { AmountInput } from './amount-input.component';
+import { AmountInputAlignments } from './amount-input.css';
+import * as cx from './simple-asset-input.css';
+
+import type { Asset, AssetState } from './asset-input.data';
+
+interface Props {
+  state: AssetState;
+  translations: {
+    balance: string;
+  };
+  onAmountChange?: (asset: Readonly<Asset>, amount: string) => void;
+}
+
+export const SimpleAssetInput = ({
+  state,
+  translations,
+  onAmountChange,
+}: Readonly<Props>): JSX.Element => (
+  <div className={cx.root}>
+    <Box className={cx.amountBox}>
+      <AmountInput
+        id={state.asset.id}
+        value={state.asset.amount}
+        alignment={AmountInputAlignments.left}
+        onChange={(value): void => {
+          onAmountChange?.(state.asset, value);
+        }}
+      />
+    </Box>
+    <Box className={cx.balance}>
+      <Text.Body.Normal color="secondary">
+        {translations.balance}: {state.asset.balance}
+      </Text.Body.Normal>
+    </Box>
+    {state.type === 'invalid' && (
+      <Box className={cx.error}>
+        <Text.Label
+          color="error"
+          data-testid={`asset-input-error-${state.asset.id}`}
+        >
+          {state.error}
+        </Text.Label>
+      </Box>
+    )}
+  </div>
+);

src/design-system/asset-input/simple-asset-input.css.ts

@@ -0,0 +1,25 @@
+import { sx, style, vars } from '../../design-tokens';
+
+export const root = style([
+  sx({
+    width: '$fill',
+    rowGap: '$10',
+  }),
+  {
+    background: vars.colors.$input_container_bgColor,
+    borderRadius: vars.radius.$medium,
+    padding: `${vars.spacing.$16} ${vars.spacing.$20}`,
+    display: 'grid',
+    gridTemplateAreas: `
+    "amount amount"
+    "balance balance"
+    "error ."
+  `,
+  },
+]);
+
+export const amountBox = style({ gridArea: 'amount' });
+
+export const balance = style({ gridArea: 'balance' });
+
+export const error = style({ gridArea: 'error' });

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 } from './asset-input';
+export { AssetInput, SimpleAssetInput } from './asset-input';
 export { BundleInput } from './bundle-input';
 export * as SubNavigation from './sub-navigation';
 export * as NavigationButton from './navigation-buttons';