@dnanpm/styleguide 1.9.0 → 2.1.0

package/build/cjs/components/Icon/Icon.js

@@ -3,31 +3,50 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var styled = require('../../themes/styled.js');
+var styled = require('styled-components');
 var styledUtils = require('../../utils/styledUtils.js');
+var index = require('../Icons/index.js');
 var Icons = require('./Icons.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const IconsList = Icons;
-const Icon = ({ left, right, color, name, size, ...props }) => {
-    const iconColor = color || 'currentColor';
-    const iconSize = size || '1em';
-    const RenderIcon = IconsList[name];
+const IconsList = index;
+const StandardIconsList = Icons;
+const IconContainer = styled__default['default'].span `
+    width: ${p => p.size};
+    height: ${p => p.size};
+
+    ${p => (p.position === 'right' || p.position === 'middle' || p.right) &&
+    `
+            margin-left: ${styledUtils.getMultipliedSize(p.theme.base.baseWidth, 1)};
+        `}
+
+    ${p => (p.position === 'left' || p.position === 'middle' || p.left) &&
+    `
+            margin-right: ${styledUtils.getMultipliedSize(p.theme.base.baseWidth, 1)};
+        `}
+    
+    svg {
+        width: ${p => p.size};
+        height: ${p => p.size};
+    }
+`;
+const Icon = ({ name, icon: IconParam, color = 'currentColor', size = '1.5rem', 'data-testid': dataTestId, ...props }) => {
+    // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
+    const RenderIcon = name && (IconsList[name] || StandardIconsList[name]);
+    // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
     if (RenderIcon) {
-        return React__default['default'].createElement(RenderIcon, Object.assign({}, props, { size: iconSize, color: iconColor }));
+        return (React__default['default'].createElement(IconContainer, { position: props.position, size: size, left: props.left, right: props.right, className: "dnasg-icon", "data-testid": dataTestId },
+            React__default['default'].createElement(RenderIcon, Object.assign({}, props, { size: size, color: color }))));
+    }
+    if (IconParam) {
+        return (React__default['default'].createElement(IconContainer, { onClick: props.onClick, position: props.position, size: size, className: `dnasg-icon ${props.className || ''}`.trim(), "data-testid": dataTestId, left: props.left, right: props.right },
+            React__default['default'].createElement(IconParam, { size: size, color: color })));
     }
     return null;
-};
-/** @component */
-var Icon$1 = styled['default'](Icon)(({ left, right, size, color, theme }) => ({
-    width: size,
-    height: size,
-    color,
-    marginLeft: right ? styledUtils.getMultipliedSize(theme.base.baseWidth, 1) : 0,
-    marginRight: left ? styledUtils.getMultipliedSize(theme.base.baseWidth, 1) : 0,
-}));
-
-exports.default = Icon$1;
+};
+
+exports.default = Icon;