groundfloor-react-ui 1.0.0 → 1.0.3

package/components/Inputs/PasswordInput.js

@@ -0,0 +1,192 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { css } from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
+import defaultStyles from '../constants/defaultStyle';
+import getDefaultStyles from '../constants/utils';
+import { Label } from '../Label';
+import { Icon } from '../Icon';
+import { useState } from 'react';
+import { useEffect } from 'react';
+
+const TextWrapper = styled.div`
+  //Set the styles from the default styles object
+  ${({ theme, defaultWrapperStyle }) => {
+    return getDefaultStyles(theme, defaultWrapperStyle);
+  }}
+
+  border: ${({ isValid, themeColor }) =>
+    !isValid
+      ? '1px solid ' + themeColor.variant['error']
+      : '1px solid ' + defaultThemeColor.border};
+
+  .input-icon svg path {
+    fill: ${({ themeColor }) => themeColor.variant['neutral-1']};
+  }
+  .input-icon {
+    cursor: pointer;
+  }
+
+  &:focus-within {
+    border: 1px solid ${({ themeColor }) => themeColor.variant['primary-1']};
+    outline: none;
+
+    .input-icon svg path {
+      fill: ${({ themeColor }) => themeColor.variant['primary-1']};
+    }
+  }
+
+  // custom styles
+  ${({ textBoxStyle }) => textBoxStyle}
+`;
+
+const Input = styled.input`
+  width: inherit;
+  //Set the styles from the default styles object
+  ${({ theme, defaultInputStyle }) => {
+    return getDefaultStyles(theme, defaultInputStyle);
+  }}
+
+  // custom styles
+    ${({ inputStyle }) => inputStyle}
+
+	.sc-furwcr bxRAoq {
+    color: ${defaultThemeColor.variant['neutral-3']};
+  }
+`;
+
+const inline = css`
+  display: flex;
+  gap: 7px;
+  align-items: center;
+`;
+
+const Form = styled.div`
+  ${({ labelInline }) => (labelInline ? inline : null)}
+  .err-text {
+    color: ${({ themeColor }) => themeColor.variant['error']};
+    margin-top: 5px;
+    font-size: 10px;
+  }
+`;
+
+Form.defaultProps = {
+  themeColor: defaultThemeColor,
+};
+
+export const PasswordInput = ({
+  themeColor,
+  textBoxStyle,
+  labelStyle,
+  inputStyle,
+  errMsg,
+  required,
+  label,
+  labelInline,
+  isValid,
+  ...props
+}) => {
+  const [showEye, setShowEye] = useState(false);
+
+  return (
+    <Form labelInline={labelInline} {...props}>
+      <div style={{ display: 'flex' }}>
+        <Label
+          customStyles={labelStyle}
+          type={'label-text'}
+          labelInline={labelInline}
+          text={label}
+          errMsg={errMsg}
+          style={{
+            display: 'flex',
+            marginBottom: `${!labelInline ? '7px' : ''}`,
+          }}
+          {...props}
+        />
+        {required && (
+          <div
+            style={{
+              marginLeft: '4px',
+              color: `${themeColor.variant['error']}`,
+            }}
+          >
+            *
+          </div>
+        )}
+      </div>
+      <TextWrapper
+        required={required}
+        themeColor={defaultThemeColor}
+        textBoxStyle={textBoxStyle}
+        isValid={isValid}
+        theme={defaultStyles}
+        defaultWrapperStyle={'textbox-wrapper'}
+        {...props}
+      >
+        <Input
+          inputStyle={inputStyle}
+          type={showEye ? 'text' : 'password'}
+          defaultInputStyle={'input-wrapper'}
+          {...props}
+        />
+        <div className='input-icon' onClick={() => setShowEye(!showEye)}>
+          {showEye ? <Icon icon='eye-show' /> : <Icon icon='eye-hide' />}
+        </div>
+      </TextWrapper>
+      {errMsg.length > 0 && <div className='err-text'>{errMsg}</div>}
+    </Form>
+  );
+};
+
+PasswordInput.propTypes = {
+  /**
+   *	Theme props of default in-built css
+   */
+  theme: PropTypes.object,
+  /**
+   *	Color props of default theme
+   */
+  themeColor: PropTypes.object,
+  /**
+   *	Label of Input
+   */
+  label: PropTypes.string,
+  /**
+   *	Is the input required?
+   */
+  required: PropTypes.bool,
+  /**
+   *	Should label be inline with textbox?
+   */
+  labelInline: PropTypes.bool,
+  /**
+   *	Error Message
+   */
+  errMsg: PropTypes.string,
+
+  /**
+   *	custom style of textbox Wrapper
+   */
+  textBoxStyle: PropTypes.object,
+  /**
+   *	custom style of textbox input
+   */
+  labelStyle: PropTypes.object,
+  /**
+   *	custom style of textbox label
+   */
+  inputStyle: PropTypes.object,
+};
+
+PasswordInput.defaultProps = {
+  themeColor: defaultThemeColor,
+  theme: defaultStyles,
+  label: '',
+  required: false,
+  isValid: true,
+  labelInline: false,
+  errMsg: '',
+  textBoxStyle: {},
+  labelStyle: {},
+  inputStyle: {},
+};

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']};
@@ -53,7 +52,7 @@ const Input = styled.textarea`
 
 const inline = css`
 	display: flex;
-    gap: 10px;
+    gap: 7px;
 	align-items: center;
 `
 
@@ -90,7 +89,7 @@ export const TextArea = React.forwardRef(({ themeColor, customStylesForm, textAr
                     errMsg={errMsg}
                     style={{
                         'display': 'flex',
-                        'paddingBottom': `${!labelInline ? '10px' : ''}`,
+                        'paddingBottom': `${!labelInline ? '7px' : ''}`,
                     }}
                     {...props} />
                 {required && <div style={{

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']};
@@ -36,6 +35,8 @@ const TextWrapper = styled.div`
 `;
 
 const Input = styled.input`
+		width:inherit;
+
     //Set the styles from the default styles object
     ${({ theme, defaultInputStyle }) => {
 		return getDefaultStyles(theme, defaultInputStyle);
@@ -52,7 +53,7 @@ const Input = styled.input`
 
 const inline = css`
 	display: flex;
-    gap: 10px;
+  gap: 7px;
 	align-items: center;
 `
 
@@ -69,13 +70,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 +82,7 @@ export const TextInput = ({ themeColor, textBoxStyle, labelStyle, inputStyle, er
 					errMsg={errMsg}
 					style={{
 						'display': 'flex',
-						'paddingBottom': `${!labelInline ? '10px' : ''}`,
+						'marginBottom': `${!labelInline ? '7px' : ''}`,
 					}}
 					{...props} />
 				{required && <div style={{
@@ -179,4 +178,4 @@ TextInput.defaultProps = {
 	labelStyle: {},
 	inputStyle: {},
 	type: 'text'
-}
+}