@apify/ui-library 1.136.0 → 1.137.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.136.0",
+    "version": "1.137.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -70,5 +70,5 @@
         "src",
         "style"
     ],
-    "gitHead": "28c73a5d1efc6bb7bd3621f92a83dd4910d59d3f"
+    "gitHead": "31ba6cc576b0e0ce8b7390126ec35cc8127eee80"
 }

package/src/components/breadcrumb/breadcrumb.stories.tsx

@@ -0,0 +1,52 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { userEvent, within } from 'storybook/test';
+
+import { Breadcrumbs } from './breadcrumb.js';
+
+type Story = StoryObj<typeof Breadcrumbs>;
+
+export default {
+    title: 'UI-Library/Breadcrumbs',
+    component: Breadcrumbs,
+    parameters: {
+        layout: 'centered',
+    },
+} as const;
+
+export const Default: Story = {
+    args: {
+        items: [
+            { label: 'All Actors', url: '/actors' },
+            { label: 'Generate leads' },
+        ],
+    },
+};
+
+export const DeepPath: Story = {
+    args: {
+        items: [
+            { label: 'All Actors', url: '/actors' },
+            { label: 'Business', url: '/actors/business' },
+            { label: 'Generate leads' },
+        ],
+    },
+};
+
+export const SingleItem: Story = {
+    args: {
+        items: [{ label: 'All Actors' }],
+    },
+};
+
+export const Hovered: Story = {
+    args: {
+        items: [
+            { label: 'All Actors', url: '/actors' },
+            { label: 'Generate leads' },
+        ],
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.hover(canvas.getByText('All Actors'));
+    },
+};

package/src/components/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,88 @@
+import clsx from 'clsx';
+import React from 'react';
+import styled from 'styled-components';
+
+import { theme } from '../../design_system/theme.js';
+import { Box } from '../box.js';
+import { Link } from '../link.js';
+import { Text } from '../text/index.js';
+
+export const breadcrumbClassNames = {
+    WRAPPER: 'Breadcrumbs__Wrapper',
+    SEPARATOR: 'Breadcrumbs__Separator',
+    ITEM: 'Breadcrumbs__Item',
+    ITEM_ACTIVE: 'Breadcrumbs__Item--active',
+} as const;
+
+const StyledBreadcrumbs = styled(Box)`
+    display: flex;
+    align-items: center;
+    gap: ${theme.space.space8};
+`;
+
+const StyledBreadcrumbLink = styled(Link)`
+    text-decoration: none;
+    padding: ${theme.space.space2} ${theme.space.space4};
+    border-radius: ${theme.radius.radius6};
+    color: ${theme.color.neutral.textSubtle};
+
+    &:hover {
+        color: ${theme.color.neutral.textMuted};
+        span {
+            font-weight: 500;
+        }
+    }
+`;
+
+const StyledBreadcrumbItemText = styled(Text)`
+    padding: ${theme.space.space2} ${theme.space.space4};
+    white-space: nowrap;
+`;
+
+export type BreadcrumbItem = {
+    label: string;
+    url?: string;
+};
+
+export type BreadcrumbsProps = {
+    items: BreadcrumbItem[];
+    className?: string;
+};
+
+export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ items, className }) => (
+    <StyledBreadcrumbs className={clsx(breadcrumbClassNames.WRAPPER, className)}>
+        {items.map((item, index) => {
+            const isActive = index === items.length - 1;
+            return (
+                <React.Fragment key={item.label}>
+                    {index > 0 && (
+                        <Text
+                            as='span'
+                            size='small'
+                            weight='medium'
+                            color={theme.color.neutral.textSubtle}
+                            className={breadcrumbClassNames.SEPARATOR}
+                        >
+                            /
+                        </Text>
+                    )}
+                    <span className={clsx(breadcrumbClassNames.ITEM, isActive && breadcrumbClassNames.ITEM_ACTIVE)}>
+                        {!isActive && item.url ? (
+                            <StyledBreadcrumbLink to={item.url}>
+                                <Text as='span' size='small' weight='normal'>{item.label}</Text>
+                            </StyledBreadcrumbLink>
+                        ) : (
+                            <StyledBreadcrumbItemText
+                                size='small'
+                                weight={isActive ? 'bold' : 'normal'}
+                                color={isActive ? theme.color.neutral.text : theme.color.neutral.textSubtle}
+                            >
+                                {item.label}
+                            </StyledBreadcrumbItemText>
+                        )}
+                    </span>
+                </React.Fragment>
+            );
+        })}
+    </StyledBreadcrumbs>
+);

package/src/components/breadcrumb/index.ts

@@ -0,0 +1 @@
+export * from './breadcrumb.js';

package/src/components/index.ts

@@ -31,3 +31,4 @@ export * from './collapsible_card/index.js';
 export * from './select/index.js';
 export * from './switch/index.js';
 export * from './table/index.js';
+export * from './breadcrumb/index.js';