diginet-core-ui 1.3.24 → 1.3.29

package/components/status/index.js

@@ -1,18 +1,32 @@
-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, useEffect, useMemo, forwardRef, useRef } from 'react';
+import { memo, useMemo, forwardRef, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { Typography } from '../';
-import { capitalize } from '../../utils';
-import * as Icons from '../../icons';
-import theme from '../../theme/settings';
+import Icon from '../../icons';
+import { alignCenter, backgroundTransparent, borderBox, inlineFlex, justifyCenter } from '../../styles/general';
+import { color as colors } from '../../styles/colors';
 const {
-  colors
-} = theme;
+  system: {
+    active,
+    rest
+  },
+  semantic: {
+    success,
+    warning,
+    danger,
+    info
+  },
+  fill: {
+    sidebar
+  }
+} = colors;
+const colorMap = new Map([['default', rest], ['primary', active], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
+const iconSizeMap = new Map([['small', '16px'], ['medium', '20px'], ['large', '24px']]);
+const typographySizeMap = new Map([['small', 'p3'], ['medium', 'p2'], ['large', 'p1']]);
+const filledPaddingSizeMap = new Map([['small', '0px 8px'], ['medium', '0px 12px'], ['large', '0px 16px']]);
 const Status = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   style,
   viewType,
@@ -27,76 +41,68 @@ const Status = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ref = useRef(null);
   }
 
+  const outlinedPaddingSize = filledPaddingSizeMap.get(size);
+
+  const _color = colorMap.get(color);
+
+  const iconSize = iconSizeMap.get(size);
+  const typographySize = typographySizeMap.get(size);
   const StatusRoot = css`
-        color: ${colors[color || 'secondary'] || color || dark6};
-        background-color: transparent;
-        height: 20px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        box-sizing: border-box;
-        white-space: nowrap;
+        ${inlineFlex}
+        ${alignCenter}
+        ${justifyCenter}
+        ${backgroundTransparent}
+        ${borderBox}
+        min-height: ${iconSize};
         margin: 0 5px;
+        color: ${_color || color || rest};
         &.filled {
-            color: #FFF;
-            background-color: ${colors[color || 'secondary'] || color || dark6};
-            padding: 0 12px;
+            color: ${sidebar};
+            background-color: ${_color || color || rest};
             border-radius: 12px;
-        }
-        &.small {
-            height: 16px;
-            padding: 0 8px;
-            svg {
-                width: 16px;
-                height: 16px;
-            }
-        }
-        &.large {
-            height: 24px;
-            padding: 0 16px;
-            svg {
-                width: 24px;
-                height: 24px;
+            &.${size} {
+                padding: ${outlinedPaddingSize}
             }
         }
     `;
+  const TextCSS = css`
+        white-space: nowrap;
+    `;
   const StatusText = useMemo(() => jsx(Typography, {
-    type: size === 'small' ? 'p3' : size === 'large' ? 'p1' : 'p2',
+    css: TextCSS,
+    type: typographySize,
     color: 'inherit'
-  }, text), [text]);
+  }, text), [text, size]);
   const StatusIcon = useMemo(() => {
-    let iconEl = null;
-
-    if (icon) {
-      if (typeof icon === 'string') {
-        const Icon = Icons[capitalize(icon)];
+    let node = icon;
 
-        if (Icon) {
-          iconEl = jsx(Icon, {
-            height: '100%',
-            color: 'currentColor',
-            viewBox: true
-          });
-        }
-      } else {
-        iconEl = icon;
-      }
+    if (typeof node === 'string') {
+      node = jsx(Icon, {
+        name: node,
+        width: iconSize,
+        height: iconSize,
+        color: 'currentColor',
+        viewBox: true
+      });
     }
 
-    return iconEl;
+    return node;
   }, [icon]);
-  return jsx("div", _extends({
+  return jsx("div", {
     css: StatusRoot,
     style: style,
-    className: [viewType, size, className].join(' '),
-    ref: ref
-  }, props), StatusIcon, StatusText);
+    className: ['DGN-UI-Status', viewType, size, className].join(' ').trim().replace(/\s+/g, ' '),
+    ref: ref,
+    ...props
+  }, StatusIcon, StatusText);
 }));
 Status.defaultProps = {
   viewType: 'default',
   text: '',
+  icon: '',
   size: 'medium',
-  className: ''
+  className: '',
+  style: {}
 };
 Status.propTypes = {
   /** type of status, has background or none */

package/components/tab/tab-container.js

@@ -1,21 +1,21 @@
-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 React, { forwardRef, useState, memo, useEffect } from 'react';
 import { jsx, css } from '@emotion/core';
-import PropTypes, { oneOf, oneOfType, string, number, node, any } from 'prop-types';
+import PropTypes from 'prop-types';
 import { randomString } from '../../utils';
 import TabContext from './context';
 import { isNumeric } from '../../utils/type';
 import Typography from '../typography';
+import { flexRow, positionRelative } from '../../styles/general';
 const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   tabIndex,
   width,
   direction,
   level = 'level1',
+  className,
   ...props
 }, ref) => {
   const {
@@ -29,27 +29,21 @@ const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     if (isNumeric(value)) setTabIndexState(value);else setTabIndexState(tabIndex);
   }, [value, tabIndex]);
