groundfloor-react-ui 1.0.22 → 1.2.0

package/components/Accordion/Accordion.js

@@ -33,6 +33,7 @@ export const Accordion = ({
     contentToggle,
     toggleState,
     contentIsOpen,
+    id,
     ...props
 }) => {
     // const [contentIsOpen, setContentIsOpen] = useState(false);
@@ -112,6 +113,7 @@ export const Accordion = ({
                             ? { minHeight: contentRef.current.scrollHeight + 'px', borderColor: activeTheme.borderColor }
                             : { height: '0px', borderBottom: 'none' }
                     }
+                    id={id}
                     content={content}
                 />
             }
@@ -153,6 +155,7 @@ Accordion.propTypes = {
      */
     contentToggle: PropTypes.any,
     toggleState: PropTypes.func,
+    id: PropTypes.string
 };
 
 Accordion.defaultProps = {
@@ -160,5 +163,5 @@ Accordion.defaultProps = {
     content: 'Content',
     toggleIconAnimation: true,
     toggleState: () => { },
-
+    id: ''
 };

package/components/Accordion/AccordionSB.js

@@ -19,6 +19,7 @@ export const AccordionSB = ({
     index,
     handleClick,
     isAccordionOpen,
+    id,
     ...props
 }) => {
     const [contentIsOpen, setContentIsOpen] = useState(false);
@@ -116,6 +117,7 @@ export const AccordionSB = ({
                             ? { height: contentRef.current.scrollHeight + 'px' }
                             : { height: '0px', borderBottom: 'none' }
                     }
+                    id={id}
                     content={content}
                 />
             }
@@ -156,9 +158,11 @@ AccordionSB.propTypes = {
      * String or element to be display in the header of the accordion
      */
     contentToggle: PropTypes.any,
+    id: PropTypes.string
 };
 
 AccordionSB.defaultProps = {
     contentToggle: 'Toggle',
     content: 'Content',
+    id: ''
 };

package/components/Accordion/AccordionSBfooter.js

@@ -20,6 +20,7 @@ export const AccordionSBfooter = ({
     handleClick,
     isAccordionOpen,
     disable,
+    id,
     ...props
 }) => {
     const [contentIsOpen, setContentIsOpen] = useState(false);
@@ -119,6 +120,7 @@ export const AccordionSBfooter = ({
                             ? { height: contentRef.current.scrollHeight + 'px' }
                             : { height: '0px', borderBottom: 'none' }
                     }
+                    id={id}
                     content={content}
                 />
             }
@@ -159,9 +161,11 @@ AccordionSBfooter.propTypes = {
      * String or element to be display in the header of the accordion
      */
     contentToggle: PropTypes.any,
+    id: PropTypes.string
 };
 
 AccordionSBfooter.defaultProps = {
     contentToggle: 'Toggle',
     content: 'Content',
+    id: ''
 };

package/components/ArrowBar/ArrowBar.js

@@ -232,7 +232,7 @@ export const ArrowBar = ({ variant, data, scroll, onClick, clickable, ...props }
             {data.map((singleData, index) => {
                 return (
                     // Add the ref to the Arrow with the longest text label + value
-                    <StyledArrow theme={activeTheme} onClick={clickable ? (e) => onClick(e, singleData) : null} clickable={clickable} scroll={scroll} ref={scroll ? null : singleData.label === longest.label ? arrowRef : null} key={'fa' + index + '-' + singleData.label} index={index} dataLength={data.length} color={singleData.color}>
+                    <StyledArrow id={singleData.id} theme={activeTheme} onClick={clickable ? (e) => onClick(e, singleData) : null} clickable={clickable} scroll={scroll} ref={scroll ? null : singleData.label === longest.label ? arrowRef : null} key={'fa' + index + '-' + singleData.label} index={index} dataLength={data.length} color={singleData.color}>
                         {ArrowContent(singleData.value, singleData.label)}
                     </StyledArrow>
                 )

package/components/Avatar/AvatarSBfooter.js

@@ -1,5 +1,7 @@
 import PropTypes from 'prop-types';
-import React, { useState } from 'react';
+
+import React, { useState } from "react";
+
 import styled, { css, useTheme } from 'styled-components';
 import defaultStyles from '../constants/defaultStyle';
 import defaultThemeColor from '../constants/defaultThemeColor';
@@ -9,16 +11,20 @@ import { Image } from '../Images';
  * Primary UI component for user interaction
  */
 const StyledContainer = styled.span`
-  ${({ inBuiltCss, type, customStyles }) => {
+
+${({ inBuiltCss, type, customStyles }) => {
+
         if (inBuiltCss) {
             let tempObj = {};
             if (inBuiltCss[type]) {
                 for (const property in inBuiltCss['common']) {
-                    tempObj[property] = inBuiltCss['common'][property];
+
+                    tempObj[property] = inBuiltCss['common'][property]
                 }
                 for (const property in inBuiltCss[type]) {
-                    tempObj[property] = inBuiltCss[type][property];
-                    delete inBuiltCss.common[property];
+                    tempObj[property] = inBuiltCss[type][property]
+                    delete inBuiltCss.common[property]
+
                 }
             }
             return { ...tempObj, ...customStyles };
@@ -28,10 +34,12 @@ const StyledContainer = styled.span`
 `;
 
 const StyledCircle = styled.div`
+
   background-color: ${({ theme }) => theme.primary['primary-1']};
   color: ${({ theme }) => theme.bgColor};
 
   ${({ inBuiltCss, type, size, customStyles }) => {
+
         if (inBuiltCss) {
             let tempObj = {};
             if (inBuiltCss[type]) {
@@ -45,6 +53,7 @@ const StyledCircle = styled.div`
                 for (const property in inBuiltCss[`${type}${size}`]) {
                     tempObj[property] = inBuiltCss[`${type}${size}`][property];
                     delete inBuiltCss.common[property];
+
                 }
             }
             return { ...tempObj, ...customStyles };
@@ -80,13 +89,16 @@ const StyledCircle = styled.div`
 //   console.log("customStylesCircle" + i + ": ", customStylesCircle)
 
 const StyledName = styled.span`
+
   color: ${({ theme }) => theme.textColor};
 
   ${({ inBuiltCss, type, size, customStyles }) => {
+
         if (inBuiltCss) {
             let tempObj = {};
             if (inBuiltCss[type]) {
                 for (const property in inBuiltCss['common']) {
+
                     tempObj[property] = inBuiltCss['common'][property];
                 }
                 for (const property in inBuiltCss[type]) {
@@ -96,14 +108,17 @@ const StyledName = styled.span`
                 for (const property in inBuiltCss[`${type}${size}`]) {
                     tempObj[property] = inBuiltCss[`${type}${size}`][property];
                     delete inBuiltCss.common[property];
+
                 }
             }
             return { ...tempObj, ...customStyles };
         }
     }}
 
+
   &:hover {
     ${({ inBuiltCss, type, size, customStylesHover }) => {
+
         if (inBuiltCss) {
             let tempObj = {};
             // if (inBuiltCss[type]) {
@@ -126,6 +141,9 @@ const StyledName = styled.span`
 `;
 
 export const AvatarSBfooter = ({
+
+    inBuiltCss,
+
     customStylesContainer,
     customStylesImage,
     customStylesCircle,
@@ -141,14 +159,17 @@ export const AvatarSBfooter = ({
     value,
     ...props
 }) => {
-    const [avatarStatus, setAvatarStatus] = useState('loading');
+
     const activeTheme = useTheme() || defaultThemeColor;
+    const [avatarStatus, setAvatarStatus] = useState("loading");
+
 
     const handleImageStatus = (imageStatus) => {
         setAvatarStatus(imageStatus);
     };
     // console.log('user', user)
     return (
+
         <StyledContainer
             border={border}
             theme={activeTheme}
@@ -177,6 +198,7 @@ export const AvatarSBfooter = ({
                 {...props}
                 theme={activeTheme}
                 inBuiltCss={defaultStyles}
+
                 type={'avatarCircle'}
                 customStyles={customStylesCircle}
                 size={size}
@@ -187,6 +209,7 @@ export const AvatarSBfooter = ({
             >
                 {value}
             </StyledCircle>
+
             {toggleName && (
                 <StyledName
                     theme={activeTheme}
@@ -200,6 +223,7 @@ export const AvatarSBfooter = ({
                     {user.userName}{' '}
                 </StyledName>
             )}
+
         </StyledContainer>
     );
 };
@@ -233,9 +257,19 @@ AvatarSBfooter.propTypes = {
      * Object with user information. To display the user's picture need a key "url". To display the name need a key "userName"
      */
     user: PropTypes.object,
+
+};
+
+AvatarSBfooter.defaultProps = {
+    /**
+     * inBuiltCss object
+     */
+     inBuiltCss: PropTypes.object,
 };
 
 AvatarSBfooter.defaultProps = {
+    inBuiltCss: defaultStyles,
+
     block: false,
     size: 'MD',
     toggleName: false,

package/components/Breadcrumb/Breadcrumb.js

@@ -122,6 +122,7 @@ export const Breadcrumb = ({
             <div className='breadcrumb-icon-separator'>{separator}</div>
           )}
           <StyledItem
+            id={item.id}
             theme={activeTheme}
             onClick={() => {
               if (item.href) onClick(item.href);
@@ -180,6 +181,23 @@ Breadcrumb.propTypes = {
   separator: PropTypes.any,
   /**
    * List of the elements of breadcramb
+   * ex: [
+    {
+      href: '/',
+      label: 'Home',
+      id: '1'
+    },
+    {
+      href: '/level1',
+      label: 'Level 1',
+      id: '2'
+    },
+    {
+      href: null,
+      label: 'Level 2',
+      id: '3'
+    },
+  ]
    */
   items: PropTypes.array,
   /**

package/components/Button/PrimaryButton.js

@@ -67,12 +67,14 @@ export const PrimaryButton = ({
     isLoading,
     type,
     theme,
+    id,
     ...props
 }) => {
     const activeTheme = useTheme() || defaultThemeColor
 
     return (
         <StyledButton
+            id={id}
             block={block}
             variant={variant}
             defaultStyle='button'
@@ -141,6 +143,11 @@ PrimaryButton.propTypes = {
      * custom style of button
      */
     btnStyle: PropTypes.object,
+    /**
+    * id of the primaryBtn
+    */
+    id: PropTypes.string,
+    
 };
 
 StyledButton.defaultProps = {
@@ -156,4 +163,5 @@ PrimaryButton.defaultProps = {
     size: 'md',
     onClick: undefined,
     btnStyle: {},
+    id: ''
 };

package/components/Button/SecondaryButton.js

@@ -62,11 +62,13 @@ export const SecondaryButton = ({
     disabled,
     type,
     theme,
+    id,
     ...props
 }) => {
     const activeTheme = useTheme() || defaultThemeColor
     return (
         <StyledButton
+            id={id}
             block={block}
             variant={variant}
             defaultStyle='button'
@@ -132,6 +134,10 @@ SecondaryButton.propTypes = {
      * custome style of button
      */
     btnStyle: PropTypes.object,
+    /**
+    * id of the secondaryBtn
+    */
+    id: PropTypes.string,
 };
 
 StyledButton.defaultProps = {
@@ -146,4 +152,5 @@ SecondaryButton.defaultProps = {
     size: 'md',
     onClick: undefined,
     btnStyle: {},
+    id: ''
 };

package/components/Button/TinyButton.js

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import styled, { useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 import getDefaultStyles from '../constants/utils';
@@ -37,10 +37,11 @@ const StyledButton = styled.button`
     }}
 `;
 
-export const TinyButton = ({ block, style, variant, disabled, type, ...props }) => {
+export const TinyButton = ({ block, style, variant, disabled, type, id, ...props }) => {
     const theme = useTheme() || defaultThemeColor;
     return (
         <StyledButton
+            id={id}
             block={block}
             variant={variant}
             defaultStyle="button"
@@ -79,6 +80,10 @@ TinyButton.propTypes = {
     * Type of the btn i.e: button or submit etc.
     */
     type: PropTypes.string,
+    /**
+    * id of the tinybtn
+    */
+    id: PropTypes.string,
 };
 
 StyledButton.defaultProps = {
@@ -91,5 +96,6 @@ TinyButton.defaultProps = {
     block: false,
     disabled: false,
     onClick: undefined,
+    id: ''
 };
 

package/components/DesignComponent/StyledComponent/StyledComponent.js

@@ -289,13 +289,7 @@ export const FormContainer = styled.div`
   }
 `;
 
-export const FormWrapper = styled.form`
-  width: 40vw;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  gap: 20px;
-`;
+
 
 export const SubmitButtonContainer = styled.div`
   display: flex;
@@ -316,3 +310,23 @@ export const MultiColumnDiv = styled.div`
   min-width: 48%;
   
 `;
+
+
+
+
+export const FormWrapper = ({ customStyles }) => {
+
+  const Wrapper = styled.form`
+  width: 40vw;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  gap: 20px;
+  ${({ customStyles }) => customStyles}
+  `;
+  return (
+    <Wrapper customStyles={customStyles}>
+    </Wrapper>
+  );
+};
+

package/components/Form/FormComponent.js

@@ -1,7 +1,11 @@
 import React, { Fragment } from 'react';
+import { PrimaryButton, SecondaryButton, TinyButton } from '../Button';
 import defaultThemeColor from '../constants/defaultThemeColor';
+import {
+  FormContainer,
+  FormWrapper, MultiColumnDiv, MultiColumnWrapper
+} from '../DesignComponent';
 import { Header } from '../Header';
-import { Label } from '../Label';
 import {
   CheckBoxInput,
   DateSelect,
@@ -14,16 +18,10 @@ import {
   SignatureInput,
   TextArea,
   TextInput,
-  ToggleSwitch,
+  ToggleSwitch
 } from '../Inputs';
+import { Label } from '../Label';
 import { Rating } from '../Rating';
-import { PrimaryButton, SecondaryButton, TinyButton } from '../Button';
-import {
-  FormContainer,
-  FormWrapper,
-  MultiColumnWrapper,
-  MultiColumnDiv,
-} from '../DesignComponent';
 import { Table } from '../Tables';
 import { HeaderComponent } from './HeaderComponent';
 
@@ -213,8 +211,8 @@ export const FormComponent = ({ formData, ...props }) => {
 
   return (
     <Fragment>
-      <FormContainer defaultThemeColor={defaultThemeColor}>
-        <FormWrapper onSubmit={handleSubmit}>
+      <FormContainer defaultThemeColor={defaultThemeColor} >
+        <FormWrapper onSubmit={handleSubmit}  >
           {formData.map((row, i) => {
             if (row.length > 1) {
               return (

package/components/Inputs/CheckBoxInput.js

@@ -185,6 +185,7 @@ export const CheckBoxInput = ({
                     return (
                         <WrapperDiv
                             inline={inline}
+                            id={item.id}
                             key={`${item.name}-${i}`}
                             onClick={() => {
                                 checkBox(item, i);

package/components/Inputs/ColorInput.js

@@ -0,0 +1,144 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+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';
+
+const ColorWrapper = styled.div`
+border: 1px solid ${({ theme }) => theme.variant['neutral-4']};
+background-color: ${({ theme }) => theme.bgColor};
+
+&:focus-within {
+  border: 1px solid ${({ theme }) => theme.primary['primary-1']};
+}
+
+${({ inBuiltCss, defaultColorWrapperStyle }) => {
+  return getDefaultStyles(inBuiltCss, defaultColorWrapperStyle);
+}}
+// custom styles
+${({ customColorWrapperStyle }) => customColorWrapperStyle}
+
+`
+
+const InputColor = styled.input`
+
+border: 0.5px solid ${({ theme }) => theme.variant['neutral-4']};
+box-shadow: 0px 5px 37px rgba(56, 66, 100, 0.0880136);
+-webkit-appearance: none;
+padding: 0;
+
+&::-webkit-color-swatch-wrapper {
+  padding: 0;
+  border-radius: 4px;
+  
+}
+&::-webkit-color-swatch {
+  border: none;
+  border-radius: 4px;
+  
+}
+
+${({ inBuiltCss, defaultInputColorStyle }) => {
+  return getDefaultStyles(inBuiltCss, defaultInputColorStyle);
+}}
+// custom styles
+${({ customInputColorStyle }) => customInputColorStyle}
+`;
+
+
+export const ColorInput = ({
+  label,
+  labelStyle,
+  value,
+  setValue,
+  customInputColorStyle,
+  customColorWrapperStyle,
+  id,
+  ...props
+  }) => {
+    const activeTheme = useTheme() || defaultThemeColor;
+  return (
+    
+    <ColorWrapper customColorWrapperStyle={customColorWrapperStyle}
+    defaultColorWrapperStyle={'ColorWrapper'} 
+    theme={activeTheme}
+    inBuiltCss={defaultStyles}
+    {...props}>
+        
+        <InputColor 
+        id={id}
+        customInputColorStyle={customInputColorStyle}
+        defaultInputColorStyle={'input-color'} 
+        inBuiltCss={defaultStyles}
+        theme={activeTheme}
+        {...props}
+        type="color"
+        value={value}
+        
+        onChange={
+          (e)=>{
+            setValue(e.target.value)}}
+        />
+        <Label
+          themeColor={defaultThemeColor}
+          customStyles={labelStyle}
+          type={'label-text'}
+          text={label}
+          style={{
+            display: 'flex',
+            paddingBottom: '0px',
+            paddingLeft: '10px'
+          }}
+          {...props}
+        />
+      
+    </ColorWrapper>
+    
+  );
+};
+
+ColorInput.propTypes = {
+  /**
+   *	Label of ColorInput
+   */
+  label: PropTypes.string,
+  /**
+   *	Label style of ColorInput
+   */
+   labelStyle: PropTypes.object,
+  
+  /**
+   *	color value of input
+   */
+  value: PropTypes.string,
+  /**
+   *	value setter function
+   */
+  setValue: PropTypes.func,
+  /**
+   *	custom style of color-input box
+   */
+  customInputColorStyle: PropTypes.object,
+  /**
+   *	custom style of the wrapper around the color-input
+   */
+   customColorWrapperStyle: PropTypes.object,
+   /**
+   *	id of the colorInput
+   */
+   id: PropTypes.string
+
+}
+
+ColorInput.defaultProps ={
+label: '',
+labelStyle: {},
+customInputColorStyle: {},
+customColorWrapperStyle: {},
+value: '#FFFFFF',
+setValue: ()=>{ },
+id: ''
+};
+