groundfloor-react-ui 1.0.4 → 1.0.7

package/components/Inputs/NumericInput.js

@@ -4,120 +4,126 @@ import styled, { css, useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 
 const TextBox = styled.div`
-    border: 1px solid ${({ theme }) => theme ? defaultThemeColor.border : theme.variant['primary-1']};
-    border-radius: 4px;
-    padding: 6.5px 12px;
-	display: flex;
-	align-items: center;
-    background-color: ${({ theme }) => theme.bgColor};
-	.input-icon svg path {
-		fill: ${({ theme }) => theme.variant['neutral-1']};
-	} 
-    
-    &:focus-within {
-		border: 1px solid ${({ theme }) => theme.variant['primary-1']};
-        outline: none;
-
-		.input-icon svg path {
-			fill: ${({ theme }) => theme.variant['primary-1']};
-		} 
+  border: 1px solid
+    ${({ theme }) =>
+        theme ? defaultThemeColor.border : theme.variant['primary-1']};
+  border-radius: 4px;
+  padding: 6.5px 12px;
+  display: flex;
+  align-items: center;
+  background-color: ${({ theme }) => theme.bgColor};
+  .input-icon svg path {
+    fill: ${({ theme }) => theme.variant['neutral-1']};
+  }
+
+  &:focus-within {
+    border: 1px solid ${({ theme }) => theme.variant['primary-1']};
+    outline: none;
+
+    .input-icon svg path {
+      fill: ${({ theme }) => theme.variant['primary-1']};
     }
+  }
 `;
 
 TextBox.defaultProps = {
     theme: defaultThemeColor,
-}
+};
 
 const Input = styled.input`
-	border: 0;
-	outline: 0;
-	color: ${({ theme }) => theme.variant['primary-2']};
-	margin: 0px;
-	padding: 0;
-    font-size: 14px;
-	flex-grow: 1;
-	flex-shrink: 0;
-
-    // custom styles
-    ${({ inputStyle }) => inputStyle}
+  border: 0;
+  outline: 0;
+  color: ${({ theme }) => theme.variant['primary-2']};
+  margin: 0px;
+  padding: 0;
+  font-size: 14px;
+  flex-grow: 1;
+  flex-shrink: 0;
+
+  // custom styles
+  ${({ inputStyle }) => inputStyle}
 `;
 
 Input.defaultProps = {
     theme: defaultThemeColor,
-}
+};
 
 const requiredAsterisk = css`
-	&:after {
-		content:" *";
-		color: ${({ theme }) => theme.variant['error']};
-	}
-`
+  &:after {
+    content: ' *';
+    color: ${({ theme }) => theme.variant['error']};
+  }
+`;
 
 const Label = styled.label`
-    display: flex;
-    margin-right: 10px;
-    align-content: center;
-    align-items: center;
-    justify-content: center;
-	display: block;
-	margin-bottom: ${({ labelInline, }) => (labelInline) ? '0' : '7px'};
-	margin-right: ${({ labelInline }) => labelInline ? '7px' : ''};
-    color: ${({ theme }) => theme.variant['neutral-2']};
+  display: flex;
+  margin-right: 10px;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  display: block;
+  margin-bottom: ${({ labelInline }) => (labelInline ? '0' : '7px')};
+  margin-right: ${({ labelInline }) => (labelInline ? '7px' : '')};
+  padding-bottom: 0px;
+  color: ${({ theme }) => theme.variant['neutral-2']};
 `;
 
 Label.defaultProps = {
     theme: defaultThemeColor,
-}
+};
 
 const inline = css`
