groundfloor-react-ui 1.0.1 → 1.0.4

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/TextArea.js

@@ -52,7 +52,7 @@ const Input = styled.textarea`
 
 const inline = css`
 	display: flex;
-    gap: 10px;
+    gap: 7px;
 	align-items: center;
 `
 
@@ -89,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

@@ -35,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);
@@ -51,7 +53,7 @@ const Input = styled.input`
 
 const inline = css`
 	display: flex;
-    gap: 10px;
+  gap: 7px;
 	align-items: center;
 `
 
@@ -80,7 +82,7 @@ export const TextInput = ({ themeColor, textBoxStyle, labelStyle, inputStyle, er
 					errMsg={errMsg}
 					style={{
 						'display': 'flex',
-						'marginBottom': `${!labelInline ? '10px' : ''}`,
+						'marginBottom': `${!labelInline ? '7px' : ''}`,
 					}}
 					{...props} />
 				{required && <div style={{

package/components/Inputs/TimeInput.js

@@ -46,8 +46,8 @@ const requiredAsterisk = css`
 
 const Label = styled.label`
 	display: block;
-	margin-bottom: ${({ labelInline, errMsg }) => (labelInline && errMsg) ? '18px' : '8px'};
-	margin-right: ${({ labelInline }) => labelInline ? '10px' : ''};
+	margin-bottom: ${({ labelInline, errMsg }) => (labelInline && errMsg) ? '18px' : '7px'};
+	margin-right: ${({ labelInline }) => labelInline ? '7px' : ''};
     color: ${({ theme }) => theme.variant['neutral-2']};
 	${({ required }) => required ? requiredAsterisk : null}
 `;

package/components/Inputs/index.js

@@ -10,4 +10,5 @@ export * from './TextArea';
 export * from './NumericInput';
 export * from './DropdownSelect';
 export * from './SearchInput';
+export * from './PasswordInput'
 

package/components/Modal/ModalComp.js

@@ -9,17 +9,19 @@ import defaultThemeColor from '../constants/defaultThemeColor';
 
 const customStyles = {
   overlay: {
-    zIndex: '999',
+    zIndex: '999999',
+    backgroundColor: 'rgb(0 0 0 / 30%)'
   },
   content: {
+    borderColor: defaultThemeColor.border,
     top: '50%',
     left: '50%',
     right: 'auto',
     bottom: 'auto',
     marginRight: '-50%',
-    padding: '1rem 3rem 0.8rem 3rem',
+    padding: '0px',
     transform: 'translate(-50%, -50%)',
-    maxHeight: '90vh',
+    maxHeight: '75vh'
   },
 };
 
@@ -30,7 +32,11 @@ const ModalClose = styled.button`
   }}
   // custom styles
     ${({ customModalCloseStyle }) => customModalCloseStyle}
-    ${'' /* background: transparent; */}
+  //Set the styles from the default styles object
+    &:focus{
+      outline: none;
+      border: none;
+    }
 `;
 
 const ModalHeader = styled.div`
@@ -66,6 +72,10 @@ const ModalFooter = styled.div`
     ${({ customModalFooterStyle }) => customModalFooterStyle}
 `;
 
+const CommonDiv = styled.div`
+      padding: 2rem 3rem 0rem 3rem;
+`;
+
 Modal.setAppElement('#root');
 
 export const ModalComp = ({
@@ -102,13 +112,16 @@ export const ModalComp = ({
         />
       </ModalClose>
 
-      <ModalHeader style={customModalHeaderStyle}>{headerContent}</ModalHeader>
+      <ModalHeader style={customModalHeaderStyle}>
+        <CommonDiv>{headerContent}</CommonDiv>
+      </ModalHeader>
       <ModalBody
         theme={defaultStyles}
         type={'modalComp-modal-body'}
         style={customModalBodyStyle}
       >
-        {bodyContent}
+        <CommonDiv>        {bodyContent}
+        </CommonDiv>
       </ModalBody>
 
       <ModalFooter
@@ -176,5 +189,4 @@ ModalComp.defaultProps = {
   customModalHeaderStyle: {},
   customModalBodyStyle: {},
   customModalFooterStyle: {},
-};
-
+};

package/components/constants/defaultStyle.js

@@ -15,13 +15,13 @@ const defaultStyles = {
         'padding-left': '6px',
         'font-style': 'normal',
         'font-weight': 'normal',
-        'font-size': '20px',
+        'font-size': '14px',
         'display': 'flex',
         'width': 'inherit',
         'align-items': 'flex-start',
-        'color': '#444444',
-        'margin-bottom': '0'
-
+        'color': `${defaultThemeColor.variant['neutral-2']}`,
+        'margin-bottom': '0',
+        'padding-bottom': '0'
     },
     'button': {
         'color': 'red',
@@ -144,7 +144,7 @@ const defaultStyles = {
     'textbox-wrapper': {
         'border': `1px solid ${defaultThemeColor.border}`,
         'border-radius': '4px',
-        'padding': '5.5px 7px',
+        'padding': '6.5px 7px',
         'display': 'flex',
         'align-items': 'center',
         'line-height': '.5rem',
@@ -243,7 +243,7 @@ const defaultStyles = {
                 fontSize: '14px',
                 fontWeight: '600',
                 '&:first-of-type': {
-                    paddingLeft: '0px' //Remove default value since already apply the paddingLeft to the whole table to align the head to the body
+                    paddingLeft: '0px !important' //Remove default value since already apply the paddingLeft to the whole table to align the head to the body
                 },
             },
         },
@@ -322,8 +322,8 @@ const defaultStyles = {
     },
     'radio-label': {
         'display': 'block',
-        'margin-bottom': '24.2px',
-        'color': '#444444'
+        'margin-bottom': '7px',
+        'color': `${defaultThemeColor.variant['neutral-2']}`
     },
     'option-text': {
         // 'background-color': `${defaultThemeColor.bgColor}`,
@@ -365,7 +365,8 @@ const defaultStyles = {
     },
     'check-label': {
         'display': 'block',
-        'margin-bottom': '26px',
+        'margin-bottom': '7px',
+        'color': `${defaultThemeColor.variant['neutral-2']}`
     },
     'checkbox-option-text': {
         'font-size': '16px',
@@ -375,7 +376,7 @@ const defaultStyles = {
     'toggle-switch-wrapper': {
         'display': 'flex',
         'align-items': 'center',
-        'gap': '10px',
+        'gap': '7px',
         'width': 'fit-content',
     },
     'toggle-switch-checkbox-label': {
@@ -395,8 +396,7 @@ const defaultStyles = {
      * Default Style of the dropZone component
      */
     'dropzone-parent': {
-        'width': 'inherit',
-        'max-width': '514px',
+        'width': '100%',
         'height': '86px',
         'padding-left': '8px',
         'padding-right': '8px',
@@ -409,7 +409,6 @@ const defaultStyles = {
     },
     'dropzone-file-div': {
         'width': 'inherit',
-        'max-width': '532px',
         'height': '38px',
         'display': 'flex',
         'justify-content': 'center',
@@ -744,7 +743,7 @@ const defaultStyles = {
         cursor: 'pointer'
     },
     'modalComp-modal-body': {
-        'margin-top': '30px',
+        'margin-top': '20px',
         'margin-bottom': '15px',
     },
     'modalComp-modal-footer': {