groundfloor-react-ui 1.2.3 → 1.2.4

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from "styled-components";
 
 export const PageContent = styled.div`

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/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,4 @@
 export * from './FormComponent';
 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';
 
 /**

package/components/Icon/Icon.js

@@ -1,55 +1,55 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import { ReactSVG } from "react-svg";
 import styled, { css } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 
 /** import icons from assets here */
-import plusOutline from '../../assets/icons/plus-outlined.svg'
-import checkMark from '../../assets/icons/checkmark.svg'
-import chevronRight from '../../assets/icons/chevron-right.svg'
-import chevronLeft from '../../assets/icons/chevron-left.svg'
-import appLogo from '../../assets/icons/app-logo.svg'
-import email from '../../assets/icons/email.svg'
-import chevronDown from '../../assets/icons/chevron-down.svg'
-import triangleDown from '../../assets/icons/triangle-down.svg'
-import info from '../../assets/icons/info.svg'
-import crossIcon from '../../assets/icons/cross-icon.svg'
-import fileAttach from '../../assets/icons/file-attach.svg'
-import jpgIcon from '../../assets/icons/jpg-icon.svg'
-import pdfIcon from '../../assets/icons/pdf-icon.svg'
-import arrowUp from '../../assets/icons/arrow-up.svg'
-import arrowDown from '../../assets/icons/arrow-down.svg'
-import penIcon from '../../assets/icons/pen-icon.svg'
-import signIcon from '../../assets/icons/sign-icon.svg'
-import editIcon from '../../assets/icons/edit-icon.svg'
-import hamburgerMenu from '../../assets/icons/hamburger-menu.svg'
-import bell from '../../assets/icons/bell.svg'
-import star from '../../assets/icons/star.svg'
-import cloudIcon from '../../assets/icons/cloud-icon.svg'
-import checkIcon from '../../assets/icons/check.svg'
-import arrowRotate from '../../assets/icons/arrow-rotate.svg'
-import connection from '../../assets/icons/connection.svg'
-import magnifier from '../../assets/icons/magnifier.svg'
-import doorInternalActive from '../../assets/icons/door-internal-active.svg'
-import ellipsesHorizontal from '../../assets/icons/ellipses-horizontal.svg'
-import ellipses from '../../assets/icons/ellipses.svg'
-import fileAttachWhite from '../../assets/icons/file-attach-white.svg'
-import equation from '../../assets/icons/functional-equation-regular.svg'
-import menuEllipseTwo from '../../assets/icons/menu-ellipse-two.svg'
-import menuEllipse from '../../assets/icons/menu-ellipse.svg'
-import pauseAll from '../../assets/icons/pause-all.svg'
-import resume from '../../assets/icons/resume.svg'
-import trashIcon from '../../assets/icons/trash-icon.svg'
-import zoomInWhite from '../../assets/icons/zoom-in-white.svg'
-import view from '../../assets/icons/view.svg'
-import user from '../../assets/icons/users.svg'
-import watcher from '../../assets/icons/watcher.svg'
-import fileUpload from '../../assets/icons/file-upload.svg'
-import eyeHide from '../../assets/icons/eye-hide.svg'
-import eyeView from '../../assets/icons/eye-hide-view.svg'
-import fileIcon from '../../assets/icons/file-icon.svg'
-import defaultIcon from '../../assets/icons/default.svg'
+import appLogo from '../../assets/icons/app-logo.svg';
+import arrowDown from '../../assets/icons/arrow-down.svg';
+import arrowRotate from '../../assets/icons/arrow-rotate.svg';
+import arrowUp from '../../assets/icons/arrow-up.svg';
+import bell from '../../assets/icons/bell.svg';
+import checkIcon from '../../assets/icons/check.svg';
+import checkMark from '../../assets/icons/checkmark.svg';
+import chevronDown from '../../assets/icons/chevron-down.svg';
+import chevronLeft from '../../assets/icons/chevron-left.svg';
+import chevronRight from '../../assets/icons/chevron-right.svg';
+import cloudIcon from '../../assets/icons/cloud-icon.svg';
+import connection from '../../assets/icons/connection.svg';
+import crossIcon from '../../assets/icons/cross-icon.svg';
+import defaultIcon from '../../assets/icons/default.svg';
+import doorInternalActive from '../../assets/icons/door-internal-active.svg';
+import editIcon from '../../assets/icons/edit-icon.svg';
+import ellipsesHorizontal from '../../assets/icons/ellipses-horizontal.svg';
+import ellipses from '../../assets/icons/ellipses.svg';
+import email from '../../assets/icons/email.svg';
+import eyeView from '../../assets/icons/eye-hide-view.svg';
+import eyeHide from '../../assets/icons/eye-hide.svg';
+import fileAttachWhite from '../../assets/icons/file-attach-white.svg';
+import fileAttach from '../../assets/icons/file-attach.svg';
+import fileIcon from '../../assets/icons/file-icon.svg';
+import fileUpload from '../../assets/icons/file-upload.svg';
+import equation from '../../assets/icons/functional-equation-regular.svg';
+import hamburgerMenu from '../../assets/icons/hamburger-menu.svg';
+import info from '../../assets/icons/info.svg';
+import jpgIcon from '../../assets/icons/jpg-icon.svg';
+import magnifier from '../../assets/icons/magnifier.svg';
+import menuEllipseTwo from '../../assets/icons/menu-ellipse-two.svg';
+import menuEllipse from '../../assets/icons/menu-ellipse.svg';
+import pauseAll from '../../assets/icons/pause-all.svg';
+import pdfIcon from '../../assets/icons/pdf-icon.svg';
+import penIcon from '../../assets/icons/pen-icon.svg';
+import plusOutline from '../../assets/icons/plus-outlined.svg';
+import resume from '../../assets/icons/resume.svg';
+import signIcon from '../../assets/icons/sign-icon.svg';
+import star from '../../assets/icons/star.svg';
+import trashIcon from '../../assets/icons/trash-icon.svg';
+import triangleDown from '../../assets/icons/triangle-down.svg';
+import user from '../../assets/icons/users.svg';
+import view from '../../assets/icons/view.svg';
+import watcher from '../../assets/icons/watcher.svg';
+import zoomInWhite from '../../assets/icons/zoom-in-white.svg';
 
 
 /** icon name should be kebab-case, e.g "plus-outline" */