HOV-50 | Added New component Breadcrumb

docs/docs/components/breadcrumb.mdx

@@ -0,0 +1,60 @@
+# Breadcrumb
+
+To display hierarchy with respect to current location and help with navigation.
+
+### Quick start
+
+Here's a quick start guide to get started with the Breadcrumb component
+
+### Importing Component
+
+```jsx
+import { Breadcrumb } from "@hover-design/react";
+```
+
+### Code Snippets and Examples
+
+import "@hover-design/react/dist/style.css";
+import { Breadcrumb, Card } from "@hover-design/react";
+export const BreadcrumbComponent = ({ list, separator = "/" }) => (
+  <Breadcrumb crumbs={list} separator={separator} />
+);
+const list = [
+  { title: "Hover" },
+  { title: "Components", href: "#" },
+  { title: "Docs", href: "#" },
+];
+
+```jsx
+const App = () => {
+  const list = [
+    { title: "Hover" },
+    { title: "Components", href: "#" },
+    { title: "Docs", href: "#" },
+  ];
+  return (
+    <div className="App">
+      <Breadcrumb crumbs={list} separator={"/"} />
+    </div>
+  );
+};
+```
+
+#### Example
+
+<Card variant="shadow">
+  <BreadcrumbComponent list={list} separator=">" />
+</Card>
+
+### Breadcrumb
+
+| Property  | Description             | Type                | Default Version |
+| :-------- | :---------------------- | :------------------ | :-------------- |
+| crumbs    | List of Breadcrumbs     | Array[crumb]        | -               |
+| separator | Separator between links | string or ReactNode | `/`             |
+
+### crumbs
+
+| Property | Description                               | Type   | Default Version |
+| :------- | :---------------------------------------- | :----- | :-------------- |
+| crumb    | Object with title(must) & href properties | Object |                 |

lib/src/components/Breadcrumb/BreadCrumb.stories.tsx

@@ -0,0 +1,23 @@
+import { Breadcrumb, BreadcrumbProps } from "./Breadcrumb";
+import type { Story } from "@ladle/react";
+
+export const Controls: Story<BreadcrumbProps> = ({
+  crumbs,
+  separator = "/",
+  className,
+  ...nativeProps
+}) => (
+  <>
+    <Breadcrumb crumbs={crumbs} separator={separator} {...nativeProps} />
+  </>
+);
+const crumbs = [
+  { title: "Hover" },
+  { title: "Documantation", href: "#" },
+  { title: "About", href: "#" },
+];
+const separator = ">";
+Controls.args = {
+  crumbs,
+  separator,
+};

lib/src/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,46 @@
+import React, { forwardRef } from "react";
+import {
+  breadcrumbWrapper,
+  crumbSeparator,
+  crumbTitle,
+} from "./breadcrumb.css";
+
+type crumb = {
+  title: string;
+  href?: string;
+};
+
+export interface BreadcrumbProps {
+  crumbs: Array<crumb>;
+  separator?: string | React.ReactNode;
+  className?: string;
+}
+
+const Breadcrumb: React.ForwardRefRenderFunction<
+  HTMLDivElement,
+  BreadcrumbProps
+> = ({ crumbs, separator = "/", className, ...nativeProps }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={`${breadcrumbWrapper} ${className}`}
+      {...nativeProps}
+    >
+      {crumbs.map((b, index, arr) => {
+        return (
+          <React.Fragment key={index}>
+            <a className={`${crumbTitle}`} href={b.href}>
+              {b.title}
+            </a>
+            {arr.length - 1 !== index && (
+              <span className={`${crumbSeparator}`}>{separator}</span>
+            )}
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+};
+const BreadcrumbWithRef = forwardRef(Breadcrumb);
+
+export { BreadcrumbWithRef as Breadcrumb };

lib/src/components/Breadcrumb/breadcrumb.css.ts

@@ -0,0 +1,12 @@
+import { style } from "@vanilla-extract/css";
+
+export const breadcrumbWrapper = style({
+    display: "flex",
+    alignItems: "center"
+  });
+  export const crumbTitle = style({
+    paddingLeft:"1em"
+  })
+  export const crumbSeparator = style({
+    paddingLeft:"1em"
+  })

lib/src/components/Breadcrumb/index.ts

@@ -0,0 +1,2 @@
+export * from "./Breadcrumb";
+export * from "./breadcrumb.css";

lib/src/index.ts

@@ -1,5 +1,6 @@
 export * from "./components/Badge";
 export * from "./components/Button";
+export * from "./components/Breadcrumb";
 export * from "./components/Card";
 export * from "./components/Checkbox";
 export * from "./components/Flex";