groundfloor-react-ui 1.2.9 → 1.2.11

package/components/ProgressBar/ProgressBar.js

@@ -1,101 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled, { useTheme } from 'styled-components';
-import defaultStyles from '../constants/defaultStyle';
-import defaultThemeColor from '../constants/defaultThemeColor';
-import { hexToRGB } from '../constants/utils';
-import { Label } from '../Label';
-
-const WrapperDiv = styled.div`
-  height: 10px;
-  border-radius: 10px;
-  margin-top: 13px;
-  margin-left: 13px;
-  margin-right: 13px;
-  width: inherit;
-  background-color: ${({ color, theme }) =>
-        color ? hexToRGB(color, 0.5) : hexToRGB(theme.primary['primary-1'], 0.5)};
-`;
-
-const Container = styled.div`
-  height: inherit;
-  width: inherit;
-  transition: width 1s ease-in-out;
-  border-radius: inherit;
-  text-align: right;
-
-  // custom styles
-  ${({ progressBarStyle }) => progressBarStyle}
-  width: ${({ now }) => now + '%'};
-  background-color: ${({ color, theme }) =>
-        color ? color : theme.primary['primary-1']};
-`;
-
-export const ProgressBar = ({
-    labelStyle,
-    progressBarStyle,
-    label,
-    now,
-    color,
-    ...props
-}) => {
-    const activeTheme = useTheme() || defaultThemeColor;
-
-    return (
-        <div>
-            <Label
-                inBuiltCss={defaultStyles}
-                customStyles={labelStyle}
-                type={'progressbarLabel'}
-                text={label}
-                {...props}
-            />
-            <WrapperDiv
-                progressBarStyle={progressBarStyle}
-                theme={activeTheme}
-                color={color}
-                {...props}
-            >
-                <Container
-                    progressBarStyle={progressBarStyle}
-                    now={now}
-                    theme={activeTheme}
-                    color={color}
-                    {...props}
-                />
-            </WrapperDiv>
-        </div>
-    );
-};
-
-ProgressBar.propTypes = {
-    /**
-     *	Custom style of the label of the progressBar
-     */
-    labelStyle: PropTypes.object,
-    /**
-     *	Custom style of the progressBar
-     */
-    progressBarStyle: PropTypes.object,
-
-    /**
-     *	Custom color(HEX format) of the progressBar
-     */
-    color: PropTypes.string,
-
-    /**
-     *	label props
-     */
-    label: PropTypes.string,
-    /**
-     *	Progress number
-     */
-    now: PropTypes.number,
-};
-
-ProgressBar.defaultProps = {
-    labelStyle: {},
-    progressBarStyle: {},
-    label: '',
-    now: 0,
-};

package/components/ProgressBar/index.js

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

package/components/ProgressSteps/ProgressSteps.js

@@ -1,121 +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 StyledContainer = styled.div`
-    background: transparent;
-    display: flex;
-    align-items: center;
-    width: ${({ block }) => block ? '100%' : 'fit-content'};
-`;
-
-const StyledText = styled.div`
-    margin: 0;
-    color: ${({ theme, variantOff }) => theme.variant[variantOff]};
-    white-space: nowrap;
-    display: flex;
-    justify-content: space-between;
-
-    &>div{
-        font-weight: 600;
-        min-width: 13px;
-        text-align: center;
-        margin-left: 3px;
-        margin-right: 3px;
-    }
-
-    &>div:first-of-type{
-        color: ${({ theme, variantOn }) => theme.variant[variantOn]};
-    }
-`;
-
-const StyledSteps = styled.div`
-    display: flex;
-    margin-left: 20px;
-`;
-
-const StyledStep = styled.div`
-    height: 6px;
-    width: ${({ widthStep }) => widthStep}px;
-    margin: 0 3px;
-    background-color: ${({ theme, isActive, variantOn, variantOff }) => isActive ? theme.variant[variantOn] : theme.variant[variantOff]};
-    border-radius: 19px;
-`;
-
-export const ProgressSteps = ({ block, variantOn, variantOff, currentStep, totalSteps, widthStep, style, ...props }) => {
-    const theme = useTheme() || defaultThemeColor;
-
-    return (
-        <StyledContainer block={block} {...props} style={style}>
-            <StyledText {...props} variantOn={variantOn} variantOff={variantOff}>Page <div>{currentStep}</div> of <div>{totalSteps}</div></StyledText>
-            <StyledSteps {...props} >
-                {Array.from(Array(totalSteps).keys()).map((index => {
-                    return <StyledStep key={'formSteps'.concat(index)} isActive={currentStep === index + 1} variantOn={variantOn} variantOff={variantOff} widthStep={widthStep} />
-                }))}
-            </StyledSteps>
-        </StyledContainer>
-    );
-};
-
-ProgressSteps.propTypes = {
-    /**
-     * Background color of the step and text active base on variant. primary-1, 2, error, etc.
-     */
-    variantOn: PropTypes.string,
-    /**
-     * Background color of the step and text not active base on variant. primary-1, 2, error, etc.
-     */
-    variantOff: PropTypes.string,
-    /**
-     * Optional Block width
-     */
-    block: PropTypes.bool,
-    /**
-     * Theme object
-     */
-    theme: PropTypes.object,
-    /**
-     * Optional value of the current step
-     */
-    currentStep: PropTypes.number,
-    /**
-     * Optional value of the total steps
-     */
-    totalSteps: PropTypes.number,
-    /**
-     * Optional value of width of each step in px
-     */
-    widthStep: PropTypes.number,
-};
-
-StyledContainer.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-StyledText.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-StyledSteps.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-StyledStep.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-ProgressSteps.defaultProps = {
-    theme: defaultThemeColor,
-    variantOn: 'primary-1',
-    variantOff: 'neutral-2',
-    block: false,
-    currentStep: 1,
-    totalSteps: 4,
-    widthStep: 43,
-};
-

