@xaypay/tui 0.0.53 → 0.0.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.53",
+  "version": "0.0.55",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -8,7 +8,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "build-lib": "rollup -c",
+    "build-lib": "rollup --config rollup.config.js",
     "svgr": "svgr --icon --title-prop --replace-attr-values '#1D1D1D=currentColor' -d src/components/icon -- src/assets"
   },
   "author": "",
@@ -21,8 +21,9 @@
     "@storybook/addon-essentials": "^6.5.10",
     "@storybook/addon-interactions": "^6.5.10",
     "@storybook/addon-links": "^6.5.10",
-    "@storybook/builder-webpack4": "^6.5.10",
-    "@storybook/manager-webpack4": "^6.5.10",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/preset-create-react-app": "^4.1.2",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^6.5.10",
     "@storybook/testing-library": "^0.0.13",
@@ -57,5 +58,6 @@
   "dependencies": {
     "lodash": "^4.17.21",
     "react-icons": "^4.7.1"
-  }
+  },
+  "bin": "./cli-command.js"
 }

package/src/assets/icons/tooltip.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0C3.58214 0 0 3.58214 0 8C0 12.4179 3.58214 16 8 16C12.4179 16 16 12.4179 16 8C16 3.58214 12.4179 0 8 0ZM8.57143 11.8571C8.57143 11.9357 8.50714 12 8.42857 12H7.57143C7.49286 12 7.42857 11.9357 7.42857 11.8571V7C7.42857 6.92143 7.49286 6.85714 7.57143 6.85714H8.42857C8.50714 6.85714 8.57143 6.92143 8.57143 7V11.8571ZM8 5.71429C7.7757 5.70971 7.56213 5.61739 7.40513 5.45714C7.24812 5.2969 7.16018 5.08149 7.16018 4.85714C7.16018 4.6328 7.24812 4.41739 7.40513 4.25714C7.56213 4.0969 7.7757 4.00458 8 4C8.2243 4.00458 8.43787 4.0969 8.59488 4.25714C8.75189 4.41739 8.83982 4.6328 8.83982 4.85714C8.83982 5.08149 8.75189 5.2969 8.59488 5.45714C8.43787 5.61739 8.2243 5.70971 8 5.71429Z" fill="#D1D1D1"/>
+</svg>

package/src/components/button/index.js

