From a737c7e022e435f841f5bfd644826d18ec4fdddd Mon Sep 17 00:00:00 2001 From: Swathi-eGov <137176788+Swathi-eGov@users.noreply.github.com> Date: Wed, 19 Jun 2024 10:27:50 +0530 Subject: [PATCH] added breadcrumbs (#84) * added breadcrumbs * review changes --- react/css/CHANGELOG.md | 4 + react/css/package.json | 2 +- .../src/digitv2/components/breadcrumbV2.scss | 57 ++++++ react/css/src/digitv2/index.scss | 1 + react/example/public/index.html | 2 +- react/modules/Project/package.json | 2 +- react/modules/core/package.json | 2 +- react/modules/sample/package.json | 2 +- react/package.json | 2 +- react/ui-components/CHANGELOG.md | 4 + react/ui-components/package.json | 4 +- react/ui-components/src/atoms/BreadCrumb.js | 89 +++++++-- .../src/atoms/stories/BreadCrumb.stories.js | 186 ++++++++++++++++++ 13 files changed, 334 insertions(+), 23 deletions(-) create mode 100644 react/css/src/digitv2/components/breadcrumbV2.scss create mode 100644 react/ui-components/src/atoms/stories/BreadCrumb.stories.js diff --git a/react/css/CHANGELOG.md b/react/css/CHANGELOG.md index f3e3295849..f5cfaa72d7 100644 --- 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 index 1e3e66c751..c49d527ed5 100644 --- 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 ", diff --git a/react/css/src/digitv2/components/breadcrumbV2.scss b/react/css/src/digitv2/components/breadcrumbV2.scss new file mode 100644 index 0000000000..dc10e60157 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/react/css/src/digitv2/index.scss b/react/css/src/digitv2/index.scss index 4b62ee2562..f9b98bbd80 100644 --- 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 index 85e0176bcc..2e2261ca90 100644 --- a/react/example/public/index.html +++ b/react/example/public/index.html @@ -9,7 +9,7 @@ rel='stylesheet' type='text/css'> diff --git a/react/modules/Project/package.json b/react/modules/Project/package.json index b979a70e03..3c9d7bb772 100644 --- 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 index 113d4ec0b9..e76242d1eb 100644 --- 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 index 9ccfa1981e..f4975b9c3b 100644 --- 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 index d0fdd0b983..fb77a1da15 100644 --- 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 index 67b9dcdf3c..aee59869cd 100644 --- 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 index 81579f9df3..916532e040 100644 --- 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 index 0bf8beaa70..4dc6aed702 100644 --- 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 ( -
    - {props?.crumbs?.map((crumb, ci) => { - if (!crumb?.show) return; +
      + {crumbsToDisplay?.map((crumb, ci) => { + if (!crumb?.show) return null; if (crumb?.isBack) return ( -
    1. +
    2. window.history.back()}>{crumb.content}
      3. ); return ( -
    3. - {isLast(ci) || !crumb?.path ? ( - - {crumb.content} - - ) : ( - {crumb.content} - )} -
      4. + <> +
    4. + {isLast(ci) || !crumb?.path ? ( + + {crumb?.icon && crumb.icon} + {crumb.content} + + ) : ( + + {crumb?.icon && crumb.icon} + {crumb.content} + + )} + {!isLast(ci) && ( +
      + {props?.customSeperator ? props?.customSeperator : "/"} +
      + )} +
      5. + ); })}
    @@ -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 = { diff --git a/react/ui-components/src/atoms/stories/BreadCrumb.stories.js b/react/ui-components/src/atoms/stories/BreadCrumb.stories.js new file mode 100644 index 0000000000..bc2103eb3e --- /dev/null +++ b/react/ui-components/src/atoms/stories/BreadCrumb.stories.js @@ -0,0 +1,186 @@ +import React from "react"; +import BreadCrumb from "../BreadCrumb"; +import { BrowserRouter as Router } from "react-router-dom"; +import { SVG } from "../SVG"; + +export default { + title: "Atoms/BreadCrumb", + component: BreadCrumb, + argTypes: { + className: { + control: "text", + }, + style: { + control: { type: "object" }, + }, + crumbs: { + control: { type: "object" }, + }, + spanStyle: { + control: { type: "object" }, + }, + maxItems: { + control: { type: "number" }, + }, + itemsAfterCollapse: { + control: { type: "number" }, + }, + itemsBeforeCollapse: { + control: { type: "number" }, + }, + expandText:{ + control:{type:"text"} + } + }, +}; + +const Template = (args) => ( + + + +); + +export const Default = Template.bind({}); +Default.args = { + crumbs: [ + { + content: "Home", + show: true, + }, + { + content: "Previous", + show: true, + }, + { + content: "Current", + show: true, + }, + ], +}; + +export const WithIcons = Template.bind({}); +WithIcons.args = { + crumbs: [ + { + path: "", + content: "Home", + show: true, + icon: , + }, + { + path: "", + content: "Previous", + show: true, + icon: , + }, + { + path: "", + content: "Current", + show: true, + icon: , + }, + ], +}; + +export const WithCustomSeperator = Template.bind({}); +WithCustomSeperator.args = { + crumbs: [ + { + content: "Home", + show: true, + }, + { + content: "Previous", + show: true, + }, + { + content: "Current", + show: true, + }, + ], + customSeperator: , +}; + +export const CollapsedBreadCrumbs = Template.bind({}); +CollapsedBreadCrumbs.args = { + crumbs: [ + { + content: "Home", + show: true, + }, + { + content: "Previous1", + show: true, + }, + { + content: "Previous2", + show: true, + }, + { + content: "Previous3", + show: true, + }, + { + content: "Current", + show: true, + }, + ], + maxItems: 3, +}; + +export const CollapsedBreadCrumbsWithCustomValues = Template.bind({}); +CollapsedBreadCrumbsWithCustomValues.args = { + crumbs: [ + { + content: "Home", + show: true, + }, + { + content: "Previous1", + show: true, + }, + { + content: "Previous2", + show: true, + }, + { + content: "Previous3", + show: true, + }, + { + content: "Current", + show: true, + }, + ], + maxItems: 3, + itemsBeforeCollapse:1, + itemsAfterCollapse:2 +}; + +export const CollapsedBreadCrumbsWithExpandText = Template.bind({}); +CollapsedBreadCrumbsWithExpandText.args = { + crumbs: [ + { + content: "Home", + show: true, + }, + { + content: "Previous1", + show: true, + }, + { + content: "Previous2", + show: true, + }, + { + content: "Previous3", + show: true, + }, + { + content: "Current", + show: true, + }, + ], + maxItems: 3, + expandText:"{click here to expand}" +}; \ No newline at end of file