diginet-core-ui 1.3.66 → 1.3.67

package/components/button/index.js

@@ -6,38 +6,35 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
 import * as allColors from '../../styles/colors';
-import { color as colors } from '../../styles/colors';
 import { Typography } from '../';
 import { detectColor, fade, hslToRgb, isColor, isColorName, rgbaToHexA, rgbToHex, hexToRGBA } from '../../styles/color-helper';
 import Ripple from './ripple-effect';
 import CircularProgress from '../progress/circular';
 import Icon from '../../icons';
 import { flexRow, alignCenter, justifyCenter, positionRelative, borderRadius4px, borderBox, noPadding, noBorder, cursorPointer, overflowHidden, pointerEventsNone, outlineNone, userSelectNone, backgroundTransparent, inlineFlex, noMargin } from '../../styles/general';
-import { typography } from '../../styles/typography';
+import theme from '../../theme/settings';
 const {
-  heading1,
-  heading2,
-  heading4,
-  heading5,
-  uppercase
-} = typography;
-const {
-  system: {
-    active,
-    disabled: systemDisabled,
-    rest,
-    white
-  },
-  semantic: {
-    success,
-    warning,
-    danger,
-    info
+  colors: {
+    system: {
+      active,
+      disabled: systemDisabled,
+      rest,
+      white
+    },
+    semantic: {
+      success,
+      warning,
+      danger,
+      info
+    },
+    fill: {
+      disabled: fillDisabled
+    }
   },
-  fill: {
-    disabled: fillDisabled
+  typography: {
+    uppercase
   }
-} = colors;
+} = theme;
 export const getRippleColor = (color, viewType, colors) => {
   if (!isColor(color) && !isColorName(color)) {
     let level = 3;
@@ -90,7 +87,7 @@ const iconSizeMap = new Map([['tiny', '16px'], ['small', '20px'], ['medium', '24
 const paddingSizeMap = new Map([['tiny', '4px 8px'], ['small', '6px 12px'], ['medium', '8px 16px'], ['large', '8px 20px'], ['giant', '8px 24px']]);
 const outlinedPaddingSizeMap = new Map([['tiny', '3px 7px'], ['small', '5px 11px'], ['medium', '7px 15px'], ['large', '7px 19px'], ['giant', '7px 23px']]);
 const iconMarginSizeMap = new Map([['tiny', '4px'], ['small', '4px'], ['medium', '4px'], ['large', '6px'], ['giant', '8px']]);
-const typographySizeMap = new Map([['tiny', heading5], ['small', heading5], ['medium', heading4], ['large', heading2], ['giant', heading1]]);
+const typographySizeMap = new Map([['tiny', 'heading5'], ['small', 'heading5'], ['medium', 'heading4'], ['large', 'heading2'], ['giant', 'heading1']]);
 const minHeightSizeMap = new Map([['tiny', '24px'], ['small', '32px'], ['medium', '40px'], ['large', '48px'], ['giant', '56px']]);
 const alphaArr = {
   hover: 0.1,
@@ -99,19 +96,21 @@ const alphaArr = {
 };
 const alphaLoading = 0.2;
 const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  type,
-  viewType,
-  color,
-  size,
-  label,
-  text,
+  children,
   className,
+  color,
   disabled,
-  onClick,
-  startIcon,
   endIcon,
-  children,
+  id,
+  label,
   loading,
+  onClick,
+  size,
+  startIcon,
+  stopPropagation,
+  text,
+  type,
+  viewType,
   ...props
 }, reference) => {
   const ref = useRef(null);
@@ -122,219 +121,15 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const typographySize = typographySizeMap.get(size);
   const iconMarginSize = iconMarginSizeMap.get(size);
   const minHeightSize = minHeightSizeMap.get(size);
-  const ButtonIcon = css`
-                ${flexRow}
-                ${alignCenter}
-        ${justifyCenter}
-        ${positionRelative}
-        ${borderBox}
-            `;
-  const ButtonText = css`
-                white-space: nowrap;
-                color: inherit;
-                margin: 0 ${loading ? iconMarginSize : 0};
-            `;
-  const ButtonRoot = css`
-                ${inlineFlex}
-                ${alignCenter}
-        ${justifyCenter}
-        ${positionRelative}
-        ${borderRadius4px}
-        ${borderBox}
-        ${uppercase}
-        ${cursorPointer}
-        ${overflowHidden}
-        ${outlineNone}
-        ${userSelectNone}
-        height: max-content;
-                transition: all 0.5s;
-                &.button--disabled {
-                    cursor: not-allowed !important;
-                    color: ${systemDisabled} !important;
-                    &.outlined {
-                        border-color: ${systemDisabled} !important;
-                        background-color: transparent !important;
-                    }
-                    &.filled {
-                        background-color: ${fillDisabled} !important;
-                        filter: brightness(1) !important;
-                    }
-                    &.text {
-                        background-color: transparent !important;
-                    }
-                }
-                /* &:not(:disabled):focus {
-            box-shadow: ${viewType === 'outlined' ? '0 0 0 2px ' + hexToRGBA(active, 0.13) : 'none'};
-        } */
-                &.button--loading {
-                    ${pointerEventsNone}
-                }
-                &.${size} {
-                    padding: ${paddingSize};
-                    min-height: ${minHeightSize};
-                    min-width: max-content;
-                    &.outlined {
-                        padding: ${outlinedPaddingSize};
-                    }
-                    .css-${ButtonText.name} {
-                        ${typographySize};
-                    }
-                    .css-${ButtonIcon.name} {
-                        margin-right: ${endIcon || label ? iconMarginSize : 0};
-                        &.DGN-UI-Button-End-Icon,
-                        &.DGN-UI-Button-Custom-End-Icon {
-                            margin-right: unset;
-                            margin-left: ${startIcon || label ? iconMarginSize : 0};
-                        }
-                        &.DGN-UI-Button-Start-Icon,
-                        &.DGN-UI-Button-End-Icon {
-                            height: ${iconSize};
-                            width: ${iconSize};
-                        }
-                    }
-                    .no-icon {
-                        ${noMargin}
-                        height: ${iconSize};
-                        min-width: 0;
-                    }
-                }
-                &.outlined {
-                    ${backgroundTransparent}
-                    &.default {
-                        border: 1px solid ${rest};
-                        color: ${rest};
-                        &.button--loading,
-                        &:hover,
-                        &:focus,
-                        &:active {
-                            color: ${active};
-                            border-color: ${active};
-                        }
-                        &.button--loading {
-                            background-color: ${hexToRGBA(active, alphaLoading)};
-                        }
-                        ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(active, alphaArr[key])};
-                    }`)}// &:hover | &:focus | &:active
-                    }
-                    &.${color} {
-                        border: 1px solid ${colorMap.get(color)};
-                        color: ${colorMap.get(color)};
-                        &.button--loading {
-                            background-color: ${hexToRGBA(colorMap.get(color), alphaLoading)};
-                        }
-                        ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(colorMap.get(color), alphaArr[key])};
-                    }`)}
-                    }
-                    &.custom-color {
-                        border: 1px solid ${color};
-                        color: ${color};
-                        &.button--loading {
-                            background-color: ${hexToRGBA(color, alphaLoading)};
-                        }
-                        ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(color, alphaArr[key])};
-                    }`)}
-                    }
-                }
-                &.filled {
-                    border: none;
-                    color: ${white};
-                    font-weight: bold;
-                    &.button--loading,
-                    &:hover,
-                    &:focus {
-                        filter: brightness(0.85);
-                    }
-                    &:active {
-                        filter: brightness(0.7);
-                    }
-                    &.default {
-                        background-color: ${rest};
-                        &.button--loading {
-                            background-color: ${active};
-                        }
-                        &:hover,
-                        &:focus,
-                        &:active {
-                            background-color: ${active};
-                        }
-                    }
-                    &.${color} {
-                        background-color: ${colorMap.get(color)};
-                    }
-                    &.custom-color {
-                        background-color: ${color};
-                    }
-                }
-                &.text {
-                    ${backgroundTransparent}
-                    ${noBorder}
-            &.default {
-                        color: ${rest};
-                        &:hover,
-                        &:focus,
-                        &:active {
-                            color: ${active};
-                        }
-                        &.button--loading {
-                            color: ${active};
-                            background-color: ${hexToRGBA(active, alphaLoading)};
-                        }
-                        ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(active, alphaArr[key])};
-                    }`)}
-                    }
-                    &.${color} {
-                        color: ${colorMap.get(color)};
-                        &.button--loading {
-                            background-color: ${hexToRGBA(colorMap.get(color), alphaLoading)};
-                        }
-                        ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(colorMap.get(color), alphaArr[key])};
-                    }`)}
-                    }
-                    &.custom-color {
-                        color: ${color};
-                        &.button--loading {
-                            background-color: ${hexToRGBA(color, alphaLoading)};
-                        }
-                        ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(color, alphaArr[key])};
-                    }`)}
-                    }
-                }
-                &.link {
-                    ${backgroundTransparent}
-                    ${noBorder}
-            ${noPadding}
-            color: ${info};
-                    &.button--loading,
-                    &:hover,
-                    &:focus {
-                        filter: brightness(0.85);
-                    }
-                    &:active {
-                        filter: brightness(0.7);
-                    }
-                    &.${color} {
-                        color: ${colorMap.get(color)};
-                    }
-                    &.custom-color {
-                        color: ${color};
-                    }
-                }
-            `;
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {}; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-    return currentRef;
-  });
+
+  const _ButtonText = ButtonText(loading, iconMarginSize);
+
+  const _ButtonRoot = ButtonRoot(viewType, size, paddingSize, minHeightSize, outlinedPaddingSize, endIcon, label, iconMarginSize, startIcon, iconSize, color);
+
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
   const StartIcon = useMemo(() => {
     let node = startIcon;
 
@@ -391,7 +186,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const _onClick = event => {
-    onClick && event.stopPropagation();
+    onClick && stopPropagation && event.stopPropagation();
     if (disabled || loading) return;
     onClick && onClick(event);
   };
@@ -419,21 +214,226 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     return jsx("button", {
-      css: ButtonRoot,
-      onClick: _onClick,
+      css: _ButtonRoot,
       ref: ref,
+      onClick: _onClick,
+      id: id,
       type: type,
       className: ['DGN-UI-Button', viewType, getClassNameFromColor(color), size, loading && 'button--loading', disabled && 'button--disabled', className].join(' ').trim().replace(/\s+/g, ' '),
       ...props
     }, start, jsx(Typography, {
-      css: ButtonText,
-      type: 'h4',
+      css: _ButtonText,
+      type: typographySize,
       className: 'button-text'
     }, children || label), end && end, !disabled && !loading && viewType !== 'link' && jsx(Ripple, {
       color: getRippleColor(color, viewType, allColors)
     }));
-  }, [size, viewType, color, disabled, onClick, loading, startIcon, endIcon, label]);
+  }, [size, viewType, color, disabled, onClick, loading, startIcon, endIcon, label, type, className, children, id]);
 }));
