Timeline Molecule (#86)

* added breadcrumbs * review changes * added timeline molecule * updated versions * added review changes
egovernments · Jun 24, 2024 · cf10937 · cf10937
1 parent a2a538d
commit cf10937
Show file tree

Hide file tree

Showing 13 changed files with 205 additions and 36 deletions.
diff --git 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
@@ -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 <[email protected]>",

diff --git 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;
     }
   }
-}
+}
+
+.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
@@ -9,7 +9,7 @@
     rel='stylesheet' type='text/css'>
     <link
     rel="stylesheet"
-    href="https://unpkg.com/@egovernments/[email protected].5/dist/index.css"
+    href="https://unpkg.com/@egovernments/[email protected].6/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.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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -13,7 +13,8 @@ const Timeline = ({
   individualElementStyles,
   showConnector,
   className,
-  isLastStep
+  isLastStep,
+  isNextActiveStep
 }) => {
   const [showDetails, setShowDetails] = useState(false);
 
@@ -76,7 +77,7 @@ const Timeline = ({
           </div>
         )}
       </div>
-      {showConnector && !isLastStep && <div className={`connector-line ${variant || ""}`} />}
+      {showConnector && !isLastStep && <div className={`connector-line ${variant || ""} ${isNextActiveStep ? "nextActiveStep": "" }`} />}
       <div className="timeline-content">
         <div className="timeline-info">
           <div className="timeline-label">

diff --git 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 (
     <div className="digit-timeline-molecule">
-      {Children.map(children, (child, index) => (
-        <Timeline {...child.props} isLastStep={index === Children.count(children) - 1} />
+      {Children.map(visibleChildren, (child, index) => (
+        <Timeline
+          {...child.props}
+          isLastStep={index === Children.count(visibleChildren) - 1}
+          isNextActiveStep={currentActiveStep - 1 === index}
+        />
       ))}
+      {initialVisibleCount && (
+        <div className="view-more-container">
+          <Button
+            isSuffix={true}
+            icon={isExpanded ? "ArrowDropUp" : "ArrowDropDown"}
+            variation={"teritiary"}
+            onClick={toggleViewMoreItems}
+            label = {isExpanded ? (StringManipulator("CAPITALIZEFIRSTLETTER", viewLessLabel) || "View Less") : (StringManipulator("CAPITALIZEFIRSTLETTER", viewMoreLabel) || "View More")}
+            size={"medium"}
+          ></Button>
+        </div>
+      )}
     </div>
   );
 };