groundfloor-react-ui 1.0.0

package/components/GroupButtons/ButtonPopup.js

@@ -0,0 +1,192 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { useTheme } from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
+import { usePopperTooltip } from 'react-popper-tooltip';
+import 'react-popper-tooltip/dist/styles.css';
+
+/**
+ * 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

@@ -0,0 +1,150 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+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',
+};
+

package/components/GroupButtons/GroupButtonsPopup.js

@@ -0,0 +1,169 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { useTheme } from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
+import { ButtonPopup } from './ButtonPopup';
+
+/**
+ * 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 StyledTooltip = styled.div`
+background-color: indianred;
+visibility: hidden;
+pointer-events: none;
+`
+
+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

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

package/components/GroupStatusCircle/GroupStatusCircle.js

@@ -0,0 +1,135 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+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

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

package/components/Header/Header.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+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,
+
+};