diginet-core-ui 1.3.56 → 1.3.58

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

@@ -0,0 +1,13 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.85 17.94V9.33C30.85 9.12 30.76 8.9 30.62 8.74L22.1 0.23C21.93 0.09 21.72 0 21.51 0H6.6C4.97 0 3.63 1.33 3.63 2.95V3.16H2.95C1.33 3.16 0 4.49 0 6.12V36.04C0 37.66 1.33 39 2.95 39H24.26C25.89 39 27.21 37.66 27.21 36.04V35.83H27.89C29.53 35.83 30.85 34.5 30.85 32.87V31.4H29.19V32.87C29.19 33.59 28.61 34.17 27.89 34.17H6.6C5.89 34.17 5.3 33.59 5.3 32.87V2.95C5.3 2.24 5.89 1.66 6.6 1.66H20.67V7.2C20.67 7.52 20.72 7.83 20.82 8.12C21.11 9.03 21.83 9.74 22.74 10.04H22.75C23.03 10.12 23.33 10.17 23.63 10.17H27.43L28.95 10.16H29.19V17.94H30.85ZM6.6 35.83H25.55V36.04C25.55 36.75 24.97 37.33 24.26 37.33H2.95C2.25 37.33 1.67 36.75 1.67 36.04V6.12C1.67 5.4 2.25 4.82 2.95 4.82H3.63V32.87C3.63 34.5 4.97 35.83 6.6 35.83Z" fill="#2680EB"/>
+<path d="M25.3298 22.8899L24.6498 25.2699H26.0398L25.3598 22.8899H25.3298Z" fill="#FF8C00"/>
+<path d="M37.0798 18.9399H16.1998C15.1398 18.9399 14.2798 19.7999 14.2798 20.8599V28.4799C14.2798 29.5399 15.1398 30.3999 16.1998 30.3999H37.0798C38.1398 30.3999 38.9998 29.5399 38.9998 28.4799V20.8599C38.9998 19.7999 38.1398 18.9399 37.0798 18.9399ZM20.3798 27.7499L19.3298 25.5899H18.5398V27.7499H16.9898V21.5799H19.5998C21.1198 21.5799 21.9398 22.3399 21.9398 23.6099C21.9398 24.3699 21.5598 25.0599 20.8998 25.3499L22.1198 27.7399H20.3798V27.7499ZM26.7298 27.7499L26.3498 26.3999H24.3598L23.9698 27.7499H22.3898L24.4398 21.5799H26.3398L28.3898 27.7499H26.7298ZM34.6898 27.7499H33.2298L32.1998 23.8999H32.1698L31.1398 27.7499H29.6798L28.0898 21.5799H29.6898L30.5098 25.7499H30.5398L31.5598 21.5799H32.7998L33.8198 25.7499H33.8498L34.6698 21.5799H36.2698L34.6898 27.7499Z" fill="#FF8C00"/>
+<path d="M19.4498 22.7699H18.5498V24.5199H19.4598C20.0298 24.5199 20.3698 24.1799 20.3698 23.6499C20.3598 23.1199 19.9998 22.7699 19.4498 22.7699Z" fill="#FF8C00"/>
+<path d="M7.49984 20.99C7.00984 20.99 6.60984 21.39 6.60984 21.88C6.60984 22.37 7.00984 22.77 7.49984 22.77H11.9498C12.4398 22.77 12.8398 22.37 12.8398 21.88C12.8398 21.39 12.4398 20.99 11.9498 20.99H7.49984Z" fill="#2680EB"/>
+<path d="M7.47984 26.56C6.98984 26.56 6.58984 26.96 6.58984 27.45C6.58984 27.94 6.98984 28.34 7.47984 28.34H11.9298C12.4198 28.34 12.8198 27.94 12.8198 27.45C12.8198 26.96 12.4198 26.56 11.9298 26.56H7.47984Z" fill="#2680EB"/>
+<path d="M13.5401 9.06006C13.5401 10.1301 13.5401 11.2101 13.5401 12.2801C13.5401 12.8201 13.3601 13.0101 12.8301 13.0101C12.3901 13.0101 11.9501 13.0201 11.5101 13.0101C11.0701 13.0001 10.8701 12.7901 10.8701 12.3401C10.8701 10.1501 10.8701 7.96006 10.8701 5.77006C10.8701 5.25006 11.0601 5.06006 11.5601 5.06006C12.0001 5.06006 12.4401 5.06006 12.8801 5.06006C13.3501 5.07006 13.5401 5.25006 13.5401 5.74006C13.5401 6.85006 13.5401 7.95006 13.5401 9.06006Z" fill="#2680EB"/>
+<path d="M17.5501 9.49006C17.5501 10.4401 17.5501 11.4001 17.5501 12.3501C17.5501 12.8001 17.3601 13.0001 16.9101 13.0101C16.4501 13.0201 15.9901 13.0201 15.5301 13.0101C15.1001 13.0001 14.9001 12.7901 14.9001 12.3701C14.9001 10.4701 14.9001 8.58006 14.9001 6.68006C14.9001 6.17006 15.0801 6.00006 15.5701 5.99006C16.0201 5.99006 16.4701 5.99006 16.9201 5.99006C17.3501 5.99006 17.5501 6.19006 17.5501 6.62006C17.5501 7.58006 17.5401 8.54006 17.5501 9.49006Z" fill="#2680EB"/>
+<path d="M6.81006 10.2501C6.81006 9.55006 6.81006 8.84006 6.81006 8.14006C6.81006 7.65006 6.98006 7.48006 7.47006 7.47006C7.94006 7.46006 8.41006 7.46006 8.88006 7.47006C9.26006 7.48006 9.45006 7.67006 9.46006 8.06006C9.47006 9.51006 9.47006 10.9701 9.46006 12.4201C9.46006 12.7801 9.27006 13.0001 8.91006 13.0101C8.40006 13.0301 7.88006 13.0301 7.37006 13.0101C7.01006 13.0001 6.81006 12.7701 6.81006 12.4001C6.81006 11.6801 6.81006 10.9701 6.81006 10.2501Z" fill="#2680EB"/>
+<path d="M20.2401 10.5001C20.5001 10.5001 20.7501 10.4901 21.0101 10.5001C21.3501 10.5201 21.5501 10.7101 21.5601 11.0601C21.5801 11.5301 21.5801 11.9901 21.5601 12.4601C21.5501 12.7901 21.3501 12.9901 21.0301 13.0001C20.5101 13.0201 19.9801 13.0201 19.4601 13.0001C19.1401 12.9901 18.9101 12.7501 18.9001 12.4001C18.8901 11.9601 18.8901 11.5101 18.9001 11.0701C18.9101 10.7201 19.1201 10.5101 19.4701 10.5001C19.7301 10.4901 19.9801 10.5001 20.2401 10.5001Z" fill="#2680EB"/>
+<path d="M21.0801 15.8601H7.30006C7.03006 15.8601 6.81006 15.6401 6.81006 15.3701C6.81006 15.1001 7.03006 14.8801 7.30006 14.8801H21.0801C21.3501 14.8801 21.5701 15.1001 21.5701 15.3701C21.5701 15.6401 21.3501 15.8601 21.0801 15.8601Z" fill="#2680EB"/>
+</svg>

