feat(apps-ui-kit): add list item component (#1183)

* feat: add List Item component

* feat: add List Item styling

* fix: adjust styling and naming

* fiex: add showBottomBorder prop

* fix: rename show border flag

* fix: remove debris

---------

Co-authored-by: evavirseda <[email protected]>

apps/ui-kit/src/lib/components/atoms/index.ts

@@ -8,5 +8,6 @@ export * from './button';
 export * from './checkbox';
 export * from './chip';
 export * from './divider';
+export * from './list-item';
 export * from './header';
 export * from './labelText';

apps/ui-kit/src/lib/components/atoms/list-item/ListItem.tsx

@@ -0,0 +1,65 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { PropsWithChildren } from 'react';
+import cx from 'classnames';
+import { ArrowRight } from '@iota/ui-icons';
+import { Button, ButtonSize, ButtonType } from '@/components';
+
+interface ListItemProps {
+    /**
+     * Has right icon (optional).
+     */
+    showRightIcon?: boolean;
+    /**
+     * Hide bottom border (optional).
+     */
+    hideBottomBorder?: boolean;
+    /**
+     * On click handler (optional).
+     */
+    onClick?: () => void;
+    /**
+     * The list item is disabled or not.
+     */
+    isDisabled?: boolean;
+}
+
+export function ListItem({
+    showRightIcon,
+    hideBottomBorder,
+    onClick,
+    isDisabled,
+    children,
+}: PropsWithChildren<ListItemProps>): React.JSX.Element {
+    return (
+        <div
+            onClick={onClick}
+            className={cx(
+                'w-full pb-xs',
+                {
+                    'border-b border-shader-neutral-light-8 dark:border-shader-neutral-dark-8':
+                        !hideBottomBorder,
+                },
+                { 'opacity-40': isDisabled },
+            )}
+        >
+            <div
+                className={cx(
+                    'relative flex min-h-[48px] flex-row items-center justify-between text-neutral-10 dark:text-neutral-92',
+                    { 'state-layer': !isDisabled },
+                )}
+            >
+                {children}
+                {showRightIcon && (
+                    <Button
+                        size={ButtonSize.Small}
+                        type={ButtonType.Ghost}
+                        disabled={isDisabled}
+                        icon={<ArrowRight />}
+                    />
+                )}
+            </div>
+        </div>
+    );
+}

apps/ui-kit/src/lib/components/atoms/list-item/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './ListItem';

apps/ui-kit/src/storybook/stories/atoms/ListItem.stories.tsx

@@ -0,0 +1,41 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { ListItem } from '@/components';
+import { Seed } from '@iota/ui-icons';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+    component: ListItem,
+    tags: ['autodocs'],
+    render: (props) => {
+        return (
+            <div className="flex flex-col">
+                <ListItem {...props}>
+                    <div className="flex flex-row items-center gap-2 pl-sm">
+                        <Seed />
+                        <div>Item 1</div>
+                    </div>
+                </ListItem>
+            </div>
+        );
+    },
+} satisfies Meta<typeof ListItem>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    argTypes: {
+        showRightIcon: {
+            control: 'boolean',
+        },
+        isDisabled: {
+            control: 'boolean',
+        },
+        hideBottomBorder: {
+            control: 'boolean',
+        },
+    },
+};