@luminati-io/uikit 1.2.2 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luminati-io/uikit",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "author": "Bright Data (http://brightdata.com)",
   "license": "ISC",
   "description": "brightdata's design system",

package/src/icon.js

@@ -5,7 +5,7 @@ import React from 'react';
 import styled, {css} from 'styled-components';
 import PT from 'prop-types';
 
-import {theme, toPixel} from './utils';
+import {theme, toPixel, colorNames, iconNames} from './utils';
 import icons from '@icons';
 
 const toIconSize = size=>{
@@ -27,40 +27,36 @@ const toIconSize = size=>{
 };
 
 const Icon = React.forwardRef((props, ref)=>{
-    const {name, size, color, no_mask} = props;
+    const {name, size, color} = props;
     const ic = icons[name];
     if (!ic)
         return null;
-    const maskId = 'svgmask';
-    if (no_mask)
-    {
-        return <IconContainer ref={ref} size={size}>
-          <svg viewBox={ic.viewBox}>
-            <use href={`#${ic.id}`}/>
-          </svg>
-        </IconContainer>;
-    }
-    return <IconContainer ref={ref} size={size}>
-      <svg viewBox={ic.viewBox}>
-        <mask id={maskId}><use href={`#${ic.id}`}/></mask>
-        <rect fill={theme.color[color]} width="100%" height="100%"
-          mask={`url(#${maskId})`}/>
-      </svg>
-    </IconContainer>;
+    return <StyledSvg
+      ref={ref}
+      size={size}
+      viewBox={ic.viewBox}
+      color={theme.color[color]}
+      >
+      <use href={`#${ic.id}`}/>
+    </StyledSvg>;
 });
 Icon.displayName = 'Icon';
 Icon.defaultProps = {size: 'md'};
 Icon.propTypes = {
-    name: PT.string.isRequired,
-    color: PT.string,
+    name: PT.oneOf(iconNames).isRequired,
+    color: PT.oneOf(colorNames),
     size: PT.oneOf(['xxs', 'xs', 'sm', 'md', 'lg', 'xl']),
-    no_mask: PT.oneOfType([PT.bool, PT.number]),
 };
 
-const IconContainer = styled.span`
-    display: inline-block;
+export const IconColorComp = styled.rect.attrs({
+    width: '100%',
+    height: '100%',
+})``;
+
+const StyledSvg = styled.svg`
+    color: ${props=>props.color};
     ${props=>toIconSize(props.size)}
 `;
-IconContainer.displayName = 'IconContainer';
+StyledSvg.displayName = 'StyledSvg';
 
 export default Icon;

package/src/icon_button.js

@@ -0,0 +1,75 @@
+// LICENSE_CODE ZON
+'use strict'; /*jslint react:true*/
+
+import React from 'react';
+import styled, {css} from 'styled-components';
+import PT from 'prop-types';
+import utils from './utils';
+import Icon, {IconColorComp} from './icon';
+
+const {theme, toPixel, getCommonProps, iconNames} = utils;
+
+const IconButton = React.forwardRef((props, ref)=>{
+    const {variant: $variant, disabled, icon} = props;
+    const p = {...getCommonProps(props), disabled, $variant};
+    return <StyledIconButton ref={ref} {...p}>
+      <Icon name={icon} size="sm" />
+    </StyledIconButton>;
+});
+IconButton.displayName = 'IconButton';
+IconButton.defaultProps = {variant: 'icon-button'};
+IconButton.propTypes = {
+    variant: PT.oneOf(['icon', 'icon-button']),
+    icon: PT.oneOf(iconNames).isRequired,
+    disabled: PT.bool,
+};
+
+const StyledIconButton = styled.button`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    padding: 0;
+    cursor: pointer;
+    ${props=>{
+        return css`
+            background-color: ${theme.color.white};
+            border: ${props.$variant=='icon'?'0 none;':
+                `1px solid ${theme.color.gray_6}`};
+            ${IconColorComp} {
+                fill: ${theme.color.gray_9};
+            }
+        `;
+    }}
+    &:hover:not(:disabled) {
+        background-color: ${theme.color.gray_2};
+        border: ${props=>props.$variant=='icon'?'0 none;':
+            `1px solid ${theme.color.gray_8}`};
+    }
+    &:active:not(:disabled) {
+        background-color: ${theme.color.blue_4};
+        border: ${props=>props.$variant=='icon'?'0 none;':
+            `1px solid ${theme.color.blue_4}`};
+        ${IconColorComp} {
+            fill: ${theme.color.blue_11};
+        }
+    }
+    &:disabled {
+        border: ${props=>props.$variant=='icon'?'0 none;':
+            `1px solid ${theme.color.gray_7}`};
+        ${IconColorComp} {
+            fill: ${theme.color.gray_7};
+        }
+        cursor: not-allowed;
+    }
+    ${props=>{
+        let w = props.$variant=='icon'?24:36;
+        return css`
+            width: ${toPixel(w)};
+            height: ${toPixel(w)};
+        `;
+    }}
+`;
+StyledIconButton.displayName = 'StyledIconButton';
+
+export default IconButton;

package/src/index.js

@@ -6,6 +6,7 @@ import InfoChip from './infochip';
 import layout from './layout';
 import progress from './progress';
 import Icon from './icon';
+import IconButton from './icon_button';
 
 const {Header, Label, Hyperlink, Paragraph} = typography;
 const {Box, Flex} = layout;
@@ -16,6 +17,6 @@ export const Typography = {Header, Label, Hyperlink, Paragraph};
 const UIKit = {
     Layout,
     Typography,
-    Button, InfoChip, Progress, ProgressBar, Icon,
+    Button, InfoChip, Progress, ProgressBar, Icon, IconButton,
 };
 export default UIKit;

package/src/infochip.js

@@ -5,9 +5,10 @@ import React from 'react';
 import styled from 'styled-components';
 import PT from 'prop-types';
 
-import {theme} from './utils';
+import {theme, iconNames, getCommonProps} from './utils';
 import Flex from './layout/flex';
 import typography from './Typography';
+import Icon from './icon';
 
 const {Label} = typography;
 
@@ -23,14 +24,14 @@ const InfoChipWrapper = styled(Flex).attrs({
 
 const InfoChip = props=>{
     const {variant, text, icon} = props;
-    const bg_colors = {
+    const bgColors = {
         default: 'gray_3',
         success: 'green_3',
         alert: 'red_3',
         warning: 'yellow_3',
         info: 'blue_3',
     };
-    const bg_color = bg_colors[variant] || bg_colors.default;
+    const bgColor = bgColors[variant] || bgColors.default;
     const colors = {
         default: 'gray_11_50',
         success: 'green_11',
@@ -39,8 +40,9 @@ const InfoChip = props=>{
         info: 'blue_11',
     };
     const color = colors[variant] || colors.default;
-    return <InfoChipWrapper color={bg_color}>
-      {/* {icon && <Icon size="xxs" color={color} name={icon}/>} */}
+    const commonProps = getCommonProps(props);
+    return <InfoChipWrapper color={bgColor} {...commonProps}>
+      {icon && <Icon size="xxs" color={color} name={icon}/>}
       <Label variant="xs" color={color}>{text}</Label>
     </InfoChipWrapper>;
 };
@@ -49,7 +51,7 @@ InfoChip.defaultProps = {variant: 'default'};
 InfoChip.propTypes = {
     variant: PT.oneOf(['default', 'success', 'alert', 'warning', 'info']),
     text: PT.string,
-    icon: PT.string,
+    icon: PT.oneOf(iconNames),
 };
 
 export default InfoChip;

package/src/utils.js

@@ -2,6 +2,7 @@
 'use strict'; /*jslint react:true*/
 
 import _ from 'lodash';
+import icons from '@icons';
 
 export const theme = {
     color: {
@@ -93,6 +94,10 @@ export const theme = {
     }
 };
 
+export const colorNames = Object.keys(theme.color);
+
+export const iconNames = Object.keys(icons);
+
 export const toPixel = value=>`${value}px`;
 
 export const getCommonProps = props=>_.pickBy(props, (v, k)=>{