groundfloor-react-ui 1.0.18 → 1.0.21

package/components/Inputs/NumericInput.js

@@ -1,12 +1,12 @@
-import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import styled, { css, useTheme } from 'styled-components';
+import React from 'react';
+import styled, { css } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 
 const TextBox = styled.div`
   border: 1px solid
     ${({ theme }) =>
-        theme ? defaultThemeColor.border : theme.variant['primary-1']};
+    theme.border};
   border-radius: 4px;
   padding: 6.5px 12px;
   display: flex;
@@ -27,7 +27,7 @@ const TextBox = styled.div`
 `;
 
 TextBox.defaultProps = {
-    theme: defaultThemeColor,
+  theme: defaultThemeColor,
 };
 
 const Input = styled.input`
@@ -45,7 +45,7 @@ const Input = styled.input`
 `;
 
 Input.defaultProps = {
-    theme: defaultThemeColor,
+  theme: defaultThemeColor,
 };
 
 const requiredAsterisk = css`
@@ -69,7 +69,7 @@ const Label = styled.label`
 `;
 
 Label.defaultProps = {
-    theme: defaultThemeColor,
+  theme: defaultThemeColor,
 };
 
 const inline = css`
@@ -86,70 +86,73 @@ const Form = styled.div`
 `;
 
 Form.defaultProps = {
-    theme: defaultThemeColor,
+  theme: defaultThemeColor,
 };
 export const NumericInput = ({
-    label,
-    inputValue,
-    inputStyle,
-    iconBefore,
-    iconAfter,
-    onChange,
-    ...props
+  label,
+  inputValue,
+  inputStyle,
+  iconBefore,
+  iconAfter,
+  onChange,
+  theme,
+  ...props
 }) => {
-    const handleChange = (e) => {
-        const re = /^[0-9\b.-]+$/;
-        const { value } = e.currentTarget;
-        if (value === '' || re.test(value)) {
-            onChange(value);
-        }
-    };
-
-    return (
-        <Form {...props}>
-            {label.length > 0 && <Label {...props}>{label}</Label>}
-            <div>
-                <TextBox {...props}>
-                    <div className='input-icon'>{iconBefore}</div>
-                    <Input
-                        {...props}
-                        inputStyle={inputStyle}
-                        value={inputValue}
-                        onChange={handleChange}
-                        type='number'
-                    />
-                    <div className='input-icon'>{iconAfter}</div>
-                </TextBox>
-            </div>
-        </Form>
-    );
+  const handleChange = (e) => {
+    const re = /^[0-9\b.-]+$/;
+    const { value } = e.currentTarget;
+    if (value === '' || re.test(value)) {
+      onChange(value);
+    }
+  };
+
+  return (
+    <Form {...props}>
+      {label.length > 0 && <Label {...props}>{label}</Label>}
+      <div>
+        <TextBox {...props}>
+          <div className='input-icon'>{iconBefore}</div>
+          <Input
+            {...props}
+            inputStyle={inputStyle}
+            value={inputValue}
+            onChange={handleChange}
+            type='number'
+          />
+          <div className='input-icon'>{iconAfter}</div>
+        </TextBox>
+      </div>
+    </Form>
+  );
 };
 
 NumericInput.propTypes = {
-    /**
-     *	Theme props
-     */
-    theme: PropTypes.object,
-    /**
-     *	Label of Input
-     */
-    label: PropTypes.string,
-    /**
-     *	Should label be inline?
-     */
-    labelInline: PropTypes.bool,
-    /**
-     *	Value Prop
-     */
-    inputValue: PropTypes.any,
-
-    inputStyle: PropTypes.object,
+  /**
+   *	Theme props
+   */
+  theme: PropTypes.object,
+  /**
+   *	Label of Input
+   */
+  label: PropTypes.string,
+  /**
+   *	Should label be inline?
+   */
+  labelInline: PropTypes.bool,
+  /**
+   *	Value Prop
+   */
+  inputValue: PropTypes.any,
+  /**
+   * custom style of input element
+   */
+  inputStyle: PropTypes.object,
 };
 
 NumericInput.defaultProps = {
-    theme: defaultThemeColor,
-    label: '',
-    labelInline: false,
-    inputStyle: {},
-    inputValue: null,
+  theme: defaultThemeColor,
+  label: '',
+  labelInline: false,
+  inputStyle: {},
+  inputValue: null,
 };

