groundfloor-react-ui 1.0.0 → 1.0.1

package/README.md

@@ -7,7 +7,7 @@ The official component library for GroundFloor application
 The package can be installed via [npm](https://github.com/npm/cli):
 
 ```
-npm install phq-groundfloor-react-ui --save
+npm install groundfloor-react-ui --save
 ```
 
 ## Pre-requisites
@@ -17,4 +17,4 @@ The following peer dependencies are required to run in a React Project
 - React v16.8 or greater
 - styled-components v5 or greater
 
----
+---

package/assets/icons/file-upload.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.926 4.72609L8.14392 7.26414C7.84042 7.54002 7.38517 7.65037 6.97038 7.54921C6.54548 7.44806 6.22175 7.1446 6.11047 6.76757C5.98907 6.38134 6.11047 5.97673 6.42408 5.69165L11.2801 1.27765C11.3914 1.1765 11.533 1.09374 11.6847 1.04776C11.9781 0.937409 12.312 0.937409 12.6054 1.04776C12.7571 1.10293 12.8886 1.1765 13.01 1.27765L17.866 5.69165C18.0987 5.90316 18.2201 6.17903 18.2201 6.4733C18.2201 6.76757 18.0886 7.05264 17.866 7.25495C17.6334 7.47565 17.3197 7.586 16.996 7.586C16.6723 7.586 16.3587 7.46645 16.1361 7.25495L13.354 4.72609V15.3105C13.354 15.9174 12.8077 16.414 12.14 16.414C11.4723 16.414 10.926 15.9174 10.926 15.3105V4.72609ZM21.852 15.3105C21.852 14.7036 22.3983 14.207 23.066 14.207C23.7337 14.207 24.28 14.7036 24.28 15.3105V19.7245C24.28 21.5545 22.6512 23.035 20.638 23.035H3.642C1.62878 23.035 0 21.5545 0 19.7245V15.3105C0 14.7036 0.5463 14.207 1.214 14.207C1.8817 14.207 2.428 14.7036 2.428 15.3105V19.7245C2.428 20.3314 2.9743 20.828 3.642 20.828H20.638C21.3057 20.828 21.852 20.3314 21.852 19.7245V15.3105Z" fill="#2E56F4"/>
+</svg>

package/components/Accordion/Accordion.js

@@ -42,7 +42,7 @@ export const Accordion = ({
                             style={
                                 toggleIconAnimation &&
                                     contentIsOpen ? { transform: 'rotate(180deg)', transition: 'transform ease 95ms', background: 'transparent' } :
-                                    { transform: 'rotate(0deg)', background: 'transparent' }
+                                    { transform: 'rotate(0deg)', transition: 'transform ease 95ms', background: 'transparent' }
                             }
                         >
                             {icon}
@@ -58,7 +58,7 @@ export const Accordion = ({
                     // contentIsOpen={contentIsOpen}
                     {...props}
                     style={
-                        contentIsOpen ? { height: contentRef.current.scrollHeight + 'px', } : { height: '0px', borderBottom: 'none' }
+                        contentIsOpen ? { height: contentRef.current.scrollHeight + 'px', } : { height: '0px', borderBottom: 'none', }
                     }
                     content={content}
                 />}

package/components/Form/FormComponent.js

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react'
-import { FormContainer, FormWrapper, MultiColumnWrapper, MultiColumnDiv, SubmitButtonContainer } from './StyledComponent';
+import { FormContainer, FormWrapper, MultiColumnWrapper, MultiColumnDiv } from './StyledComponent';
 import defaultThemeColor from '../constants/defaultThemeColor'
 import { Header } from '../Header';
 import { Label } from '../Label';

package/components/Form/HeaderComponent.js

@@ -1,12 +1,7 @@
-import React, { Fragment, useState } from 'react'
-import { Label } from '../..';
-import { SubmitButtonContainer } from './StyledComponent';
+import React from 'react'
 import defaultThemeColor from '../constants/defaultThemeColor'
 import userIcon from "../../assets/icons/users.svg";
 
-
-
-
 export const HeaderComponent = ({ title, subtitle, wrapperstyle }) => {
 
     const titleStyle = {

package/components/Icon/Icon.js

@@ -45,6 +45,7 @@ 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'
 
 
 /** icon name should be kebab-case, e.g "plus-outline" */
@@ -72,14 +73,14 @@ const iconObj = {
     'star': star,
     'cloud-icon': cloudIcon,
     'check-icon': checkIcon,
-    'arrow-rotate':arrowRotate,
+    'arrow-rotate': arrowRotate,
     'magnifier-icon': magnifier,
     'connection': connection,
     'door-internal-active': doorInternalActive,
     'ellipses-horizontal': ellipsesHorizontal,
     'ellipses': ellipses,
     'file-attach-white': fileAttachWhite,
-    'functional-equation':equation,
+    'functional-equation': equation,
     "menu-ellipse-two": menuEllipseTwo,
     'menu-ellipse': menuEllipse,
     'pause-all': pauseAll,
@@ -88,9 +89,8 @@ const iconObj = {
     'zoom-in-white': zoomInWhite,
     'watcher': watcher,
     'view': view,
-    'user-icon':user,
-
-
+    'user-icon': user,
+    'file-upload': fileUpload,
 }
 
 const StyledSVGIcon = styled(ReactSVG)`
@@ -158,4 +158,4 @@ Icon.propTypes = {
 Icon.defaultProps = {
     size: 16,
     color: defaultThemeColor.primary['primary-1'],
-}
+}

package/components/Inputs/DateSelect.js

@@ -7,7 +7,6 @@ import defaultThemeColor from '../constants/defaultThemeColor';
 
 import { Icon } from "../Icon";
 
-const border = `#D4D7E3`;
 
 const Wrapper = styled.div`
 
@@ -32,11 +31,12 @@ const Wrapper = styled.div`
     }
     
     .react-datepicker__input-container{
-        border: 1px solid ${border};
+        border: 1px solid ${defaultThemeColor.border};
         border-radius: 4px;
         padding: 8px 12px;
         display: flex;
         align-items: center;
+        background-color:  ${({ theme }) => theme.bgColor};
 
         
         &:focus-within {