@iota/apps-ui-kit 0.7.3 → 0.8.0

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "@iota/apps-ui-kit",
-  "version": "0.7.3",
+  "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.2"
+    "@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/index.ts

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

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';