feat(ui): [LW 9028] Multi wallet UI elements

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

@@ -0,0 +1,29 @@
+import type { Asset, AssetState } from './asset-input.data';
+
+export const asset: Asset = {
+  balance: String(10_000_000),
+  amount: '',
+  id: '',
+  ticker: 'Token',
+  fiat: {
+    value: '0',
+    ticker: 'USD',
+  },
+};
+
+export const validState = (id = '1'): AssetState => ({
+  type: 'valid',
+  asset: {
+    ...asset,
+    id,
+  },
+});
+
+export const invalidState = (id = '1'): AssetState => ({
+  type: 'invalid',
+  asset: {
+    ...asset,
+    id,
+  },
+  error: 'Insufficient balance',
+});

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

@@ -4,14 +4,20 @@ import { expect } from '@storybook/jest';
 import type { ComponentStory, Meta } from '@storybook/react';
 import { within, userEvent } from '@storybook/testing-library';
 
-import { ThemeColorScheme, LocalThemeProvider } from '../../design-tokens';
 import { sleep } from '../../test';
-import { page, Section, Variants } from '../decorators';
+import {
+  page,
+  Section,
+  Variants,
+  UIStateTable,
+  ColorSchemaTable,
+} from '../decorators';
 import { Divider } from '../divider';
 import { Grid } from '../grid';
 import { Cell } from '../grid/cell.component';
 
 import { AssetInput } from './asset-input.component';
+import { invalidState, validState } from './asset-input.fixtures';
 import { MaxButton } from './max-button.component';
 
 import type { Asset, AssetState } from './asset-input.data';
@@ -24,43 +30,15 @@ export default {
   decorators: [page({ title: 'Asset Input', subtitle })],
 } as Meta;
 
