groundfloor-react-ui 1.0.0

package/assets/icons/triangle-down.svg

@@ -0,0 +1,3 @@
+<svg width="9" height="7" viewBox="0 0 9 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.271484 0.153671H8.27148L4.27148 6.15367L0.271484 0.153671Z" fill="#081348"/>
+</svg>

package/assets/icons/users.svg

@@ -0,0 +1,11 @@
+<svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_230_6893)">
+<path d="M10.9998 0.923828C5.45056 0.923828 0.916504 5.4581 0.916504 11.0072C0.916504 16.5562 5.42782 21.0905 10.9998 21.0905C16.5719 21.0905 21.0832 16.5792 21.0832 11.0072C21.0832 5.43515 16.5489 0.923828 10.9998 0.923828ZM5.78904 18.0004C6.87183 16.1504 8.87931 14.9552 11.0449 14.9552C13.2105 14.9552 15.1958 16.1057 16.2786 17.9556C14.8127 19.0613 12.9854 19.738 11.0228 19.738C9.0374 19.7371 7.23304 19.0833 5.78904 18.0005V18.0004ZM17.2936 17.053C15.9402 14.9103 13.6165 13.6245 11.0449 13.6245C8.496 13.6245 6.10478 14.978 4.77404 17.0987C3.24038 15.5193 2.29294 13.3765 2.29294 11.008C2.2701 6.20241 6.1953 2.27731 11.0001 2.27731C15.8048 2.27731 19.7299 6.20241 19.7299 11.0072C19.7299 13.3529 18.8053 15.4737 17.2936 17.053V17.053Z" fill="#2E56F4"/>
+<path d="M10.9997 5.07471C9.03716 5.07471 7.41309 6.67604 7.41309 8.66133C7.41309 10.6239 9.01442 12.2479 10.9997 12.2479C12.985 12.2479 14.5863 10.6466 14.5863 8.66133C14.5863 6.67604 12.9621 5.07471 10.9997 5.07471ZM10.9997 10.8719C9.78157 10.8719 8.76657 9.87968 8.76657 8.6388C8.76657 7.42067 9.75883 6.40567 10.9997 6.40567C12.2406 6.40567 13.2328 7.39793 13.2328 8.6388C13.2328 9.87968 12.2177 10.8719 10.9997 10.8719Z" fill="#2E56F4"/>
+</g>
+<defs>
+<clipPath id="clip0_230_6893">
+<rect width="22" height="22" fill="white" transform="translate(0 0.00714111)"/>
+</clipPath>
+</defs>
+</svg>

package/assets/icons/view.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.6519 8.31959C17.7015 3.79111 14.0323 0.981323 10.0735 0.981323C6.11473 0.981323 2.44559 3.79111 0.49516 8.31959C0.441993 8.44141 0.414551 8.5729 0.414551 8.70581C0.414551 8.83873 0.441993 8.97022 0.49516 9.09204C2.44559 13.6205 6.11473 16.4303 10.0735 16.4303C14.0323 16.4303 17.7015 13.6205 19.6519 9.09204C19.7051 8.97022 19.7325 8.83873 19.7325 8.70581C19.7325 8.5729 19.7051 8.44141 19.6519 8.31959ZM10.0735 14.4992C7.0127 14.4992 4.11602 12.288 2.44559 8.70581C4.11602 5.12358 7.0127 2.91245 10.0735 2.91245C13.1344 2.91245 16.031 5.12358 17.7015 8.70581C16.031 12.288 13.1344 14.4992 10.0735 14.4992ZM10.0735 4.84357C9.30965 4.84357 8.56292 5.07009 7.92778 5.49447C7.29264 5.91886 6.7976 6.52206 6.50528 7.2278C6.21296 7.93353 6.13647 8.7101 6.2855 9.4593C6.43452 10.2085 6.80236 10.8967 7.34251 11.4368C7.88265 11.977 8.57084 12.3448 9.32004 12.4938C10.0692 12.6429 10.8458 12.5664 11.5515 12.2741C12.2573 11.9817 12.8605 11.4867 13.2849 10.8516C13.7093 10.2164 13.9358 9.4697 13.9358 8.70581C13.9358 7.68148 13.5289 6.69911 12.8045 5.97479C12.0802 5.25048 11.0979 4.84357 10.0735 4.84357ZM10.0735 10.6369C9.69159 10.6369 9.31823 10.5237 9.00066 10.3115C8.68308 10.0993 8.43557 9.79769 8.2894 9.44482C8.14324 9.09196 8.105 8.70367 8.17951 8.32907C8.25403 7.95447 8.43795 7.61038 8.70802 7.34031C8.97809 7.07023 9.32218 6.88631 9.69679 6.8118C10.0714 6.73728 10.4597 6.77553 10.8125 6.92169C11.1654 7.06785 11.467 7.31537 11.6792 7.63294C11.8914 7.95051 12.0047 8.32387 12.0047 8.70581C12.0047 9.21798 11.8012 9.70917 11.439 10.0713C11.0769 10.4335 10.5857 10.6369 10.0735 10.6369Z" fill="#2A50FD"/>
+</svg>

