Merge branch 'main' into feat/add-testids-for-textbox

Author: wklos-iohk

.github/workflows/ci.yml

@@ -16,7 +16,7 @@ concurrency:
 jobs:
   verify:
     name: Verify
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     steps:
       - name: Checkout
         uses: actions/checkout@v4

.github/workflows/git-checks.yml

@@ -7,7 +7,7 @@ on:
 jobs:
   block-fixup:
     if: github.event.pull_request.draft == false
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
 
     steps:
       - uses: actions/checkout@v4

.github/workflows/publish.yml

@@ -13,7 +13,7 @@ jobs:
   publish:
     name: Publish
     if: github.event_name == 'push' && !startsWith(github.event.head_commit.message, 'chore(release):')
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     steps:
       - name: Checkout
         uses: actions/checkout@v4

.releaserc

@@ -3,7 +3,12 @@
     "main"
   ],
   "plugins": [
-    "@semantic-release/commit-analyzer",
+    [
+      "@semantic-release/commit-analyzer",
+      {
+        "preset": "conventionalcommits",
+      }
+    ],
     "@semantic-release/release-notes-generator",
     "@semantic-release/changelog",
     "@semantic-release/npm",

CHANGELOG.md

@@ -1,3 +1,149 @@
+# [3.3.0](https://github.com/input-output-hk/lace-ui-toolkit/compare/v3.2.7...v3.3.0) (2025-03-24)
+
+
+### Features
+
+* allow passing elements to asset table props ([ee6609d](https://github.com/input-output-hk/lace-ui-toolkit/commit/ee6609d15604c1b1d210a3f264430fc5c60a35c3))
+
+## [3.2.7](https://github.com/input-output-hk/lace-ui-toolkit/compare/v3.2.6...v3.2.7) (2025-03-05)
+
+
+### Bug Fixes
+
+* optional Tooltip props [LW-12407] ([6731b2f](https://github.com/input-output-hk/lace-ui-toolkit/commit/6731b2f5b5e90b08a8bb3b04c73a64969f9f953e))
+
+## [3.2.6](https://github.com/input-output-hk/lace-ui-toolkit/compare/v3.2.5...v3.2.6) (2025-02-14)
+
+
+### Bug Fixes
+
+* simple asset input text terminating in the middle of container ([7015872](https://github.com/input-output-hk/lace-ui-toolkit/commit/701587267adfa2df7e6881666d2ef89b835c328b))
+
+## [3.2.5](https://github.com/input-output-hk/lace-ui-toolkit/compare/v3.2.4...v3.2.5) (2025-02-14)
+
+
+### Bug Fixes
+
+* apply popup styles on smaller screens [LW-12311] ([a045b32](https://github.com/input-output-hk/lace-ui-toolkit/commit/a045b32fdcf74d76b6a9afd7bca62e691692f816))
+
+## [3.2.4](https://github.com/input-output-hk/lace-ui-toolkit/compare/v3.2.3...v3.2.4) (2025-02-13)
+
+
+### Bug Fixes
+
+* expand simple asset input to occupy 100% width ([c8bd477](https://github.com/input-output-hk/lace-ui-toolkit/commit/c8bd477406c9c7dcd2cfb9fa0dbe47ee02b9066a))
+
+## [3.2.3](https://github.com/input-output-hk/lace-ui-toolkit/compare/v3.2.2...v3.2.3) (2025-02-13)
+
+
+### Bug Fixes
+
+* truncate profile dropdown trigger title [LW-12306] ([0b1f07f](https://github.com/input-output-hk/lace-ui-toolkit/commit/0b1f07f0f53e5f79070c7a3100f8239f5ad7a5f5))
+
+## [3.2.2](https://github.com/input-output-hk/lace-ui-toolkit/compare/v3.2.1...v3.2.2) (2025-02-13)
+
+
+### Bug Fixes
+
+* truncate wallet option title [LW-12306] ([8b789cb](https://github.com/input-output-hk/lace-ui-toolkit/commit/8b789cb09120bfaa80483201cf36f25030cee635))
+
+## [3.2.1](https://github.com/input-output-hk/lace-ui-toolkit/compare/v3.2.0...v3.2.1) (2025-02-03)
+
+
+### Bug Fixes
+
+* improve theme adaptation for edit icon ([9606ee4](https://github.com/input-output-hk/lace-ui-toolkit/commit/9606ee4f45562b8ad07d8f00df2a27d632764722))
+
+# [3.2.0](https://github.com/input-output-hk/lace-ui-toolkit/compare/v3.1.0...v3.2.0) (2025-02-03)
+
+
+### Features
+
+* add edit to wallet option ([2e4be3d](https://github.com/input-output-hk/lace-ui-toolkit/commit/2e4be3d41f994601aaaf14780f38261b6d772cfb))
+
+# [3.1.0](https://github.com/input-output-hk/lace-ui-toolkit/compare/v3.0.0...v3.1.0) (2024-12-13)
+
+
+### Features
+
+* support TokenAmount details tooltip [LW-11733] ([4836445](https://github.com/input-output-hk/lace-ui-toolkit/commit/4836445eda672f3bff63f98b7474b93af58932dd))
+
+# [3.0.0](https://github.com/input-output-hk/lace-ui-toolkit/compare/v2.0.0...v3.0.0) (2024-12-11)
+
+
+* feat!: make token amount details configurable [LW-11733] ([bfab9e7](https://github.com/input-output-hk/lace-ui-toolkit/commit/bfab9e7440ecbe022706e75b093fcfce4d066172))
+
+
+### BREAKING CHANGES
+
+* TokenAmount props changed from a simple fiatPrice prop
+to a more flexible "details" prop which can further be customized by
+passing "detailsColor" and "detailsWeight" to cover more scenarios
+
+# [2.0.0](https://github.com/input-output-hk/lace-ui-toolkit/compare/v1.24.0...v2.0.0) (2024-11-21)
+
+# [1.24.0](https://github.com/input-output-hk/lace-ui-toolkit/compare/v1.23.0...v1.24.0) (2024-10-18)
+
+
+### Features
+
+* add clock and exclamation mark icons [LW-9231] ([a66cff7](https://github.com/input-output-hk/lace-ui-toolkit/commit/a66cff7853b88a53c7e7b8bcb6d2c30b1f73a02f))
+
+# [1.23.0](https://github.com/input-output-hk/lace-ui-toolkit/compare/v1.22.0...v1.23.0) (2024-10-11)
+
+
+### Features
+
+* improve simple asset input [LW-9231] ([e424a0f](https://github.com/input-output-hk/lace-ui-toolkit/commit/e424a0fb88a9fa1075bcf595a12b180ad03fca8a))
+
+# [1.22.0](https://github.com/input-output-hk/lace-ui-toolkit/compare/v1.21.0...v1.22.0) (2024-10-10)
+
+
+### Features
+
+* add simple version of asset input [LW-9231] ([f3ca7f1](https://github.com/input-output-hk/lace-ui-toolkit/commit/f3ca7f18803bcf5f6985d031829cf224a1541b5b))
+
+# [1.21.0](https://github.com/input-output-hk/lace-ui-toolkit/compare/v1.20.0...v1.21.0) (2024-09-24)
+
+
+### Features
+
+* add data-testid to toggle-switch component [LW-11556] ([6726320](https://github.com/input-output-hk/lace-ui-toolkit/commit/672632027a461a9f8b3f22b0ba0356fb89beb755))
+
+# [1.20.0](https://github.com/input-output-hk/lace-ui-toolkit/compare/v1.19.0...v1.20.0) (2024-09-13)
+
+
+### Features
+
+* add data-testid to sideDrawer [LW-11491] ([a38aaa8](https://github.com/input-output-hk/lace-ui-toolkit/commit/a38aaa82fdc6488bbc68d7f29af3007b166be293))
+
+# [1.19.0](https://github.com/input-output-hk/lace-ui-toolkit/compare/v1.18.2...v1.19.0) (2024-09-11)
+
+
+### Bug Fixes
+
+* replace data-testid attributes with props ([bea9c01](https://github.com/input-output-hk/lace-ui-toolkit/commit/bea9c019048a80b94e90db998be7ad3bb03985b9))
+
+
+### Features
+
+* add testId prop to TextLink ([5af6152](https://github.com/input-output-hk/lace-ui-toolkit/commit/5af61524073bb54a740c630592ee2ad1d1da838b))
+
+## [1.18.2](https://github.com/input-output-hk/lace-ui-toolkit/compare/v1.18.1...v1.18.2) (2024-09-11)
+
+
+### Bug Fixes
+
+* fix profile dropdown wallet icon test id ([54aaf0c](https://github.com/input-output-hk/lace-ui-toolkit/commit/54aaf0cb10b22f3700fc98e944319c04cb54b1fb))
+* fix table body test id ([3d7d47e](https://github.com/input-output-hk/lace-ui-toolkit/commit/3d7d47ec7a1dc2e8e25a126e7d215dd8bbc28623))
+
+## [1.18.1](https://github.com/input-output-hk/lace-ui-toolkit/compare/v1.18.0...v1.18.1) (2024-09-11)
+
+
+### Bug Fixes
+
+* box component now has a new property testId what will be rendered in the data-testid prop ([e0a9e71](https://github.com/input-output-hk/lace-ui-toolkit/commit/e0a9e7112d2bfc709bf3696fb039f73f695cc1ad))
+
 # [1.18.0](https://github.com/input-output-hk/lace-ui-toolkit/compare/v1.17.0...v1.18.0) (2024-08-27)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@input-output-hk/lace-ui-toolkit",
-  "version": "1.18.0",
+  "version": "3.3.0",
   "description": "Lace UI Toolkit",
   "homepage": "https://github.com/input-output-hk/lace-ui-toolkit/blob/main/README.md",
   "bugs": {

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

@@ -1,29 +1,40 @@
 import React from 'react';
 
+import cn from 'classnames';
+
 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;
+  testId?: string;
+  className?: string;
+  inputClassName?: string;
 }
 
 export const AmountInput = ({
+  alignment = 'right',
   onChange,
   value,
   id,
+  testId,
+  className,
+  inputClassName,
 }: Readonly<Props>): JSX.Element => {
   return (
-    <Box className={cx.amountInputSizer} data-value={value}>
+    <Box className={cn(cx.amountInputSizer, className)} data-value={value}>
       <input
-        className={cx.amountInput}
+        className={cn(cx.amountInput[alignment], inputClassName)}
         value={value}
         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/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 };