groundfloor-react-ui 1.0.0

package/components/Button/SecondaryButton.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { useTheme } from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
+import getDefaultStyles from '../constants/utils';
+
+/**
+ * Secondary UI component for user interaction
+ */
+
+const sizes = {
+    sm: {
+        fontSize: '14px',
+        padding: '5px 15px'
+    },
+    md: {
+        fontSize: '16px',
+        padding: '6px 15px'
+    },
+    lg: {
+        fontSize: '18px',
+        padding: '8px 20px'
+    },
+}
+
+const buttonDisabledBg = '#BBC4CF';
+
+const StyledButton = styled.button`
+    color: ${({ theme, variant }) => theme.variant[variant]};
+    background: ${({ theme }) => theme.bgColor};
+    padding: ${({ size }) => sizes[size].padding};
+    border: 1px solid ${({ theme, variant }) => theme.variant[variant]};
+    font-size: ${({ size }) => sizes[size].fontSize};
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    width: ${({ block }) => block ? '100%' : 'auto'};
+    cursor: pointer;
+
+    &:disabled {
+        color: #929EAC;
+        border: 1px solid ${buttonDisabledBg};
+        cursor: not-allowed;
+    }
+
+    //Set the styles from the default styles object
+    ${({ theme, defaultStyle }) => {
+		return getDefaultStyles(theme, defaultStyle);
+	}}
+`;
+
+export const SecondaryButton = ({ block, size, style, variant, disabled,type, ...props }) => {
+    const theme = useTheme() || defaultThemeColor;
+
+    return (
+        <StyledButton
+            block={block}
+            variant={variant}
+            defaultStyle="button"
+            style={style}
+            size={size}
+            disabled={disabled}
+            type={type}
+            {...props}
+        >
+            {props.children}
+        </StyledButton>
+    );
+};
+
+SecondaryButton.propTypes = {
+    /**
+     * Type of Button. primary-1, 2, error, etc.
+     */
+    variant: PropTypes.string,
+    /**
+     * Is the button disabled?
+     */
+    disabled: PropTypes.bool,
+    /**
+     * How large should the button be?
+     */
+    size: PropTypes.oneOf(['sm', 'md', 'lg']),
+    /**
+     * Optional click handler
+     */
+    block: PropTypes.bool,
+    /**
+     * Optional click handler
+     */
+    onClick: PropTypes.func,
+    /**
+     * Theme object
+     */
+    theme: PropTypes.object,
+    /**
+    * Type of the btn i.e: button or submit etc.
+    */
+     type: PropTypes.string,
+};
+
+StyledButton.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+SecondaryButton.defaultProps = {
+    theme: defaultThemeColor,
+    variant: 'primary-1',
+    block: false,
+    disabled: false,
+    size: 'md',
+    onClick: undefined,
+};
+

package/components/Button/TinyButton.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { useTheme } from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
+import getDefaultStyles from '../constants/utils';
+
+/**
+ * Primary UI component for user interaction
+ */
+
+const buttonDisabledBg = '#BBC4CF';
+
+const StyledButton = styled.button`
+    background: ${({ disabled, theme, variant }) => disabled ? buttonDisabledBg : theme.variant[variant]};
+    color: ${({ theme }) => theme.bgColor};
+    padding: 3px 14px;
+    border: 1px solid ${({ theme, variant }) => theme.variant[variant]};
+    border-radius: 10.5px;
+    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;
+    }
+
+    //Set the styles from the default styles object
+    ${({ theme, defaultStyle }) => {
+        return getDefaultStyles(theme, defaultStyle);
+    }}
+`;
+
+export const TinyButton = ({ block, style, variant, disabled, type, ...props }) => {
+    const theme = useTheme() || defaultThemeColor;
+    return (
+        <StyledButton
+            block={block}
+            variant={variant}
+            defaultStyle="button"
+            type={type}
+            style={style}
+            disabled={disabled}
+            {...props}
+        >
+            {props.children}
+        </StyledButton>
+    );
+};
+
+TinyButton.propTypes = {
+    /**
+     * Type of Button. primary-1, 2, error, etc.
+     */
+    variant: 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,
+    /**
+    * Type of the btn i.e: button or submit etc.
+    */
+    type: PropTypes.string,
+};
+
+StyledButton.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+TinyButton.defaultProps = {
+    theme: defaultThemeColor,
+    variant: 'primary-1',
+    block: false,
+    disabled: false,
+    onClick: undefined,
+};
+