package/assets/icons/watcher.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.656738 6.70582C0.656738 6.70582 4.63454 0.455765 10.3157 0.455765C16.0544 0.455765 19.9747 6.70582 19.9747 6.70582C19.9747 6.70582 17.1336 12.9559 10.3157 12.9559C3.55432 12.9559 0.656738 6.70582 0.656738 6.70582ZM6.33889 6.70581C6.33889 8.92161 8.0998 10.6825 10.3156 10.6825C12.5314 10.6825 14.2923 8.92161 14.2923 6.70581C14.2923 4.49001 12.5314 2.7291 10.3156 2.7291C8.0998 2.7291 6.33889 4.49001 6.33889 6.70581ZM10.3157 8.41028C11.2574 8.41028 12.0201 7.64753 12.0201 6.70582C12.0201 5.76411 11.2574 5.00136 10.3157 5.00136C9.37395 5.00136 8.6112 5.76411 8.6112 6.70582C8.6112 7.64753 9.37395 8.41028 10.3157 8.41028Z" fill="#2A50FD"/>
+</svg>

package/assets/icons/zoom-in-white.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#fff;}</style></defs><path class="cls-1" d="M22.6,10.6H13.4V1.4a1.4,1.4,0,1,0-2.8,0v9.2H1.4a1.4,1.4,0,1,0,0,2.8h9.2v9.2a1.4,1.4,0,1,0,2.8,0V13.4h9.2a1.4,1.4,0,0,0,0-2.8Z" transform="translate(0 0)"/></svg>

package/components/Accordion/Accordion.js

@@ -0,0 +1,114 @@
+import React, { useState, useRef } from "react";
+import PropTypes from 'prop-types';
+import defaultStyles from '../constants/defaultStyle';
+import { Card, CardRef } from "../Cards";
+
+/**
+ * Primary UI component for user interaction
+ */
+
+export const Accordion = ({
+    theme,
+    customStylesAccordionContainer,
+    customStylesAccordionTogggle,
+    customStylesAccordionIcon,
+    customStylesAccordionContent,
+    toggleIconAnimation,
+    icon,
+    content,
+    contentToggle,
+    ...props }) => {
+
+    const [contentIsOpen, setContentIsOpen] = useState(false);
+    const contentRef = useRef(null); //Used to get the height of the content
+
+    return (
+        <Card
+            theme={theme}
+            customStyles={customStylesAccordionContainer}
+            type={'accordionContainer'}
+            {...props}
+            header={
+                <Card
+                    theme={theme}
+                    customStyles={customStylesAccordionTogggle}
+                    type={'accordionToggle'}
+                    {...props}
+                    onClick={() => { setContentIsOpen(!contentIsOpen) }}
+                    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)', background: 'transparent' }
+                            }
+                        >
+                            {icon}
+                        </div>}
+                />
+            }
+            content={
+                <CardRef
+                    theme={theme}
+                    customStyles={customStylesAccordionContent}
+                    type={'accordionContent'}
+                    ref={contentRef}
+                    // contentIsOpen={contentIsOpen}
+                    {...props}
+                    style={
+                        contentIsOpen ? { height: contentRef.current.scrollHeight + 'px', } : { height: '0px', borderBottom: 'none' }
+                    }
+                    content={content}
+                />}
+        />
+    );
+};
+
+Accordion.propTypes = {
+    /**
+     * Theme object
+     */
+    theme: PropTypes.object,
+    /**
+     * Custom style for the Container
+     */
+    customStylesAccordionContainer: PropTypes.object,
+    /**
+     * Custom style for the Toggle
+     */
+    customStylesAccordionTogggle: PropTypes.object,
+    /**
+     * Custom style for the Icon
+     */
+    customStylesAccordionIcon: PropTypes.object,
+    /**
+     * Custom style for the Content
+     */
+    customStylesAccordionContent: PropTypes.object,
+    /**
+     * Toggle icon animation if false the icon does not rotate
+     */
+    toggleIconAnimation: PropTypes.bool,
+    /**
+     * Icon to apply rotation animation when toggle accordion 
+     */
+    icon: PropTypes.any,
+    /**
+     * Element to be inside the content of the accordion
+     */
+    content: PropTypes.any,
+    /**
+     * String or element to be display in the header of the accordion
+     */
+    contentToggle: PropTypes.any,
+};
+
+Accordion.defaultProps = {
+    theme: defaultStyles,
+    contentToggle: 'Toggle',
+    content: 'Content'
+
+};
+

