@iota/apps-ui-kit 0.3.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iota/apps-ui-kit",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "repository": {
     "type": "git",
     "url": "github.com:iotaledger/iota.git"
@@ -30,7 +30,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-number-format": "^5.2.2",
-    "@iota/apps-ui-icons": "0.2.2"
+    "@iota/apps-ui-icons": "0.3.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.0",

package/src/lib/components/atoms/badge/badge.classes.ts

@@ -7,18 +7,27 @@ export const BACKGROUND_COLORS = {
     [BadgeType.PrimarySolid]: 'bg-primary-30',
     [BadgeType.Neutral]: 'bg-neutral-92 dark:bg-neutral-12',
     [BadgeType.PrimarySoft]: 'bg-primary-90 dark:bg-primary-10',
+    [BadgeType.Success]: 'bg-tertiary-90 dark:bg-tertiary-10',
+    [BadgeType.Warning]: 'bg-warning-90 dark:bg-warning-20',
+    [BadgeType.Error]: 'bg-error-90 dark:bg-error-10',
 };
 
 export const TEXT_COLORS: Record<BadgeType, string> = {
     [BadgeType.PrimarySolid]: 'text-primary-100',
     [BadgeType.Neutral]: 'text-neutral-10 dark:text-neutral-92',
     [BadgeType.PrimarySoft]: 'text-primary-20 dark:text-primary-90',
+    [BadgeType.Success]: 'text-tertiary-20 dark:text-tertiary-90',
+    [BadgeType.Warning]: 'text-warning-10 dark:text-warning-90',
+    [BadgeType.Error]: 'text-error-20 dark:text-error-90',
 };
 
 export const BORDER_COLORS: Record<BadgeType, string> = {
     [BadgeType.PrimarySolid]: 'border-primary-30',
     [BadgeType.Neutral]: 'border-neutral-92 dark:border-neutral-12',
     [BadgeType.PrimarySoft]: 'border-primary-90 dark:border-primary-10',
+    [BadgeType.Success]: 'border-tertiary-90 dark:border-tertiary-10',
+    [BadgeType.Warning]: 'border-warning-90 dark:border-warning-20',
+    [BadgeType.Error]: 'border-error-90 dark:border-error-10',
 };
 
 export const BADGE_TEXT_CLASS = 'text-label-md';

package/src/lib/components/atoms/badge/badge.enums.ts

@@ -5,4 +5,7 @@ export enum BadgeType {
     Neutral = 'neutral',
     PrimarySolid = 'primary-solid',
     PrimarySoft = 'primary-fill',
+    Success = 'success',
+    Warning = 'warning',
+    Error = 'error',
 }

package/src/lib/components/atoms/index.ts

@@ -20,3 +20,4 @@ export * from './visual-asset-card';
 export * from './loading-indicator';
 export * from './placeholder';
 export * from './skeleton';
+export * from './toggle';

package/src/lib/components/atoms/info-box/InfoBox.tsx