package/components/ProgressSteps/index.js

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

package/components/Rating/Rating.js

@@ -1,258 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { useEffect, useState } from 'react';
-import styled, { css, useTheme } from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
-
-const StyledContainer = styled.div`
-    box-sizing: border-box;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: auto;
-
-    ${({ size }) => css`height: ${size}px;`}
-`;
-
-const StyledPercentage = styled.div`
-`;
-
-const StyledStar = styled.div`
-box-sizing: border-box;
-display: flex;
-justify-content: center;
-align-items: center;
-    ${({ size }) =>
-        css`
-        width: ${size}px;
-        height: ${size}px;
-    `}
-cursor: ${({ toggleSet }) => toggleSet ? 'pointer' : 'default'};
-
-svg {
-    fill: black;
-    
-    ${({ size }) =>
-        size &&
-        css`
-        width: ${size}px;
-        height: ${size}px;
-    `}
-
-    ${({ transform }) =>
-        transform &&
-        css`
-        transform: ${transform};
-    `}
-
-    path {
-    ${({ color }) =>
-        color &&
-        css`
-        fill: ${color};
-        `}
-    }
-}
-`;
-
-const Star = ({ theme, toggleSet, slide, color, size, transform, ratingValue, starVal, hover, ...props }) => {
-    return (
-        <StyledStar
-            theme={theme}
-            ratingValue={ratingValue}
-            starVal={starVal}
-            hover={hover}
-            toggleSet={toggleSet}
-            color={color}
-            size={size}
-            transform={transform}
-            {...props}>
-            <svg width="24px" height="24px" viewBox="0 0 24 24" id="star_filled" data-name="star filled" xmlns="http://www.w3.org/2000/svg">
-                <defs>
-                    <clipPath id="starFilled">
-                        <path id="Star" d="M10,15,4.122,18.09l1.123-6.545L.489,6.91l6.572-.955L10,0l2.939,5.955,6.572.955-4.755,4.635,1.123,6.545Z" transform="translate(2 3)" stroke="#000" strokeMiterlimit="10" strokeWidth="1.5" />
-                    </clipPath>
-                </defs>
-                <rect x="0" y="0" fill="rgb(217,217,217)" width="100%" height="100%" clipPath="url(#starFilled)" />
-                <rect x={slide} y="0" fill={color} width="100%" height="100%" clipPath="url(#starFilled)" />
-            </svg>
-        </StyledStar>
-    )
-}
-
-function getStarArray(value, maxRange) {
-    //Convert the value from the actual range to the 0-5 range for the stars 
-    let newVal = value * 5 / maxRange;
-    const starArr = [];
-    const valueStars = newVal;
-    //create array of 1 element each element has the value to fill the star
-    //convert the value to fill the star into the value to pass to the svg
-    //base on the way the svg is donethe range is:
-    //slide '-24' 0%  0
-    // slide '-12' 50% 0.5
-    // slide '0' 100% 1
-    for (let i = 0; i < 5; i++) {
-        if (newVal - 1 >= 0) {
-            starArr.push('0');
-        } else if (newVal - 1 < 0 && newVal - 1 > -1) {
-            const tmpVal = ((newVal * 24) - 24).toString();
-            starArr.push(tmpVal);
-        } else {
-            starArr.push('-24');
-        }
-        newVal = newVal - 1;
-    }
-    return { array: starArr, value: valueStars };
-}
-
-function getPercentage(value, maxRange) {
-    //Convert the value from the actual range to the 0-5 range for the stars 
-    let newVal = value * 100 / maxRange;
-    return newVal;
-}
-
-export const Rating = ({
-    type,
-    customStylesContainer,
-    customStylesStar,
-    customStylesPercentage,
-    color,
-    size,
-    handleClick,
-    transform,
-    maxRange,
-    value,
-    toggleStar,
-    toggleSet,
-    identifier,
-    ...props }) => {
-    const activeTheme = useTheme() || defaultThemeColor;
-
-    const [starArr, setStarArr] = useState(undefined);
-    const [starVal, setStarVal] = useState(undefined);
-    const [percentage, setPercentage] = useState(undefined);
-    const [hover, setHover] = useState(undefined);
-
-    useEffect(() => {
-        setStarArr(getStarArray(value, maxRange).array);
-        setStarVal(getStarArray(value, maxRange).value);
-        setPercentage(getPercentage(value, maxRange));
-    }, [value, maxRange]);
-
-    /**
-     * When hover the stars the actual value is ovveridden by the value of the
-     * hover star, but it go back to the original value if no click
-     * Also assume that if the original value is not 0 a previous rating was done already
-     * therefore cannot give less than 1 star
-     */
-    useEffect(() => {
-        if (hover) {
-            setStarArr(getStarArray(hover, maxRange).array);
-        } else {
-            setStarArr(getStarArray(value, maxRange).array);
-            setStarVal(getStarArray(value, maxRange).value);
-            setPercentage(getPercentage(value, maxRange));
-        }
-    }, [hover]);
-
-    const stars =
-        <>
-            {starArr?.map((val, i) => {
-                const ratingValue = (i + 1) * 20;
-                return (
-                    <Star
-                        ratingValue={ratingValue}
-                        starVal={starVal}
-                        hover={hover}
-                        toggleSet={toggleSet}
-                        onClick={toggleSet ? () => handleClick(ratingValue) : null}
-                        onMouseEnter={toggleSet ? () => { setHover(ratingValue); } : null}
-                        onMouseLeave={toggleSet ? () => { setHover(null); } : null}
-                        slide={val}
-                        color={color}
-                        className={'star'}
-                        size={size}
-                        transform={transform}
-                        key={identifier?.concat(i)}
-                        customStyles={customStylesStar}
-                    />
-                )
-            })
-            }
-        </>
-
-    return (
-        <StyledContainer customStyles={customStylesContainer} type={type} size={size} {...props} className={'container'} >
-            {toggleStar ? stars :
-                <StyledPercentage type={type} customStyles={customStylesPercentage}>{percentage}%</StyledPercentage>}
-        </StyledContainer>
-    )
-}
-
-Rating.propTypes = {
-
-    /**
-     *	Custom style object for container
-     */
-    customStylesContainer: PropTypes.object,
-    /**
-     *	Custom style object for start
-     */
-    customStylesStar: PropTypes.object,
-    /**
-     *	Custom style object for percentage
-     */
-    customStylesPercentage: PropTypes.object,
-    /**
-     *	type of component to define styling
-     */
-    type: PropTypes.string,
-    /**
-     *	color of the star when rated
-     */
-    color: PropTypes.string,
-    /**
-     *	size of the star
-     */
-    size: PropTypes.number,
-    /**
-     *	object to translate the icon if required
-     */
-    transform: PropTypes.object,
-    /**
-     *	Function to manage the click of the star
-     */
-    handleClick: PropTypes.func,
-    /**
-     *	Value to define the max range. The min is always 0
-     */
-    maxRange: PropTypes.number,
-    /**
-     *	Value of the rating
-     */
-    value: PropTypes.number,
-    /**
-     *	If true the component display starts, else a number in percentage
-     */
-    toggleStar: PropTypes.bool,
-    /**
-     * If true the user can click on the stars and set a new rating value
-     */
-    toggleSet: PropTypes.bool,
-    /**
-     * String to use as key for the mapping
-     */
-    identifier: PropTypes.string,
-}
-
-Rating.defaultProps = {
-    customStylesContainer: null,
-    customStylesStar: null,
-    customStylesPercentage: null,
-    type: 'star',
-    maxRange: 100,
-    value: 0,
-    identifier: 'ratingKey',
-    toggleStar: true,
-    toggleSet: false,
-    color: '#F7B001'
-}