package/components/Accordion/AccordionSB.js

@@ -0,0 +1,168 @@
+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";
+
+/**
+ * Primary UI component for user interaction
+ */
+
+ export const AccordionSB = ({
+    theme,
+    customStylesAccordionContainer,
+    customStylesAccordionTogggle,
+    customStylesAccordionIcon,
+    customStylesAccordionContent,
+    toggleIconAnimation,
+    icon,
+    content,
+    contentToggle,
+    isSelected,
+    index,
+    handleClick,
+    isAccordionOpen,
+    ...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({})
+
+
+    useEffect(() => {
+        if (isSelected) {
+            setCustomStylesContainer((prev) => {
+                return {
+                    ...prev,
+                    backgroundColor: '#2444d8',
+                    marginBottom: '15.5px',
+                    marginTop: index !== 0 ? '15.5px' : '0px',
+
+                }
+            })
+            setCustomStylesTogggle((prev) => {
+                return {
+                    ...prev,
+                    backgroundColor: '#2444d8',
+                    paddingTop: '14px',
+                    paddingBottom: '14px',
+                    paddingLeft: '14px',
+                }
+            })
+
+
+        } else {
+            setCustomStylesContainer({})
+            setCustomStylesTogggle({})
+        }
+    }, [isSelected])
+
+    useEffect(() => {
+        if (isAccordionOpen) {
+            setContentIsOpen(true)
+        } else {
+            setContentIsOpen(false)
+        }
+
+    }, [isAccordionOpen])
+
+    return (
+        <Card
+            theme={theme}
+            customStyles={{ ...customStylesAccordionContainer, ...customStylesContainer }}
+            type={'accordionContainer'}
+            {...props}
+            header={ //Header of Accordion
+                <Card
+                    theme={theme}
+                    customStyles={{ ...customStylesAccordionTogggle, ...customStylesTogggle }}
+                    type={'accordionToggle'}
+                    {...props}
+                    // onClick={() => { setContentIsOpen(!contentIsOpen) }}
+                    onClick={() => {
+                        if (!contentIsOpen) {
+                            handleClick(index)
+                        }
+                        setContentIsOpen(!contentIsOpen)
+
+
+                    }}
+                    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)', background: 'transparent' }
+                            }
+                        >
+                            {icon}
+                        </div>}
+                />
+            }
+            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' }
+                    }
+                    content={content}
+                />}
+        />
+    );
+};
+
+AccordionSB.propTypes = {
+    /**
+     * Theme object
+     */
+    theme: PropTypes.object,
+    /**
+     * Custom style for the Container
+     */
+    customStylesAccordionContainer: PropTypes.object,
+    /**
+     * Custom style for the Toggle
+     */
+    customStylesAccordionTogggle: PropTypes.object,
+    /**
+     * Custom style for the Icon
+     */
+    customStylesAccordionIcon: PropTypes.object,
+    /**
+     * Custom style for the Content
+     */
+    customStylesAccordionContent: PropTypes.object,
+    /**
+     * Toggle icon animation if false the icon does not rotate
+     */
+    toggleIconAnimation: PropTypes.bool,
+    /**
+     * Icon to apply rotation animation when toggle accordion 
+     */
+    icon: PropTypes.any,
+    /**
+     * Element to be inside the content of the accordion
+     */
+    content: PropTypes.any,
+    /**
+     * String or element to be display in the header of the accordion
+     */
+    contentToggle: PropTypes.any,
+};
+
+AccordionSB.defaultProps = {
+    theme: defaultStyles,
+    contentToggle: 'Toggle',
+    content: 'Content'
+
+};
+

