groundfloor-react-ui 1.0.0

package/components/Header/index.js

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

package/components/HyperLink/HyperLink.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { useTheme, css } 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

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

package/components/Icon/Icon.js

@@ -0,0 +1,161 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ReactSVG } from "react-svg";
+import styled, { css } from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
+
+/** import icons from assets here */
+import plusOutline from '../../assets/icons/plus-outlined.svg'
+import checkMark from '../../assets/icons/checkmark.svg'
+import chevronRight from '../../assets/icons/chevron-right.svg'
+import chevronLeft from '../../assets/icons/chevron-left.svg'
+import appLogo from '../../assets/icons/app-logo.svg'
+import email from '../../assets/icons/email.svg'
+import chevronDown from '../../assets/icons/chevron-down.svg'
+import triangleDown from '../../assets/icons/triangle-down.svg'
+import info from '../../assets/icons/info.svg'
+import crossIcon from '../../assets/icons/cross-icon.svg'
+import fileAttach from '../../assets/icons/file-attach.svg'
+import jpgIcon from '../../assets/icons/jpg-icon.svg'
+import pdfIcon from '../../assets/icons/pdf-icon.svg'
+import arrowUp from '../../assets/icons/arrow-up.svg'
+import arrowDown from '../../assets/icons/arrow-down.svg'
+import penIcon from '../../assets/icons/pen-icon.svg'
+import signIcon from '../../assets/icons/sign-icon.svg'
+import editIcon from '../../assets/icons/edit-icon.svg'
+import hamburgerMenu from '../../assets/icons/hamburger-menu.svg'
+import bell from '../../assets/icons/bell.svg'
+import star from '../../assets/icons/star.svg'
+import cloudIcon from '../../assets/icons/cloud-icon.svg'
+import checkIcon from '../../assets/icons/check.svg'
+import arrowRotate from '../../assets/icons/arrow-rotate.svg'
+import connection from '../../assets/icons/connection.svg'
+import magnifier from '../../assets/icons/magnifier.svg'
+import doorInternalActive from '../../assets/icons/door-internal-active.svg'
+import ellipsesHorizontal from '../../assets/icons/ellipses-horizontal.svg'
+import ellipses from '../../assets/icons/ellipses.svg'
+import fileAttachWhite from '../../assets/icons/file-attach-white.svg'
+import equation from '../../assets/icons/functional-equation-regular.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 resume from '../../assets/icons/resume.svg'
+import trashIcon from '../../assets/icons/trash-icon.svg'
+import zoomInWhite from '../../assets/icons/zoom-in-white.svg'
+import view from '../../assets/icons/view.svg'
+import user from '../../assets/icons/users.svg'
+import watcher from '../../assets/icons/watcher.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,
+
+
+}
+
+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};
+            `}
+        }
+    }
+`;
+
+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

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

package/components/Images/Image.js

@@ -0,0 +1,112 @@
+import React, { useState, useEffect, useRef } from "react";
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import defaultStyles from '../constants/defaultStyle';
+
+const ImageLayout = styled.img`
+    //Set the styles from the default styles object
+    ${({ theme, type, size, customStyles }) => {
+        if (theme) {
+            let tempObj = {};
+            if (theme[type]) {
+                for (const property in theme['common']) {
+                    tempObj[property] = theme['common'][property]
+                }
+                for (const property in theme[type]) {
+                    tempObj[property] = theme[type][property]
+                    delete theme.common[property]
+                }
+                for (const property in theme[`${type}${size}`]) {
+                    tempObj[property] = theme[`${type}${size}`][property]
+                    delete theme.common[property]
+                }
+            }
+            return { ...tempObj, ...customStyles };
+        }
+    }}
+`;
+
+export const Image = ({ theme, customStyles, type, size, alt, src, handleImageStatus, ...props }) => {
+
+    const [imageStatus, setImageStatus] = useState("loading");
+
+    const imgEl = useRef(null);
+
+    const onImageLoaded = () => {
+        setImageStatus("loaded")
+        handleImageStatus && handleImageStatus("loaded")
+    };
+    const onImageError = () => {
+        setImageStatus("failed")
+        handleImageStatus && handleImageStatus("failed")
+    };
+
+    useEffect(() => {
+        const imgElCurrent = imgEl.current;
+
+        if (imgElCurrent) {
+            imgElCurrent.addEventListener("load", onImageLoaded);
+            imgElCurrent.addEventListener("error", onImageError);
+
+            return () => {
+                imgElCurrent.removeEventListener("load", onImageLoaded);
+                imgElCurrent.removeEventListener("error", onImageError);
+            };
+        }
+    }, [imageStatus]);
+
+    return (
+        <ImageLayout
+            {...props}
+            theme={theme}
+            customStyles={customStyles}
+            type={type}
+            alt={alt}
+            src={src}
+            ref={imgEl}
+            size={size}
+        />
+    )
+}
+
+Image.propTypes = {
+    /**
+     *	Theme props
+     */
+    theme: PropTypes.object,
+    /**
+     *	Custom style object
+     */
+    customStyles: PropTypes.object,
+    /**
+     *	Type of the component which define the default style
+     */
+    type: PropTypes.string,
+    /**
+     * How large should the Avatar be?
+     * Only apply if type='imageAvatar'
+     */
+    size: PropTypes.oneOf(['SM', 'MD', 'LG']),
+    /**
+     *	Alternative text for the image
+     */
+    alt: PropTypes.string,
+    /**
+     *	URL for the image
+     */
+    src: PropTypes.string,
+    /**
+     * Function that is triggered when the status of the image changes and pass as a parameter the image status itself
+     */
+    handleImageStatus: PropTypes.func
+}
+
+Image.defaultProps = {
+    theme: defaultStyles,
+    customStyles: null,
+    type: 'image',
+    alt: 'image alternative',
+    src: null,
+    handleImageStatus: null
+}
+

package/components/Images/index.js

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