diff --git a/react/css/README.md b/react/css/README.md index 56b6015fa5..a8fad109c9 100644 --- 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.15 Updated ErrorMessage styles 1.8.2-coreui.14 updated dropdown checkbox css 1.8.2-coreui.13 added spacers 1.8.2-coreui.12 updated css for toast info and category option css diff --git a/react/css/package.json b/react/css/package.json index dc08cd1f18..4c8bd3d2dd 100644 --- a/react/css/package.json +++ b/react/css/package.json @@ -1,6 +1,6 @@ { "name": "@egovernments/digit-ui-css", - "version": "1.8.2-coreui.14", + "version": "1.8.2-coreui.15", "license": "MIT", "main": "dist/index.css", "author": "Jagankumar ", diff --git a/react/css/src/digitv2/components/ErrorMessage.scss b/react/css/src/digitv2/components/ErrorMessage.scss index 0047e3e505..0877491a82 100644 --- a/react/css/src/digitv2/components/ErrorMessage.scss +++ b/react/css/src/digitv2/components/ErrorMessage.scss @@ -1,16 +1,19 @@ @import url("../index.scss"); @import url("../typography.scss"); -.digit-error-message { - @extend .alert-error; - @extend .typography.text-body-s; - @apply block mb-md; -} +.digit-error-icon-message-wrap { + @apply flex w-full whitespace-pre-wrap break-words; + gap: theme(digitv2.spacers.spacer1); -.digit-employee-card { + .digit-error-icon{ + @apply flex items-center; + width: theme(digitv2.spacers.spacer4); + height: theme(digitv2.lineHeight.lineheight2); + } .digit-error-message { - @extend .typography.text-body-s; - font-size: 12px; - margin-top: -21px; + @extend .typography.body-s; + @apply w-full; + margin: theme(digitv2.spacers.spacer0); + color: theme(digitv2.lightTheme.alert-error) } -} +} \ No newline at end of file diff --git a/react/css/src/digitv2/components/fieldV1.scss b/react/css/src/digitv2/components/fieldV1.scss index e08772358a..1914263296 100644 --- a/react/css/src/digitv2/components/fieldV1.scss +++ b/react/css/src/digitv2/components/fieldV1.scss @@ -94,22 +94,4 @@ .digit-charcount { @apply justify-end; } - - .digit-error { - @apply flex; - gap: theme(digitv2.spacers.spacer1); - - .digit-error-icon{ - @apply items-center; - display: flex; - width:theme(digitv2.spacers.spacer4); - height:1.37rem; - } - .digit-error-message { - @extend .typography.body-s; - @apply w-full; - margin: theme(digitv2.spacers.spacer0); - color: theme(digitv2.lightTheme.alert-error) - } - } } \ No newline at end of file diff --git a/react/example/package.json b/react/example/package.json index c1033de5be..a90a500b28 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.1-beta.22", + "@egovernments/digit-ui-components": "0.0.1-beta.23", "@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 c7cffcedca..046853e6c8 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 04e772137f..29fea98987 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.1-beta.22", + "@egovernments/digit-ui-components": "0.0.1-beta.23", "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 fbc6ea67b9..745dff37d2 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.1-beta.22", + "@egovernments/digit-ui-components": "0.0.1-beta.23", "@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 ee511854fc..51e9c61ca0 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.1-beta.22", + "@egovernments/digit-ui-components": "0.0.1-beta.23", "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 e828167821..70e51f78cd 100644 --- 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.22", + "@egovernments/digit-ui-components": "0.0.1-beta.23", "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 index 36edec27c1..ae4220227e 100644 --- a/react/ui-components/README.md +++ b/react/ui-components/README.md @@ -58,6 +58,7 @@ yarn storybook # Changelog ```bash +0.0.1-beta.23 Updated ErrorMessage component to have new props named showIcon,truncateMessage and maxLength 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 diff --git a/react/ui-components/package.json b/react/ui-components/package.json index b2f8b8d0ef..0968f97067 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.1-beta.22", + "version": "0.0.1-beta.23", "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.14", + "@egovernments/digit-ui-css": "1.8.2-coreui.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/ErrorMessage.js b/react/ui-components/src/atoms/ErrorMessage.js index d957cfea72..6080d1c567 100644 --- a/react/ui-components/src/atoms/ErrorMessage.js +++ b/react/ui-components/src/atoms/ErrorMessage.js @@ -1,13 +1,42 @@ import React from "react"; import PropTypes from "prop-types"; +import { SVG } from "./SVG"; +import StringManipulator from "./StringManipulator"; -const ErrorMessage = ({ message, className = "", style = {} }) => { +const ErrorMessage = ({ + wrapperClassName = "", + wrapperStyles = {}, + showIcon, + iconStyles = {}, + message, + className = "", + style = {}, + truncateMessage, + maxLength, +}) => { return ( - -