package/components/alert/index.js

@@ -9,26 +9,26 @@ import { color as colors } from '../../styles/colors';
 import ButtonIcon from '../button/icon';
 import Icon from '../../icons';
 import { hexToRGBA } from '../../styles/color-helper';
-import { typography } from '../../styles/typography';
 import { alignCenter, border, borderBox, borderRadius4px, breakWord, displayBlock, flexRow, justifyStart, positionRelative, userSelectNone } from '../../styles/general';
-import { useTheme } from '../../theme';
+import theme from '../../theme/settings';
 const {
-  heading3,
-  heading4,
-  heading5,
-  paragraph1,
-  paragraph2,
-  paragraph3
-} = typography;
-const {
-  system: {
-    rest,
-    white
-  }
-} = colors;
-const {
-  zIndex
-} = useTheme();
+  colors: {
+    system: {
+      rest,
+      white
+    }
+  },
+  typography: {
+    heading3,
+    heading4,
+    heading5,
+    paragraph1,
+    paragraph2,
+    paragraph3
+  },
+  spacing,
+  zIndex: zIndexCORE
+} = theme;
 const iconMap = new Map([['info', 'Info'], ['success', 'ApprovalFilled'], ['warning', 'Warning'], ['danger', 'CancelFilled']]);
 const maxWidthMap = new Map([['tiny', 320], ['small', 400], ['medium', 480]]);
 const primaryTypoMap = new Map([['tiny', heading5], ['small', heading4], ['medium', heading3]]);