package/components/Accordion/AccordionSBfooter.js

@@ -0,0 +1,171 @@
+import React, { useState, useEffect, useRef, useMemo } from "react";
+import PropTypes from 'prop-types';
+import defaultStyles from '../constants/defaultStyle';
+import { Card, CardRef } from "../Cards";
+
+/**
+ * Primary UI component for user interaction
+ */
+
+ export const AccordionSBfooter = ({
+    theme,
+    customStylesAccordionContainer,
+    customStylesAccordionTogggle,
+    customStylesAccordionIcon,
+    customStylesAccordionContent,
+    toggleIconAnimation,
+    icon,
+    content,
+    contentToggle,
+    isSelected,
+    index,
+    handleClick,
+    isAccordionOpen,
+    disable,
+    ...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({})
+
+
+    useEffect(() => {
+        if (isSelected) {
+            setCustomStylesContainer((prev) => {
+                return {
+                    ...prev,
+                    backgroundColor: '#2444d8',
+                    marginBottom: '15.5px',
+                    marginTop: index !== 0 ? '15.5px' : '0px',
+
+                }
+            })
+            setCustomStylesTogggle((prev) => {
+                return {
+                    ...prev,
+                    backgroundColor: '#2444d8',
+                    paddingTop: '14px',
+                    paddingBottom: '14px',
+                    paddingLeft: '14px',
+
+                }
+            })
+
+
+        } else {
+            setCustomStylesContainer({})
+            setCustomStylesTogggle({})
+        }
+    }, [isSelected])
+    // console.log("customStylesContainer", customStylesContainer)
+
+    useEffect(() => {
+        if (isAccordionOpen) {
+            setContentIsOpen(true)
+        } else {
+            setContentIsOpen(false)
+        }
+
+    }, [isAccordionOpen])
+
+    return (
+        <Card
+            theme={theme}
+            customStyles={{ ...customStylesAccordionContainer, ...customStylesContainer }}
+            type={'accordionContainer'}
+            {...props}
+            header={ //Header of Accordion
+                <Card
+                    theme={theme}
+                    customStyles={{ ...customStylesAccordionTogggle, ...customStylesTogggle }}
+                    type={'accordionToggle'}
+                    {...props}
+                    // onClick={() => { setContentIsOpen(!contentIsOpen) }}
+                    onClick={() => {
+                        if (disable) return
+                        if (!contentIsOpen) {
+                            handleClick(index)
+                        }
+                        setContentIsOpen(!contentIsOpen)
+
+
+                    }}
+                    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)', background: 'transparent' }
+                            }
+                        >
+                            {icon}
+                        </div>}
+                />
+            }
+            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' }
+                    }
+                    content={content}
+                />}
+        />
+    );
+};
+
+AccordionSBfooter.propTypes = {
+    /**
+     * Theme object
+     */
+    theme: PropTypes.object,
+    /**
+     * Custom style for the Container
+     */
+    customStylesAccordionContainer: PropTypes.object,
+    /**
+     * Custom style for the Toggle
+     */
+    customStylesAccordionTogggle: PropTypes.object,
+    /**
+     * Custom style for the Icon
+     */
+    customStylesAccordionIcon: PropTypes.object,
+    /**
+     * Custom style for the Content
+     */
+    customStylesAccordionContent: PropTypes.object,
+    /**
+     * Toggle icon animation if false the icon does not rotate
+     */
+    toggleIconAnimation: PropTypes.bool,
+    /**
+     * Icon to apply rotation animation when toggle accordion 
+     */
+    icon: PropTypes.any,
+    /**
+     * Element to be inside the content of the accordion
+     */
+    content: PropTypes.any,
+    /**
+     * String or element to be display in the header of the accordion
+     */
+    contentToggle: PropTypes.any,
+};
+
+AccordionSBfooter.defaultProps = {
+    theme: defaultStyles,
+    contentToggle: 'Toggle',
+    content: 'Content'
+
+};
+

package/components/Accordion/index.js

@@ -0,0 +1,4 @@
+export * from './Accordion';
+export * from './AccordionSB';
+export * from './AccordionSBfooter';
+