@iota/apps-ui-kit 0.7.2 → 0.8.0

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "@iota/apps-ui-kit",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "sideEffects": false,
-  "repository": {
-    "type": "git",
-    "url": "github.com:iotaledger/iota.git"
-  },
+  "repository": "https://github.com/iotaledger/iota",
   "license": "Apache-2.0",
   "files": [
     "CHANGELOG.md",
@@ -30,7 +27,7 @@
     "classnames": "^2.5.1",
     "lodash.merge": "^4.6.2",
     "react-number-format": "^5.2.2",
-    "@iota/apps-ui-icons": "0.4.1"
+    "@iota/apps-ui-icons": "0.6.0"
   },
   "peerDependencies": {
     "react": "^18 || ^19",

package/src/lib/components/atoms/button/Button.tsx

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { ButtonHtmlType, ButtonSize, ButtonType } from './button.enums';
+import { forwardRef } from 'react';
 import {
     PADDINGS,
     PADDINGS_ONLY_ICON,
@@ -60,41 +61,50 @@ export interface ButtonProps {
     testId?: string;
 }
 
-export function Button({
-    icon,
-    text,
-    disabled,
-    onClick,
-    fullWidth,
-    htmlType = ButtonHtmlType.Button,
-    size = ButtonSize.Medium,
-    type = ButtonType.Primary,
-    iconAfterText = false,
-    tabIndex = 0,
-    testId,
-}: ButtonProps): React.JSX.Element {
-    const paddingClasses = icon && !text ? PADDINGS_ONLY_ICON[size] : PADDINGS[size];
-    const textSizes = TEXT_CLASSES[size];
-    const backgroundColors = disabled ? DISABLED_BACKGROUND_COLORS[type] : BACKGROUND_COLORS[type];
-    const textColors = disabled ? TEXT_COLOR_DISABLED[type] : TEXT_COLORS[type];
-    return (
-        <button
-            onClick={onClick}
-            type={htmlType}
-            className={cx(
-                'state-layer relative flex items-center justify-center gap-2 rounded-full transition-all duration-150 ease-in disabled:cursor-not-allowed disabled:opacity-40',
-                paddingClasses,
-                backgroundColors,
-                fullWidth && 'w-full',
-                !iconAfterText ? 'flex-row' : 'flex-row-reverse',
-                `btn btn-${type}`,
-            )}
-            disabled={disabled}
-            tabIndex={tabIndex}
-            data-testid={testId}
-        >
-            {icon && <span className={cx(textColors)}>{icon}</span>}
-            {text && <span className={cx('font-inter', textColors, textSizes)}>{text}</span>}
-        </button>
-    );
-}
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+    (
+        {
+            icon,
+            text,
+            disabled,
+            onClick,
+            fullWidth,
+            htmlType = ButtonHtmlType.Button,
+            size = ButtonSize.Medium,
+            type = ButtonType.Primary,
+            iconAfterText = false,
+            tabIndex = 0,
+            testId,
+        },
+        ref,
+    ): React.JSX.Element => {
+        const paddingClasses = icon && !text ? PADDINGS_ONLY_ICON[size] : PADDINGS[size];
+        const textSizes = TEXT_CLASSES[size];
+        const backgroundColors = disabled
+            ? DISABLED_BACKGROUND_COLORS[type]
+            : BACKGROUND_COLORS[type];
+        const textColors = disabled ? TEXT_COLOR_DISABLED[type] : TEXT_COLORS[type];
+
+        return (
+            <button
+                ref={ref}
+                onClick={onClick}
+                type={htmlType}
+                className={cx(
+                    'state-layer relative flex items-center justify-center gap-2 rounded-full transition-all duration-150 ease-in disabled:cursor-not-allowed disabled:opacity-40',
+                    paddingClasses,
+                    backgroundColors,
+                    fullWidth && 'w-full',
+                    !iconAfterText ? 'flex-row' : 'flex-row-reverse',
+                    `btn btn-${type}`,
+                )}
+                disabled={disabled}
+                tabIndex={tabIndex}
+                data-testid={testId}
+            >
+                {icon && <span className={cx(textColors)}>{icon}</span>}
+                {text && <span className={cx('font-inter', textColors, textSizes)}>{text}</span>}
+            </button>
+        );
+    },
+);

package/src/lib/components/atoms/radio-button/RadioButton.tsx

@@ -5,10 +5,26 @@ import cx from 'classnames';
 import { RadioOn, RadioOff } from '@iota/apps-ui-icons';
 
 interface RadioButtonProps {
+    /**
+     * The id of the radio button.
+     */
+    id?: string;
+    /**
+     * The name of the radio button.
+     */
+    name?: string;
     /**
      * The label of the radio button.
      */
     label: string;
+    /**
+     * Supporting text for the label.
+     */
+    supportingLabel?: string;
+    /**
+     * The body text of the radio button.
+     */
+    body?: string;
     /**
      * The state of the radio button.
      */
@@ -24,7 +40,11 @@ interface RadioButtonProps {
 }
 
 function RadioButton({
+    id,
+    name,
     label,
+    supportingLabel,
+    body,
     isChecked,
     isDisabled,
     onChange,
@@ -33,30 +53,50 @@ function RadioButton({
 
     return (
         <label
-            className={cx('flex flex-row gap-x-1 text-center has-[:disabled]:opacity-40', {
-                disabled: isDisabled,
-                'cursor-pointer': !isDisabled,
-            })}
+            className={cx(
+                'flex flex-row items-center gap-x-1 text-center has-[:disabled]:opacity-40',
+                {
+                    disabled: isDisabled,
+                    'cursor-pointer': !isDisabled,
+                },
+            )}
         >
             <div
-                className={cx('relative flex h-10 w-10 items-center justify-center rounded-full', {
-                    'state-layer-secondary': !isDisabled,
-                })}
+                className={cx(
+                    'relative flex h-10 w-10 shrink-0 items-center justify-center rounded-full',
+                    {
+                        'state-layer-secondary': !isDisabled,
+                    },
+                )}
             >
                 <input
+                    id={id}
+                    name={name}
                     type="radio"
                     checked={isChecked}
                     onChange={onChange}
                     disabled={isDisabled}
                     className={cx('peer appearance-none')}
                 />
-                <span className="radio-icon-color peer-checked:radio-icon-checked-color peer-checked:peer-disabled:radio-icon-checked-disabled-color absolute [&_svg]:h-6 [&_svg]:w-6">
-                    <RadioIcon />
+                <span className="radio-icon-color peer-checked:radio-icon-checked-color peer-checked:peer-disabled:radio-icon-checked-disabled-color absolute size-6">
+                    <RadioIcon className="size-full" />
+                </span>
+            </div>
+            <div className="flex flex-col items-start gap-xxs text-start">
+                <span className="radio-label-color inline-flex items-center justify-center gap-1 text-label-lg">
+                    {label}
+                    {supportingLabel && (
+                        <span className="text-iota-neutral-60 dark:text-iota-neutral-40">
+                            {supportingLabel}
+                        </span>
+                    )}
                 </span>
+                {body && (
+                    <p className="text-body-sm text-iota-neutral-40 dark:text-iota-neutral-60">
+                        {body}
+                    </p>
+                )}
             </div>
-            <span className="radio-label-color inline-flex items-center justify-center text-label-lg ">
-                {label}
-            </span>
         </label>
     );
 }

package/src/lib/components/molecules/account/Account.tsx

@@ -125,13 +125,15 @@ export function Account({
                 },
             )}
         >
-            <div className="flex items-center space-x-3">
-                <Avatar isLocked={isLocked} />
-                <div className="flex flex-col items-start py-xs">
-                    <div className="flex items-center space-x-2">
-                        <span className="account-title-color font-inter text-title-md">
+            <div className="flex w-full items-center gap-x-3">
+                <div>
+                    <Avatar isLocked={isLocked} />
+                </div>
+                <div className="flex w-full min-w-0 flex-col items-start py-xs">
+                    <div className="flex w-full min-w-0 items-center space-x-2">
+                        <p className="account-title-color min-w-0 max-w-full truncate font-inter text-title-md">
                             {title}
-                        </span>
+                        </p>
                         {badgeText && badgeType ? (
                             badgeTooltipText ? (
                                 <Tooltip text={badgeTooltipText} position={badgeTooltipPosition}>
@@ -151,41 +153,42 @@ export function Account({
                         isExternal={isExternal}
                     />
                 </div>
-            </div>
-            <div className="z-10 ml-auto flex items-center space-x-2 [&_button]:h-5 [&_button]:w-5 [&_svg]:h-5 [&_svg]:w-5">
-                <div className="account-icon-color flex items-center space-x-2 [&_button:not(.locked)]:hidden group-hover:[&_button:not(.locked)]:flex">
-                    {onOptionsClick && (
-                        <ButtonUnstyled onClick={onOptionsClick}>
-                            <MoreHoriz />
+
+                <div className="ml-auto flex items-center space-x-2 [&_button]:h-5 [&_button]:w-5 [&_svg]:h-5 [&_svg]:w-5">
+                    <div className="account-icon-color flex items-center space-x-2 [&_button:not(.locked)]:invisible group-hover:[&_button:not(.locked)]:visible">
+                        {onOptionsClick && (
+                            <ButtonUnstyled onClick={onOptionsClick}>
+                                <MoreHoriz />
+                            </ButtonUnstyled>
+                        )}
+                        {onLockAccountClick &&
+                            onUnlockAccountClick &&
+                            (isLocked ? (
+                                <div className="flex items-center">
+                                    <ButtonUnstyled
+                                        onClick={onUnlockAccountClick}
+                                        testId="account-unlock"
+                                        className="locked"
+                                    >
+                                        <LockLocked />
+                                    </ButtonUnstyled>
+                                </div>
+                            ) : (
+                                <ButtonUnstyled onClick={onLockAccountClick} testId="account-lock">
+                                    <LockUnlocked />
+                                </ButtonUnstyled>
+                            ))}
+                    </div>
+                    {showSelected && (
+                        <ButtonUnstyled>
+                            {isSelected ? (
+                                <CheckmarkFilled className="account-check-active-color h-5 w-5" />
+                            ) : (
+                                <RadioOff className="account-check-inactive-color h-5 w-5" />
+                            )}
                         </ButtonUnstyled>
                     )}
-                    {onLockAccountClick &&
-                        onUnlockAccountClick &&
-                        (isLocked ? (
-                            <div className="flex items-center">
-                                <ButtonUnstyled
-                                    onClick={onUnlockAccountClick}
-                                    testId="account-unlock"
-                                    className="locked"
-                                >
-                                    <LockLocked />
-                                </ButtonUnstyled>
-                            </div>
-                        ) : (
-                            <ButtonUnstyled onClick={onLockAccountClick} testId="account-lock">
-                                <LockUnlocked />
-                            </ButtonUnstyled>
-                        ))}
                 </div>
-                {showSelected && (
-                    <ButtonUnstyled>
-                        {isSelected ? (
-                            <CheckmarkFilled className="account-check-active-color h-5 w-5" />
-                        ) : (
-                            <RadioOff className="account-check-inactive-color h-5 w-5" />
-                        )}
-                    </ButtonUnstyled>
-                )}
             </div>
         </div>
     );

package/src/lib/components/molecules/visual-asset-card/VisualAssetCard.tsx

@@ -71,15 +71,17 @@ export function VisualAssetCard({
             )}
             {isHoverable && onIconClick && (
                 <ButtonUnstyled
-                    className="visual-asset-icon-color absolute right-2 top-2 h-9 w-9 cursor-pointer rounded-full p-xs opacity-0 transition-opacity duration-300 group-hover:bg-shader-neutral-light-72 group-hover:opacity-100 [&_svg]:h-5 [&_svg]:w-5"
+                    className="visual-asset-icon-color absolute right-2 top-2 z-10 h-9 w-9 cursor-pointer rounded-full p-xs opacity-0 transition-opacity duration-300 group-hover:bg-shader-neutral-light-72 group-hover:opacity-100 [&_svg]:h-5 [&_svg]:w-5"
                     onClick={handleIconClick}
                 >
                     {icon}
                 </ButtonUnstyled>
             )}
             {isHoverable && assetTitle && (
-                <div className="absolute bottom-0 flex items-center justify-center p-xs opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                    <span className="visual-asset-title-color text-title-md">{assetTitle}</span>
+                <div className="absolute bottom-0 w-full p-xs opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+                    <span className="visual-asset-title-color break-words text-title-md">
+                        {assetTitle}
+                    </span>
                 </div>
             )}
         </div>

package/src/lib/index.ts

@@ -7,4 +7,3 @@ export * from './tailwind';
 export * from './components';
 export * from './constants';
 export * from './enums';
-export * from './utils';

package/src/lib/styles/base.css

@@ -114,6 +114,7 @@
 @supports selector(::-webkit-scrollbar) {
     *::-webkit-scrollbar {
         width: 0.875rem;
+        height: 0.875rem;
     }
 
     *::-webkit-scrollbar-track {
@@ -134,4 +135,10 @@
     .names *::-webkit-scrollbar-thumb {
         box-shadow: inset 0 0 10px 10px #3c4656;
     }
+
+    *::-webkit-scrollbar-corner,
+    .dark *::-webkit-scrollbar-corner,
+    .names *::-webkit-scrollbar-corner {
+        background: transparent;
+    }
 }

package/src/storybook/stories/atoms/RadioButton.stories.tsx

@@ -49,3 +49,22 @@ export const Default: Story = {
         },
     },
 };
+
+export const ExtendedRadioButton: Story = {
+    args: {
+        label: 'Label',
+        supportingLabel: '(Supporting label)',
+        body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    },
+    argTypes: {
+        label: {
+            control: 'text',
+        },
+        isChecked: {
+            control: 'boolean',
+        },
+        isDisabled: {
+            control: 'boolean',
+        },
+    },
+};

package/src/lib/utils/format.ts

@@ -1,8 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-export function truncate(value: string, startLength: number = 6, endLength: number = 6): string {
-    return value.length > startLength + endLength
-        ? `${value.slice(0, startLength)}...${value.slice(-endLength)}`
-        : value;
-}

package/src/lib/utils/index.ts

@@ -1,4 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-export * from './format';