diff --git a/src/components.d.ts b/src/components.d.ts index c9976b90..416dbdab 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -343,7 +343,6 @@ export namespace Components { } interface BdsBreadcrumb { "items": string | Array<{ label: string; href?: string }>; - "maxVisible": number; } interface BdsButton { /** @@ -4014,7 +4013,6 @@ declare namespace LocalJSX { } interface BdsBreadcrumb { "items"?: string | Array<{ label: string; href?: string }>; - "maxVisible"?: number; } interface BdsButton { /** diff --git a/src/components/breadcrumb/breadcrumb.mdx b/src/components/breadcrumb/breadcrumb.mdx new file mode 100644 index 00000000..611f78fd --- /dev/null +++ b/src/components/breadcrumb/breadcrumb.mdx @@ -0,0 +1,44 @@ +import { + Story, + ArgsTable, + Canvas, + Meta, + Title, + Subtitle, + Description, + Primary, + Controls, + Stories, + Source, +} from '@storybook/blocks'; +import * as BreadcrumbStories from './breadcrumb.stories'; + +# Breadcrumb + +[Component Detail](https://design.blip.ai/document/13#/breadcrumb/visao-geral-breadcrumb) + |  +[Component Design](https://design.blip.ai/d/UbKsV1JhXTK4/design-1#/breadcrumb/resumo-breadcrumb) + |  +[Accessibility](https://design.blip.ai/d/UbKsV1JhXTK4/design-1#/breadcrumb/acessibilidade-breadcrumb) + +## Overview + +Breadcrumbs provide a navigational aid to help users understand their location within the hierarchy of a website or app and easily move back to higher levels of that hierarchy. + + + + + +The following properties are available for the Breadcrumb component. + + + +## Events + +Some examples of Breadcrumb Events. + + + +## Build on React + + diff --git a/src/components/breadcrumb/breadcrumb.stories.jsx b/src/components/breadcrumb/breadcrumb.stories.jsx new file mode 100644 index 00000000..c8b086c5 --- /dev/null +++ b/src/components/breadcrumb/breadcrumb.stories.jsx @@ -0,0 +1,98 @@ +import { useState } from 'react'; +import DocumentationTemplate from './breadcrumb.mdx'; +import { BdsBreadcrumb } from '../../../blip-ds-react/dist/components'; + +export default { + title: 'Components/Breadcrumb', + tags: ['autodocs'], + parameters: { + docs: { + page: DocumentationTemplate, + }, + }, +}; + +export const Properties = (args) => { + return ( + + ); +}; + +Properties.argTypes = { + items: { + table: { + defaultValue: { summary: '' }, + }, + description: 'Define the labels and hrefs for the breadcrumb items.', + control: { type: 'text' }, + }, +}; + +Properties.args = { + items: JSON.stringify([ + { label: 'Home', href: '/' }, + { label: 'About', href: '/about' }, + { label: 'Contact', href: '/contact' }, + { label: 'Current Page' }, + ]), +}; + +export const Events = () => { + const [clickedItem, setClickedItem] = useState(null); + + const handleBreadcrumbClick = (event) => { + const detail = event.detail; + setClickedItem(detail); + console.log('Breadcrumb item clicked:', detail); + }; + + return ( +
+ handleBreadcrumbClick(event)} + > + {clickedItem && ( +
+

+ You clicked on: {clickedItem.label} + {clickedItem.href && ( + + {' '} + ({clickedItem.href}) + + )} +

+
+ )} +
+ ); +}; + +export const FrameworkReact = () => { + const breadcrumbItems = [ + { label: 'Dashboard', href: '/dashboard' }, + { label: 'Settings', href: '/settings' }, + { label: 'Profile', href: '/profile' }, + { label: 'Edit Profile' }, + ]; + + const handleBreadcrumbClick = (event) => { + const detail = event.detail; + console.log('React Breadcrumb item clicked:', detail); + }; + + return ( + handleBreadcrumbClick(event)} + /> + ); +}; diff --git a/src/components/breadcrumb/breadcrumb.tsx b/src/components/breadcrumb/breadcrumb.tsx index a8bb6f37..9d20efd7 100644 --- a/src/components/breadcrumb/breadcrumb.tsx +++ b/src/components/breadcrumb/breadcrumb.tsx @@ -10,6 +10,8 @@ export class Breadcrumb { @State() parsedItems: Array<{ label: string; href?: string }> = []; + @State() isDropdownOpen: boolean = false; + @Watch('items') parseItems(newValue: string | Array<{ label: string; href?: string }>) { if (typeof newValue === 'string') { @@ -27,10 +29,6 @@ export class Breadcrumb { this.parseItems(this.items); } - @Prop() maxVisible: number = 3; - - @State() isDropdownOpen: boolean = false; - toggleDropdown() { this.isDropdownOpen = !this.isDropdownOpen; } @@ -41,13 +39,13 @@ export class Breadcrumb { } const visibleItems = - this.parsedItems.length <= this.maxVisible + this.parsedItems.length <= 3 ? this.parsedItems : [ - this.parsedItems[0], - { label: '...', href: null }, - this.parsedItems[this.parsedItems.length - 1], - ]; + this.parsedItems[0], + { label: '...', href: null }, + this.parsedItems[this.parsedItems.length - 1], + ]; return (