@iota/apps-ui-kit 0.2.1 → 0.5.0

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/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/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/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

@@ -73,6 +73,12 @@ export const IOTA_PRIMITIVES_COLOR_PALETTE = {
         '98': '#f8fafc',
         '100': '#ffffff',
     },
+    warning: {
+        '10': '#422C00',
+        '20': '#2D1E00',
+        '60': '#BE8F32',
+        '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/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} />;
+    },
+};

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)}