Merge pull request #82 from brainstormforce/SUR-230-breadcrumb

SUR-230 breadcrumb

dist/force-ui.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom'), 'version' => '77e90e670a9e291ae1b9');
+<?php return array('dependencies' => array('react', 'react-dom'), 'version' => '826a91be3e2c7572e3a3');

src/components/breadcrumb/breadcrumb.jsx

@@ -0,0 +1,110 @@
+import React, { createContext, useContext } from 'react';
+import { cn } from '@/utilities/functions';
+import { ChevronRight, Ellipsis } from 'lucide-react';
+
+const BreadcrumbContext = createContext();
+
+const sizeClasses = {
+	sm: {
+		text: 'text-sm',
+		separator: 'text-sm',
+		separatorIconSize: 16,
+	},
+	md: {
+		text: 'text-base',
+		separator: 'text-base',
+		separatorIconSize: 18,
+	},
+};
+
+const Breadcrumb = ( { children, size = 'sm' } ) => {
+	const sizes = sizeClasses[ size ] || sizeClasses.sm;
+
+	return (
+		<BreadcrumbContext.Provider value={ { sizes } }>
+			<nav className="flex m-0" aria-label="Breadcrumb">
+				<ul className="m-0 inline-flex items-center space-x-1 md:space-x-1">
+					{ children }
+				</ul>
+			</nav>
+		</BreadcrumbContext.Provider>
+	);
+};
+
+const BreadcrumbList = ( { children } ) => {
+	return <>{ children }</>;
+};
+
+const BreadcrumbItem = ( { children } ) => {
+	return <li className="m-0 inline-flex items-center gap-2">{ children }</li>;
+};
+
+const BreadcrumbLink = ( {
+	href,
+	children,
+	className,
+	as: AsElement = 'a',
+	...props
+} ) => {
+	const { sizes } = useContext( BreadcrumbContext );
+	return (
+		<AsElement
+			href={ href }
+			className={ cn(
+				sizes.text,
+				'px-1 font-medium no-underline text-text-tertiary hover:text-text-primary hover:underline',
+				'focus:outline-none focus:ring-1 focus:ring-border-interactive focus:border-border-interactive focus:rounded-sm',
+				'transition-all duration-200',
+				className
+			) }
+			{ ...props }
+		>
+			{ children }
+		</AsElement>
+	);
+};
+
+const BreadcrumbSeparator = ( { type } ) => {
+	const { sizes } = useContext( BreadcrumbContext );
+	const separatorIcons = {
+		slash: <span className={ cn( 'mx-1', sizes.separator ) }>/</span>,
+		arrow: <ChevronRight size={ sizes.separatorIconSize } />,
+	};
+
+	return (
+		<span className="flex items-center text-text-tertiary mx-2">
+			{ separatorIcons[ type ] || separatorIcons.arrow }
+		</span>
+	);
+};
+
+const BreadcrumbEllipsis = () => {
+	const { sizes } = useContext( BreadcrumbContext );
+
+	return (
+		<Ellipsis
+			className="mt-[2px] cursor-pointer text-text-tertiary hover:text-text-primary"
+			size={ sizes.separatorIconSize + 4 }
+		/>
+	);
+};
+
+const BreadcrumbPage = ( { children } ) => {
+	const { sizes } = useContext( BreadcrumbContext );
+
+	return (
+		<span className={ cn( sizes.text, 'font-medium text-text-primary' ) }>
+			{ children }
+		</span>
+	);
+};
+
+export {
+	Breadcrumb,
+	BreadcrumbList,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbSeparator,
+	BreadcrumbEllipsis,
+	BreadcrumbPage,
+};

src/components/breadcrumb/breadcrumb.stories.js