package/components/Button/index.js

@@ -0,0 +1,6 @@
+export * from './PrimaryButton';
+export * from './SecondaryButton';
+export * from './TinyButton';
+
+
+

package/components/Cards/Card.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import defaultStyles from '../constants/defaultStyle';
+import getDefaultStyles from '../constants/utils';
+
+const CardWrapper = styled.div`
+    //Set the styles from the default styles object
+        ${ ({ theme, type }) => {
+            return getDefaultStyles(theme, type);
+    }}
+        
+        // custom styles
+        ${({ customStyles }) => customStyles}
+`;
+
+CardWrapper.defaultProps = {
+    theme: defaultStyles
+}
+
+export const Card = ({type,header,content,...props}) => {
+    return (
+        <CardWrapper theme={defaultStyles} type={'card'} {...props}>
+            {header}
+            {content}
+        </CardWrapper>
+    )
+}
+
+Card.propTypes = {
+    /**
+     * the type of the element
+    */
+   type: PropTypes.string,
+    /**
+      * header of the card
+     */
+    header: PropTypes.any,
+    /**
+     * the content of the card
+    */
+    content: PropTypes.any,
+}
+
+Card.defaultProps = {
+    type: 'card',
+}
+

package/components/Cards/CardRef.js

@@ -0,0 +1,64 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import defaultStyles from '../constants/defaultStyle';
+
+const CardWrapper = styled.div`
+    //Set the styles from the default styles object
+        ${({ theme, type }) => {
+        if (theme) {
+            let tempObj = {};
+            if (theme[type]) {
+                for (const property in theme[type]) {
+                    tempObj[property] = theme[type][property]
+                    delete theme.common[property]
+                }
+                for (const property in theme['common']) {
+                    tempObj[property] = theme['common'][property]
+                }
+            }
+            return tempObj;
+        }
+    }}
+        
+        // custom styles
+        ${({ customStyles }) => customStyles}
+`;
+
+CardWrapper.defaultProps = {
+    theme: defaultStyles
+}
+
+export const CardRef = forwardRef(({ type, theme, header, content, ...props }, ref) => {
+    return (
+        <CardWrapper theme={defaultStyles} type={'card'} {...props} ref={ref}>
+            {header}
+            {content}
+        </CardWrapper>
+    )
+})
+
+CardRef.propTypes = {
+    /**
+     * theme Object
+    */
+    theme: PropTypes.object,
+    /**
+     * the type of the element
+    */
+    type: PropTypes.string,
+    /**
+      * header of the card
+     */
+    header: PropTypes.any,
+    /**
+     * the content of the card
+    */
+    content: PropTypes.any,
+}
+
+CardRef.defaultProps = {
+    theme: defaultStyles,
+    type: 'card',
+}
+

package/components/Cards/DocumentCard.js

