Toast update with type prop (#64)

* updated toast to have type prop

* updated components version

* review changes

* updated README.md

react/example/package.json

@@ -10,7 +10,7 @@
     "build": "webpack --mode production"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.1-beta.21",
+    "@egovernments/digit-ui-components": "0.0.1-beta.22",
     "@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/Project/package.json

@@ -19,7 +19,7 @@
     },
     "dependencies": {
         "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
-        "@egovernments/digit-ui-components": "0.0.1-beta.21",
+        "@egovernments/digit-ui-components": "0.0.1-beta.22",
         "lodash": "^4.17.21",
         "react": "17.0.2",
         "react-date-range": "^1.4.0",

react/modules/core/package.json

@@ -14,7 +14,7 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.1-beta.21",
+    "@egovernments/digit-ui-components": "0.0.1-beta.22",
     "@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.1-beta.21",
+    "@egovernments/digit-ui-components": "0.0.1-beta.22",
     "react": "17.0.2",
     "react-date-range": "^1.4.0",
     "react-dom": "17.0.2",

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.1-beta.21",
+    "@egovernments/digit-ui-components": "0.0.1-beta.22",
     "babel-loader": "8.1.0",
     "clean-webpack-plugin": "4.0.0",
     "css-loader": "5.2.6",

react/ui-components/README.md

@@ -58,6 +58,7 @@ yarn storybook
 # Changelog
 
 ```bash
+0.0.1-beta.22 From this version of ui-components the Toast component will have a new prop named type, replacing the seperate props for  info,warning and error
 0.0.1-beta.21 Added categorySelectAllState in the nestedmultiselect variant of multiselectdropdown
 0.0.1-beta.20 updated multiselectdropdown categoryselectall functionality and added key navigation for dropdown options 
 0.0.1-beta.19 making CheckBox more customizable and adding custom color for Button
@@ -80,6 +81,26 @@ yarn storybook
 0.0.1 base version
 ```
 
+## [0.0.1-beta.22] - 2024-05-20
+
+### Breaking Changes
+
+- Toast Component: From this version of `ui-components`, the `Toast` component has a new prop named `type`, replacing the separate props for `info`, `warning`, and `error`.
+  - Old Usage:
+    ```jsx
+        <Toast info={true} label={"Info Toast"} />
+        <Toast warning="warning" label={"Warning Toast"}/>
+        <Toast error={true} label={"Error Toast"}/>
+    ```
+  - New Usage:
+    ```jsx
+        <Toast type="info" label={"Info Toast"} />
+        <Toast type="warning" label={"Warning Toast"} />
+        <Toast type="error" label={"Error Toast"} />
+        <Toast type="success" label={"Success Toast"} />
+    ```
+
+
 ## Published from DIGIT Core
 
 Digit Core Repo (https://github.com/egovernments/Core-Platform/tree/digit-ui-core)

react/ui-components/package.json

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

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

@@ -5,6 +5,7 @@ import Button from "./Button";
 import StringManipulator from "./StringManipulator";
 
 const Toast = (props) => {
+
   const [isVisible, setIsVisible] = useState(true);
   const [isAnimating, setIsAnimating] = useState(false);
 
@@ -32,15 +33,25 @@ const Toast = (props) => {
     setIsVisible(false);
   };
 
-  const variant = props?.error
-    ? "digit-error"
-    : props?.warning
-    ? "digit-warning"
-    : props?.info
-    ? "digit-info"
-    : props?.variant
-    ? props?.variant
-    : "";
+  let variant;
+  switch (props?.type) {
+    case "success":
+      variant = "digit-success";
+      break;
+    case "error":
+      variant = "digit-error";
+      break;
+    case "warning":
+      variant = "digit-warning";
+      break;
+    case "info":
+      variant = "digit-info";
+      break;
+    default:
+      variant = props?.variant || "";
+      break;
+  }
+
   const isWarningButtons = props?.isWarningButtons
     ? "digit-warning-buttons"
     : "";
@@ -51,52 +62,13 @@ const Toast = (props) => {
     return null;
   }
 
-  if (props.error) {
-    return (
-      <div
-        className={`digit-toast-success ${isVisible && isAnimating ? "animate" : ""} ${variant}`}
-        style={{ ...props.style }}
-      >
-        <SVG.Error fill="#FFFFFF" />
-        <div style={{ ...props.labelstyle }} className="toast-label">
-          {sentenceCaseLabel}
-        </div>
-        <SVG.Close
-          fill="#FFFFFF"
-          className="digit-toast-close-btn"
-          style={{ cursor: "pointer" }}
-          onClick={props.onClose ? props.onClose : handleClose}
-        />
-      </div>
-    );
-  }
-
-  if (props.info) {
-    return (
-      <div
-        className={`digit-toast-success ${isVisible && isAnimating ? "animate" : ""} ${variant}`}
-        style={{ ...props.style }}
-      >
-        <SVG.Info fill="#FFFFFF" />
-        <div style={{ ...props.labelstyle }} className="toast-label">
-          {sentenceCaseLabel}
-        </div>
-        <SVG.Close
-          fill="#FFFFFF"
-          className="digit-toast-close-btn"
-          style={{ cursor: "pointer" }}
-          onClick={props.onClose ? props.onClose : handleClose}
-        />
-      </div>
-    );
-  }
-
-
-  if (props.warning) {
+  if (props?.type === "warning") {
     return (
       <div>
         <div
-          className={`digit-toast-success ${isVisible && isAnimating ? "animate" : ""} ${variant} ${isWarningButtons}`}
+          className={`digit-toast-success ${
+            isVisible && isAnimating ? "animate" : ""
+          } ${variant} ${isWarningButtons}`}
           style={{ ...props.style }}
         >
           {!props?.isWarningButtons ? (
@@ -139,9 +111,23 @@ const Toast = (props) => {
     );
   }
 
-  return (
-    <div className={`digit-toast-success ${isVisible && isAnimating ? "animate" : ""}`} style={{ ...props.style }}>
+  const icon =
+    props?.type === "error" ? (
+      <SVG.Error fill="#FFFFFF" />
+    ) : props?.type === "info" ? (
+      <SVG.Info fill="#FFFFFF" />
+    ) : (
       <SVG.CheckCircle fill="#FFFFFF" />
+    );
+
+  return (
+    <div
+      className={`digit-toast-success ${
+        isVisible && isAnimating ? "animate" : ""
+      } ${variant}`}
+      style={{ ...props.style }}
+    >
+      {icon}
       <div className="toast-label" style={{ ...props.labelstyle }}>
         {sentenceCaseLabel}
       </div>
@@ -160,6 +146,7 @@ Toast.propTypes = {
   onClose: PropTypes.func,
   isDleteBtn: PropTypes.bool,
   transitionTime: PropTypes.number,
+  type: PropTypes.string,
 };
 
 Toast.defaultProps = {

react/ui-components/src/hoc/FormComposerV2.js

@@ -415,7 +415,7 @@ export const FormComposer = (props) => {
           {props.onSkip && props.showSkip && <ActionLinks style={props?.skipStyle} label={t(`CS_SKIP_CONTINUE`)} onClick={props.onSkip} />}
         </ActionBar>
       )}
-      {showErrorToast && <Toast error={true} label={t("ES_COMMON_PLEASE_ENTER_ALL_MANDATORY_FIELDS")} isDleteBtn={true} onClose={closeToast} />}
+      {showErrorToast && <Toast type={"error"} label={t("ES_COMMON_PLEASE_ENTER_ALL_MANDATORY_FIELDS")} isDleteBtn={true} onClose={closeToast} />}
     </form>
   );
 };

react/ui-components/src/hoc/stories/Toast.stories.js

@@ -7,7 +7,10 @@ export default {
   argTypes: {
     populators: { control: "object" },
     label: { control: "text" },
-    error: { control: "boolean" },
+    type: {
+      control: "select",
+      options: ["success", "warning", "error", "info"],
+    }
   },
 };
 
@@ -18,65 +21,65 @@ const commonArgs = {
     name: "toast",
   },
   label: "",
-  error: false,
-  warning: "",
-  info: false,
+  type:"success",
 };
 
 export const SuccessToast = Template.bind({});
 SuccessToast.args = {
   ...commonArgs,
   label: "Success Toast Message",
+  type:"success",
 };
 
 export const WarningToast = Template.bind({});
 WarningToast.args = {
   ...commonArgs,
   label: "Warning Toast Message",
-  warning: "warning",
+  type:"warning",
 };
 
 export const ErrorToast = Template.bind({});
 ErrorToast.args = {
   ...commonArgs,
   label: "Error Toast Message",
-  error: true,
+  type:"error",
 };
 
 export const InfoToast = Template.bind({});
 InfoToast.args = {
   ...commonArgs,
   label: "Info Toast Message",
-  info: true,
+  type:"info",
 };
 
 export const SuccessToastWithTransitionTime = Template.bind({});
 SuccessToastWithTransitionTime.args = {
   ...commonArgs,
   label: "Success Toast Message",
+  type:"success",
   transitionTime: 600000,
 };
 
 export const WarningToastWithTransitionTime = Template.bind({});
 WarningToastWithTransitionTime.args = {
   ...commonArgs,
   label: "Warning Toast Message",
-  warning: "warning",
+  type:"warning",
   transitionTime: 600000,
 };
 
 export const ErrorToastWithTrnasitionTime = Template.bind({});
 ErrorToastWithTrnasitionTime.args = {
   ...commonArgs,
   label: "Error Toast Message",
-  error: true,
+  type:"error",
   transitionTime: 600000,
 };
 
 export const InfoToastWithTrnasitionTime = Template.bind({});
 InfoToastWithTrnasitionTime.args = {
   ...commonArgs,
   label: "Info Toast Message",
-  info: true,
+  type:"info",
   transitionTime: 600000,
 };

react/ui-components/yarn-error.log

@@ -29,7 +29,7 @@ Trace:
 npm manifest: 
   {
     "name": "@egovernments/digit-ui-components",
-    "version": "0.0.1-beta.21",
+    "version": "0.0.1-beta.22",
     "license": "MIT",
     "main": "dist/index.js",
     "module": "dist/index.modern.js",

react/yarn-error.log

@@ -91,7 +91,7 @@ npm manifest:
     "dependencies": {
       "lodash": "4.17.21",
       "microbundle-crl": "0.13.11",
-      "@egovernments/digit-ui-components": "0.0.1-beta.21",
+      "@egovernments/digit-ui-components": "0.0.1-beta.22",
       "babel-loader": "8.1.0",
       "clean-webpack-plugin": "4.0.0",
       "react": "17.0.2",