groundfloor-react-ui 1.0.17 → 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/Button/PrimaryButton.js

@@ -1,9 +1,9 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import styled, { useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
-import { Loader } from '../Loaders';
 import getDefaultStyles, { hexToRGB } from '../constants/utils';
+import { Loader } from '../Loaders';
 
 /**
  * Primary UI component for user interaction
@@ -26,23 +26,22 @@ const sizes = {
 
 const buttonDisabledBg = ({ theme, variant }) =>
     hexToRGB(theme.variant[variant], 0.6);
-const fontColor = defaultThemeColor.bgColor;
 
 const StyledButton = styled.button`
   background: ${({ theme, variant }) => theme.variant[variant]};
-  color: ${fontColor};
+  color: ${({ theme }) => theme.bgColor};
   padding: ${({ size }) => sizes[size].padding};
   border: 1px solid ${({ theme, variant }) => theme.variant[variant]};
   border-radius: 5px;
   font-size: ${({ size }) => sizes[size].fontSize};
   display: flex;
-  outline: none;
   align-items: center;
   width: ${({ block }) => (block ? '100%' : 'auto')};
   cursor: pointer;
   line-height: 18px;
+  outline: none;
   &:disabled {
-    color: ${fontColor};
+    color: ${({ theme }) => theme.bgColor};
     background: ${buttonDisabledBg};
     border: 1px solid ${buttonDisabledBg};
     cursor: not-allowed;
@@ -57,6 +56,7 @@ const StyledButton = styled.button`
   ${({ btnStyle }) => btnStyle}
 `;
 
+
 export const PrimaryButton = ({
     btnStyle,
     block,
@@ -66,8 +66,11 @@ export const PrimaryButton = ({
     disabled,
     isLoading,
     type,
+    theme,
     ...props
 }) => {
+    const activeTheme = useTheme() || defaultThemeColor
+
     return (
         <StyledButton
             block={block}
@@ -76,6 +79,7 @@ export const PrimaryButton = ({
             type={type}
             style={style}
             size={size}
+            theme={theme}
             disabled={disabled}
             btnStyle={btnStyle}
             {...props}
@@ -89,7 +93,10 @@ export const PrimaryButton = ({
                         alignItems: 'center',
                     }}
                 >
-                    <Loader customStyles={{ 'background-color': fontColor }} size={16} />
+                    <Loader
+                        customStyles={{ 'background-color': activeTheme.bgColor }}
+                        size={16}
+                    />
                 </div>
             )}
             {props.children}
@@ -131,7 +138,7 @@ PrimaryButton.propTypes = {
      */
     type: PropTypes.string,
     /**
-     * custome style of button
+     * custom style of button
      */
     btnStyle: PropTypes.object,
 };

package/components/Button/SecondaryButton.js

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import styled, { useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 import getDefaultStyles from '../constants/utils';
@@ -24,8 +24,6 @@ const sizes = {
     },
 };
 
-const buttonDisabledBg = '#BBC4CF';
-const fontColor = defaultThemeColor.primary['primary-1'];
 
 const StyledButton = styled.button`
   color: ${({ theme, variant }) => theme.variant[variant]};
@@ -35,14 +33,14 @@ const StyledButton = styled.button`
   font-size: ${({ size }) => sizes[size].fontSize};
   border-radius: 5px;
   display: flex;
-  outline: none;
   align-items: center;
+  outline: none;
   width: ${({ block }) => (block ? '100%' : 'auto')};
   cursor: pointer;
   line-height: 18px;
   &:disabled {
     color: #929eac;
-    border: 1px solid ${buttonDisabledBg};
+    border: 1px solid ${({ theme }) => theme.neutral['neutral-3']};
     cursor: not-allowed;
   }
 
@@ -63,10 +61,10 @@ export const SecondaryButton = ({
     variant,
     disabled,
     type,
+    theme,
     ...props
 }) => {
-    const theme = useTheme() || defaultThemeColor;
-
+    const activeTheme = useTheme() || defaultThemeColor
     return (
         <StyledButton
             block={block}
@@ -78,6 +76,7 @@ export const SecondaryButton = ({
             type={type}
             btnStyle={btnStyle}
             isLoading={isLoading}
+            theme={theme}
             {...props}
         >
             {isLoading && (
@@ -89,8 +88,11 @@ export const SecondaryButton = ({
                         alignItems: 'center',
                     }}
                 >
-                    <Loader customStyles={{ 'background-color': fontColor }} size={16} />
-                </div>
+                    <Loader
+                        theme={theme}
+                        customStyles={{ 'background-color': activeTheme.variant[variant] }}
+                        size={16}
+                    />        </div>
             )}
             {props.children}{' '}
         </StyledButton>

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',
+};