groundfloor-react-ui 1.0.0 → 1.0.3

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;
@@ -47,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}
 `;
@@ -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/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

@@ -1,104 +1,139 @@
-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: '999999',
+    backgroundColor: 'rgb(0 0 0 / 30%)'
   },
   content: {
+    borderColor: defaultThemeColor.border,
     top: '50%',
     left: '50%',
     right: 'auto',
     bottom: 'auto',
     marginRight: '-50%',
-    padding: '3rem 3rem 0.8rem 3rem',
+    padding: '0px',
     transform: 'translate(-50%, -50%)',
+    maxHeight: '75vh'
   },
 };
 
 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; */}
-`
+  //Set the styles from the default styles object
+    &:focus{
+      outline: none;
+      border: none;
+    }
+`;
 
 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");
+`;
 
+const CommonDiv = styled.div`
+      padding: 2rem 3rem 0rem 3rem;
+`;
 
-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}
+        <CommonDiv>{headerContent}</CommonDiv>
       </ModalHeader>
-      <ModalBody theme={defaultStyles}
-        type={'modalComp-modal-body'} style={customModalBodyStyle}>
-        {bodyContent}
+      <ModalBody
+        theme={defaultStyles}
+        type={'modalComp-modal-body'}
+        style={customModalBodyStyle}
+      >
+        <CommonDiv>        {bodyContent}
+        </CommonDiv>
       </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 +146,7 @@ ModalComp.propTypes = {
   toggleModal: PropTypes.func,
   /**
    *	Close modal on clicking outside
-  */
+   */
   closeOnOutsideClick: PropTypes.bool,
   /**
    *	Modal Header Content
@@ -127,21 +162,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 +188,5 @@ ModalComp.defaultProps = {
   customModalCloseStyle: {},
   customModalHeaderStyle: {},
   customModalBodyStyle: {},
-  customModalFooterStyle: {}
-}
-
+  customModalFooterStyle: {},
+};

package/components/Modal/index.js

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

package/components/constants/defaultStyle.js

@@ -1,5 +1,4 @@
 import defaultThemeColor from './defaultThemeColor';
-const border = `#D4D7E3`;
 
 const defaultStyles = {
     /**
@@ -16,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',
@@ -143,9 +142,9 @@ const defaultStyles = {
     * Default Style of the textbox wrapper
     */
     'textbox-wrapper': {
-        'border': `1px solid ${border}`,
+        'border': `1px solid ${defaultThemeColor.border}`,
         'border-radius': '4px',
-        'padding': '5.5px 7px',
+        'padding': '6.5px 7px',
         'display': 'flex',
         'align-items': 'center',
         'line-height': '.5rem',
@@ -186,6 +185,9 @@ const defaultStyles = {
         'color': `${defaultThemeColor.variant['neutral-2']}`,
         'display': 'flex',
         'width': 'max-content',
+        'background-color': 'transparent',
+        'margin-bottom': '0px',
+        'padding-bottom': '0px'
     },
     /**
      * Default Style of the Image
@@ -241,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
                 },
             },
         },
@@ -320,11 +322,11 @@ 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}`,
+        // 'background-color': `${defaultThemeColor.bgColor}`,
         'color': "#A9B1B8",
         'font-size': '16px',
     },
@@ -344,7 +346,7 @@ const defaultStyles = {
      * Default Style of the checkbox label
      */
     'checkBox-outer': {
-        'border': `2px solid ${border}`,
+        'border': `2px solid ${defaultThemeColor.border}`,
         'width': '20px',
         'height': '20px',
         'border-radius': '3px',
@@ -363,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',
@@ -372,8 +375,8 @@ const defaultStyles = {
     },
     'toggle-switch-wrapper': {
         'display': 'flex',
-        'align-items': 'flex-start',
-        'gap': '40px',
+        'align-items': 'center',
+        'gap': '7px',
         'width': 'fit-content',
     },
     'toggle-switch-checkbox-label': {
@@ -384,7 +387,7 @@ const defaultStyles = {
         'cursor': 'pointer',
     },
     'toggle-switch-option-text': {
-        'background-color': `${defaultThemeColor.bgColor}`,
+        // 'background-color': `${defaultThemeColor.bgColor}`,
         'color': `${defaultThemeColor.neutral['neutral-1']}`,
         'font-size': '16px',
         'margin-right': '30px',
@@ -393,21 +396,19 @@ 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',
         'display': 'flex',
         'justify-content': 'center',
         'align-items': 'center',
-        'font-size': '17px',
+        'font-size': '16px',
         'border-radius': '5.5px',
         'color': ` ${defaultThemeColor.textColor}`,
     },
     'dropzone-file-div': {
         'width': 'inherit',
-        'max-width': '532px',
         'height': '38px',
         'display': 'flex',
         'justify-content': 'center',
@@ -451,10 +452,8 @@ const defaultStyles = {
         'font-size': '17px',
         'color': `${defaultThemeColor.textColor}`,
         'background-color': `${defaultThemeColor.bgColor}`,
-        // 'border': `1px solid ${defaultThemeColor.neutral['neutral-3']} `,
     },
     'signature-wrapper-div': {
-        // 'margin-left': '2px',
         'display': 'flex',
         'flex': 'auto',
         'justify-content': 'center',
@@ -469,8 +468,7 @@ const defaultStyles = {
         'text-align': 'center',
         'display': 'block',
         'height': '48px',
-        'width': `calc(100% - 50px)!important`,
-        // 'max-width': '394px',
+        'width': `calc(100% - 54px)!important`,
         'background-color': `${defaultThemeColor.bgColor}`,
         'font-family': "Beauty",
         'background-clip': 'padding-box',
@@ -478,8 +476,7 @@ const defaultStyles = {
         'font-style': 'normal',
         'font-weight': 'normal',
         'font-size': '47px',
-        'padding-left': '10px'
-
+        'padding-left': '10px',
     },
     /**
      * Default Style of the modal component
@@ -589,7 +586,6 @@ const defaultStyles = {
     },
     'tp-cont-bottom-arrow-before': {
         'border-color': `transparent transparent ${defaultThemeColor.bgColor} transparent`,
-        // 'border-width': '0 0.5rem 0.4rem 0.5rem',
         'border-width': '0 15px 19px 15px',
         'position': 'absolute',
         'top': '-1px',
@@ -733,14 +729,13 @@ const defaultStyles = {
             right: 'auto',
             bottom: 'auto',
             marginRight: '-50%',
-            padding: '3rem 3rem 0.8rem 3rem',
             transform: 'translate(-50%, -50%)',
             zIndex: "999",
         },
     },
     'modalComp-modal-close': {
         position: 'absolute',
-        top: '5px',
+        top: '10px',
         right: '5px',
         outline: 'none',
         border: 'none',
@@ -748,17 +743,17 @@ const defaultStyles = {
         cursor: 'pointer'
     },
     'modalComp-modal-body': {
-        'margin-top': '30px',
+        'margin-top': '20px',
         'margin-bottom': '15px',
     },
     'modalComp-modal-footer': {
-        display: 'flex',
-        'justify- content': 'end',
+
         'margin-top': '30px',
         'margin-bottom': '15px',
+        'border-top': `1px solid  ${defaultThemeColor.border}`,
+        'padding': '1rem 3rem 0rem 3rem',
         '&:before': {
             content: '',
-            'border-top': '1px solid #E5E7F0',
             position: 'fixed',
             display: 'inline-block',
             left: 0,

package/components/constants/defaultThemeColor.js

@@ -9,7 +9,8 @@ const defaultThemeColor = {
     variant: { ...primaryColor, ...uiColor, ...neutralColor, ...shadeColor, ...graphColor },
     textColor: primaryColor['primary-2'],
     bgColor: '#FFFFFF', /**background color */
-    black: '#000000'
+    black: '#000000',
+    border: '#D4D7E3'
 };
 
 export default defaultThemeColor;