@@ -17,7 +17,7 @@ export interface InfoBoxProps {
     /**
      * The supporting text of the info box (optional).
      */
-    supportingText?: string;
+    supportingText?: React.ReactNode;
     /**
      * The type of the info box.
      */

package/src/lib/components/atoms/toggle/Toggle.tsx

@@ -0,0 +1,140 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { forwardRef, useRef } from 'react';
+import { ToggleLabelPosition, ToggleSize } from './toggle.enums';
+import {
+    TOGGLE,
+    TOGGLE_LABEL,
+    TOGGLE_SIZE,
+    TOGGLE_STATES,
+    TOGGLE_THUMB,
+    TOGGLE_THUMB_COLOR,
+    TOGGLE_THUMB_POSITION,
+    TOGGLE_THUMB_SIZE,
+    TOGGLE_CONTAINER,
+} from './toggle.classes';
+import cx from 'classnames';
+
+interface ToggleProps {
+    /**
+     * The label for the toggle.
+     */
+    label?: string | React.ReactNode;
+    /**
+     * The state of the toggle (on or off).
+     */
+    isToggled: boolean;
+    /**
+     * Whether the label should be placed before the toggle.
+     */
+    labelPosition?: ToggleLabelPosition;
+    /**
+     * If true, the toggle will be disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * The callback to call when the toggle state changes.
+     */
+    onChange?: (isToggled: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * The name and id of the toggle input.
+     */
+    name?: string;
+    /**
+     * The size of the toggle.
+     */
+    size?: ToggleSize;
+    /**
+     * The 'data-testid' attribute value (used in e2e tests)
+     */
+    testId?: string;
+}
+
+export const Toggle = forwardRef<HTMLInputElement, ToggleProps>(
+    (
+        {
+            label,
+            isToggled,
+            labelPosition = ToggleLabelPosition.Right,
+            isDisabled = false,
+            onChange,
+            name,
+            size = ToggleSize.Default,
+            testId,
+        }: ToggleProps,
+        ref,
+    ) => {
+        const inputRef = useRef<HTMLInputElement | null>(null);
+
+        function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+            const newChecked = e.target.checked;
+            onChange?.(newChecked, e);
+        }
+
+        function assignRefs(element: HTMLInputElement) {
+            if (ref) {
+                if (typeof ref === 'function') {
+                    ref(element);
+                } else {
+                    ref.current = element;
+                }
+            }
+            inputRef.current = element;
+        }
+
+        const toggleClasses = cx(TOGGLE, {
+            [TOGGLE_STATES.active]: isToggled && !isDisabled,
+            [TOGGLE_STATES.inactive]: !isToggled,
+            [TOGGLE_STATES.disabledActive]: isDisabled && isToggled,
+            [TOGGLE_STATES.disabled]: isDisabled,
+            [TOGGLE_SIZE[size]]: true,
+        });
+
+        const thumbClasses = cx(TOGGLE_THUMB, {
+            [TOGGLE_THUMB_POSITION[size].unchecked]: !isToggled,
+            [TOGGLE_THUMB_POSITION[size].checked]: isToggled,
+            [TOGGLE_THUMB_COLOR.unchecked]: !isToggled,
+            [TOGGLE_THUMB_COLOR.checked]: isToggled,
+            [TOGGLE_THUMB_SIZE[size]]: true,
+        });
+
+        const containerClasses = cx(TOGGLE_CONTAINER, {
+            'flex-row-reverse': labelPosition === ToggleLabelPosition.Left,
+            'cursor-not-allowed': isDisabled,
+        });
+        const labelClasses = cx(TOGGLE_LABEL, {
+            'opacity-40': isDisabled && !isToggled,
+        });
+
+        return (
+            <div className={containerClasses}>
+                <input
+                    id={name}
+                    name={name}
+                    type="checkbox"
+                    className="sr-only"
+                    checked={isToggled}
+                    ref={assignRefs}
+                    disabled={isDisabled}
+                    onChange={handleChange}
+                    data-testid={testId}
+                />
+
+                <span
+                    role="switch"
+                    onClick={() => inputRef.current?.click()}
+                    className={toggleClasses}
+                >
+                    <span className={thumbClasses} />
+                </span>
+
+                {label && (
+                    <label htmlFor={name} className={labelClasses}>
+                        {label}
+                    </label>
+                )}
+            </div>
+        );
+    },
+);

package/src/lib/components/atoms/toggle/index.ts

@@ -0,0 +1,6 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export { Toggle } from './Toggle';
+
+export * from './toggle.enums';

package/src/lib/components/atoms/toggle/toggle.classes.ts

@@ -0,0 +1,41 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { ToggleSize } from './toggle.enums';
+
+export const TOGGLE = 'relative inline-flex items-center p-xxs border rounded-full cursor-pointer';
+
+export const TOGGLE_STATES = {
+    active: 'bg-primary-30 border-primary-30',
+    inactive: 'bg-primary-100 dark:bg-neutral-6 border-neutral-70 dark:border-neutral-40',
+    disabledActive: 'bg-neutral-70 border-neutral-70',
+    disabled: 'opacity-40 cursor-not-allowed',
+};
+
+export const TOGGLE_SIZE = {
+    [ToggleSize.Small]: 'h-5 w-10',
+    [ToggleSize.Default]: 'h-6 w-12',
+};
+
+export const TOGGLE_THUMB = 'absolute rounded-full transition-all duration-200 ease-in';
+export const TOGGLE_THUMB_POSITION = {
+    [ToggleSize.Small]: {
+        unchecked: 'left-1',
+        checked: 'left-8 -translate-x-full',
+    },
+    [ToggleSize.Default]: {
+        unchecked: 'left-1',
+        checked: 'left-10 -translate-x-full',
+    },
+};
+export const TOGGLE_THUMB_COLOR = {
+    unchecked: 'bg-neutral-60',
+    checked: 'bg-white',
+};
+export const TOGGLE_THUMB_SIZE = {
+    [ToggleSize.Small]: 'h-3 w-3',
+    [ToggleSize.Default]: 'h-4 w-4',
+};
+
+export const TOGGLE_CONTAINER = 'inline-flex items-center gap-2';
+export const TOGGLE_LABEL = 'text-label-lg text-neutral-40 dark:text-neutral-60';

package/src/lib/components/atoms/toggle/toggle.enums.ts

@@ -0,0 +1,12 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum ToggleSize {
+    Small = 'small',
+    Default = 'default',
+}
+
+export enum ToggleLabelPosition {
+    Left = 'left',
+    Right = 'right',
+}

package/src/lib/components/molecules/card/CardBody.tsx

@@ -3,6 +3,7 @@
 import cx from 'classnames';
 
 import { ReactNode } from 'react';
+import { Tooltip, TooltipPosition } from '../../atoms';
 
 export type CardBodyProps = {
     title: string;
@@ -10,6 +11,8 @@ export type CardBodyProps = {
     clickableAction?: React.ReactNode;
     icon?: React.ReactNode;
     isTextTruncated?: boolean;
+    tooltipText?: string;
+    tooltipPosition?: TooltipPosition;
 };
 
 export function CardBody({
@@ -18,6 +21,8 @@ export function CardBody({
     clickableAction,
     icon,
     isTextTruncated,
+    tooltipText,
+    tooltipPosition,
 }: CardBodyProps) {
     const handleActionCardBodyClick = (event: React.MouseEvent) => {
         event?.stopPropagation();
@@ -40,7 +45,13 @@ export function CardBody({
                 >
                     {title}
                 </div>
-                {icon && <div className="flex items-center">{icon}</div>}
+                {tooltipText ? (
+                    <Tooltip text={tooltipText} position={tooltipPosition}>
+                        {icon}
+                    </Tooltip>
+                ) : (
+                    <div className="flex items-center">{icon}</div>
+                )}
                 {clickableAction && (
                     <div onClick={handleActionCardBodyClick} className="flex items-center">
                         {clickableAction}

package/src/lib/components/molecules/card/card.classes.ts

@@ -15,6 +15,7 @@ export const IMAGE_VARIANT_CLASSES: { [key in ImageShape]: string } = {
 export const IMAGE_BG_CLASSES: { [key in ImageType]: string } = {
     [ImageType.Placeholder]: '',
     [ImageType.BgSolid]: 'bg-neutral-96 dark:bg-neutral-10',
+    [ImageType.BgWhite]: 'bg-white dark:bg-neutral-6',
     [ImageType.BgTransparent]: '',
 };
 

package/src/lib/components/molecules/card/card.enums.ts

@@ -10,6 +10,7 @@ export enum CardType {
 export enum ImageType {
     Placeholder = 'placeholder',
     BgSolid = 'bg-solid',
+    BgWhite = 'bg-white',
     BgTransparent = 'bg-transparent',
 }
 

package/src/lib/components/molecules/search/Search.tsx

@@ -54,7 +54,7 @@ export interface SearchProps {
     /**
      * Render suggestion.
      */
-    renderSuggestion: (suggestion: Suggestion, index: number) => React.ReactNode;
+    renderSuggestion?: (suggestion: Suggestion, index: number) => React.ReactNode;
 }
 
 export function Search({
@@ -157,6 +157,9 @@ export function Search({
                 }
             }
         }
+        if (onKeyDown) {
+            onKeyDown(event);
+        }
     };
 
     return (
@@ -183,7 +186,7 @@ export function Search({
                 />
                 <SearchIcon />
             </div>
-            {showSuggestions && (
+            {showSuggestions && renderSuggestion && (
                 <div
                     ref={suggestionsListRef}
                     className={cx(

package/src/lib/components/molecules/title/Title.tsx

@@ -36,6 +36,10 @@ interface TitleProps {
      * The size of the component
      */
     size?: TitleSize;
+    /**
+     * The 'data-testid' attribute value (used in e2e tests)
+     */
+    testId?: string;
 }
 
 export function Title({
@@ -46,9 +50,13 @@ export function Title({
     supportingElement,
     tooltipPosition,
     size = TitleSize.Medium,
+    testId,
 }: TitleProps) {
     return (
-        <div className={cx('flex flex-row items-center justify-between', TITLE_PADDINGS[size])}>
+        <div
+            className={cx('flex flex-row items-center justify-between', TITLE_PADDINGS[size])}
+            data-testid={testId}
+        >
             <div className="flex flex-row items-center gap-x-xxxs">
                 <div className="flex flex-col justify-start">
                     <div className="flex flex-row items-center gap-x-0.5 text-neutral-10 dark:text-neutral-92">

package/src/lib/components/organisms/table/Table.tsx

@@ -75,6 +75,11 @@ export type TableProps = {
      * The page size selector component.
      */
     pageSizeSelector?: ReactNode;
+
+    /**
+     * If the table should take the full height of the parent.
+     */
+    heightFull?: boolean;
 };
 
 export function Table({
@@ -85,12 +90,23 @@ export function Table({
     rowIndexes,
     children,
     pageSizeSelector,
+    heightFull = false,
 }: PropsWithChildren<TableProps>): JSX.Element {
     return (
         <TableProvider selectedRowIndexes={selectedRowIndexes} rowIndexes={rowIndexes}>
-            <div className="w-full">
-                <div className="overflow-auto">
-                    <table className="w-full table-auto">{children}</table>
+            <div className={cx('w-full', { 'h-full': heightFull })}>
+                <div
+                    className={cx('overflow-auto', {
+                        'h-full': heightFull,
+                    })}
+                >
+                    <table
+                        className={cx('w-full table-auto', {
+                            'h-full': heightFull,
+                        })}
+                    >
+                        {children}
+                    </table>
                 </div>
                 <div
                     className={cx('flex w-full items-center gap-2 pt-md', {

package/src/lib/constants/colors.constants.ts

@@ -76,6 +76,7 @@ export const IOTA_PRIMITIVES_COLOR_PALETTE = {
     warning: {
         '10': '#422C00',
         '20': '#2D1E00',
+        '60': '#BE8F32',
         '90': '#FFE3AB',
     },
 };

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

@@ -0,0 +1,59 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Toggle, ToggleLabelPosition, ToggleSize } from '@/components';
+import { useState } from 'react';
+
+const meta: Meta<typeof Toggle> = {
+    component: Toggle,
+    tags: ['autodocs'],
+    argTypes: {
+        isToggled: {
+            control: { type: 'boolean' },
+        },
+        label: {
+            control: { type: 'text' },
+        },
+        labelPosition: {
+            control: { type: 'select' },
+            options: Object.values(ToggleLabelPosition),
+        },
+        isDisabled: {
+            control: { type: 'boolean' },
+        },
+        size: {
+            control: { type: 'select' },
+            options: Object.values(ToggleSize),
+        },
+        onChange: {
+            action: 'changed',
+        },
+    },
+    args: {
+        isToggled: false,
+        isDisabled: false,
+        size: ToggleSize.Default,
+        labelPosition: ToggleLabelPosition.Right,
+    },
+} satisfies Meta<typeof Toggle>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        label: 'Label',
+    },
+    render: (args) => {
+        const [isToggled, setIsToggled] = useState(args.isToggled);
+
+        const handleToggleChange = (newState: boolean) => {
+            console.log('Toggle state changed:', newState);
+            setIsToggled(newState);
+        };
+
+        return <Toggle {...args} isToggled={isToggled} onChange={handleToggleChange} />;
+    },
+};