@iota/apps-ui-kit 0.2.1 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iota/apps-ui-kit",
-  "version": "0.2.1",
+  "version": "0.3.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.1"
+    "@iota/apps-ui-icons": "0.2.2"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.0",
@@ -54,7 +54,7 @@
     "storybook-dark-mode": "^4.0.2",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.5.3",
-    "vite": "^5.3.3",
+    "vite": "^5.4.12",
     "vite-plugin-dts": "^4.3.0",
     "vite-tsconfig-paths": "^4.2.0"
   },

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

@@ -18,7 +18,7 @@ export const BACKGROUND_COLORS: Record<ButtonType, string> = {
     [ButtonType.Secondary]: 'bg-neutral-90 dark:bg-neutral-20',
     [ButtonType.Ghost]: 'bg-transparent',
     [ButtonType.Outlined]: 'bg-transparent border border-neutral-50',
-    [ButtonType.Destructive]: 'bg-error-90',
+    [ButtonType.Destructive]: 'bg-error-90 dark:bg-error-20',
 };
 
 export const DISABLED_BACKGROUND_COLORS: Record<ButtonType, string> = {
@@ -26,7 +26,7 @@ export const DISABLED_BACKGROUND_COLORS: Record<ButtonType, string> = {
     [ButtonType.Secondary]: 'bg-neutral-90 dark:bg-neutral-20',
     [ButtonType.Ghost]: 'bg-transparent',
     [ButtonType.Outlined]: 'bg-transparent border border-neutral-50',
-    [ButtonType.Destructive]: 'bg-error-90',
+    [ButtonType.Destructive]: 'bg-error-90 dark:bg-error-20',
 };
 
 const DEFAULT_TEXT_COLORS: string = 'text-neutral-10 dark:text-neutral-92';
@@ -36,7 +36,7 @@ export const TEXT_COLORS: Record<ButtonType, string> = {
     [ButtonType.Secondary]: DEFAULT_TEXT_COLORS,
     [ButtonType.Ghost]: DEFAULT_TEXT_COLORS,
     [ButtonType.Outlined]: DEFAULT_TEXT_COLORS,
-    [ButtonType.Destructive]: 'text-error-20',
+    [ButtonType.Destructive]: 'text-error-20 dark:text-error-90',
 };
 
 export const TEXT_CLASSES: Record<ButtonSize, string> = {
@@ -49,5 +49,5 @@ export const TEXT_COLOR_DISABLED: Record<ButtonType, string> = {
     [ButtonType.Secondary]: DEFAULT_TEXT_COLORS,
     [ButtonType.Ghost]: DEFAULT_TEXT_COLORS,
     [ButtonType.Outlined]: DEFAULT_TEXT_COLORS,
-    [ButtonType.Destructive]: 'text-error-20',
+    [ButtonType.Destructive]: 'text-error-20 dark:text-error-90',
 };

package/src/lib/components/atoms/info-box/infoBox.classes.ts

@@ -4,11 +4,16 @@
 import { InfoBoxType } from './infoBox.enums';
 
 export const ICON_COLORS: Record<InfoBoxType, string> = {
-    [InfoBoxType.Default]: 'bg-neutral-96 dark:bg-neutral-12 text-neutral-10 dark:text-neutral-92',
+    [InfoBoxType.Default]: 'bg-primary-90 dark:bg-primary-10 text-primary-20 dark:text-primary-90',
     [InfoBoxType.Error]: 'bg-error-90 dark:bg-error-10 text-error-20 dark:text-error-90',
+    [InfoBoxType.Success]:
+        'bg-tertiary-90 dark:bg-tertiary-10 text-tertiary-20 dark:text-tertiary-90',
+    [InfoBoxType.Warning]: 'bg-warning-90 dark:bg-warning-20 text-warning-10 dark:text-warning-90',
 };
 
 export const BACKGROUND_COLORS: Record<InfoBoxType, string> = {
-    [InfoBoxType.Default]: 'bg-neutral-96 dark:bg-neutral-12',
+    [InfoBoxType.Default]: 'bg-primary-90 dark:bg-primary-10',
     [InfoBoxType.Error]: 'bg-error-90 dark:bg-error-10',
+    [InfoBoxType.Success]: 'bg-tertiary-90 dark:bg-tertiary-10',
+    [InfoBoxType.Warning]: 'bg-warning-90 dark:bg-warning-20',
 };

package/src/lib/components/atoms/info-box/infoBox.enums.ts

@@ -4,6 +4,8 @@
 export enum InfoBoxType {
     Default = 'default',
     Error = 'error',
+    Success = 'success',
+    Warning = 'warning',
 }
 
 export enum InfoBoxStyle {

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

@@ -6,9 +6,13 @@ import { SnackbarType } from './snackbar.enums';
 export const TEXT_COLOR: Record<SnackbarType, string> = {
     [SnackbarType.Default]: 'text-neutral-10 dark:text-neutral-92',
     [SnackbarType.Error]: 'text-error-20 dark:text-error-90',
+    [SnackbarType.Warning]: 'text-warning-10 dark:text-warning-90',
+    [SnackbarType.Success]: 'text-tertiary-20 dark:text-tertiary-90',
 };
 
 export const BACKGROUND_COLOR: Record<SnackbarType, string> = {
-    [SnackbarType.Default]: 'bg-neutral-80 dark:bg-neutral-30',
+    [SnackbarType.Default]: 'bg-primary-90 dark:bg-primary-10',
     [SnackbarType.Error]: 'bg-error-90 dark:bg-error-10',
+    [SnackbarType.Warning]: 'bg-warning-90 dark:bg-warning-20',
+    [SnackbarType.Success]: 'bg-tertiary-90 dark:bg-tertiary-10',
 };

package/src/lib/components/atoms/snackbar/snackbar.enums.tsx

@@ -4,4 +4,6 @@
 export enum SnackbarType {
     Default = 'default',
     Error = 'error',
+    Warning = 'warning',
+    Success = 'success',
 }

package/src/lib/components/atoms/tooltip/Tooltip.tsx

@@ -9,11 +9,13 @@ import { TOOLTIP_POSITION } from './tooltip.classes';
 interface TooltipProps {
     text: string;
     position?: TooltipPosition;
+    maxWidth?: string;
 }
 
 export function Tooltip({
     text,
     position = TooltipPosition.Top,
+    maxWidth = 'max-w-[200px]',
     children,
 }: PropsWithChildren<TooltipProps>): React.JSX.Element {
     const tooltipPositionClass = TOOLTIP_POSITION[position];
@@ -22,8 +24,9 @@ export function Tooltip({
             {children}
             <div
                 className={cx(
-                    'absolute z-[999] hidden w-max max-w-[200px] rounded bg-neutral-80 p-xs text-neutral-10 opacity-0 transition-opacity duration-300 group-hover:block group-hover:opacity-100 group-focus:opacity-100 dark:bg-neutral-30 dark:text-neutral-92',
+                    'absolute z-[999] hidden w-max rounded bg-neutral-80 p-xs text-neutral-10 opacity-0 transition-opacity duration-300 group-hover:block group-hover:opacity-100 group-focus:opacity-100 dark:bg-neutral-30 dark:text-neutral-92',
                     tooltipPositionClass,
+                    maxWidth,
                 )}
                 role="tooltip"
             >

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

@@ -3,8 +3,9 @@
 
 import { VisualAssetType } from './visualAssetCard.enums';
 import { ButtonUnstyled } from '../button';
-import { MoreHoriz } from '@iota/apps-ui-icons';
+import { MoreHoriz, PlaceholderReplace } from '@iota/apps-ui-icons';
 import cx from 'classnames';
+import { useState } from 'react';
 
 export interface VisualAssetCardProps {
     /**
@@ -51,6 +52,8 @@ export function VisualAssetCard({
     assetTitle,
     isHoverable = true,
 }: VisualAssetCardProps): React.JSX.Element {
+    const [imageError, setImageError] = useState(false);
+
     const handleIconClick = (event: React.MouseEvent<HTMLButtonElement>) => {
         onIconClick?.(event);
         event?.stopPropagation();
@@ -65,28 +68,33 @@ export function VisualAssetCard({
         >
             {assetType === VisualAssetType.Video ? (
                 <video src={assetSrc} className="h-full w-full object-cover" autoPlay loop muted />
+            ) : imageError ? (
+                <div className="flex h-full w-full items-center justify-center bg-neutral-96 dark:bg-neutral-10">
+                    <PlaceholderReplace className="h-4 w-4 text-neutral-40 dark:text-neutral-60" />
+                </div>
             ) : (
-                <img src={assetSrc} alt={altText} className="h-full w-full object-cover" />
+                <img
+                    src={assetSrc}
+                    alt={altText}
+                    className="h-full w-full object-cover"
+                    onError={() => setImageError(true)}
+                />
             )}
             {isHoverable && (
                 <div className="absolute left-0 top-0 h-full w-full bg-cover bg-center bg-no-repeat group-hover:bg-shader-neutral-light-48 group-hover:transition group-hover:duration-300 group-hover:ease-in-out group-hover:dark:bg-shader-primary-dark-48" />
             )}
-            {isHoverable && (
-                <>
-                    {onIconClick && (
-                        <ButtonUnstyled
-                            className="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 [&_svg]:text-primary-100"
-                            onClick={handleIconClick}
-                        >
-                            {icon}
-                        </ButtonUnstyled>
-                    )}
-                    <div className="absolute bottom-0 flex items-center justify-center p-xs opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                        {assetTitle && (
-                            <span className="text-title-md text-neutral-100">{assetTitle}</span>
-                        )}
-                    </div>
-                </>
+            {isHoverable && onIconClick && (
+                <ButtonUnstyled
+                    className="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 [&_svg]:text-primary-100"
+                    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="text-title-md text-neutral-100">{assetTitle}</span>
+                </div>
             )}
         </div>
     );

package/src/lib/components/molecules/address/Address.tsx

@@ -70,7 +70,7 @@ export function Address({
     function handleOpenClick(event: React.MouseEvent<HTMLButtonElement>) {
         event?.stopPropagation();
         if (externalLink) {
-            const newWindow = window.open(externalLink, '_blank', 'noopener,noreferrer');
+            const newWindow = window.open(externalLink, '_blank', 'noopener noreferrer');
             if (newWindow) newWindow.opener = null;
         } else {
             onOpen?.(event);

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

@@ -27,8 +27,10 @@ export function CardAction({
     buttonDisabled,
 }: CardActionProps) {
     function handleActionClick(event: React.MouseEvent) {
-        event?.stopPropagation();
-        onClick?.();
+        if (onClick) {
+            event.stopPropagation();
+            onClick();
+        }
     }
 
     if (type === CardActionType.Link) {

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

@@ -5,9 +5,9 @@ export const INPUT_CLASSES =
     'w-full bg-transparent text-body-lg caret-primary-30 dark:caret-primary-80 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';
+    '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 [&:has(input:focus)]:dark:border-primary-80';
+    '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-20 dark:hover:border-neutral-60 dark:group-[.errored]:border-error-80 [&:has(input:focus)]:!border-primary-30 [&:has(input:focus)]:dark:!border-primary-80';
 export const INPUT_NUMBER_CLASSES =
     '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:cursor-not-allowed';
 export const LABEL_CLASSES =

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

@@ -71,6 +71,7 @@ export function Search({
     const inputRef = useRef<HTMLInputElement>(null);
     const suggestionsListRef = useRef<HTMLDivElement>(null);
     const [isSuggestionsVisible, setIsSuggestionsVisible] = useState(true);
+    const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
 
     function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
         const value = event.target.value;
@@ -131,9 +132,33 @@ export function Search({
         onSuggestionClick?.(suggestion);
         onSearchValueChange('');
         setIsSuggestionsVisible(false);
+        setSelectedIndex(null);
         inputRef.current?.blur();
     };
 
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (suggestions && suggestions?.length > 0) {
+            if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                setSelectedIndex((prev) =>
+                    prev === null || prev >= suggestions.length - 1 ? 0 : prev + 1,
+                );
+            } else if (event.key === 'ArrowUp') {
+                event.preventDefault();
+                setSelectedIndex((prev) =>
+                    prev === null || prev <= 0 ? suggestions.length - 1 : prev - 1,
+                );
+            } else if (event.key === 'Enter') {
+                event.preventDefault();
+                if (selectedIndex !== null && suggestions[selectedIndex]) {
+                    handleOnSuggestionClick(suggestions[selectedIndex]);
+                } else if (suggestions.length === 1) {
+                    handleOnSuggestionClick(suggestions[0]);
+                }
+            }
+        }
+    };
+
     return (
         <div className="relative w-full">
             <div
@@ -148,7 +173,7 @@ export function Search({
                     type="text"
                     value={searchValue}
                     onChange={handleChange}
-                    onKeyDown={onKeyDown}
+                    onKeyDown={handleKeyDown}
                     onFocus={() => setIsSuggestionsVisible(true)}
                     placeholder={placeholder}
                     className={cx(
@@ -168,15 +193,21 @@ export function Search({
                 >
                     <Divider width="w-11/12" />
                     {isLoading ? (
-                        <div className=" px-md py-sm">
+                        <div className="px-md py-sm">
                             <Loader className="animate-spin" />
                         </div>
                     ) : (
                         suggestions.map((suggestion, index) => (
                             <div
-                                className="w-full"
                                 key={suggestion.id}
                                 onClick={() => handleOnSuggestionClick(suggestion)}
+                                onMouseEnter={() => setSelectedIndex(index)}
+                                className={cx(
+                                    'w-full cursor-pointer px-md py-sm',
+                                    selectedIndex === index
+                                        ? 'bg-shader-primary-dark-16 dark:bg-shader-inverted-dark-16'
+                                        : '',
+                                )}
                             >
                                 {renderSuggestion(suggestion, index)}
                             </div>

package/src/lib/components/molecules/table-header-cell/TableHeaderCell.tsx

@@ -1,7 +1,6 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { useState } from 'react';
 import { SortByDown, SortByUp } from '@iota/apps-ui-icons';
 import cx from 'classnames';
 import { Checkbox } from '@/lib';
@@ -52,6 +51,10 @@ export interface TableHeaderCellProps {
      * Whether the cell content should be centered.
      */
     isContentCentered?: boolean;
+    /**
+     * Sort order when cell is initialized
+     */
+    sortOrder?: TableHeaderCellSortOrder;
 }
 
 export function TableHeaderCell({
@@ -64,17 +67,13 @@ export function TableHeaderCell({
     isContentCentered,
     onSortClick,
     onCheckboxChange,
+    sortOrder,
 }: TableHeaderCellProps): JSX.Element {
-    const [sortOrder, setSortOrder] = useState<TableHeaderCellSortOrder | null>(
-        TableHeaderCellSortOrder.Asc,
-    );
-
     const handleSort = () => {
         const newSortOrder =
             sortOrder === TableHeaderCellSortOrder.Asc
                 ? TableHeaderCellSortOrder.Desc
                 : TableHeaderCellSortOrder.Asc;
-        setSortOrder(newSortOrder);
         if (onSortClick) {
             onSortClick(columnKey, newSortOrder);
         }
@@ -83,10 +82,30 @@ export function TableHeaderCell({
     const textColorClass = 'text-neutral-10 dark:text-neutral-92';
     const textSizeClass = 'text-label-lg';
 
+    const sortElement = (() => {
+        if (!hasSort) {
+            return null;
+        }
+
+        if (sortOrder === TableHeaderCellSortOrder.Asc) {
+            return <SortByUp className="shrink-0" />;
+        }
+
+        if (sortOrder === TableHeaderCellSortOrder.Desc) {
+            return <SortByDown className="shrink-0" />;
+        }
+
+        return <SortByUp className="invisible shrink-0 group-hover:visible" />;
+    })();
+
     return (
         <th
+            onClick={hasSort ? handleSort : undefined}
             className={cx(
-                'state-layer relative h-14 border-b border-shader-neutral-light-8 px-md after:pointer-events-none dark:border-shader-neutral-dark-8',
+                'state-layer group relative h-14 border-b border-shader-neutral-light-8 px-md after:pointer-events-none dark:border-shader-neutral-dark-8',
+                {
+                    'cursor-pointer': hasSort,
+                },
             )}
         >
             <div
@@ -114,12 +133,7 @@ export function TableHeaderCell({
                         {label}
                     </span>
                 )}
-                {hasSort && sortOrder === TableHeaderCellSortOrder.Asc && (
-                    <SortByUp className="cursor-pointer" onClick={handleSort} />
-                )}
-                {hasSort && sortOrder === TableHeaderCellSortOrder.Desc && (
-                    <SortByDown className="cursor-pointer" onClick={handleSort} />
-                )}
+                {sortElement}
             </div>
         </th>
     );

package/src/lib/components/organisms/accordion/Accordion.tsx

@@ -44,16 +44,14 @@ export function AccordionHeader({
     children,
     isExpanded,
     hideArrow,
-    hideBorder,
 }: PropsWithChildren<AccordionHeaderProps>) {
     return (
         <div
             onClick={onToggle}
             className={cx(
-                'state-layer relative flex cursor-pointer items-center justify-between gap-md py-sm--rs',
+                'state-layer relative flex cursor-pointer items-center justify-between gap-md overflow-hidden rounded-xl py-sm--rs',
                 {
                     'pr-md--rs': !hideArrow,
-                    'rounded-xl': hideBorder,
                 },
             )}
         >
@@ -100,8 +98,8 @@ export function Accordion({
 }): React.JSX.Element {
     return (
         <div
-            className={cx('overflow-hidden rounded-xl bg-neutral-100 dark:bg-neutral-6', {
-                ' border border-shader-neutral-light-8 dark:border-shader-neutral-dark-8':
+            className={cx('rounded-xl bg-neutral-100 dark:bg-neutral-6', {
+                'border border-shader-neutral-light-8 dark:border-shader-neutral-dark-8':
                     !hideBorder,
             })}
         >

package/src/lib/components/organisms/dialog/Dialog.tsx

@@ -68,17 +68,18 @@ const DialogContent = React.forwardRef<
         }, [containerId]);
         const positionClass =
             position === DialogPosition.Right
-                ? 'right-0 h-screen top-0 w-full'
-                : 'max-h-[60vh] left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-xl';
+                ? 'overflow-hidden right-0 h-screen top-0 w-full'
+                : 'overflow-y-auto overflow-x-hidden left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-xl';
         const widthClass =
             position === DialogPosition.Right ? 'md:w-96 max-w-[500px]' : customWidth;
+        const heightClass = position === DialogPosition.Right ? 'h-screen' : 'max-h-[80vh] h-full';
         return (
             <RadixDialog.Portal container={containerElement}>
                 <DialogOverlay showCloseIcon={showCloseOnOverlay} position={position} />
                 <RadixDialog.Content
                     ref={ref}
                     className={cx(
-                        'fixed z-[99999] flex flex-col justify-center overflow-hidden bg-primary-100 dark:bg-neutral-6',
+                        'fixed z-[99999] flex flex-col justify-center bg-primary-100 dark:bg-neutral-6',
                         positionClass,
                         widthClass,
                     )}
@@ -88,7 +89,7 @@ const DialogContent = React.forwardRef<
                         <RadixDialog.Title />
                         <RadixDialog.Description />
                     </VisuallyHidden.Root>
-                    {children}
+                    <div className={cx('flex flex-1 flex-col', heightClass)}>{children}</div>
                 </RadixDialog.Content>
             </RadixDialog.Portal>
         );
@@ -112,7 +113,7 @@ const DialogBody = React.forwardRef<React.ElementRef<'div'>, React.ComponentProp
     (props, ref) => (
         <div
             ref={ref}
-            className="p-md--rs text-body-sm text-neutral-40 dark:text-neutral-60"
+            className="flex-1 overflow-y-auto p-md--rs text-body-sm text-neutral-40 dark:text-neutral-60"
             {...props}
         />
     ),

package/src/lib/components/organisms/navbar/Navbar.tsx

@@ -9,9 +9,9 @@ export type NavbarItemWithId = NavbarItemProps & { id: string };
 
 export interface NavbarProps {
     /**
-     * If this flag is true we need to leave only the icon and collapsable button
+     * If this flag is true we need to leave only the icon and collapsible button
      */
-    isCollapsable?: boolean;
+    isCollapsible?: boolean;
 
     /**
      * List of elements to be displayed in the navbar.
@@ -29,7 +29,7 @@ export interface NavbarProps {
     onClickItem: (id: string) => void;
 
     /**
-     * If the navbar is collapsable, this flag indicates if it is open or not.
+     * If the navbar is collapsible, this flag indicates if it is open or not.
      */
     isOpen?: boolean;
 
@@ -43,16 +43,16 @@ export function Navbar({
     items,
     activeId,
     onClickItem,
-    isCollapsable = false,
+    isCollapsible = false,
     onToggleNavbar,
 }: NavbarProps) {
     return (
         <div
             className={cx('flex h-fit w-full', {
-                'flex-col px-md py-xs sm:h-full sm:w-auto sm:px-none sm:py-xl': isCollapsable,
+                'flex-col px-md py-xs sm:h-full sm:w-auto sm:px-none sm:py-xl': isCollapsible,
             })}
         >
-            {isCollapsable && (
+            {isCollapsible && (
                 <div className="flex w-full items-center justify-between sm:mb-[48px] sm:flex-col">
                     <div className="flex justify-center [&_svg]:h-[38px] [&_svg]:w-[38px]">
                         <IotaLogoMark className="text-neutral-10 dark:text-neutral-92" />
@@ -67,16 +67,16 @@ export function Navbar({
             )}
             <div
                 className={cx({
-                    'flex w-full justify-between px-sm py-xxs': !isCollapsable,
-                    'hidden sm:flex sm:flex-col sm:gap-2': isCollapsable,
+                    'flex w-full justify-between px-sm py-xxs': !isCollapsible,
+                    'hidden sm:flex sm:flex-col sm:gap-2': isCollapsible,
                 })}
             >
                 {items.map((item) => (
                     <div
                         key={item.id}
                         className={cx('flex items-center', {
-                            'px-xs py-xxs': !isCollapsable,
-                            'py-xxs pl-xs pr-sm': isCollapsable,
+                            'px-xs py-xxs': !isCollapsible,
+                            'py-xxs pl-xs pr-sm': isCollapsible,
                         })}
                         data-testid={`nav-${item.id}`}
                     >

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

@@ -73,6 +73,11 @@ export const IOTA_PRIMITIVES_COLOR_PALETTE = {
         '98': '#f8fafc',
         '100': '#ffffff',
     },
+    warning: {
+        '10': '#422C00',
+        '20': '#2D1E00',
+        '90': '#FFE3AB',
+    },
 };
 
 export const SHADER_COLOR_PALETTE = {

package/src/lib/styles/index.css

@@ -120,6 +120,19 @@
     }
 }
 
+@-moz-document url-prefix() {
+    * {
+        scrollbar-width: thin;
+        scrollbar-color: theme('colors.neutral.30') transparent;
+    }
+
+    :root:not(.dark) {
+        * {
+            scrollbar-color: theme('colors.neutral.80') transparent;
+        }
+    }
+}
+
 @supports selector(::-webkit-scrollbar) {
     *::-webkit-scrollbar {
         @apply w-3.5;

package/src/lib/tailwind/base.presets.ts

@@ -10,10 +10,12 @@ import {
     OPACITY,
     generateVariableSpacing,
 } from './constants';
+import { firefoxPlugin } from './plugins';
 
 export const BASE_CONFIG: Config = {
     content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
     darkMode: 'class',
+    plugins: [firefoxPlugin],
     theme: {
         extend: {
             fontSize: {

package/src/lib/tailwind/plugins.ts

@@ -0,0 +1,8 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import plugin from 'tailwindcss/plugin';
+
+export const firefoxPlugin = plugin(({ addVariant }) => {
+    addVariant('firefox', '@-moz-document url-prefix()');
+});

package/src/storybook/stories/organisms/Navbar.stories.tsx

@@ -47,7 +47,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
-export const Collapsable: Story = {
+export const Collapsible: Story = {
     args: {},
     argTypes: {},
     render: (args) => {
@@ -57,7 +57,7 @@ export const Collapsable: Story = {
         return (
             <div className="flex h-96">
                 <Navbar
-                    isCollapsable
+                    isCollapsible
                     items={NAVBAR_ITEMS}
                     activeId={activeId}
                     onClickItem={(id) => setActiveId(id)}