@@ -0,0 +1,221 @@
+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 = {
+    sm: {
+        cardWidth: '178px',
+        cardMinHeight: '88px',
+        borderRadius: '4px',
+        border: '0.7px',
+        bodyHeight: '55px',
+        footerFontSize: '10px',
+        footerMinHeight: '31px',
+        footerPadding: '10.5px 16px',
+        footerLineHeight: '16px',
+        lineHeight: '12px'
+    },
+    md: {
+        cardWidth: '215px',
+        cardMinHeight: '123px',
+        borderRadius: '6px',
+        border: '1px',
+        bodyHeight: '67px',
+        footerFontSize: '14px',
+        footerMinHeight: '54px',
+        footerPadding: '18px 19px',
+        footerLineHeight: '12px',
+        lineHeight: '16px'
+    },
+}
+
+const StyledDocumentCard = styled.div`
+    ${({ trimFileName }) => {
+        if (trimFileName) {
+            return (css`height: ${({ size }) => sizes[size].cardMinHeight};`)
+        } else {
+            return (css`min-height: ${({ size }) => sizes[size].cardMinHeight};`)
+        }
+    }}
+    width: ${({ size }) => sizes[size].cardWidth};
+    border-radius: ${({ size }) => sizes[size].borderRadius};
+    border: ${({ size }) => sizes[size].border} solid ${({ theme, variantBorder }) => theme.variant[variantBorder]};
+    box-sizing: border-box;
+
+    &:hover {
+        border: ${({ size }) => sizes[size].border} solid ${({ theme, variantBorderHover }) => theme.variant[variantBorderHover]}; 
+        button {
+            &:hover {
+                opacity: 0.8;
+            }
+        }
+    }
+`
+
+const StyledCardBody = styled.div`
+    display: flex;
+    justify-content: ${({ buttons }) => buttons !== '11' ? 'center' : 'space-between'};
+    align-items: center;
+    height: ${({ size }) => sizes[size].bodyHeight};
+    margin: 0;
+    padding: ${({ size }) => sizes[size].bodyPadding};
+    border: none;
+    border-top-left-radius: ${({ size }) => sizes[size].borderRadius};
+    border-top-right-radius: ${({ size }) => sizes[size].borderRadius};
+    background-color: ${({ theme, variantBgBody }) => theme.variant[variantBgBody]};
+    background: linear-gradient(0deg, rgba(226, 230, 245, 0.5), rgba(226, 230, 245, 0.5)) ${({ bgUrl }) => bgUrl ? `, url('/images/documentCardBG.png')` : null};
+    background-size: cover;
+    box-sizing: border-box;
+`
+
+const StyledCardFooter = styled.div`
+    ${({ trimFileName }) => {
+        if (trimFileName) {
+            return (
+                css`
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                height: ${({ size }) => sizes[size].footerMinHeight};
+                `
+            )
+        } else {
+            return (
+                css`
+                display: flex;
+                align-items: center;
+                min-height: ${({ size }) => sizes[size].footerMinHeight};
+                overflow-wrap: anywhere;
+                hyphens: auto;
+                `
+            )
+        }
+    }}
+    font-size: ${({ size }) => sizes[size].footerFontSize};
+    padding:  ${({ size }) => sizes[size].footerPadding};
+    color: ${({ theme, variant }) => theme.variant[variant]};
+    background-color: ${({ theme, variantBgFooter }) => variantBgFooter ? theme.variant[variantBgFooter] : theme['bgColor']};
+    box-sizing: border-box;
+    line-height: ${({ size }) => sizes[size].lineHeight};
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+`
+
+export const DocumentCard = ({
+    variant,
+    variantBorder,
+    variantBorderHover,
+    variantBgBody,
+    variantBgFooter,
+    fileName,
+    bgUrl,
+    size,
+    trimFileName,
+    bodyContent,
+    ...props }) => {
+
+    const theme = useTheme() || defaultThemeColor;
+
+    return (
+        <StyledDocumentCard
+            variantBorder={variantBorder}
+            variantBorderHover={variantBorderHover}
+            variantBgBody={variantBgBody}
+            size={size}
+            trimFileName={trimFileName}
+            {...props}
+        >
+            <StyledCardBody bgUrl={bgUrl} size={size} >
+                {bodyContent}
+            </StyledCardBody>
+            <StyledCardFooter
+                title={fileName}
+                variant={variant}
+                variantBgFooter={variantBgFooter}
+                trimFileName={trimFileName}
+                size={size}
+            >
+                {fileName}
+            </StyledCardFooter>
+        </StyledDocumentCard>
+    )
+}
+
+DocumentCard.propTypes = {
+    /**
+     * Color of Footer text. primary-1, 2, error, etc.
+     */
+    variant: PropTypes.string,
+    /**
+     * Color of DocumentCard border. primary-1, 2, error, etc.
+     */
+    variantBorder: PropTypes.string,
+    /**
+     * Color of DocumentCard border on hover. primary-1, 2, error, etc.
+     */
+    variantBorderHover: PropTypes.string,
+    /**
+     * Color of Body background. primary-1, 2, error, etc.
+     */
+    variantBgBody: PropTypes.string,
+    /**
+     * Color of Footer background. primary-1, 2, error, etc.
+     */
+    variantBgFooter: PropTypes.string,
+    /**
+     * String to display in the footer
+     */
+    fileName: PropTypes.string,
+    /**
+     * Url of the picture to display as card body background
+     */
+    bgUrl: PropTypes.string,
+    /**
+     * Size of the card small or medium
+     */
+    size: PropTypes.oneOf(['sm', 'md']),
+    /**
+     * If true if the fimeName is longer than the width is trimmed. If false the fileName is wrapped and the footer expands vertically
+     */
+    trimFileName: PropTypes.bool,
+    /**
+     * Theme object
+     */
+    theme: PropTypes.object,
+    /**
+     * Children component of the Card Body
+     */
+    bodyContent: PropTypes.element,
+};
+
+StyledDocumentCard.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+StyledCardBody.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+StyledCardFooter.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+DocumentCard.defaultProps = {
+    theme: defaultThemeColor,
+    variant: 'black',
+    variantBorder: 'neutral-5',
+    variantBorderHover: 'primary-1',
+    variantBgBody: 'neutral-4',
+    variantBgFooter: null,
+    fileName: '',
+    bgUrl: null,
+    size: 'md',
+    trimFileName: true,
+    bodyContent: null
+};
+

