venice-ui 1.1.2 → 1.1.3

package/dist/cjs/Theme/Theme.js

@@ -70,6 +70,10 @@ exports.mainTheme = {
     buttonInverseHover: (0, polished_1.lighten)(0.3, exports.Theme.colors.primary),
     disabledBackground: exports.Theme.colors.gray_4,
     disabledText: exports.Theme.colors.gray_1,
+    //icon
+    iconColor: exports.Theme.colors.text,
+    iconDisabledColor: exports.Theme.colors.gray_4,
+    iconHoverColor: exports.Theme.colors.primary_10,
     //text
     textColor: exports.Theme.colors.text,
     // input

package/dist/cjs/components/Icons/Icon.js

@@ -8,8 +8,13 @@ const react_1 = __importDefault(require("react"));
 const Theme_1 = require("../../Theme/Theme");
 const Icon_styles_1 = require("./Icon.styles");
 const IconsPath_1 = require("./IconsPath");
-const Icon = ({ size = 24, name, right = false, left = false, color = Theme_1.Theme.colors.text, hoverColor = Theme_1.Theme.colors.primary_10, active = false, inverseMode = false, onClick, }) => {
-    return (react_1.default.createElement(Icon_styles_1.IconElement, { onClick: onClick, right: right, left: left, active: active, hoverColor: hoverColor, inverseMode: inverseMode },
+const Icon = ({ size = 24, name, right = false, left = false, hoverColor = Theme_1.mainTheme.iconHoverColor, active = false, inverseMode = false, onClick, isDisabled = false, color = isDisabled ? Theme_1.mainTheme.iconDisabledColor : Theme_1.mainTheme.iconColor, }) => {
+    const handleClick = () => {
+        if (!isDisabled && !!onClick) {
+            onClick();
+        }
+    };
+    return (react_1.default.createElement(Icon_styles_1.IconElement, { onClick: handleClick, right: right, left: left, active: active, hoverColor: hoverColor, inverseMode: inverseMode, isDisabled: isDisabled },
         react_1.default.createElement("svg", { width: size, height: size, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
             react_1.default.createElement("path", { d: IconsPath_1.iconsPath[name], fill: color }))));
 };

package/dist/cjs/components/Icons/Icon.styles.js

@@ -15,28 +15,35 @@ exports.IconElement = styled_components_1.default.div `
   margin-left: ${(p) => (p.right ? Theme_1.Theme.padding.m : '0')};
   margin-right: ${(p) => (p.left ? Theme_1.Theme.padding.m : '0')};
   padding: 4px;
+
   ${(p) => p.onClick !== undefined &&
     `
-    cursor:pointer;
+    cursor: ${(p) => (!p.isDisabled ? 'pointer' : 'not-allowed')};
     path {
-      fill:${(p) => (p.color ? p.color : Theme_1.Theme.colors.primary)};
-      }
-    &:hover{
-      cursor:pointer;
-      ${!p.inverseMode
-        ? `
-        background-color:${p.hoverColor};  
-      `
-        : `
-      path{
-        fill:${p.hoverColor};
-      }
-      `}
+      fill: ${(p) => (p.color ? p.color : Theme_1.Theme.colors.primary)};
+    }
+
+    ${!p.isDisabled &&
+        `
+      &:hover {
+        cursor: pointer;
+        ${!p.inverseMode
+            ? `
+          background-color: ${p.hoverColor};  
+        `
+            : `
+          path {
+            fill: ${p.hoverColor};
+          }
+        `}
       }
+    `}
   `}
 
   ${(p) => p.active &&
     `
-    background-color:${p.hoverColor};path {
-    }`}
+    background-color: ${p.hoverColor};
+    path {
+    }
+  `}
 `;

package/dist/esm/Theme/Theme.js

@@ -67,6 +67,10 @@ export const mainTheme = {
     buttonInverseHover: lighten(0.3, Theme.colors.primary),
     disabledBackground: Theme.colors.gray_4,
     disabledText: Theme.colors.gray_1,
+    //icon
+    iconColor: Theme.colors.text,
+    iconDisabledColor: Theme.colors.gray_4,
+    iconHoverColor: Theme.colors.primary_10,
     //text
     textColor: Theme.colors.text,
     // input

package/dist/esm/components/Icons/Icon.js

@@ -1,9 +1,14 @@
 import React from 'react';
-import { Theme } from '../../Theme/Theme';
+import { mainTheme } from '../../Theme/Theme';
 import { IconElement } from './Icon.styles';
 import { iconsPath } from './IconsPath';
-export const Icon = ({ size = 24, name, right = false, left = false, color = Theme.colors.text, hoverColor = Theme.colors.primary_10, active = false, inverseMode = false, onClick, }) => {
-    return (React.createElement(IconElement, { onClick: onClick, right: right, left: left, active: active, hoverColor: hoverColor, inverseMode: inverseMode },
+export const Icon = ({ size = 24, name, right = false, left = false, hoverColor = mainTheme.iconHoverColor, active = false, inverseMode = false, onClick, isDisabled = false, color = isDisabled ? mainTheme.iconDisabledColor : mainTheme.iconColor, }) => {
+    const handleClick = () => {
+        if (!isDisabled && !!onClick) {
+            onClick();
+        }
+    };
+    return (React.createElement(IconElement, { onClick: handleClick, right: right, left: left, active: active, hoverColor: hoverColor, inverseMode: inverseMode, isDisabled: isDisabled },
         React.createElement("svg", { width: size, height: size, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
             React.createElement("path", { d: iconsPath[name], fill: color }))));
 };

package/dist/esm/components/Icons/Icon.styles.js

@@ -9,28 +9,35 @@ export const IconElement = styled.div `
   margin-left: ${(p) => (p.right ? Theme.padding.m : '0')};
   margin-right: ${(p) => (p.left ? Theme.padding.m : '0')};
   padding: 4px;
+
   ${(p) => p.onClick !== undefined &&
     `
-    cursor:pointer;
+    cursor: ${(p) => (!p.isDisabled ? 'pointer' : 'not-allowed')};
     path {
-      fill:${(p) => (p.color ? p.color : Theme.colors.primary)};
-      }
-    &:hover{
-      cursor:pointer;
-      ${!p.inverseMode
-        ? `
-        background-color:${p.hoverColor};  
-      `
-        : `
-      path{
-        fill:${p.hoverColor};
-      }
-      `}
+      fill: ${(p) => (p.color ? p.color : Theme.colors.primary)};
+    }
+
+    ${!p.isDisabled &&
+        `
+      &:hover {
+        cursor: pointer;
+        ${!p.inverseMode
+            ? `
+          background-color: ${p.hoverColor};  
+        `
+            : `
+          path {
+            fill: ${p.hoverColor};
+          }
+        `}
       }
+    `}
   `}
 
   ${(p) => p.active &&
     `
-    background-color:${p.hoverColor};path {
-    }`}
+    background-color: ${p.hoverColor};
+    path {
+    }
+  `}
 `;

package/dist/types/Theme/Theme.d.ts

@@ -65,6 +65,9 @@ export declare const mainTheme: {
     buttonInverseHover: string;
     disabledBackground: string;
     disabledText: string;
+    iconColor: string;
+    iconDisabledColor: string;
+    iconHoverColor: string;
     textColor: string;
     inputDefaultBackground: string;
     inputDefaultBorder: string;

package/dist/types/components/Icons/Icon.d.ts

@@ -9,5 +9,6 @@ export interface IIconActionProps {
     onClick?: () => void;
     active?: boolean;
     inverseMode?: boolean;
+    isDisabled?: boolean;
 }
 export declare const Icon: FC<IIconActionProps>;

package/dist/types/components/Icons/Icon.styles.d.ts

@@ -5,6 +5,7 @@ interface IIconElementProps {
     hoverColor: string;
     active: boolean;
     inverseMode: boolean;
+    isDisabled: boolean;
 }
 export declare const IconElement: import("styled-components").StyledComponent<"div", any, IIconElementProps, never>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",