groundfloor-react-ui 1.0.19 → 1.0.20

package/components/Accordion/Accordion.js

@@ -1,7 +1,8 @@
-import React, { useState, useRef } from "react";
 import PropTypes from 'prop-types';
-import defaultStyles from '../constants/defaultStyle';
+import React, { useRef, useState } from "react";
 import { Card, CardRef } from "../Cards";
+import defaultStyles from '../constants/defaultStyle';
+import { Icon } from '../Icon';
 
 /**
  * Primary UI component for user interaction
@@ -45,7 +46,12 @@ export const Accordion = ({
                                     { transform: 'rotate(0deg)', transition: 'transform ease 95ms', background: 'transparent' }
                             }
                         >
-                            {icon}
+                            {icon ? icon : <Icon
+                                icon='chevron-down'
+                                size={11}
+                                transform={'translate(0px,-1px)'}
+                                color='#A9B1B8'
+                            />}
                         </div>}
                 />
             }
@@ -108,7 +114,7 @@ Accordion.propTypes = {
 Accordion.defaultProps = {
     theme: defaultStyles,
     contentToggle: 'Toggle',
-    content: 'Content'
-
-};
+    content: 'Content',
+    toggleIconAnimation: true,
 
+};

package/components/Cards/Card.js

@@ -1,48 +1,43 @@
-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 React from 'react';
+import styled, { useTheme } from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
 
 const CardWrapper = styled.div`
-    //Set the styles from the default styles object
-        ${ ({ theme, type }) => {
-            return getDefaultStyles(theme, type);
-    }}
-        
-        // custom styles
-        ${({ customStyles }) => customStyles}
+  color: ${({ activeTheme }) => activeTheme.textColor};
+  padding-top: 25px;
+  padding-bottom: 25px;
+  padding-left: 32px;
+  padding-right: 32px;
+  background-color: ${({ activeTheme }) => activeTheme.bgColor};
+  width: inherit;
+  height: inherit;
+  border-radius: 5px;
+  box-shadow: 0px 5px 37px rgba(56, 66, 100, 0.0880136);
+  border-color: ${({ activeTheme }) => activeTheme.border};
+
+  // custom styles
+  ${({ customStyles }) => customStyles}
 `;
 
-CardWrapper.defaultProps = {
-    theme: defaultStyles
-}
+export const Card = ({ type, header, content, ...props }) => {
+    const activeTheme = useTheme() || defaultThemeColor;
 
-export const Card = ({type,header,content,...props}) => {
     return (
-        <CardWrapper theme={defaultStyles} type={'card'} {...props}>
+        <CardWrapper activeTheme={activeTheme} {...props}>
             {header}
             {content}
         </CardWrapper>
-    )
-}
+    );
+};
 
 Card.propTypes = {
     /**
-     * the type of the element
-    */
-   type: PropTypes.string,
-    /**
-      * header of the card
+     * header of the card
      */
     header: PropTypes.any,
     /**
      * the content of the card
-    */
+     */
     content: PropTypes.any,
-}
-
-Card.defaultProps = {
-    type: 'card',
-}
-
+};

package/components/Cards/DocumentCard.js

