groundfloor-react-ui 1.2.8 → 1.2.10

package/components/Form/SubmitComponent.js

@@ -1,63 +0,0 @@
-import React, { Fragment } from 'react';
-import { PrimaryButton, SecondaryButton } from '../Button';
-import { SubmitButtonContainer } from '../DesignComponent';
-
-
-export const SubmitComponent = ({ formData, onSubmit, onReset, style, ...props }) => {
-
-    const SubmitInput = (item) => {
-        return (
-            <PrimaryButton
-                block={item.block}
-                style={item.style}
-                disabled={item.disabled}
-                type="submit"
-                children={item.children}
-                onClick={() => { item.onClick() }} />
-        )
-    }
-
-    const ResetInput = (item) => {
-        return (
-            <SecondaryButton
-                block={item.block}
-                disabled={props.disabled}
-                children={item.children}
-                onClick={() => { item.onClick() }} />
-        )
-    }
-
-    const CancelInput = (item) => {
-        return (
-            <SecondaryButton
-                block={item.block}
-                disabled={props.disabled}
-                children={item.children}
-                onClick={() => { item.onClick() }} />
-        )
-    }
-
-    const submitComponent = (item) => {
-        switch (item.type) {
-            case 'submit':
-                return SubmitInput(item)
-            case 'reset':
-                return ResetInput(item)
-            case 'cancel':
-                return CancelInput(item)
-            default:
-                break;
-        }
-    }
-    return <Fragment>
-        <SubmitButtonContainer style={style}>
-            {formData && formData.map((row, i) => {
-                return row.map((item, i) => {
-                    return submitComponent(item)
-                })
-            })}
-        </SubmitButtonContainer>
-    </Fragment>
-}
-
-

package/components/Form/index.js

@@ -1,5 +0,0 @@
-export * from './FormComponent';
-export * from './HeaderComponent';
-export * from './SubmitComponent';
-
-

package/components/GroupAvatars/GroupAvatars.js

@@ -1,139 +0,0 @@
-import PropTypes from 'prop-types';
-import React from "react";
-import styled, { useTheme } from 'styled-components';
-import { Avatar } from '../Avatar';
-import defaultThemeColor from '../constants/defaultThemeColor';
-/**
- * Primary UI component for user interaction
- */
-
-const StyledContainer = styled.span`
-    background: transparent;
-    position: relative;
-    display: flex;
-    align-items: center;
-    
-    &>span:not(:first-of-type){
-        margin-left: -13px;
-    }
-`;
-
-const StyledQty = styled.p`
-    color: ${({ theme, variantQty }) => theme.variant[variantQty]};
-    margin: 0;
-    margin-left: 7px;
-    font-size: 16px;
-`;
-
-export const GroupAvatars = ({ items, block, size, variantCircle, variantName, variantQty, flagName, user, colorCircle, colorBorderCircle, ...props }) => {
-    const activeTheme = useTheme() || defaultThemeColor;
-
-    return (
-        <StyledContainer block={block} {...props}>
-            {items?.map((user, i) => {
-
-                let customStylesCircle = {}
-                let customStylesImage = {}
-
-                if (colorCircle) {
-                    customStylesCircle.backgroundColor = `${activeTheme.variant[colorCircle]}`
-                } else {
-                    customStylesCircle.backgroundColor = `${activeTheme.variant[variantCircle]}`
-                }
-                if (i !== 0) {
-                    customStylesCircle.border = colorBorderCircle ? `2px solid ${colorBorderCircle}` : `2px solid ${activeTheme.variant[variantCircle]}`
-                    customStylesImage.border = colorBorderCircle ? `2px solid ${colorBorderCircle}` : `2px solid ${activeTheme.variant[variantCircle]}`
-                }
-
-                return (
-                    //If only one user display its avatar and the name
-                    (items.length === 1) ? (
-                        <Avatar
-                            key={user.id}
-                            // variantCircle={variantCircle}
-                            customStylesContainer={{ width: 'auto' }}
-                            customStylesName={{ color: `${activeTheme.variant[{ variantName }]}` }}
-                            // block={false}
-                            size={size}
-                            toggleName={true}
-                            user={user}
-                            customStylesCircle={customStylesCircle}
-                            customStylesImage={customStylesImage}
-                        // customStylesCircle={colorCircle ? {backgroundColor: `${theme.variant[colorCircle]}`} : {backgroundColor: `${theme.variant[variantCircle]}`}}
-                        // colorBorderCircle={i !== 0 ? colorBorderCircle : colorCircle ? colorCircle : variantCircle}
-                        />) : (i <= 3) ? (
-                            //else display just the avatar
-                            <Avatar
-                                key={user.id}
-                                // variantCircle={variantCircle}
-                                // variantName={variantName}
-                                customStylesContainer={{ width: 'auto' }}
-                                customStylesName={{ color: `${activeTheme.variant[{ variantName }]}` }}
-                                // block={false}
-                                size={size}
-                                toggleName={false}
-                                user={user}
-                                customStylesCircle={customStylesCircle}
-                                customStylesImage={customStylesImage}
-                            // colorCircle={colorCircle}
-                            // colorBorderCircle={i !== 0 ? colorBorderCircle : colorCircle ? colorCircle : variantCircle}
-                            />
-                            //display only 4 avatars if more than 4 users then just display the quantity
-                        ) : (null)
-                )
-            })}
-            {(items.length - 4) > 0 ? (<StyledQty theme={activeTheme} variantQty={variantQty}>+{items.length - 4}</StyledQty>) : null}
-        </StyledContainer>
-    );
-};
-
-GroupAvatars.propTypes = {
-    /**
-     * Background color of circle base on variant. primary-1, 2, error, etc.
-     */
-    variantCircle: PropTypes.string,
-    /**
-     * Color of the text name base on variant. primary-1, 2, error, etc.
-     */
-    variantName: PropTypes.string,
-    /**
-     * How large should the Avatar be?
-     */
-    size: PropTypes.oneOf(['SM', 'MD', 'LG']),
-    /**
-     * Object with user information. To display the user's picture need a key "url". To display the name need a key "userName"
-     */
-    user: PropTypes.object,
-    /**
-     * Theme object
-     */
-    theme: PropTypes.object,
-    /**
-     * Optional Custom color of the circle
-     */
-    colorCircle: PropTypes.string,
-    /**
-     * Optional Custom color of the border circle (if missing no border displayed)
-     */
-    colorBorderCircle: PropTypes.string,
-    /**
-     * Optional variantQty color of the text for the quantity
-     */
-    variantQty: PropTypes.string,
-};
-
-
-
-GroupAvatars.defaultProps = {
-    variantCircle: 'primary-1',
-    variantName: 'primary-2',
-    block: false,
-    size: 'MD',
-    flagName: false,
-    user: {
-        userName: "1",
-    },
-    colorCircle: null,
-    colorBorderCircle: "#FFFFFF",
-    variantQty: 'primary-1'
-};

