From 1a20bad43064ea71b123efcc7e1607f55fbe0f94 Mon Sep 17 00:00:00 2001 From: cudiousidy Date: Tue, 29 Jul 2025 19:09:37 +0100 Subject: [PATCH 01/54] [ADD] Breadcrumb component --- .../breadcrumb/Breadcrumb.stories.tsx | 65 +++++++++ .../molecules/breadcrumb/Breadcrumb.tsx | 54 ++++++++ src/components/molecules/breadcrumb/index.ts | 3 + src/components/molecules/breadcrumb/types.ts | 131 ++++++++++++++++++ .../molecules/breadcrumb/useBreadcrumb.tsx | 90 ++++++++++++ 5 files changed, 343 insertions(+) create mode 100644 src/components/molecules/breadcrumb/Breadcrumb.stories.tsx create mode 100644 src/components/molecules/breadcrumb/Breadcrumb.tsx create mode 100644 src/components/molecules/breadcrumb/index.ts create mode 100644 src/components/molecules/breadcrumb/types.ts create mode 100644 src/components/molecules/breadcrumb/useBreadcrumb.tsx diff --git a/src/components/molecules/breadcrumb/Breadcrumb.stories.tsx b/src/components/molecules/breadcrumb/Breadcrumb.stories.tsx new file mode 100644 index 00000000..ce00ae59 --- /dev/null +++ b/src/components/molecules/breadcrumb/Breadcrumb.stories.tsx @@ -0,0 +1,65 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import Breadcrumb from './Breadcrumb'; +import type { BreadcrumbItem } from './types'; + +/** + * ## DESCRIPTION + * Breadcrumbs display a hierarchy of links to the current page or resource in an application. + * + * ## SEARCH ICONS + * You can search for icons in the [Lucide Icons] library (https://lucide.dev/icons). Use the icon name as the `icon` prop value to apply it as a separator for the elements. If not set, default separators will be applied. + * + * ## DEPENDENCIES + * - Icon: Uses Icon component from `lucide-react` for icons. + * + */ + +const meta: Meta = { + title: 'Atoms/Breadcrumb', + component: Breadcrumb, + argTypes: { + maxItem: { + control: { type: 'number', min: 2 } + }, + itemsBeforeCollapse: { + control: { type: 'number', min: 1 } + }, + itemsAfterCollapse: { + control: { type: 'number', min: 1 } + } + }, + parameters: { + docs: { + autodocs: true + } + }, + tags: ['autodocs'] +}; +export default meta; + +type Story = StoryObj; + +const items: BreadcrumbItem[] = [ + { title: 'Home', href: '/' }, + { title: 'Library', href: '/library' }, + { title: 'Data', href: '#', target: '_blank' } +]; + +export const Default: Story = { + args: { + items, + variant: 'solid', + separator: '/', + size: 'md', + rounded: false, + className: 'text-white', + shadow: false, + startContent: undefined, + endContent: undefined, + hideSeparator: false, + maxItem: 2, + itemsBeforeCollapse: 1, + itemsAfterCollapse: 1, + iconCollapse: 'ellipsis' + } +}; diff --git a/src/components/molecules/breadcrumb/Breadcrumb.tsx b/src/components/molecules/breadcrumb/Breadcrumb.tsx new file mode 100644 index 00000000..7c518769 --- /dev/null +++ b/src/components/molecules/breadcrumb/Breadcrumb.tsx @@ -0,0 +1,54 @@ +import { cn } from '@/lib/utils'; +import { DynamicIcon, type IconName } from 'lucide-react/dynamic'; +import type { FC } from 'react'; +import Link from '../../atoms/link'; +import { type BreadcrumbProps, breadcrumbVariants } from './types'; +import { useBreadcrumb } from './useBreadcrumb'; + +const Breadcrumb: FC = ({ ...props }) => { + const { + processedItems, + renderSeparator, + isBreadcrumbItem, + className, + endContent, + hideSeparator, + rounded, + separator, + shadow, + size, + startContent, + variant + } = useBreadcrumb({ ...props }); + + return ( + + ); +}; + +export default Breadcrumb; diff --git a/src/components/molecules/breadcrumb/index.ts b/src/components/molecules/breadcrumb/index.ts new file mode 100644 index 00000000..62c3baf2 --- /dev/null +++ b/src/components/molecules/breadcrumb/index.ts @@ -0,0 +1,3 @@ +import Breadcrumb from './Breadcrumb'; +export * from './types'; +export default Breadcrumb; diff --git a/src/components/molecules/breadcrumb/types.ts b/src/components/molecules/breadcrumb/types.ts new file mode 100644 index 00000000..841402cd --- /dev/null +++ b/src/components/molecules/breadcrumb/types.ts @@ -0,0 +1,131 @@ +import type { DynamicIconName } from '@/components/utils/types'; +import { type VariantProps, cva } from 'class-variance-authority'; +import type { JSX } from 'react'; + +export const breadcrumbVariants = cva('flex items-center gap-1 text-sm font-medium transition-colors', { + variants: { + variant: { + solid: [ + 'p-3', + 'rounded', + 'rounded-xl', + 'bg-[#282828]', + 'opacity-70', + 'border-secondary', + 'dark:hover:bg-accent', + 'dark:hover:shadow-secondary' + ], + bordered: [ + 'text-text-light', + 'bg-transparent', + 'border-transparent', + 'hover:bg-gray-light-600', + 'hover:border-gray-light-600', + 'hover:shadow-transparent', + 'dark:text-text-dark', + 'dark:border-transparent', + 'dark:hover:bg-gray-dark-400', + 'dark:hover:border-gray-dark-400', + 'dark:hover:shadow-gray-900' + ], + light: [ + 'text-secondary', + 'border-transparent', + 'bg-transparent', + 'hover:text-text-dark', + 'dark:text-text-dark', + 'hover:border-accent', + 'hover:bg-accent', + 'hover:shadow-secondary' + ] + }, + rounded: { + true: 'rounded-full', + false: 'rounded-md' + }, + shadow: { + true: 'hover:shadow-custom-sm', + false: '' + }, + size: { + md: 'px-md h-10 fs-base tablet:fs-base-tablet', + lg: 'px-lg h-12 fs-h6 tablet:fs-h6-tablet', + sm: 'px-sm h-8 fs-small tablet:fs-small-tablet' + } + }, + defaultVariants: { + variant: 'solid', + size: 'md' + } +}); + +type BreadCrumbVariants = VariantProps['variant']; +type SeparatorVariants = DynamicIconName | '/' | '|' | '>'; +type BreadcrumbSizeVariants = 'md' | 'sm' | 'lg'; + +export type BreadcrumbItem = { + title: string; + href: string; + target?: '_blank' | '_self' | '_parent' | '_top' | undefined; +}; + +export type BreadcrumbProps = { + /** Props for the Breadcrumb component */ + items: BreadcrumbItem[]; + + /** + * @control select + * @default solid + */ + variant: BreadCrumbVariants; + + /** @control text*/ + separator: SeparatorVariants; + + /** + * @control select + * @default md + */ + size: BreadcrumbSizeVariants; + + /** + * @control boolean + * @default false + */ + rounded: boolean; + + /** + * @control boolean + * @default false + */ + shadow: boolean; + + /** + * @control boolean + * @default false + */ + hideSeparator: boolean; + + /** @control text*/ + className?: string; + + /** @control text*/ + startContent: DynamicIconName | undefined; + + /** @control text*/ + endContent: DynamicIconName | undefined; + + /** @control text*/ + maxItem?: number; + + /** @control text*/ + itemsBeforeCollapse?: number; + + /** @control text*/ + itemsAfterCollapse?: number; + + /** @control text*/ + iconCollapse?: DynamicIconName; + + collapseElement?: JSX.Element; +}; diff --git a/src/components/molecules/breadcrumb/useBreadcrumb.tsx b/src/components/molecules/breadcrumb/useBreadcrumb.tsx new file mode 100644 index 00000000..90ca6a28 --- /dev/null +++ b/src/components/molecules/breadcrumb/useBreadcrumb.tsx @@ -0,0 +1,90 @@ +import { DynamicIcon, type IconName } from 'lucide-react/dynamic'; +import type { JSX } from 'react'; +import type { BreadcrumbItem, BreadcrumbProps } from './types'; + +type BreadcrumbItemCollapsed = BreadcrumbItem | JSX.Element; + +type UseBreadcrumbProps = BreadcrumbProps & { + collapsedElement?: JSX.Element; +}; + +export const useBreadcrumb = ({ + items, + variant = 'solid', + size = 'md', + rounded = false, + className = '', + shadow = false, + startContent, + endContent, + hideSeparator = false, + separator, + maxItem = 2, + itemsBeforeCollapse = 1, + itemsAfterCollapse = 1, + iconCollapse, + collapsedElement +}: UseBreadcrumbProps) => { + const renderSeparator = (separator: string | IconName): string | JSX.Element => { + const controlString = /[->/|](?![a-zA-Z0-9])/; + return controlString.test(separator) ? separator : ; + }; + + const itemsCollapsed = ( + items: BreadcrumbItem[], + maxItemToShow: number, + itemsAfterCollapseToShow: number, + itemsBeforeCollapseToShow: number + ): BreadcrumbItemCollapsed[] => { + if (items.length <= maxItemToShow) { + return items; + } + + if (maxItemToShow < 2) { + return items; + } + if (itemsBeforeCollapseToShow + itemsAfterCollapseToShow > maxItemToShow) { + return items; + } + if (itemsBeforeCollapseToShow > maxItemToShow - 1) { + return items; + } + if (itemsAfterCollapseToShow > maxItemToShow - 1) { + return items; + } + + const firstElementBeforeCollapse = items.slice(0, itemsBeforeCollapseToShow); + const lastElementsAfterCollapse = items.slice(-itemsAfterCollapseToShow); + + const collapsedElementJsx: JSX.Element = collapsedElement || ( + + + + ); + + return [...firstElementBeforeCollapse, collapsedElementJsx, ...lastElementsAfterCollapse]; + }; + + const isBreadcrumbItem = (item: BreadcrumbItem | JSX.Element): item is BreadcrumbItem => { + return typeof item === 'object' && item !== null && 'title' in item && 'href' in item; + }; + + const processedItems = itemsCollapsed(items, maxItem, itemsAfterCollapse, itemsBeforeCollapse); + + return { + items, + variant, + size, + rounded, + className, + shadow, + startContent, + endContent, + hideSeparator, + separator, + processedItems, + iconCollapse, + renderSeparator, + isBreadcrumbItem + }; +}; From df35a5da4c34dec3c31b537111f56dd8f1188b56 Mon Sep 17 00:00:00 2001 From: cudiousidy Date: Sun, 3 Aug 2025 15:02:11 +0100 Subject: [PATCH 02/54] [UPDATE] Breadcrumb component stories file --- .../breadcrumb/Breadcrumb.stories.tsx | 403 +++++++++++++++++- .../molecules/breadcrumb/Breadcrumb.tsx | 38 +- src/components/molecules/breadcrumb/types.ts | 88 ++-- .../molecules/breadcrumb/useBreadcrumb.tsx | 34 +- 4 files changed, 483 insertions(+), 80 deletions(-) diff --git a/src/components/molecules/breadcrumb/Breadcrumb.stories.tsx b/src/components/molecules/breadcrumb/Breadcrumb.stories.tsx index ce00ae59..4f68552d 100644 --- a/src/components/molecules/breadcrumb/Breadcrumb.stories.tsx +++ b/src/components/molecules/breadcrumb/Breadcrumb.stories.tsx @@ -1,6 +1,10 @@ +import Dropdown from '@/components/atoms/dropdown'; +import Icon from '@/components/atoms/icon'; import type { Meta, StoryObj } from '@storybook/react'; +import { DynamicIcon } from 'lucide-react/dynamic'; import Breadcrumb from './Breadcrumb'; import type { BreadcrumbItem } from './types'; +import { useBreadcrumb } from './useBreadcrumb'; /** * ## DESCRIPTION @@ -15,7 +19,7 @@ import type { BreadcrumbItem } from './types'; */ const meta: Meta = { - title: 'Atoms/Breadcrumb', + title: 'Molecules/Breadcrumb', component: Breadcrumb, argTypes: { maxItem: { @@ -48,18 +52,401 @@ const items: BreadcrumbItem[] = [ export const Default: Story = { args: { items, - variant: 'solid', - separator: '/', - size: 'md', + variant: null, rounded: false, - className: 'text-white', - shadow: false, + size: 'md', + colorText: '', + separator: '/', + iconCollapse: 'ellipsis', startContent: undefined, endContent: undefined, hideSeparator: false, - maxItem: 2, + maxItem: 0, itemsBeforeCollapse: 1, itemsAfterCollapse: 1, - iconCollapse: 'ellipsis' + className: '', + shadow: false + } +}; + +/** + * - **Sizes**: Different size variants for the breadcrumb component (sm, md, lg). + * This demonstrates how the breadcrumb scales across different size requirements for various UI contexts. + */ +export const Sizes: Story = { + render: () => ( +
+ + + +
+ ) +}; + +/** + * - **Colors**: Text color variations using the colorText prop. + * This shows how to apply different color themes to breadcrumb text for better visual integration with your design system. + */ +export const Colors: Story = { + render: () => ( +
+ + + +
+ ) +}; + +/** + * - **Visual Variants**: Different visual styles including bordered, solid, and default variants. + * This demonstrates the various background and border styling options available for the breadcrumb component. + */ +export const Variants: Story = { + render: () => ( +
+ + + +
+ ) +}; + +/** + * - **Border Radius**: Toggle between rounded and square corners using the rounded prop. + * This shows how to control the corner styling of breadcrumb containers for different design aesthetics. + */ +export const Rounded: Story = { + render: () => ( +
+ + +
+ ) +}; + +/** + * - **Separators**: Different types of separators including text characters (/, |, >) and dynamic icons. + * This demonstrates the flexibility of the separator prop to use both string characters and icon names. + */ +export const Separators: Story = { + render: () => ( +
+ + + + + +
+ ) +}; + +/** + * - **Hidden Separators**: Toggle separator visibility with the hideSeparator prop. + * This is useful when you want to display breadcrumb items without visual separators between them. + */ +export const HiddenSeparators: Story = { + render: () => ( +
+ + +
+ ) +}; + +/** + * - **Start and End Content**: Add icons or content at the beginning and end of the breadcrumb. + * This enhances the breadcrumb with contextual icons like home icons at the start or external link indicators at the end. + */ +export const WithStartEndContent: Story = { + render: () => ( +
+ + + +
+ ) +}; + +/** + * - **Maximum Items and Collapse**: Control the number of visible items with automatic collapsing using icons. + * This is essential for managing long breadcrumb trails by showing only key items and collapsing the middle ones. + */ +export const MaxItemsAndCollapse: Story = { + render: () => ( +
+ + + +
+ ) +}; + +/** + * - **Custom Collapse Elements**: Use custom JSX elements instead of icons for collapsed breadcrumb sections. + * This provides complete control over the visual representation of collapsed items, allowing for interactive buttons or styled elements. + */ + +// mapper from breadcrumb items to dropdown items +const breadcrumbItemsToDropdownSchema = (breadcrumbItems: BreadcrumbItem[], title = 'Rutas ocultas') => { + if (breadcrumbItems.length === 0) { + return []; } + + return [ + { type: 'label' as const, label: title }, + { type: 'separator' as const }, + ...breadcrumbItems.map((item) => ({ + type: 'item' as const, + label: item.title, + onClick: () => { + if (item.href) { + window.location.href = item.href; + } + }, + startContent: + })) + ]; +}; + +function getDropdownForItems(items: BreadcrumbItem[], maxItem: number, before: number, after: number) { + const { getHiddenItems } = useBreadcrumb({ items, maxItem, itemsBeforeCollapse: before, itemsAfterCollapse: after }); + return breadcrumbItemsToDropdownSchema(getHiddenItems()); +} + +const maxItem = 2; +const itemsBeforeCollapse = 1; +const itemsAfterCollapse = 1; + +export const WithJsxElmentCollapsed: Story = { + render: () => { + return ( +
+ + + + } + /> +
+ ); + } +}; + +/** + * - **Complete Examples**: Comprehensive demonstrations combining multiple props and features. + * These examples show real-world usage scenarios with various combinations of styling, icons, collapsing, and visual effects. + */ +export const CompleteExample: Story = { + render: () => ( +
+ + + + } + /> + +
+ ) +}; + +/** + * - **Custom CSS Classes**: Apply custom styling through the className prop. + * This demonstrates how to extend the default breadcrumb appearance with custom borders, gradients, and other CSS effects. + */ +export const CustomClassName: Story = { + render: () => ( +
+ + +
+ ) }; diff --git a/src/components/molecules/breadcrumb/Breadcrumb.tsx b/src/components/molecules/breadcrumb/Breadcrumb.tsx index 7c518769..bc6d0eb4 100644 --- a/src/components/molecules/breadcrumb/Breadcrumb.tsx +++ b/src/components/molecules/breadcrumb/Breadcrumb.tsx @@ -1,6 +1,7 @@ import { cn } from '@/lib/utils'; import { DynamicIcon, type IconName } from 'lucide-react/dynamic'; import type { FC } from 'react'; +import React from 'react'; import Link from '../../atoms/link'; import { type BreadcrumbProps, breadcrumbVariants } from './types'; import { useBreadcrumb } from './useBreadcrumb'; @@ -18,35 +19,48 @@ const Breadcrumb: FC = ({ ...props }) => { shadow, size, startContent, - variant + variant, + classText } = useBreadcrumb({ ...props }); return ( - ); }; diff --git a/src/components/molecules/breadcrumb/types.ts b/src/components/molecules/breadcrumb/types.ts index 841402cd..7946b96f 100644 --- a/src/components/molecules/breadcrumb/types.ts +++ b/src/components/molecules/breadcrumb/types.ts @@ -5,39 +5,8 @@ import type { JSX } from 'react'; export const breadcrumbVariants = cva('flex items-center gap-1 text-sm font-medium transition-colors', { variants: { variant: { - solid: [ - 'p-3', - 'rounded', - 'rounded-xl', - 'bg-[#282828]', - 'opacity-70', - 'border-secondary', - 'dark:hover:bg-accent', - 'dark:hover:shadow-secondary' - ], - bordered: [ - 'text-text-light', - 'bg-transparent', - 'border-transparent', - 'hover:bg-gray-light-600', - 'hover:border-gray-light-600', - 'hover:shadow-transparent', - 'dark:text-text-dark', - 'dark:border-transparent', - 'dark:hover:bg-gray-dark-400', - 'dark:hover:border-gray-dark-400', - 'dark:hover:shadow-gray-900' - ], - light: [ - 'text-secondary', - 'border-transparent', - 'bg-transparent', - 'hover:text-text-dark', - 'dark:text-text-dark', - 'hover:border-accent', - 'hover:bg-accent', - 'hover:shadow-secondary' - ] + solid: ['rounded', 'rounded-xl', 'bg-[#282828]', 'opacity-70'], + bordered: ['rounded', 'rounded-xl', 'border-2', 'border-solid'] }, rounded: { true: 'rounded-full', @@ -54,7 +23,7 @@ export const breadcrumbVariants = cva('flex items-center gap-1 text-sm font-medi } }, defaultVariants: { - variant: 'solid', + variant: null, size: 'md' } }); @@ -77,55 +46,58 @@ export type BreadcrumbProps = { * @control select * @default solid */ - variant: BreadCrumbVariants; - - /** @control text*/ - separator: SeparatorVariants; - - /** - * @control select - * @default md - */ - size: BreadcrumbSizeVariants; + variant?: BreadCrumbVariants; /** * @control boolean * @default false */ - rounded: boolean; + rounded?: boolean; + + /** @control text*/ + colorText?: string; /** - * @control boolean - * @default false + * @control select + * @default md */ - shadow: boolean; + size?: BreadcrumbSizeVariants; + + /** @control text*/ + separator?: SeparatorVariants; /** * @control boolean * @default false */ - hideSeparator: boolean; + hideSeparator?: boolean; /** @control text*/ - className?: string; + startContent?: DynamicIconName | undefined; /** @control text*/ - startContent: DynamicIconName | undefined; + endContent?: DynamicIconName | undefined; /** @control text*/ - endContent: DynamicIconName | undefined; + maxItem: number; /** @control text*/ - maxItem?: number; + itemsBeforeCollapse: number; /** @control text*/ - itemsBeforeCollapse?: number; - - /** @control text*/ - itemsAfterCollapse?: number; + itemsAfterCollapse: number; /** @control text*/ iconCollapse?: DynamicIconName; - collapseElement?: JSX.Element; + collapsedElement?: JSX.Element; + + /** + * @control boolean + * @default false + */ + shadow?: boolean; + + /** @control text*/ + className?: string; }; diff --git a/src/components/molecules/breadcrumb/useBreadcrumb.tsx b/src/components/molecules/breadcrumb/useBreadcrumb.tsx index 90ca6a28..c9fc9251 100644 --- a/src/components/molecules/breadcrumb/useBreadcrumb.tsx +++ b/src/components/molecules/breadcrumb/useBreadcrumb.tsx @@ -10,7 +10,7 @@ type UseBreadcrumbProps = BreadcrumbProps & { export const useBreadcrumb = ({ items, - variant = 'solid', + variant, size = 'md', rounded = false, className = '', @@ -25,11 +25,39 @@ export const useBreadcrumb = ({ iconCollapse, collapsedElement }: UseBreadcrumbProps) => { + const classText = (colorText: string): string => { + switch (colorText) { + case 'white': + return 'text-white'; + case 'red': + return 'text-red-500'; + case 'blue': + return 'text-blue-500'; + case 'gray': + return 'text-gray-500'; + case 'indigo': + return 'text-indigo-500'; + default: + return 'text-black'; + } + }; + const renderSeparator = (separator: string | IconName): string | JSX.Element => { const controlString = /[->/|](?![a-zA-Z0-9])/; return controlString.test(separator) ? separator : ; }; + const getHiddenItems = (): BreadcrumbItem[] => { + if (items.length <= maxItem) { + return []; + } + + const startIndex = itemsBeforeCollapse; + const endIndex = items.length - itemsAfterCollapse; + + return items.slice(startIndex, endIndex); + }; + const itemsCollapsed = ( items: BreadcrumbItem[], maxItemToShow: number, @@ -85,6 +113,8 @@ export const useBreadcrumb = ({ processedItems, iconCollapse, renderSeparator, - isBreadcrumbItem + isBreadcrumbItem, + classText, + getHiddenItems }; }; From 9efe6eb2e660d63b0bca669ede9f2fe0994f5e55 Mon Sep 17 00:00:00 2001 From: cudiousidy Date: Sun, 3 Aug 2025 16:36:43 +0100 Subject: [PATCH 03/54] [UPDATE] Breadcrumb component stories file, new bgColor variable and types changes --- .../breadcrumb/Breadcrumb.stories.tsx | 52 +++++++++---------- .../molecules/breadcrumb/Breadcrumb.tsx | 3 +- src/components/molecules/breadcrumb/types.ts | 16 +++++- .../molecules/breadcrumb/useBreadcrumb.tsx | 2 + 4 files changed, 43 insertions(+), 30 deletions(-) diff --git a/src/components/molecules/breadcrumb/Breadcrumb.stories.tsx b/src/components/molecules/breadcrumb/Breadcrumb.stories.tsx index 4f68552d..4e95c615 100644 --- a/src/components/molecules/breadcrumb/Breadcrumb.stories.tsx +++ b/src/components/molecules/breadcrumb/Breadcrumb.stories.tsx @@ -53,6 +53,7 @@ export const Default: Story = { args: { items, variant: null, + bgColor: 'none', rounded: false, size: 'md', colorText: '', @@ -144,7 +145,8 @@ export const Variants: Story = { itemsAfterCollapse={1} itemsBeforeCollapse={1} separator='/' - variant='solid' + variant='outline' + bgColor='primary' colorText='white' /> @@ -155,6 +157,7 @@ export const Variants: Story = { /** * - **Border Radius**: Toggle between rounded and square corners using the rounded prop. * This shows how to control the corner styling of breadcrumb containers for different design aesthetics. + * Toggle true or false. */ export const Rounded: Story = { render: () => ( @@ -167,8 +170,7 @@ export const Rounded: Story = { itemsBeforeCollapse={1} separator='/' rounded={true} - variant='solid' - colorText='white' + variant='bordered' /> ) @@ -320,11 +321,6 @@ export const MaxItemsAndCollapse: Story = { ) }; -/** - * - **Custom Collapse Elements**: Use custom JSX elements instead of icons for collapsed breadcrumb sections. - * This provides complete control over the visual representation of collapsed items, allowing for interactive buttons or styled elements. - */ - // mapper from breadcrumb items to dropdown items const breadcrumbItemsToDropdownSchema = (breadcrumbItems: BreadcrumbItem[], title = 'Rutas ocultas') => { if (breadcrumbItems.length === 0) { @@ -356,23 +352,27 @@ const maxItem = 2; const itemsBeforeCollapse = 1; const itemsAfterCollapse = 1; +/** + * - **Custom Collapse Elements**: Use custom JSX elements instead of icons for collapsed breadcrumb sections. + * This provides complete control over the visual representation of collapsed items, allowing for interactive buttons or styled elements. + * In the current example, the dropdown defined in the atoms section has been used. + */ + export const WithJsxElmentCollapsed: Story = { render: () => { return ( -
- - - - } - /> -
+ + + + } + /> ); } }; @@ -411,12 +411,10 @@ export const CompleteExample: Story = { itemsAfterCollapse={1} itemsBeforeCollapse={1} separator='|' - variant='solid' + variant='outline' rounded={false} shadow={false} - colorText='white' iconCollapse='ellipsis' - className='text-white' /> ) diff --git a/src/components/molecules/breadcrumb/Breadcrumb.tsx b/src/components/molecules/breadcrumb/Breadcrumb.tsx index bc6d0eb4..edf6896d 100644 --- a/src/components/molecules/breadcrumb/Breadcrumb.tsx +++ b/src/components/molecules/breadcrumb/Breadcrumb.tsx @@ -20,12 +20,13 @@ const Breadcrumb: FC = ({ ...props }) => { size, startContent, variant, + bgColor, classText } = useBreadcrumb({ ...props }); return (