package/components/Inputs/PasswordInput.js

@@ -1,37 +1,36 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React, { useState } from 'react';
 import styled, { css } from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
 import defaultStyles from '../constants/defaultStyle';
+import defaultThemeColor from '../constants/defaultThemeColor';
 import getDefaultStyles from '../constants/utils';
-import { Label } from '../Label';
 import { Icon } from '../Icon';
-import { useState } from 'react';
+import { Label } from '../Label';
 
 const TextWrapper = styled.div`
   //Set the styles from the default styles object
-  ${({ theme, defaultWrapperStyle }) => {
-    return getDefaultStyles(theme, defaultWrapperStyle);
+  ${({ inBuiltCss, defaultWrapperStyle }) => {
+    return getDefaultStyles(inBuiltCss, defaultWrapperStyle);
   }}
 
-  border: ${({ isValid, themeColor }) =>
+  border: ${({ isValid, theme }) =>
     !isValid
-      ? '1px solid ' + themeColor.variant['error']
-      : '1px solid ' + defaultThemeColor.border};
+      ? '1px solid ' + theme.variant['error']
+      : '1px solid ' + theme.border};
 
   .input-icon svg path {
-    fill: ${({ themeColor }) => themeColor.variant['neutral-1']};
+    fill: ${({ theme }) => theme.variant['neutral-1']};
   }
   .input-icon {
     cursor: pointer;
   }
 
   &:focus-within {
-    border: 1px solid ${({ themeColor }) => themeColor.variant['primary-1']};
+    border: 1px solid ${({ theme }) => theme.variant['primary-1']};
     outline: none;
 
     .input-icon svg path {
-      fill: ${({ themeColor }) => themeColor.variant['primary-1']};
+      fill: ${({ theme }) => theme.variant['primary-1']};
     }
   }
 
@@ -39,24 +38,30 @@ const TextWrapper = styled.div`
   ${({ textBoxStyle }) => textBoxStyle}
 `;
 
+TextWrapper.defaultProps = {
+  theme: defaultThemeColor,
+};
+
 const Input = styled.input`
   width: inherit;
   -webkit-text-security:  ${({ showEye }) => showEye ? 'none' : 'disc'}  ;
 
   //Set the styles from the default styles object