-const asset: Asset = {
-  balance: String(10_000_000),
-  amount: '',
-  id: '',
-  ticker: 'Token',
-  fiat: {
-    value: '0',
-    ticker: 'USD',
-  },
-};
-
-const validState = (id = '1'): AssetState => ({
-  type: 'valid',
-  asset: {
-    ...asset,
-    id,
-  },
-});
-
-const invalidState = (id = '1'): AssetState => ({
-  type: 'invalid',
-  asset: {
-    ...asset,
-    id,
-  },
-  error: 'Insufficient balance',
-});
-
-const MainComponents = (): JSX.Element => (
+const AssetInputMainComponents = (): JSX.Element => (
   <Variants.Row>
     <Variants.Cell>
       <AssetInput state={validState('1')} />
     </Variants.Cell>
   </Variants.Row>
 );
 
-const SecondaryItems = (): JSX.Element => (
+const AssetInputUIStates = (): JSX.Element => (
   <>
     <Variants.Row>
       <Variants.Cell>
@@ -99,29 +77,17 @@ export const Overview = (): JSX.Element => (
       <Divider my="$64" />
 
       <Section title="Main components">
-        <Variants.Table headers={['Rest']}>
-          <MainComponents />
-        </Variants.Table>
-        <LocalThemeProvider colorScheme={ThemeColorScheme.Dark}>
-          <Variants.Table>
-            <MainComponents />
-          </Variants.Table>
-        </LocalThemeProvider>
+        <ColorSchemaTable headers={['Rest']}>
+          <AssetInputMainComponents />
+        </ColorSchemaTable>
       </Section>
 
       <Divider my="$64" />
 
       <Section title="Secondary items">
-        <Variants.Table
-          headers={['Rest', 'Hover', 'Active / pressed', 'Disabled', 'Focused']}
-        >
-          <SecondaryItems />
-        </Variants.Table>
-        <LocalThemeProvider colorScheme={ThemeColorScheme.Dark}>
-          <Variants.Table>
-            <SecondaryItems />
-          </Variants.Table>
-        </LocalThemeProvider>
+        <UIStateTable>
+          <AssetInputUIStates />
+        </UIStateTable>
       </Section>
     </Cell>
   </Grid>

packages/ui/src/design-system/bundle-input/bundle-input.stories.tsx

@@ -4,9 +4,15 @@ import { expect } from '@storybook/jest';
 import type { ComponentStory, Meta } from '@storybook/react';
 import { within, userEvent } from '@storybook/testing-library';
 
-import { ThemeColorScheme, LocalThemeProvider } from '../../design-tokens';
 import { sleep } from '../../test';
-import { page, Section, Variants } from '../decorators';
+import { invalidState, validState } from '../asset-input/asset-input.fixtures';
+import {
+  page,
+  Section,
+  Variants,
+  UIStateTable,
+  ColorSchemaTable,
+} from '../decorators';
 import { Divider } from '../divider';
 import { Grid } from '../grid';
 import { Cell } from '../grid/cell.component';
@@ -24,43 +30,15 @@ export default {
   decorators: [page({ title: 'Bundle input', subtitle })],
 } as Meta;
 
-const asset: Asset = {
-  balance: String(10_000_000),
-  amount: '',
-  id: '',
-  ticker: 'Token',
-  fiat: {
-    value: '0',
-    ticker: 'USD',
-  },
-};
-
-const validState = (id = '1'): AssetState => ({
-  type: 'valid',
-  asset: {
-    ...asset,
-    id,
-  },
-});
-
-const invalidState = (id = '1'): AssetState => ({
-  type: 'invalid',
-  asset: {
-    ...asset,
-    id,
-  },
-  error: 'Insufficient balance',
-});
-
-const MainComponents = (): JSX.Element => (
+const BundleInputMainComponents = (): JSX.Element => (
   <Variants.Row>
     <Variants.Cell>
       <BundleInput state={[validState('1'), validState('2')]} />
     </Variants.Cell>
   </Variants.Row>
 );
 
-const SecondaryItems = (): JSX.Element => (
+const RemoveButtonUIStates = (): JSX.Element => (
   <>
     <Variants.Row>
       <Variants.Cell>
@@ -122,29 +100,17 @@ export const Overview = (): JSX.Element => (
       <Divider my="$64" />
 
       <Section title="Main components">
-        <Variants.Table headers={['Rest']}>
-          <MainComponents />
-        </Variants.Table>
-        <LocalThemeProvider colorScheme={ThemeColorScheme.Dark}>
-          <Variants.Table>
-            <MainComponents />
-          </Variants.Table>
-        </LocalThemeProvider>
+        <ColorSchemaTable headers={['Rest']}>
+          <BundleInputMainComponents />
+        </ColorSchemaTable>
       </Section>
 
       <Divider my="$64" />
 
       <Section title="Secondary items">
-        <Variants.Table
-          headers={['Rest', 'Hover', 'Active / pressed', 'Disabled', 'Focused']}
-        >
-          <SecondaryItems />
-        </Variants.Table>
-        <LocalThemeProvider colorScheme={ThemeColorScheme.Dark}>
-          <Variants.Table>
-            <SecondaryItems />
-          </Variants.Table>
-        </LocalThemeProvider>
+        <UIStateTable>
+          <RemoveButtonUIStates />
+        </UIStateTable>
       </Section>
     </Cell>
   </Grid>

packages/ui/src/design-system/buttons/buttons.stories.tsx

@@ -3,8 +3,7 @@ import React from 'react';
 import type { Meta } from '@storybook/react';
 
 import { ReactComponent as QuestionMark } from '../../assets/icons/question-mark.component.svg';
-import { ThemeColorScheme, LocalThemeProvider } from '../../design-tokens';
-import { Variants, Section, page } from '../decorators';
+import { Variants, Section, page, UIStateTable } from '../decorators';
 import { Divider } from '../divider';
 import { Grid, Cell } from '../grid';
 
@@ -161,17 +160,9 @@ export const Overview = (): JSX.Element => (
         <Divider my="$64" />
       </Section>
       <Section title="Main components">
-        <Variants.Table
-          headers={['Rest', 'Hover', 'Active / pressed', 'Disabled', 'Focused']}
-        >
+        <UIStateTable>
           <Buttons />
-        </Variants.Table>
-
-        <LocalThemeProvider colorScheme={ThemeColorScheme.Dark}>
-          <Variants.Table>
-            <Buttons />
-          </Variants.Table>
-        </LocalThemeProvider>
+        </UIStateTable>
       </Section>
     </Cell>
   </Grid>

packages/ui/src/design-system/buttons/skeleton-button.tsx

@@ -20,16 +20,41 @@ export type ButtonProps = OmitClassName<'button'> & {
   label?: string;
   icon?: ReactNode;
   w?: Pick<Sx, 'w'>['w'];
-  size?: 'medium' | 'small';
+  size?: 'extraSmall' | 'medium' | 'small';
+  as?: React.ElementType;
 };
 
 export const SkeletonButton = forwardRef<HTMLButtonElement, ButtonProps>(
   (
-    { id, disabled, className, label, icon, w, size = 'medium', ...props },
+    {
+      id,
+      disabled,
+      className,
+      label,
+      icon,
+      w,
+      size = 'medium',
+      as = 'button',
+      ...props
+    },
     forwardReference,
   ) => {
+    const heights = {
+      medium: '$48',
+      small: '$40',
+      extraSmall: '$24',
+    };
+
+    const radius = {
+      medium: '$medium',
+      small: '$small',
+      extraSmall: '$extraSmall',
+    };
+
+    const Component = as;
+
     return (
-      <button
+      <Component
         {...props}
         id={id}
         disabled={disabled}
@@ -38,8 +63,8 @@ export const SkeletonButton = forwardRef<HTMLButtonElement, ButtonProps>(
             w,
             // TODO: rework into styleVariants, don't forget primaryButton's :before borderRadius
             // https://vanilla-extract.style/documentation/api/style-variants/#stylevariants
-            height: size === 'small' ? '$40' : '$48',
-            borderRadius: size === 'small' ? '$small' : '$medium',
+            height: heights[size] as Sx['height'],
+            borderRadius: radius[size] as Sx['borderRadius'],
           }),
           className.container,
         )}
@@ -58,7 +83,7 @@ export const SkeletonButton = forwardRef<HTMLButtonElement, ButtonProps>(
             <Text.Button className={className.label}>{label}</Text.Button>
           )}
         </Flex>
-      </button>
+      </Component>
     );
   },
 );