-  const Container = css`
-            display: block;
-            position: relative;
-            flex-direction: column;
-        `;
-  const TabButtonContainer = css`
-            display: ${direction === 'vertical' ? 'flex' : 'block'};
+  const TabContainer = css`
+            ${flexRow}
+            ${positionRelative}
             flex-direction: ${direction === 'vertical' ? 'row' : 'column'};
-            position: relative;
             width: ${isNaN(width) ? width : width + 'px'};
         `;
   if (level === 'level1') level = 'h3';
   if (level === 'level2') level = 'p1';
   return jsx("div", {
-    css: Container
-  }, jsx("div", _extends({
-    css: TabButtonContainer,
-    className: `Tab-Container`,
+    css: TabContainer,
+    className: ['DGN-UI-Tab-Container', className].join(' ').trim().replace(/\s+/g, ' '),
     id: `DGN-${id}-tab-button-container`,
-    ref: ref
-  }, props), jsx(TabContext.Provider, {
+    ref: ref,
+    ...props
+  }, jsx(TabContext.Provider, {
     value: {
       tabIndexState,
       setTabIndexState,
@@ -57,27 +51,35 @@ const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   }, React.Children.map(children, child => /*#__PURE__*/React.cloneElement(child, {
     level
-  })))));
+  }))));
 }));
 TabContainer.defaultProps = {
   width: '100%',
   direction: 'horizontal',
   level: 'level1',
-  tabIndex: 0
+  tabIndex: 0,
+  className: '',
+  style: {}
 };
 const typesTypography = Typography.propTypes.type;
 TabContainer.propTypes = {
-  width: oneOfType([number, string]),
-  tabIndex: number,
-  children: node,
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  tabIndex: PropTypes.number,
+  children: PropTypes.node,
 
   /** direction change the position of Tabs */
-  direction: oneOf(['vertical', 'horizontal']),
+  direction: PropTypes.oneOf(['vertical', 'horizontal']),
 
   /** direction change the size typography of Tab (typesTypography is types of Typography - exp: h1, h2, h3, p1 .....)*/
   level: PropTypes.oneOfType([PropTypes.oneOf(['level1', 'level2']), typesTypography]),
 
+  /** class for component */
+  className: PropTypes.string,
+
+  /** style inline of component */
+  style: PropTypes.object,
+
   /** any props else */
-  props: any
+  props: PropTypes.any
 };
 export default TabContainer;

package/components/tab/tab-header.js

@@ -1,17 +1,22 @@
-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 React, { memo, forwardRef, useContext, useRef, useState } from 'react';
 import { jsx, css } from '@emotion/core';
-import { any, array, object, bool } from 'prop-types';
-import { color } from '../../styles/colors';
+import PropTypes from 'prop-types';
+import { color as colors } from '../../styles/colors';
 import TabContext from './context';
 import ButtonIcon from '../button/icon';
+import { borderBox, flexCol, flexRow, overflowHidden, positionRelative } from '../../styles/general';
+const {
+  line: {
+    tab
+  }
+} = colors;
 const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   style,
+  className,
   level,
   scrollButtons,
   ...props
@@ -27,26 +32,24 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   let showScrollLeftButton = !isVertical && scrollLeft > 0;
   let showScrollRightButton = !isVertical && (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.offsetWidth) + scrollLeft < (ref === null || ref === void 0 ? void 0 : (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.scrollWidth);
   const Container = css`
-            line-height: 1.29;
-            display: flex;
-            overflow: hidden;
-            position: relative;
+            ${flexRow}
+            ${overflowHidden}
+            ${positionRelative}
+            ${borderBox}
             height: auto;
             min-height: 2.5rem;
-            box-sizing: border-box;
             flex-direction: ${isVertical ? 'column' : 'row'};
             max-width: ${isVertical ? 'max-content' : '100%'};
             width: 100%;
             padding: 0;
-            ${isVertical ? `border-right: solid 1px ${color.line.tab}` : `border-bottom: solid 1px ${color.line.tab}`};
+            ${isVertical ? `border-right: solid 1px ${tab}` : `border-bottom: solid 1px ${tab}`};
         `;
   const TabHeader = isVertical ? css`
