groundfloor-react-ui 1.2.3 → 1.2.5

package/components/Avatar/AvatarSBfooter.js

@@ -1,7 +1,5 @@
 import PropTypes from 'prop-types';
-
 import React, { useState } from "react";
-
 import styled, { css, useTheme } from 'styled-components';
 import defaultStyles from '../constants/defaultStyle';
 import defaultThemeColor from '../constants/defaultThemeColor';
@@ -264,7 +262,7 @@ AvatarSBfooter.defaultProps = {
     /**
      * inBuiltCss object
      */
-     inBuiltCss: PropTypes.object,
+    inBuiltCss: PropTypes.object,
 };
 
 AvatarSBfooter.defaultProps = {

package/components/Button/PrimaryButton.js

@@ -147,7 +147,7 @@ PrimaryButton.propTypes = {
     * id of the primaryBtn
     */
     id: PropTypes.string,
-    
+
 };
 
 StyledButton.defaultProps = {

package/components/Cards/DocumentCard.js

@@ -8,44 +8,44 @@ import defaultThemeColor from '../constants/defaultThemeColor';
  */
 
 const sizes = {
-    sm: {
-        cardWidth: '178px',
-        cardMinHeight: '88px',
-        borderRadius: '4px',
-        border: '0.7px',
-        bodyHeight: '55px',
-        footerFontSize: '10px',
-        footerMinHeight: '31px',
-        footerPadding: '10.5px 16px',
-        footerLineHeight: '16px',
-        lineHeight: '12px',
-    },
-    md: {
-        cardWidth: '215px',
-        cardMinHeight: '123px',
-        borderRadius: '6px',
-        border: '1px',
-        bodyHeight: '67px',
-        footerFontSize: '14px',
-        footerMinHeight: '54px',
-        footerPadding: '18px 19px',
-        footerLineHeight: '12px',
-        lineHeight: '16px',
-    },
+  sm: {
+    cardWidth: '178px',
+    cardMinHeight: '88px',
+    borderRadius: '4px',
+    border: '0.7px',
+    bodyHeight: '55px',
+    footerFontSize: '10px',
+    footerMinHeight: '31px',
+    footerPadding: '10.5px 16px',
+    footerLineHeight: '16px',
+    lineHeight: '12px',
+  },
+  md: {
+    cardWidth: '215px',
+    cardMinHeight: '123px',
+    borderRadius: '6px',
+    border: '1px',
+    bodyHeight: '67px',
+    footerFontSize: '14px',
+    footerMinHeight: '54px',
+    footerPadding: '18px 19px',
+    footerLineHeight: '12px',
+    lineHeight: '16px',
+  },
 };
 
 const StyledDocumentCard = styled.div`
   ${({ trimFileName }) => {
-        if (trimFileName) {
-            return css`
+    if (trimFileName) {
+      return css`
         height: ${({ size }) => sizes[size].cardMinHeight};
       `;
-        } else {
-            return css`
+    } else {
+      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
@@ -66,7 +66,7 @@ const StyledDocumentCard = styled.div`
 const StyledCardBody = styled.div`
   display: flex;
   justify-content: ${({ buttons }) =>
-        buttons !== '11' ? 'center' : 'space-between'};
+    buttons !== '11' ? 'center' : 'space-between'};
   align-items: center;
   height: ${({ size }) => sizes[size].bodyHeight};
   margin: 0;
@@ -75,7 +75,7 @@ const StyledCardBody = styled.div`
   border-top-left-radius: ${({ size }) => sizes[size].borderRadius};
   border-top-right-radius: ${({ size }) => sizes[size].borderRadius};
   background-color: ${({ theme, variantBgBody }) =>
-        theme.variant[variantBgBody]};
+    theme.variant[variantBgBody]};
   background: linear-gradient(
       0deg,
       rgba(226, 230, 245, 0.5),
@@ -88,128 +88,128 @@ const StyledCardBody = styled.div`
 
 const StyledCardFooter = styled.div`
   ${({ trimFileName }) => {
-        if (trimFileName) {
-            return css`
+    if (trimFileName) {
+      return css`
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
         height: ${({ size }) => sizes[size].footerMinHeight};
       `;
-        } else {
-            return css`
+    } else {
+      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']};
+    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,
-    variantBorderHover,
-    variantBgBody,
-    variantBgFooter,
-    fileName,
-    bgUrl,
-    size,
-    trimFileName,
-    bodyContent,
-    ...props
+  variant,
+  variantBorder,
+  variantBorderHover,
+  variantBgBody,
+  variantBgFooter,
+  fileName,
+  bgUrl,
+  size,
+  trimFileName,
+  bodyContent,
+  ...props
 }) => {
-    const activeTheme = useTheme() || defaultThemeColor;
+  const activeTheme = useTheme() || defaultThemeColor;
 
-    return (
-        <StyledDocumentCard
-            variantBorder={variantBorder}
-            variantBorderHover={variantBorderHover}
-            variantBgBody={variantBgBody}
-            size={size}
-            trimFileName={trimFileName}
-            theme={activeTheme}
-            {...props}
-        >
-            <StyledCardBody bgUrl={bgUrl} size={size} theme={activeTheme}>
-                {bodyContent}
-            </StyledCardBody>
-            <StyledCardFooter
-                theme={activeTheme}
-                title={fileName}
-                variant={variant}
-                variantBgFooter={variantBgFooter}
-                trimFileName={trimFileName}
-                size={size}
-            >
-                {fileName}
-            </StyledCardFooter>
-        </StyledDocumentCard>
-    );
+  return (
+    <StyledDocumentCard
+      variantBorder={variantBorder}
+      variantBorderHover={variantBorderHover}
+      variantBgBody={variantBgBody}
+      size={size}
+      trimFileName={trimFileName}
+      theme={activeTheme}
+      {...props}
+    >
+      <StyledCardBody bgUrl={bgUrl} size={size} theme={activeTheme}>
+        {bodyContent}
+      </StyledCardBody>
+      <StyledCardFooter
+        theme={activeTheme}
+        title={fileName}
+        variant={variant}
+        variantBgFooter={variantBgFooter}
+        trimFileName={trimFileName}
+        size={size}
+      >
+        {fileName}
+      </StyledCardFooter>
+    </StyledDocumentCard>
+  );
 };
 
 DocumentCard.propTypes = {
-    /**
-     * Color of Footer text. primary-1, 2, error, etc.
-     */
-    variant: PropTypes.string,
-    /**
-     * Color of DocumentCard border. primary-1, 2, error, etc.
-     */
-    variantBorder: PropTypes.string,
-    /**
-     * Color of DocumentCard border on hover. primary-1, 2, error, etc.
-     */
-    variantBorderHover: PropTypes.string,
-    /**
-     * Color of Body background. primary-1, 2, error, etc.
-     */
-    variantBgBody: PropTypes.string,
-    /**
-     * Color of Footer background. primary-1, 2, error, etc.
-     */
-    variantBgFooter: PropTypes.string,
-    /**
-     * String to display in the footer
-     */
-    fileName: PropTypes.string,
-    /**
-     * Url of the picture to display as card body background
-     */
-    bgUrl: PropTypes.string,
-    /**
-     * Size of the card small or medium
-     */
-    size: PropTypes.oneOf(['sm', 'md']),
-    /**
-     * 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,
+  /**
+   * Color of Footer text. primary-1, 2, error, etc.
+   */
+  variant: PropTypes.string,
+  /**
+   * Color of DocumentCard border. primary-1, 2, error, etc.
+   */
+  variantBorder: PropTypes.string,
+  /**
+   * Color of DocumentCard border on hover. primary-1, 2, error, etc.
+   */
+  variantBorderHover: PropTypes.string,
+  /**
+   * Color of Body background. primary-1, 2, error, etc.
+   */
+  variantBgBody: PropTypes.string,
+  /**
+   * Color of Footer background. primary-1, 2, error, etc.
+   */
+  variantBgFooter: PropTypes.string,
+  /**
+   * String to display in the footer
+   */
+  fileName: PropTypes.string,
+  /**
+   * Url of the picture to display as card body background
+   */
+  bgUrl: PropTypes.string,
+  /**
+   * Size of the card small or medium
+   */
+  size: PropTypes.oneOf(['sm', 'md']),
+  /**
+   * 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,
 
-    /**
-     * Children component of the Card Body
-     */
-    bodyContent: PropTypes.element,
+  /**
+   * Children component of the Card Body
+   */
+  bodyContent: PropTypes.element,
 };
 
 DocumentCard.defaultProps = {
-    variant: 'black',
-    variantBorder: 'neutral-5',
-    variantBorderHover: 'primary-1',
-    variantBgBody: 'neutral-4',
-    variantBgFooter: null,
-    fileName: '',
-    bgUrl: null,
-    size: 'md',
-    trimFileName: true,
-    bodyContent: null,
+  variant: 'black',
+  variantBorder: 'neutral-5',
+  variantBorderHover: 'primary-1',
+  variantBgBody: 'neutral-4',
+  variantBgFooter: null,
+  fileName: '',
+  bgUrl: null,
+  size: 'md',
+  trimFileName: true,
+  bodyContent: null,
 };

package/components/Cards/index.js

@@ -1,5 +1,5 @@
 
-export * from './DocumentCard';
 export * from './Card';
 export * from './CardRef';
+export * from './DocumentCard';
 

package/components/Content/Content.js

@@ -1,9 +1,8 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import styled from 'styled-components';
 import defaultStyles from '../constants/defaultStyle';
 import getDefaultStyles from '../constants/utils';
-// import './../../../App.css'
 
 const ContentLayout = styled.div`
     //Set the styles from the default styles object

package/components/Content/index.js

@@ -1 +1 @@
-export * from './Content';
+export * from './Content';

package/components/DesignComponent/StyledComponent/StyledComponent.js

@@ -309,24 +309,4 @@ export const MultiColumnDiv = styled.div`
   max-width: 48%;
   min-width: 48%;
   
-`;
-
-
-
-
-export const FormWrapper = ({ customStyles }) => {
-
-  const Wrapper = styled.form`
-  width: 40vw;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  gap: 20px;
-  ${({ customStyles }) => customStyles}
-  `;
-  return (
-    <Wrapper customStyles={customStyles}>
-    </Wrapper>
-  );
-};
-
+`;

package/components/DesignComponent/StyledComponent/index.js

@@ -1 +1 @@
-export * from './StyledComponent';
+export * from './StyledComponent';

package/components/DesignComponent/index.js

@@ -1 +1 @@
-export * from './StyledComponent';
+export * from './StyledComponent';

package/components/ErrorBoundary/ErrorBoundary.js

@@ -1,5 +1,5 @@
-import React, { Component, Fragment } from 'react';
 import PropTypes from "prop-types";
+import React, { Component, Fragment } from 'react';
 import { PrimaryButton } from '../Button';
 
 export class ErrorBoundary extends Component {

package/components/Footer/Footer.js

@@ -1,9 +1,8 @@
-import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
+import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 import defaultStyles from '../constants/defaultStyle';
 import getDefaultStyles from '../constants/utils';
-// import { FooterContext } from '../../../routes/Level2';
 
 /**
  * Primary UI component for user interaction

package/components/Footer/FooterContent.js

@@ -1,7 +1,5 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import styled, { css } from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
-// import { FooterContext } from '../../../routes/Level2'
 
 const StyledOutsideContainer = styled.div`
     font-size: 14px;

package/components/Footer/index.js

@@ -1,2 +1,3 @@
 export * from './Footer';
-export * from './FooterContent'
+export * from './FooterContent';
+

package/components/Form/FormComponent.js

@@ -3,7 +3,7 @@ import { PrimaryButton, SecondaryButton, TinyButton } from '../Button';
 import defaultThemeColor from '../constants/defaultThemeColor';
 import {
   FormContainer,
-  FormWrapper, MultiColumnDiv, MultiColumnWrapper
+  MultiColumnDiv, MultiColumnWrapper
 } from '../DesignComponent';
 import { Header } from '../Header';
 import {
@@ -23,9 +23,11 @@ import {
 import { Label } from '../Label';
 import { Rating } from '../Rating';
 import { Table } from '../Tables';
+import { FormWrapper } from './FormWrapper';
 import { HeaderComponent } from './HeaderComponent';
 
-export const FormComponent = ({ formData, ...props }) => {
+
+export const FormComponent = ({ formData, customStyles, ...props }) => {
   const header = (item) => {
     return (
       <Fragment>
@@ -211,8 +213,8 @@ export const FormComponent = ({ formData, ...props }) => {
 
   return (
     <Fragment>
-      <FormContainer defaultThemeColor={defaultThemeColor} >
-        <FormWrapper onSubmit={handleSubmit}  >
+      <FormContainer defaultThemeColor={defaultThemeColor}>
+        <FormWrapper onSubmit={handleSubmit} customStyles={customStyles} >
           {formData.map((row, i) => {
             if (row.length > 1) {
               return (

package/components/Form/FormWrapper.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Wrapper = styled.form`
+  width: 40vw;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  gap: 20px;
+  ${({ customStyles }) => customStyles}
+`;
+
+export const FormWrapper = ({ customStyles }) => {
+  return <Wrapper customStyles={customStyles}></Wrapper>;
+};

package/components/Form/SubmitComponent.js

@@ -1,4 +1,4 @@
-import React, { Fragment, useState } from 'react'
+import React, { Fragment } from 'react';
 import { PrimaryButton, SecondaryButton } from '../Button';
 import { SubmitButtonContainer } from '../DesignComponent';
 

package/components/Form/index.js

@@ -1,3 +1,6 @@
 export * from './FormComponent';
+export * from './FormWrapper';
 export * from './HeaderComponent';
 export * from './SubmitComponent';
+
+

package/components/GroupButtons/ButtonPopup.js

@@ -1,8 +1,8 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
+import { usePopperTooltip } from 'react-popper-tooltip';
 import styled, { useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
-import { usePopperTooltip } from 'react-popper-tooltip';
 
 /**
  * Primary UI component for user interaction

package/components/GroupButtons/GroupButtons.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';
 

package/components/GroupButtons/index.js

@@ -1,3 +1,3 @@
+export * from './ButtonPopup';
 export * from './GroupButtons';
 export * from './GroupButtonsPopup';
-export * from './ButtonPopup';

package/components/GroupStatusCircle/GroupStatusCircle.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 { StatusCircle } from '../StatusCircle';

package/components/Header/Header.js

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import styled from 'styled-components';
 import defaultStyles from '../constants/defaultStyle';
 import getDefaultStyles from '../constants/utils';
@@ -11,7 +11,7 @@ import getDefaultStyles from '../constants/utils';
 const StyledHeader = styled.header`
     //Set the styles from the default styles object
     ${({ theme, type }) => {
-            return getDefaultStyles(theme,type);
+        return getDefaultStyles(theme, type);
     }}
     // custom styles
     ${({ customStyles }) => customStyles}

package/components/HyperLink/HyperLink.js

@@ -1,6 +1,6 @@
-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';
 
 /**