@luminati-io/uikit 1.2.2 → 1.4.0

package/src/utils.js

@@ -2,6 +2,8 @@
 'use strict'; /*jslint react:true*/
 
 import _ from 'lodash';
+import icons from '@icons';
+import {css} from 'styled-components';
 
 export const theme = {
     color: {
@@ -93,6 +95,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)=>{
@@ -127,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};

package/src/button.js

@@ -1,180 +0,0 @@
-// 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 typography from './Typography';
-
-const {Typography, Label} = typography;
-const {theme, toPixel, getCommonProps} = utils;
-
-const Button = React.forwardRef((props, ref)=>{
-    const {text, variant, size, icon, iconPlacement, disabled} = props;
-    const iconLeft = !!icon&&iconPlacement=='left';
-    const iconRight = !!icon&&iconPlacement=='right';
-    const iconName = `ic_${icon}.svg`;
-    const iconSize = {sm: 'xs', xs: 'xxs'}[size]||'sm';
-    return <StyledButton ref={ref} {...getCommonProps(props)} variant={variant}
-      size={size} disabled={disabled} $inline={!icon}>
-      {/* {iconLeft&&<Icon name={iconName} size={iconSize}/>} */}
-      <Label variant={size=='xs'?'sm':'lg'} no_wrap>{text}</Label>
-      {/* {iconRight&&<Icon name={iconName} size={iconSize}/>} */}
-    </StyledButton>;
-});
-Button.displayName = 'Button';
-Button.defaultProps = {size: 'md', iconPlacement: 'left'};
-Button.propTypes = {
-    text: PT.string.isRequired,
-    variant: PT.oneOf(['primary', 'secondary', 'negative',
-        'negative_secondary', 'positive', 'white']).isRequired,
-    size: PT.oneOf(['xs', 'sm', 'md', 'lg']),
-    icon: PT.string,
-    iconPlacement: PT.oneOf(['left', 'right']),
-    disabled: PT.bool,
-};
-
-const StyledButton = styled.button`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 4px;
-    ${props=>{
-        let gap = 4;
-        let paddingLeft = 12;
-        let paddingRight = 16;
-        if (props.$inline)
-            paddingLeft = paddingRight;
-        if (props.size=='xs')
-        {
-            gap = 2;
-            paddingLeft = paddingRight = 8;
-        }
-        return css`
-            gap: ${toPixel(gap)};
-            padding-left: ${toPixel(paddingLeft)};
-            padding-right: ${toPixel(paddingRight)};
-        `;
-    }}
-    ${props=>{
-        const getColors = ()=>{
-            const {variant, disabled} = props;
-            if (disabled)
-            {
-                return {
-                    color: theme.color.gray_9,
-                    backColor: theme.color.gray_2,
-                    borderColor: theme.color.gray_6,
-                };
-            }
-            const styles = {
-                primary: {
-                    color: theme.color.white,
-                    backColor: theme.color.blue_11,
-                    borderColor: theme.color.blue_11,
-                    hover: {
-                        backColor: theme.color.blue_10,
-                        borderColor: theme.color.blue_10,
-                    },
-                    active: {
-                        backColor: theme.color.blue_11,
-                        borderColor: 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,
-                    borderColor: 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,
-                    borderColor: theme.color.red_11,
-                    hover: {
-                        backColor: theme.color.red_10,
-                        borderColor: theme.color.red_10,
-                    },
-                    active: {
-                        backColor: theme.color.red_11,
-                        borderColor: 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,
-                    borderColor: 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,
-                    borderColor: 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,
-                    borderColor: theme.color.gray_8,
-                    hover: {backColor: theme.color.gray_2},
-                    active: {
-                        backColor: theme.color.gray_3,
-                        borderColor: theme.color.gray_9,
-                        iconColor: theme.color.gray_11_50,
-                    },
-                },
-            };
-            return styles[variant]||styles.primary;
-        };
-        const colors = getColors();
-        return css`
-            background-color: ${colors.backColor};
-            border: 1px solid ${colors.borderColor};
-            ${Typography} { color: ${colors.color}; }
-            ${'' /* ${IconContainer} {
-                background-color: ${colors.iconColor||colors.color};
-            } */}
-            ${colors.hover&&`&:hover {
-                background-color: ${colors.hover.backColor};
-                border: 1px solid ${colors.hover.borderColor};
-            }`}
-            ${colors.active&&`&:active {
-                background-color: ${colors.active.backColor};
-                border: 1px solid ${colors.active.borderColor};
-                box-shadow: ${colors.active.boxShadow};
-                ${'' /* ${colors.active.iconColor&&`${IconContainer} {
-                    background-color: ${colors.active.iconColor};
-                }`} */}
-            }`}
-        `;
-    }}
-    ${props=>{
-        let w = 40; // md
-        if (props.size=='lg')
-            w = 48;
-        if (props.size=='sm')
-            w = 36;
-        if (props.size=='xs')
-            w = 28;
-        return css`height: ${toPixel(w)};`;
-    }}
-`;
-StyledButton.displayName = 'StyledButton';
-
-export default Button;