+const ButtonIcon = css`
+    ${flexRow};
+    ${alignCenter};
+    ${justifyCenter};
+    ${positionRelative};
+    ${borderBox};
+`;
+
+const ButtonText = (loading, iconMarginSize) => css`
+    white-space: nowrap;
+    color: inherit;
+    margin: 0 ${loading ? iconMarginSize : 0};
+`;
+
+const ButtonRoot = (viewType, size, paddingSize, minHeightSize, outlinedPaddingSize, endIcon, label, iconMarginSize, startIcon, iconSize, color) => css`
+    ${inlineFlex};
+    ${alignCenter};
+    ${justifyCenter};
+    ${positionRelative};
+    ${borderRadius4px};
+    ${borderBox};
+    ${uppercase};
+    ${cursorPointer};
+    ${overflowHidden};
+    ${outlineNone};
+    ${userSelectNone};
+    height: max-content;
+    transition: all 0.5s;
+    &.button--disabled {
+        cursor: not-allowed !important;
+        color: ${systemDisabled} !important;
+        &.outlined {
+            border-color: ${systemDisabled} !important;
+            background-color: transparent !important;
+        }
+        &.filled {
+            background-color: ${fillDisabled} !important;
+            filter: brightness(1) !important;
+        }
+        &.text {
+            background-color: transparent !important;
+        }
+    }
+    /* &:not(:disabled):focus {
+        box-shadow: ${viewType === 'outlined' ? '0 0 0 2px ' + hexToRGBA(active, 0.13) : 'none'};
+    } */
+    &.button--loading {
+        ${pointerEventsNone};
+    }
+    &.${size} {
+        padding: ${paddingSize};
+        min-height: ${minHeightSize};
+        min-width: max-content;
+        &.outlined {
+            padding: ${outlinedPaddingSize};
+        }
+        .css-${ButtonIcon.name} {
+            margin-right: ${endIcon || label ? iconMarginSize : 0};
+            &.DGN-UI-Button-End-Icon,
+            &.DGN-UI-Button-Custom-End-Icon {
+                margin-right: unset;
+                margin-left: ${startIcon || label ? iconMarginSize : 0};
+            }
+            &.DGN-UI-Button-Start-Icon,
+            &.DGN-UI-Button-End-Icon {
+                height: ${iconSize};
+                width: ${iconSize};
+            }
+        }
+        .no-icon {
+            ${noMargin};
+            height: ${iconSize};
+            min-width: 0;
+        }
+    }
+    &.outlined {
+        ${backgroundTransparent}
+        &.default {
+            border: 1px solid ${rest};
+            color: ${rest};
+            &.button--loading,
+            &:hover,
+            &:focus,
+            &:active {
+                color: ${active};
+                border-color: ${active};
+            }
+            &.button--loading {
+                background-color: ${hexToRGBA(active, alphaLoading)};
+            }
+            ${Object.keys(alphaArr).map(key => `&:${key} {
+                        background-color: ${hexToRGBA(active, alphaArr[key])};
+                    }`)}// &:hover | &:focus | &:active
+        }
+        &.${color} {
+            border: 1px solid ${colorMap.get(color)};
+            color: ${colorMap.get(color)};
+            &.button--loading {
+                background-color: ${hexToRGBA(colorMap.get(color), alphaLoading)};
+            }
+            ${Object.keys(alphaArr).map(key => `&:${key} {
+                        background-color: ${hexToRGBA(colorMap.get(color), alphaArr[key])};
+                    }`)}
+        }
+        &.custom-color {
+            border: 1px solid ${color};
+            color: ${color};
+            &.button--loading {
+                background-color: ${hexToRGBA(color, alphaLoading)};
+            }
+            ${Object.keys(alphaArr).map(key => `&:${key} {
+                        background-color: ${hexToRGBA(color, alphaArr[key])};
+                    }`)}
+        }
+    }
+    &.filled {
+        border: none;
+        color: ${white};
+        font-weight: bold;
+        &.button--loading,
+        &:hover,
+        &:focus {
+            filter: brightness(0.85);
+        }
+        &:active {
+            filter: brightness(0.7);
+        }
+        &.default {
+            background-color: ${rest};
+            &.button--loading {
+                background-color: ${active};
+            }
+            &:hover,
+            &:focus,
+            &:active {
+                background-color: ${active};
+            }
+        }
+        &.${color} {
+            background-color: ${colorMap.get(color)};
+        }
+        &.custom-color {
+            background-color: ${color};
+        }
+    }
+    &.text {
+        ${backgroundTransparent};
+        ${noBorder};
+        &.default {
+            color: ${rest};
+            &:hover,
+            &:focus,
+            &:active {
+                color: ${active};
+            }
+            &.button--loading {
+                color: ${active};
+                background-color: ${hexToRGBA(active, alphaLoading)};
+            }
+            ${Object.keys(alphaArr).map(key => `&:${key} {
+                        background-color: ${hexToRGBA(active, alphaArr[key])};
+                    }`)}
+        }
+        &.${color} {
+            color: ${colorMap.get(color)};
+            &.button--loading {
+                background-color: ${hexToRGBA(colorMap.get(color), alphaLoading)};
+            }
+            ${Object.keys(alphaArr).map(key => `&:${key} {
+                        background-color: ${hexToRGBA(colorMap.get(color), alphaArr[key])};
+                    }`)}
+        }
+        &.custom-color {
+            color: ${color};
+            &.button--loading {
+                background-color: ${hexToRGBA(color, alphaLoading)};
+            }
+            ${Object.keys(alphaArr).map(key => `&:${key} {
+                        background-color: ${hexToRGBA(color, alphaArr[key])};
+                    }`)}
+        }
+    }
+    &.link {
+        ${backgroundTransparent};
+        ${noBorder};
+        ${noPadding};
+        color: ${info};
+        &.button--loading,
+        &:hover,
+        &:focus {
+            filter: brightness(0.85);
+        }
+        &:active {
+            filter: brightness(0.7);
+        }
+        &.${color} {
+            color: ${colorMap.get(color)};
+        }
+        &.custom-color {
+            color: ${color};
+        }
+    }
+`;
+
 Button.defaultProps = {
   viewType: 'text',
   color: 'default',
@@ -441,50 +441,45 @@ Button.defaultProps = {
   label: '',
   className: '',
   disabled: false,
-  loading: false
+  loading: false,
+  stopPropagation: true
 };
 Button.propTypes = {
-  /** The type attribute specifies the type of tag button */
-  type: PropTypes.oneOf(['button', 'submit', 'reset']),
+  /** The content of the component. */
+  children: PropTypes.node,
 
-  /** used to fill background for button */
-  viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'link']),
+  /** Class for component. */
+  className: PropTypes.string,
 
