diff --git a/react/css/CHANGELOG.md b/react/css/CHANGELOG.md index 6d571c4a10..33646f60ba 100644 --- a/react/css/CHANGELOG.md +++ b/react/css/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## [0.0.2-beta.15] - 2024-07-30 +### Added +- Added Error State for Timeline, SelectionCard Component + ## [0.0.2-beta.13] - 2024-07-16 ### Added - Added styles for sidebar and hamburger diff --git a/react/css/package.json b/react/css/package.json index d0980724e3..e33ed59557 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.14", + "version": "0.0.2-beta.15", "license": "MIT", "main": "dist/index.css", "author": "Jagankumar ", diff --git a/react/css/src/digitv2/components/actionbarV2.scss b/react/css/src/digitv2/components/actionbarV2.scss index 742bd1e7f1..7ec5435b8f 100644 --- a/react/css/src/digitv2/components/actionbarV2.scss +++ b/react/css/src/digitv2/components/actionbarV2.scss @@ -144,6 +144,24 @@ justify-content: space-between; flex-wrap: wrap; + &.toRight{ + margin-left: auto; + } + + &.toLeft{ + justify-content: unset; + } + + .action-bar-individual-action-field{ + button{ + flex: 1; + } + } + + &:not(.toRight){ + width: 100%; + } + @media (min-width: 48rem) { gap: theme(digitv2.spacers.spacer6); } @@ -155,6 +173,7 @@ @media (max-width: 30rem) { gap: theme(digitv2.spacers.spacer4); flex-direction: column; + width: 100%; .action-bar-individual-action-field{ button{ @@ -163,24 +182,6 @@ } } } - - &.toRight{ - margin-left: auto; - } - - &.toLeft{ - justify-content: unset; - } - - .action-bar-individual-action-field{ - button{ - flex: 1; - } - } - - &:not(.toRight){ - width: 100%; - } } .digit-dropdown-select-wrap, diff --git a/react/css/src/digitv2/components/selectionCardV2.scss b/react/css/src/digitv2/components/selectionCardV2.scss new file mode 100644 index 0000000000..69e6c24dd8 --- /dev/null +++ b/react/css/src/digitv2/components/selectionCardV2.scss @@ -0,0 +1,73 @@ +.selection-card-container { + display: flex; + flex-direction: column; + align-items: flex-start; + } + + .selection-card { + display: flex; + flex-wrap: wrap; + gap: theme(digitv2.spacers.spacer6); + padding: theme(digitv2.spacers.spacer6); + border: 0.063rem solid #d6d5d4; + border-radius: theme(digitv2.spacers.spacer1); + background-color: theme(digitv2.lightTheme.paper-secondary); + width: fit-content; + } + + .selection-card.error { + border-color: theme(digitv2.lightTheme.alert-error); + } + + .option { + display: flex; + align-items: center; + padding: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer4); + border: 0.063rem solid #d6d5d4; + border-radius: theme(digitv2.spacers.spacer1); + background-color: theme(digitv2.lightTheme.paper-primary); + cursor: pointer; + height: theme(digitv2.spacers.spacer10); + gap:theme(digitv2.spacers.spacer2); + color: theme(digitv2.lightTheme.text-primary); + font-family: theme(digitv2.fontFamily.sans); + font-style: theme(digitv2.fontStyle.normal); + font-weight: theme(digitv2.fontWeight.regular); + line-height: theme(digitv2.lineHeight.lineheight2); + + @media (max-aspect-ratio: 9/16) { + /* Media query for mobile */ + font-size: theme(digitv2.fontSize.body-l.mobile); + } + + @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) { + /* Media query for tablets */ + font-size: theme(digitv2.fontSize.body-l.tablet); + } + + @media (min-aspect-ratio: 3/4) { + /* Media query for desktop */ + font-size: theme(digitv2.fontSize.body-l.desktop); + } + } + + .option.selected { + background-color: theme(digitv2.lightTheme.primary-1); + color: theme(digitv2.lightTheme.paper-primary); + font-weight: theme(digitv2.fontWeight.bold); + } + + .option .selectioncard-option-label { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + + .option .selectioncardicon { + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + } \ No newline at end of file diff --git a/react/css/src/digitv2/components/sidebarV2.scss b/react/css/src/digitv2/components/sidebarV2.scss index 5eefffdde6..562d87f5e4 100644 --- a/react/css/src/digitv2/components/sidebarV2.scss +++ b/react/css/src/digitv2/components/sidebarV2.scss @@ -9,8 +9,8 @@ display: flex; flex-direction: column; padding-top: 1.563rem; - padding-left:theme(digitv2.spacers.spacer3); - padding-right:theme(digitv2.spacers.spacer3); + padding-left: theme(digitv2.spacers.spacer3); + padding-right: theme(digitv2.spacers.spacer3); &.hovered { width: auto; @@ -23,17 +23,17 @@ height: 4.5rem; min-width: 15rem; width: auto; - padding:theme(digitv2.spacers.spacer4) !important; + padding: theme(digitv2.spacers.spacer4) !important; .sidebar-search { - height:theme(digitv2.spacers.spacer10) !important; + height: theme(digitv2.spacers.spacer10) !important; min-width: 13rem; .digit-text-input-customIcon { - height:theme(digitv2.spacers.spacer6); - width:theme(digitv2.spacers.spacer6); - top:theme(digitv2.spacers.spacer2); - right:theme(digitv2.spacers.spacer2); + height: theme(digitv2.spacers.spacer6); + width: theme(digitv2.spacers.spacer6); + top: theme(digitv2.spacers.spacer2); + right: theme(digitv2.spacers.spacer2); } .input-container { @@ -106,7 +106,7 @@ .sidebar-item { display: flex; align-items: center; - padding:theme(digitv2.spacers.spacer4); + padding: theme(digitv2.spacers.spacer4); color: theme(digitv2.lightTheme.paper-primary); text-decoration: none; transition: background-color 0.3s; @@ -152,9 +152,9 @@ } .icon { - margin-right:theme(digitv2.spacers.spacer3); - width:theme(digitv2.spacers.spacer6); - height:theme(digitv2.spacers.spacer6); + margin-right: theme(digitv2.spacers.spacer3); + width: theme(digitv2.spacers.spacer6); + height: theme(digitv2.spacers.spacer6); } .item-label { @@ -184,8 +184,8 @@ } .expand-icon { - width:theme(digitv2.spacers.spacer6); - height:theme(digitv2.spacers.spacer6); + width: theme(digitv2.spacers.spacer6); + height: theme(digitv2.spacers.spacer6); margin-left: auto !important; } @@ -218,14 +218,14 @@ .sidebar-item.selected::before, .sidebar-item:active::before, .sidebar-item:active:hover::before, -.sidebar-item.selected:hover::before{ +.sidebar-item.selected:hover::before { content: ''; position: absolute; top: 0.062rem; left: 0; bottom: 0.063rem; - width: theme(digitv2.spacers.spacer2); - background: theme(digitv2.lightTheme.paper-primary); + width: theme(digitv2.spacers.spacer2); + background: theme(digitv2.lightTheme.paper-primary); border-top-right-radius: theme(digitv2.spacers.spacer1); border-bottom-right-radius: theme(digitv2.spacers.spacer1); } @@ -251,14 +251,14 @@ .sidebar-item.light.secondary.selected::before, .sidebar-item.light.secondary:active::before, .sidebar-item.light.secondary:active:hover::before, -.sidebar-item.light.secondary.selected:hover::before{ +.sidebar-item.light.secondary.selected:hover::before { content: ''; position: absolute; top: 0.063rem; left: 0; bottom: 0.063rem; - width: theme(digitv2.spacers.spacer2); - background:theme(digitv2.lightTheme.primary-1); + width: theme(digitv2.spacers.spacer2); + background: theme(digitv2.lightTheme.primary-1); border-top-right-radius: theme(digitv2.spacers.spacer1); border-bottom-right-radius: theme(digitv2.spacers.spacer1); } @@ -268,26 +268,26 @@ } .sidebar-children { - margin-left:theme(digitv2.spacers.spacer6); + margin-left: theme(digitv2.spacers.spacer6); border-left: 0.031rem solid theme(digitv2.lightTheme.text-disabled); } .sidebar-bottom { background-color: #FFFFFF33; z-index: 5; - padding:theme(digitv2.spacers.spacer4); + padding: theme(digitv2.spacers.spacer4); display: flex; flex-direction: column; - gap:theme(digitv2.spacers.spacer4); + gap: theme(digitv2.spacers.spacer4); padding-right: theme(digitv2.spacers.spacer0); padding-left: theme(digitv2.spacers.spacer0); .sidebar-bottom-item { display: flex; align-items: center; - gap:theme(digitv2.spacers.spacer2); + gap: theme(digitv2.spacers.spacer2); cursor: pointer; - height:theme(digitv2.spacers.spacer10); + height: theme(digitv2.spacers.spacer10); &:hover { background-color: #FFFFFF4D; @@ -295,7 +295,7 @@ svg { flex-shrink: 0; - margin-left:theme(digitv2.spacers.spacer6); + margin-left: theme(digitv2.spacers.spacer6); } .sidebar-bottom-item-text { @@ -351,33 +351,33 @@ padding-right: theme(digitv2.spacers.spacer0); .sidebar-search-container-collapsed { - padding-left:theme(digitv2.spacers.spacer3); - padding-right:theme(digitv2.spacers.spacer3); + padding-left: theme(digitv2.spacers.spacer3); + padding-right: theme(digitv2.spacers.spacer3); } .sidebar-items-container { display: flex !important; flex-direction: column; - gap:theme(digitv2.spacers.spacer6); - margin-top:theme(digitv2.spacers.spacer6); + gap: theme(digitv2.spacers.spacer6); + margin-top: theme(digitv2.spacers.spacer6); .item-child-wrapper { width: 100%; - height:theme(digitv2.spacers.spacer10); + height: theme(digitv2.spacers.spacer10); display: flex; align-items: center; justify-content: center; .sidebar-item { padding: theme(digitv2.spacers.spacer0); - width:theme(digitv2.spacers.spacer6); + width: theme(digitv2.spacers.spacer6); height: 100%; .icon { - margin-right:theme(digitv2.spacers.spacer3); - margin-left:theme(digitv2.spacers.spacer3); + margin-right: theme(digitv2.spacers.spacer3); + margin-left: theme(digitv2.spacers.spacer3); } &.parentLevel { @@ -389,13 +389,65 @@ .sidebar-item.selected, .sidebar-item.selectedAsParent { background: theme(digitv2.lightTheme.primary-1); - border-left: 0.25rem solid theme(digitv2.lightTheme.paper-primary); display: flex; align-items: center; justify-content: center; + } + + .sidebar-item.selected::before, + .sidebar-item:active::before, + .sidebar-item.selectedAsParent::before, + .sidebar-item:active:hover::before, + .sidebar-item.selected:hover::before { + content: ''; + position: absolute; + top: 0.062rem; + left: 0; + bottom: 0.063rem; + width: theme(digitv2.spacers.spacer1); + background: theme(digitv2.lightTheme.paper-primary); + border-top-right-radius: theme(digitv2.spacers.spacer1); + border-bottom-right-radius: theme(digitv2.spacers.spacer1); + } + + .sidebar-item.secondary:active, + .sidebar-item.secondary.selected, + .sidebar-item.secondary:active:hover, + .sidebar-item.secondary.selected:hover , + .sidebar-item.secondary.selectedAsParent, + .sidebar-item.secondary.selectedAsParent:hover{ + background: #FFFFFF4D; + } + + .sidebar-item.light.secondary:active, + .sidebar-item.light.secondary.selected, + .sidebar-item.light.secondary:active:hover, + .sidebar-item.light.secondary.selected:hover, + .sidebar-item.light.secondary.selectedAsParent, + .sidebar-item.light.secondary.selectedAsParent:hover { + background: #c84c0e1a; + .item-label { + color: theme(digitv2.lightTheme.primary-2); + } } + .sidebar-item.light.secondary.selected::before, + .sidebar-item.light.secondary:active::before, + .sidebar-item.light.secondary:active:hover::before, + .sidebar-item.light.secondary.selected:hover::before, + .sidebar-item.light.secondary.selectedAsParent::before, + .sidebar-item.light.secondary.selectedAsParent:hover::before{ + content: ''; + position: absolute; + top: 0.063rem; + left: 0; + bottom: 0.063rem; + width: theme(digitv2.spacers.spacer1); + background: theme(digitv2.lightTheme.primary-1); + border-top-right-radius: theme(digitv2.spacers.spacer1); + border-bottom-right-radius: theme(digitv2.spacers.spacer1); + } } } @@ -404,6 +456,6 @@ .digit-sidebar-footer-img { width: 6.563rem; - height:theme(digitv2.spacers.spacer3); + height: theme(digitv2.spacers.spacer3); margin-left: 25%; } \ No newline at end of file diff --git a/react/css/src/digitv2/components/timelineV2.scss b/react/css/src/digitv2/components/timelineV2.scss index 33b15b5c99..8a781767fb 100644 --- a/react/css/src/digitv2/components/timelineV2.scss +++ b/react/css/src/digitv2/components/timelineV2.scss @@ -65,6 +65,10 @@ /* Media query for mobile */ padding-top: 0.164rem; } + + &.upcoming{ + color:theme(digitv2.lightTheme.text-secondary); + } } .timeline-date { @@ -109,7 +113,7 @@ img { border: 0.125rem solid theme(digitv2.lightTheme.primary-1); } -.timeline-circle.inprogress::after { +.timeline-circle.inprogress:not(.error)::after { @apply absolute w-4 h-4; content: ''; top: 50%; @@ -124,9 +128,7 @@ img { } } -.timeline-circle.completed { - background-color: theme(digitv2.lightTheme.primary-1); - +.timeline-circle{ .check-icon { @apply w-6 h-6 absolute; top: 50%; @@ -141,6 +143,10 @@ img { } } +.timeline-circle.completed { + background-color: theme(digitv2.lightTheme.primary-1); +} + .digit-timeline-molecule{ @apply max-h-full; @@ -168,4 +174,34 @@ img { .view-more-future-container { margin-bottom: theme(digitv2.spacers.spacer4); +} + +.digit-timeline-item { + &.error{ + + .timeline-circle{ + background-color: theme(digitv2.lightTheme.alert-error); + } + + .timeline-content{ + background-color: theme(digitv2.lightTheme.alert-errorbg); + border-radius: theme(digitv2.spacers.spacer1); + padding: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer3); + + + .timeline-info{ + .timeline-label{ + color: theme(digitv2.lightTheme.alert-error); + padding-top: 0rem; + } + .timeline-date{ + color: theme(digitv2.lightTheme.alert-error); + } + + .timeline-divider { + border: 0.063rem solid theme(digitv2.lightTheme.alert-error); + } + } + } + } } \ No newline at end of file diff --git a/react/css/src/digitv2/index.scss b/react/css/src/digitv2/index.scss index 937ed5c306..3b389aa276 100644 --- a/react/css/src/digitv2/index.scss +++ b/react/css/src/digitv2/index.scss @@ -22,6 +22,7 @@ @import url("./components/chipV2.scss"); @import url("./components/selectDropdownV2.scss"); @import url("./components/stepperV2.scss"); +@import url("./components/selectionCardV2.scss"); @import url("./components/textareaV2.scss"); @import url("./components/textblockV2.scss"); @import url("./components/textInputV2.scss"); diff --git a/react/example/package.json b/react/example/package.json index d7fb3b36e0..f9bb5dbf37 100644 --- a/react/example/package.json +++ b/react/example/package.json @@ -10,7 +10,7 @@ "build": "webpack --mode production" }, "dependencies": { - "@egovernments/digit-ui-components": "0.0.2-beta.19", + "@egovernments/digit-ui-components": "0.0.2-beta.20", "@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", diff --git a/react/example/public/index.html b/react/example/public/index.html index 53561452a5..2721f33f17 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 de354ad647..dbadf0e9da 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.19", + "@egovernments/digit-ui-components": "0.0.2-beta.20", "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 25f241afe8..28aac846cf 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.19", + "@egovernments/digit-ui-components": "0.0.2-beta.20", "@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 44c7f2eb04..5ffc58d507 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.19", + "@egovernments/digit-ui-components": "0.0.2-beta.20", "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 5c483d4661..b53166bc17 100644 --- a/react/package.json +++ b/react/package.json @@ -79,13 +79,13 @@ "@babel/plugin-syntax-jsx": "^7.24.1", "@babel/preset-react": "^7.24.1", "@egovernments/digit-ui-libraries": "1.8.2-beta.1", - "@egovernments/digit-ui-components-css":"0.0.2-beta.13", + "@egovernments/digit-ui-components-css":"0.0.2-beta.15", "@egovernments/digit-ui-module-core": "1.8.1-beta.6", "@egovernments/digit-ui-module-project": "0.3.4", "@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.19", + "@egovernments/digit-ui-components": "0.0.2-beta.20", "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 e7c7ee36c9..fbcfd6a216 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.20] - 2024-07-30 +### New Changes +- Added Error State for Timeline, SelectionCard Component + ## [0.0.2-beta.18] - 2024-07-24 ### New Changes - Fixed header dropdown selection diff --git a/react/ui-components/package.json b/react/ui-components/package.json index 5b94a2df72..f5657a7a4f 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.19", + "version": "0.0.2-beta.20", "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.13", + "@egovernments/digit-ui-components-css": "0.0.2-beta.15", "@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/CheckBox.js b/react/ui-components/src/atoms/CheckBox.js index 35b8a6436b..e2cf6900ba 100644 --- a/react/ui-components/src/atoms/CheckBox.js +++ b/react/ui-components/src/atoms/CheckBox.js @@ -18,6 +18,7 @@ const CheckBox = ({ index, isLabelFirst, customLabelMarkup, + hideLabel, ...props }) => { const { t } = useTranslation(); @@ -35,7 +36,7 @@ const CheckBox = ({ !isLabelFirst ? "checkboxFirst" : "labelFirst" } ${disabled ? "disabled" : " "} ${props?.mainClassName}`} > - {isLabelFirst ? ( + {(isLabelFirst && !hideLabel) ? (