package/components/Cards/index.js

@@ -0,0 +1,5 @@
+
+export * from './DocumentCard';
+export * from './Card';
+export * from './CardRef';
+

package/components/Content/Content.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import defaultStyles from '../constants/defaultStyle';
+import getDefaultStyles from '../constants/utils';
+// import './../../../App.css'
+
+const ContentLayout = styled.div`
+    //Set the styles from the default styles object
+    ${({ theme, type }) => {
+        return getDefaultStyles(theme, type);
+    }}
+    @media (max-width: 980px) {
+        margin-left: 0px;
+    }
+    // custom styles
+    ${({ customStyles }) => customStyles}
+`;
+
+export const Content = ({ theme, type, customStyles, ...props }) => {
+    return (
+        <ContentLayout theme={theme} customStyles={customStyles} type={type} {...props}>
+            {props.children}
+        </ContentLayout>
+    )
+}
+
+
+
+Content.propTypes = {
+    /**
+     *	Theme props
+     */
+    theme: PropTypes.object,
+    /**
+     *	Custom style object
+     */
+    customStyles: PropTypes.object,
+    /**
+     *	type Content
+     */
+    type: PropTypes.string,
+}
+
+Content.defaultProps = {
+    theme: defaultStyles,
+    customStyles: null,
+    type: 'content'
+}
+
+

package/components/Content/index.js

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

package/components/Divider/Divider.js

@@ -0,0 +1,63 @@
+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 StyledDivider = styled.div`
+    display: ${({ vertical }) => vertical ? 'inline-block' : 'block'};
+    background: ${({ theme, variant, borderColor }) => borderColor ? borderColor : theme.variant[variant]};
+    content: '';
+    height: ${({ vertical, thickness, height }) => vertical ? height : thickness};
+    width: ${({ vertical, thickness }) => vertical ? thickness : null};
+`
+
+export const Divider = ({ vertical, borderColor, thickness, height, ...props }) => {
+    const theme = useTheme() || defaultThemeColor;
+    return (
+        <StyledDivider borderColor={borderColor} thickness={thickness} vertical={vertical} height={height} {...props} />
+    )
+}
+
+Divider.propTypes = {
+    /**
+     * Optional: Color of Divider
+     */
+    variant: PropTypes.string,
+    /**
+     * Optional: How thick should be the divider in px
+     */
+    thickness: PropTypes.string,
+    /**
+     * Theme object
+     */
+    theme: PropTypes.object,
+    /**
+     * Optional custom border color
+     */
+    borderColor: PropTypes.string,
+    /**
+     * Optional flag for vertical direction
+     */
+    vertical: PropTypes.bool,
+    /**
+     * Optional: How hight should be the divider in px (apply only when vertical is TRUE)
+     */
+    height: PropTypes.string,
+};
+
+StyledDivider.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+Divider.defaultProps = {
+    theme: defaultThemeColor,
+    variant: 'neutral-5',
+    thickness: '2px',
+    vertical: false,
+    height: '10px'
+};
+

package/components/Divider/index.js

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