groundfloor-react-ui 1.0.18 → 1.0.21

package/components/Cards/CardRef.js

@@ -1,64 +1,71 @@
-import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import React, { forwardRef } from 'react';
+import styled, { useTheme } from 'styled-components';
 import defaultStyles from '../constants/defaultStyle';
+import defaultThemeColor from '../constants/defaultThemeColor';
 
 const CardWrapper = styled.div`
-    //Set the styles from the default styles object
-        ${({ theme, type }) => {
-        if (theme) {
+
+  color: ${({ activeTheme }) => activeTheme.textColor};
+  padding-top: 25px;
+  padding-bottom: 25px;
+  padding-left: 32px;
+  padding-right: 32px;
+  background-color: ${({ activeTheme }) => activeTheme.bgColor};
+  width: inherit;
+  border-radius: 5px;
+  box-shadow: 0px 5px 37px rgba(56, 66, 100, 0.0880136);
+  border-color: ${({ activeTheme }) => activeTheme.border};
+  transition: all .5s ease .95ms !important;
+  
+  //Set the styles from the default styles object
+  ${({ inBuiltCss, type }) => {
+        if (inBuiltCss) {
             let tempObj = {};
-            if (theme[type]) {
-                for (const property in theme[type]) {
-                    tempObj[property] = theme[type][property]
-                    delete theme.common[property]
+            if (inBuiltCss[type]) {
+                for (const property in inBuiltCss[type]) {
+                    tempObj[property] = inBuiltCss[type][property];
+                    delete inBuiltCss.common[property];
                 }
-                for (const property in theme['common']) {
-                    tempObj[property] = theme['common'][property]
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property];
                 }
             }
             return tempObj;
         }
     }}
-        
-        // custom styles
+
+  // custom styles
         ${({ customStyles }) => customStyles}
 `;
 
-CardWrapper.defaultProps = {
-    theme: defaultStyles
-}
+export const CardRef = forwardRef(({ type, header, content, ...props }, ref) => {
+    const activeTheme = useTheme() || defaultThemeColor;
 
-export const CardRef = forwardRef(({ type, theme, header, content, ...props }, ref) => {
     return (
-        <CardWrapper theme={defaultStyles} type={'card'} {...props} ref={ref}>
+        <CardWrapper
+            inBuiltCss={defaultStyles}
+            activeTheme={activeTheme}
+            {...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 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

@@ -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/Drawer/Drawer.js

@@ -1,6 +1,6 @@
-import React from "react";
 import PropTypes from 'prop-types';
-import styled, { css } from 'styled-components';
+import React from "react";
+import styled from 'styled-components';
 import defaultStyles from '../constants/defaultStyle';
 
 /**
@@ -26,68 +26,59 @@ import defaultStyles from '../constants/defaultStyle';
 
 const StyledContainer = styled.div`
 //Set the styles from the default styles object
-${({ theme, type, drawerOpen, 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]) {
-                    delete theme.common[property]
-                    tempObj[property] = theme[type][property]
-                }
-                if (drawerOpen) {
-                    tempObj = { ...tempObj, ...theme['drawer-open'] }
-                } else {
-                    tempObj = { ...tempObj, ...theme['drawer-close'] }
-                }
-            }
-            return { ...tempObj, ...customStyles };
+${({ inBuiltCss, type, drawerOpen, customStyles }) => {
+    if (inBuiltCss) {
+      let tempObj = {};
+      if (inBuiltCss[type]) {
+        for (const property in inBuiltCss['common']) {
+          tempObj[property] = inBuiltCss['common'][property]
+        }
+        for (const property in inBuiltCss[type]) {
+          delete inBuiltCss.common[property]
+          tempObj[property] = inBuiltCss[type][property]
+        }
+        if (drawerOpen) {
+          tempObj = { ...tempObj, ...inBuiltCss['drawer-open'] }
+        } else {
+          tempObj = { ...tempObj, ...inBuiltCss['drawer-close'] }
         }
-    }}
+      }
+      return { ...tempObj, ...customStyles };
+    }
+  }}
 `;
 
 export const Drawer = ({
-    theme,
-    customStyles,
-    drawerOpen,
-    children,
-    ...props
+  customStyles,
+  drawerOpen,
+  children,
+  ...props
 }) => {
 
 
-    // return ReactDom.createPortal(
-    return (
-        <StyledContainer
-            theme={theme}
-            customStyles={customStyles}
-            type={'drawer'}
-            drawerOpen={drawerOpen}
-            {...props}
-        >
-            {children}
-        </StyledContainer>
+  // return ReactDom.createPortal(
+  return (
+    <StyledContainer
+      inBuiltCss={defaultStyles}
+      customStyles={customStyles}
+      type={'drawer'}
+      drawerOpen={drawerOpen}
+      {...props}
+    >
+      {children}
+    </StyledContainer>
 
-    );
+  );
 };
 
 Drawer.propTypes = {
-    /**
-     * Theme object
-     */
-    theme: PropTypes.object,
-    /**
-     *	Custom style object
-     */
-    customStyles: PropTypes.object,
-    /**
-    *	Boolean value to to open and close the drawer
-    */
-    drawerOpen: PropTypes.bool,
-};
-
-Drawer.defaultProps = {
-    theme: defaultStyles,
-};
 
+  /**
+   *	Custom style object
+   */
+  customStyles: PropTypes.object,
+  /**
+  *	Boolean value to to open and close the drawer
+  */
+  drawerOpen: PropTypes.bool,
+};

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