-  /** color for button */
+  /** The color of the component. */
   color: PropTypes.string,
 
-  /** size button */
-  size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant']),
-
-  /** the content to display in button (like text prop) */
-  label: PropTypes.string,
-
-  /** the class for button */
-  className: PropTypes.string,
-
-  /** prevent all event if true */
+  /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
 
-  /** icon to the left of the button */
-  startIcon: PropTypes.node,
+  /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed after the children. */
+  endIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
-  /** icon to the right of the button */
-  endIcon: PropTypes.node,
+  /** The content of the component. */
+  label: PropTypes.string,
 
-  /** element to display in button (like text) */
-  children: PropTypes.node,
+  /** If `true`, the loading indicator is shown. */
+  loading: PropTypes.bool,
 
-  /** the function will run when click on button */
+  /** Callback fired when the component is clicked. */
   onClick: PropTypes.func,
 
-  /** any props else */
-  props: PropTypes.any,
+  /** The size of the component. */
+  size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant']),
 
-  /** status loading of button */
-  loading: PropTypes.bool,
+  /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed before the children. */
+  startIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+
+  /** The variant to use. */
+  viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'link']),
 
   /**
-   * ref methods
+   * ref methods (ref.current.instance.*method*)
    *
    * * option(): Gets all UI component properties
    *  * Returns value - object

package/components/card/body.js

@@ -0,0 +1,47 @@
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+import { jsx } from '@emotion/core';
+import OptionWrapper from '../others/option-wrapper';
+const CardBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  id,
+  style,
+  title
+}, reference) => {
+  const ref = useRef(null);
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
+  return useMemo(() => {
+    return jsx("div", {
+      id: id,
+      ref: ref,
+      style: style,
+      className: [`DGN-UI-Card-Body`, className].join(' ').trim().replace(/\s+/g, ' ')
+    }, children);
+  }, [children, className, id, style, title]);
+}));
+CardBody.defaultProps = {
+  className: '',
+  style: {}
+};
+CardBody.propTypes = {
+  /** The content of the component. */
+  children: PropTypes.node,
+
+  /** Class for component. ({container: '', header: '', body: '', footer: ''}) */
+  className: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+
+  /** If `true`, will have divider between body and footer. */
+  style: PropTypes.object,
+
+  /** The title of the component's header. */
+  title: PropTypes.string
+};
+export { CardBody };
+export default OptionWrapper(CardBody);