feat: APP-3051 - Implement Breadcrumbs module component

CHANGELOG.md

@@ -12,6 +12,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Added
 
 -   Implement `AssetTransfer` module component
+-   Implement `Breadcrumbs` core component
+-   Added `slash` icon file
 
 ### Changed
 

src/core/components/breadcrumbs/breadcrumbs.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Breadcrumbs } from './breadcrumbs';
+
+const meta: Meta<typeof Breadcrumbs> = {
+    title: 'Core/Components/Breadcrumbs',
+    component: Breadcrumbs,
+    tags: ['autodocs'],
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/ISSDryshtEpB7SUSdNqAcw/branch/P0GeJKqILL7UXvaqu5Jj7V/Aragon-ODS?type=design&node-id=15704%3A53630&mode=design&t=wK3Bn7hqwwBM55IZ-1',
+        },
+    },
+};
+
+type Story = StoryObj<typeof Breadcrumbs>;
+
+/**
+ * Default usage example of the Breadcrumb component.
+ */
+export const Default: Story = {
+    args: {
+        currentPage: 'You are here',
+        breadcrumbOrder: [{ label: 'Root', href: '/' }],
+    },
+};
+
+/**
+ * Usage example of the Breadcrumb component with full props.
+ */
+export const Loaded: Story = {
+    args: {
+        currentPage: 'You are here',
+        breadcrumbOrder: [
+            { label: 'Root', href: '/' },
+            { label: 'Page', href: '/page' },
+            { label: 'Subpage', href: '/page/subpage' },
+        ],
+        tag: { label: 'Tag', variant: 'info' },
+    },
+};
+
+export default meta;

src/core/components/breadcrumbs/breadcrumbs.test.tsx

@@ -0,0 +1,47 @@
+import { render, screen } from '@testing-library/react';
+import { type TagVariant } from '../..';
+import { Breadcrumbs, type IBreadcrumbsProps, type UpToThreeCrumbs } from './breadcrumbs'; // Adjust the import path as necessary
+
+describe('<Breadcrumbs /> component', () => {
+    const createTestComponent = (props?: Partial<IBreadcrumbsProps>) => {
+        const completeProps: IBreadcrumbsProps = {
+            breadcrumbOrder: [{ href: '/', label: 'Root' }],
+            currentPage: 'Current Page',
+            ...props,
+        };
+
+        return <Breadcrumbs {...completeProps} />;
+    };
+
+    it('renders all provided path links', () => {
+        const breadcrumbOrder = [
+            { href: '/root', label: 'Root' },
+            { href: '/page', label: 'Page' },
+            { href: '/subpage', label: 'Subpage' },
+        ] as UpToThreeCrumbs;
+
+        render(createTestComponent({ breadcrumbOrder }));
+
+        const links = screen.getAllByRole('link');
+        expect(links.length).toBe(3);
+        expect(links[0]).toHaveTextContent('Root');
+        expect(links[1]).toHaveTextContent('Page');
+        expect(links[2]).toHaveTextContent('Subpage');
+    });
+
+    it('displays the current location', () => {
+        const currentPage = 'This page';
+        render(createTestComponent({ currentPage }));
+
+        expect(screen.getByText('This page')).toBeInTheDocument();
+        expect(screen.getByText('This page')).toHaveAttribute('aria-current', 'page');
+    });
+
+    it('renders with the Tag component when props provided', () => {
+        const tag = { label: 'Tag', variant: 'info' as TagVariant };
+        render(createTestComponent({ tag }));
+
+        const pillText = screen.getByText('Tag');
+        expect(pillText).toBeInTheDocument();
+    });
+});

src/core/components/breadcrumbs/breadcrumbs.tsx

@@ -0,0 +1,63 @@
+import { Icon, IconType } from '../icon';
+import { Link, type ILinkProps } from '../link';
+import { Tag, type ITagProps } from '../tag';
+
+/**
+ * Object representing a sequential segment in the Breadcrumbs path.
+ */
+interface Breadcrumb extends ILinkProps {
+    label: string;
+}
+
+/**
+ * List sizing of Breadcrumb objects with a min length of 1 and max length of 3.
+ */
+export type UpToThreeCrumbs = Breadcrumb[] & { length: 1 | 2 | 3 };
+
+export interface IBreadcrumbsProps {
+    /**
+     * Array of three Breadcrumb objects {href: string, label: string}
+     * The array indicates depth from the current position to be displayed in the Breadcrumbs.
+     * Starting at index 0 you must define the root, up to the current location as desired.
+     */
+    breadcrumbOrder: UpToThreeCrumbs;
+    /**
+     * Text to be displayed at the end of the Breadcrumbs indicating current location in the sitemap.
+     */
+    currentPage: string;
+    /**
+     * Optional tag pill to be displayed at the end of the Breadcrumbs for extra info. @type ITagProps
+     */
+    tag?: ITagProps;
+}
+
+export const Breadcrumbs: React.FC<IBreadcrumbsProps> = (props) => {
+    const { currentPage, breadcrumbOrder, tag, ...otherProps } = props;
+
+    return (
+        <nav aria-label="Breadcrumb" className="flex items-center space-x-2" {...otherProps}>
+            <ol className="flex items-center space-x-0.5">
+                {breadcrumbOrder.map(
+                    (breadcrumb) =>
+                        breadcrumb && (
+                            <li key={breadcrumb.href} className="flex items-center space-x-0.5 whitespace-nowrap">
+                                <Link href={breadcrumb.href}>{breadcrumb.label}</Link>
+                                <Icon
+                                    icon={IconType.SLASH}
+                                    className="ml-0.5 text-neutral-200"
+                                    responsiveSize={{ md: 'lg' }}
+                                />
+                            </li>
+                        ),
+                )}
+                <li
+                    aria-current="page"
+                    className="whitespace-nowrap text-sm font-normal leading-tight text-neutral-500 md:text-base"
+                >
+                    {currentPage}
+                </li>
+            </ol>
+            {tag && <Tag {...tag} />}
+        </nav>
+    );
+};

