@luminati-io/uikit 1.3.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luminati-io/uikit",
-  "version": "1.3.0",
+  "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

@@ -36,6 +36,7 @@ const Icon = React.forwardRef((props, ref)=>{
       size={size}
       viewBox={ic.viewBox}
       color={theme.color[color]}
+      data-icon={name}
       >
       <use href={`#${ic.id}`}/>
     </StyledSvg>;
@@ -48,12 +49,7 @@ Icon.propTypes = {
     size: PT.oneOf(['xxs', 'xs', 'sm', 'md', 'lg', 'xl']),
 };
 
-export const IconColorComp = styled.rect.attrs({
-    width: '100%',
-    height: '100%',
-})``;
-
-const StyledSvg = styled.svg`
+export const StyledSvg = styled.svg`
     color: ${props=>props.color};
     ${props=>toIconSize(props.size)}
 `;

package/src/icon_button.js

@@ -5,14 +5,14 @@ import React from 'react';
 import styled, {css} from 'styled-components';
 import PT from 'prop-types';
 import utils from './utils';
-import Icon, {IconColorComp} from './icon';
+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}>
+    return <StyledIconButton ref={ref} {...p} data-testid="icon_button">
       <Icon name={icon} size="sm" />
     </StyledIconButton>;
 });
@@ -36,8 +36,8 @@ const StyledIconButton = styled.button`
             background-color: ${theme.color.white};
             border: ${props.$variant=='icon'?'0 none;':
                 `1px solid ${theme.color.gray_6}`};
-            ${IconColorComp} {
-                fill: ${theme.color.gray_9};
+            ${IconSvg} {
+                color: ${theme.color.gray_9};
             }
         `;
     }}
@@ -50,15 +50,15 @@ const StyledIconButton = styled.button`
         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};
+        ${IconSvg} {
+            color: ${theme.color.blue_11};
         }
     }
     &:disabled {
         border: ${props=>props.$variant=='icon'?'0 none;':
             `1px solid ${theme.color.gray_7}`};
-        ${IconColorComp} {
-            fill: ${theme.color.gray_7};
+        ${IconSvg} {
+            color: ${theme.color.gray_7};
         }
         cursor: not-allowed;
     }

package/src/index.js

@@ -1,22 +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, IconButton,
+    Button,
+    InfoChip,
+    Progress,
+    ProgressBar,
+    Icon,
+    IconButton,
+    Tooltip,
+    withTooltip,
 };
+
 export default UIKit;

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;

package/src/utils.js

@@ -3,6 +3,7 @@
 
 import _ from 'lodash';
 import icons from '@icons';
+import {css} from 'styled-components';
 
 export const theme = {
     color: {
@@ -132,5 +133,134 @@ export function fromTheme(propName, defaultValue){
     };
 }
 
+export const getIconProps = (comp, opt)=>{
+    const {size, icon, iconPlacement='left'} = opt;
+    const isLeft = !!icon&&iconPlacement=='left';
+    const isRight = !!icon&&iconPlacement=='right';
+    const iconSize = ()=>{
+        if (comp=='Link')
+            return {lg: 'sm', sm: 'xxs'}[size]||'xs';
+        if (comp=='Button')
+            return {sm: 'xs', xs: 'xxs'}[size]||'sm';
+        if (comp=='MenuItem')
+            return size=='sm'?'xs':'sm';
+    };
+    return {isLeft, isRight, name: icon, size: iconSize()};
+};
+
+export const getLinkProps = opt=>{
+    const {as, to, href, newTab} = opt;
+    let p = {as, to};
+    if (href)
+        p = {...p, as: 'a', href};
+    if (newTab)
+        p = {...p, target: '_blank', rel: 'noopener noreferrer'};
+    return p;
+};
+
+export const getButtonColors = props=>{
+    const {variant, disabled} = props;
+    if (disabled)
+    {
+        return {
+            color: theme.color.gray_9,
+            backColor: theme.color.gray_2,
+            border: `1px solid ${theme.color.gray_6}`,
+        };
+    }
+    const styles = {
+        primary: {
+            color: theme.color.white,
+            backColor: theme.color.blue_11,
+            hover: {backColor: theme.color.blue_10},
+            active: {
+                backColor: theme.color.blue_11,
+                boxShadow: '0 0 0 2px rgba(0, 106, 220, 0.4)',
+            },
+        },
+        secondary: {
+            color: theme.color.blue_11,
+            backColor: theme.color.white,
+            border: `1px solid ${theme.color.blue_11}`,
+            hover: {backColor: theme.color.blue_2},
+            active: {
+                backColor: theme.color.white,
+                boxShadow: '0 0 0 2px rgba(0, 106, 220, 0.4)',
+            },
+        },
+        negative: {
+            color: theme.color.white,
+            backColor: theme.color.red_11,
+            hover: {backColor: theme.color.red_10},
+            active: {
+                backColor: theme.color.red_11,
+                boxShadow: '0 0 0 2px rgba(205, 43, 49, 0.4)',
+            },
+        },
+        negative_secondary: {
+            color: theme.color.red_11,
+            backColor: theme.color.white,
+            border: `1px solid ${theme.color.red_11}`,
+            hover: {backColor: theme.color.red_2},
+            active: {
+                backColor: theme.color.white,
+                boxShadow: '0 0 0 2px rgba(205, 43, 49, 0.4)',
+            },
+        },
+        positive: {
+            color: theme.color.green_11,
+            backColor: theme.color.white,
+            border: `1px solid ${theme.color.green_11}`,
+            hover: {backColor: theme.color.green_2},
+            active: {
+                backColor: theme.color.white,
+                boxShadow: '0 0 0 2px rgba(6, 122, 111, 0.4)',
+            },
+        },
+        white: {
+            color: theme.color.gray_11_50,
+            iconColor: theme.color.gray_10,
+            backColor: theme.color.white,
+            border: `1px solid ${theme.color.gray_8}`,
+            hover: {backColor: theme.color.gray_2},
+            active: {
+                backColor: theme.color.gray_3,
+                border: `1px solid ${theme.color.gray_9}`,
+                iconColor: theme.color.gray_11_50,
+            },
+        },
+    };
+    return styles[variant]||styles.primary;
+};
+
+export 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);
+};
+
+export const toButtonSize = size=>{
+    let w = 40; // md
+    if (size=='lg')
+        w = 48;
+    if (size=='sm')
+        w = 36;
+    if (size=='xs')
+        w = 28;
+    return css`height: ${toPixel(w)};`;
+};
 
-export default {theme, toPixel, getCommonProps, getTypographyProps, fromTheme};
+export default {theme, toPixel, getCommonProps, getTypographyProps, fromTheme,
+    colorNames, iconNames};