{customLabelMarkup ? ( <> @@ -70,7 +71,7 @@ const CheckBox = ({

- {!isLabelFirst ? ( + {(!isLabelFirst && !hideLabel) ? (

{customLabelMarkup ? ( <> @@ -104,6 +105,7 @@ CheckBox.propTypes = { */ ref: PropTypes.func, userType: PropTypes.string, + hideLabel:PropTypes.bool }; CheckBox.defaultProps = { diff --git a/react/ui-components/src/atoms/MobileSidebar.js b/react/ui-components/src/atoms/MobileSidebar.js index 5a1298a612..9a64e40450 100644 --- a/react/ui-components/src/atoms/MobileSidebar.js +++ b/react/ui-components/src/atoms/MobileSidebar.js @@ -12,7 +12,8 @@ const MobileSidebar = ({ profileNumber, theme, className, - styles + styles, + ref }) => { const [searchTerms, setSearchTerms] = useState({}); const [selectedItem, setSelectedItem] = useState({}); @@ -89,16 +90,14 @@ const MobileSidebar = ({ onClick={() => handleArrowClick(item, currentIndex, parentIndex)} tabIndex={0} > - { + {(item.selectedIcon || item.icon) && ( {item.selectedIcon ? item.selectedIcon : item.icon} - } + )} {{item.label}} {item.children && ( - + {isExpanded ? (

diff --git a/react/ui-components/src/atoms/SelectionCard.js b/react/ui-components/src/atoms/SelectionCard.js new file mode 100644 index 0000000000..fa5e8668fe --- /dev/null +++ b/react/ui-components/src/atoms/SelectionCard.js @@ -0,0 +1,121 @@ +import React, { useState } from "react"; +import PropTypes from "prop-types"; +import ErrorMessage from "./ErrorMessage"; +import { useTranslation } from "react-i18next"; +import { Colors } from "../constants/colors/colorconstants"; + +const SelectionCard = ({ + width, + errorMessage, + options, + onSelectionChanged, + allowMultipleSelection = true, +}) => { + const { t } = useTranslation(); + const [selectedOptions, setSelectedOptions] = useState([]); + + const handleOptionClick = (option) => { + const updatedSelections = [...selectedOptions]; + if (allowMultipleSelection) { + if (updatedSelections.includes(option)) { + const index = updatedSelections.indexOf(option); + updatedSelections.splice(index, 1); + } else { + updatedSelections.push(option); + } + } else { + if (updatedSelections.includes(option)) { + updatedSelections.length = 0; + } else { + updatedSelections.length = 0; + updatedSelections.push(option); + } + } + setSelectedOptions(updatedSelections); + onSelectionChanged(updatedSelections); + }; + + const secondaryIconColor = Colors.lightTheme.generic.inputBorder; + const primaryIconColor = Colors.lightTheme.paper.primary; + + const IconRender = (iconReq, isActive) => { + const iconFill = isActive ? primaryIconColor : secondaryIconColor; + try { + const components = require("@egovernments/digit-ui-svg-components"); + const DynamicIcon = components?.[iconReq]; + if (DynamicIcon) { + const svgElement = DynamicIcon({ + width: "1.5rem", + height: "1.5rem", + fill: iconFill, + className: "", + }); + return svgElement; + } else { + console.log("Icon not found"); + return null; + } + } catch (error) { + console.error("Icon not found"); + return null; + } + }; + + const renderOption = (option) => { + const isSelected = selectedOptions.includes(option); + + return ( +
handleOptionClick(option)} + > + {option.prefixIcon && ( + + {IconRender(option?.prefixIcon, isSelected)} + + )} + {option.name} + {option.suffixIcon && ( + + {IconRender(option?.suffixIcon, isSelected)} + + )} +
+ ); + }; + + return ( +
+
+ {options.map(renderOption)} +
+ {errorMessage && ( + + )} +
+ ); +}; + +SelectionCard.propTypes = { + width: PropTypes.number, + errorMessage: PropTypes.string, + options: PropTypes.arrayOf( + PropTypes.shape({ + name: PropTypes.string.isRequired, + code: PropTypes.string.isRequired, + prefixIcon: PropTypes.node, + suffixIcon: PropTypes.node, + }) + ).isRequired, + onSelectionChanged: PropTypes.func.isRequired, + allowMultipleSelection: PropTypes.bool, +}; + +export default SelectionCard; diff --git a/react/ui-components/src/atoms/Sidebar.js b/react/ui-components/src/atoms/Sidebar.js index 3edbf5297b..1447c2e670 100644 --- a/react/ui-components/src/atoms/Sidebar.js +++ b/react/ui-components/src/atoms/Sidebar.js @@ -77,7 +77,7 @@ const Sidebar = ({ items, theme, variant,transitionDuration,className,styles })
@@ -106,7 +106,7 @@ const Sidebar = ({ items, theme, variant,transitionDuration,className,styles }) > {(isTopLevel || hovered) && ( - {(isSelected) && item.selectedIcon + {(isSelected || isParentOfSelectedItem(currentIndex) ) && item.selectedIcon ? item.selectedIcon : item.icon} diff --git a/react/ui-components/src/atoms/Timeline.js b/react/ui-components/src/atoms/Timeline.js index aafa7634de..fa7881050d 100644 --- a/react/ui-components/src/atoms/Timeline.js +++ b/react/ui-components/src/atoms/Timeline.js @@ -18,6 +18,7 @@ const Timeline = ({ isLastStep, isNextActiveStep, showDefaultValueForDate, + isError }) => { const [showDetails, setShowDetails] = useState(false); @@ -54,6 +55,8 @@ const Timeline = ({ additionalElements && additionalElements.length > 0; const defaultLabel = + + isError ? "Failed!" : variant === "inprogress" ? "Inprogress" : variant === "upcoming" @@ -65,9 +68,9 @@ const Timeline = ({ const color = Colors.lightTheme.paper.primary; return ( -
-
- {variant === "completed" && ( +
+
+ {variant === "completed" && !isError && (
+ )} + {isError && ( +
+ +
)}
{showConnector && !isLastStep && ( @@ -86,7 +99,7 @@ const Timeline = ({ )}
-
+
{label ? StringManipulator("CAPITALIZEFIRSTLETTER", label) : defaultLabel} @@ -101,7 +114,7 @@ const Timeline = ({
)} {showDefaultValueForDate && ( -
{"date"}
+
{isError ? "Incomplete": "date"}
)}
diff --git a/react/ui-components/src/atoms/index.js b/react/ui-components/src/atoms/index.js index 063f7032c8..10e7e6c19b 100644 --- a/react/ui-components/src/atoms/index.js +++ b/react/ui-components/src/atoms/index.js @@ -84,6 +84,7 @@ import Menu from "./Menu"; import Sidebar from "./Sidebar"; import MobileSidebar from "./MobileSidebar"; import TooltipWrapper from "./ToolTipWrapper"; +import SelectionCard from "./SelectionCard"; import { AnnouncementIcon, @@ -271,6 +272,7 @@ export { Paragraph, PlusMinusInput, PopUp, + SelectionCard, PrivateRoute, RadioButtons, Rating, diff --git a/react/ui-components/src/atoms/stories/SelectionCard.stories.js b/react/ui-components/src/atoms/stories/SelectionCard.stories.js new file mode 100644 index 0000000000..a55b49bc67 --- /dev/null +++ b/react/ui-components/src/atoms/stories/SelectionCard.stories.js @@ -0,0 +1,99 @@ +import React from 'react'; +import SelectionCard from '../SelectionCard'; +import { SVG } from '../SVG'; + +export default { + title: 'Atoms/SelectionCard', + component: SelectionCard, + argTypes: { + width: { + control: 'number', + }, + errorMessage: { + control: 'text', + }, + options: { + control: 'object', + }, + onSelectionChanged: { + action: 'selectionChanged', + }, + allowMultipleSelection: { + control: 'boolean', + }, + }, +}; + +const Template = (args) => ; + +const commonArgs = { + width: "", + errorMessage: '', + options: [ + { name: 'Option 1', code: 'option1', prefixIcon: "", suffixIcon: '' }, + { name: 'Option 2', code: 'option2', prefixIcon: '', suffixIcon: "" }, + { name: 'Option 3', code: 'option3', prefixIcon:'', suffixIcon: '' }, + ], + allowMultipleSelection: true, + onSelectionChanged: (selectedOptions) => console.log('Selected options:', selectedOptions), +}; + +const prefixIconOptions =[ + { name: 'Option 1', code: 'option1', prefixIcon: "Edit", suffixIcon: '' }, + { name: 'Option 2', code: 'option2', prefixIcon: 'Edit', suffixIcon: "" }, + { name: 'Option 3', code: 'option3', prefixIcon:'Edit', suffixIcon: '' }, +] + +const suffixIconOptions =[ + { name: 'Option 1', code: 'option1', prefixIcon: "", suffixIcon: 'Edit' }, + { name: 'Option 2', code: 'option2', prefixIcon: '', suffixIcon: "Edit" }, + { name: 'Option 3', code: 'option3', prefixIcon:'', suffixIcon: 'Edit' }, +] + +const IconOptions =[ + { name: 'Option 1', code: 'option1', prefixIcon: "Edit", suffixIcon: 'Edit' }, + { name: 'Option 2', code: 'option2', prefixIcon: 'Edit', suffixIcon: "Edit" }, + { name: 'Option 3', code: 'option3', prefixIcon:'Edit', suffixIcon: 'Edit' }, +] + + +export const Default = Template.bind({}); +Default.args = { + ...commonArgs, +}; + +export const WithPrefixIcon = Template.bind({}); +WithPrefixIcon.args = { + ...commonArgs, + options:prefixIconOptions +}; + +export const WithSuffixIcon = Template.bind({}); +WithSuffixIcon.args = { + ...commonArgs, + options:suffixIconOptions +}; + +export const WithIcons = Template.bind({}); +WithIcons.args = { + ...commonArgs, + options:IconOptions +}; + +export const SingleSelection = Template.bind({}); +SingleSelection.args = { + ...commonArgs, + allowMultipleSelection: false, +}; + +export const WithError = Template.bind({}); +WithError.args = { + ...commonArgs, + errorMessage: 'There was an error', +}; + +export const CustomWidth = Template.bind({}); +CustomWidth.args = { + ...commonArgs, + width: 300, +}; diff --git a/react/ui-components/src/atoms/stories/Timeline.stories.js b/react/ui-components/src/atoms/stories/Timeline.stories.js index 19fa5070ed..d4333eda41 100644 --- a/react/ui-components/src/atoms/stories/Timeline.stories.js +++ b/react/ui-components/src/atoms/stories/Timeline.stories.js @@ -212,4 +212,16 @@ CompletedWithConnector.args = { variant: "completed", additionalElements: additionalElements, showConnector:true +}; + + +// Error Timeline +export const ErrorTimeline = Template.bind({}); +ErrorTimeline.args = { + label: "", + subElements: [], + variant: "completed", + isError:true, + showDefaultValueForDate :true, + additionalElements: additionalElements, }; \ No newline at end of file diff --git a/react/ui-components/src/index.js b/react/ui-components/src/index.js index 47540097b6..2982eb1553 100644 --- a/react/ui-components/src/index.js +++ b/react/ui-components/src/index.js @@ -84,6 +84,7 @@ import { TopBar, Hamburger, Menu, + SelectionCard } from "./atoms"; import { @@ -263,6 +264,7 @@ export { BreadCrumb, BreakLine, Button, + SelectionCard, Card, CardBasedOptions, CardCaption, diff --git a/react/ui-components/src/molecules/stories/TimelineMolecule.stories.js b/react/ui-components/src/molecules/stories/TimelineMolecule.stories.js index dac0b8bbc1..d8f4149bf6 100644 --- a/react/ui-components/src/molecules/stories/TimelineMolecule.stories.js +++ b/react/ui-components/src/molecules/stories/TimelineMolecule.stories.js @@ -313,4 +313,40 @@ export const WithFutureLabelHidden = () => ( showConnector={true} /> +); + +export const WithError = () => ( + + + + + + + ); \ No newline at end of file