@luminati-io/uikit 1.4.0 → 1.5.0

package/package.json

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

package/src/icon.js

@@ -49,7 +49,7 @@ Icon.propTypes = {
     size: PT.oneOf(['xxs', 'xs', 'sm', 'md', 'lg', 'xl']),
 };
 
-export const StyledSvg = styled.svg`
+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, {StyledSvg as IconSvg} 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} data-testid="icon_button">
-      <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}`};
-            ${IconSvg} {
-                color: ${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}`};
-        ${IconSvg} {
-            color: ${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}`};
-        ${IconSvg} {
-            color: ${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,9 +1,11 @@
 // LICENSE_CODE ZON
 'use strict'; /*jslint react:true*/
 import {Button} from './button';
+import Input from './input';
 import Typography from './Typography';
 import InfoChip from './infochip';
 import Layout from './layout';
+import {Link} from './link';
 import {Progress, ProgressBar} from './progress';
 import Icon from './icon';
 import IconButton from './icon_button';
@@ -11,8 +13,10 @@ import Tooltip, {withTooltip} from './tooltip';
 
 export {
     Layout,
+    Link,
     Typography,
     Button,
+    Input,
     InfoChip,
     Progress,
     ProgressBar,
@@ -24,8 +28,10 @@ export {
 
 const UIKit = {
     Layout,
+    Link,
     Typography,
     Button,
+    Input,
     InfoChip,
     Progress,
     ProgressBar,

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/tooltip.js

@@ -5,7 +5,7 @@ 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 {theme, tooltipPlacements} from './utils';
 import typography from './Typography';
 
 const {Label} = typography;
@@ -26,6 +26,8 @@ const Tooltip = props=>{
             {name: 'offset', options: {offset: [0, 8]}},
         ],
     });
+    if (!tooltip)
+        return children;
     return <>
       <StyledTooltipReference ref={setReferenceElement}
         onMouseEnter={show} onMouseLeave={hide}>
@@ -39,9 +41,10 @@ const Tooltip = props=>{
       </StyledTooltipBody>
     </>;
 };
+Tooltip.defaultProps = {placement: 'top'};
 Tooltip.propTypes = {
     tooltip: PT.node,
-    placement: PT.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
+    placement: PT.oneOf(tooltipPlacements),
 };
 
 export const withTooltip = (Comp, tooltipProps)=>function WithTooltip(props){

package/src/utils.js

@@ -149,10 +149,8 @@ export const getIconProps = (comp, opt)=>{
 };
 
 export const getLinkProps = opt=>{
-    const {as, to, href, newTab} = opt;
-    let p = {as, to};
-    if (href)
-        p = {...p, as: 'a', href};
+    const {as, href, newTab} = opt;
+    let p = {as, href};
     if (newTab)
         p = {...p, target: '_blank', rel: 'noopener noreferrer'};
     return p;
@@ -262,5 +260,11 @@ export const toButtonSize = size=>{
     return css`height: ${toPixel(w)};`;
 };
 
+export const tooltipPlacements = (()=>{
+    const positions = ['auto', 'top', 'right', 'bottom', 'left'];
+    const variants = ['', '-start', '-end'];
+    return positions.flatMap(p=>variants.map(v=>p+v));
+})();
+
 export default {theme, toPixel, getCommonProps, getTypographyProps, fromTheme,
-    colorNames, iconNames};
+    colorNames, iconNames, tooltipPlacements};

package/webpack.common.js

@@ -2,6 +2,7 @@
 'use strict'; /*jslint node:true*/
 
 const path = require('path');
+const {svgRule} = require('./webpack.shared.js');
 
 const alias = {
     '@icons': path.resolve(__dirname, 'assets/icons'),
@@ -15,10 +16,7 @@ const common = {
                 exclude: /node_modules/,
                 use: ['babel-loader'],
             },
-            {
-                test: /\.svg$/,
-                loader: 'svg-sprite-loader',
-            }
+            svgRule,
         ]
     },
     resolve: {alias},

package/webpack.shared.js

@@ -0,0 +1,11 @@
+// LICENSE_CODE ZON
+'use strict'; /*jslint node:true, es9:true*/
+
+const svgRule = {
+    test: /\.svg$/,
+    loader: 'svg-sprite-loader',
+};
+
+module.exports = {
+    svgRule,
+};