@@ -4,27 +4,30 @@ import classnames from 'classnames';
 import { compereConfigs } from './../../utils';
 
 export const Button = ({
+  size,
   type,
+  font,
   color,
   label,
   width,
   height,
   cursor,
+  weight,
   border,
+  radius,
   outline,
   padding,
+  bgColor,
   onClick,
-  fontSize,
   disabled,
   className,
   boxSizing,
   transition,
   contentWidth,
-  borderRadius,
-  backgroundColor,
-  disabledThemeColor,
-  disabledThemeBgColor,
-  disabledThemeLineColor,
+  disabledColor,
+  textTransform,
+  disabledBgColor,
+  disabledLineColor,
   ...props
 }) => {
 
@@ -52,27 +55,30 @@ export const Button = ({
   return (
     <button
       style={{
+        fontSize: size ? size : configStyles.BUTTON.size,
+        fontFamily: font ? font : configStyles.BUTTON.font,
         height: height ? height : configStyles.BUTTON.height,
+        fontWeight: weight ? weight : configStyles.BUTTON.weight,
         padding: padding ? padding : configStyles.BUTTON.padding,
-        fontSize: fontSize ? fontSize : configStyles.BUTTON.fontSize,
+        borderRadius: radius ? radius : configStyles.BUTTON.radius,
         boxSizing: boxSizing ? boxSizing : configStyles.BUTTON.boxSizing,
         transition: transition ? transition : configStyles.BUTTON.transition,
         border: outline ? 'none' : border ? border : configStyles.BUTTON.border,
         width: contentWidth ? 'auto' : width ? width : configStyles.BUTTON.width,
-        borderRadius: borderRadius ? borderRadius : configStyles.BUTTON.borderRadius,
         cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.BUTTON.cursor,
+        textTransform: textTransform ? textTransform : configStyles.BUTTON.textTransform,
         backgroundColor:
-          (outline || !outline) && disabled ? disabledThemeBgColor ? disabledThemeBgColor : configStyles.BUTTON.disabledThemeBgColor :
-          outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.bgColor : '#ffffff' : backgroundColor ? backgroundColor : configStyles.BUTTON.bgColor,
+          (outline || !outline) && disabled ? disabledBgColor ? disabledBgColor : configStyles.BUTTON.disabledBgColor :
+          outline && !disabled ? isHover ? bgColor ? bgColor : configStyles.BUTTON.bgColor : '#ffffff' : bgColor ? bgColor : configStyles.BUTTON.bgColor,
         boxShadow:
           outline ?
             disabled ?
-            `inset 0 0 0 2px ${disabledThemeLineColor ? disabledThemeLineColor : configStyles.BUTTON.disabledThemeLineColor}` :
-            `inset 0 0 0 2px ${backgroundColor ? backgroundColor : configStyles.BUTTON.bgColor}` :
+            `inset 0 0 0 2px ${disabledLineColor ? disabledLineColor : configStyles.BUTTON.disabledLineColor}` :
+            `inset 0 0 0 2px ${bgColor ? bgColor : configStyles.BUTTON.bgColor}` :
           'none',
         color:          
-          (outline || !outline) && disabled ? disabledThemeColor ? disabledThemeColor : configStyles.BUTTON.disabledThemeColor :
-          outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : backgroundColor ? backgroundColor : configStyles.BUTTON.bgColor : color ? color : configStyles.BUTTON.color
+          (outline || !outline) && disabled ? disabledColor ? disabledColor : configStyles.BUTTON.disabledColor :
+          outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : bgColor ? bgColor : configStyles.BUTTON.bgColor : color ? color : configStyles.BUTTON.color
       }}
       type={type ? type : configStyles.BUTTON.type}
       disabled={disabled ? disabled : configStyles.BUTTON.disabled}
@@ -89,24 +95,27 @@ export const Button = ({
 
 Button.propTypes = {
   type: PropTypes.string,
+  size: PropTypes.string,
+  font: PropTypes.string,
   color: PropTypes.string,
   width: PropTypes.string,
   outline: PropTypes.bool,
   onClick: PropTypes.func,
+  weight: PropTypes.string,
   height: PropTypes.string,
   cursor: PropTypes.string,
   border: PropTypes.string,
   disabled: PropTypes.bool,
+  radius: PropTypes.string,
   padding: PropTypes.string,
-  fontSize: PropTypes.string,
+  bgColor: PropTypes.string,
   boxSizing: PropTypes.string,
   className: PropTypes.string,
   transition: PropTypes.string,
   contentWidth: PropTypes.bool,
-  borderRadius: PropTypes.string,
-  backgroundColor: PropTypes.string,
+  textTransform: PropTypes.string,
+  disabledColor: PropTypes.string,
+  disabledBgColor: PropTypes.string,
   label: PropTypes.string.isRequired,
-  disabledThemeColor: PropTypes.string,
-  disabledThemeBgColor: PropTypes.string,
-  disabledThemeLineColor: PropTypes.string,
+  disabledLineColor: PropTypes.string,
 };

package/src/components/input/index.js

@@ -3,16 +3,19 @@ import PropTypes from "prop-types";
 import classnames from "classnames";
 import { Typography } from "../typography";
 import { compereConfigs } from "./../../utils";
+import styled, { keyframes, css } from 'styled-components';
 
 import styles from "./input.module.css";
 
 export const InputTypes = {
+    TEL: 'tel',
     TEXT: "text",
     PASSWORD: "password",
 };
 
 export const Input = ({
     type,
+    size,
     name,
     color,
     label,
@@ -20,25 +23,39 @@ export const Input = ({
     width,
     height,
     radius,
-    border,
     padding,
     tooltip,
-    bgColor,
     leftIcon,
-    fontSize,
     required,
     disabled,
     onChange,
+    transform,
     iconWidth,
     rightIcon,
     className,
     boxSizing,
     boxShadow,
-    errorMesage,
-    borderColor,
+    errorLeft,
+    errorSize,
+    labelSize,
+    labelColor,
+    errorColor,
     placeholder,
+    errorZindex,
+    errorBottom,
+    labelWeight,
+    errorMessage,
     autoComplete,
+    labelDisplay,
+    errorPosition,
     boxShadowHover,
+    errorClassName,
+    errorAnimation,
+    errorLineHeight,
+    labelLineHeight,
+    backgroundColor,
+    labelMarginBottom,
+    errorAnimationDuration,
     ...props
 }) => {
     const [show, setShow] = useState(false);
@@ -48,7 +65,7 @@ export const Input = ({
     const random = Math.floor((Math.random() * 1000) + 1);
     const configStyles = compereConfigs();
     const classProps = classnames(
-        className
+        className ? className : configStyles.INPUT.className
     );
 
     const handleChange = (event) => {
@@ -63,10 +80,39 @@ export const Input = ({
         setIsHover(false);
     };
     
+    const errorShow = keyframes`
+        100% {
+            bottom: '-20px';
+            transform: scale3d(1,1,1);
+            -webkit-transform: scale3d(1,1,1);
+            -moz-transform: scale3d(1,1,1);
+            -ms-transform: scale3d(1,1,1);
+            -o-transform: scale3d(1,1,1);
+        }
+    `;
+
+    const animation = _ => css`
+        ${errorShow} ${errorAnimationDuration ? errorAnimationDuration : configStyles.INPUT.errorAnimationDuration} forwards
+    `;
+
+    const P = styled.p`
+        animation: ${errorAnimation ? animation : 'none'};
+    `;
+    
     return (
         <div className={`${styles["input-wrap"]}`}>
             {
-                label ? <label className={`${styles["input-title"]}`}>
+                label ? <label
+                    className={`${styles["input-title"]}`}
+                    style={{
+                        color: labelColor ? labelColor : configStyles.INPUT.labelColor,
+                        fontSize: labelSize ? labelSize : configStyles.INPUT.labelSize,
+                        display: labelDisplay ? labelDisplay : configStyles.INPUT.labelDisplay,
+                        fontWeight: labelWeight ? labelWeight : configStyles.INPUT.labelWeight,
+                        lineHeight: labelLineHeight ? labelLineHeight : configStyles.INPUT.labelLineHeight,
+                        marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.INPUT.labelMarginBottom
+                    }}
+                >
                     {label} {required && <sup style={{ color: "#ee0000" }}>*</sup>}
                 </label>
                 : ''
@@ -75,30 +121,49 @@ export const Input = ({
                 className={`${styles["input-content"]}`}
                 style={{
                     borderRadius: radius ? radius : configStyles.INPUT.radius,
-                    boxShadow: isHover ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
+                    boxShadow: errorMessage ? errorColor ?  `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.INPUT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
                 }}
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}
             >
                 {
-                    leftIcon && leftIcon.length > 0 ?
-                    <div
-                        onMouseUp={type === 'password' ? _ => setShow(false) : _ => _}
-                        onMouseDown={type === 'password' ? _ => setShow(true) : _ => _}
-                        onMouseOut={type === 'password' ? _ => setShow(false) : _ => _}
-                        style={{
-                            cursor: type === 'password' ? 'pointer' : 'default',
-                            height: height ? height : configStyles.INPUT.height,
-                            padding: padding ? padding : configStyles.INPUT.padding,
-                            width: iconWidth ? iconWidth : configStyles.INPUT.iconWidth,
-                            boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
-                            borderTopLeftRadius: radius ? radius : configStyles.INPUT.radius,
-                            borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
-                            backgroundColor: disabled ? '#FBFBFB' : bgColor ? bgColor : configStyles.INPUT.bgColor,
-                        }}
-                    >
-                        {type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]}
-                    </div> : ''
+                    leftIcon && leftIcon.length > 0 && type != 'tel' ?
+                        <div
+                            onMouseUp={type === 'password' ? _ => setShow(false) : _ => _}
+                            onMouseDown={type === 'password' ? _ => setShow(true) : _ => _}
+                            onMouseOut={type === 'password' ? _ => setShow(false) : _ => _}
+                            style={{
+                                cursor: type === 'password' ? 'pointer' : 'default',
+                                height: height ? height : configStyles.INPUT.height,
+                                padding: padding ? padding : configStyles.INPUT.padding,
+                                width: iconWidth ? iconWidth : configStyles.INPUT.iconWidth,
+                                boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
+                                borderTopLeftRadius: radius ? radius : configStyles.INPUT.radius,
+                                borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
+                                backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,
+                            }}
+                        >
+                            {type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]}
+                        </div> : ''
+                }
+                {
+                    type === 'tel' ?
+                        <div
+                            style={{
+                                pointerEvents: disabled ? 'none' : 'auto',
+                                fontSize: size ? size : configStyles.INPUT.size,
+                                height: height ? height : configStyles.INPUT.height,
+                                padding: padding ? padding : configStyles.INPUT.padding,
+                                boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
+                                borderTopLeftRadius: radius ? radius : configStyles.INPUT.radius,
+                                borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
+                                backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,
+                                color: errorMessage  && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
+                            }}
+                        >
+                            +374
+                        </div>
+                    : ''
                 }
                 <input
                     {...props}
@@ -115,13 +180,13 @@ export const Input = ({
                         outline: 'none',
                         pointerEvents: disabled ? 'none' : 'auto',
                         width: width ? width : configStyles.INPUT.width,
+                        fontSize: size ? size : configStyles.INPUT.size,
                         height: height ? height : configStyles.INPUT.height,
                         padding: padding ? padding : configStyles.INPUT.padding,
                         borderRadius: radius ? radius : configStyles.INPUT.radius,
-                        fontSize: fontSize ? fontSize : configStyles.INPUT.fontSize,
                         boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
-                        color: errorMesage ? 'rgba(238, 0, 0, 1)' : color ? color : configStyles.INPUT.color,
-                        backgroundColor: disabled ? '#FBFBFB' : bgColor ? bgColor : configStyles.INPUT.bgColor,                       
+                        backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,                       
+                        color: errorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
                     }}
                 />
                 {
@@ -132,14 +197,13 @@ export const Input = ({
                         onMouseOut={type === 'password' ? _ => setShow(false) : _ => _}
                         style={{
                             cursor: type === 'password' ? 'pointer' : 'default',
-                            border: border ? border : configStyles.INPUT.border,
                             height: height ? height : configStyles.INPUT.height,
                             padding: padding ? padding : configStyles.INPUT.padding,
                             width: iconWidth ? iconWidth : configStyles.INPUT.iconWidth,
                             boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
                             borderTopRightRadius: radius ? radius : configStyles.INPUT.radius,
                             borderBottomRightRadius: radius ? radius : configStyles.INPUT.radius,
-                            backgroundColor: disabled ? '#FBFBFB' : bgColor ? bgColor : configStyles.INPUT.bgColor,
+                            backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,
                         }}
                     >
                         {type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]}
@@ -152,7 +216,25 @@ export const Input = ({
                 </Typography> : null
             }
             {tooltipStatus ? <p>{tooltip}</p> : null}
-            {errorMesage ? <span className={styles.inputErrorMessages}>{errorMesage}</span> : ""}
+            {
+                errorMessage ?
+                    <P
+                        style={{
+                            left: errorLeft ? errorLeft : configStyles.INPUT.errorLeft,
+                            color: errorColor ? errorColor : configStyles.INPUT.errorColor,
+                            fontSize: errorSize ? errorSize : configStyles.INPUT.errorSize,
+                            bottom: errorBottom ? errorBottom : configStyles.INPUT.errorBottom,
+                            zIndex: errorZindex ? errorZindex : configStyles.INPUT.errorZindex,
+                            position: errorPosition ? errorPosition : configStyles.INPUT.errorPosition,
+                            lineHeight: errorLineHeight ? errorLineHeight : configStyles.INPUT.errorLineHeight,
+                            transform: !errorAnimation ? 'scale3d(1,1,1)' : transform ? transform : configStyles.INPUT.transform,
+                        }}
+                        className={errorClassName ? errorClassName : configStyles.INPUT.errorClassName}
+                    >
+                        {errorMessage}
+                    </P> 
+                    : ''
+            }
         </div>
     );
 };
@@ -168,17 +250,35 @@ Input.propTypes = {
     disabled: PropTypes.bool,
     height: PropTypes.string,
     radius: PropTypes.string,
-    bgColor: PropTypes.string,
+    padding: PropTypes.string,
     fontSize: PropTypes.string,
     tooltip: PropTypes.element,
+    transform: PropTypes.string,
     className: PropTypes.string,
     iconWidth: PropTypes.string,
     boxSizing: PropTypes.string,
     boxShadow: PropTypes.string,
+    errorSize: PropTypes.string,
+    errorLeft: PropTypes.string,
+    labelSize: PropTypes.string,
+    errorColor: PropTypes.string,
+    labelColor: PropTypes.string,
     placeholder: PropTypes.string,
-    errorMesage: PropTypes.string,
+    errorZindex: PropTypes.string,
+    errorBottom: PropTypes.string,
+    labelWeight: PropTypes.string,
+    errorMessage: PropTypes.string,
     autoComplete: PropTypes.string,
+    errorAnimation: PropTypes.bool,
+    labelDisplay: PropTypes.string,
+    errorPosition: PropTypes.string,
     boxShadowHover: PropTypes.string,
+    errorClassName: PropTypes.string,
+    backgroundColor: PropTypes.string,
+    errorLineHeight: PropTypes.string,
+    labelLineHeight: PropTypes.string,
+    labelMarginBottom: PropTypes.string,
+    errorAnimationDuration: PropTypes.string,
     leftIcon: PropTypes.arrayOf(PropTypes.element),
     rightIcon: PropTypes.arrayOf(PropTypes.element),
     type: PropTypes.oneOf(Object.values(InputTypes)),

package/src/components/input/input.module.css

@@ -1,5 +1,6 @@
 .input-wrap {
     width: 100%;
+    position: relative;
 }
 
 .input-content {
@@ -7,24 +8,25 @@
     width: 100%;
 }
 
-.input-title {
-    display: block;
-    font-size: 16px;
-    color: #3c393e;
-    font-weight: 500;
-    line-height: 22px;
-    margin-bottom: 6px;
-}
-
-.inputErrorMessages {
-    font-size: 14px;
-    line-height: 19px;
-    color: rgba(238, 0, 0, 1);
-}
-
 input:-webkit-autofill,
 input:-webkit-autofill:hover, 
 input:-webkit-autofill:focus, 
 input:-webkit-autofill:active  {
     background-color: inherit !important;
 }
+
+.error-message-show {
+    animation-name: error-show;
+    animation-fill-mode: forwards;
+}
+
+@keyframes error-show {
+    100% {
+        bottom: -20px;
+        transform: scale3d(1,1,1);
+        -webkit-transform: scale3d(1,1,1);
+        -moz-transform: scale3d(1,1,1);
+        -ms-transform: scale3d(1,1,1);
+        -o-transform: scale3d(1,1,1);
+    }
+}

package/src/components/tooltip/index.js

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { compereConfigs } from "./../../utils";
 
+// import ReactInfoIcon from './../../assets/icons/tooltip.svg';
+
 import styles from "./tooltip.module.css";
 
 export const Tooltip = ({
@@ -10,6 +12,7 @@ export const Tooltip = ({
     text,
     width,
     color,
+    tIcon,
     height,
     bgColor,
     fontSize,
@@ -55,41 +58,47 @@ export const Tooltip = ({
                 backgroundColor: bgColor ? bgColor : configStyles.TOOLTIP.bgColor,
             }}
         >
-            <div
-                ref={tooltipRef}
-                className={classProps}
-                style={{
-                    backgroundColor: tBgColor ? tBgColor : configStyles.TOOLTIP.tBgColor,
-                    borderRadius: tBorderRadius ? tBorderRadius : configStyles.TOOLTIP.tBorderRadius,
-                    top: type === 'top' ? `calc(-${tooltipHeight + 7}px)` : type === 'bottom' ? 'calc(100% + 7px)' : type === 'left' || type === 'right' ? `calc(50% - ${tooltipHeight / 2}px)` : '0px',
-                    left: type === 'top' || type === 'bottom' ? `calc(50% - ${tooltipWidth / 2}px)` : type === 'left' ? `-${tooltipWidth + 7}px` : type === 'right' ? 'calc(100% + 7px)' : '0px'
-                }}
-            >
+            {
+                showTooltip ?
                 <div
-                    className={`${styles['tooltip-rel']}`}
+                    ref={tooltipRef}
+                    className={classProps}
+                    style={{
+                        backgroundColor: tBgColor ? tBgColor : configStyles.TOOLTIP.tBgColor,
+                        borderRadius: tBorderRadius ? tBorderRadius : configStyles.TOOLTIP.tBorderRadius,
+                        top: type === 'top' ? `calc(-${tooltipHeight + 7}px)` : type === 'bottom' ? 'calc(100% + 7px)' : type === 'left' || type === 'right' ? `calc(50% - ${tooltipHeight / 2}px)` : '0px',
+                        left: type === 'top' || type === 'bottom' ? `calc(50% - ${tooltipWidth / 2}px)` : type === 'left' ? `-${tooltipWidth + 7}px` : type === 'right' ? 'calc(100% + 7px)' : '0px'
+                    }}
                 >
                     <div
-                        className={`${styles['tooltip-decor']}`}
-                        style={{
-                            backgroundColor: tBgColor ? tBgColor : configStyles.TOOLTIP.bgColor,
-                            left: type === 'top' || type === 'bottom' ? 'calc(50% - 5px)' : type === 'right' ? '-15px' : type === 'left' ? 'calc(100% + 5px)' : '0px',
-                            top: type === 'top' ? 'calc(100% + 5px)' : type === 'bottom' ? '-15px' : type === 'right' || type === 'left' ? 'calc(50% - 5px)' : '0px'
-                        }}
-                    ></div>
-                    <p
-                        style={{
-                            color: color ? color : configStyles.TOOLTIP.color,
-                            fontSize: fontSize ? fontSize : configStyles.TOOLTIP.fontSize,
-                            lineHeight: fontSize ? fontSize : configStyles.TOOLTIP.fontSize,
-                            fontFamily: fontFamily ? fontFamily : configStyles.TOOLTIP.fontFamily
-                        }}
+                        className={`${styles['tooltip-rel']}`}
                     >
-                        { text }
-                    </p>
+                        <div
+                            className={`${styles['tooltip-decor']}`}
+                            style={{
+                                backgroundColor: tBgColor ? tBgColor : configStyles.TOOLTIP.bgColor,
+                                left: type === 'top' || type === 'bottom' ? 'calc(50% - 5px)' : type === 'right' ? '-15px' : type === 'left' ? 'calc(100% + 5px)' : '0px',
+                                top: type === 'top' ? 'calc(100% + 5px)' : type === 'bottom' ? '-15px' : type === 'right' || type === 'left' ? 'calc(50% - 5px)' : '0px'
+                            }}
+                        ></div>
+                        <p
+                            style={{
+                                color: color ? color : configStyles.TOOLTIP.color,
+                                fontSize: fontSize ? fontSize : configStyles.TOOLTIP.fontSize,
+                                lineHeight: fontSize ? fontSize : configStyles.TOOLTIP.fontSize,
+                                fontFamily: fontFamily ? fontFamily : configStyles.TOOLTIP.fontFamily
+                            }}
+                        >
+                            { text }
+                        </p>
+                    </div>
                 </div>
+                : ''
+            }
+            
+            <div style={{cursor: 'pointer'}} onClick={handleShow}>
+                {/* {tIcon ? tIcon : <img src={ReactInfoIcon} alt="ReactInfoIcon" />} */}
             </div>
-
-
         </div>
     );
 };
@@ -97,6 +106,7 @@ export const Tooltip = ({
 Tooltip.propTypes = {
     width: PropTypes.string,
     color: PropTypes.string,
+    tIcon: PropTypes.element,
     height: PropTypes.string,
     bgColor: PropTypes.string,
     tBgColor: PropTypes.string,

package/src/components/tooltip/tooltip.module.css

@@ -1,3 +1,10 @@
+.tooltip-block {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 .tooltip {
     position: absolute;
     z-index: 1;

package/src/components/tooltip/tooltip.stories.js

@@ -7,15 +7,14 @@ export default {
     title: "Components/Tooltip",
 };
 
-export const Template = (args) => {
+const Template = (args) => {
     return (
         <div
             style={{
-                width: '80px',
-                height: '100px',
-                position: 'relative',
-                backgroundColor: 'red',
-                margin: '100px auto'
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: 'calc(100vh - 32px)'
             }}
         >
             <Tooltip {...args} />
@@ -23,4 +22,9 @@ export const Template = (args) => {
     );
 };
 
+export const Default = Template.bind({});
+Default.args = {
+    type: 'bottom',
+    text: 'new tooltip'
+}