groundfloor-react-ui 1.0.18 → 1.0.21

package/components/Breadcrumb/Breadcrumb.js

@@ -1,5 +1,5 @@
-import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
+import React, { useEffect, useRef, useState } from 'react';
 import styled, { css, useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 
@@ -8,185 +8,200 @@ import defaultThemeColor from '../constants/defaultThemeColor';
  */
 
 const StyledBreadcrumb = styled.div`
-    background: transparent;
-    color: ${({ theme, variant }) => theme.variant[variant]};
-    font-size: ${({ isPrimary }) => isPrimary ? '16px' : '14px'};
-    display: flex;
-    align-items: center;
-
-    ${({ isWrap }) => {
-        if (isWrap) {
-            return css`
-            width: ${({ block }) => block ? 'auto' : 'fit-content'};
-            flex-wrap: wrap;
-            visibility: visible;
-        `
-        } else {
-            return css`
-                border: 1px solid transparent;
-                overflow-x: auto;
-                overflow-y: hidden;
-                visibility: ${({ isBreadcrumbVisible }) => isBreadcrumbVisible ? 'visible' : 'hidden'};
-                /* Hide scrollbar for Chrome, Safari and Opera */
-                &::-webkit-scrollbar {
-                    display: none;
-                }
-                /* Hide scrollbar for IE, Edge and Firefox */
-                &-ms-overflow-style: none;  /* IE and Edge */
-                scrollbar-width: none;  /* Firefox */
-            `
+  background: transparent;
+  color: ${({ theme, variant }) => theme.variant[variant]};
+  font-size: ${({ isPrimary }) => (isPrimary ? '16px' : '14px')};
+  display: flex;
+  align-items: center;
+
+  ${({ isWrap }) => {
+    if (isWrap) {
+      return css`
+        width: ${({ block }) => (block ? 'auto' : 'fit-content')};
+        flex-wrap: wrap;
+        visibility: visible;
+      `;
+    } else {
+      return css`
+        border: 1px solid transparent;
+        overflow-x: auto;
+        overflow-y: hidden;
+        visibility: ${({ isBreadcrumbVisible }) =>
+          isBreadcrumbVisible ? 'visible' : 'hidden'};
+        /* Hide scrollbar for Chrome, Safari and Opera */
+        &::-webkit-scrollbar {
+          display: none;
         }
-    }};
-
-    .breadcrumb-icon svg path {
-        fill: ${({ theme, variant }) => theme.variant[variant]};
+        /* Hide scrollbar for IE, Edge and Firefox */
+        &-ms-overflow-style: none; /* IE and Edge */
+        scrollbar-width: none; /* Firefox */
+      `;
     }
+  }};
 
-    .breadcrumb-icon-separator svg path {
-        fill: ${({ theme, variantSeparator }) => theme.variant[variantSeparator]};
-    }
+  .breadcrumb-icon svg path {
+    fill: ${({ theme, variant }) => theme.variant[variant]};
+  }
 
-    .breadcrumb-icon-separator {
-        margin: 0 ${({ isPrimary }) => isPrimary ? '12px' : '7px'};
-    }
+  .breadcrumb-icon-separator svg path {
+    fill: ${({ theme, variantSeparator }) => theme.variant[variantSeparator]};
+  }
+
+  .breadcrumb-icon-separator {
+    margin: 0 ${({ isPrimary }) => (isPrimary ? '12px' : '7px')};
+  }
 `;
 
 const StyledCombo = styled.div`
-    display: flex;
-    flex-wrap: nowrap;
+  display: flex;
+  flex-wrap: nowrap;
 `;
 
 const StyledItem = styled.div`
-    cursor: ${({ href }) => href ? 'pointer' : 'default'};
-    list-style: none;
-    color: ${({ theme, variant }) => theme.variant[variant]};
-    white-space: nowrap;
-    max-width: 15ch;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &:hover {
-        text-decoration: ${({ href }) => href ? 'underline' : 'none'};
-    }
+  cursor: ${({ href }) => (href ? 'pointer' : 'default')};
+  list-style: none;
+  color: ${({ theme, variant }) => theme.variant[variant]};
+  white-space: nowrap;
+  max-width: 15ch;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &:hover {
+    text-decoration: ${({ href }) => (href ? 'underline' : 'none')};
+  }
 `;
 
-export const Breadcrumb = ({ wrap, block, style, variant, variantSeparator, appLogo, separator, items, onClick, isPrimary, ...props }) => {
-    const theme = useTheme() || defaultThemeColor;
-
-    const breadcrumbRef = useRef(null)
-
-    const [isBreadcrumbVisible, setIsBreadcrumbVisible] = useState(undefined);
-
-    const handleWindowResize = () => {
-        if (breadcrumbRef?.current?.scrollWidth < breadcrumbRef?.current?.offsetWidth) {
-            setIsBreadcrumbVisible(true)
-        } else {
-            setIsBreadcrumbVisible(false)
-        }
+export const Breadcrumb = ({
+  wrap,
+  block,
+  style,
+  variant,
+  variantSeparator,
+  appLogo,
+  separator,
+  items,
+  onClick,
+  isPrimary,
+  ...props
+}) => {
+  const activeTheme = useTheme() || defaultThemeColor;
+
+  const breadcrumbRef = useRef(null);
+
+  const [isBreadcrumbVisible, setIsBreadcrumbVisible] = useState(undefined);
+
+  const handleWindowResize = () => {
+    if (
+      breadcrumbRef?.current?.scrollWidth < breadcrumbRef?.current?.offsetWidth
+    ) {
+      setIsBreadcrumbVisible(true);
+    } else {
+      setIsBreadcrumbVisible(false);
     }
-
-    useEffect(() => {
-        handleWindowResize();
-    }, [items])
-
-    //On component mount add event listener 
-    useEffect(() => {
-        if (!wrap) {
-            // Monitor the width of the viewPort to adjust the text of the arrow accordingly
-            window.addEventListener("resize", handleWindowResize);
-            return () => (window.removeEventListener("resize", handleWindowResize));
-        }
-    }, [])
-
-    const list = (items) ? items.map((item, i) => {
-        return (
-            <StyledCombo key={item.label} >
-                {(i === 0 && !appLogo) ? null : (<div className="breadcrumb-icon-separator">{separator}</div>)}
-                <StyledItem onClick={() => { if (item.href) onClick(item.href) }} variant={variant} href={item.href} title={item.label}>
-                    {/* If label longer than 15chs trim it by css */}
-                    {item.label}
-                </StyledItem>
-            </StyledCombo>
-        )
-    }) : (null)
-
-    return (
-        <StyledBreadcrumb
-            isWrap={wrap}
-            ref={!wrap ? breadcrumbRef : null}
-            isBreadcrumbVisible={isBreadcrumbVisible}
-            block={block}
+  };
+
+  useEffect(() => {
+    handleWindowResize();
+  }, [items]);
+
+  //On component mount add event listener
+  useEffect(() => {
+    if (!wrap) {
+      // Monitor the width of the viewPort to adjust the text of the arrow accordingly
+      window.addEventListener('resize', handleWindowResize);
+      return () => window.removeEventListener('resize', handleWindowResize);
+    }
+  }, []);
+
+  const list = items
+    ? items.map((item, i) => {
+      return (
+        <StyledCombo key={item.label}>
+          {i === 0 && !appLogo ? null : (
+            <div className='breadcrumb-icon-separator'>{separator}</div>
+          )}
+          <StyledItem
+            theme={activeTheme}
+            onClick={() => {
+              if (item.href) onClick(item.href);
+            }}
             variant={variant}
-            variantSeparator={variantSeparator}
-            style={style}
-            isPrimary={isPrimary}
-            {...props}
-        >
-            {appLogo && (<div className="breadcrumb-icon">{appLogo}</div>)}
-            {list}
-        </StyledBreadcrumb>
-    )
+            href={item.href}
+            title={item.label}
+          >
+            {/* If label longer than 15chs trim it by css */}
+            {item.label}
+          </StyledItem>
+        </StyledCombo>
+      );
+    })
+    : null;
+
+  return (
+    <StyledBreadcrumb
+      theme={activeTheme}
+      isWrap={wrap}
+      ref={!wrap ? breadcrumbRef : null}
+      isBreadcrumbVisible={isBreadcrumbVisible}
+      block={block}
+      variant={variant}
+      variantSeparator={variantSeparator}
+      style={style}
+      isPrimary={isPrimary}
+      {...props}
+    >
+      {appLogo && <div className='breadcrumb-icon'>{appLogo}</div>}
+      {list}
+    </StyledBreadcrumb>
+  );
 };
 
 Breadcrumb.propTypes = {
-    /**
-     * Color of text. primary-1, 2, error, etc.
-     */
-    variant: PropTypes.string,
-    /**
-     * Color of separator. primary-1, 2, error, etc.
-     */
-    variantSeparator: PropTypes.string,
-    /**
-     * Click handler
-     */
-    onClick: PropTypes.func,
-    /**
-     * Optional Icon element with app icon
-     */
-    appLogo: PropTypes.any,
-    /**
-     * Optional Icon element with separator icon
-     */
-    separator: PropTypes.any,
-    /**
-     * List of the elements of breadcramb
-     */
-    items: PropTypes.array,
-    /**
-     * Optional width selector
-     */
-    block: PropTypes.bool,
-    /**
-     * Theme object
-     */
-    theme: PropTypes.object,
-    /**
-     * If true wrap items when shrink else hide
-     */
-    wrap: PropTypes.bool,
-    /**
-     * If true bigger font and margin, if false it means secondary breadcrum with smaller font and less margin
-     */
-    isPrimary: PropTypes.bool,
+  /**
+   * Color of text. primary-1, 2, error, etc.
+   */
+  variant: PropTypes.string,
+  /**
+   * Color of separator. primary-1, 2, error, etc.
+   */
+  variantSeparator: PropTypes.string,
+  /**
+   * Click handler
+   */
+  onClick: PropTypes.func,
+  /**
+   * Optional Icon element with app icon
+   */
+  appLogo: PropTypes.any,
+  /**
+   * Optional Icon element with separator icon
+   */
+  separator: PropTypes.any,
+  /**
+   * List of the elements of breadcramb
+   */
+  items: PropTypes.array,
+  /**
+   * Optional width selector
+   */
+  block: PropTypes.bool,
+
+  /**
+   * If true wrap items when shrink else hide
+   */
+  wrap: PropTypes.bool,
+  /**
+   * If true bigger font and margin, if false it means secondary breadcrum with smaller font and less margin
+   */
+  isPrimary: PropTypes.bool,
 };
 
-StyledBreadcrumb.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-StyledItem.defaultProps = {
-    theme: defaultThemeColor,
-}
-
 Breadcrumb.defaultProps = {
-    theme: defaultThemeColor,
-    variant: 'neutral-2',
-    variantSeparator: 'neutral-3',
-    block: false,
-    onClick: undefined,
-    wrap: false,
-    isPrimary: true
-};
-
+  variant: 'neutral-2',
+  variantSeparator: 'neutral-3',
+  block: false,
+  onClick: undefined,
+  wrap: false,
+  isPrimary: 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',
-}
-
+};