package/components/Rating/index.js

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

package/components/SecondaryLink/DarkSecondaryLink.js

@@ -1,97 +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 StyledButton = styled.button`
-    background: ${({ disabled, theme, bgVariant }) => disabled ? buttonDisabledBg : theme.variant[bgVariant]};
-    color: ${({ theme, variant }) => theme.variant[variant]};
-    padding: 6px 17px;
-    border: 1px solid ${({ theme, bgVariant }) => theme.variant[bgVariant]};
-    border-radius: 999px;
-    font-size: 14px;
-    line-height: 17px;
-    display: flex;
-    align-items: center;
-    width: ${({ block }) => block ? '100%' : 'auto'};
-    cursor: pointer;
-
-    &:disabled {
-        color: #929EAC;
-        background: ${buttonDisabledBg};
-        border: 1px solid ${buttonDisabledBg};
-        cursor: not-allowed;
-
-        svg>path{
-            fill: #929EAC;
-        }
-    }
-
-    * {
-        outline: none;
-    }
-`;
-
-export const DarkSecondaryLink = ({ block, style, variant, bgVariant, disabled, ...props }) => {
-    const theme = useTheme() || defaultThemeColor;
-    return (
-        <StyledButton
-            block={block}
-            variant={variant}
-            bgVariant={bgVariant}
-            type="button"
-            style={style}
-            disabled={disabled}
-            {...props}
-        >
-            {props.children}
-        </StyledButton>
-    );
-};
-
-DarkSecondaryLink.propTypes = {
-    /**
-     * Type of Button. primary-1, 2, error, etc.
-     */
-    variant: PropTypes.string,
-    /**
-     * Color background. primary-1, 2, error, etc.
-     */
-    bgVariant: PropTypes.string,
-    /**
-     * Is the button disabled?
-     */
-    disabled: PropTypes.bool,
-    /**
-     * Optional click handler
-     */
-    block: PropTypes.bool,
-    /**
-     * Optional click handler
-     */
-    onClick: PropTypes.func,
-    /**
-     * Theme object
-     */
-    theme: PropTypes.object,
-};
-
-StyledButton.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-DarkSecondaryLink.defaultProps = {
-    theme: defaultThemeColor,
-    variant: 'primary-2',
-    bgVariant: 'neutral-4',
-    block: false,
-    disabled: false,
-    onClick: undefined,
-};
-

