added breadcrumbs (#84)

* added breadcrumbs * review changes
egovernments · Jun 19, 2024 · a737c7e · a737c7e
1 parent 901f841
commit a737c7e
Show file tree

Hide file tree

Showing 13 changed files with 334 additions and 23 deletions.
diff --git a/react/css/CHANGELOG.md b/react/css/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## [0.0.2-beta.5] - 2024-06-19
+### Added
+- Added BreadCrumb css
+
 ## [0.0.2-beta.4] - 2024-06-17
 ### Added
 - Added Timeline Molecule related css

diff --git a/react/css/package.json b/react/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-components-css",
-  "version": "0.0.2-beta.4",
+  "version": "0.0.2-beta.5",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <[email protected]>",

diff --git a/react/css/src/digitv2/components/breadcrumbV2.scss b/react/css/src/digitv2/components/breadcrumbV2.scss
@@ -0,0 +1,57 @@
+@import url("../index.scss");
+@import url("../typography.scss");
+
+.digit-bread-crumb {
+    display: flex;
+    gap: theme(digitv2.spacers.spacer2);
+    height: 1.375rem;
+    padding: unset;
+}
+
+.digit-bread-crumb--item {
+    display: flex;
+    gap: theme(digitv2.spacers.spacer2);
+
+
+    button {
+        outline: none;
+    }
+
+
+    .digit-bread-crumb-content {
+        @extend .typography.body-s;
+        display: flex !important;
+        gap: theme(digitv2.spacers.spacer1);
+        cursor: pointer;
+        text-decoration: none;
+
+        svg {
+            width: theme(digitv2.spacers.spacer5);
+            height: theme(digitv2.spacers.spacer5);
+        }
+
+        color: theme(digitv2.lightTheme.primary-1);
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    span {
+        cursor: pointer;
+    }
+
+    .digit-bread-crumb-content.current,
+    .digit-bread-crumb-seperator {
+        @extend .typography.body-s;
+        color: theme(digitv2.lightTheme.text-secondary);
+        text-decoration: none;
+        cursor: default;
+    }
+
+}
+
+ol,
+ul {
+    list-style: none;
+}
diff --git a/react/css/src/digitv2/index.scss b/react/css/src/digitv2/index.scss
@@ -1,5 +1,6 @@
 @import url("./components/backLinkV2.scss");
 @import url("./components/bodyContainerV2.scss");
+@import url("./components/breadcrumbV2.scss");
 @import url("./components/buttonsV2.scss");
 @import url("./components/checkboxV2.scss");
 @import url("./components/errorMessageV2.scss");

diff --git a/react/example/public/index.html b/react/example/public/index.html
@@ -9,7 +9,7 @@
     rel='stylesheet' type='text/css'>
     <link
     rel="stylesheet"
-    href="https://unpkg.com/@egovernments/[email protected].4/dist/index.css"
+    href="https://unpkg.com/@egovernments/[email protected].5/dist/index.css"
   />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#00bcd1" />

diff --git a/react/modules/Project/package.json b/react/modules/Project/package.json
@@ -19,7 +19,7 @@
     },
     "dependencies": {
         "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
-        "@egovernments/digit-ui-components": "0.0.2-beta.5",
+        "@egovernments/digit-ui-components": "0.0.2-beta.6",
         "lodash": "^4.17.21",
         "react": "17.0.2",
         "react-date-range": "^1.4.0",

diff --git a/react/modules/core/package.json b/react/modules/core/package.json
@@ -14,7 +14,7 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.2-beta.5",
+    "@egovernments/digit-ui-components": "0.0.2-beta.6",
     "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
     "react": "17.0.2",
     "react-dom": "17.0.2",

diff --git a/react/modules/sample/package.json b/react/modules/sample/package.json
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
-    "@egovernments/digit-ui-components": "0.0.2-beta.5",
+    "@egovernments/digit-ui-components": "0.0.2-beta.6",
     "react": "17.0.2",
     "react-date-range": "^1.4.0",
     "react-dom": "17.0.2",

diff --git a/react/package.json b/react/package.json
@@ -77,7 +77,7 @@
     "@egovernments/digit-ui-module-sample": "0.0.1",
     "@egovernments/digit-ui-react-components": "1.7.10",
     "@egovernments/digit-ui-svg-components": "1.0.4",
-    "@egovernments/digit-ui-components": "0.0.2-beta.5",
+    "@egovernments/digit-ui-components": "0.0.2-beta.6",
     "babel-loader": "8.1.0",
     "clean-webpack-plugin": "4.0.0",
     "css-loader": "5.2.6",

diff --git a/react/ui-components/CHANGELOG.md b/react/ui-components/CHANGELOG.md
@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.0.2-beta.6] - 2024-06-19
+### New Changes
+- Added BreadCrumb Component. 
+
 ## [0.0.2-beta.5] - 2024-06-17
 ### New Changes
 - Added Timeline Molecule. 

diff --git a/react/ui-components/package.json b/react/ui-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-components",
-  "version": "0.0.2-beta.5",
+  "version": "0.0.2-beta.6",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
@@ -51,7 +51,7 @@
     "dist"
   ],
   "dependencies": {
-    "@egovernments/digit-ui-components-css": "0.0.2-beta.4",
+    "@egovernments/digit-ui-components-css": "0.0.2-beta.5",
     "@egovernments/digit-ui-libraries": "1.8.1-beta.1",
     "@egovernments/digit-ui-svg-components": "1.0.4",
     "@googlemaps/js-api-loader": "1.13.10",

diff --git a/react/ui-components/src/atoms/BreadCrumb.js b/react/ui-components/src/atoms/BreadCrumb.js
@@ -1,31 +1,85 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { Link } from "react-router-dom";
 
 const BreadCrumb = (props) => {
+  const [expanded, setExpanded] = useState(false);
+  const [crumbsToDisplay, setCrumbsToDisplay] = useState([...props?.crumbs]);
+
+  useEffect(() => {
+    if (props?.maxItems && props?.crumbs.length > props?.maxItems && !expanded) {
+      const startCrumbs = props.crumbs.slice(0, props?.itemsBeforeCollapse || Math.ceil(props.maxItems / 2));
+      const endCrumbs = props.crumbs.slice(
+        props.crumbs.length - (props?.itemsAfterCollapse || Math.floor(props.maxItems / 2))
+      );
+      let updatedCrumbs = startCrumbs.concat([{ show: true, content: props?.expandText || "..." }], endCrumbs);
+      setCrumbsToDisplay(updatedCrumbs);
+    } else {
+      setCrumbsToDisplay([...props.crumbs]);
+    }
+  }, [props.crumbs, props.maxItems, expanded,props.itemsBeforeCollapse,props.itemsAfterCollapse,props?.expandText]);
+
   function isLast(index) {
-    return index === props.crumbs.length - 1;
+    return index === crumbsToDisplay.length - 1;
   }
+
+  const handleCrumbClick = () => {
+    setExpanded(!expanded);
+  };
+
   return (
-    <ol className={`digit-bread-crumb ${props?.className ? props?.className : ""}`} style={props?.style}>
-      {props?.crumbs?.map((crumb, ci) => {
-        if (!crumb?.show) return;
+    <ol
+      className={`digit-bread-crumb ${
+        props?.className ? props?.className : ""
+      }`}
+      style={props?.style}
+    >
+      {crumbsToDisplay?.map((crumb, ci) => {
+        if (!crumb?.show) return null;
         if (crumb?.isBack)
           return (
-            <li key={ci} style={props?.itemStyle} className="digit-bread-crumb--item">
+            <li
+              key={ci}
+              style={props?.itemStyle}
+              className={`digit-bread-crumb--item ${"back-crumb-item"}`}
+            >
               <span onClick={() => window.history.back()}>{crumb.content}</span>
             </li>
           );
         return (
-          <li key={ci} style={props?.itemStyle} className="digit-bread-crumb--item">
-            {isLast(ci) || !crumb?.path ? (
-              <span className="last" style={props?.spanStyle}>
-                {crumb.content}
-              </span>
-            ) : (
-              <Link to={{ pathname: crumb.path, state: { count: crumb?.count } }}>{crumb.content}</Link>
-            )}
-          </li>
+          <>
+            <li
+              key={ci}
+              style={props?.itemStyle}
+              className="digit-bread-crumb--item"
+            >
+              {isLast(ci) || !crumb?.path ? (
+                <span
+                  className={`digit-bread-crumb-content ${
+                    isLast(ci) ? "current" : "default"
+                  }`}
+                  style={props?.spanStyle}
+                  onClick={(crumb.content === "..."  || crumb.content === props?.expandText)? handleCrumbClick : null}
+                >
+                  {crumb?.icon && crumb.icon}
+                  {crumb.content}
+                </span>
+              ) : (
+                <Link
+                  to={{ pathname: crumb.path, state: { count: crumb?.count } }}
+                  className="digit-bread-crumb-content"
+                >
+                  {crumb?.icon && crumb.icon}
+                  {crumb.content}
+                </Link>
+              )}
+              {!isLast(ci) && (
+                <div className="digit-bread-crumb-seperator">
+                  {props?.customSeperator ? props?.customSeperator : "/"}
+                </div>
+              )}
+            </li>
+          </>
         );
       })}
     </ol>
@@ -37,6 +91,11 @@ BreadCrumb.propTypes = {
   className: PropTypes.string,
   style: PropTypes.object,
   spanStyle: PropTypes.object,
+  customSeperator: PropTypes.element,
+  maxItems:PropTypes.number,
+  itemsAfterCollapse:PropTypes.number,
+  itemsBeforeCollapse:PropTypes.number,
+  expandText:PropTypes.string
 };
 
 BreadCrumb.defaultProps = {