groundfloor-react-ui 1.0.0 → 1.0.1

package/components/Inputs/Signature.js

@@ -1,120 +1,134 @@
-import React, { useState, useRef, useEffect } from "react";
-import SignaturePad from 'react-signature-pad-wrapper'
+import React, { useState, useRef, useEffect } from 'react';
+import SignaturePad from 'react-signature-pad-wrapper';
 import styled from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 import defaultStyle from '../constants/defaultStyle';
 import getDefaultStyles from '../constants/utils';
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 
-import { Icon } from "../Icon";
+import { Icon } from '../Icon';
 
 const ParentDiv = styled.div`
-
-    //Set the styles from the default styles object
-    ${({ theme, defaultParentDivStyle }) => {
+  //Set the styles from the default styles object
+  ${({ theme, defaultParentDivStyle }) => {
         return getDefaultStyles(theme, defaultParentDivStyle);
     }}
-    
-    border: 1px solid ${({ isMyInputFocused, activeColor, defaultColor }) => isMyInputFocused ? activeColor : defaultColor};
-    
-    &:focus-within{
-        border-color:  ${({ activeColor }) => activeColor};
-    }
+
+  border: 1px solid ${({ isMyInputFocused, activeColor, defaultColor }) =>
+        isMyInputFocused ? activeColor : defaultColor};
+
+  &:focus-within {
+    border-color: ${({ activeColor }) => activeColor};
+  }
 `;
 
 const WrapperDiv = styled.div`
-    
-    //Set the styles from the default styles object
-    ${({ theme, defaultWrapperDivStyle }) => {
+  //Set the styles from the default styles object
+  ${({ theme, defaultWrapperDivStyle }) => {
         return getDefaultStyles(theme, defaultWrapperDivStyle);
     }}
 
-    flex-direction: ${({ signIcon }) => signIcon ? 'column' : 'initial'};
-    width: ${({ signIcon }) => signIcon ? 'min-content' : 'calc(100% - 50px) !important'};
-    max-width: ${({ signIcon }) => signIcon ? '42px' : '490px'};
-    border-right: 1px solid 
-        ${({ activeColor, defaultColor, isMyInputFocused, signIcon }) =>
-        signIcon ? isMyInputFocused ? activeColor : defaultColor : 'none'};
-    border-left: ${({ signIcon }) => !signIcon ? 'none' : ''};
-    margin-left: ${({ signIcon }) => !signIcon ? '42px' : ''};
-    position:${({ signIcon }) => !signIcon ? '' : 'absolute'};
-    
+  flex-direction: ${({ signIcon }) => (signIcon ? 'column' : 'initial')};
+  width: ${({ signIcon }) =>
+        signIcon ? 'min-content' : 'calc(100% - 50px) !important'};
+  max-width: ${({ signIcon }) => (signIcon ? '42px' : '490px')};
+  border-right: 1px solid
+    ${({ activeColor, defaultColor, isMyInputFocused, signIcon }) =>
+        signIcon ? (isMyInputFocused ? activeColor : defaultColor) : 'none'};
+  border-left: ${({ signIcon }) => (!signIcon ? 'none' : '')};
+  margin-left: ${({ signIcon }) => (!signIcon ? '42px' : '')};
+  position: ${({ signIcon }) => (!signIcon ? '' : 'absolute')};
 `;
 
 const ControllerDiv = styled.div`
-    width: 39px;
-    height:44px;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    border-bottom:  ${({ penIcon, isMyInputFocused, activeColor, defaultColor, }) =>
-        penIcon ? isMyInputFocused ? "1px solid " + activeColor : "1px solid " + defaultColor : ''};
-    background-color:rgba(255, 255, 255, 0.05);
-    cursor:pointer;
+  width: 39px;
+  height: 44px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border-bottom: ${({ penIcon, isMyInputFocused, activeColor, defaultColor }) =>
+        penIcon
+            ? isMyInputFocused
+                ? '1px solid ' + activeColor
+                : '1px solid ' + defaultColor
+            : ''};
+  background-color: rgba(255, 255, 255, 0.05);
+  cursor: pointer;
 `;
 
