Merge branch 'develop' into iota/authors

iotaledger · Aug 14, 2024 · 5e655a5 · 5e655a5
2 parents a96b6cc + d56a3e5
commit 5e655a5
Show file tree

Hide file tree

Showing 51 changed files with 303 additions and 3,448 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -12,6 +12,7 @@
 		"iota-wallet",
 		"iota-explorer",
 		"wallet-dashboard",
+		"@iota/apps-ui-kit",
 		"apps-backend",
 		"@iota/core",
 		"@iota/ui",

diff --git a/apps/ui-kit/src/lib/components/atoms/button/Button.tsx b/apps/ui-kit/src/lib/components/atoms/button/Button.tsx
@@ -47,6 +47,10 @@ export interface ButtonProps {
      * The type of the button. Available options are 'button', 'submit', 'reset'.
      */
     htmlType?: ButtonHtmlType;
+    /**
+     * The tab index of the button.
+     */
+    tabIndex?: number;
 }
 
 export function Button({
@@ -58,6 +62,7 @@ export function Button({
     htmlType = ButtonHtmlType.Button,
     size = ButtonSize.Medium,
     type = ButtonType.Primary,
+    tabIndex = 0,
 }: ButtonProps): React.JSX.Element {
     const paddingClasses = icon && !text ? PADDINGS_ONLY_ICON[size] : PADDINGS[size];
     const textSizes = TEXT_CLASSES[size];
@@ -68,12 +73,13 @@ export function Button({
             onClick={onClick}
             type={htmlType}
             className={cx(
-                'state-layer relative flex flex-row items-center justify-center gap-2 rounded-full disabled:opacity-40',
+                'state-layer relative flex flex-row items-center justify-center gap-2 rounded-full disabled:cursor-not-allowed disabled:opacity-40',
                 paddingClasses,
                 backgroundColors,
                 fullWidth && 'w-full',
             )}
             disabled={disabled}
+            tabIndex={tabIndex}
         >
             {icon && <span className={cx(textColors)}>{icon}</span>}
             {text && <span className={cx('font-inter', textColors, textSizes)}>{text}</span>}

diff --git a/apps/ui-kit/src/lib/components/atoms/button/ButtonUnstyled.tsx b/apps/ui-kit/src/lib/components/atoms/button/ButtonUnstyled.tsx
@@ -16,10 +16,16 @@ export function ButtonUnstyled({
     htmlType = ButtonHtmlType.Button,
     children,
     className,
+    tabIndex = 0,
     ...buttonProps
 }: ButtonUnstyledProps): React.JSX.Element {
     return (
-        <button type={htmlType} {...buttonProps} className={cx('appearance-none', className)}>
+        <button
+            type={htmlType}
+            {...buttonProps}
+            className={cx('appearance-none', className)}
+            tabIndex={tabIndex}
+        >
             {children}
         </button>
     );

diff --git a/apps/ui-kit/src/lib/components/atoms/checkbox/Checkbox.tsx b/apps/ui-kit/src/lib/components/atoms/checkbox/Checkbox.tsx
@@ -91,9 +91,9 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
                 />
                 <span
                     onClick={() => inputRef.current?.click()}
-                    className="peer-enabled:state-layer relative inset-0 flex h-5 w-5 items-center justify-center rounded border border-neutral-80 text-neutral-40 peer-disabled:text-neutral-70 peer-disabled:text-opacity-40 peer-disabled:opacity-40 peer-[&:is(:checked,:indeterminate)]:border-primary-30 peer-[&:is(:checked,:indeterminate)]:bg-primary-30 peer-[&:is(:checked,:indeterminate)]:text-white peer-[&:not(:checked,:indeterminate)]:text-opacity-40 disabled:peer-[&:not(:checked,:indeterminate)]:border-neutral-70 dark:border-neutral-20 dark:text-neutral-60 dark:peer-disabled:text-neutral-30 dark:peer-disabled:text-opacity-40 dark:peer-disabled:peer-[&:not(:checked,:indeterminate)]:border-neutral-30 dark:peer-disabled:peer-[&:is(:checked,:indeterminate)]:bg-neutral-40 peer-disabled:[&:is(:checked,:indeterminate)]:border-neutral-60 peer-disabled:[&:is(:checked,:indeterminate)]:bg-neutral-60 dark:peer-disabled:[&:is(:checked,:indeterminate)]:border-neutral-40"
+                    className="peer-enabled:state-layer relative inset-0 flex h-5 w-5 items-center justify-center rounded border border-neutral-80 text-neutral-40 group-[.disabled]:cursor-not-allowed peer-disabled:text-neutral-70 peer-disabled:text-opacity-40 peer-disabled:opacity-40 peer-[&:is(:checked,:indeterminate)]:border-primary-30 peer-[&:is(:checked,:indeterminate)]:bg-primary-30 peer-[&:is(:checked,:indeterminate)]:text-white peer-[&:not(:checked,:indeterminate)]:text-opacity-40 disabled:peer-[&:not(:checked,:indeterminate)]:border-neutral-70 dark:border-neutral-20 dark:text-neutral-60 dark:peer-disabled:text-neutral-30 dark:peer-disabled:text-opacity-40 dark:peer-disabled:peer-[&:not(:checked,:indeterminate)]:border-neutral-30 dark:peer-disabled:peer-[&:is(:checked,:indeterminate)]:bg-neutral-40 peer-disabled:[&:is(:checked,:indeterminate)]:border-neutral-60 peer-disabled:[&:is(:checked,:indeterminate)]:bg-neutral-60 dark:peer-disabled:[&:is(:checked,:indeterminate)]:border-neutral-40 [&_svg]:h-4 [&_svg]:w-4"
                 >
-                    <CheckmarkIcon width={16} height={16} />
+                    <CheckmarkIcon />
                 </span>
                 <LabelText label={label} name={name} />
             </div>
@@ -105,7 +105,7 @@ function LabelText({ label, name }: Pick<CheckboxProps, 'label' | 'name'>) {
     return (
         <label
             htmlFor={name}
-            className="text-label-lg text-neutral-40 group-[.disabled]:text-opacity-40 dark:text-neutral-60 group-[.disabled]:dark:text-opacity-40"
+            className="text-label-lg text-neutral-40 group-[.disabled]:cursor-not-allowed group-[.disabled]:text-opacity-40 dark:text-neutral-60 group-[.disabled]:dark:text-opacity-40"
         >
             {label}
         </label>

diff --git a/apps/ui-kit/src/lib/components/atoms/header/Header.tsx b/apps/ui-kit/src/lib/components/atoms/header/Header.tsx
@@ -29,13 +29,13 @@ export function Header({ title, titleCentered, onBack, onClose }: HeaderProps):
     const keepSpaceForIcon = titleCentered && (!onBack || !onClose);
 
     return (
-        <div className="flex min-h-[56px] w-full items-center bg-neutral-100 px-md--rs pb-xs pt-sm text-neutral-10 dark:bg-neutral-6 dark:text-neutral-92">
+        <div className="flex min-h-[56px] w-full items-center bg-neutral-100 px-md--rs pb-xs pt-sm text-neutral-10 dark:bg-neutral-6 dark:text-neutral-92 [&_svg]:h-5 [&_svg]:w-5">
             {onBack ? (
                 <Button
                     size={ButtonSize.Small}
                     type={ButtonType.Ghost}
                     onClick={onBack}
-                    icon={<ArrowLeft className="h-5 w-5" />}
+                    icon={<ArrowLeft />}
                 />
             ) : (
                 keepSpaceForIcon && <div className="w-9" />
@@ -50,7 +50,7 @@ export function Header({ title, titleCentered, onBack, onClose }: HeaderProps):
                     size={ButtonSize.Small}
                     type={ButtonType.Ghost}
                     onClick={onClose}
-                    icon={<Close className="h-5 w-5" />}
+                    icon={<Close />}
                 />
             ) : (
                 keepSpaceForIcon && <div className="w-9" />

diff --git a/apps/ui-kit/src/lib/components/atoms/radio-button/RadioButton.tsx b/apps/ui-kit/src/lib/components/atoms/radio-button/RadioButton.tsx
@@ -53,10 +53,10 @@ function RadioButton({
                 />
                 <span
                     className="absolute
-                    text-neutral-40 peer-checked:text-primary-30 peer-disabled:opacity-40 peer-checked:peer-disabled:text-neutral-40 dark:text-neutral-60 dark:peer-checked:peer-disabled:text-neutral-40
+                    text-neutral-40 peer-checked:text-primary-30 peer-disabled:opacity-40 peer-checked:peer-disabled:text-neutral-40 dark:text-neutral-60 dark:peer-checked:peer-disabled:text-neutral-40 [&_svg]:h-6 [&_svg]:w-6
                 "
                 >
-                    <RadioIcon width={24} height={24} />
+                    <RadioIcon />
                 </span>
             </div>
             <span className="inline-flex items-center justify-center text-label-lg text-neutral-40 group-[.disabled]:text-opacity-40 dark:text-neutral-60 group-[.disabled]:dark:text-opacity-40">

diff --git a/apps/ui-kit/src/lib/components/molecules/card/CardAction.tsx b/apps/ui-kit/src/lib/components/molecules/card/CardAction.tsx
@@ -15,8 +15,11 @@ export type CardActionProps = {
 export function CardAction({ type, onClick, subtitle, title }: CardActionProps) {
     if (type === CardActionType.Link) {
         return (
-            <div onClick={onClick} className="shrink-0">
-                <ArrowRight className="h-6 w-6 text-neutral-10 dark:text-neutral-92" />
+            <div
+                onClick={onClick}
+                className="shrink-0 text-neutral-10 dark:text-neutral-92 [&_svg]:h-6 [&_svg]:w-6"
+            >
+                <ArrowRight />
             </div>
         );
     }

diff --git a/apps/ui-kit/src/lib/components/molecules/chip/Chip.tsx b/apps/ui-kit/src/lib/components/molecules/chip/Chip.tsx
@@ -12,6 +12,7 @@ import {
     FOCUS_CLASSES,
 } from './chip.classes';
 import { ButtonUnstyled } from '../../atoms/button/ButtonUnstyled';
+import { Close } from '@iota/ui-icons';
 
 interface ChipProps {
     /**
@@ -66,8 +67,11 @@ export function Chip({ label, showClose, selected, onClose, avatar, icon }: Chip
                 {avatar ?? icon}
                 <span className="text-body-md">{label}</span>
                 {showClose && (
-                    <ButtonUnstyled onClick={onClose} className="cursor-pointer text-body-md">
-                        &#x2715;
+                    <ButtonUnstyled
+                        onClick={onClose}
+                        className="cursor-pointer [&_svg]:h-4 [&_svg]:w-4"
+                    >
+                        <Close />
                     </ButtonUnstyled>
                 )}
             </span>

diff --git a/apps/ui-kit/src/lib/components/molecules/input/Input.tsx b/apps/ui-kit/src/lib/components/molecules/input/Input.tsx
@@ -183,25 +183,24 @@ function InputTrailingElement({
     const showPasswordToggle = Boolean(type === InputType.Password && onToggleButtonClick);
     const showTrailingElement = Boolean(trailingElement && !showClearInput && !showPasswordToggle);
 
-    const ICON_WIDTH_HEIGHT = 20;
-
     if (showClearInput) {
         return (
-            <ButtonUnstyled className="text-neutral-10 dark:text-neutral-92" onClick={onClearInput}>
-                <Close width={ICON_WIDTH_HEIGHT} height={ICON_WIDTH_HEIGHT} />
+            <ButtonUnstyled
+                className="text-neutral-10 dark:text-neutral-92 [&_svg]:h-5 [&_svg]:w-5"
+                onClick={onClearInput}
+                tabIndex={-1}
+            >
+                <Close />
             </ButtonUnstyled>
         );
     } else if (showPasswordToggle) {
         return (
             <ButtonUnstyled
                 onClick={onToggleButtonClick}
-                className="text-neutral-10 dark:text-neutral-92"
+                className="text-neutral-10 dark:text-neutral-92 [&_svg]:h-5 [&_svg]:w-5"
+                tabIndex={-1}
             >
-                {isContentVisible ? (
-                    <VisibilityOn width={ICON_WIDTH_HEIGHT} height={ICON_WIDTH_HEIGHT} />
-                ) : (
-                    <VisibilityOff width={ICON_WIDTH_HEIGHT} height={ICON_WIDTH_HEIGHT} />
-                )}
+                {isContentVisible ? <VisibilityOn /> : <VisibilityOff />}
             </ButtonUnstyled>
         );
     } else if (showTrailingElement) {

diff --git a/apps/ui-kit/src/lib/components/molecules/input/InputWrapper.tsx b/apps/ui-kit/src/lib/components/molecules/input/InputWrapper.tsx
@@ -55,7 +55,7 @@ export function InputWrapper({
     return (
         <div
             className={cx('group flex flex-col gap-y-2', {
-                'opacity-40': disabled,
+                'cursor-not-allowed opacity-40': disabled,
                 errored: errorMessage,
                 enabled: !disabled,
                 required: required,

diff --git a/apps/ui-kit/src/lib/components/molecules/input/TextArea.tsx b/apps/ui-kit/src/lib/components/molecules/input/TextArea.tsx
@@ -114,7 +114,8 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextFieldBaseProps>(func
                     <span className="absolute bottom-4 right-4 flex">
                         <ButtonUnstyled
                             onClick={onToggleButtonClick}
-                            className="text-neutral-10 dark:text-neutral-92"
+                            className="text-neutral-10 dark:text-neutral-92 [&_svg]:h-5 [&_svg]:w-5"
+                            tabIndex={-1}
                         >
                             {isInputContentVisible ? <VisibilityOn /> : <VisibilityOff />}
                         </ButtonUnstyled>

diff --git a/apps/ui-kit/src/lib/components/molecules/input/input.classes.ts b/apps/ui-kit/src/lib/components/molecules/input/input.classes.ts
@@ -2,13 +2,13 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export const INPUT_CLASSES =
-    'w-full bg-transparent text-body-lg caret-primary-30 focus:outline-none focus-visible:outline-none';
+    'w-full bg-transparent text-body-lg caret-primary-30 focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed';
 export const INPUT_TEXT_CLASSES = 'text-neutral-10 dark:text-neutral-92';
 export const INPUT_PLACEHOLDER_CLASSES =
     ' enabled:placeholder:text-neutral-40/40  dark:placeholder:text-neutral-60/40 enabled:dark:placeholder:text-neutral-60/40';
 export const BORDER_CLASSES =
     'px-md py-sm rounded-lg border border-neutral-80 group-[.enabled]:cursor-text group-[.errored]:border-error-30 hover:group-[.enabled]:border-neutral-50  dark:border-neutral-60 dark:hover:border-neutral-60 dark:group-[.errored]:border-error-80 [&:has(input:focus)]:border-primary-30';
 export const INPUT_NUMBER_CLASSES =
-    '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none';
+    '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:cursor-not-allowed';
 export const LABEL_CLASSES =
     'flex flex-col gap-y-2 text-label-lg text-neutral-40 dark:text-neutral-60';
diff --git a/apps/ui-kit/src/lib/components/molecules/search/Search.tsx b/apps/ui-kit/src/lib/components/molecules/search/Search.tsx
@@ -81,7 +81,7 @@ export function Search({
         <div className="relative w-full">
             <div
                 className={cx(
-                    'flex items-center overflow-hidden px-md py-sm',
+                    'flex items-center overflow-hidden px-md py-sm text-neutral-10 dark:text-neutral-92 [&_svg]:h-6 [&_svg]:w-6',
                     roundedStyleWithSuggestions,
                     searchTypeClass,
                 )}
@@ -93,11 +93,11 @@ export function Search({
                     onKeyDown={onKeyDown}
                     placeholder={placeholder}
                     className={cx(
-                        'flex-1 text-neutral-10 outline-none placeholder:text-neutral-40 dark:text-neutral-92 placeholder:dark:text-neutral-60',
+                        'flex-1 outline-none placeholder:text-neutral-40 placeholder:dark:text-neutral-60',
                         backgroundColorClass,
                     )}
                 />
-                <SearchIcon className="h-6 w-6 text-neutral-10 dark:text-neutral-92" />
+                <SearchIcon />
             </div>
             {showSuggestions && (
                 <div

diff --git a/apps/ui-kit/src/lib/components/molecules/select/Select.tsx b/apps/ui-kit/src/lib/components/molecules/select/Select.tsx
@@ -120,7 +120,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
                         onClick={onSelectorClick}
                         data-selected-value={value}
                         disabled={disabled}
-                        className="flex flex-row items-center gap-x-3 rounded-lg border border-neutral-80 px-md py-sm hover:enabled:border-neutral-50 focus-visible:enabled:border-primary-30  active:enabled:border-primary-30 group-[.errored]:border-error-30 group-[.opened]:border-primary-30 dark:border-neutral-20 dark:hover:enabled:border-neutral-60 dark:group-[.errored]:border-error-80 dark:group-[.opened]:border-primary-80 [&:is(:focus,_:focus-visible,_:active)]:enabled:border-primary-30 dark:[&:is(:focus,_:focus-visible,_:active)]:enabled:border-primary-80"
+                        className="flex flex-row items-center gap-x-3 rounded-lg border border-neutral-80 px-md py-sm hover:enabled:border-neutral-50 focus-visible:enabled:border-primary-30 active:enabled:border-primary-30 disabled:cursor-not-allowed  group-[.errored]:border-error-30 group-[.opened]:border-primary-30 dark:border-neutral-20 dark:hover:enabled:border-neutral-60 dark:group-[.errored]:border-error-80 dark:group-[.opened]:border-primary-80 [&:is(:focus,_:focus-visible,_:active)]:enabled:border-primary-30 dark:[&:is(:focus,_:focus-visible,_:active)]:enabled:border-primary-80 [&_svg]:h-5 [&_svg]:w-5"
                     >
                         {leadingIcon && (
                             <span className="text-neutral-10 dark:text-neutral-92">
@@ -149,8 +149,6 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
                                     ' rotate-180': isOpen,
                                 },
                             )}
-                            width={20}
-                            height={20}
                         />
                     </ButtonUnstyled>
 

diff --git a/apps/ui-kit/src/lib/components/molecules/table-cell/TableCell.tsx b/apps/ui-kit/src/lib/components/molecules/table-cell/TableCell.tsx
@@ -116,10 +116,14 @@ export function TableCell(props: TableCellProps): JSX.Element {
                 const { onCopy } = props;
                 return (
                     <div
-                        className={cx('flex items-center space-x-2', textColorClass, textSizeClass)}
+                        className={cx(
+                            'flex items-center space-x-2 [&_svg]:h-4 [&_svg]:w-4',
+                            textColorClass,
+                            textSizeClass,
+                        )}
                     >
                         <span>{label}</span>
-                        <Copy className="h-4 w-4 cursor-pointer" onClick={onCopy} />
+                        <Copy className="cursor-pointer" onClick={onCopy} />
                     </div>
                 );
             case TableCellType.Badge:

diff --git a/apps/ui-kit/src/lib/components/molecules/table-header-cell/TableHeaderCell.tsx b/apps/ui-kit/src/lib/components/molecules/table-header-cell/TableHeaderCell.tsx
@@ -89,9 +89,14 @@ export function TableHeaderCell({
             )}
         >
             <div
-                className={cx('flex flex-row items-center gap-1', textColorClass, textSizeClass, {
-                    'justify-center': isContentCentered,
-                })}
+                className={cx(
+                    'flex flex-row items-center gap-1 [&_svg]:h-4 [&_svg]:w-4',
+                    textColorClass,
+                    textSizeClass,
+                    {
+                        'justify-center': isContentCentered,
+                    },
+                )}
             >
                 {hasCheckbox ? (
                     <Checkbox
@@ -103,10 +108,10 @@ export function TableHeaderCell({
                     <span>{label}</span>
                 )}
                 {hasSort && sortOrder === TableHeaderCellSortOrder.Asc && (
-                    <SortByUp className="ml-auto h-4 w-4 cursor-pointer" onClick={handleSort} />
+                    <SortByUp className="cursor-pointer" onClick={handleSort} />
                 )}
                 {hasSort && sortOrder === TableHeaderCellSortOrder.Desc && (
-                    <SortByDown className="ml-auto h-4 w-4 cursor-pointer" onClick={handleSort} />
+                    <SortByDown className="cursor-pointer" onClick={handleSort} />
                 )}
             </div>
         </th>

diff --git a/apps/ui-kit/src/lib/components/organisms/accordion/Accordion.tsx b/apps/ui-kit/src/lib/components/organisms/accordion/Accordion.tsx
@@ -39,7 +39,7 @@ export function AccordionHeader({
     return (
         <div
             onClick={onToggle}
-            className="state-layer relative flex cursor-pointer items-center justify-between gap-md py-sm--rs pr-md--rs"
+            className="state-layer relative flex cursor-pointer items-center justify-between gap-md py-sm--rs pr-md--rs [&_svg]:h-5 [&_svg]:w-5"
         >
             {children}
             <Button

diff --git a/apps/ui-kit/src/lib/components/organisms/accordion/accordion.classes.ts b/apps/ui-kit/src/lib/components/organisms/accordion/accordion.classes.ts
@@ -1,5 +1,4 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-export const ICON_STYLE =
-    'h-5 w-5 text-neutral-10 dark:text-neutral-92 transition-transform ease-linear';
+export const ICON_STYLE = 'text-neutral-10 dark:text-neutral-92 transition-transform ease-linear';
diff --git a/apps/ui-kit/src/lib/components/organisms/navbar/Navbar.tsx b/apps/ui-kit/src/lib/components/organisms/navbar/Navbar.tsx
@@ -54,18 +54,14 @@ export function Navbar({
         >
             {isCollapsable && (
                 <div className="flex w-full items-center justify-between sm:mb-[48px] sm:flex-col">
-                    <div className="flex justify-center">
-                        <IotaLogoMark
-                            width={38}
-                            height={38}
-                            className="text-neutral-10 dark:text-neutral-92"
-                        />
+                    <div className="flex justify-center [&_svg]:h-[38px] [&_svg]:w-[38px]">
+                        <IotaLogoMark className="text-neutral-10 dark:text-neutral-92" />
                     </div>
                     <div
-                        className="state-layer relative rounded-full p-xs hover:cursor-pointer dark:text-neutral-92 sm:hidden"
+                        className="state-layer relative rounded-full p-xs hover:cursor-pointer dark:text-neutral-92 sm:hidden [&_svg]:h-6 [&_svg]:w-6"
                         onClick={onToggleNavbar}
                     >
-                        <MenuIcon className={'h-6 w-6'} />
+                        <MenuIcon />
                     </div>
                 </div>
             )}