groundfloor-react-ui 1.2.9 → 1.2.11

package/components/GroupButtons/GroupButtonsPopup.js

@@ -1,163 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled, { useTheme } from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
-import { ButtonPopup } from './ButtonPopup';
-
-/**
- * Primary UI component for user interaction
- */
-
-
-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 GroupButtonsPopup = ({ style, items, variant, borderVariant, bgVariant, variantDisable, variantBgDisable, allDisabled, divider, indexPrefix, onClick, variantTPtext, variantTPbg, ...props }) => {
-    const theme = useTheme() || defaultThemeColor;
-
-    return (
-        <StyledContainer
-            variant={variant}
-            borderVariant={borderVariant}
-            {...props}
-        >
-            {items?.map((item, i) => {
-                return (
-                    <ButtonPopup
-                        key={indexPrefix.concat(i)}
-                        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) }}
-                        divider={items?.length - 1 !== i && divider}
-                        icon={item.icon}
-                        index={i}
-                        label={item.label}
-                        variantTPtext={variantTPtext}
-                        variantTPbg={variantTPbg}
-                    />
-                );
-            })}
-        </StyledContainer>
-    );
-};
-
-GroupButtonsPopup.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,
-};
-
-StyledContainer.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-StyledItem.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-StyledButton.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-GroupButtonsPopup.defaultProps = {
-    theme: defaultThemeColor,
-    indexPrefix: 'btn-group',
-    borderVariant: 'neutral-4',
-    bgVariant: 'bgColor',
-    variantDisable: 'neutral-2',
-    variantBgDisable: 'bgColor',
-    variantTPtext: null,
-    variantTPbg: null,
-};

package/components/GroupButtons/index.js

@@ -1,3 +0,0 @@
-export * from './ButtonPopup';
-export * from './GroupButtons';
-export * from './GroupButtonsPopup';

package/components/GroupStatusCircle/GroupStatusCircle.js

@@ -1,135 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled, { useTheme } from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
-import { StatusCircle } from '../StatusCircle';
-
-
-/**
- * Primary UI component for user interaction
- */
-
-const StyledDiv = styled.div`
-    display: inline-flex;
-    align-items: center;
-    background-color: transparent;
-    min-height: 24px;
-`;
-
-const StyledContainer = styled.div`
-    display: flex;
-    justify-content: space-evenly;
-    width: 69px;
-`;
-
-const StyledText = styled.p`
-    display: flex;
-    color: ${({ theme, variantText, colorText }) => colorText ? colorText : theme.variant[variantText]};
-    font-size: 16px;
-    margin: 0 5px;
-`;
-
-export const GroupStatusCircle = ({ style, variantCircle, variantText, level, textArray, colorArray, indexPrefix, colorText, ...props }) => {
-    const theme = useTheme() || defaultThemeColor;
-
-    return (
-        <StyledDiv
-            {...props}
-        >
-            <StyledContainer>
-                {[1, 2, 3, 4].map((el, i) => {
-
-                    let colorBorder = '#D4D7E3';
-                    let colorBg = null;
-                    let colorBgVariant = null;
-
-                    // Limit level value between 0 and 4
-                    if (level <= 0) level = 0;
-                    if (level >= 4) level = 4;
-
-                    if (colorArray) {
-                        if (level >= el) {
-                            colorBg = colorArray[level]
-                            colorBorder = colorArray[level]
-                        } else {
-                            colorBg = colorArray[0]
-                        }
-                    } else {
-                        //If level 0 cannot apply variant to keep the circle white
-                        if (level >= el) {
-                            colorBgVariant = variantCircle
-                            colorBorder = variantCircle
-                        } else {
-                            colorBgVariant = '#FFFFFF'
-                        }
-                    }
-
-                    return (
-                        <StatusCircle
-                            key={indexPrefix.concat(i)}
-                            variant={colorBgVariant}
-                            borderColor={colorBorder}
-                            bgColor={colorBg}
-                            size={11}
-                        />
-                    );
-                })}
-            </StyledContainer>
-            {textArray && <StyledText variantText={variantText} colorText={colorText}>{textArray[level]}</StyledText>}
-        </StyledDiv>
-    );
-};
-
-GroupStatusCircle.propTypes = {
-    /**
-     * Color of Circle. primary-1, 2, error, etc.
-     */
-    variantCircle: PropTypes.string,
-    /**
-     * Color of Text. primary-1, 2, error, etc.
-     */
-    variantText: PropTypes.string,
-    /**
-     * Level value min 0, max 4
-     */
-    level: PropTypes.number,
-    /**
-     * String to prefix the index number in the map function
-     */
-    indexPrefix: PropTypes.string,
-    /**
-     * Theme object
-     */
-    theme: PropTypes.object,
-    /**
-     * Optional width selector
-     */
-    block: PropTypes.bool,
-    /**
-     * Optional text array. If present the text of each index will be show for the corresponding level
-     */
-    textArray: PropTypes.array,
-    /**
-     * Optional color array. If present the circle color of the level will match the index color of the array.
-     * If no colorArray the color of the circles will be the variant color.
-     */
-    colorArray: PropTypes.array,
-    /**
-     * Optional Custom color of the text
-     */
-    colorText: PropTypes.string,
-};
-
-StyledText.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-GroupStatusCircle.defaultProps = {
-    theme: defaultThemeColor,
-    variantCircle: 'primary-1',
-    variantText: 'primary-2',
-    block: false,
-    level: 0,
-    indexPrefix: 'circle-group'
-};
-