@@ -177,7 +177,7 @@ const AlertContainerCSS = (size, progressing, duration) => css`
     transition: opacity ${progressing ? duration / 2 + 1 : duration * 1}s ease ${progressing ? duration / 2 : 0}s;
     margin-bottom: 1rem;
     pointer-events: auto;
-    z-index: ${zIndex(1)};
+    z-index: ${zIndexCORE(1)};
 `;
 
 const AlertInfoCSS = (mainColor, opacityColor) => css`
@@ -192,20 +192,21 @@ const AlertInfoCSS = (mainColor, opacityColor) => css`
     background-color: ${white};
     width: 100%;
     min-width: 320px;
-    padding: 0 4px 0 16px;
+    padding: ${spacing([0, 1, 0, 4])};
     opacity: 1;
 `;
 
 const AlertIconCSS = css`
     display: inherit;
     margin-right: 10px;
-    padding: 8px 0;
+    padding: ${spacing([2, 0])};
 `;
 
 const AlertTextCSS = clearAble => css`
     ${displayBlock};
     margin-right: ${clearAble ? '10px' : 0};
-    padding: 8px 0;
+    padding: ${spacing([2, 0])};
+    align-self: center;
 `;
 
 const AlertPrimaryCSS = (secondary, size) => css`
@@ -214,13 +215,13 @@ const AlertPrimaryCSS = (secondary, size) => css`
     ${alignCenter};
     ${justifyStart};
     ${userSelectNone};
-    ${secondary ? primaryTypoMap.get(size) : paragraph1}
+    ${secondary ? primaryTypoMap.get(size) : paragraph1};
 `;
 
 const AlertSecondaryCSS = size => css`
     ${displayBlock};
     ${userSelectNone};
-    ${size === 'tiny' ? paragraph3 : paragraph2}
+    ${size === 'tiny' ? paragraph3 : paragraph2};
 `;
 
 const AlertClearIconCSS = css`

package/components/alert/notify.js

@@ -3,14 +3,14 @@ import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import Alert from './';
 import { randomString } from '../../utils';
-import { useTheme } from '../../theme';
+import theme from '../../theme/settings';
 const {
-  zIndex
-} = useTheme();
+  zIndex: zIndexCORE
+} = theme;
 const positions = {
   general: {
     position: 'fixed',
-    zIndex: zIndex(2),
+    zIndex: zIndexCORE(2),
     backgroundColor: 'transparent',
     pointerEvents: 'none'
   },
@@ -123,15 +123,17 @@ const AlertNotify = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
       ReactDOM.render( /*#__PURE__*/React.createElement(Alert, {
         onClose: e => onClose(e, position),
+        secondary: message,
         ...props,
         ...options
-      }, message), document.querySelector(`div[class^="Notify-Alert-${position.vertical}-${position.horizontal}"]`).appendChild(el));
+      }), document.querySelector(`div[class^="Notify-Alert-${position.vertical}-${position.horizontal}"]`).appendChild(el));
     } else {
       ReactDOM.render( /*#__PURE__*/React.createElement(Alert, {
         onClose: onClose,
+        secondary: message,
         ...props,
         ...options
-      }, message), document.querySelector(`div[class^="Notify-Alert-"]`).appendChild(el));
+      }), document.querySelector(`div[class^="Notify-Alert-"]`).appendChild(el));
     }
   };
 

package/components/button/icon.js

@@ -370,14 +370,14 @@ ButtonIcon.propTypes = {
   /** 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']),
 
@@ -393,19 +393,19 @@ ButtonIcon.propTypes = {
   /** 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
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)