-	display: flex;
-	align-items: center;
-`
+  display: flex;
+  align-items: center;
+`;
 
 const Form = styled.div`
-	${({ labelInline }) => labelInline ? inline : null}
+  ${({ labelInline }) => (labelInline ? inline : null)}
 
-	> div {
-		flex: 1 0 auto;
-	}
-`
+  > div {
+    flex: 1 0 auto;
+  }
+`;
 
 Form.defaultProps = {
     theme: defaultThemeColor,
-}
-export const NumericInput = ({ label, inputValue, inputStyle, iconBefore, iconAfter, onChange, ...props }) => {
+};
+export const NumericInput = ({
+    label,
+    inputValue,
+    inputStyle,
+    iconBefore,
+    iconAfter,
+    onChange,
+    ...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}
+                <TextBox {...props}>
+                    <div className='input-icon'>{iconBefore}</div>
+                    <Input
+                        {...props}
                         inputStyle={inputStyle}
                         value={inputValue}
                         onChange={handleChange}
                         type='number'
                     />
-                    <div className="input-icon">
-                        {iconAfter}
-                    </div>
+                    <div className='input-icon'>{iconAfter}</div>
                 </TextBox>
             </div>
         </Form>
-    )
-}
+    );
+};
 
 NumericInput.propTypes = {
     /**
@@ -138,8 +144,7 @@ NumericInput.propTypes = {
     inputValue: PropTypes.any,
 
     inputStyle: PropTypes.object,
-
-}
+};
 
 NumericInput.defaultProps = {
     theme: defaultThemeColor,
@@ -147,4 +152,4 @@ NumericInput.defaultProps = {
     labelInline: false,
     inputStyle: {},
     inputValue: null,
-}
+};

package/components/Inputs/PasswordInput.js

@@ -100,6 +100,7 @@ export const PasswordInput = ({
           style={{
             display: 'flex',
             marginBottom: `${!labelInline ? '7px' : ''}`,
+            paddingBottom: '0px',
           }}
           {...props}
         />

package/components/Inputs/RadioInput.js

@@ -6,64 +6,87 @@ import defaultStyles from '../constants/defaultStyle';
 import getDefaultStyles from '../constants/utils';
 import { Label } from '../Label';
 
-
 const RadioOuterCircle = styled.div`
+  box-sizing: initial;
 
