Selection card update (#124)

* updated selectioncard

* updated versions

react/example/package.json

@@ -10,7 +10,7 @@
     "build": "webpack --mode production"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.2-beta.35",
+    "@egovernments/digit-ui-components": "0.0.2-beta.36",
     "@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",

react/modules/core/package.json

@@ -14,7 +14,7 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.2-beta.35",
+    "@egovernments/digit-ui-components": "0.0.2-beta.36",
     "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
     "react": "17.0.2",
     "react-dom": "17.0.2",

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.35",
+    "@egovernments/digit-ui-components": "0.0.2-beta.36",
     "react": "17.0.2",
     "react-date-range": "^1.4.0",
     "react-dom": "17.0.2",

react/package.json

@@ -85,7 +85,7 @@
     "@egovernments/digit-ui-module-sample": "0.0.1",
     "@egovernments/digit-ui-react-components": "1.7.10",
     "@egovernments/digit-ui-svg-components": "1.0.11",
-    "@egovernments/digit-ui-components": "0.0.2-beta.35",
+    "@egovernments/digit-ui-components": "0.0.2-beta.36",
     "babel-loader": "8.1.0",
     "clean-webpack-plugin": "4.0.0",
     "css-loader": "5.2.6",

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.36] - 2024-09-06
+### New Changes
+- Updated SelectionCard Component 
+
 ## [0.0.2-beta.35] - 2024-09-06
 ### New Changes
 - Added LandingPageCard,MenuCard Molecules

react/ui-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-components",
-  "version": "0.0.2-beta.35",
+  "version": "0.0.2-beta.36",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",

react/ui-components/src/atoms/SelectionCard.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState} from "react";
 import PropTypes from "prop-types";
 import ErrorMessage from "./ErrorMessage";
 import { useTranslation } from "react-i18next";
@@ -11,24 +11,32 @@ const SelectionCard = ({
   options,
   onSelectionChanged,
   allowMultipleSelection = true,
+  selected
 }) => {
   const { t } = useTranslation();
-  const [selectedOptions, setSelectedOptions] = useState([]);
+  const [selectedOptions, setSelectedOptions] = useState(selected || []);
 
   const handleOptionClick = (option) => {
     const updatedSelections = [...selectedOptions];
+    const isSelected = updatedSelections.some(
+      (selectedOption) => selectedOption.code === option.code
+    );
+
     if (allowMultipleSelection) {
-      if (updatedSelections.includes(option)) {
-        const index = updatedSelections.indexOf(option);
+      if (isSelected) {
+        // Remove the option if it's already selected
+        const index = updatedSelections.findIndex(
+          (selectedOption) => selectedOption.code === option.code
+        );
         updatedSelections.splice(index, 1);
       } else {
         updatedSelections.push(option);
       }
     } else {
-      if (updatedSelections.includes(option)) {
-        updatedSelections.length = 0;
+      if (isSelected) {
+        updatedSelections.length = 0; // Clear selection if already selected
       } else {
-        updatedSelections.length = 0;
+        updatedSelections.length = 0; // Clear all and select the current option
         updatedSelections.push(option);
       }
     }
@@ -51,8 +59,9 @@ const SelectionCard = ({
   };
 
   const renderOption = (option) => {
-    const isSelected = selectedOptions.includes(option);
-
+    const isSelected = selectedOptions.some(
+      (selectedOption) => selectedOption.code === option.code
+    );
     return (
       <div
         key={option.code}

react/ui-components/src/atoms/stories/SelectionCard.stories.js

@@ -18,6 +18,12 @@ export default {
     onSelectionChanged: {
       action: 'selectionChanged',
     },
+    selected:{
+      control: {
+        type: "array",
+        separator: ",",
+      },
+    },
     allowMultipleSelection: {
       control: 'boolean',
     },
@@ -29,6 +35,7 @@ const Template = (args) => <SelectionCard {...args} />;
 const commonArgs = {
   width: "",
   errorMessage: '',
+  selected:[],
   options: [
     { name: 'Option 1', code: 'option1', prefixIcon:  "", suffixIcon: '' },
     { name: 'Option 2', code: 'option2', prefixIcon: '', suffixIcon: "" },
@@ -86,6 +93,14 @@ SingleSelection.args = {
   allowMultipleSelection: false,
 };
 
+export const WithInitialSelection = Template.bind({});
+WithInitialSelection.args = {
+  ...commonArgs,
+  selected:[
+    { name: 'Option 1', code: 'option1', prefixIcon:  "", suffixIcon: '' }
+  ]
+};
+
 export const WithError = Template.bind({});
 WithError.args = {
   ...commonArgs,