groundfloor-react-ui 1.0.11 → 1.0.14

package/README.md

@@ -11,10 +11,15 @@ npm install groundfloor-react-ui --save
 ```
 
 ```
-Add this default theme colo and styles if needed.
+Add this default theme color and styles if needed.
 
 import defaultStyles from 'groundfloor-react-ui/components/constants/defaultStyle';
 import defaultThemeColor from 'groundfloor-react-ui/components/constants/defaultThemeColor';
+
+For use DateSelect add the below css file to your root
+import 'react-datepicker/dist/react-datepicker.css';
+For use Overlay, Tooltip and ButtonPopup add the below css file to your root
+import 'react-popper-tooltip/dist/styles.css';
 ```
 
 ## Pre-requisites

package/assets/icons/default.svg

@@ -0,0 +1 @@
+<svg id="f46636c4-9d90-4c06-8f72-5c02d35ff376" data-name="a9011979-1776-4746-bb61-6eae84c3e8ab" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.6 24"><defs><style>.b78a75cf-ef1e-49e2-8d45-bd32a83f2ff9{fill:#2e56f4;}</style></defs><path class="b78a75cf-ef1e-49e2-8d45-bd32a83f2ff9" d="M15.4,0H0V24H20.6V5.1Zm3.5,22.3H1.7V1.7H14.4l4.5,4.6Z"/><rect class="b78a75cf-ef1e-49e2-8d45-bd32a83f2ff9" x="3.6" y="3.5" width="7.6" height="1.59"/><rect class="b78a75cf-ef1e-49e2-8d45-bd32a83f2ff9" x="3.6" y="6.5" width="10.6" height="1.59"/><path class="b78a75cf-ef1e-49e2-8d45-bd32a83f2ff9" d="M13.7,16.8v-.5a4.3,4.3,0,0,0,0-1.6v-.5l1.4-.7A6.2,6.2,0,0,0,14,11.8l-1.3.7-.4-.3-1.4-.8h-.5V9.8a7.4,7.4,0,0,0-2.1,0v1.5H7.8l-1.4.8-.4.3-1.3-.7a6.2,6.2,0,0,0-1.1,1.7l1.4.7v.5a4.3,4.3,0,0,0,0,1.6v.5l-1.4.7a6.2,6.2,0,0,0,1.1,1.7L6,18.5l.4.3,1.4.8.5.2v1.4a7.4,7.4,0,0,0,2.1,0V19.8l.5-.2a3.9,3.9,0,0,0,1.4-.8l.4-.3,1.3.7a6.2,6.2,0,0,0,1.1-1.7ZM9.4,18.3a2.9,2.9,0,0,1-2.9-2.8,2.9,2.9,0,1,1,2.9,2.8Z"/></svg>

package/components/Button/PrimaryButton.js

@@ -36,6 +36,7 @@ const StyledButton = styled.button`
   border-radius: 5px;
   font-size: ${({ size }) => sizes[size].fontSize};
   display: flex;
+  outline: none;
   align-items: center;
   width: ${({ block }) => (block ? '100%' : 'auto')};
   cursor: pointer;

package/components/Button/SecondaryButton.js

@@ -35,6 +35,7 @@ const StyledButton = styled.button`
   font-size: ${({ size }) => sizes[size].fontSize};
   border-radius: 5px;
   display: flex;
+  outline: none;
   align-items: center;
   width: ${({ block }) => (block ? '100%' : 'auto')};
   cursor: pointer;

package/components/Button/TinyButton.js

@@ -18,6 +18,7 @@ const StyledButton = styled.button`
     border-radius: 10.5px;
     font-size: 14px;
     line-height: 17px;
+    outline: none;
     display: flex;
     align-items: center;
     width: ${({ block }) => block ? '100%' : 'auto'};

package/components/Form/FormComponent.js

@@ -25,6 +25,7 @@ import {
   MultiColumnDiv,
 } from '../DesignComponent';
 import { Table } from '../Tables';