-                  display: flex;
-                  flex-direction: column;
+                  ${flexCol}
                   padding: 0 3px 0 0;
               ` : css`
-                  display: flex;
-                  position: relative;
+                  ${flexRow}
+                  ${positionRelative}
                   white-space: nowrap;
                   margin: 0;
                   list-style: none;
@@ -80,21 +83,23 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     setScrollLeft(scrollValue);
   };
 
-  return jsx("div", _extends({
+  return jsx("div", {
     css: Container,
     id: `DGN-control`,
-    style: style
-  }, props), scrollButtons && jsx(ButtonIcon, {
+    className: ['DGN-UI-Tab-Header-Container', className].join(' ').trim().replace(/\s+/g, ' '),
+    style: style,
+    ...props
+  }, scrollButtons && jsx(ButtonIcon, {
     css: scrollButton(true),
     name: isVertical ? 'ArrowUp' : 'ArrowLeft',
     viewType: 'text',
-    width: 24,
-    height: 24,
+    size: 'tiny',
     viewBox: true,
     disabled: !showScrollLeftButton,
     onClick: () => _onClickScrollButton(true)
   }), jsx("div", {
     css: TabHeader,
+    className: 'DGN-UI-Tab-Header',
     ref: ref,
     onScroll: e => {
       var _e$target;
@@ -107,27 +112,31 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: scrollButton(false),
     name: isVertical ? 'ArrowDown' : 'ArrowRight',
     viewType: 'text',
-    width: 24,
-    height: 24,
+    size: 'tiny',
     viewBox: true,
     disabled: !showScrollRightButton,
     onClick: () => _onClickScrollButton(false)
   }));
 }));
 TabHeader.defaultProps = {
-  scrollButtons: false
+  scrollButtons: false,
+  className: '',
+  style: {}
 };
 TabHeader.propTypes = {
   /** element to display in Tabs (like text) */
-  children: array,
+  children: PropTypes.array,
+
+  /** class for component */
+  className: PropTypes.string,
 
-  /** style inline of tabHeader */
-  style: object,
+  /** style inline of component */
+  style: PropTypes.object,
 
   /** show scroll buttons if true */
-  scrollButtons: bool,
+  scrollButtons: PropTypes.bool,
 
   /** any props else */
-  props: any
+  props: PropTypes.any
 };
 export default TabHeader;

package/components/tab/tab-panel.js

@@ -1,16 +1,22 @@
-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, forwardRef, useContext } from 'react';
 import { jsx, css } from '@emotion/core';
-import { number, node, any } from 'prop-types';
-import { color } from '../../styles/colors';
+import PropTypes from 'prop-types';
+import { color as colors } from '../../styles/colors';
 import TabContext from './context';
+import { borderBox, positionRelative } from '../../styles/general';
+const {
+  text: {
+    main
+  }
+} = colors;
 const TabPanel = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   index,
+  style,
+  className,
   ...props
 }, ref) => {
   const {
@@ -19,33 +25,44 @@ const TabPanel = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   } = useContext(TabContext);
   const isVertical = direction === 'vertical';
   const TabPanel = css`
-            box-sizing: border-box;
-            color: ${color.text.main};
             display: ${index === tabIndexState ? 'flex' : 'none'};
+            ${borderBox}
+            ${positionRelative}
+            color: ${main};
             height: ${isVertical ? '300px' : '100%'};
-            position: relative;
             padding: 0px ${isVertical ? '12px' : '10'};
             width: 100%;
             flex-direction: column;
         `;
-  return jsx("div", _extends({
+  return jsx("div", {
     css: TabPanel,
     "aria-labelledby": `tab-${index}`,
     id: `tab-panel-${index}`,
-    className: 'tab-panel',
+    className: ['DGN-UI-Tab-Panel', className].join(' ').trim().replace(/\s+/g, ' '),
+    style: style,
     role: 'tab-panel',
-    ref: ref
-  }, props), children);
+    ref: ref,
+    ...props
+  }, children);
 }));
-TabPanel.defaultProps = {};
+TabPanel.defaultProps = {
+  className: '',
+  style: {}
+};
 TabPanel.propTypes = {
   /** element to display in Tabs (like text) */
-  children: node,
+  children: PropTypes.node,
 
   /** index received in position of TabHeaderButton */
-  index: number,
+  index: PropTypes.number,
+
+  /** class for component */
+  className: PropTypes.string,
+
+  /** style inline of component */
+  style: PropTypes.object,
 
   /** any props else */
-  props: any
+  props: PropTypes.any
 };
 export default TabPanel;