@luminati-io/uikit 1.1.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luminati-io/uikit",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "author": "Bright Data (http://brightdata.com)",
   "license": "ISC",
   "description": "brightdata's design system",
@@ -8,6 +8,7 @@
   "files": [
     "dist",
     "src",
+    "assets",
     "webpack.*.js"
   ],
   "dependencies": {
@@ -37,6 +38,7 @@
     "babel-loader": "9.1.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
+    "svg-sprite-loader": "^6.0.11",
     "webpack": "5.75.0",
     "webpack-cli": "5.0.1",
     "webpack-merge": "^5.8.0"

package/src/icon.js

@@ -0,0 +1,62 @@
+// LICENSE_CODE ZON
+'use strict'; /*jslint react:true*/
+
+import React from 'react';
+import styled, {css} from 'styled-components';
+import PT from 'prop-types';
+
+import {theme, toPixel, colorNames, iconNames} from './utils';
+import icons from '@icons';
+
+const toIconSize = size=>{
+    const toSize = value=>css`
+        width: ${toPixel(value)};
+        height: ${toPixel(value)};
+    `;
+    if (size=='xl')
+        return toSize(48);
+    if (size=='lg')
+        return toSize(32);
+    if (size=='sm')
+        return toSize(20);
+    if (size=='xs')
+        return toSize(16);
+    if (size=='xxs')
+        return toSize(12);
+    return toSize(24);
+};
+
+const Icon = React.forwardRef((props, ref)=>{
+    const {name, size, color} = props;
+    const ic = icons[name];
+    if (!ic)
+        return null;
+    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.oneOf(iconNames).isRequired,
+    color: PT.oneOf(colorNames),
+    size: PT.oneOf(['xxs', 'xs', 'sm', 'md', 'lg', 'xl']),
+};
+
+export const IconColorComp = styled.rect.attrs({
+    width: '100%',
+    height: '100%',
+})``;
+
+const StyledSvg = styled.svg`
+    color: ${props=>props.color};
+    ${props=>toIconSize(props.size)}
+`;
+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

@@ -5,6 +5,8 @@ import typography from './Typography';
 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;
@@ -15,6 +17,6 @@ export const Typography = {Header, Label, Hyperlink, Paragraph};
 const UIKit = {
     Layout,
     Typography,
-    Button, InfoChip, Progress, ProgressBar,
+    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)=>{

package/webpack.common.js

@@ -1,6 +1,12 @@
 // LICENSE_CODE ZON
 'use strict'; /*jslint node:true*/
 
+const path = require('path');
+
+const alias = {
+    '@icons': path.resolve(__dirname, 'assets/icons'),
+};
+
 const common = {
     module: {
         rules: [
@@ -8,9 +14,14 @@ const common = {
                 test: /src[\\/].+\.js$/,
                 exclude: /node_modules/,
                 use: ['babel-loader'],
+            },
+            {
+                test: /\.svg$/,
+                loader: 'svg-sprite-loader',
             }
         ]
     },
+    resolve: {alias},
 };
 
 module.exports = common;