package/components/GroupStatusCircle/index.js

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

package/components/Header/Header.js

@@ -1,58 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled from 'styled-components';
-import defaultStyles from '../constants/defaultStyle';
-import getDefaultStyles from '../constants/utils';
-
-/**
- * Primary UI component for user interaction
- */
-
-const StyledHeader = styled.header`
-    //Set the styles from the default styles object
-    ${({ theme, type }) => {
-        return getDefaultStyles(theme, type);
-    }}
-    // custom styles
-    ${({ customStyles }) => customStyles}
-`;
-
-export const Header = ({ theme, type, customStyles, ...props }) => {
-
-    return (
-        <StyledHeader
-            theme={theme}
-            type='header'
-            customStyles={customStyles}
-            {...props}
-        >
-            {props.children}
-        </StyledHeader>
-    );
-};
-
-Header.propTypes = {
-    /**
-     *	Theme props
-     */
-    theme: PropTypes.object,
-    /**
-     *	Custom style object
-     */
-    customStyles: PropTypes.object,
-    /**
-     *	Type of the component which define the default style
-     */
-    type: PropTypes.string,
-};
-
-StyledHeader.defaultProps = {
-    theme: PropTypes.object,
-}
-
-Header.defaultProps = {
-    theme: defaultStyles,
-    type: 'header',
-    customStyles: null,
-
-};

package/components/Header/index.js

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

package/components/HyperLink/HyperLink.js

