groundfloor-react-ui 1.0.20 → 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/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/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/Images/Image.js

@@ -1,24 +1,24 @@
-import React, { useState, useEffect, useRef } from "react";
 import PropTypes from 'prop-types';
+import React, { useEffect, useRef, useState } from "react";
 import styled from 'styled-components';
 import defaultStyles from '../constants/defaultStyle';
 
 const ImageLayout = styled.img`
     //Set the styles from the default styles object
-    ${({ theme, type, size, customStyles }) => {
-        if (theme) {
+    ${({ inBuiltCss, type, size, customStyles }) => {
+        if (inBuiltCss) {
             let tempObj = {};
-            if (theme[type]) {
-                for (const property in theme['common']) {
-                    tempObj[property] = theme['common'][property]
+            if (inBuiltCss[type]) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
                 }
-                for (const property in theme[type]) {
-                    tempObj[property] = theme[type][property]
-                    delete theme.common[property]
+                for (const property in inBuiltCss[type]) {
+                    tempObj[property] = inBuiltCss[type][property]
+                    delete inBuiltCss.common[property]
                 }
-                for (const property in theme[`${type}${size}`]) {
-                    tempObj[property] = theme[`${type}${size}`][property]
-                    delete theme.common[property]
+                for (const property in inBuiltCss[`${type}${size}`]) {
+                    tempObj[property] = inBuiltCss[`${type}${size}`][property]
+                    delete inBuiltCss.common[property]
                 }
             }
             return { ...tempObj, ...customStyles };
@@ -26,7 +26,7 @@ const ImageLayout = styled.img`
     }}
 `;
 
-export const Image = ({ theme, customStyles, type, size, alt, src, handleImageStatus, ...props }) => {
+export const Image = ({ customStyles, type, size, alt, src, handleImageStatus, ...props }) => {
 
     const [imageStatus, setImageStatus] = useState("loading");
 
@@ -58,7 +58,7 @@ export const Image = ({ theme, customStyles, type, size, alt, src, handleImageSt
     return (
         <ImageLayout
             {...props}
-            theme={theme}
+            inBuiltCss={defaultStyles}
             customStyles={customStyles}
             type={type}
             alt={alt}
@@ -70,10 +70,7 @@ export const Image = ({ theme, customStyles, type, size, alt, src, handleImageSt
 }
 
 Image.propTypes = {
-    /**
-     *	Theme props
-     */
-    theme: PropTypes.object,
+
     /**
      *	Custom style object
      */
@@ -102,11 +99,9 @@ Image.propTypes = {
 }
 
 Image.defaultProps = {
-    theme: defaultStyles,
     customStyles: null,
     type: 'image',
     alt: 'image alternative',
     src: null,
     handleImageStatus: null
-}
-
+}