-    //Set the styles from the default styles object
-    ${({ theme, defaultRadioOuterCircleStyle }) => {
+  //Set the styles from the default styles object
+  ${({ theme, defaultRadioOuterCircleStyle }) => {
         return getDefaultStyles(theme, defaultRadioOuterCircleStyle);
     }}
-    
-    border: 2px solid ${({ value, selected, selectedCircleColor, defaultBorderColor }) => value !== selected ? defaultBorderColor : selectedCircleColor};
-    
-    // custom styles
-    ${({ radioOuterCircleStyle }) => radioOuterCircleStyle}
-`;
 
+  border: 2px solid ${({
+        value,
+        selected,
+        selectedCircleColor,
+        defaultBorderColor,
+    }) => (value !== selected ? defaultBorderColor : selectedCircleColor)};
+
+  // custom styles
+  ${({ radioOuterCircleStyle }) => radioOuterCircleStyle}
+`;
 
 const RadioInnerCircle = styled.div`
+  box-sizing: initial;
 
-    //Set the styles from the default styles object
-    ${({ theme, defaultRadioInnerCircleStyle }) => {
+  //Set the styles from the default styles object
+  ${({ theme, defaultRadioInnerCircleStyle }) => {
         return getDefaultStyles(theme, 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'};
-    
-    // custom styles
-    ${({ radioInnerCircleStyle }) => radioInnerCircleStyle}
+
+  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'};
+
+  // custom styles
+  ${({ radioInnerCircleStyle }) => radioInnerCircleStyle}
 `;
 
 const OptionText = styled.div`
-    //Set the styles from the default styles object
-    ${({ theme, defaultOptionStyle }) => {
+  //Set the styles from the default styles object
+  ${({ theme, defaultOptionStyle }) => {
         return getDefaultStyles(theme, defaultOptionStyle);
     }}
-    margin-right: ${({ inline }) => !inline ? '30px' : ''};
-    color: ${({ selected, selectedOptionTextColor, defaultOptionColor }) => selected ?
-        selectedOptionTextColor : defaultOptionColor};
-        
-    // custom styles
-    ${({ optionStyle }) => optionStyle}
+  margin-right: ${({ inline }) => (!inline ? '30px' : '')};
+  color: ${({ selected, selectedOptionTextColor, defaultOptionColor }) =>
+        selected ? selectedOptionTextColor : defaultOptionColor};
+
+  // custom styles
+  ${({ optionStyle }) => optionStyle}
 `;
 
 const WrapperDiv = styled.div`
-    margin-bottom: ${({ inline }) => !inline ? '14px' : ''};
-    cursor: pointer;
-    align-items: center;
-    display: flex;
-    gap: 10px;
-`
+  margin-bottom: ${({ inline }) => (!inline ? '14px' : '')};
+  cursor: pointer;
+  align-items: center;
+  display: flex;
+  gap: 10px;
+`;
 
 const ParentDiv = styled.div`
-    display: ${({ inline }) => !inline ? "inline-block" : "flex"};
-    width: max-content;
-    margin: 0;
-`
+  display: ${({ inline }) => (!inline ? 'inline-block' : 'flex')};
+  width: max-content;
+  margin: 0;
+`;
 
-export const RadioInput = ({ radioOuterCircleStyle, radioInnerCircleStyle, labelStyle, label, optionStyle, options, selectedCircleColor, selectedOptionTextColor, onChange, selected, width, height, inline, defaultBorderColor, defaultOptionColor, ...props }) => {
+export const RadioInput = ({
+    radioOuterCircleStyle,
+    radioInnerCircleStyle,
+    labelStyle,
+    label,
+    optionStyle,
+    options,
+    selectedCircleColor,
+    selectedOptionTextColor,
+    onChange,
+    selected,
+    width,
+    height,
+    inline,
+    defaultBorderColor,
+    defaultOptionColor,
+    ...props
+}) => {
     return (
         <div>
             <Label
@@ -72,52 +95,71 @@ export const RadioInput = ({ radioOuterCircleStyle, radioInnerCircleStyle, label
                 type={'radio-label'}
                 text={label}
             />
-            <ParentDiv inline={inline} >
+            <ParentDiv inline={inline}>
                 {options.map((item, i) => {
-                    return <WrapperDiv
-                        key={i + Math.random() * 101}
-                        inline={inline}
-                        onClick={() => { !item?.disabled && onChange(item.value) }}>
-                        <RadioOuterCircle
-                            theme={defaultStyles}
-                            themeColor={defaultThemeColor}
-                            defaultBorderColor={defaultBorderColor}
-                            selectedCircleColor={selectedCircleColor}
-                            radioOuterCircleStyle={{ ...radioOuterCircleStyle, cursor: item?.disabled ? 'not-allowed ' : ' pointer', borderColor: item?.disabled && item?.disabledColor }}
-                            defaultRadioOuterCircleStyle={'radio-outer-circle'}
-                            value={item.value}
-                            selected={!item?.disabled && selected}
+                    return (
+                        <WrapperDiv
+                            key={i + Math.random() * 101}
+                            inline={inline}
+                            onClick={() => {
+                                !item?.disabled && onChange(item.value);
+                            }}
                         >
-
-                            <RadioInnerCircle
+                            <RadioOuterCircle
                                 theme={defaultStyles}
-                                width={width}
-                                height={height}
+                                themeColor={defaultThemeColor}
+                                defaultBorderColor={defaultBorderColor}
                                 selectedCircleColor={selectedCircleColor}
-                                radioInnerCircleStyle={{ ...radioInnerCircleStyle, cursor: item?.disabled ? 'not-allowed ' : ' pointer', backgroundColor: item?.disabled ? 'transparent' :  item?.value === selected ?radioInnerCircleStyle?.backgroundColor : 'transparent' }}
-                                defaultRadioInnerCircleStyle={'radio-inner-circle'}
+                                radioOuterCircleStyle={{
+                                    ...radioOuterCircleStyle,
+                                    cursor: item?.disabled ? 'not-allowed ' : ' pointer',
+                                    borderColor: item?.disabled && item?.disabledColor,
+                                }}
+                                defaultRadioOuterCircleStyle={'radio-outer-circle'}
                                 value={item.value}
-                                selected={selected}
-                            />
-                        </RadioOuterCircle>
-                        <OptionText
-                            defaultOptionColor={defaultOptionColor}
-                            optionStyle={{ ...optionStyle, cursor: item?.disabled ? 'not-allowed ' : ' pointer', color: item?.disabled && item?.disabledColor }}
-                            theme={defaultStyles}
-                            defaultOptionStyle={'option-text'}
-                            selectedOptionTextColor={selectedOptionTextColor}
-                            // selected={item.value === selected}
-                            selected={!item?.disabled && item.value === selected}
-
-                        >
-                            {item.label}
-                        </OptionText>
-                    </WrapperDiv>
+                                selected={!item?.disabled && selected}
+                            >
+                                <RadioInnerCircle
+                                    theme={defaultStyles}
+                                    width={width}
+                                    height={height}
+                                    selectedCircleColor={selectedCircleColor}
+                                    radioInnerCircleStyle={{
+                                        ...radioInnerCircleStyle,
+                                        cursor: item?.disabled ? 'not-allowed ' : ' pointer',
+                                        backgroundColor: item?.disabled
+                                            ? 'transparent'
+                                            : item?.value === selected
+                                                ? radioInnerCircleStyle?.backgroundColor
+                                                : 'transparent',
+                                    }}
+                                    defaultRadioInnerCircleStyle={'radio-inner-circle'}
+                                    value={item.value}
+                                    selected={selected}
+                                />
+                            </RadioOuterCircle>
+                            <OptionText
+                                defaultOptionColor={defaultOptionColor}
+                                optionStyle={{
+                                    ...optionStyle,
+                                    cursor: item?.disabled ? 'not-allowed ' : ' pointer',
+                                    color: item?.disabled && item?.disabledColor,
+                                }}
+                                theme={defaultStyles}
+                                defaultOptionStyle={'option-text'}
+                                selectedOptionTextColor={selectedOptionTextColor}
+                                // selected={item.value === selected}
+                                selected={!item?.disabled && item.value === selected}
+                            >
+                                {item.label}
+                            </OptionText>
+                        </WrapperDiv>
+                    );
                 })}
             </ParentDiv>
         </div>
-    )
-}
+    );
+};
 
 RadioInput.propTypes = {
     /**
@@ -133,11 +175,11 @@ RadioInput.propTypes = {
      */
     inline: PropTypes.bool,
     /**
-     *	RadioButton Contents i.e:- 
-       [{ label: "First Radio Button", value: "first", disabled:true, disabledColor: '#ae3232' },
-        { label: "Second Radio Button", value: "second" },
-        { label: "Third Radio Button", value: "third" }]
-     */
+       *	RadioButton Contents i.e:- 
+         [{ label: "First Radio Button", value: "first", disabled:true, disabledColor: '#ae3232' },
+          { label: "Second Radio Button", value: "second" },
+          { label: "Third Radio Button", value: "third" }]
+       */
     options: PropTypes.array,
     /**
      *	RadioButton style object
@@ -183,7 +225,7 @@ RadioInput.propTypes = {
      *	RadioButton selected option
      */
     selectedOptionTextColor: PropTypes.string,
-}
+};
 
 RadioInput.defaultProps = {
     label: '',
@@ -201,5 +243,4 @@ RadioInput.defaultProps = {
     height: '14px',
     selectedCircleColor: `${defaultThemeColor.primary['primary-1']}`,
     selectedOptionTextColor: `${defaultThemeColor.neutral['neutral-1']}`,
-}
-
+};