@@ -1,114 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled, { css, useTheme } from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
-
-/**
- * Primary UI component for user interaction
- */
-
-const sizes = {
-    xsm: {
-        fontSize: '12px'
-    },
-    sm: {
-        fontSize: '14px'
-    },
-    md: {
-        fontSize: '16px'
-    },
-    lg: {
-        fontSize: '18px'
-    },
-}
-
-// Define style css
-const StyledHyperLink = styled.button`
-    ${({ underlined }) => !underlined ? css`&:hover {text-decoration: underline}` : null};
-    background: transparent;
-    color: ${({ theme, variant }) => theme.variant[variant]};
-    text-decoration:  ${({ underlined }) => underlined ? 'underline' : 'none'};
-    display: flex;
-    width: ${({ block }) => block ? '100%' : 'auto'};
-    align-items: center;
-    justify-content: start;
-    border: none;
-    cursor: pointer;
-    font-size:  ${({ size }) => sizes[size].fontSize};
-
-    &:disabled {
-        color: ${({ theme }) => theme.variant['neutral-3']};
-        cursor: not-allowed;
-    }
-
-    * {
-        outline: none;
-    }
-`;
-
-export const HyperLink = ({ block, size, style, variant, disabled, underlined, ...props }) => {
-    const theme = useTheme() || defaultThemeColor;
-
-    return (
-        <StyledHyperLink
-            block={block}
-            variant={variant}
-            type="button"
-            style={style}
-            size={size}
-            disabled={disabled}
-            underlined={underlined}
-            {...props}
-        >
-            {props.children}
-        </StyledHyperLink>
-    );
-};
-
-HyperLink.propTypes = {
-    /**
-     * HyperLink color: 'primary-1', 'primary-2', 'error', etc.
-     */
-    variant: PropTypes.string,
-    /**
-     * Is the button disabled?
-     */
-    disabled: PropTypes.bool,
-    /**
-     * How big should the text be?
-     */
-    size: PropTypes.oneOf(['xsm', 'sm', 'md', 'lg']),
-    /**
-     * Optional width (block true width = 100%)
-     */
-    block: PropTypes.bool,
-    /**
-     * Optional click handler
-     */
-    onClick: PropTypes.func,
-    /**
-     * Theme object
-     */
-    theme: PropTypes.object,
-    /**
-     * Optional: add underline
-     */
-    underlined: PropTypes.bool,
-
-};
-
-StyledHyperLink.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-HyperLink.defaultProps = {
-    theme: defaultThemeColor,
-    variant: "primary-1",
-    block: false,
-    disabled: false,
-    size: "sm",
-    onClick: undefined,
-    label: "Remove",
-    underlined: false
-};
-

package/components/HyperLink/index.js

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

package/components/Icon/Icon.js

