Merge pull request #59 from input-output-hk/feat/lw-9231-add-simple-asset-input

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 './types';
 
 interface Props {
+  alignment?: AmountInputAlignments;
   onChange?: (value: string) => void;
   value?: string;
   id: string;
 }
 
 export const AmountInput = ({
+  alignment = '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,11 @@ export const amountInputSizer = style([
   },
 ]);
 
-export const amountInput = style([
+const amountInputBase = style([
   inputTypography,
   bold,
   {
     gridArea: '1 / 2',
-    textAlign: 'right',
     border: 'none',
     width: 'auto',
     background: 'none',
@@ -39,3 +40,18 @@ export const amountInput = style([
     },
   },
 ]);
+
+export const amountInput = styleVariants({
+  left: [
+    amountInputBase,
+    {
+      textAlign: 'left',
+    },
+  ],
+  right: [
+    amountInputBase,
+    {
+      textAlign: 'right',
+    },
+  ],
+});

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

@@ -9,13 +9,13 @@ import * as cx from './asset-input.css';
 import { MaxButton } from './max-button.component';
 import { TickerButton } from './ticker-button.component';
 
-import type { Asset, AssetState } from './asset-input.data';
+import type { AssetWithFiat, AssetState } from './asset-input.data';
 
 interface Props {
   state: AssetState;
-  onTickerClick?: (asset: Readonly<Asset>) => void;
-  onAmountChange?: (asset: Readonly<Asset>, amount: string) => void;
-  onMaxClick?: (asset: Readonly<Asset>) => void;
+  onTickerClick?: (asset: Readonly<AssetWithFiat>) => void;
+  onAmountChange?: (asset: Readonly<AssetWithFiat>, amount: string) => void;
+  onMaxClick?: (asset: Readonly<AssetWithFiat>) => void;
 }
 
 export const AssetInput = ({

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

@@ -3,15 +3,18 @@ export interface Asset {
   ticker: string;
   balance: string;
   amount: string;
+}
+
+export interface AssetWithFiat extends Asset {
   fiat: {
     value: string;
     ticker: string;
   };
 }
 
-export type AssetState =
+export type AssetState<A extends Asset = AssetWithFiat> =
   | {
       type: 'valid';
-      asset: Asset;
+      asset: A;
     }
-  | { type: 'invalid'; asset: Asset; error: string };
+  | { type: 'invalid'; asset: A; error: string };

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

@@ -1,6 +1,6 @@
-import type { Asset, AssetState } from './asset-input.data';
+import type { AssetWithFiat, AssetState } from './asset-input.data';
 
-export const asset: Asset = {
+export const asset: AssetWithFiat = {
   balance: String(10_000_000),
   amount: '',
   id: '',

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

@@ -13,14 +13,14 @@ 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';
+import type { AssetWithFiat, AssetState } from './asset-input.data';
 
 const subtitle = ``;
 
@@ -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 - valid',
+            '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')}
+                balanceLabel="Balance Available"
+              />
+            </Variants.Cell>
+            <Variants.Cell>
+              <SimpleAssetInput
+                state={invalidState('1')}
+                balanceLabel="Balance Available"
+              />
+            </Variants.Cell>
           </Variants.Row>
         </Variants.Table>
       </Section>
@@ -105,14 +122,17 @@ type Interactions = ComponentStory<typeof AssetInput>;
 export const Interactions: Interactions = (): JSX.Element => {
   const [state, setState] = useState<AssetState>(validState('1'));
 
-  const onTickerClick = (asset: Readonly<Asset>): void => {
+  const onTickerClick = (asset: Readonly<AssetWithFiat>): void => {
     setState(currentState => ({
       ...currentState,
       asset: { ...currentState.asset, ticker: `Token ${asset.id}` },
     }));
   };
 
-  const onAmountChange = (asset: Readonly<Asset>, amount: string): void => {
+  const onAmountChange = (
+    asset: Readonly<AssetWithFiat>,
+    amount: string,
+  ): void => {
     setState(currentState => {
       if (currentState.asset.id !== asset.id) {
         return currentState;
@@ -141,7 +161,7 @@ export const Interactions: Interactions = (): JSX.Element => {
     });
   };
 
-  const onMaxClick = (asset: Readonly<Asset>): void => {
+  const onMaxClick = (asset: Readonly<AssetWithFiat>): void => {
     setState(currentState => {
       return {
         ...currentState,

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,49 @@
+import React from 'react';
+
+import { Box } from '../box';
+import { Text } from '../text';
+
+import { AmountInput } from './amount-input.component';
+import * as cx from './simple-asset-input.css';
+
+import type { Asset, AssetState } from './asset-input.data';
+
+interface Props {
+  state: AssetState<Asset>;
+  balanceLabel: string;
+  onAmountChange?: (asset: Readonly<Asset>, amount: string) => void;
+}
+
+export const SimpleAssetInput = ({
+  state,
+  balanceLabel,
+  onAmountChange,
+}: Readonly<Props>): JSX.Element => (
+  <div className={cx.root}>
+    <Box className={cx.amountBox}>
+      <AmountInput
+        id={state.asset.id}
+        value={state.asset.amount}
+        alignment="left"
+        onChange={(value): void => {
+          onAmountChange?.(state.asset, value);
+        }}
+      />
+    </Box>
+    <Box className={cx.balance}>
+      <Text.Body.Normal color="secondary">
+        {balanceLabel}: {state.asset.balance} {state.asset.ticker}
+      </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/asset-input/types.ts

@@ -0,0 +1 @@
+export type AmountInputAlignments = 'left' | 'right';