@@ -1,11 +1,11 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import styled, { useTheme, css } from 'styled-components';
+import React from 'react';
+import styled, { css, useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 
 /**
  * Primary UI component for user interaction
-*/
+ */
 
 const sizes = {
     sm: {
@@ -18,7 +18,7 @@ const sizes = {
         footerMinHeight: '31px',
         footerPadding: '10.5px 16px',
         footerLineHeight: '16px',
-        lineHeight: '12px'
+        lineHeight: '12px',
     },
     md: {
         cardWidth: '215px',
@@ -30,82 +30,91 @@ const sizes = {
         footerMinHeight: '54px',
         footerPadding: '18px 19px',
         footerLineHeight: '12px',
-        lineHeight: '16px'
+        lineHeight: '16px',
     },
-}
+};
 
 const StyledDocumentCard = styled.div`
-    ${({ trimFileName }) => {
+  ${({ trimFileName }) => {
         if (trimFileName) {
-            return (css`height: ${({ size }) => sizes[size].cardMinHeight};`)
+            return css`
+        height: ${({ size }) => sizes[size].cardMinHeight};
+      `;
         } else {
-            return (css`min-height: ${({ size }) => sizes[size].cardMinHeight};`)
+            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;
+  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;
-            }
-        }
+  &: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;
-`
+  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 }) => {
+  ${({ trimFileName }) => {
         if (trimFileName) {
-            return (
-                css`
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                height: ${({ size }) => sizes[size].footerMinHeight};
-                `
-            )
+            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;
-                `
-            )
+            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;
-`
-
+  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,
@@ -117,9 +126,9 @@ export const DocumentCard = ({
     size,
     trimFileName,
     bodyContent,
-    ...props }) => {
-
-    const theme = useTheme() || defaultThemeColor;
+    ...props
+}) => {
+    const activeTheme = useTheme() || defaultThemeColor;
 
     return (
         <StyledDocumentCard
@@ -128,12 +137,14 @@ export const DocumentCard = ({
             variantBgBody={variantBgBody}
             size={size}
             trimFileName={trimFileName}
+            theme={activeTheme}
             {...props}
         >
-            <StyledCardBody bgUrl={bgUrl} size={size} >
+            <StyledCardBody bgUrl={bgUrl} size={size} theme={activeTheme}>
                 {bodyContent}
             </StyledCardBody>
             <StyledCardFooter
+                theme={activeTheme}
                 title={fileName}
                 variant={variant}
                 variantBgFooter={variantBgFooter}
@@ -143,8 +154,8 @@ export const DocumentCard = ({
                 {fileName}
             </StyledCardFooter>
         </StyledDocumentCard>
-    )
-}
+    );
+};
 
 DocumentCard.propTypes = {
     /**
@@ -183,30 +194,14 @@ DocumentCard.propTypes = {
      * 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',
@@ -216,6 +211,5 @@ DocumentCard.defaultProps = {
     bgUrl: null,
     size: 'md',
     trimFileName: true,
-    bodyContent: null
-};
-
+    bodyContent: null,
+};

package/components/Divider/Divider.js

@@ -1,40 +1,40 @@
-import React from 'react';
 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 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};
-`
-
+  display: ${({ vertical }) => (vertical ? 'inline-block' : 'block')};
+  background: ${({ theme, borderColor }) =>
+        borderColor ? borderColor : theme.neutral['neutral-5']};
+  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;
+    const activeTheme = useTheme() || defaultThemeColor;
     return (
-        <StyledDivider borderColor={borderColor} thickness={thickness} vertical={vertical} height={height} {...props} />
-    )
-}
+        <StyledDivider
+            theme={activeTheme}
+            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
      */
@@ -49,15 +49,8 @@ Divider.propTypes = {
     height: PropTypes.string,
 };
 
-StyledDivider.defaultProps = {
-    theme: defaultThemeColor,
-}
-
 Divider.defaultProps = {
-    theme: defaultThemeColor,
-    variant: 'neutral-5',
     thickness: '2px',
     vertical: false,
-    height: '10px'
-};
-
+    height: '10px',
+};

package/components/FilterChip/FilterChip.js

@@ -1,50 +1,53 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import styled, { css, useTheme } from 'styled-components';
+import { hexToRGB } from '../constants';
 import defaultThemeColor from '../constants/defaultThemeColor';
 
-const border = `#F6F6F9;`;
+// const border = `#F6F6F9;`;
 
 const selectedCss = css`
-    color: ${({ theme }) => theme.variant['primary-1']};
-    border: 1px solid ${({ theme }) => theme.variant['primary-1']};
-    background: #F3F5FF;
+  color: ${({ theme }) => theme.variant['primary-1']};
+  border: 1px solid ${({ theme }) => theme.variant['primary-1']};
+  background: ${({ theme }) => hexToRGB(theme.primary['primary-1'], 0.04)};
 `;
 
 const StyledButton = styled.button`
-    font-size: 14px;
-    color: ${({ theme }) => theme.variant['primary-2']};
-    background: ${border};
-    border: 1px solid ${border};
-    padding: 4px 24px;
-    border-radius: 999px;
-    outline: none;
-    cursor: pointer;
+  font-size: 14px;
+  color: ${({ theme }) => theme.variant['primary-2']};
+  background: ${({ theme }) => hexToRGB(theme.variant['neutral-5'], 0.7)};
+  border: 1px solid ${({ theme }) => hexToRGB(theme.variant['neutral-5'], 0.7)};
+  padding: 4px 24px;
+  border-radius: 999px;
+  outline: none;
+  cursor: pointer;
 
-    ${({ selected }) => selected ? selectedCss : null}
+  ${({ selected }) => (selected ? selectedCss : null)}
 
-    &:not(:first-child) {
-        margin-left: 8px;
-    }
+  &:not(:first-child) {
+    margin-left: 8px;
+  }
 `;
-StyledButton.defaultProps = {
-    theme: defaultThemeColor,
-}
 
 export const FilterChip = ({ options, selected, onClick, ...props }) => {
+    const activeTheme = useTheme() || defaultThemeColor;
+
     const list = options.map((option, index) => {
         return (
-            <StyledButton key={`${option.label}_${index}_${option.value}`} selected={selected === option.value} onClick={() => { onClick(option.value) }}>
+            <StyledButton
+                theme={activeTheme}
+                key={`${option.label}_${index}_${option.value}`}
+                selected={selected === option.value}
+                onClick={() => {
+                    onClick(option.value);
+                }}
+            >
                 {option.label}
             </StyledButton>
-        )
-    })
-    return (
-        <>
-            {list}
-        </>
-    )
-}
+        );
+    });
+    return <>{list}</>;
+};
 
 FilterChip.propTypes = {
     /**
@@ -59,10 +62,9 @@ FilterChip.propTypes = {
      * click event
      */
     onClick: PropTypes.func,
-}
+};
 
 FilterChip.defaultProps = {
     options: [],
     selected: '',
-}
-
+};

