Skip to content

Commit

Permalink
added timeline molecule (#83)
Browse files Browse the repository at this point in the history
* added timeline molecule

* review changes
  • Loading branch information
Swathi-eGov authored Jun 17, 2024
1 parent 7157553 commit 901f841
Show file tree
Hide file tree
Showing 19 changed files with 285 additions and 25 deletions.
6 changes: 5 additions & 1 deletion react/css/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
# Changelog

## [0.0.2-beta.2] - 2024-06-13
## [0.0.2-beta.4] - 2024-06-17
### Added
- Added Timeline Molecule related css

## [0.0.2-beta.3] - 2024-06-13
### Changed
- Deleted Unused CSS
- Added preview overlay styles for uploadedfile and backLink styles
Expand Down
2 changes: 1 addition & 1 deletion react/css/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@egovernments/digit-ui-components-css",
"version": "0.0.2-beta.3",
"version": "0.0.2-beta.4",
"license": "MIT",
"main": "dist/index.css",
"author": "Jagankumar <[email protected]>",
Expand Down
8 changes: 7 additions & 1 deletion react/css/src/digitv2/components/backLinkV2.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
flex-shrink: 0;
width: theme(digitv2.spacers.spacer6);
height: theme(digitv2.spacers.spacer6);

cursor: pointer;

@media (max-width: 30rem) {
width: theme(digitv2.spacers.spacer5);
Expand All @@ -20,12 +20,18 @@
@extend .typography.body-l;
color: theme(digitv2.lightTheme.primary-1);
margin-top:0.063rem;
cursor: pointer;
}

&.disabled{
pointer-events: none;
.digit-back-link-label{
color: theme(digitv2.lightTheme.text-disabled);
cursor: default;
}

.digit-back-link-icon{
cursor: default;
}
}
}
27 changes: 25 additions & 2 deletions react/css/src/digitv2/components/timelineV2.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.digit-timeline-item {
@apply flex items-start;
@apply flex items-start relative ;
gap: theme(digitv2.spacers.spacer4);
}

Expand All @@ -13,6 +13,29 @@
}
}

.connector-line {
@apply absolute bottom-0 border-solid border-border;
border-left-width: 0.125rem;
margin-left: 0.938rem;
top: theme(digitv2.spacers.spacer8);

&.completed,
&.inprogress{
border-color: theme(digitv2.lightTheme.primary-1);
}

&.inprogress{
border-style: dashed;
}

@media (max-aspect-ratio: 9/16) {
/* Media query for mobile */
margin-left: 0.688rem;
top: theme(digitv2.spacers.spacer6);
border-left-width: 0.063rem;
}
}