src/core/components/breadcrumbs/index.tsx

@@ -0,0 +1 @@
+export { Breadcrumbs, type IBreadcrumbsProps, type UpToThreeCrumbs } from './breadcrumbs';

src/core/components/icon/iconList.ts

@@ -55,6 +55,7 @@ import RichtextListUnordered from '../../assets/icons/richtext-list-unordered.sv
 import Search from '../../assets/icons/search.svg';
 import Settings from '../../assets/icons/settings.svg';
 import Shrink from '../../assets/icons/shrink.svg';
+import Slash from '../../assets/icons/slash.svg';
 import SortAsc from '../../assets/icons/sort-asc.svg';
 import SortDesc from '../../assets/icons/sort-desc.svg';
 import Success from '../../assets/icons/success.svg';
@@ -121,6 +122,7 @@ export const iconList: Record<IconType, IconComponent> = {
     [IconType.SEARCH]: Search,
     [IconType.SETTINGS]: Settings,
     [IconType.SHRINK]: Shrink,
+    [IconType.SLASH]: Slash,
     [IconType.SORT_ASC]: SortAsc,
     [IconType.SORT_DESC]: SortDesc,
     [IconType.SUCCESS]: Success,

src/core/components/icon/iconType.ts

@@ -55,6 +55,7 @@ export enum IconType {
     SEARCH = 'SEARCH',
     SETTINGS = 'SETTINGS',
     SHRINK = 'SHRINK',
+    SLASH = 'SLASH',
     SORT_ASC = 'SORT_ASC',
     SORT_DESC = 'SORT_DESC',
     SUCCESS = 'SUCCESS',

src/core/components/index.ts

@@ -1,5 +1,6 @@
 export * from './alerts';
 export * from './avatars';
+export * from './breadcrumbs';
 export * from './button';
 export * from './cards';
 export * from './checkbox';

src/modules/components/asset/assetTransfer/assetTransfer.tsx

@@ -84,7 +84,7 @@ export const AssetTransfer: React.FC<IAssetTransferProps> = (props) => {
         'flex h-16 w-full items-center justify-between rounded-xl border border-neutral-100 bg-neutral-0 px-4', // base
         'hover:border-neutral-200 hover:shadow-neutral-md', // hover
         'focus:outline-none focus-visible:rounded-xl focus-visible:ring focus-visible:ring-primary focus-visible:ring-offset', // focus
-        'active:border-neutral-300', // active
+        'active:border-neutral-300 active:shadow-none', // active
         'md:h-20 md:px-6', // responsive
     );
 

src/modules/components/asset/assetTransfer/assetTransferAddress/assetTransferAddress.tsx

@@ -36,10 +36,10 @@ export const AssetTransferAddress: React.FC<IAssetTransferAddressProps> = (props
             target="_blank"
             rel="noopener noreferrer"
             className={classNames(
-                'flex h-20 items-center space-x-4 border-neutral-100 px-4', //base
+                'group flex h-20 items-center space-x-4 border-neutral-100 px-4', //base
                 'hover:border-neutral-200 hover:shadow-neutral-md', //hover
                 'focus:outline-none focus-visible:ring focus-visible:ring-primary focus-visible:ring-offset', //focus
-                'active:border-neutral-300', //active
+                'active:border-neutral-300 active:shadow-none', //active
                 'md:w-1/2 md:p-6', //responsive
                 {
                     'rounded-t-xl  md:rounded-l-xl md:rounded-r-none': txRole === 'sender', // sender base
@@ -58,7 +58,7 @@ export const AssetTransferAddress: React.FC<IAssetTransferAddressProps> = (props
             )}
         >
             <MemberAvatar
-                className="shrink-0"
+                className="shrink-0 group-hover:shadow-neutral-md group-active:shadow-none"
                 responsiveSize={{ md: 'md' }}
                 ensName={participant.name}
                 address={participant.address}
@@ -71,7 +71,11 @@ export const AssetTransferAddress: React.FC<IAssetTransferAddressProps> = (props
                     <span className="truncate text-sm font-normal leading-tight text-neutral-800 md:text-base">
                         {resolvedUserHandle}
                     </span>
-                    <Icon icon={IconType.LINK_EXTERNAL} size="sm" className="float-right text-neutral-300" />
+                    <Icon
+                        icon={IconType.LINK_EXTERNAL}
+                        size="sm"
+                        className="float-right text-neutral-300 group-hover:text-primary-300 group-active:text-primary-400"
+                    />
                 </div>
             </div>
         </a>