package/components/Form/HeaderComponent.js

@@ -1,34 +1,64 @@
-import React from 'react'
-import defaultThemeColor from '../constants/defaultThemeColor'
-import userIcon from "../../assets/icons/users.svg";
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useTheme } from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
+import { Icon } from '../Icon';
 
-export const HeaderComponent = ({ title, subtitle, wrapperstyle, imgLink, imgStyle }) => {
+export const HeaderComponent = ({
+    title,
+    subtitle,
+    wrapperStyle,
+    imgLink,
+    imgStyle,
+    iconSize,
+}) => {
+    const activeTheme = useTheme() || defaultThemeColor;
 
     const titleStyle = {
-        'fontSize': '26px',
-        'fontWeight': 'bold',
-        'color': `${defaultThemeColor.textColor}`,
-        'lineHeight': '36px',
-        'display': 'flex',
-        'gap': '14px',
-        'alignItems': 'flex-start',
-        'paddingLeft': '25px'
-    }
+        fontSize: '26px',
+        fontWeight: 'bold',
+        color: `${activeTheme.textColor}`,
+        lineHeight: '36px',
+        display: 'flex',
+        gap: '14px',
+        alignItems: 'flex-start',
+        paddingLeft: '25px',
+    };
 
     const subtitleStyle = {
-        'fontSize': '13px',
-        'color': `${defaultThemeColor.neutral['neutral-2']}`,
-        'lineHeight': '24px',
-        'paddingLeft': '25px'
-    }
+        fontSize: '13px',
+        color: `${activeTheme.neutral['neutral-2']}`,
+        lineHeight: '24px',
+        paddingLeft: '25px',
+    };
 
-    return <div style={wrapperstyle}>
-        <div style={titleStyle}>
-            <img src={imgLink || userIcon} alt="userIcon" srcset="" style={imgStyle} />
-            <h4>{title}</h4>
+    return (
+        <div style={wrapperStyle}>
+            <div style={titleStyle}>
+                {imgLink ? (
+                    <img src={imgLink} alt='userIcon' srcset='' style={imgStyle} />
+                ) : (
+                    <Icon
+                        icon='user-icon'
+                        size={iconSize}
+                        color={activeTheme.primary['primary-1']}
+                    />
+                )}{' '}
+                <h4>{title}</h4>
+            </div>
+            <div style={subtitleStyle}>
+                <p>{subtitle}</p>
+            </div>
         </div>
-        <div style={subtitleStyle}>
-            <p>{subtitle}</p>
-        </div>
-    </div>
-}
+    );
+};
+
+HeaderComponent.propTypes = {
+    /**
+     * How large should the default icon be?
+     */
+    size: PropTypes.number,
+};
+HeaderComponent.defaultProps = {
+    iconSize: 23,
+};