-
 const InputText = styled.input`
-    ${({ theme, defaultInputStyle }) => {
+  ${({ theme, defaultInputStyle }) => {
         return getDefaultStyles(theme, defaultInputStyle);
     }}
-    
-    border-bottom:  ${({ value, defaultColor, }) =>
-        value.length > 0 ? 'none' : "1px solid " + defaultColor};
-    
-    &::placeholder{
-        font-size: 17px;
-        text-align: center;
-        color: ${({ placeholderColor }) => placeholderColor};
-        font-family: "Averta";
-        font-style: normal;
-        font-weight: normal;
-        line-height: 22px;
-    }
-    &:focus-within {
-		border: none;
-        outline: none;
-        
-        ::placeholder {
-            color: transparent;
-        }
+
+  border-bottom:  ${({ value, defaultColor }) =>
+        value.length > 0 ? 'none' : '1px solid ' + defaultColor};
+
+  &::placeholder {
+    font-size: 17px;
+    text-align: center;
+    color: ${({ placeholderColor }) => placeholderColor};
+    font-family: 'Averta';
+    font-style: normal;
+    font-weight: normal;
+    line-height: 22px;
+  }
+  &:focus-within {
+    border: none;
+    outline: none;
+
+    ::placeholder {
+      color: transparent;
     }
-    
-    // custom styles
-    ${({ customInputStyle }) => customInputStyle}
+  }
+
+  // custom styles
+  ${({ customInputStyle }) => customInputStyle}
 `;
 
 const SignaturePadDiv = styled.div`
-    position: relative;
-    width: inherit;
-    display: flex;
-    margin: 4px;
+  position: relative;
+  width: inherit;
+  display: flex;
+  margin: 4px;
 `;
 
 const IconDiv = styled.div`
-    padding-left: 2px;
-    display: flex;
-    justify-content: center;
-    cursor: pointer;
-    margin-left: ${({ selected }) => selected === 'sign' ? '' : 'auto'};
+  padding-left: 2px;
+  display: flex;
+  justify-content: center;
+  cursor: pointer;
 `;
 
