@luminati-io/uikit 1.3.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luminati-io/uikit",
-  "version": "1.3.0",
+  "version": "1.5.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,11 +49,6 @@ 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`
     color: ${props=>props.color};
     ${props=>toIconSize(props.size)}

package/src/icon_button.js

@@ -5,16 +5,24 @@ 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 from './icon';
+import Tooltip from './tooltip';
 
-const {theme, toPixel, getCommonProps, iconNames} = utils;
+const {theme, toPixel, getCommonProps, iconNames, tooltipPlacements} = 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>;
+    const {variant, disabled, icon, tooltip, tooltipPlacement} = props;
+    return <Tooltip tooltip={tooltip} placement={tooltipPlacement}>
+      <StyledIconButton
+        ref={ref}
+        {...getCommonProps(props)}
+        variant={variant}
+        disabled={disabled}
+        data-testid="icon_button"
+        >
+        <Icon name={icon} size="sm" />
+      </StyledIconButton>
+    </Tooltip>;
 });
 IconButton.displayName = 'IconButton';
 IconButton.defaultProps = {variant: 'icon-button'};
@@ -22,6 +30,8 @@ IconButton.propTypes = {
     variant: PT.oneOf(['icon', 'icon-button']),
     icon: PT.oneOf(iconNames).isRequired,
     disabled: PT.bool,
+    tooltip: PT.node,
+    tooltipPlacement: PT.oneOf(tooltipPlacements),
 };
 
 const StyledIconButton = styled.button`
@@ -34,36 +44,30 @@ const StyledIconButton = styled.button`
     ${props=>{
         return css`
             background-color: ${theme.color.white};
-            border: ${props.$variant=='icon'?'0 none;':
+            border: ${props.variant=='icon'?'0 none;':
                 `1px solid ${theme.color.gray_6}`};
-            ${IconColorComp} {
-                fill: ${theme.color.gray_9};
-            }
+            [data-icon] { color: ${theme.color.gray_9}; }
         `;
     }}
     &:hover:not(:disabled) {
         background-color: ${theme.color.gray_2};
-        border: ${props=>props.$variant=='icon'?'0 none;':
+        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;':
+        border: ${props=>props.variant=='icon'?'0 none;':
             `1px solid ${theme.color.blue_4}`};
-        ${IconColorComp} {
-            fill: ${theme.color.blue_11};
-        }
+        [data-icon] { color: ${theme.color.blue_11}; }
     }
     &:disabled {
-        border: ${props=>props.$variant=='icon'?'0 none;':
+        border: ${props=>props.variant=='icon'?'0 none;':
             `1px solid ${theme.color.gray_7}`};
-        ${IconColorComp} {
-            fill: ${theme.color.gray_7};
-        }
+        [data-icon] { color: ${theme.color.gray_7}; }
         cursor: not-allowed;
     }
     ${props=>{
-        let w = props.$variant=='icon'?24:36;
+        let w = props.variant=='icon'?24:36;
         return css`
             width: ${toPixel(w)};
             height: ${toPixel(w)};

package/src/index.js

@@ -1,22 +1,44 @@
 // LICENSE_CODE ZON
 'use strict'; /*jslint react:true*/
-import Button from './button';
-import typography from './Typography';
+import {Button} from './button';
+import Input from './input';
+import Typography from './Typography';
 import InfoChip from './infochip';
-import layout from './layout';
-import progress from './progress';
+import Layout from './layout';
+import {Link} from './link';
+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,
+    Link,
+    Typography,
+    Button,
+    Input,
+    InfoChip,
+    Progress,
+    ProgressBar,
+    Icon,
+    IconButton,
+    Tooltip,
+    withTooltip,
+};
 
-export const Layout = {Box, Flex};
-export const Typography = {Header, Label, Hyperlink, Paragraph};
 const UIKit = {
     Layout,
+    Link,
     Typography,
-    Button, InfoChip, Progress, ProgressBar, Icon, IconButton,
+    Button,
+    Input,
+    InfoChip,
+    Progress,
+    ProgressBar,
+    Icon,
+    IconButton,
+    Tooltip,
+    withTooltip,
 };
+
 export default UIKit;

package/src/input/index.js

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

package/src/input/toggle.js

@@ -0,0 +1,105 @@
+// LICENSE_CODE ZON
+'use strict'; /*jslint react:true*/
+
+import React, {useCallback} from 'react';
+import styled from 'styled-components';
+import PT from 'prop-types';
+import {theme, toPixel, getCommonProps} from '../utils';
+import typography from '../Typography';
+
+const {Label} = typography;
+
+const Toggle = props=>{
+  const {value, label, disabled, size, onChange} = props;
+  const handleChange = useCallback(evt=>{
+      const {checked} = evt.target;
+      onChange?.(checked, evt);
+  }, [onChange]);
+  const color = disabled?value?'gray-11':'gray-9':
+      value?'gray-11-50':'gray-11';
+  return <ToggleLabel {...getCommonProps(props)} $size={size}>
+    <ToggleInput $size={size} checked={value} onChange={handleChange}
+      disabled={disabled} />
+    {label&&<Label variant="sm" tag="span" color={color} no_wrap>
+      {label}
+    </Label>}
+  </ToggleLabel>;
+};
+Toggle.displayName = 'Toggle';
+Toggle.defaultProps = {size: 'sm'};
+Toggle.propTypes = {
+  value: PT.bool,
+  label: PT.string,
+  disabled: PT.bool,
+  size: PT.oneOf(['xs', 'sm']),
+  onChange: PT.func,
+};
+
+const ToggleLabel = styled.label`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin: 0;
+`;
+ToggleLabel.displayName = 'ToggleLabel';
+
+const ToggleInput = styled.input.attrs({type: 'checkbox'})`
+  && {
+      box-sizing: border-box;
+      width: ${props=>toPixel(props.$size=='xs'?32:44)};
+      height: ${props=>toPixel(props.$size=='xs'?16:20)};
+      display: flex;
+      align-items: center;
+      margin: 0;
+      padding: 0 1px;
+      vertical-align: top;
+      background-color: ${theme.color.gray_5};
+      border: 1px solid ${theme.color.gray_7};
+      border-radius: 25px;
+      outline: none;
+      outline-offset: 0;
+      cursor: pointer;
+      appearance: none;
+      transition: all 0.3s cubic-bezier(0.2, 0.85, 0.32, 1.2);
+      &:hover {
+          background-color: ${theme.color.gray_7};
+          border-color: ${theme.color.gray_8};
+      }
+      &:focus {
+          outline: none;
+          outline-offset: 0;
+          background-color: ${theme.color.gray_9};
+          border-color: ${theme.color.gray_9};
+      }
+      &:checked {
+          background-color: ${theme.color.blue_11};
+          border-color: ${theme.color.blue_11};
+          &:hover {
+              background-color: ${theme.color.blue_10};
+              border-color: ${theme.color.blue_10};
+          }
+          &:focus {
+              background-color: ${theme.color.blue_11};
+              border-color: ${theme.color.blue_11};
+              outline: 3px solid ${theme.color.blue_5};
+          }
+      }
+  }
+  &::after {
+      content: "";
+      display: block;
+      width: ${props=>toPixel(props.$size=='xs'?12:16)};
+      height: ${props=>toPixel(props.$size=='xs'?12:16)};
+      border-radius: 50%;
+      background-color: ${theme.color.white};
+      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
+      transition: all 0.3s cubic-bezier(0.2, 0.85, 0.32, 1.2);
+  }
+  &:checked::after {
+      transform: translateX(${props=>toPixel(props.$size=='xs'?15:23)});
+  }
+`;
+ToggleInput.displayName = 'ToggleInput';
+
+export default Toggle;

package/src/layout/flex.js

@@ -1,11 +1,13 @@
 // LICENSE_CODE ZON
 'use strict'; /*jslint react:true*/
 
+import React from 'react';
 import styled from 'styled-components';
+import PT from 'prop-types';
 
 import Box from './box';
 
-const Flex = styled(Box)`
+const StyledFlex = styled(Box)`
     display: ${props=>props.inline ? 'inline-flex' : 'flex'};
     align-items: ${props=>props.align_items};
     align-content: ${props=>props.align_content};
@@ -17,7 +19,23 @@ const Flex = styled(Box)`
     row-gap: ${props=>props.row_gap};
     column-gap: ${props=>props.column_gap};
 `;
+const Flex = props=>{
+    return <StyledFlex {...props}/>;
+};
 Flex.displayName = 'Flex';
 Flex.defaultProps = {flex_direction: 'row'};
+Flex.propTypes = {
+    inline: PT.bool,
+    align_items: PT.oneOf(['flex-start', 'center']),
+    align_content: PT.string,
+    justify_items: PT.string,
+    justify_content: PT.string,
+    flex_wrap: PT.string,
+    flex_direction: PT.oneOf(['row', 'row-reverse', 'column',
+        'column-reverse']),
+    gap: PT.string,
+    row_gap: PT.string,
+    column_gap: PT.string,
+};
 
 export default Flex;

package/src/link/index.js

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

package/src/link/link.js

@@ -0,0 +1,84 @@
+// LICENSE_CODE ZON
+'use strict'; /*jslint react:true*/
+
+import React from 'react';
+import styled from 'styled-components';
+import PT from 'prop-types';
+import {
+    theme,
+    iconNames,
+    toPixel,
+    getCommonProps,
+    getIconProps,
+    getLinkProps,
+} from '../utils';
+import typography from '../Typography';
+import Icon from '../icon';
+
+const {Typography, Label} = typography;
+
+const Link = React.forwardRef((props, ref)=>{
+    const {text, variant, size, icon} = props;
+    const {isLeft, isRight, ...iconProps} = getIconProps('Link', props);
+    const labelVariant = {lg: 'lg', sm: 'xs'}[size]||'base';
+    return <StyledLink
+      ref={ref}
+      {...getCommonProps(props)}
+      {...getLinkProps(props)}
+      variant={variant}
+      size={size}
+      noIcon={!icon}
+      >
+      {isLeft&&<Icon {...iconProps}/>}
+      <Label variant={labelVariant} no_wrap>{text}</Label>
+      {isRight&&<Icon {...iconProps}/>}
+    </StyledLink>;
+});
+Link.displayName = 'Link';
+Link.defaultProps = {
+    variant: 'primary',
+    size: 'md',
+    iconPlacement: 'left',
+};
+Link.propTypes = {
+    text: PT.string.isRequired,
+    variant: PT.oneOf(['primary', 'secondary']),
+    size: PT.oneOf(['sm', 'md', 'lg']),
+    icon: PT.oneOf(iconNames),
+    iconPlacement: PT.oneOf(['left', 'right']),
+    href: PT.string,
+    newTab: PT.bool,
+};
+
+const StyledLink = styled.a`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    background: 0 none;
+    border: 0 none;
+    padding: 0;
+    gap: ${props=>toPixel(props.size=='lg'?8:4)};
+    ${Typography} {
+        color: ${props=>props.variant=='primary'?
+            theme.color.blue_11:theme.color.gray_11_50};
+        text-decoration: ${props=>props.variant=='secondary'&&
+            props.noIcon?'underline':'none'};
+    }
+    [data-icon] {
+        color: ${props=>props.variant=='primary'?
+            theme.color.blue_11:theme.color.gray_11_50};
+    }
+    &:hover {
+        ${Typography} {
+            color: ${theme.color.blue_11};
+            text-decoration: ${props=>props.variant=='secondary'&&
+                props.noIcon?'underline':'none'};
+        }
+        [data-icon] { color: ${theme.color.blue_11}; }
+    }
+    &:hover, :visited, :focus { text-decoration: none; }
+`;
+StyledLink.displayName = 'StyledLink';
+
+export default Link;

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};