-  ${({ theme, defaultInputStyle }) => {
-    return getDefaultStyles(theme, defaultInputStyle);
+  ${({ inBuiltCss, defaultInputStyle }) => {
+    return getDefaultStyles(inBuiltCss, defaultInputStyle);
   }}
 
   // custom styles
     ${({ inputStyle }) => inputStyle}
 
 	.sc-furwcr bxRAoq {
-    color: ${defaultThemeColor.variant['neutral-3']};
+    color: ${({ theme }) => theme.variant['neutral-3']};
   }
 
 `;
-
+Input.defaultProps = {
+  theme: defaultThemeColor,
+};
 const inline = css`
   display: flex;
   gap: 7px;
@@ -66,18 +71,19 @@ const inline = css`
 const Form = styled.div`
   ${({ labelInline }) => (labelInline ? inline : null)}
   .err-text {
-    color: ${({ themeColor }) => themeColor.variant['error']};
+    color: ${({ theme }) => theme.variant['error']};
     margin-top: 5px;
     font-size: 10px;
   }
 `;
 
+
 Form.defaultProps = {
-  themeColor: defaultThemeColor,
+  theme: defaultThemeColor,
 };
 
 export const PasswordInput = ({
-  themeColor,
+  theme,
   passwordRules,
   textBoxStyle,
   labelStyle,
@@ -93,7 +99,8 @@ export const PasswordInput = ({
   const [showEye, setShowEye] = useState(false);
 
   return (
-    <Form labelInline={labelInline} {...props}>
+    <Form labelInline={labelInline} inBuiltCss={defaultStyles} {...props}
+    >
       <div style={{ display: 'flex' }}>
         <Label
           customStyles={labelStyle}
@@ -112,7 +119,7 @@ export const PasswordInput = ({
             style={{
               marginLeft: '4px',
               marginRight: '5px',
-              color: `${themeColor.variant['error']}`,
+              color: `${theme.variant['error']}`,
             }}
           >
             *
@@ -128,18 +135,20 @@ export const PasswordInput = ({
       >
         <TextWrapper
           required={required}
-          themeColor={defaultThemeColor}
+          theme={theme}
           textBoxStyle={textBoxStyle}
           isValid={isValid}
-          theme={defaultStyles}
           defaultWrapperStyle={'textbox-wrapper'}
+          inBuiltCss={defaultStyles}
           {...props}
         >
           <Input
             inputStyle={inputStyle}
             type={'text'}
             showEye={showEye}
+            theme={theme}
             defaultInputStyle={'input-wrapper'}
+            inBuiltCss={defaultStyles}
             {...props}
           />
           <div className='input-icon' onClick={() => setShowEye(!showEye)}>
@@ -157,11 +166,11 @@ PasswordInput.propTypes = {
   /**
    *	Theme props of default in-built css
    */
-  theme: PropTypes.object,
+  inBuiltCss: PropTypes.object,
   /**
    *	Color props of default theme
    */
-  themeColor: PropTypes.object,
+  theme: PropTypes.object,
   /**
    *	Label of Input
    */
@@ -202,8 +211,8 @@ PasswordInput.propTypes = {
 };
 
 PasswordInput.defaultProps = {
-  themeColor: defaultThemeColor,
-  theme: defaultStyles,
+  theme: defaultThemeColor,
+  inBuiltCss: defaultStyles,
   label: '',
   required: false,
   isValid: true,

package/components/Inputs/RadioInput.js

@@ -1,8 +1,7 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
+import styled, { useTheme } from 'styled-components';
 import defaultStyles from '../constants/defaultStyle';
+import defaultThemeColor from '../constants/defaultThemeColor';
 import getDefaultStyles from '../constants/utils';
 import { Label } from '../Label';
 
@@ -10,8 +9,8 @@ const RadioOuterCircle = styled.div`
   box-sizing: initial;
 
   //Set the styles from the default styles object
-  ${({ theme, defaultRadioOuterCircleStyle }) => {
-        return getDefaultStyles(theme, defaultRadioOuterCircleStyle);
+  ${({ inBuiltCss, defaultRadioOuterCircleStyle }) => {
+        return getDefaultStyles(inBuiltCss, defaultRadioOuterCircleStyle);
     }}
 
   border: 2px solid ${({
@@ -19,41 +18,74 @@ const RadioOuterCircle = styled.div`
         selected,
         selectedCircleColor,
         defaultBorderColor,
-    }) => (value !== selected ? defaultBorderColor : selectedCircleColor)};
+        theme,
+    }) => {
+        if (value !== selected && defaultBorderColor) return defaultBorderColor;
+        else if (value !== selected && !defaultBorderColor) return theme.border;
+        else if (value === selected && selectedCircleColor)
+            return selectedCircleColor;
+        else if (value === selected && !selectedCircleColor)
+            return theme.primary['primary-1'];
+    }};
 
   // custom styles
   ${({ radioOuterCircleStyle }) => radioOuterCircleStyle}
 `;
 
+RadioOuterCircle.defaultProps = {
+    theme: defaultThemeColor,
+};
+
 const RadioInnerCircle = styled.div`
   box-sizing: initial;
 
   //Set the styles from the default styles object
-  ${({ theme, defaultRadioInnerCircleStyle }) => {
-        return getDefaultStyles(theme, defaultRadioInnerCircleStyle);
+  ${({ inBuiltCss, defaultRadioInnerCircleStyle }) => {
+        return getDefaultStyles(inBuiltCss, defaultRadioInnerCircleStyle);
     }}
 
   width: ${({ value, selected, width }) => (value === selected ? width : 0)};
   height: ${({ value, selected, height }) => (value === selected ? height : 0)};
-  background-color: ${({ value, selected, selectedCircleColor }) =>
-        value === selected ? selectedCircleColor : 'transparent'};
+  background-color: ${({ value, selected, selectedCircleColor, theme }) => {
+        if (value === selected && selectedCircleColor) return selectedCircleColor;
+        else if (value === selected && !selectedCircleColor)
+            return theme.primary['primary-1'];
+        else if (value !== selected) return 'transparent';
+    }};
 
   // custom styles
   ${({ radioInnerCircleStyle }) => radioInnerCircleStyle}
 `;
+RadioInnerCircle.defaultProps = {
+    theme: defaultThemeColor,
+};
 
 const OptionText = styled.div`
   //Set the styles from the default styles object
-  ${({ theme, defaultOptionStyle }) => {
-        return getDefaultStyles(theme, defaultOptionStyle);
+  ${({ inBuiltCss, defaultOptionStyle }) => {
+        return getDefaultStyles(inBuiltCss, defaultOptionStyle);
     }}
   margin-right: ${({ inline }) => (!inline ? '30px' : '')};
-  color: ${({ selected, selectedOptionTextColor, defaultOptionColor }) =>
-        selected ? selectedOptionTextColor : defaultOptionColor};
+  color: ${({
+        selected,
+        selectedOptionTextColor,
+        defaultOptionColor,
+        theme,
+    }) => {
+        if (selected && selectedOptionTextColor) return selectedOptionTextColor;
+        else if (selected && !selectedOptionTextColor)
+            return theme.neutral['neutral-1'];
+        else if (!selected && defaultOptionColor) return defaultOptionColor;
+        else if (!selected && !defaultOptionColor)
+            return theme.neutral['neutral-2'];
+    }};
 
   // custom styles
   ${({ optionStyle }) => optionStyle}
 `;
+OptionText.defaultProps = {
+    theme: defaultThemeColor,
+};
 
 const WrapperDiv = styled.div`
   margin-bottom: ${({ inline }) => (!inline ? '14px' : '')};
@@ -87,14 +119,11 @@ export const RadioInput = ({
     defaultOptionColor,
     ...props
 }) => {
+    const activeTheme = useTheme() || defaultThemeColor;
+
     return (
         <div>
-            <Label
-                themeColor={defaultThemeColor}
-                customStyles={labelStyle}
-                type={'radio-label'}
-                text={label}
-            />
+            <Label customStyles={labelStyle} type={'radio-label'} text={label} />
             <ParentDiv inline={inline}>
                 {options.map((item, i) => {
                     return (
@@ -106,8 +135,8 @@ export const RadioInput = ({
                             }}
                         >
                             <RadioOuterCircle
-                                theme={defaultStyles}
-                                themeColor={defaultThemeColor}
+                                theme={activeTheme}
+                                inBuiltCss={defaultStyles}
                                 defaultBorderColor={defaultBorderColor}
                                 selectedCircleColor={selectedCircleColor}
                                 radioOuterCircleStyle={{
@@ -120,7 +149,8 @@ export const RadioInput = ({
                                 selected={!item?.disabled && selected}
                             >
                                 <RadioInnerCircle
-                                    theme={defaultStyles}
+                                    inBuiltCss={defaultStyles}
+                                    theme={activeTheme}
                                     width={width}
                                     height={height}
                                     selectedCircleColor={selectedCircleColor}
@@ -145,10 +175,10 @@ export const RadioInput = ({
                                     cursor: item?.disabled ? 'not-allowed ' : ' pointer',
                                     color: item?.disabled && item?.disabledColor,
                                 }}
-                                theme={defaultStyles}
+                                inBuiltCss={defaultStyles}
                                 defaultOptionStyle={'option-text'}
                                 selectedOptionTextColor={selectedOptionTextColor}
-                                // selected={item.value === selected}
+                                theme={activeTheme}
                                 selected={!item?.disabled && item.value === selected}
                             >
                                 {item.label}
@@ -237,10 +267,6 @@ RadioInput.defaultProps = {
     onChange: () => { },
     radioOuterCircleStyle: {},
     radioInnerCircleStyle: {},
-    defaultOptionColor: `${defaultThemeColor.neutral['neutral-2']}`,
-    defaultBorderColor: '#D4D7E3',
     width: '14px',
     height: '14px',
-    selectedCircleColor: `${defaultThemeColor.primary['primary-1']}`,
-    selectedOptionTextColor: `${defaultThemeColor.neutral['neutral-1']}`,
 };