diginet-core-ui 1.4.65-beta.2 → 1.4.66-beta.1

package/assets/images/menu/dhr/MHRP75N0025.svg

@@ -0,0 +1,15 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2813_38)">
+<path d="M9.70007 26.7C9.70007 27.3 10.1001 27.8 10.7001 28V25.4C10.1001 25.5 9.70007 26 9.70007 26.7Z" fill="#FF8C00"/>
+<path d="M13.4001 31.5C13.3001 30.9 12.9001 30.4 12.4001 30.4V33C13.1001 32.7 13.5001 32.2 13.4001 31.5Z" fill="#FF8C00"/>
+<path d="M18.7001 38.3V22.3C17.7001 21.1 16.6001 20 15.2001 19.1C15.1001 19 14.9001 19 14.8001 19C14.0001 19 13.2001 19.1 12.4001 19.1C12.1001 19.1 11.9001 19.1 11.6001 19.1C11.3001 19.1 11.1001 19.1 10.8001 19.1C10.0001 19.1 9.20007 19.1 8.40007 19C8.30007 19 8.10007 19 8.00007 19.1C6.50007 20 5.30007 21.2 4.30007 22.6C2.40007 25 1.00007 27.7 0.300074 30.7C7.42078e-05 32.2 -0.199926 33.6 0.200074 35.1C0.600074 36.5 1.40007 37.5 2.70007 38C3.80007 38.5 7.00007 39 7.00007 39C8.20007 39 9.30007 39 10.5001 39C10.9001 39 11.2001 39 11.6001 39C11.9001 39 12.3001 39 12.7001 39C13.9001 39 15.0001 39 16.2001 39C16.1001 39 18.7001 38.4 18.7001 38.3ZM12.9001 28.4C14.3001 28.9 15.2001 30 15.3001 31.5C15.4001 33 14.4001 34.2 13.0001 34.6C12.4001 34.8 12.4001 34.8 12.4001 35.4V36.1H10.8001C10.8001 35.7 10.8001 35.4 10.8001 35C10.8001 34.8 10.7001 34.7 10.5001 34.6C9.20007 34.2 8.30007 33.4 7.90007 32C7.80007 31.7 7.80007 31.4 7.80007 31.1H9.80007C9.80007 31.8 10.1001 32.2 10.8001 32.5V30C10.7001 30 10.5001 29.9 10.3001 29.9C8.80007 29.4 7.80007 28.2 7.90007 26.7C7.90007 25.2 8.90007 24 10.3001 23.6C10.8001 23.5 10.8001 23.5 10.8001 23V22.1H12.4001C12.4001 22.5 12.4001 22.9 12.4001 23.2C12.4001 23.4 12.5001 23.5 12.7001 23.6C14.0001 24 14.9001 24.8 15.3001 26.1C15.5001 27 15.5001 27 14.6001 27H13.4001C13.4001 26.3 13.1001 25.8 12.4001 25.5V28.2C12.5001 28.3 12.7001 28.3 12.9001 28.4Z" fill="#FF8C00"/>
+<path d="M8.80007 17.7C8.60007 17.7 8.50007 17.6 8.40007 17.5C7.40007 16.1 6.40007 14.7 5.60007 13.2C5.30007 12.6 5.10007 12 4.90007 11.4C4.80007 11.2 4.90007 11 4.90007 10.8C4.90007 10.5 5.10007 10.3 5.50007 10.3C5.80007 10.3 6.10007 10.4 6.40007 10.5C6.90007 10.7 7.40007 10.9 7.90007 11.1C8.60007 11.4 9.30007 11.3 9.90007 10.8C10.1001 10.6 10.4001 10.4 10.7001 10.3C11.3001 9.9 11.9001 9.9 12.5001 10.3C12.8001 10.5 13.2001 10.7 13.5001 11C13.9001 11.3 14.4001 11.4 14.9001 11.3C15.5001 11.1 16.1001 10.9 16.7001 10.7C17.0001 10.6 17.3001 10.5 17.6001 10.5C18.0001 10.4 18.2001 10.6 18.2001 11C18.2001 11.4 18.1001 11.9 18.0001 12.3C17.6001 13.5 16.9001 14.5 16.2001 15.5C15.7001 16.2 15.2001 16.9 14.7001 17.6C14.6001 17.7 14.5001 17.8 14.4001 17.8C13.5001 17.7 9.70007 17.7 8.80007 17.7Z" fill="#FF8C00"/>
+<path d="M31.1 7.8C31 8.1 30.7 8.2 30.4 8.3H27.6V14.5L23.6 18.5C23.1 19 23 19.7 23.2 20.3C23.5 20.9 24.1 21.3 24.7 21.3H26.6V38.3C26.6 38.6 26.7 38.8 26.8 39H20.3C19.9 39 19.6 38.7 19.5 38.3V8.3H16.7C16.4 8.3 16.1 8.1 16 7.8C16 7.5 16.1 7.2 16.3 7L23.1 0.2C23.2 0.1 23.4 0 23.6 0C23.8 0 24 0.1 24.1 0.2L30.9 7C31.1 7.2 31.2 7.5 31.1 7.8Z" fill="#1CA261"/>
+<path d="M31.4598 12C31.6598 12 31.8598 12.1 31.9598 12.2L38.7598 19C38.9598 19.2 39.0598 19.5 38.9598 19.8C38.8598 20.1 38.5598 20.2 38.2598 20.3H35.4598V38.3C35.4598 38.7 35.1598 39 34.7598 39H28.2598C27.8598 39 27.5598 38.7 27.5598 38.3V20.3H24.7598C24.4598 20.3 24.1598 20.1 24.0598 19.8C23.9598 19.5 23.9598 19.2 24.2598 19L31.0598 12.2C31.0598 12.1 31.2598 12 31.4598 12Z" fill="#FF4444"/>
+</g>
+<defs>
+<clipPath id="clip0_2813_38">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/components/button/icon.js

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { CircularProgress, Icon } from "./..";
+import { CircularProgress, Icon, Tooltip } from "./..";
 import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