+import { HeaderComponent } from './HeaderComponent';
 
 export const FormComponent = ({ formData, ...props }) => {
   const header = (item) => {
@@ -150,7 +151,9 @@ export const FormComponent = ({ formData, ...props }) => {
   const passwordInput = (item) => {
     return <PasswordInput {...item} {...props} />;
   };
-
+  const headerComponentInput = (item) => {
+    return <HeaderComponent {...item} {...props} />;
+  };
   const handleSubmit = () => {
     console.log('form submit');
   };
@@ -201,6 +204,8 @@ export const FormComponent = ({ formData, ...props }) => {
         return tableInput(item);
       case 'passwordInput':
         return passwordInput(item);
+      case 'headerComponent':
+        return headerComponentInput(item);
       default:
         break;
     }

package/components/Form/HeaderComponent.js

@@ -2,7 +2,7 @@ import React from 'react'
 import defaultThemeColor from '../constants/defaultThemeColor'
 import userIcon from "../../assets/icons/users.svg";
 
-export const HeaderComponent = ({ title, subtitle, wrapperstyle }) => {
+export const HeaderComponent = ({ title, subtitle, wrapperstyle, imgLink, imgStyle }) => {
 
     const titleStyle = {
         'fontSize': '26px',
@@ -24,11 +24,11 @@ export const HeaderComponent = ({ title, subtitle, wrapperstyle }) => {
 
     return <div style={wrapperstyle}>
         <div style={titleStyle}>
-            <img src={userIcon} alt="userIcon" srcset="" />
+            <img src={imgLink || userIcon} alt="userIcon" srcset="" style={imgStyle} />
             <h4>{title}</h4>
         </div>
         <div style={subtitleStyle}>
             <p>{subtitle}</p>
         </div>
     </div>
-}
+}

package/components/GroupButtons/ButtonPopup.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import styled, { useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 import { usePopperTooltip } from 'react-popper-tooltip';
-import 'react-popper-tooltip/dist/styles.css';
 
 /**
  * Primary UI component for user interaction

package/components/Icon/Icon.js

@@ -49,6 +49,7 @@ import fileUpload from '../../assets/icons/file-upload.svg'
 import eyeHide from '../../assets/icons/eye-hide.svg'
 import eyeView from '../../assets/icons/eye-hide-view.svg'
 import fileIcon from '../../assets/icons/file-icon.svg'
+import defaultIcon from '../../assets/icons/default.svg'
 
 
 /** icon name should be kebab-case, e.g "plus-outline" */
@@ -97,6 +98,7 @@ const iconObj = {
     'eye-hide': eyeHide,
     'eye-show': eyeView,
     'file-icon': fileIcon,
+    'default-icon': defaultIcon,
 }
 
 const StyledSVGIcon = styled(ReactSVG)`

package/components/Inputs/DateSelect.js

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
 import DatePicker from 'react-datepicker';
-import 'react-datepicker/dist/react-datepicker.css';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
@@ -149,7 +148,7 @@ const Wrapper = styled.div`
 `;
 
 Wrapper.defaultProps = {
-    theme: defaultThemeColor,
+  theme: defaultThemeColor,
 };
 
 const CalendarHeaderDiv = styled.div`
@@ -219,7 +218,7 @@ const DropDownList = styled('ul')`
   }
 `;
 DropDownList.defaultProps = {
-    theme: defaultThemeColor,
+  theme: defaultThemeColor,
 };
 
 const ListItem = styled('li')`
@@ -234,224 +233,224 @@ const ListItem = styled('li')`
 `;
 
 export const DateSelect = ({ startDate, setStartDate, disabled, ...props }) => {
-    const theme = defaultThemeColor;
-
-    const months = [
-        'January',
-        'February',
-        'March',
-        'April',
-        'May',
-        'June',
-        'July',
-        'August',
-        'September',
-        'October',
-        'November',
-        'December',
-    ];
-    var years = [];
-    for (var i = 2010; i <= new Date().getFullYear() + 10; i++) {
-        years.push(i);
-    }
+  const theme = defaultThemeColor;
+
+  const months = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+  var years = [];
+  for (var i = 2010; i <= new Date().getFullYear() + 10; i++) {
+    years.push(i);
+  }
 
-    const refMonth = useRef(null);
-    const refYear = useRef(null);
-    const [isOpen, setIsOpen] = useState(false);
-    const [isOpenYear, setIsOpenYear] = useState(false);
-    const [hover, setHover] = useState(false);
-    const [hoverYear, setHoverYear] = useState(false);
-    const [selectedYear, setSelectedYear] = useState(startDate.getFullYear());
-    const [selectedMonth, setSelectedMonth] = useState(
-        months[startDate.getMonth()]
-    );
-
-    useEffect(() => {
-        setSelectedMonth(months[startDate.getMonth()]);
-        setSelectedYear(startDate.getFullYear());
-    }, [startDate]);
-
-    useEffect(() => {
-        document.addEventListener('click', handleClickOutsideMonth, true);
-
-        return () => {
-            document.removeEventListener('click', handleClickOutsideMonth, true);
-        };
-    }, []);
-
-    const handleClickOutsideMonth = (event) => {
-        if (refMonth.current && !refMonth.current.contains(event.target)) {
-            setIsOpen(false);
-        }
+  const refMonth = useRef(null);
+  const refYear = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isOpenYear, setIsOpenYear] = useState(false);
+  const [hover, setHover] = useState(false);
+  const [hoverYear, setHoverYear] = useState(false);
+  const [selectedYear, setSelectedYear] = useState(startDate.getFullYear());
+  const [selectedMonth, setSelectedMonth] = useState(
+    months[startDate.getMonth()]
+  );
+
+  useEffect(() => {
+    setSelectedMonth(months[startDate.getMonth()]);
+    setSelectedYear(startDate.getFullYear());
+  }, [startDate]);
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutsideMonth, true);
+
+    return () => {
+      document.removeEventListener('click', handleClickOutsideMonth, true);
     };
+  }, []);
 
-    const handleClickOutsideYear = (event) => {
-        if (refYear.current && !refYear.current.contains(event.target)) {
-            setIsOpenYear(false);
-        }
-    };
+  const handleClickOutsideMonth = (event) => {
+    if (refMonth.current && !refMonth.current.contains(event.target)) {
+      setIsOpen(false);
+    }
+  };
 
-    useEffect(() => {
-        document.addEventListener('click', handleClickOutsideYear, true);
-
-        return () => {
-            document.removeEventListener('click', handleClickOutsideYear, true);
-        };
-    }, []);
-
-    return (
-        <Wrapper disabled={disabled} {...props}>
-            <DatePicker
-                selected={startDate}
-                dateFormat='dd/MM/yyyy'
-                useWeekdaysShort={true}
-                onChange={(date) => setStartDate(date)}
-                placeholderText={'select date'}
-                adjustDateOnChange
-                disabled={disabled}
-                dropdownMode='select'
-                renderCustomHeader={({ date, changeYear, changeMonth }) => {
-                    return (
-                        <CalendarHeaderDiv>
-                            <div style={{ display: 'flex' }}>
-                                <DropDownContainer ref={refMonth}>
-                                    <DropDownHeader
-                                        onClick={() => {
-                                            setIsOpen(!isOpen);
-                                            setIsOpenYear(false);
-                                        }}
-                                    >
-                                        <span
-                                            onMouseEnter={() => setHover(true)}
-                                            onMouseLeave={() => setHover(false)}
-                                            style={{
-                                                color: `${hover ? theme.variant['primary-1'] : theme.textColor
-                                                    }`,
-                                            }}
-                                        >
-                                            {months[date.getMonth()]}
-                                        </span>
-                                        <IconDiv>
-                                            <Icon
-                                                icon='triangle-down'
-                                                color={hover ? 'blue' : 'black'}
-                                                size={7}
-                                            />
-                                        </IconDiv>
-                                    </DropDownHeader>
-                                    {isOpen && (
-                                        <DropDownListContainer>
-                                            <DropDownList onMouseEnter={() => setHover(true)}>
-                                                {months.map((option, index) => (
-                                                    <ListItem
-                                                        selectedMonth={selectedMonth}
-                                                        onClick={() => {
-                                                            setHover(false);
-                                                            changeMonth(index);
-                                                            setIsOpen(false);
-                                                            setSelectedMonth(months[index]);
-                                                        }}
-                                                        key={Math.random()}
-                                                    >
-                                                        <span
-                                                            style={{
-                                                                color: `${selectedMonth === option
-                                                                        ? theme.variant['primary-1']
-                                                                        : theme.textColor
-                                                                    }`,
-                                                            }}
-                                                        >
-                                                            {option}
-                                                        </span>
-                                                    </ListItem>
-                                                ))}
-                                            </DropDownList>
-                                        </DropDownListContainer>
-                                    )}
-                                </DropDownContainer>
-                                <DropDownContainer ref={refYear}>
-                                    <DropDownHeader
-                                        style={{ marginLeft: '28px' }}
-                                        onClick={() => {
-                                            setIsOpenYear(!isOpenYear);
-                                            setIsOpen(false);
-                                        }}
-                                    >
-                                        <span
-                                            onMouseEnter={() => setHoverYear(true)}
-                                            onMouseLeave={() => setHoverYear(false)}
-                                            style={{
-                                                color: `${hoverYear
-                                                        ? theme.variant['primary-1']
-                                                        : theme.textColor
-                                                    }`,
-                                            }}
-                                        >
-                                            {date.getFullYear()}
-                                        </span>
-                                        <IconDiv>
-                                            <Icon
-                                                icon='triangle-down'
-                                                color={hoverYear ? 'blue' : 'black'}
-                                                size={7}
-                                            />
-                                        </IconDiv>
-                                    </DropDownHeader>
-                                    {isOpenYear && (
-                                        <DropDownListContainer>
-                                            <DropDownList onMouseEnter={() => setHoverYear(true)}>
-                                                {years.map((option, index) => (
-                                                    <ListItem
-                                                        onClick={() => {
-                                                            setHoverYear(false);
-                                                            changeYear(option);
-                                                            setSelectedYear(option);
-                                                            setIsOpenYear(false);
-                                                        }}
-                                                        key={Math.random()}
-                                                    >
-                                                        <span
-                                                            style={{
-                                                                color: `${selectedYear === option
-                                                                        ? theme.variant['primary-1']
-                                                                        : theme.textColor
-                                                                    }`,
-                                                            }}
-                                                        >
-                                                            {option}
-                                                        </span>
-                                                    </ListItem>
-                                                ))}
-                                            </DropDownList>
-                                        </DropDownListContainer>
-                                    )}
-                                </DropDownContainer>
-                            </div>
-                        </CalendarHeaderDiv>
-                    );
-                }}
-            />
-        </Wrapper>
-    );
+  const handleClickOutsideYear = (event) => {
+    if (refYear.current && !refYear.current.contains(event.target)) {
+      setIsOpenYear(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutsideYear, true);
+
+    return () => {
+      document.removeEventListener('click', handleClickOutsideYear, true);
+    };
+  }, []);
+
+  return (
+    <Wrapper disabled={disabled} {...props}>
+      <DatePicker
+        selected={startDate}
+        dateFormat='dd/MM/yyyy'
+        useWeekdaysShort={true}
+        onChange={(date) => setStartDate(date)}
+        placeholderText={'select date'}
+        adjustDateOnChange
+        disabled={disabled}
+        dropdownMode='select'
+        renderCustomHeader={({ date, changeYear, changeMonth }) => {
+          return (
+            <CalendarHeaderDiv>
+              <div style={{ display: 'flex' }}>
+                <DropDownContainer ref={refMonth}>
+                  <DropDownHeader
+                    onClick={() => {
+                      setIsOpen(!isOpen);
+                      setIsOpenYear(false);
+                    }}
+                  >
+                    <span
+                      onMouseEnter={() => setHover(true)}
+                      onMouseLeave={() => setHover(false)}
+                      style={{
+                        color: `${hover ? theme.variant['primary-1'] : theme.textColor
+                          }`,
+                      }}
+                    >
+                      {months[date.getMonth()]}
+                    </span>
+                    <IconDiv>
+                      <Icon
+                        icon='triangle-down'
+                        color={hover ? 'blue' : 'black'}
+                        size={7}
+                      />
+                    </IconDiv>
+                  </DropDownHeader>
+                  {isOpen && (
+                    <DropDownListContainer>
+                      <DropDownList onMouseEnter={() => setHover(true)}>
+                        {months.map((option, index) => (
+                          <ListItem
+                            selectedMonth={selectedMonth}
+                            onClick={() => {
+                              setHover(false);
+                              changeMonth(index);
+                              setIsOpen(false);
+                              setSelectedMonth(months[index]);
+                            }}
+                            key={Math.random()}
+                          >
+                            <span
+                              style={{
+                                color: `${selectedMonth === option
+                                  ? theme.variant['primary-1']
+                                  : theme.textColor
+                                  }`,
+                              }}
+                            >
+                              {option}
+                            </span>
+                          </ListItem>
+                        ))}
+                      </DropDownList>
+                    </DropDownListContainer>
+                  )}
+                </DropDownContainer>
+                <DropDownContainer ref={refYear}>
+                  <DropDownHeader
+                    style={{ marginLeft: '28px' }}
+                    onClick={() => {
+                      setIsOpenYear(!isOpenYear);
+                      setIsOpen(false);
+                    }}
+                  >
+                    <span
+                      onMouseEnter={() => setHoverYear(true)}
+                      onMouseLeave={() => setHoverYear(false)}
+                      style={{
+                        color: `${hoverYear
+                          ? theme.variant['primary-1']
+                          : theme.textColor
+                          }`,
+                      }}
+                    >
+                      {date.getFullYear()}
+                    </span>
+                    <IconDiv>
+                      <Icon
+                        icon='triangle-down'
+                        color={hoverYear ? 'blue' : 'black'}
+                        size={7}
+                      />
+                    </IconDiv>
+                  </DropDownHeader>
+                  {isOpenYear && (
+                    <DropDownListContainer>
+                      <DropDownList onMouseEnter={() => setHoverYear(true)}>
+                        {years.map((option, index) => (
+                          <ListItem
+                            onClick={() => {
+                              setHoverYear(false);
+                              changeYear(option);
+                              setSelectedYear(option);
+                              setIsOpenYear(false);
+                            }}
+                            key={Math.random()}
+                          >
+                            <span
+                              style={{
+                                color: `${selectedYear === option
+                                  ? theme.variant['primary-1']
+                                  : theme.textColor
+                                  }`,
+                              }}
+                            >
+                              {option}
+                            </span>
+                          </ListItem>
+                        ))}
+                      </DropDownList>
+                    </DropDownListContainer>
+                  )}
+                </DropDownContainer>
+              </div>
+            </CalendarHeaderDiv>
+          );
+        }}
+      />
+    </Wrapper>
+  );
 };
 
 DateSelect.propTypes = {
-    /**
-     * Date Props in GMT Format
-     */
-    startDate: PropTypes.any,
-    /**
-     * Date onChange Function
-     */
-    setStartDate: PropTypes.func,
-    /**
-     * Disable property of DateSelect
-     */
-    disabled: PropTypes.bool,
+  /**
+   * Date Props in GMT Format
+   */
+  startDate: PropTypes.any,
+  /**
+   * Date onChange Function
+   */
+  setStartDate: PropTypes.func,
+  /**
+   * Disable property of DateSelect
+   */
+  disabled: PropTypes.bool,
 };
 
 DateSelect.defaultProps = {
-    startDate: '',
-    setStartDate: () => { },
-    disabled: false,
+  startDate: '',
+  setStartDate: () => { },
+  disabled: false,
 };

package/components/Inputs/PasswordInput.js

@@ -7,7 +7,6 @@ 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
@@ -42,6 +41,8 @@ const TextWrapper = styled.div`
 
 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);
@@ -53,6 +54,7 @@ const Input = styled.input`
 	.sc-furwcr bxRAoq {
     color: ${defaultThemeColor.variant['neutral-3']};
   }
+
 `;
 
 const inline = css`
@@ -120,7 +122,7 @@ export const PasswordInput = ({
       <div
         style={{
           display: 'flex',
-          justifyContent: 'center',
+          justifyContent: 'start',
           alignItems: 'start',
         }}
       >
@@ -135,7 +137,8 @@ export const PasswordInput = ({
         >
           <Input
             inputStyle={inputStyle}
-            type={showEye ? 'text' : 'password'}
+            type={'text'}
+            showEye={showEye}
             defaultInputStyle={'input-wrapper'}
             {...props}
           />