@luminati-io/uikit 1.2.2 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luminati-io/uikit",
-  "version": "1.2.2",
+  "version": "1.4.0",
   "author": "Bright Data (http://brightdata.com)",
   "license": "ISC",
   "description": "brightdata's design system",
@@ -12,9 +12,11 @@
     "webpack.*.js"
   ],
   "dependencies": {
-    "styled-components": "^5.3.6",
+    "@popperjs/core": "^2.11.6",
+    "lodash": "^4.17.21",
     "prop-types": "^15.8.1",
-    "lodash": "^4.17.21"
+    "react-popper": "^2.3.0",
+    "styled-components": "^5.3.6"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -30,6 +32,7 @@
     "@storybook/addon-links": "^6.5.15",
     "@storybook/builder-webpack4": "^6.5.15",
     "@storybook/builder-webpack5": "^6.5.15",
+    "@storybook/jest": "0.0.10",
     "@storybook/manager-webpack4": "^6.5.15",
     "@storybook/manager-webpack5": "^6.5.15",
     "@storybook/react": "^6.5.15",

package/src/button/button.js

@@ -0,0 +1,121 @@
+// LICENSE_CODE ZON
+'use strict'; /*jslint react:true*/
+
+import React from 'react';
+import styled, {css} from 'styled-components';
+import PT from 'prop-types';
+import {
+    iconNames,
+    toPixel,
+    toButtonSize,
+    getCommonProps,
+    getButtonColors,
+    getIconProps,
+} from '../utils';
+import typography from '../Typography';
+import Icon from '../icon';
+import LoadingIcon from './loading_icon';
+
+const {Typography, Label} = typography;
+
+const Button = React.forwardRef((props, ref)=>{
+    const {
+        text,
+        variant,
+        size,
+        disabled,
+        loading,
+        loadingText,
+    } = props;
+    const {isLeft, isRight, ...iconProps} = getIconProps('Button', props);
+    return <StyledButton
+      ref={ref}
+      type="button"
+      {...getCommonProps(props)}
+      variant={variant}
+      size={size}
+      disabled={loading||disabled}
+      iconPlacement={isLeft||loading?'left':isRight?'right':''}
+      >
+      {loading&&<LoadingIcon size={iconProps.size}/>}
+      {isLeft&&!loading&&<Icon {...iconProps}/>}
+      <Label variant={size=='xs'?'sm':'lg'} no_wrap>
+        {loading?loadingText:text}
+      </Label>
+      {isRight&&!loading&&<Icon {...iconProps}/>}
+    </StyledButton>;
+});
+Button.displayName = 'Button';
+Button.defaultProps = {
+    variant: 'primary',
+    size: 'md',
+    iconPlacement: 'left',
+    loadingText: 'Loading...',
+};
+Button.propTypes = {
+    text: PT.string.isRequired,
+    variant: PT.oneOf(['primary', 'secondary', 'negative',
+        'negative_secondary', 'positive', 'white']),
+    size: PT.oneOf(['xs', 'sm', 'md', 'lg']),
+    icon: PT.oneOf(iconNames),
+    iconPlacement: PT.oneOf(['left', 'right']),
+    disabled: PT.bool,
+    loading: PT.bool,
+    loadingText: PT.string,
+};
+
+const StyledButton = styled.button`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    cursor: pointer;
+    &:disabled { cursor: not-allowed; }
+    text-decoration: none;
+    &:hover, &:visited, :focus { text-decoration: none; }
+    ${props=>{
+        let gap = 4;
+        let paddingLeft = 16;
+        let paddingRight = 16;
+        if (props.iconPlacement=='left')
+            paddingLeft = 12;
+        else if (props.iconPlacement=='right')
+            paddingRight = 12;
+        if (props.size=='xs')
+        {
+            gap = 2;
+            paddingLeft = paddingRight = 8;
+        }
+        return css`
+            gap: ${toPixel(gap)};
+            padding-left: ${toPixel(paddingLeft)};
+            padding-right: ${toPixel(paddingRight)};
+        `;
+    }}
+    ${props=>{
+        const colors = getButtonColors(props);
+        return css`
+            background-color: ${colors.backColor};
+            border: ${colors.border||'0 none'};
+            ${Typography} { color: ${colors.color}; }
+            [data-icon] {
+                color: ${colors.iconColor||colors.color};
+            }
+            ${colors.hover&&`&:hover {
+                background-color: ${colors.hover.backColor};
+            }`}
+            ${colors.active&&`&:active {
+                background-color: ${colors.active.backColor};
+                border: ${colors.active.border};
+                box-shadow: ${colors.active.boxShadow};
+                ${colors.active.iconColor&&`[data-icon] {
+                    color: ${colors.active.iconColor};
+                }`}
+            }`}
+        `;
+    }}
+    ${props=>toButtonSize(props.size)}
+`;
+StyledButton.displayName = 'StyledButton';
+
+export default Button;

package/src/button/index.js

@@ -0,0 +1,6 @@
+// LICENSE_CODE ZON
+'use strict'; /*jslint react:true*/
+
+import Button from './button';
+
+export {Button};

package/src/button/loading_icon.js

@@ -0,0 +1,46 @@
+// LICENSE_CODE ZON
+'use strict'; /*jslint react:true*/
+
+import React from 'react';
+import styled from 'styled-components';
+import {toIconSize} from '../utils';
+
+const LoadingIcon = props=>
+<Spinner stroke="rgba(0,106,220,1)" viewBox="0 0 24 24" {...props}>
+  <g className="spinner_V8m1">
+    <circle cx="12" cy="12" r="9.5" fill="none" strokeWidth="3"/>
+  </g>
+</Spinner>;
+
+const Spinner = styled.svg`
+  ${props=>toIconSize(props.size)}
+  .spinner_V8m1 {
+    transform-origin: center;
+    animation: spinner_zKoa 2s linear infinite
+  }
+  .spinner_V8m1 circle {
+    stroke-linecap: round;
+    animation: spinner_YpZS 1.5s ease-in-out infinite
+  }
+  @keyframes spinner_zKoa {
+    100% {
+      transform: rotate(360deg)
+    }
+  }
+  @keyframes spinner_YpZS {
+    0% {
+      stroke-dasharray: 0 150;
+      stroke-dashoffset: 0
+    }
+    47.5% {
+      stroke-dasharray: 42 150;
+      stroke-dashoffset: -16
+    }
+    95%, 100% {
+      stroke-dasharray: 42 150;
+      stroke-dashoffset: -59
+    }
+  }
+`;
+
+export default LoadingIcon;

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,32 @@ 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]}
+      data-icon={name}
+      >
+      <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 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, {StyledSvg as IconSvg} 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} data-testid="icon_button">
+      <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}`};
+            ${IconSvg} {
+                color: ${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}`};
+        ${IconSvg} {
+            color: ${theme.color.blue_11};
+        }
+    }
+    &:disabled {
+        border: ${props=>props.$variant=='icon'?'0 none;':
+            `1px solid ${theme.color.gray_7}`};
+        ${IconSvg} {
+            color: ${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

@@ -1,21 +1,38 @@
 // LICENSE_CODE ZON
 'use strict'; /*jslint react:true*/
-import Button from './button';
-import typography from './Typography';
+import {Button} from './button';
+import Typography from './Typography';
 import InfoChip from './infochip';
-import layout from './layout';
-import progress from './progress';
+import Layout from './layout';
+import {Progress, ProgressBar} from './progress';
 import Icon from './icon';
+import IconButton from './icon_button';
+import Tooltip, {withTooltip} from './tooltip';
 
-const {Header, Label, Hyperlink, Paragraph} = typography;
-const {Box, Flex} = layout;
-const {Progress, ProgressBar} = progress;
+export {
+    Layout,
+    Typography,
+    Button,
+    InfoChip,
+    Progress,
+    ProgressBar,
+    Icon,
+    IconButton,
+    Tooltip,
+    withTooltip,
+};
 
-export const Layout = {Box, Flex};
-export const Typography = {Header, Label, Hyperlink, Paragraph};
 const UIKit = {
     Layout,
     Typography,
-    Button, InfoChip, Progress, ProgressBar, Icon,
+    Button,
+    InfoChip,
+    Progress,
+    ProgressBar,
+    Icon,
+    IconButton,
+    Tooltip,
+    withTooltip,
 };
+
 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/progress/index.js

@@ -4,4 +4,4 @@
 import Progress from './progess';
 import ProgressBar from './progress_bar';
 
-export default {Progress, ProgressBar};
+export {Progress, ProgressBar};

package/src/tooltip.js

@@ -0,0 +1,96 @@
+// LICENSE_CODE ZON
+'use strict'; /*jslint react:true*/
+
+import React, {useCallback, useState} from 'react';
+import {usePopper} from 'react-popper';
+import styled from 'styled-components';
+import PT from 'prop-types';
+import {theme} from './utils';
+import typography from './Typography';
+
+const {Label} = typography;
+
+const Tooltip = props=>{
+    const {children, tooltip, placement} = props;
+    const [referenceElement, setReferenceElement] = useState(null);
+    const [popperElement, setPopperElement] = useState(null);
+    const [arrowElement, setArrowElement] = useState(null);
+    const [visible, setVisible] = useState(false);
+    const show = useCallback(()=>setVisible(true), []);
+    const hide = useCallback(()=>setVisible(false), []);
+    const {styles, attributes} = usePopper(referenceElement,
+        popperElement, {
+        placement,
+        modifiers: [
+            {name: 'arrow', options: {element: arrowElement}},
+            {name: 'offset', options: {offset: [0, 8]}},
+        ],
+    });
+    return <>
+      <StyledTooltipReference ref={setReferenceElement}
+        onMouseEnter={show} onMouseLeave={hide}>
+        {children}
+      </StyledTooltipReference>
+      <StyledTooltipBody ref={setPopperElement} style={styles.popper}
+        {...attributes.popper} visible={visible}>
+        <Label variant="sm" color="white">{tooltip}</Label>
+        <StyledTooltipArrow ref={setArrowElement} style={styles.arrow}
+          {...attributes.arrow} visible={visible}/>
+      </StyledTooltipBody>
+    </>;
+};
+Tooltip.propTypes = {
+    tooltip: PT.node,
+    placement: PT.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
+};
+
+export const withTooltip = (Comp, tooltipProps)=>function WithTooltip(props){
+    return <Tooltip {...tooltipProps}>
+      <Comp {...props}/>
+    </Tooltip>;
+};
+
+const StyledTooltipBody = styled.div`
+    background-color: ${theme.color.gray_11_50};
+    padding: ${theme.spacing['03']};
+    width: fit-content;
+    max-width: 500px;
+    border-radius: ${theme.spacing['02']};
+    visibility: ${props=>props.visible ? 'visible': 'hidden'};
+    opacity: ${props=>props.visible ? 1 : 0};
+    transition: opacity 200ms;
+`;
+
+const StyledTooltipArrow = styled.div`
+    &, &::before {
+        position: absolute;
+        width: ${theme.spacing['04']};
+        height: ${theme.spacing['04']};
+        background: inherit;
+        border-radius: ${theme.spacing['01']};
+    }
+    visibility: hidden;
+    &::before {
+        visibility: ${props=>props.visible ? 'visible': 'hidden'};
+        content: '';
+        transform: rotate(45deg);
+    }
+    [data-popper-placement^='top'] > & {
+        bottom: -${theme.spacing['02']};
+    }
+    [data-popper-placement^='right'] > & {
+        left: -${theme.spacing['02']};
+    }
+    [data-popper-placement^='bottom'] > & {
+        top: -${theme.spacing['02']};
+    }
+    [data-popper-placement^='left'] > & {
+        right: -${theme.spacing['02']};
+    }
+`;
+
+const StyledTooltipReference = styled.div`
+    width: fit-content;
+`;
+
+export default Tooltip;