groundfloor-react-ui 1.0.0

package/components/Rating/Rating.js

@@ -0,0 +1,264 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import styled, { css } from 'styled-components';
+import defaultStyles from '../constants/defaultStyle';
+import getDefaultStyles from '../constants/utils';
+
+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 = ({
+    theme,
+    type,
+    customStylesContainer,
+    customStylesStar,
+    customStylesPercentage,
+    color,
+    size,
+    handleClick,
+    transform,
+    maxRange,
+    value,
+    toggleStar,
+    toggleSet,
+    identifier,
+    ...props }) => {
+
+    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 theme={theme} customStyles={customStylesContainer} type={type} size={size} {...props} className={'container'} >
+            {toggleStar ? stars :
+                <StyledPercentage theme={theme} type={type} customStyles={customStylesPercentage}>{percentage}%</StyledPercentage>}
+        </StyledContainer>
+    )
+}
+
+Rating.propTypes = {
+    /**
+     *	Theme props
+     */
+    theme: PropTypes.object,
+    /**
+     *	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 = {
+    theme: defaultStyles,
+    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

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

package/components/SecondaryLink/DarkSecondaryLink.js

@@ -0,0 +1,97 @@
+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 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

@@ -0,0 +1,93 @@
+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 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

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