@@ -0,0 +1,69 @@
+// Breadcrumb.stories.js
+
+import {
+	Breadcrumb,
+	BreadcrumbList,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbSeparator,
+	BreadcrumbEllipsis,
+	BreadcrumbPage,
+} from './breadcrumb'; // Adjust the import path as needed
+
+export default {
+	title: 'Atoms/Breadcrumb',
+	component: Breadcrumb,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		size: {
+			control: { type: 'select' },
+			options: [ 'sm', 'md' ],
+			description: 'Size of the breadcrumb component',
+			defaultValue: 'sm',
+		},
+		separatorType: {
+			control: { type: 'select' },
+			options: [ 'arrow', 'slash' ],
+			description: 'Type of separator between breadcrumb items',
+			defaultValue: 'arrow',
+		},
+	},
+};
+
+const Template = ( args ) => (
+	<Breadcrumb size={ args.size }>
+		<BreadcrumbList>
+			<BreadcrumbItem>
+				<BreadcrumbLink href="#">Home</BreadcrumbLink>
+			</BreadcrumbItem>
+			<BreadcrumbSeparator type={ args.separatorType } />
+			<BreadcrumbItem>
+				<BreadcrumbEllipsis />
+			</BreadcrumbItem>
+			<BreadcrumbSeparator type={ args.separatorType } />
+			<BreadcrumbItem>
+				<BreadcrumbLink href="#">Category</BreadcrumbLink>
+			</BreadcrumbItem>
+			<BreadcrumbSeparator type={ args.separatorType } />
+			<BreadcrumbItem>
+				<BreadcrumbPage>Current Page</BreadcrumbPage>
+			</BreadcrumbItem>
+		</BreadcrumbList>
+	</Breadcrumb>
+);
+
+export const Basic = Template.bind( {} );
+Basic.args = {
+	size: 'sm',
+	separatorType: 'arrow',
+};
+
+export const MediumSizeWithSlashSeparator = Template.bind( {} );
+MediumSizeWithSlashSeparator.args = {
+	size: 'md',
+	separatorType: 'slash',
+};
+

src/components/breadcrumb/index.js

@@ -0,0 +1,9 @@
+export {
+	Breadcrumb,
+	BreadcrumbList,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbSeparator,
+	BreadcrumbEllipsis,
+	BreadcrumbPage,
+} from './breadcrumb.jsx';

src/components/breadcrumb/readme.md

@@ -0,0 +1,82 @@
+# Breadcrumb Component
+
+## `Breadcrumb` Props
+- **Description:** Wrapper for breadcrumb items.  
+
+### children
+- **type:** `ReactNode`
+- **description:** The breadcrumb items to be displayed inside the breadcrumb navigation.
+
+### size (optional)
+- **type:** `string`
+- **default value:** `sm`
+- **description:** The size of the breadcrumb, can be `sm` or `md`.
+
+## `BreadcrumbList` Props
+- **Description:** Wrapper for the breadcrumb list.  
+
+### children
+- **type:** `ReactNode`
+- **description:** The child items to be rendered as a list of breadcrumb items.
+
+## `BreadcrumbItem` Props
+- **Description:** Represents a single breadcrumb item.  
+
+### children
+- **type:** `ReactNode`
+- **description:** The content for the breadcrumb item, usually containing a link or static text.
+
+## `BreadcrumbLink` Props
+- **Description:** The clickable link within a breadcrumb item.
+
+### href (required)
+- **type:** `string`
+- **description:** The URL the breadcrumb item will link to.
+
+### children
+- **type:** `ReactNode`
+- **description:** The content to be displayed as the breadcrumb link.
+
+### className (optional)
+- **type:** `string`
+- **description:** Additional classes to customize the link styles.
+
+### as (optional)
+- **type:** `string` or `ReactComponent`
+- **default value:** `a`
+- **description:** Used as a wrapper for breadcrumb links. Defaults to an anchor `('a')`, but can be customized with components like `Link` from React Router.
+
+## `BreadcrumbSeparator` Props
+- **Description:** Separator used between breadcrumb items.
+
+### type (optional)
+- **type:** `string`
+- **default value:** `arrow`
+- **description:** The type of separator between breadcrumb items, can be either `slash` ("/") or `arrow` (">").
+
+## `BreadcrumbEllipsis` Props
+- **Description:** Displays an ellipsis when the breadcrumb list is too long, or represents hidden items.
+
+## `BreadcrumbPage` Props
+- **Description:** Represents the current page in the breadcrumb trail, displayed as static text instead of a link.
+
+### children
+- **type:** `ReactNode`
+- **description:** The content representing the current page.
+
+### Example:
+
+```jsx
+<Breadcrumb>
+    <BreadcrumbItem>
+        <BreadcrumbLink href="/home">Home</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator type="slash" />
+    <BreadcrumbItem>
+        <BreadcrumbLink href="/category">Category</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+        <BreadcrumbPage>Current Page</BreadcrumbPage>
+    </BreadcrumbItem>
+</Breadcrumb>

src/components/index.js

@@ -21,6 +21,15 @@ export { default as EditorInput } from './editor-input/index';
 export { default as ProgressSteps } from './progress-steps/index';
 export { default as Skeleton } from './skeleton/index';
 export { default as Menu } from './menu-item/index';
+export {
+	Breadcrumb,
+	BreadcrumbList,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbSeparator,
+	BreadcrumbEllipsis,
+	BreadcrumbPage,
+} from './breadcrumb/index';
 export { default as Dialog } from './dialog/index';
 export { default as Topbar } from './topbar/index';
 export { default as Drawer } from './drawer/index';