From cf109375fe2043063a3d0fb040b5857906bc1fa7 Mon Sep 17 00:00:00 2001 From: Swathi-eGov <137176788+Swathi-eGov@users.noreply.github.com> Date: Mon, 24 Jun 2024 13:39:11 +0530 Subject: [PATCH] Timeline Molecule (#86) * added breadcrumbs * review changes * added timeline molecule * updated versions * added review changes --- react/css/CHANGELOG.md | 4 + react/css/package.json | 2 +- .../src/digitv2/components/timelineV2.scss | 17 ++- 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/Timeline.js | 5 +- .../src/molecules/TimelineMolecule.js | 66 ++++++++- .../stories/TimelineMolecule.stories.js | 129 +++++++++++++++--- 13 files changed, 205 insertions(+), 36 deletions(-) diff --git a/react/css/CHANGELOG.md b/react/css/CHANGELOG.md index f5cfaa72d7..78203b2e75 100644 --- a/react/css/CHANGELOG.md +++ b/react/css/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## [0.0.2-beta.6] - 2024-06-24 +### Added +- Added ViewMore button for timeline molecule + ## [0.0.2-beta.5] - 2024-06-19 ### Added - Added BreadCrumb css diff --git a/react/css/package.json b/react/css/package.json index 6c52f6fb89..609bf75c8c 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-test.5", + "version": "0.0.2-beta.6", "license": "MIT", "main": "dist/index.css", "author": "Jagankumar ", diff --git a/react/css/src/digitv2/components/timelineV2.scss b/react/css/src/digitv2/components/timelineV2.scss index 7e6771eb8a..12eeab44c6 100644 --- a/react/css/src/digitv2/components/timelineV2.scss +++ b/react/css/src/digitv2/components/timelineV2.scss @@ -20,12 +20,13 @@ top: theme(digitv2.spacers.spacer8); &.completed, - &.inprogress{ + &.inprogress, + &.nextActiveStep{ border-color: theme(digitv2.lightTheme.primary-1); } - &.inprogress{ - border-style: dashed; + &.nextActiveStep{ + border-style: dotted; } @media (max-aspect-ratio: 9/16) { @@ -147,4 +148,12 @@ img { height: 1.125rem; } } -} \ No newline at end of file +} + +.digit-timeline-molecule{ + @apply max-h-full; +} + +.view-more-container { + margin-top: theme(digitv2.spacers.spacer4); +} diff --git a/react/example/public/index.html b/react/example/public/index.html index 2e2261ca90..da47e62e63 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 3c9d7bb772..2efa920106 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.6", + "@egovernments/digit-ui-components": "0.0.2-beta.7", "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 e76242d1eb..8701cdac17 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.6", + "@egovernments/digit-ui-components": "0.0.2-beta.7", "@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 f4975b9c3b..bdee8eedae 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.6", + "@egovernments/digit-ui-components": "0.0.2-beta.7", "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 d741829b26..6c6ff86888 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.6", + "@egovernments/digit-ui-components": "0.0.2-beta.7", "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 aee59869cd..27eec0794e 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.7] - 2024-06-24 +### New Changes +- Added ViewMore button for Timeline Molecule. + ## [0.0.2-beta.6] - 2024-06-19 ### New Changes - Added BreadCrumb Component. diff --git a/react/ui-components/package.json b/react/ui-components/package.json index 916532e040..aecd52496e 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.6", + "version": "0.0.2-beta.7", "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.5", + "@egovernments/digit-ui-components-css": "0.0.2-beta.6", "@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/Timeline.js b/react/ui-components/src/atoms/Timeline.js index a3c7f0e564..666f3af779 100644 --- a/react/ui-components/src/atoms/Timeline.js +++ b/react/ui-components/src/atoms/Timeline.js @@ -13,7 +13,8 @@ const Timeline = ({ individualElementStyles, showConnector, className, - isLastStep + isLastStep, + isNextActiveStep }) => { const [showDetails, setShowDetails] = useState(false); @@ -76,7 +77,7 @@ const Timeline = ({ )} - {showConnector && !isLastStep &&
} + {showConnector && !isLastStep &&
}
diff --git a/react/ui-components/src/molecules/TimelineMolecule.js b/react/ui-components/src/molecules/TimelineMolecule.js index ee200e65b2..e94e44509d 100644 --- a/react/ui-components/src/molecules/TimelineMolecule.js +++ b/react/ui-components/src/molecules/TimelineMolecule.js @@ -1,12 +1,68 @@ -import React,{Children} from "react"; -import { Timeline } from "../atoms"; +import React, { Children, useState,useMemo } from "react"; +import { Timeline, Button, StringManipulator } from "../atoms"; + +const sortTimelines = (children) => { + const variantsOrder = { + upcoming: 1, + inprogress: 2, + completed: 3, + }; + + return Children.toArray(children).sort((a, b) => { + const variantA = variantsOrder[a.props.variant] || 4; + const variantB = variantsOrder[b.props.variant] || 4; + return variantA - variantB; + }); +}; + +const TimelineMolecule = ({ children, initialVisibleCount, viewMoreLabel,viewLessLabel }) => { + const sortedChildren = useMemo(() => sortTimelines(children), [children]); + + const [visibleCount, setVisibleCount] = useState(initialVisibleCount); + const [isExpanded, setIsExpanded] = useState(false); + + + const toggleViewMoreItems = () => { + if (isExpanded) { + setVisibleCount(initialVisibleCount); + } else { + setVisibleCount(sortedChildren.length); + } + setIsExpanded(!isExpanded); + }; + + let currentActiveStep = -1; + sortedChildren.forEach((child, index) => { + console.log(child.props, "child "); + if (child.props.variant === "inprogress") { + currentActiveStep = index; + } + }); + + const visibleChildren = sortedChildren.slice(0, visibleCount); + -const TimelineMolecule = ({ children }) => { return (
- {Children.map(children, (child, index) => ( - + {Children.map(visibleChildren, (child, index) => ( + ))} + {initialVisibleCount && ( +
+ +
+ )}
); }; diff --git a/react/ui-components/src/molecules/stories/TimelineMolecule.stories.js b/react/ui-components/src/molecules/stories/TimelineMolecule.stories.js index 9e318be3ec..f0b734653d 100644 --- a/react/ui-components/src/molecules/stories/TimelineMolecule.stories.js +++ b/react/ui-components/src/molecules/stories/TimelineMolecule.stories.js @@ -6,7 +6,10 @@ import Timeline from "../../atoms"; export default { title: "Molecules/TimelineMolecule", component: TimelineMolecule, - argTypes: {}, + argTypes: { + initialVisibleCount: { control: "number" }, + viewMoreLabel: { control: "text" }, + }, }; const subElements = [ @@ -76,17 +79,16 @@ const additionalElements = [ export const Default = () => ( ( showConnector={true} /> @@ -112,18 +114,17 @@ export const Default = () => ( export const WithAdditionalElements = () => ( ( showConnector={true} additionalElements={additionalElements} /> + + + +); + +export const WithVisbileCount = () => ( + + + + + + ); + +export const WithVisbileCountAndViewMoreLabel = () => ( + + + + + + + + + +); \ No newline at end of file