@@ -78,7 +78,8 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     style,
     viewBox,
     viewType,
-    width
+    width,
+    title
   } = props;
   const ref = useRef(null);
   const rippleRef = useRef(null);
@@ -109,7 +110,10 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     return currentRef;
   });
   return useMemo(() => {
-    return jsx("button", {
+    return jsx(Tooltip, {
+      title: title,
+      disableInteractive: !title
+    }, jsx("button", {
       css: [_ButtonRootCSS, _ButtonSizeCSS],
       ref: ref,
       id: id,
@@ -129,8 +133,8 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
       ref: rippleRef,
       color: getRippleColor(colorProp, viewType, colors),
       circular: circular
-    }));
-  }, [children, circular, className, colorHover, colorProp, disabled, height, id, loading, name, onClick, size, style, viewBox, viewType, width, theme]);
+    })));
+  }, [children, circular, className, colorHover, colorProp, disabled, height, id, loading, name, onClick, size, style, viewBox, viewType, width, theme, title]);
 }));
 const ButtonIconCSS = iconSize => css`
     ${displayFlex};
@@ -287,18 +291,6 @@ const ButtonRootCSS = (circular, colorHover, color, name, isColorDefault, viewTy
         filter: brightness(1);
     }
 `;
-
-// ButtonIcon.defaultProps = {
-//     circular: false,
-//     className: '',
-//     color: 'default',
-//     colorHover: 'system/active',
-//     disabled: false,
-//     size: 'medium',
-//     viewBox: true,
-//     viewType: 'outlined',
-// };
-
 ButtonIcon.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
@@ -314,20 +306,22 @@ ButtonIcon.propTypes = {
   disabled: PropTypes.bool,
   /** Height oof the component. */
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /** Title of hover tooltip */
+  title: PropTypes.string,
   /** If `true`, the loading indicator is shown. */
   loading: PropTypes.bool,
   /** Callback fired when the component is clicked. */
   onClick: PropTypes.func,
   /** Name of [icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic). */
   name: PropTypes.string,
-  /**
-   * 	The size of the component.
-   *
-   * * tiny (button 24px, icon 16px)
-   * * small (button 32px, icon 20px)
-   * * medium (button 40px, icon 24px)
-   * * large (button 48px, icon 32px)
-   * * giant (button 56px, icon 40px)
+  /**
+   * 	The size of the component.
+   *
+   * * tiny (button 24px, icon 16px)
+   * * small (button 32px, icon 20px)
+   * * medium (button 40px, icon 24px)
+   * * large (button 48px, icon 32px)
+   * * giant (button 56px, icon 40px)
    * */
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant', 'extraGiant']),
   /** Style inline of component. */
@@ -338,19 +332,19 @@ ButtonIcon.propTypes = {
   viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'ghost']),
   /** Width of the component. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
 };
 export { ButtonIcon };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.4.65-beta.2",
+  "version": "1.4.66-beta.1",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",

package/readme.md

@@ -41,6 +41,12 @@ npm test
 ```
 
 ## Changelog
+
+## 1.4.66
+- \[Added\]: Icon – Add Icon Import
+- \[Added\]: Icon – Add IconMenu W109F1000, W110F1000
+- \[Added\]: ButtonIcon – Use the title prop to show text on hover for the ButtonIcon
+
 ## 1.4.65
 - \[Added\]: Icon – Add Icon OpenNew
 - \[Added\]: Icon – Add IconMenu WEO53TR001, WEO53APP01