@@ -1,176 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { ReactSVG } from "react-svg";
-import styled, { css } from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
-
-/** import icons from assets here */
-import appLogo from '../../assets/icons/app-logo.svg';
-import arrowDown from '../../assets/icons/arrow-down.svg';
-import arrowRotate from '../../assets/icons/arrow-rotate.svg';
-import arrowUp from '../../assets/icons/arrow-up.svg';
-import bell from '../../assets/icons/bell.svg';
-import checkIcon from '../../assets/icons/check.svg';
-import checkMark from '../../assets/icons/checkmark.svg';
-import chevronDown from '../../assets/icons/chevron-down.svg';
-import chevronLeft from '../../assets/icons/chevron-left.svg';
-import chevronRight from '../../assets/icons/chevron-right.svg';
-import cloudIcon from '../../assets/icons/cloud-icon.svg';
-import connection from '../../assets/icons/connection.svg';
-import crossIcon from '../../assets/icons/cross-icon.svg';
-import defaultIcon from '../../assets/icons/default.svg';
-import doorInternalActive from '../../assets/icons/door-internal-active.svg';
-import editIcon from '../../assets/icons/edit-icon.svg';
-import ellipsesHorizontal from '../../assets/icons/ellipses-horizontal.svg';
-import ellipses from '../../assets/icons/ellipses.svg';
-import email from '../../assets/icons/email.svg';
-import eyeView from '../../assets/icons/eye-hide-view.svg';
-import eyeHide from '../../assets/icons/eye-hide.svg';
-import fileAttachWhite from '../../assets/icons/file-attach-white.svg';
-import fileAttach from '../../assets/icons/file-attach.svg';
-import fileIcon from '../../assets/icons/file-icon.svg';
-import fileUpload from '../../assets/icons/file-upload.svg';
-import equation from '../../assets/icons/functional-equation-regular.svg';
-import hamburgerMenu from '../../assets/icons/hamburger-menu.svg';
-import info from '../../assets/icons/info.svg';
-import jpgIcon from '../../assets/icons/jpg-icon.svg';
-import magnifier from '../../assets/icons/magnifier.svg';
-import menuEllipseTwo from '../../assets/icons/menu-ellipse-two.svg';
-import menuEllipse from '../../assets/icons/menu-ellipse.svg';
-import pauseAll from '../../assets/icons/pause-all.svg';
-import pdfIcon from '../../assets/icons/pdf-icon.svg';
-import penIcon from '../../assets/icons/pen-icon.svg';
-import plusOutline from '../../assets/icons/plus-outlined.svg';
-import resume from '../../assets/icons/resume.svg';
-import signIcon from '../../assets/icons/sign-icon.svg';
-import star from '../../assets/icons/star.svg';
-import trashIcon from '../../assets/icons/trash-icon.svg';
-import triangleDown from '../../assets/icons/triangle-down.svg';
-import user from '../../assets/icons/users.svg';
-import view from '../../assets/icons/view.svg';
-import watcher from '../../assets/icons/watcher.svg';
-import zoomInWhite from '../../assets/icons/zoom-in-white.svg';
-
-
-/** icon name should be kebab-case, e.g "plus-outline" */
-const iconObj = {
-    'plus-outlined': plusOutline,
-    'check-mark': checkMark,
-    'chevron-right': chevronRight,
-    'chevron-left': chevronLeft,
-    'app-logo': appLogo,
-    'email': email,
-    'chevron-down': chevronDown,
-    'triangle-down': triangleDown,
-    'info': info,
-    'cross-icon': crossIcon,
-    'file-attach': fileAttach,
-    'jpg-icon': jpgIcon,
-    'pdf-icon': pdfIcon,
-    'arrow-up': arrowUp,
-    'arrow-down': arrowDown,
-    'pen-icon': penIcon,
-    'sign-icon': signIcon,
-    'edit-icon': editIcon,
-    'hamburger-menu': hamburgerMenu,
-    'bell': bell,
-    'star': star,
-    'cloud-icon': cloudIcon,
-    'check-icon': checkIcon,
-    'arrow-rotate': arrowRotate,
-    'magnifier-icon': magnifier,
-    'connection': connection,
-    'door-internal-active': doorInternalActive,
-    'ellipses-horizontal': ellipsesHorizontal,
-    'ellipses': ellipses,
-    'file-attach-white': fileAttachWhite,
-    'functional-equation': equation,
-    "menu-ellipse-two": menuEllipseTwo,
-    'menu-ellipse': menuEllipse,
-    'pause-all': pauseAll,
-    'resume': resume,
-    'trash-icon': trashIcon,
-    'zoom-in-white': zoomInWhite,
-    'watcher': watcher,
-    'view': view,
-    'user-icon': user,
-    'file-upload': fileUpload,
-    'eye-hide': eyeHide,
-    'eye-show': eyeView,
-    'file-icon': fileIcon,
-    'default-icon': defaultIcon,
-}
-
-const StyledSVGIcon = styled(ReactSVG)`
-    div {
-        ${({ size }) =>
-        size &&
-        css`
-            width: ${size}px;
-            height: ${size}px;
-        `}
-    }
-    svg {
-        fill: black;
-        
-        ${({ size }) =>
-        size &&
-        css`
-            width: ${size}px;
-            height: ${size}px;
-        `}
-
-        ${({ transform }) =>
-        transform &&
-        css`
-            transform: ${transform};
-        `}
-
-        path {
-        ${({ color }) =>
-        color &&
-        css`
-            fill: ${color};
-            `}
-        }
-        outline: none;
-        border:none;
-        &:focus: {
-            outline: none;
-            border:none;
-        }
-        vertical-align: initial;
-    }
-`;
-
-export const Icon = ({ icon, color, size, transform, ...props }) => {
-    return (
-        <StyledSVGIcon
-            src={iconObj[icon]}
-            color={color}
-            size={size}
-            transform={transform}
-            {...props}
-        />
-    );
-};
-
-Icon.propTypes = {
-    /**
-     * name of icon
-     */
-    icon: PropTypes.string.isRequired,
-    /**
-     * set size of icon in px
-     */
-    size: PropTypes.number,
-    /**
-     * color of icon
-     */
-    color: PropTypes.string,
-}
-
-Icon.defaultProps = {
-    size: 16,
-    color: defaultThemeColor.primary['primary-1'],
-}

package/components/Icon/index.js

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