groundfloor-react-ui 1.0.18 → 1.0.21

package/components/Accordion/Accordion.js

@@ -1,14 +1,28 @@
-import React, { useState, useRef } from "react";
 import PropTypes from 'prop-types';
-import defaultStyles from '../constants/defaultStyle';
-import { Card, CardRef } from "../Cards";
+import React, { useEffect, useRef, useState } from 'react';
+import styled, { useTheme } from 'styled-components';
+import { Card, CardRef } from '../Cards';
+import defaultThemeColor from '../constants/defaultThemeColor';
+import { Icon } from '../Icon';
 
 /**
  * Primary UI component for user interaction
  */
 
+const Wrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  span {
+    margin-right: 5px;
+    margin-left: 5px;
+    font-size: 12px;
+    color: ${({ theme }) => theme.neutral['neutral-3']};
+  }
+`;
+
 export const Accordion = ({
-    theme,
     customStylesAccordionContainer,
     customStylesAccordionTogggle,
     customStylesAccordionIcon,
@@ -17,60 +31,95 @@ export const Accordion = ({
     icon,
     content,
     contentToggle,
-    ...props }) => {
-
-    const [contentIsOpen, setContentIsOpen] = useState(false);
+    toggleState,
+    contentIsOpen,
+    ...props
+}) => {
+    // const [contentIsOpen, setContentIsOpen] = useState(false);
     const contentRef = useRef(null); //Used to get the height of the content
+    const activeTheme = useTheme() || defaultThemeColor;
+    const [height, setHeight] = useState(0)
+    const [contentVisibility, setcontentVisibility] = useState(false);
+
+    // useEffect(() => {
+    //   setHeight(contentRef.current.scrollHeight);
+    // }, [content])
+
+    useEffect(() => {
+        setcontentVisibility(contentIsOpen)
+    }, [contentIsOpen])
+
 
     return (
         <Card
-            theme={theme}
             customStyles={customStylesAccordionContainer}
             type={'accordionContainer'}
             {...props}
             header={
                 <Card
-                    theme={theme}
                     customStyles={customStylesAccordionTogggle}
                     type={'accordionToggle'}
                     {...props}
-                    onClick={() => { setContentIsOpen(!contentIsOpen) }}
+                    onClick={() => {
+                        setcontentVisibility(!contentVisibility);
+                    }}
                     header={contentToggle} //Label of the toggle
-                    content={ //Icon of the toggle
-                        <div
-                            theme={theme}
-                            style={
-                                toggleIconAnimation &&
-                                    contentIsOpen ? { transform: 'rotate(180deg)', transition: 'transform ease 95ms', background: 'transparent' } :
-                                    { transform: 'rotate(0deg)', transition: 'transform ease 95ms', background: 'transparent' }
-                            }
-                        >
-                            {icon}
-                        </div>}
+                    content={
+                        //Icon of the toggle
+
+                        <Wrapper theme={activeTheme}>
+                            <span>{!contentVisibility ? 'Click to open' : 'Click to hide'}</span>
+                            <div
+                                style={
+                                    toggleIconAnimation && contentVisibility
+                                        ? {
+                                            transform: 'rotate(180deg)',
+                                            transition: 'transform ease 95ms',
+                                            background: 'transparent',
+                                        }
+                                        : {
+                                            transform: 'rotate(0deg)',
+                                            transition: 'transform ease 95ms',
+                                            background: 'transparent',
+                                        }
+                                }
+                            >
+                                {icon ? (
+                                    icon
+                                ) : (
+                                    <Icon
+                                        icon='chevron-down'
+                                        size={11}
+                                        transform={'translate(0px,-1px)'}
+                                        color='#A9B1B8'
+                                    />
+                                )}
+                            </div>
+                        </Wrapper>
+                    }
                 />
             }
             content={
+
                 <CardRef
-                    theme={theme}
                     customStyles={customStylesAccordionContent}
                     type={'accordionContent'}
                     ref={contentRef}
                     // contentIsOpen={contentIsOpen}
                     {...props}
                     style={
-                        contentIsOpen ? { height: contentRef.current.scrollHeight + 'px', } : { height: '0px', borderBottom: 'none', }
+                        contentVisibility
+                            ? { minHeight: contentRef.current.scrollHeight + 'px', borderColor: activeTheme.borderColor }
+                            : { height: '0px', borderBottom: 'none' }
                     }
                     content={content}
-                />}
+                />
+            }
         />
     );
 };
 
 Accordion.propTypes = {
-    /**
-     * Theme object
-     */
-    theme: PropTypes.object,
     /**
      * Custom style for the Container
      */
@@ -92,7 +141,7 @@ Accordion.propTypes = {
      */
     toggleIconAnimation: PropTypes.bool,
     /**
-     * Icon to apply rotation animation when toggle accordion 
+     * Icon to apply rotation animation when toggle accordion
      */
     icon: PropTypes.any,
     /**
@@ -103,12 +152,13 @@ Accordion.propTypes = {
      * String or element to be display in the header of the accordion
      */
     contentToggle: PropTypes.any,
+    toggleState: PropTypes.func,
 };
 
 Accordion.defaultProps = {
-    theme: defaultStyles,
     contentToggle: 'Toggle',
-    content: 'Content'
-
-};
+    content: 'Content',
+    toggleIconAnimation: true,
+    toggleState: () => { },
 
+};

package/components/Accordion/AccordionSB.js

@@ -1,15 +1,12 @@
-import React, { useState, useEffect, useRef, useMemo } from "react";
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import defaultStyles from '../constants/defaultStyle';
-import { Card, CardRef } from "../Cards";
+import React, { useEffect, useRef, useState } from 'react';
+import { Card, CardRef } from '../Cards';
 
 /**
  * Primary UI component for user interaction
  */
 
- export const AccordionSB = ({
-    theme,
+export const AccordionSB = ({
     customStylesAccordionContainer,
     customStylesAccordionTogggle,
     customStylesAccordionIcon,
@@ -22,14 +19,13 @@ import { Card, CardRef } from "../Cards";
     index,
     handleClick,
     isAccordionOpen,
-    ...props }) => {
-
+    ...props
+}) => {
     const [contentIsOpen, setContentIsOpen] = useState(false);
     const contentRef = useRef(null); //Used to get the height of the content
 
-    const [customStylesContainer, setCustomStylesContainer] = useState({})
-    const [customStylesTogggle, setCustomStylesTogggle] = useState({})
-
+    const [customStylesContainer, setCustomStylesContainer] = useState({});
+    const [customStylesTogggle, setCustomStylesTogggle] = useState({});
 
     useEffect(() => {
         if (isSelected) {
@@ -39,9 +35,8 @@ import { Card, CardRef } from "../Cards";
                     backgroundColor: '#2444d8',
                     marginBottom: '15.5px',
                     marginTop: index !== 0 ? '15.5px' : '0px',
-
-                }
-            })
+                };
+            });
             setCustomStylesTogggle((prev) => {
                 return {
                     ...prev,
@@ -49,82 +44,86 @@ import { Card, CardRef } from "../Cards";
                     paddingTop: '14px',
                     paddingBottom: '14px',
                     paddingLeft: '14px',
-                }
-            })
-
-
+                };
+            });
         } else {
-            setCustomStylesContainer({})
-            setCustomStylesTogggle({})
+            setCustomStylesContainer({});
+            setCustomStylesTogggle({});
         }
-    }, [isSelected])
+    }, [isSelected]);
 
     useEffect(() => {
         if (isAccordionOpen) {
-            setContentIsOpen(true)
+            setContentIsOpen(true);
         } else {
-            setContentIsOpen(false)
+            setContentIsOpen(false);
         }
-
-    }, [isAccordionOpen])
+    }, [isAccordionOpen]);
 
     return (
         <Card
-            theme={theme}
-            customStyles={{ ...customStylesAccordionContainer, ...customStylesContainer }}
+            customStyles={{
+                ...customStylesAccordionContainer,
+                ...customStylesContainer,
+            }}
             type={'accordionContainer'}
             {...props}
-            header={ //Header of Accordion
+            header={
+                //Header of Accordion
                 <Card
-                    theme={theme}
-                    customStyles={{ ...customStylesAccordionTogggle, ...customStylesTogggle }}
+                    customStyles={{
+                        ...customStylesAccordionTogggle,
+                        ...customStylesTogggle,
+                    }}
                     type={'accordionToggle'}
                     {...props}
                     // onClick={() => { setContentIsOpen(!contentIsOpen) }}
                     onClick={() => {
                         if (!contentIsOpen) {
-                            handleClick(index)
+                            handleClick(index);
                         }
-                        setContentIsOpen(!contentIsOpen)
-
-
+                        setContentIsOpen(!contentIsOpen);
                     }}
                     header={contentToggle} //Label of the toggle
-                    content={ //Icon of the toggle
+                    content={
+                        //Icon of the toggle
                         <div
-                            theme={theme}
                             style={
-                                toggleIconAnimation &&
-                                    contentIsOpen ? { transform: 'rotate(180deg)', transition: 'transform ease 95ms', background: 'transparent' } :
-                                    { transform: 'rotate(0deg)', background: 'transparent' }
+                                toggleIconAnimation && contentIsOpen
+                                    ? {
+                                        transform: 'rotate(180deg)',
+                                        transition: 'transform ease 95ms',
+                                        background: 'transparent',
+                                    }
+                                    : { transform: 'rotate(0deg)', background: 'transparent' }
                             }
                         >
                             {icon}
-                        </div>}
+                        </div>
+                    }
                 />
             }
-            content={ //Body of Accordion
+            content={
+                //Body of Accordion
                 <CardRef
-                    theme={theme}
                     customStyles={customStylesAccordionContent}
                     type={'accordionContent'}
                     ref={contentRef}
                     // contentIsOpen={contentIsOpen}
                     {...props}
                     style={
-                        contentIsOpen ? { height: contentRef.current.scrollHeight + 'px', } : { height: '0px', borderBottom: 'none' }
+                        contentIsOpen
+                            ? { height: contentRef.current.scrollHeight + 'px' }
+                            : { height: '0px', borderBottom: 'none' }
                     }
                     content={content}
-                />}
+                />
+            }
         />
     );
 };
 
 AccordionSB.propTypes = {
-    /**
-     * Theme object
-     */
-    theme: PropTypes.object,
     /**
      * Custom style for the Container
      */
@@ -146,7 +145,7 @@ AccordionSB.propTypes = {
      */
     toggleIconAnimation: PropTypes.bool,
     /**
-     * Icon to apply rotation animation when toggle accordion 
+     * Icon to apply rotation animation when toggle accordion
      */
     icon: PropTypes.any,
     /**
@@ -160,9 +159,6 @@ AccordionSB.propTypes = {
 };
 
 AccordionSB.defaultProps = {
-    theme: defaultStyles,
     contentToggle: 'Toggle',
-    content: 'Content'
-
-};
-
+    content: 'Content',
+};

package/components/Accordion/AccordionSBfooter.js

@@ -1,14 +1,12 @@
-import React, { useState, useEffect, useRef, useMemo } from "react";
 import PropTypes from 'prop-types';
-import defaultStyles from '../constants/defaultStyle';
-import { Card, CardRef } from "../Cards";
+import React, { useEffect, useRef, useState } from 'react';
+import { Card, CardRef } from '../Cards';
 
 /**
  * Primary UI component for user interaction
  */
 
- export const AccordionSBfooter = ({
-    theme,
+export const AccordionSBfooter = ({
     customStylesAccordionContainer,
     customStylesAccordionTogggle,
     customStylesAccordionIcon,
@@ -22,14 +20,13 @@ import { Card, CardRef } from "../Cards";
     handleClick,
     isAccordionOpen,
     disable,
-    ...props }) => {
-
+    ...props
+}) => {
     const [contentIsOpen, setContentIsOpen] = useState(false);
     const contentRef = useRef(null); //Used to get the height of the content
 
-    const [customStylesContainer, setCustomStylesContainer] = useState({})
-    const [customStylesTogggle, setCustomStylesTogggle] = useState({})
-
+    const [customStylesContainer, setCustomStylesContainer] = useState({});
+    const [customStylesTogggle, setCustomStylesTogggle] = useState({});
 
     useEffect(() => {
         if (isSelected) {
@@ -39,9 +36,8 @@ import { Card, CardRef } from "../Cards";
                     backgroundColor: '#2444d8',
                     marginBottom: '15.5px',
                     marginTop: index !== 0 ? '15.5px' : '0px',
-
-                }
-            })
+                };
+            });
             setCustomStylesTogggle((prev) => {
                 return {
                     ...prev,
@@ -49,85 +45,88 @@ import { Card, CardRef } from "../Cards";
                     paddingTop: '14px',
                     paddingBottom: '14px',
                     paddingLeft: '14px',
-
-                }
-            })
-
-
+                };
+            });
         } else {
-            setCustomStylesContainer({})
-            setCustomStylesTogggle({})
+            setCustomStylesContainer({});
+            setCustomStylesTogggle({});
         }
-    }, [isSelected])
+    }, [isSelected]);
     // console.log("customStylesContainer", customStylesContainer)
 
     useEffect(() => {
         if (isAccordionOpen) {
-            setContentIsOpen(true)
+            setContentIsOpen(true);
         } else {
-            setContentIsOpen(false)
+            setContentIsOpen(false);
         }
-
-    }, [isAccordionOpen])
+    }, [isAccordionOpen]);
 
     return (
         <Card
-            theme={theme}
-            customStyles={{ ...customStylesAccordionContainer, ...customStylesContainer }}
+            customStyles={{
+                ...customStylesAccordionContainer,
+                ...customStylesContainer,
+            }}
             type={'accordionContainer'}
             {...props}
-            header={ //Header of Accordion
+            header={
+                //Header of Accordion
                 <Card
-                    theme={theme}
-                    customStyles={{ ...customStylesAccordionTogggle, ...customStylesTogggle }}
+                    customStyles={{
+                        ...customStylesAccordionTogggle,
+                        ...customStylesTogggle,
+                    }}
                     type={'accordionToggle'}
                     {...props}
                     // onClick={() => { setContentIsOpen(!contentIsOpen) }}
                     onClick={() => {
-                        if (disable) return
+                        if (disable) return;
                         if (!contentIsOpen) {
-                            handleClick(index)
+                            handleClick(index);
                         }
-                        setContentIsOpen(!contentIsOpen)
-
-
+                        setContentIsOpen(!contentIsOpen);
                     }}
                     header={contentToggle} //Label of the toggle
-                    content={ //Icon of the toggle
+                    content={
+                        //Icon of the toggle
                         <div
-                            theme={theme}
                             style={
-                                toggleIconAnimation &&
-                                    contentIsOpen ? { transform: 'rotate(180deg)', transition: 'transform ease 95ms', background: 'transparent' } :
-                                    { transform: 'rotate(0deg)', background: 'transparent' }
+                                toggleIconAnimation && contentIsOpen
+                                    ? {
+                                        transform: 'rotate(180deg)',
+                                        transition: 'transform ease 95ms',
+                                        background: 'transparent',
+                                    }
+                                    : { transform: 'rotate(0deg)', background: 'transparent' }
                             }
                         >
                             {icon}
-                        </div>}
+                        </div>
+                    }
                 />
             }
-            content={ //Body of Accordion
+            content={
+                //Body of Accordion
                 <CardRef
-                    theme={theme}
                     customStyles={customStylesAccordionContent}
                     type={'accordionContent'}
                     ref={contentRef}
                     // contentIsOpen={contentIsOpen}
                     {...props}
                     style={
-                        contentIsOpen ? { height: contentRef.current.scrollHeight + 'px', } : { height: '0px', borderBottom: 'none' }
+                        contentIsOpen
+                            ? { height: contentRef.current.scrollHeight + 'px' }
+                            : { height: '0px', borderBottom: 'none' }
                     }
                     content={content}
-                />}
+                />
+            }
         />
     );
 };
 
 AccordionSBfooter.propTypes = {
-    /**
-     * Theme object
-     */
-    theme: PropTypes.object,
     /**
      * Custom style for the Container
      */
@@ -149,7 +148,7 @@ AccordionSBfooter.propTypes = {
      */
     toggleIconAnimation: PropTypes.bool,
     /**
-     * Icon to apply rotation animation when toggle accordion 
+     * Icon to apply rotation animation when toggle accordion
      */
     icon: PropTypes.any,
     /**
@@ -163,9 +162,6 @@ AccordionSBfooter.propTypes = {
 };
 
 AccordionSBfooter.defaultProps = {
-    theme: defaultStyles,
     contentToggle: 'Toggle',
-    content: 'Content'
-
-};
-
+    content: 'Content',
+};

package/components/ArrowBar/ArrowBar.js

@@ -1,5 +1,5 @@
-import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
+import React, { useEffect, useRef, useState } from 'react';
 import styled, { css, useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 
@@ -145,7 +145,7 @@ const StyledArrowContent = styled.div`
 `;
 
 export const ArrowBar = ({ variant, data, scroll, onClick, clickable, ...props }) => {
-    const theme = useTheme() || defaultThemeColor;
+    const activeTheme = useTheme() || defaultThemeColor;
 
     const arrowBarRef = useRef(null)
     const arrowRef = useRef(null)
@@ -228,11 +228,11 @@ export const ArrowBar = ({ variant, data, scroll, onClick, clickable, ...props }
     };
 
     return (
-        <StyledArrowBar variant={variant} ref={scroll ? null : arrowBarRef} arrowNumber={data.length} scroll={scroll} >
+        <StyledArrowBar theme={activeTheme} variant={variant} ref={scroll ? null : arrowBarRef} arrowNumber={data.length} scroll={scroll} >
             {data.map((singleData, index) => {
                 return (
                     // Add the ref to the Arrow with the longest text label + value
-                    <StyledArrow 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 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>
                 )
@@ -246,10 +246,7 @@ ArrowBar.propTypes = {
      * Color of the arrows text. primary-1, 2, error, etc.
      */
     variant: PropTypes.string,
-    /**
-     * Theme object
-     */
-    theme: PropTypes.object,
+
     /**
      * Array of data. Each element of the array is an object in this format:
      * { value: 16, label: "Complete", color: '#34cc73' },
@@ -270,24 +267,10 @@ ArrowBar.propTypes = {
     clickable: PropTypes.bool,
 }
 
-StyledArrowBar.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-StyledArrow.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-StyledArrowContent.defaultProps = {
-    theme: defaultThemeColor,
-}
-
 ArrowBar.defaultProps = {
-    theme: defaultThemeColor,
     variant: null,
     data: [],
     scroll: true,
     onClick: undefined,
     clickable: false
-}
-
+}