package/components/GroupAvatars/index.js

@@ -1 +0,0 @@
-export * from './GroupAvatars';

package/components/GroupButtons/ButtonPopup.js

@@ -1,191 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { usePopperTooltip } from 'react-popper-tooltip';
-import styled, { useTheme } from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
-
-/**
- * Primary UI component for user interaction
- */
-
-const buttonDisabledBg = '#BBC4CF';
-
-const StyledTooltip = styled.div`
-    max-width: inherit;
-    width: inherit;
-    font-size: 14px;
-    padding: 4px 8px;
-    color: ${({ theme, variantTPtext }) => variantTPtext ? theme.variant[variantTPtext] : '#fff'};
-    text-align: center;
-    background-color: ${({ theme, variantTPbg }) => variantTPbg ? theme.variant[variantTPbg] : '#6b747f'};
-    border-radius: 4px;
-    border: 1px solid  ${({ theme, variantTPbg }) => variantTPbg ? theme.variant[variantTPbg] : '#6b747f'};
-
-    &[data-popper-placement*='bottom'] .tooltip-arrow::before {
-        border-color: transparent transparent ${({ theme, variantTPbg }) => variantTPbg ? theme.variant[variantTPbg] : '#6b747f'} transparent;
-    }
-    
-    &[data-popper-placement*='bottom'] .tooltip-arrow::after {
-        border-color: transparent transparent ${({ theme, variantTPbg }) => variantTPbg ? theme.variant[variantTPbg] : '#6b747f'} transparent;
-    }
-    
-    &[data-popper-placement*='top'] .tooltip-arrow::before {
-        border-color: ${({ theme, variantTPbg }) => variantTPbg ? theme.variant[variantTPbg] : '#6b747f'} transparent transparent transparent;
-    }
-    
-    &[data-popper-placement*='top'] .tooltip-arrow::after {
-        border-color: ${({ theme, variantTPbg }) => variantTPbg ? theme.variant[variantTPbg] : '#6b747f'} transparent transparent transparent;
-    }
-`
-
-const StyledButton = styled.div`
-    display: flex;
-    color: ${({ theme, disabled, variant, variantDisable }) => disabled ? theme.variant[variantDisable] : theme.variant[variant]};
-    background: ${({ theme, disabled, bgVariant, variantBgDisable }) => disabled ? theme.variant[variantBgDisable] : theme.variant[bgVariant]};
-    justify-content: space-evenly;
-    align-items: center;
-    cursor: ${({ disabled }) => disabled ? 'not-allowed' : 'pointer'};
-    border: none;
-    margin: 0;
-    padding: 0;
-    flex-grow: 1;
-
-    svg path {
-        fill: ${({ theme, disabled, variant, variantDisable }) => disabled ? theme.variant[variantDisable] : theme.variant[variant]};
-    }
-`;
-
-const StyledItem = styled.div`
-    display: flex;
-    justify-content: space-evenly;
-    flex-grow: 1;
-    align-items: stretch;
-`;
-
-export const ButtonPopup = ({ label, index, style, items, variant, borderVariant, bgVariant, variantDisable, variantBgDisable, disabled, divider, indexPrefix, onClick, icon, variantTPtext, variantTPbg, ...props }) => {
-    const theme = useTheme() || defaultThemeColor;
-
-    const {
-        getArrowProps,
-        getTooltipProps,
-        setTooltipRef,
-        setTriggerRef,
-        visible,
-    } = usePopperTooltip();
-
-    return (
-        <>
-            <StyledItem ref={setTriggerRef}
-            >
-                <StyledButton
-                    variant={variant}
-                    borderVariant={borderVariant}
-                    bgVariant={bgVariant}
-                    variantDisable={variantDisable}
-                    variantBgDisable={variantBgDisable}
-                    // title={item.label}
-                    disabled={disabled}
-                    onClick={disabled ? null : () => { onClick(onClick) }}
-                >
-                    {icon}
-                </StyledButton>
-                {divider}
-            </StyledItem>
-            {visible && (
-                <StyledTooltip
-                    variantTPtext={variantTPtext}
-                    variantTPbg={variantTPbg}
-                    ref={setTooltipRef}
-                    {...getTooltipProps({ className: 'tooltip-container' })}
-                >
-                    {label}
-                    <div {...getArrowProps({ className: 'tooltip-arrow' })} />
-                </StyledTooltip>
-            )}
-        </>
-    );
-};
-
-ButtonPopup.propTypes = {
-    /**
-     * Common color of icons. primary-1, 2, error, etc.
-     * If this props is not pass each Icon will have its own color
-     */
-    variant: PropTypes.string,
-    /**
-     * Color of the border. primary-1, 2, error, etc.
-     */
-    borderVariant: PropTypes.string,
-    /**
-     * Color of the background. primary-1, 2, error, etc.
-     */
-    bgVariant: PropTypes.string,
-    /**
-     * Color of icon when disabled. primary-1, 2, error, etc.
-     */
-    variantDisable: PropTypes.string,
-    /**
-     * Color of background when disabled. primary-1, 2, error, etc.
-     */
-    variantBgDisable: PropTypes.string,
-    /**
-     * String to prefix the index number in the map function
-     */
-    indexPrefix: PropTypes.string,
-    /**
-     * Theme object
-     */
-    theme: PropTypes.object,
-    /**
-     * Array of items. Each item must be an object in this format:
-     * {
-     *   label: "Test1",
-     *   icon: <Icon icon='plus-outlined' size={18} />,
-     *   disabled: true
-     *   }
-     */
-    items: PropTypes.array,
-    /**
-     * Optional boolean to disable all buttons
-     */
-    allDisabled: PropTypes.bool,
-    /**
-     * Divider component with vertical prop
-     */
-    divider: PropTypes.any,
-    /**
-     * onClick function to handle click
-     */
-    onClick: PropTypes.func,
-    /**
-     * Color of the text of the tooltip. primary-1, 2, error, etc.
-     */
-    variantTPtext: PropTypes.string,
-    /**
-     * Color of the background of the tooltip. primary-1, 2, error, etc.
-     */
-    variantTPbg: PropTypes.string,
-};
-
-StyledItem.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-StyledButton.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-StyledTooltip.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-ButtonPopup.defaultProps = {
-    theme: defaultThemeColor,
-    indexPrefix: 'btn-group',
-    borderVariant: 'neutral-4',
-    bgVariant: 'bgColor',
-    variantDisable: 'neutral-2',
-    variantBgDisable: 'bgColor',
-    variantTPtext: null,
-    variantTPbg: null,
-};