package/components/SecondaryLink/LightSecondaryLink.js

@@ -1,93 +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 StyledButton = styled.button`
-    background: ${({ disabled, theme }) => disabled ? buttonDisabledBg : theme.bgColor};
-    color: ${({ theme, variant }) => theme.variant[variant]};
-    padding: 6px 17px;
-    border: 1px solid ${({ theme, borderVariant }) => theme.variant[borderVariant]};
-    border-radius: 999px;
-    font-size: 14px;
-    line-height: 17px;
-    display: flex;
-    align-items: center;
-    width: ${({ block }) => block ? '100%' : 'auto'};
-    cursor: pointer;
-
-    &:disabled {
-        color: #929EAC;
-        background: ${buttonDisabledBg};
-        border: 1px solid ${buttonDisabledBg};
-        cursor: not-allowed;
-
-        svg>path{
-            fill: #929EAC;
-        }
-    }
-`;
-
-export const LightSecondaryLink = ({ block, style, variant, borderVariant, disabled, ...props }) => {
-    const theme = useTheme() || defaultThemeColor;
-    return (
-        <StyledButton
-            block={block}
-            variant={variant}
-            borderVariant={borderVariant}
-            type="button"
-            style={style}
-            disabled={disabled}
-            {...props}
-        >
-            {props.children}
-        </StyledButton>
-    );
-};
-
-LightSecondaryLink.propTypes = {
-    /**
-     * Color text. primary-1, 2, error, etc.
-     */
-    variant: PropTypes.string,
-    /**
-     * Color border. primary-1, 2, error, etc.
-     */
-    borderVariant: PropTypes.string,
-    /**
-     * Is the button disabled?
-     */
-    disabled: PropTypes.bool,
-    /**
-     * Optional click handler
-     */
-    block: PropTypes.bool,
-    /**
-     * Optional click handler
-     */
-    onClick: PropTypes.func,
-    /**
-     * Theme object
-     */
-    theme: PropTypes.object,
-};
-
-StyledButton.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-LightSecondaryLink.defaultProps = {
-    theme: defaultThemeColor,
-    variant: 'primary-2',
-    borderVariant: 'neutral-3',
-    block: false,
-    disabled: false,
-    onClick: undefined,
-};
-

package/components/SecondaryLink/index.js

@@ -1,3 +0,0 @@
-export * from './DarkSecondaryLink';
-export * from './LightSecondaryLink';
-