diginet-core-ui 1.3.24 → 1.3.29

package/components/chart/line/Labels.js

@@ -4,6 +4,7 @@
 import PropTypes from "prop-types";
 import { jsx, css } from '@emotion/core';
 import theme from '../../../theme/settings';
+import { typography } from "../../../styles/typography";
 
 const Labels = ({
   getX,
@@ -22,7 +23,6 @@ const Labels = ({
   minX,
   unitWidth
 }) => {
-  const FONT_SIZE = 12;
   const labelContainerCSS = css`
         transform: translate(0, ${labelsOffsetX}px);
     `;
@@ -34,8 +34,7 @@ const Labels = ({
   const LabelCSS = labelStyle === 'italic' ? css`
         fill: ${theme.colors.secondary};
         text-anchor: start;
-        font-size: ${FONT_SIZE}px;
-        font-family: ${theme.typography.fontFamily};
+        ${typography.paragraph3};
         text-transform: capitalize;
         cursor: pointer;
         display: inline-block;
@@ -44,12 +43,15 @@ const Labels = ({
     ` : css`
         color: ${theme.colors.secondary};
         text-anchor: middle;
-        font-size: ${FONT_SIZE}px;
-        font-family: ${theme.typography.fontFamily};
+        ${typography.paragraph3};
         text-transform: capitalize;
         display: inline-block;
         word-break: break-word;
     `;
+  const TextCSS = css`
+        ${typography.paragraph3};
+        fill: ${theme.colors.secondary};
+    `;
 
   if (labelsVisible) {
     let xLabels;
@@ -96,11 +98,7 @@ const Labels = ({
       y: getY(quantity) + labelsHeightX / 3,
       transform: `translate(-${labelsOffsetY}, 0)`,
       textAnchor: "end",
-      style: {
-        fill: theme.colors.secondary,
-        fontSize: FONT_SIZE,
-        fontFamily: theme.typography.fontFamily
-      }
+      css: TextCSS
     }, labelsFormatY(quantity)));
     return jsx("g", {
       className: 'DGN-Labels-LineChart'

package/components/chart/line/Point.js

@@ -3,7 +3,7 @@
 /** @jsx jsx */
 import PropTypes from "prop-types";
 import { jsx, css } from '@emotion/core';
-import theme from '../../../theme/settings';
+import { typography } from "../../../styles/typography";
 
 const Points = ({
   data,
@@ -38,8 +38,7 @@ const Points = ({
     `;
   const textChartCSS = css`
         text-anchor: middle;
-        font-size: 12px;
-        font-family: ${theme.typography.fontFamily};
+        ${typography.paragraph3};
     `; // create drawing function tooltips in different positions
 
   const topTooltipPath = (width, height, offset, radius) => {

package/components/chart/line/index.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -103,15 +101,25 @@ const BarChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       overflow: 'visible',
       margin: `${getLabelsYWidth() * 2}`
     }
-  }, jsx(Axis, _extends({}, props, commonProps)), jsx(Grid, _extends({}, props, commonProps)), jsx(Labels, _extends({
-    data: dataSource
-  }, props, commonProps)), jsx(Path, _extends({
+  }, jsx(Axis, { ...props,
+    ...commonProps
+  }), jsx(Grid, { ...props,
+    ...commonProps
+  }), jsx(Labels, {
+    data: dataSource,
+    ...props,
+    ...commonProps
+  }), jsx(Path, {
     data: dataSource,
-    viewBoxWidth: viewBoxWidth
-  }, props, commonProps)), jsx(Points, _extends({
+    viewBoxWidth: viewBoxWidth,
+    ...props,
+    ...commonProps
+  }), jsx(Points, {
     data: dataSource,
-    viewBoxWidth: viewBoxWidth
-  }, props, commonProps)));
+    viewBoxWidth: viewBoxWidth,
+    ...props,
+    ...commonProps
+  }));
 }));
 BarChart.defaultProps = {
   data: [],

package/components/chart/line-v2/Labels.js

@@ -4,6 +4,7 @@
 import PropTypes from "prop-types";
 import { jsx, css } from '@emotion/core';
 import theme from '../../../theme/settings';
+import { typography } from "../../../styles/typography";
 
 const Labels = ({
   getX,
@@ -22,7 +23,6 @@ const Labels = ({
   minX,
   unitWidth
 }) => {
-  const FONT_SIZE = 12;
   const labelContainerCSS = css`
         transform: translate(0, ${labelsOffsetX}px);
     `;
@@ -34,8 +34,7 @@ const Labels = ({
   const LabelCSS = labelStyle === 'italic' ? css`
         fill: ${theme.colors.secondary};
         text-anchor: start;
-        font-size: ${FONT_SIZE}px;
-        font-family: ${theme.typography.fontFamily};
+        ${typography.paragraph3};
         text-transform: capitalize;
         cursor: pointer;
         display: inline-block;
@@ -44,12 +43,15 @@ const Labels = ({
     ` : css`
         color: ${theme.colors.secondary};
         text-anchor: middle;
-        font-size: ${FONT_SIZE}px;
-        font-family: ${theme.typography.fontFamily};
+        ${typography.paragraph3};
         text-transform: capitalize;
         display: inline-block;
         word-break: break-word;
     `;
+  const TextCSS = css`
+        ${typography.paragraph3};
+        fill: ${theme.colors.secondary};
+    `;
 
   if (labelsVisible) {
     let xLabels;
@@ -96,11 +98,7 @@ const Labels = ({
       y: getY(quantity) + labelsHeightX / 3,
       transform: `translate(-${labelsOffsetY}, 0)`,
       textAnchor: "end",
-      style: {
-        fill: theme.colors.secondary,
-        fontSize: FONT_SIZE,
-        fontFamily: theme.typography.fontFamily
-      }
+      css: TextCSS
     }, labelsFormatY(quantity)));
     return jsx("g", {
       className: 'DGN-Labels-LineChart'

package/components/chart/line-v2/Point.js

@@ -4,8 +4,8 @@
 import { useState } from 'react';
 import PropTypes from "prop-types";
 import { jsx, css } from '@emotion/core';
-import theme from '../../../theme/settings';
 import { randomString } from '../../../utils';
+import { typography } from "../../../styles/typography";
 
 const Points = ({
   data,
@@ -44,8 +44,7 @@ const Points = ({
     `;
   const textChartCSS = css`
         text-anchor: middle;
-        font-size: 12px;
-        font-family: ${theme.typography.fontFamily};
+        ${typography.paragraph3};
     `; // create drawing function tooltips in different positions
 
   const topTooltipPath = (width, height, offset, radius) => {

package/components/chart/line-v2/index.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -103,15 +101,25 @@ const BarChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       overflow: 'visible',
       margin: `${getLabelsYWidth() * 2}`
     }
-  }, jsx(Axis, _extends({}, props, commonProps)), jsx(Grid, _extends({}, props, commonProps)), jsx(Labels, _extends({
-    data: dataSource
-  }, props, commonProps)), jsx(Path, _extends({
+  }, jsx(Axis, { ...props,
+    ...commonProps
+  }), jsx(Grid, { ...props,
+    ...commonProps
+  }), jsx(Labels, {
+    data: dataSource,
+    ...props,
+    ...commonProps
+  }), jsx(Path, {
     data: dataSource,
-    viewBoxWidth: viewBoxWidth
-  }, props, commonProps)), jsx(Points, _extends({
+    viewBoxWidth: viewBoxWidth,
+    ...props,
+    ...commonProps
+  }), jsx(Points, {
     data: dataSource,
-    viewBoxWidth: viewBoxWidth
-  }, props, commonProps)));
+    viewBoxWidth: viewBoxWidth,
+    ...props,
+    ...commonProps
+  }));
 }));
 BarChart.defaultProps = {
   data: [],

package/components/chip/attach.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -7,10 +5,9 @@ import { Fragment, memo, useMemo, useRef, useState, forwardRef as _nonUse } from
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import Chip from './';
-import Icon from '../../icons';
 import { Pdf, Word, Sheet, Presentation, Image, Compressed, Another } from '../../icons';
 import { capitalize, getFileType } from '../../utils';
-import { ModalSample, Slider, SliderItem } from '../';
+import { ButtonIcon, ModalSample, Slider, SliderItem } from '../';
 const FileTypeIcon = {
   Pdf,
   Word,
@@ -131,31 +128,30 @@ const AttachChip = /*#__PURE__*/memo(({
       url: file.URL
     })));
   }, [open]);
-  return jsx(Fragment, null, jsx(Chip, _extends({}, props, {
+  return jsx(Fragment, null, jsx(Chip, { ...props,
     clearAble: false,
     label: renderLabel(file.FileName),
     startIcon: getStartIcon(),
-    endIcon: jsx(Icon, {
+    endIcon: jsx(ButtonIcon, {
+      viewType: 'ghost',
       name: 'more',
-      width: 24,
-      height: 18,
-      viewBox: true,
+      size: 'tiny',
       onClick: onShowMoreOption
     })
-  }), jsx("div", {
+  }, jsx("div", {
     css: MoreAction,
     ref: moreActionRef
-  }, jsx(Icon, {
+  }, jsx(ButtonIcon, {
+    viewType: 'ghost',
     name: 'view',
-    viewBox: true,
     onClick: e => viewAction(e, file)
-  }), jsx(Icon, {
+  }), jsx(ButtonIcon, {
+    viewType: 'ghost',
     name: 'download',
-    viewBox: true,
     onClick: e => downloadAction(e, file)
-  }), jsx(Icon, {
+  }), jsx(ButtonIcon, {
+    viewType: 'ghost',
     name: 'delete',
-    viewBox: true,
     onClick: e => deleteAction(e, file)
   }))), attachView);
 });

package/components/chip/index.js

@@ -1,13 +1,10 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
 import { memo, useRef, forwardRef, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { Typography } from '../';
-import Icon from '../../icons';
+import { ButtonIcon, Typography } from '../';
 import theme from '../../theme/settings';
 const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   viewType,
@@ -91,6 +88,7 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         display: inline-flex;
         position: relative;
         align-items: center;
+        width: max-content;
         margin-right: 15px;
         padding: 0 6px;
         color: ${theme.colors.secondary};
@@ -254,26 +252,25 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: ChipIcon,
     className: 'end-icon ' + size,
     ref: IconRef
-  }, jsx(Icon, {
+  }, jsx(ButtonIcon, {
+    viewType: 'ghost',
     name: 'Close',
     className: 'clear-icon',
     color: viewType === 'outlined' && color ? 'inherit' : undefined,
-    width: 10,
-    height: 10,
     onClick: onRemoveHandler
   })) : endIcon && jsx("div", {
     css: ChipIcon,
     className: 'end-icon ' + size,
     ref: IconRef
   }, endIcon), [clearAble]);
-  return jsx("div", _extends({
+  return jsx("div", {
     css: ChipRoot,
-    ref: ref
-  }, props, {
+    ref: ref,
+    ...props,
     className: ['DGN-UI-Chip', size, className].join(' ').trim(),
     onClick: readOnly ? null : handleClick,
     onDoubleClick: onDbClick || onDoubleClick
-  }), startIconView, labelView, endIconView, children);
+  }, startIconView, labelView, endIconView, children);
 }));
 Chip.defaultProps = {
   label: '',

package/components/collapse/index.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -46,10 +44,11 @@ const Collapse = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       };
     }
   }, [open]);
-  return jsx("div", _extends({
+  return jsx("div", {
     css: CollapseRoot,
-    ref: ref
-  }, props), children);
+    ref: ref,
+    ...props
+  }, children);
 }));
 Collapse.defaultProps = {
   open: false

package/components/divider/index.js

@@ -1,19 +1,23 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
 import { memo, useMemo, useEffect, useRef, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import theme from '../../theme/settings';
+import { noBorder } from '../../styles/general';
+import { color as colors } from '../../styles/colors';
+const {
+  system: {
+    disabled: systemDisabled
+  }
+} = colors;
 const Divider = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  children,
   width,
   height,
   direction,
   color,
   className,
+  style,
   ...props
 }, ref) => {
   if (!ref) {
@@ -21,18 +25,19 @@ const Divider = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }
 
   const DividerRoot = css`
-        display: block;
-        position: relative;
-        background-color: ${theme.colors[color] || color};
+        ${noBorder}
+        flex-shrink: 0;
+        margin: 0;
+        background-color: ${colors.semantic[color] || color};
         &.vertical {
             width: ${width ? isNaN(width) ? width : width + 'px' : '1px'};
             height: ${height ? isNaN(height) ? height : height + 'px' : '100%'};
-            margin: auto 5px;
+            /* margin: auto 5px; */
         }
         &.horizontal {
             width: ${width ? isNaN(width) ? height : width + 'px' : '100%'};
             height: ${height ? isNaN(height) ? height : height + 'px' : '1px'};
-            margin: 5px auto;
+            /* margin: 5px auto; */
         }
     `;
   useEffect(() => {
@@ -40,16 +45,18 @@ const Divider = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ref.current.style.height = ref.current.parentNode.offsetHeight + 'px';
     }
   }, []);
-  const DividerView = useMemo(() => jsx("div", _extends({
+  return useMemo(() => jsx("hr", {
     css: DividerRoot,
     ref: ref,
-    className: ['DGN-UI-Divider', direction, className].join(' ').trim()
-  }, props), children), []);
-  return DividerView;
+    style: style,
+    className: ['DGN-UI-Divider', direction, className].join(' ').trim(),
+    ...props
+  }), [width, height, color, style, className]);
 }));
 Divider.defaultProps = {
-  color: theme.colors.divider,
+  color: systemDisabled,
   direction: 'horizontal',
+  style: {},
   className: ''
 };
 Divider.propTypes = {
@@ -65,6 +72,12 @@ Divider.propTypes = {
   /** direction of divider */
   direction: PropTypes.oneOf(['vertical', 'horizontal']),
 
+  /** style inline of divider */
+  style: PropTypes.object,
+
+  /** className of divider */
+  className: PropTypes.string,
+
   /** any props else */
   props: PropTypes.object
 };