package/components/GroupButtons/GroupButtons.js

@@ -1,150 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled, { useTheme } from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
-
-/**
- * Primary UI component for user interaction
- */
-
-const buttonDisabledBg = '#BBC4CF';
-
-const StyledContainer = styled.div`
-    display: flex;
-    justify-content: space-evenly;
-    align-items: stretch;
-    height: 42px;
-    border: 1px solid ${({ theme, borderVariant }) => theme.variant[borderVariant]};
-    border-radius: 3px;
-`;
-
-const StyledItem = styled.div`
-    display: flex;
-    justify-content: space-evenly;
-    flex-grow: 1;
-    align-items: stretch;
-`;
-
-const StyledButton = styled.div`
-    display: flex;
-    color: ${({ theme, disabled, variant, variantDisable }) => disabled ? theme.variant[variantDisable] : theme.variant[variant]};
-    background: ${({ theme, disabled, bgVariant, variantBgDisable }) => disabled ? theme.variant[variantBgDisable] : theme.variant[bgVariant]};
-    justify-content: space-evenly;
-    align-items: center;
-    cursor: ${({ disabled }) => disabled ? 'not-allowed' : 'pointer'};
-    border: none;
-    margin: 0;
-    padding: 0;
-    flex-grow: 1;
-
-    svg path {
-        fill: ${({ theme, disabled, variant, variantDisable }) => disabled ? theme.variant[variantDisable] : theme.variant[variant]};
-    }
-`;
-
-export const GroupButtons = ({ style, items, variant, borderVariant, bgVariant, variantDisable, variantBgDisable, allDisabled, divider, indexPrefix, onClick, ...props }) => {
-    const theme = useTheme() || defaultThemeColor;
-
-    return (
-        <StyledContainer
-            variant={variant}
-            borderVariant={borderVariant}
-            {...props}
-        >
-            {items?.map((item, i) => {
-                return (
-                    <StyledItem key={indexPrefix.concat(i)}>
-                        <StyledButton
-                            variant={variant}
-                            borderVariant={borderVariant}
-                            bgVariant={bgVariant}
-                            variantDisable={variantDisable}
-                            variantBgDisable={variantBgDisable}
-                            title={item.label}
-                            disabled={allDisabled || item.disabled}
-                            onClick={allDisabled || item.disabled ? null : () => onClick(item.label)}
-                        >
-                            {item.icon}
-                        </StyledButton>
-                        {items?.length - 1 !== i && divider}
-                    </StyledItem>
-                );
-            })}
-        </StyledContainer>
-    );
-};
-
-GroupButtons.propTypes = {
-    /**
-     * Common color of icons. primary-1, 2, error, etc.
-     * If this props is not pass each Icon will have its own color
-     */
-    variant: PropTypes.string,
-    /**
-     * Color of the border. primary-1, 2, error, etc.
-     */
-    borderVariant: PropTypes.string,
-    /**
-     * Color of the background. primary-1, 2, error, etc.
-     */
-    bgVariant: PropTypes.string,
-    /**
-     * Color of icon when disabled. primary-1, 2, error, etc.
-     */
-    variantDisable: PropTypes.string,
-    /**
-     * Color of background when disabled. primary-1, 2, error, etc.
-     */
-    variantBgDisable: PropTypes.string,
-    /**
-     * String to prefix the index number in the map function
-     */
-    indexPrefix: PropTypes.string,
-    /**
-     * Theme object
-     */
-    theme: PropTypes.object,
-    /**
-     * Array of items. Each item must be an object in this format:
-     * {
-     *   label: "Test1",
-     *   icon: <Icon icon='plus-outlined' size={18} />,
-     *   disabled: true
-     *   }
-     */
-    items: PropTypes.array,
-    /**
-     * Optional boolean to disable all buttons
-     */
-    allDisabled: PropTypes.bool,
-    /**
-     * Divider component with vertical prop
-     */
-    divider: PropTypes.any,
-    /**
-     * onClick function to handle click
-     */
-    onClick: PropTypes.func,
-};
-
-StyledContainer.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-StyledItem.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-StyledButton.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-GroupButtons.defaultProps = {
-    theme: defaultThemeColor,
-    indexPrefix: 'btn-group',
-    borderVariant: 'neutral-4',
-    bgVariant: 'bgColor',
-    variantDisable: 'neutral-2',
-    variantBgDisable: 'bgColor',
-};
-