added info varinat for toast (#55)

egovernments · May 4, 2024 · 56b4181 · 56b4181
1 parent 8175c23
commit 56b4181
Show file tree

Hide file tree

Showing 16 changed files with 121 additions and 68 deletions.
diff --git a/react/css/README.md b/react/css/README.md
@@ -42,6 +42,7 @@ frontend/micro-ui/web/public/index.html
 # Changelog
 
 ```bash
+1.8.2-coreui.11 added info varinat for toast
 1.8.2-coreui.10 dropdown options card height updated
 1.8.2-coreui.9 enhancements of components
 1.8.2-coreui.8 updated css of loader

diff --git a/react/css/example/index.css b/react/css/example/index.css
@@ -1,5 +1,5 @@
 /*!
- * @egovernments/digit-ui-css - 1.8.2-coreui.10
+ * @egovernments/digit-ui-css - 1.8.2-coreui.11
  *
  * Copyright (c) 2024 Jagankumar <[email protected]>
  * 
@@ -13243,6 +13243,9 @@ textarea::-webkit-scrollbar-thumb {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
@@ -13251,12 +13254,15 @@ textarea::-webkit-scrollbar-thumb {
  color: #fff;
  margin: 0;
  text-overflow: ellipsis; }
- .digit-toast-success .digit-warning-button-container, .digit-toast-success .toast-label {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex; }
+ .digit-toast-success.digit-info {
+ background-color: #c7e0f1; }
+ .digit-toast-success.digit-info .toast-label {
+  color: #363636; }
  .digit-toast-success .digit-warning-button-container {
  width: 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end; }

diff --git a/react/css/package.json b/react/css/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@egovernments/digit-ui-css",
- "version": "1.8.2-coreui.10",
+ "version": "1.8.2-coreui.11",
  "license": "MIT",
  "main": "dist/index.css",
  "author": "Jagankumar <[email protected]>",

diff --git a/react/css/src/digitv2/components/toastV2.scss b/react/css/src/digitv2/components/toastV2.scss
@@ -46,6 +46,14 @@
  text-overflow: ellipsis;
  }
 
+ &.digit-info {
+ background-color: theme(digitv2.alert.info-bg);
+
+ .toast-label{
+ color: theme(digitv2.lightTheme.text-primary);
+ }
+ }
+
  .digit-warning-button-container {
  @apply w-full flex justify-end;
 

diff --git 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.1-beta.14",
+ "@egovernments/digit-ui-components": "0.0.1-beta.15",
  "@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
@@ -9,7 +9,7 @@
  rel='stylesheet' type='text/css'>
  <link
  rel="stylesheet"
- href="https://unpkg.com/@egovernments/[email protected].10/dist/index.css"
+ href="https://unpkg.com/@egovernments/[email protected].11/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.1-beta.14",
+ "@egovernments/digit-ui-components": "0.0.1-beta.15",
  "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.1-beta.14",
+ "@egovernments/digit-ui-components": "0.0.1-beta.15",
  "@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.1-beta.14",
+ "@egovernments/digit-ui-components": "0.0.1-beta.15",
  "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.1-beta.14",
+ "@egovernments/digit-ui-components": "0.0.1-beta.15",
  "babel-loader": "8.1.0",
  "clean-webpack-plugin": "4.0.0",
  "css-loader": "5.2.6",

diff --git a/react/ui-components/README.md b/react/ui-components/README.md
@@ -58,6 +58,7 @@ yarn storybook
 # Changelog
 
 ```bash
+0.0.1-beta.15 added info varinat for toast
 0.0.1-beta.14 updated dropdown options label to use optionsKey
 0.0.1-beta.13 nested and tree dropdown varinat updated
 0.0.1-beta.12 enhancements of components

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.1-beta.14",
+ "version": "0.0.1-beta.15",
  "license": "MIT",
  "main": "dist/index.js",
  "module": "dist/index.modern.js",
@@ -51,7 +51,7 @@
  "dist"
  ],
  "dependencies": {
- "@egovernments/digit-ui-css": "1.8.2-coreui.10",
+ "@egovernments/digit-ui-css": "1.8.2-coreui.11",
  "@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/Toast.js b/react/ui-components/src/atoms/Toast.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect,Fragment } from "react";
 import PropTypes from "prop-types";
 import { SVG } from "./SVG";
 import Button from "./Button";
@@ -36,6 +36,8 @@ const Toast = (props) => {
  ? "digit-error"
  : props?.warning
  ? "digit-warning"
+ : props?.info
+ ? "digit-info"
  : props?.variant
  ? props?.variant
  : "";
@@ -69,6 +71,27 @@ const Toast = (props) => {
  );
  }
 
+ if (props.info) {
+ return (
+ <div
+ className={`digit-toast-success ${isVisible && isAnimating ? "animate" : ""} ${variant}`}
+ style={{ ...props.style }}
+ >
+ <SVG.Info fill="#3498DB" />
+ <div style={{ ...props.labelstyle }} className="toast-label">
+ {sentenceCaseLabel}
+ </div>
+ <SVG.Close
+ fill="#363636"
+ className="digit-toast-close-btn"
+ style={{ cursor: "pointer" }}
+ onClick={props.onClose ? props.onClose : handleClose}
+ />
+ </div>
+ );
+ }
+
+
  if (props.warning) {
  return (
  <div>

diff --git a/react/ui-components/src/hoc/stories/Toast.stories.js b/react/ui-components/src/hoc/stories/Toast.stories.js
@@ -7,62 +7,76 @@ export default {
  argTypes: {
  populators: { control: "object" },
  label: { control: "text" },
- error:{control:"boolean"}
+ error: { control: "boolean" },
  },
 };
 
 const Template = (args) => <Toast {...args} />;
 
 const commonArgs = {
- populators: {
- name: "toast",
- },
- label: "",
- error: false,
- warning:"",
- };
-
- export const SuccessToast = Template.bind({});
- SuccessToast.args = {
- ...commonArgs,
- label:"Success Toast Message"
- };
-
- export const WarningToast = Template.bind({});
- WarningToast.args = {
- ...commonArgs,
- label: "Warning Toast Message",
- warning:"warning",
- };
+ populators: {
+ name: "toast",
+ },
+ label: "",
+ error: false,
+ warning: "",
+ info: false,
+};
+
+export const SuccessToast = Template.bind({});
+SuccessToast.args = {
+ ...commonArgs,
+ label: "Success Toast Message",
+};
 
-
- export const ErrorToast = Template.bind({});
- ErrorToast.args = {
- ...commonArgs,
- label: "Error Toast Message",
- error:true
- };
+export const WarningToast = Template.bind({});
+WarningToast.args = {
+ ...commonArgs,
+ label: "Warning Toast Message",
+ warning: "warning",
+};
+
+export const ErrorToast = Template.bind({});
+ErrorToast.args = {
+ ...commonArgs,
+ label: "Error Toast Message",
+ error: true,
+};
 
- export const SuccessToastWithTransitionTime = Template.bind({});
- SuccessToastWithTransitionTime.args = {
- ...commonArgs,
- label:"Success Toast Message",
- transitionTime:600000 
- };
-
- export const WarningToastWithTransitionTime = Template.bind({});
- WarningToastWithTransitionTime.args = {
- ...commonArgs,
- label: "Warning Toast Message",
- warning:"warning",
- transitionTime:600000 
- };
+export const InfoToast = Template.bind({});
+InfoToast.args = {
+ ...commonArgs,
+ label: "Info Toast Message",
+ info: true,
+};
 
-
- export const ErrorToastWithTrnasitionTime = Template.bind({});
- ErrorToastWithTrnasitionTime.args = {
- ...commonArgs,
- label: "Error Toast Message",
- error:true,
- transitionTime:600000 
- };
+export const SuccessToastWithTransitionTime = Template.bind({});
+SuccessToastWithTransitionTime.args = {
+ ...commonArgs,
+ label: "Success Toast Message",
+ transitionTime: 600000,
+};
+
+export const WarningToastWithTransitionTime = Template.bind({});
+WarningToastWithTransitionTime.args = {
+ ...commonArgs,
+ label: "Warning Toast Message",
+ warning: "warning",
+ transitionTime: 600000,
+};
+
+export const ErrorToastWithTrnasitionTime = Template.bind({});
+ErrorToastWithTrnasitionTime.args = {
+ ...commonArgs,
+ label: "Error Toast Message",
+ error: true,
+ transitionTime: 600000,
+};
+
+export const InfoToastWithTrnasitionTime = Template.bind({});
+InfoToastWithTrnasitionTime.args = {
+ ...commonArgs,
+ label: "Info Toast Message",
+ info: true,
+ transitionTime: 600000,
+};
diff --git a/react/ui-components/yarn-error.log b/react/ui-components/yarn-error.log
@@ -29,7 +29,7 @@ Trace:
 npm manifest: 
  {
  "name": "@egovernments/digit-ui-components",
- "version": "0.0.1-beta.14",
+ "version": "0.0.1-beta.15",
  "license": "MIT",
  "main": "dist/index.js",
  "module": "dist/index.modern.js",
@@ -80,7 +80,7 @@ npm manifest:
  "dist"
  ],
  "dependencies": {
- "@egovernments/digit-ui-css": "1.8.2-coreui.10",
+ "@egovernments/digit-ui-css": "1.8.2-coreui.11",
  "@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/yarn-error.log b/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.14",
+ "@egovernments/digit-ui-components": "0.0.1-beta.15",
  "babel-loader": "8.1.0",
  "clean-webpack-plugin": "4.0.0",
  "react": "17.0.2",