[Feat]: New Breadcrumb component

[Emmagevv]

Description: The Breadcrumb component provides a navigation aid that helps users understand their location within the hierarchy of a website or application. It displays a trail of links indicating the current page's path, allowing users to easily navigate back to previous levels.

Requirements:

1. Component Implementation:

• Implement the Breadcrumb component in TypeScript.
• Utilize SCSS with BEM methodology for styling.
• Integrate design tokens from @geneui/tokens for consistent colors, font sizes, spacing, and separators.
• Support dynamic generation of breadcrumbs from a route path and provide custom separators (e.g., /, >, |).

2. Unit Tests:

• Write unit tests using Jest and React Testing Library.
• Ensure test coverage for all props, including rendering of breadcrumb links and separators.
• Test for edge cases such as missing links or unsupported separator types.

3. Storybook Stories:

• Create a Storybook story for the Breadcrumb component.
• Showcase different breadcrumb structures (e.g., with multiple levels, with custom separators).
• Create controls for the props so users can interact with the Breadcrumb component in Storybook.
• Document all props of the public interfaces.

4. Figma Design:

Follow the design outlined in the provided Figma link.

Checklist:

• Component is implemented in TypeScript.
• Styling follows SCSS using BEM methodology.
• Design tokens from @geneui/tokens are used for colors, font sizes, spacing, and separators.
• Unit tests written and cover different states and edge cases.
• Storybook stories created with examples of all props and breadcrumb types.
• Figma design matches the component implementation.