- {message} -

- +
+ {showIcon && ( +
+ +
+ )} +
+ {truncateMessage + ? StringManipulator( + "TOSENTENCECASE", + StringManipulator("TRUNCATESTRING", message, { + maxLength: maxLength || 256, + }) + ) + : StringManipulator("TOSENTENCECASE", message)} +
+
); }; @@ -15,6 +44,8 @@ ErrorMessage.propTypes = { className: PropTypes.string, style: PropTypes.object, message: PropTypes.string, + showIcon: PropTypes.bool, + truncateMessage: PropTypes.bool, }; export default ErrorMessage; diff --git a/react/ui-components/src/hoc/FieldV1.js b/react/ui-components/src/hoc/FieldV1.js index b67165d4b6..4051fe9b97 100644 --- a/react/ui-components/src/hoc/FieldV1.js +++ b/react/ui-components/src/hoc/FieldV1.js @@ -87,28 +87,12 @@ const FieldV1 = ({ const renderDescriptionOrError = () => { if (error) { return ( -
-
- -
- -
+ ); } else if (description) { return ( @@ -122,14 +106,12 @@ const FieldV1 = ({ lineHeight: "1.5rem", }} > - { - StringManipulator( - "TOSENTENCECASE", - StringManipulator("TRUNCATESTRING", t(description), { - maxLength: 256, - }) - ) - } + {StringManipulator( + "TOSENTENCECASE", + StringManipulator("TRUNCATESTRING", t(description), { + maxLength: 256, + }) + )} ); } @@ -239,7 +221,7 @@ const FieldV1 = ({ ); case "multiselectdropdown": return ( -
+
-
+
{StringManipulator( - "TOSENTENCECASE", - StringManipulator("TRUNCATESTRING", t(label), { - maxLength: 64, - }) - )} + "TOSENTENCECASE", + StringManipulator("TRUNCATESTRING", t(label), { + maxLength: 64, + }) + )}
{required ? " * " : null}
{infoMessage ? ( diff --git a/react/ui-components/src/hoc/stories/ErrorMessage.stories.js b/react/ui-components/src/hoc/stories/ErrorMessage.stories.js new file mode 100644 index 0000000000..94a1a9976b --- /dev/null +++ b/react/ui-components/src/hoc/stories/ErrorMessage.stories.js @@ -0,0 +1,76 @@ +import React, { Children } from "react"; +import { ErrorMessage } from "../../atoms"; +import { truncate } from "lodash"; + +export default { + title: "Atom-Groups/ErrorMessage", + component: ErrorMessage, + argTypes: { + wrapperClassName: { + control: "text", + }, + wrapperStyles: { + control: { type: "object" }, + }, + showIcon: { + control: "boolean", + }, + iconStyles: { + control: { type: "object" }, + }, + message: { + control: "text", + }, + className: { + control: "text", + }, + style: { + control: { type: "object" }, + }, + truncateMessage: { + control: "boolean", + }, + maxLength:{ + control:"text" + } + }, +}; + +const Template = (args) => ; + +const commonArgs = { + wrapperClassName: "", + wrapperStyles: {}, + showIcon: false, + iconStyles: {}, + message: "", + className: "", + style: {}, + truncateMessage:false, + maxLength:"" +}; + +// Default ErrorMessage +export const Default = Template.bind({}); +Default.args = { + ...commonArgs, + message: "Error Message", +}; + +// ErrorMessage with icon +export const WithIcon = Template.bind({}); +WithIcon.args = { + ...commonArgs, + message: "Error Message With Icon", + showIcon: true, +}; + +// ErrorMessage with icon +export const WithTruncateMessage = Template.bind({}); +WithTruncateMessage.args = { + ...commonArgs, + message: "Error with truncateMessage as true", + showIcon: true, + truncateMessage:true, + maxLength:10 +}; \ No newline at end of file diff --git a/react/ui-components/yarn-error.log b/react/ui-components/yarn-error.log index cbadf418b8..98ed4c11a4 100644 --- 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.22", + "version": "0.0.1-beta.23", "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.14", + "@egovernments/digit-ui-css": "1.8.2-coreui.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/yarn-error.log b/react/yarn-error.log index b35294b497..60969b757e 100644 --- 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.22", + "@egovernments/digit-ui-components": "0.0.1-beta.23", "babel-loader": "8.1.0", "clean-webpack-plugin": "4.0.0", "react": "17.0.2",