FEATURE/HCMPRE-1447 added icons for microplan and updated versions (#…

…2015)

micro-ui/web/micro-ui-internals/packages/modules/core/package.json

@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@egovernments/digit-ui-components":"0.0.2-beta.56",
-    "@egovernments/digit-ui-react-components": "1.8.10",
+    "@egovernments/digit-ui-react-components": "1.8.11",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-i18next": "11.16.2",

micro-ui/web/micro-ui-internals/packages/react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-react-components",
-  "version": "1.8.10",
+  "version": "1.8.11",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
@@ -46,7 +46,7 @@
     "dist"
   ],
   "dependencies": {
-    "@egovernments/digit-ui-svg-components":"1.0.13",
+    "@egovernments/digit-ui-svg-components":"1.0.14",
     "@egovernments/digit-ui-components":"0.0.2-beta.56",
     "@googlemaps/js-api-loader": "1.13.10",
     "@hookform/resolvers": "1.3.7",

micro-ui/web/micro-ui-internals/packages/svg-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-svg-components",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
   "source": "src/index.js",

micro-ui/web/micro-ui-internals/packages/svg-components/src/index.js

@@ -808,8 +808,18 @@ import { ContractIcon } from "./svg/ContractIcon";
 import { MeasurementMuktaIcon } from "./svg/MeasurementMuktaIcon";
 import { HRIcon } from "./svg/HRIcon";
 import { ShpIcon } from "./svg/ShpIcon";
+import { MyMicroplanSvg } from "./svg/MyMicroplanSvg";
+import { UserManagementSvg } from "./svg/UserManagementSvg";
+import { OpenMicroplanSvg } from "./svg/OpenMicroplanSvg";
+import { SetUpMicroplanSvg } from "./svg/SetUpMicroplanSvg";
+import { AddCircle } from "./svg/AddCircle";
 
 export {
+  AddCircle,
+  SetUpMicroplanSvg,
+  MyMicroplanSvg,
+  OpenMicroplanSvg,
+  UserManagementSvg,
   Add,
   Profile,
   PdfIcon,

micro-ui/web/micro-ui-internals/packages/svg-components/src/svg/AddCircle.js

@@ -0,0 +1,37 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const AddCircle = ({ className = "", width = "24", height = "24", style = {}, fill = "#e8eaed", onClick = null, ...props }) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 -960 960 960"
+      className={className}
+      style={style}
+      onClick={onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};
+
+AddCircle.propTypes = {
+  /** Custom width of the SVG icon */
+  width: PropTypes.string,
+  /** Custom height of the SVG icon */
+  height: PropTypes.string,
+  /** Custom color of the SVG icon */
+  fill: PropTypes.string,
+  /** Custom class of the SVG icon */
+  className: PropTypes.string,
+  /** Custom style of the SVG icon */
+  style: PropTypes.object,
+  /** Click event handler when icon is clicked */
+  onClick: PropTypes.func,
+};

micro-ui/web/micro-ui-internals/packages/svg-components/src/svg/AddCircle.stories.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { AddCircle } from "./AddCircle";
+
+export default {
+  tags: ['autodocs'],
+  argTypes: {
+    className: {
+        options: ['custom-class'],
+        control: { type: 'check' },
+    }
+  },
+  title: "AddCircle",
+  component: AddCircle,
+};
+
+export const Default = () => <AddCircle />;
+export const Fill = () => <AddCircle fill="blue" />;
+export const Size = () => <AddCircle height="50" width="50" />;
+export const CustomStyle = () => <AddCircle style={{ border: "1px solid red" }} />;
+export const CustomClassName = () => <AddCircle className="custom-class" />;
+export const Clickable = () => <AddCircle onClick={() => console.log("clicked")} />;
+
+const Template = (args) => <AddCircle {...args} />;
+
+export const Playground = Template.bind({});
+Playground.args = {
+  className: 'custom-class',
+  style: { border: "3px solid green" }
+};

micro-ui/web/micro-ui-internals/packages/svg-components/src/svg/MyMicroplanSvg.js

@@ -0,0 +1,37 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const MyMicroplanSvg = ({ className = "", width = "24", height = "24", style = {}, fill = "#e8eaed", onClick = null, ...props }) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 -960 960 960"
+      className={className}
+      style={style}
+      onClick={onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M80-160v-160h160v160H80Zm240 0v-160h560v160H320ZM80-400v-160h160v160H80Zm240 0v-160h560v160H320ZM80-640v-160h160v160H80Zm240 0v-160h560v160H320Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};
+
+MyMicroplanSvg.propTypes = {
+  /** Custom width of the SVG icon */
+  width: PropTypes.string,
+  /** Custom height of the SVG icon */
+  height: PropTypes.string,
+  /** Custom color of the SVG icon */
+  fill: PropTypes.string,
+  /** Custom class of the SVG icon */
+  className: PropTypes.string,
+  /** Custom style of the SVG icon */
+  style: PropTypes.object,
+  /** Click event handler when icon is clicked */
+  onClick: PropTypes.func,
+};

micro-ui/web/micro-ui-internals/packages/svg-components/src/svg/MyMicroplanSvg.stories.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { MyMicroplanSvg } from "./MyMicroplanSvg";
+
+export default {
+  tags: ['autodocs'],
+  argTypes: {
+    className: {
+        options: ['custom-class'],
+        control: { type: 'check' },
+    }
+  },
+  title: "MyMicroplanSvg",
+  component: MyMicroplanSvg,
+};
+
+export const Default = () => <MyMicroplanSvg />;
+export const Fill = () => <MyMicroplanSvg fill="blue" />;
+export const Size = () => <MyMicroplanSvg height="50" width="50" />;
+export const CustomStyle = () => <MyMicroplanSvg style={{ border: "1px solid red" }} />;
+export const CustomClassName = () => <MyMicroplanSvg className="custom-class" />;
+export const Clickable = () => <MyMicroplanSvg onClick={() => console.log("clicked")} />;
+
+const Template = (args) => <MyMicroplanSvg {...args} />;
+
+export const Playground = Template.bind({});
+Playground.args = {
+  className: 'custom-class',
+  style: { border: "3px solid green" }
+};

micro-ui/web/micro-ui-internals/packages/svg-components/src/svg/OpenMicroplanSvg.js

@@ -0,0 +1,45 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const OpenMicroplanSvg = ({
+  className = "",
+  width = "24",
+  height = "24",
+  style = {},
+  fill = "#e8eaed",
+  onClick = null,
+  ...props
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 -960 960 960"
+      className={className}
+      style={style}
+      onClick={onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H600v-80h160v-480H200v480h160v80H200Zm240 0v-246l-64 64-56-58 160-160 160 160-56 58-64-64v246h-80Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};
+
+OpenMicroplanSvg.propTypes = {
+  /** Custom width of the SVG icon */
+  width: PropTypes.string,
+  /** Custom height of the SVG icon */
+  height: PropTypes.string,
+  /** Custom color of the SVG icon */
+  fill: PropTypes.string,
+  /** Custom class of the SVG icon */
+  className: PropTypes.string,
+  /** Custom style of the SVG icon */
+  style: PropTypes.object,
+  /** Click event handler when icon is clicked */
+  onClick: PropTypes.func,
+};

micro-ui/web/micro-ui-internals/packages/svg-components/src/svg/OpenMicroplanSvg.stories.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { OpenMicroplanSvg } from "./OpenMicroplanSvg";
+
+export default {
+  tags: ['autodocs'],
+  argTypes: {
+    className: {
+        options: ['custom-class'],
+        control: { type: 'check' },
+    }
+  },
+  title: "OpenMicroplanSvg",
+  component: OpenMicroplanSvg,
+};
+
+export const Default = () => <OpenMicroplanSvg />;
+export const Fill = () => <OpenMicroplanSvg fill="blue" />;
+export const Size = () => <OpenMicroplanSvg height="50" width="50" />;
+export const CustomStyle = () => <OpenMicroplanSvg style={{ border: "1px solid red" }} />;
+export const CustomClassName = () => <OpenMicroplanSvg className="custom-class" />;
+export const Clickable = () => <OpenMicroplanSvg onClick={() => console.log("clicked")} />;
+
+const Template = (args) => <OpenMicroplanSvg {...args} />;
+
+export const Playground = Template.bind({});
+Playground.args = {
+  className: 'custom-class',
+  style: { border: "3px solid green" }
+};

micro-ui/web/micro-ui-internals/packages/svg-components/src/svg/SetUpMicroplanSvg.js

@@ -0,0 +1,45 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const SetUpMicroplanSvg = ({
+  className = "",
+  width = "24",
+  height = "24",
+  style = {},
+  fill = "#e8eaed",
+  onClick = null,
+  ...props
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 -960 960 960"
+      className={className}
+      style={style}
+      onClick={onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h240v80H200v560h560v-240h80v240q0 33-23.5 56.5T760-120H200Zm440-400v-120H520v-80h120v-120h80v120h120v80H720v120h-80Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};
+
+SetUpMicroplanSvg.propTypes = {
+  /** Custom width of the SVG icon */
+  width: PropTypes.string,
+  /** Custom height of the SVG icon */
+  height: PropTypes.string,
+  /** Custom color of the SVG icon */
+  fill: PropTypes.string,
+  /** Custom class of the SVG icon */
+  className: PropTypes.string,
+  /** Custom style of the SVG icon */
+  style: PropTypes.object,
+  /** Click event handler when icon is clicked */
+  onClick: PropTypes.func,
+};

micro-ui/web/micro-ui-internals/packages/svg-components/src/svg/SetUpMicroplanSvg.stories.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { SetUpMicroplanSvg } from "./SetUpMicroplanSvg";
+
+export default {
+  tags: ['autodocs'],
+  argTypes: {
+    className: {
+        options: ['custom-class'],
+        control: { type: 'check' },
+    }
+  },
+  title: "SetUpMicroplanSvg",
+  component: SetUpMicroplanSvg,
+};
+
+export const Default = () => <SetUpMicroplanSvg />;
+export const Fill = () => <SetUpMicroplanSvg fill="blue" />;
+export const Size = () => <SetUpMicroplanSvg height="50" width="50" />;
+export const CustomStyle = () => <SetUpMicroplanSvg style={{ border: "1px solid red" }} />;
+export const CustomClassName = () => <SetUpMicroplanSvg className="custom-class" />;
+export const Clickable = () => <SetUpMicroplanSvg onClick={() => console.log("clicked")} />;
+
+const Template = (args) => <SetUpMicroplanSvg {...args} />;
+
+export const Playground = Template.bind({});
+Playground.args = {
+  className: 'custom-class',
+  style: { border: "3px solid green" }
+};

micro-ui/web/micro-ui-internals/packages/svg-components/src/svg/UserManagementSvg.js

@@ -0,0 +1,45 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const UserManagementSvg = ({
+  className = "",
+  width = "24",
+  height = "24",
+  style = {},
+  fill = "#e8eaed",
+  onClick = null,
+  ...props
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 -960 960 960"
+      className={className}
+      style={style}
+      onClick={onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M40-160v-112q0-34 17.5-62.5T104-378q62-31 126-46.5T360-440q66 0 130 15.5T616-378q29 15 46.5 43.5T680-272v112H40Zm720 0v-120q0-44-24.5-84.5T666-434q51 6 96 20.5t84 35.5q36 20 55 44.5t19 53.5v120H760ZM360-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm400-160q0 66-47 113t-113 47q-11 0-28-2.5t-28-5.5q27-32 41.5-71t14.5-81q0-42-14.5-81T544-792q14-5 28-6.5t28-1.5q66 0 113 47t47 113Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};
+
+UserManagementSvg.propTypes = {
+  /** Custom width of the SVG icon */
+  width: PropTypes.string,
+  /** Custom height of the SVG icon */
+  height: PropTypes.string,
+  /** Custom color of the SVG icon */
+  fill: PropTypes.string,
+  /** Custom class of the SVG icon */
+  className: PropTypes.string,
+  /** Custom style of the SVG icon */
+  style: PropTypes.object,
+  /** Click event handler when icon is clicked */
+  onClick: PropTypes.func,
+};