.timeline-content,
.timeline-info {
@apply flex flex-col w-full;
Expand Down Expand Up @@ -86,7 +109,7 @@ img {
/* Circle Variants */
.timeline-circle,
.timeline-circle.upcoming {
background-color: theme(digitv2.lightTheme.text-disabled);
background-color: theme(digitv2.lightTheme.text-disabled);
}

.timeline-circle.inprogress {
Expand Down
2 changes: 1 addition & 1 deletion react/example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"build": "webpack --mode production"
},
"dependencies": {
"@egovernments/digit-ui-components": "0.0.2-beta.4",
"@egovernments/digit-ui-components": "0.0.2-beta.5",
"@egovernments/digit-ui-libraries": "1.8.2-beta.1",
"@egovernments/digit-ui-module-common": "1.7.10",
"@egovernments/digit-ui-module-core": "1.8.1-beta.6",
Expand Down
2 changes: 1 addition & 1 deletion react/example/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
rel='stylesheet' type='text/css'>
<link
rel="stylesheet"
href="https://unpkg.com/@egovernments/[email protected].3/dist/index.css"
href="https://unpkg.com/@egovernments/[email protected].4/dist/index.css"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#00bcd1" />
Expand Down
2 changes: 1 addition & 1 deletion react/modules/Project/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
},
"dependencies": {
"@egovernments/digit-ui-react-components": "1.8.1-beta.4",
"@egovernments/digit-ui-components": "0.0.2-beta.4",
"@egovernments/digit-ui-components": "0.0.2-beta.5",
"lodash": "^4.17.21",
"react": "17.0.2",
"react-date-range": "^1.4.0",
Expand Down
2 changes: 1 addition & 1 deletion react/modules/core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"prepublish": "yarn build"
},
"dependencies": {
"@egovernments/digit-ui-components": "0.0.2-beta.4",
"@egovernments/digit-ui-components": "0.0.2-beta.5",
"@egovernments/digit-ui-react-components": "1.8.1-beta.4",
"react": "17.0.2",
"react-dom": "17.0.2",
Expand Down
2 changes: 1 addition & 1 deletion react/modules/sample/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
},
"dependencies": {
"@egovernments/digit-ui-react-components": "1.8.1-beta.4",
"@egovernments/digit-ui-components": "0.0.2-beta.4",
"@egovernments/digit-ui-components": "0.0.2-beta.5",
"react": "17.0.2",
"react-date-range": "^1.4.0",
"react-dom": "17.0.2",
Expand Down
2 changes: 1 addition & 1 deletion react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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.4",
"@egovernments/digit-ui-components": "0.0.2-beta.5",
"babel-loader": "8.1.0",
"clean-webpack-plugin": "4.0.0",
"css-loader": "5.2.6",
Expand Down
4 changes: 4 additions & 0 deletions react/ui-components/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.5] - 2024-06-17
### New Changes
- Added Timeline Molecule.

## [0.0.2-beta.4] - 2024-06-15
### Changed
- fix: Fixed prop for the document upload.
Expand Down
4 changes: 2 additions & 2 deletions react/ui-components/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@egovernments/digit-ui-components",
"version": "0.0.2-beta.4",
"version": "0.0.2-beta.5",
"license": "MIT",
"main": "dist/index.js",
"module": "dist/index.modern.js",
Expand Down Expand Up @@ -51,7 +51,7 @@
"dist"
],
"dependencies": {
"@egovernments/digit-ui-components-css": "0.0.2-beta.3",
"@egovernments/digit-ui-components-css": "0.0.2-beta.4",
"@egovernments/digit-ui-libraries": "1.8.1-beta.1",
"@egovernments/digit-ui-svg-components": "1.0.4",
"@googlemaps/js-api-loader": "1.13.10",
Expand Down
10 changes: 7 additions & 3 deletions react/ui-components/src/atoms/Timeline.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,17 @@ const Timeline = ({
additionalElements,
inline,
individualElementStyles,
showConnector,
className,
isLastStep
}) => {
const [showDetails, setShowDetails] = useState(false);

const [isMobileView, setIsMobileView] = React.useState(
window.innerWidth <= 480
(window.innerWidth / window.innerHeight <= 9/16)
);
const onResize = () => {
if (window.innerWidth <= 480) {
if (window.innerWidth / window.innerHeight <= 9/16) {
if (!isMobileView) {
setIsMobileView(true);
}
Expand Down Expand Up @@ -61,7 +64,7 @@ const Timeline = ({
: "";

return (
<div className="digit-timeline-item">
<div className={`digit-timeline-item ${className || ""}`}>
<div className={`timeline-circle ${variant}`}>
{variant === "completed" && (
<div className="check-icon">
Expand All @@ -73,6 +76,7 @@ const Timeline = ({
</div>
)}
</div>
{showConnector && !isLastStep && <div className={`connector-line ${variant || ""}`} />}
<div className="timeline-content">
<div className="timeline-info">
<div className="timeline-label">
Expand Down
17 changes: 16 additions & 1 deletion react/ui-components/src/atoms/stories/InfoButton.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,22 @@ export default {
},
};

const Template = (args) => <InfoButton {...args} />;
const commonStyles = {
position: "absolute",
top: "50%",
left: "50%",
color: "#363636",
display: "flex",
alignItems: "center",
justifyContent: "center",
transform: "translate(-50%, -50%)",
};

const Template = (args) => (
<div style={commonStyles}>
<InfoButton {...args} />
</div>
);

const commonArgs = {
label: "Button",
Expand Down
47 changes: 41 additions & 6 deletions react/ui-components/src/atoms/stories/Timeline.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export default {
component: Timeline,
argTypes: {
label: { control: "text" },
className: { control: "text" },
viewDetailsLabel: { control: "text" },
hideDetailsLabel: { control: "text" },
subElements: {
Expand All @@ -31,6 +32,9 @@ export default {
individualElementStyles: {
control: { type: "object" },
},
showConnector:{
control:{type:"boolean"}
}
},
};

Expand Down Expand Up @@ -112,14 +116,24 @@ UpcomingDefault.args = {
};

// Upcoming Timeline
export const Upcoming = Template.bind({});
Upcoming.args = {
export const UpcomingWithAdditionalElements = Template.bind({});
UpcomingWithAdditionalElements.args = {
label: "Upcoming",
variant: "upcoming",
subElements: subElements,
additionalElements: additionalElements,
};

// Upcoming Timeline
export const UpcomingWithConnector = Template.bind({});
UpcomingWithConnector.args = {
label: "Upcoming",
variant: "upcoming",
subElements: subElements,
additionalElements: additionalElements,
showConnector:true
};

// InProgress Timeline Without AdditionalElements
export const InProgressDefault = Template.bind({});
InProgressDefault.args = {
Expand All @@ -129,14 +143,25 @@ InProgressDefault.args = {
};

// InProgress Timeline
export const InProgress = Template.bind({});
InProgress.args = {
export const InProgressWithAdditionalElements = Template.bind({});
InProgressWithAdditionalElements.args = {
label: "Inprogress",
subElements: subElements,
variant: "inprogress",
additionalElements: additionalElements,
};

// InProgress Timeline
export const InProgressWithConnector = Template.bind({});
InProgressWithConnector.args = {
label: "Inprogress",
subElements: subElements,
variant: "inprogress",
additionalElements: additionalElements,
showConnector:true
};


// Completed Timeline Without AdditionalElements
export const CompletedDefault = Template.bind({});
CompletedDefault.args = {
Expand All @@ -146,10 +171,20 @@ CompletedDefault.args = {
};

// Completed Timeline
export const Completed = Template.bind({});
Completed.args = {
export const CompletedWithAdditionalElements = Template.bind({});
CompletedWithAdditionalElements.args = {
label: "Completed",
subElements: subElements,
variant: "completed",
additionalElements: additionalElements,
};

// Completed Timeline
export const CompletedWithConnector = Template.bind({});
CompletedWithConnector.args = {
label: "Completed",
subElements: subElements,
variant: "completed",
additionalElements: additionalElements,
showConnector:true
};
4 changes: 3 additions & 1 deletion react/ui-components/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,8 @@ import {
SearchField,
SearchOnRadioButtons,
TextInputCard,
PanelCard
PanelCard,
TimelineMolecule
} from "./molecules";

// import { initCoreLibraries } from "@egovernments/digit-ui-libraries-core";
Expand Down Expand Up @@ -317,6 +318,7 @@ export {
SearchOnRadioButtons,
TextInputCard,
PanelCard,
TimelineMolecule,
Toggle,
ToggleSwitch,
TreeSelect,
Expand Down
14 changes: 14 additions & 0 deletions react/ui-components/src/molecules/TimelineMolecule.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React,{Children} from "react";
import { Timeline } from "../atoms";

const TimelineMolecule = ({ children }) => {
return (
<div className="digit-timeline-molecule">
{Children.map(children, (child, index) => (
<Timeline {...child.props} isLastStep={index === Children.count(children) - 1} />
))}
</div>
);
};

export default TimelineMolecule;
4 changes: 3 additions & 1 deletion react/ui-components/src/molecules/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import RenderFormFields from "./RenderFormFields";
import DateRangeNew from "./DateRangeNew";
import WorkflowStatusFilter from "./WorkflowStatusFilter";
import PanelCard from "./PanelCard";
import TimelineMolecule from "./TimelineMolecule";

export {
ApiDropdown,
Expand All @@ -33,5 +34,6 @@ export {
RenderFormFields,
DateRangeNew,
WorkflowStatusFilter,
PanelCard
PanelCard,
TimelineMolecule
};
Loading

0 comments on commit 901f841

Please sign in to comment.