-
-export const SignatureInput = ({ onChange, activeColor, defaultColor, placeholderColor, placeholderText, customInputStyle, pointsArray, setPointsArray, value, setValue, valueForSignatureDrawing, setValueForSignatureDrawing, imageURL, setImageURL, ...props }) => {
+export const SignatureInput = ({
+    onChange,
+    activeColor,
+    defaultColor,
+    placeholderColor,
+    placeholderText,
+    customInputStyle,
+    pointsArray,
+    setPointsArray,
+    value,
+    setValue,
+    valueForSignatureDrawing,
+    setValueForSignatureDrawing,
+    imageURL,
+    setImageURL,
+    ...props
+}) => {
     const [selected, setSelected] = useState('default');
     const [isMyInputFocused, setIsMyInputFocused] = useState(false);
     const [dirty, setDirty] = useState(false);
     const pad = useRef(null);
 
-    // const theme = defaultStyle;
-
     useEffect(() => {
         if (dirty) {
             save();
             setValueForSignatureDrawing(pad.current);
         }
-    }, [dirty === true])
+    }, [dirty === true]);
 
     const onClear = () => {
         setValue('');
@@ -124,13 +138,13 @@ export const SignatureInput = ({ onChange, activeColor, defaultColor, placeholde
         }
         setIsMyInputFocused(false);
         setDirty(false);
-    }
+    };
 
     const save = () => {
         setPointsArray(pad.current.toData());
-        setImageURL(pad.current.toDataURL("image/png"));
+        setImageURL(pad.current.toDataURL('image/png'));
         return [imageURL, pointsArray];
-    }
+    };
 
     return (
         <ParentDiv
@@ -139,7 +153,8 @@ export const SignatureInput = ({ onChange, activeColor, defaultColor, placeholde
             isMyInputFocused={isMyInputFocused}
             selected={selected}
             activeColor={activeColor}
-            defaultColor={defaultColor}>
+            defaultColor={defaultColor}
+        >
             <WrapperDiv
                 theme={defaultStyle}
                 defaultWrapperDivStyle={'signature-wrapper-div'}
@@ -147,27 +162,37 @@ export const SignatureInput = ({ onChange, activeColor, defaultColor, placeholde
                 defaultColor={defaultColor}
                 selected={selected}
                 isMyInputFocused={isMyInputFocused}
-                signIcon={true}>
+                signIcon={true}
+            >
                 <ControllerDiv
                     activeColor={activeColor}
                     defaultColor={defaultColor}
                     isMyInputFocused={isMyInputFocused}
                     penIcon={true}
-                    onClick={() => { setSelected('default') }}>
+                    onClick={() => {
+                        setSelected('default');
+                        onClear();
+                    }}
+                >
                     <Icon
                         icon='pen-icon'
-                        color={selected === 'default' ?
-                            activeColor : 'black'} />
+                        color={selected === 'default' ? activeColor : 'black'}
+                    />
                 </ControllerDiv>
                 <ControllerDiv
-                    activeColor={activeColor} defaultColor={defaultColor}
+                    activeColor={activeColor}
+                    defaultColor={defaultColor}
                     isMyInputFocused={isMyInputFocused}
                     penIcon={false}
-                    onClick={() => { setSelected('sign') }}>
+                    onClick={() => {
+                        setSelected('sign');
+                        onClear();
+                    }}
+                >
                     <Icon
                         icon='sign-icon'
-                        color={selected !== 'default' ?
-                            activeColor : 'black'} />
+                        color={selected !== 'default' ? activeColor : 'black'}
+                    />
                 </ControllerDiv>
             </WrapperDiv>
             <WrapperDiv
@@ -178,10 +203,14 @@ export const SignatureInput = ({ onChange, activeColor, defaultColor, placeholde
                 selected={selected}
                 isMyInputFocused={isMyInputFocused}
                 signIcon={false}
-                onTouchStart={() => { console.log('touchstart') }}>
-                {selected === 'default' ?
+                onTouchStart={() => {
+                    console.log('touchstart');
+                }}
+            >
+                {selected === 'default' ? (
                     <InputText
-                        theme={defaultStyle} defaultInputStyle={'signature-input-text'}
+                        theme={defaultStyle}
+                        defaultInputStyle={'signature-input-text'}
                         placeholder={placeholderText}
                         placeholderColor={placeholderColor}
                         customInputStyle={customInputStyle}
@@ -189,29 +218,34 @@ export const SignatureInput = ({ onChange, activeColor, defaultColor, placeholde
                         onFocus={() => setIsMyInputFocused(true)}
                         value={value}
                         defaultColor={defaultColor}
-                        onChange={(e) => setValue(e.target.value)} />
-                    : <SignaturePadDiv
+                        onChange={(e) => setValue(e.target.value)}
+                    />
+                ) : (
+                    <SignaturePadDiv
                         onMouseEnter={() => setIsMyInputFocused(true)}
                         onMouseLeave={() => setIsMyInputFocused(false)}
-                        onClick={() => { setDirty(true); save(); }}>
+                        onClick={() => {
+                            setDirty(true);
+                            save();
+                        }}
+                    >
                         <SignaturePad
                             ref={pad}
                             redrawOnResize
                             height={75}
-                            options={{ minWidth: 1, maxWidth: 1, penColor: '#444444' }} />
+                            options={{ minWidth: 1, maxWidth: 1, penColor: '#444444' }}
+                        />
                     </SignaturePadDiv>
-                }
-                {(value || dirty) && <IconDiv selected={selected} onClick={() => onClear()}>
-                    <Icon
-                        icon='cross-icon'
-                        color={defaultColor}
-                    />
-                </IconDiv>
-                }
+                )}
+                {(value || dirty) && (
+                    <IconDiv selected={selected} onClick={() => onClear()}>
+                        <Icon icon='cross-icon' color={defaultColor} />
+                    </IconDiv>
+                )}
             </WrapperDiv>
         </ParentDiv>
-    )
-}
+    );
+};
 
 SignatureInput.propTypes = {
     /**
@@ -257,9 +291,8 @@ SignatureInput.propTypes = {
     /**
      *	Function that sets Image url of the Signature drawing
      */
-    setImageURL: PropTypes.func
-
-}
+    setImageURL: PropTypes.func,
+};
 
 SignatureInput.defaultProps = {
     activeColor: `${defaultThemeColor.primary['primary-1']}`,
@@ -269,10 +302,10 @@ SignatureInput.defaultProps = {
     placeholderText: 'Type your signature here',
     pointsArray: null,
     setPointsArray: () => { },
-    value: "",
+    value: '',
     setValue: () => { },
     imageURL: '',
     setImageURL: () => { },
     setValueForSignatureDrawing: () => { },
-}
+};
 

package/components/Inputs/TextArea.js

@@ -6,7 +6,6 @@ import defaultStyles from '../constants/defaultStyle';
 import getDefaultStyles from '../constants/utils';
 import { Label } from '../Label';
 
-const border = `#D4D7E3`;
 
 const TextWrapper = styled.div`
     //Set the styles from the default styles object
@@ -15,7 +14,7 @@ const TextWrapper = styled.div`
     }}
 	
 	border: ${({ isValid, themeColor }) => !isValid ? '1px solid ' + themeColor.variant['error'] :
-        '1px solid ' + border};
+        '1px solid ' + defaultThemeColor.border};
     
     .input-icon svg path {
 		fill: ${({ themeColor }) => themeColor.variant['neutral-1']};

package/components/Inputs/TextInput.js

@@ -6,7 +6,6 @@ import defaultStyles from '../constants/defaultStyle';
 import getDefaultStyles from '../constants/utils';
 import { Label } from '../Label';
 
-const border = `#D4D7E3`;
 
 const TextWrapper = styled.div`
     //Set the styles from the default styles object
@@ -15,7 +14,7 @@ const TextWrapper = styled.div`
 	}}
 	
 	border: ${({ isValid, themeColor }) => !isValid ? '1px solid ' + themeColor.variant['error'] :
-		'1px solid ' + border};
+		'1px solid ' + defaultThemeColor.border};
     
     .input-icon svg path {
 		fill: ${({ themeColor }) => themeColor.variant['neutral-1']};
@@ -69,13 +68,11 @@ Form.defaultProps = {
 	themeColor: defaultThemeColor,
 }
 
-
 export const TextInput = ({ themeColor, textBoxStyle, labelStyle, inputStyle, errMsg, required, label, labelInline, iconBefore, iconAfter, isValid, type, ...props }) => {
 	return (
 		<Form labelInline={labelInline} {...props}>
 			<div style={{ display: 'flex' }}>
 				<Label
-					themeColor={defaultThemeColor}
 					customStyles={labelStyle}
 					type={'label-text'}
 					labelInline={labelInline}
@@ -83,7 +80,7 @@ export const TextInput = ({ themeColor, textBoxStyle, labelStyle, inputStyle, er
 					errMsg={errMsg}
 					style={{
 						'display': 'flex',
-						'paddingBottom': `${!labelInline ? '10px' : ''}`,
+						'marginBottom': `${!labelInline ? '10px' : ''}`,
 					}}
 					{...props} />
 				{required && <div style={{
@@ -179,4 +176,4 @@ TextInput.defaultProps = {
 	labelStyle: {},
 	inputStyle: {},
 	type: 'text'
-}
+}

package/components/Inputs/TimeInput.js

@@ -3,12 +3,11 @@ import PropTypes from 'prop-types';
 import styled, { css, useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 
-const border = `#D4D7E3`;
 
 const TextBox = styled.div`
     color: #A9B1B8;
     font-size: 21px;
-    border: 1px solid ${({ theme, isValid }) => isValid ? border : theme.variant['error']};
+    border: 1px solid ${({ theme, isValid }) => isValid ? defaultThemeColor.border : theme.variant['error']};
     border-radius: 4px;
     padding: 5px;
     display: inline-block;
@@ -98,13 +97,13 @@ export const TimeInput = ({ label, errMsg, hour, minute, period, onChange, ...pr
     const theme = useTheme() || defaultThemeColor;
 
     function hourChange(evt) {
-        const num = evt.currentTarget.value>12? 12: parseFloat(evt.currentTarget.value) || 0;
+        const num = evt.currentTarget.value > 12 ? 12 : parseFloat(evt.currentTarget.value) || 0;
         onChange({ hour: num, minute, period });
     }
 
     function minuteChange(evt) {
         console.log('minute change', evt.currentTarget.value);
-        const num = evt.currentTarget.value>59?59: parseFloat(evt.currentTarget.value) || 0;
+        const num = evt.currentTarget.value > 59 ? 59 : parseFloat(evt.currentTarget.value) || 0;
         onChange({ hour, minute: num, period });
     }
 

package/components/Modal/ModalComp.js

@@ -1,14 +1,15 @@
-import React, { useState } from 'react'
-import Modal from "react-modal";
+import React from 'react';
+import Modal from 'react-modal';
 import styled from 'styled-components';
 import defaultStyles from '../constants/defaultStyle';
 import getDefaultStyles from '../constants/utils';
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 import { Icon } from '../Icon';
+import defaultThemeColor from '../constants/defaultThemeColor';
 
 const customStyles = {
   overlay: {
-    zIndex: '999'
+    zIndex: '999',
   },
   content: {
     top: '50%',
@@ -16,89 +17,110 @@ const customStyles = {
     right: 'auto',
     bottom: 'auto',
     marginRight: '-50%',
-    padding: '3rem 3rem 0.8rem 3rem',
+    padding: '1rem 3rem 0.8rem 3rem',
     transform: 'translate(-50%, -50%)',
+    maxHeight: '90vh',
   },
 };
 
 const ModalClose = styled.button`
-    //Set the styles from the default styles object
-    ${({ theme, type }) => {
+  //Set the styles from the default styles object
+  ${({ theme, type }) => {
     return getDefaultStyles(theme, type);
   }}
-    // custom styles
+  // custom styles
     ${({ customModalCloseStyle }) => customModalCloseStyle}
     ${'' /* background: transparent; */}
-`
+`;
 
 const ModalHeader = styled.div`
-  .header-title{
+  .header-title {
     display: flex;
     gap: 10px;
     align-items: center;
   }
-  .header-description{
+  .header-description {
     margin-top: 5px;
   }
   h4 {
     margin-bottom: 0;
   }
   // custom styles
-    ${({ customModalHeaderStyle }) => customModalHeaderStyle}
-`
+  ${({ customModalHeaderStyle }) => customModalHeaderStyle}
+`;
 const ModalBody = styled.div`
   //Set the styles from the default styles object
-    ${({ theme, type }) => {
+  ${({ theme, type }) => {
     return getDefaultStyles(theme, type);
   }}
-    // custom styles
+  // custom styles
     ${({ customModalBodyStyle }) => customModalBodyStyle}
-`
+`;
 
 const ModalFooter = styled.div`
   //Set the styles from the default styles object
-    ${({ theme, type }) => {
+  ${({ theme, type }) => {
     return getDefaultStyles(theme, type);
   }}
-    // custom styles
+  // custom styles
     ${({ customModalFooterStyle }) => customModalFooterStyle}
-`
+`;
 
-Modal.setAppElement("#root");
-
-
-export const ModalComp = ({ modalIsOpen, toggleModal, closeOnOutsideClick, headerContent, bodyContent, footerContent, customModalCloseStyle, customModalHeaderStyle, customModalBodyStyle, customModalFooterStyle, ...props }) => {
+Modal.setAppElement('#root');
 
+export const ModalComp = ({
+  modalIsOpen,
+  toggleModal,
+  closeOnOutsideClick,
+  headerContent,
+  bodyContent,
+  footerContent,
+  customModalCloseStyle,
+  customModalHeaderStyle,
+  customModalBodyStyle,
+  customModalFooterStyle,
+  ...props
+}) => {
   return (
     <Modal
       isOpen={modalIsOpen}
-      // onAfterOpen={afterOpenModal}
       onRequestClose={closeOnOutsideClick ? toggleModal : undefined}
       style={customStyles}
-      contentLabel="Example Modal"
+      contentLabel='Modal'
       {...props}
     >
-      <ModalClose theme={defaultStyles}
-        type={'modalComp-modal-close'} style={customModalCloseStyle} onClick={toggleModal}>
-        <Icon icon='cross-icon' />
+      <ModalClose
+        theme={defaultStyles}
+        type={'modalComp-modal-close'}
+        style={customModalCloseStyle}
+        onClick={toggleModal}
+      >
+        <Icon
+          icon='cross-icon'
+          color={defaultThemeColor.neutral['neutral-2']}
+          size={15}
+        />
       </ModalClose>
 
-      <ModalHeader style={customModalHeaderStyle}>
-        {headerContent}
-      </ModalHeader>
-      <ModalBody theme={defaultStyles}
-        type={'modalComp-modal-body'} style={customModalBodyStyle}>
+      <ModalHeader style={customModalHeaderStyle}>{headerContent}</ModalHeader>
+      <ModalBody
+        theme={defaultStyles}
+        type={'modalComp-modal-body'}
+        style={customModalBodyStyle}
+      >
         {bodyContent}
       </ModalBody>
 
-      <ModalFooter theme={defaultStyles}
-        type={'modalComp-modal-footer'} style={customModalFooterStyle}>
-        {/* <hr /> */}
+      <ModalFooter
+        theme={defaultStyles}
+        type={'modalComp-modal-footer'}
+        style={customModalFooterStyle}
+      >
         {footerContent}
       </ModalFooter>
     </Modal>
   );
-}
+};
 
 ModalComp.propTypes = {
   /**
@@ -111,7 +133,7 @@ ModalComp.propTypes = {
   toggleModal: PropTypes.func,
   /**
    *	Close modal on clicking outside
-  */
+   */
   closeOnOutsideClick: PropTypes.bool,
   /**
    *	Modal Header Content
@@ -127,21 +149,21 @@ ModalComp.propTypes = {
   footerContent: PropTypes.any,
   /**
    *	Modal Close icon custom styles
-  */
+   */
   customModalCloseStyle: PropTypes.object,
   /**
    *	Modal Header custom styles
-  */
+   */
   customModalHeaderStyle: PropTypes.object,
   /**
    *	Modal Body custom styles
-  */
+   */
   customModalBodyStyle: PropTypes.object,
   /**
    *	Modal Footer custom styles
-  */
-  customModalFooterStyle: PropTypes.object
-}
+   */
+  customModalFooterStyle: PropTypes.object,
+};
 
 ModalComp.defaultProps = {
   modalIsOpen: false,
@@ -153,6 +175,6 @@ ModalComp.defaultProps = {
   customModalCloseStyle: {},
   customModalHeaderStyle: {},
   customModalBodyStyle: {},
-  customModalFooterStyle: {}
-}
+  customModalFooterStyle: {},
+};
 

package/components/Modal/index.js

@@ -1,2 +1 @@
-export * from './Modal';
 export * from './ModalComp';