groundfloor-react-ui 1.0.0

package/components/Form/StyledComponent.js

@@ -0,0 +1,323 @@
+/* eslint-disable no-unused-expressions */
+import styled from "styled-components";
+
+export const PageContent = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: calc(100vh - 130px);
+
+  button:hover,
+  button:active,
+  button:focus {
+    outline: none;
+  }
+`;
+
+export const StyledRowSearch = styled.div`
+  position: relative;
+  display: flex;
+  width: 100%;
+  padding: 25px;
+  column-gap: 18px;
+  align-items: flex-start;
+  box-sizing: border-box;
+  background: linear-gradient(
+    0deg,
+    hsla(0, 0%, 100%, 1) 20%,
+    hsla(0, 0%, 100%, 0.5) 100%
+  );
+  border-radius: 6px;
+
+  @media (max-width: 900px) {
+    flex-wrap: wrap;
+    height: fit-content;
+    padding-bottom: 25.5px;
+  }
+
+  @media (max-width: 800px) {
+    flex-wrap: nowrap;
+    padding-bottom: 25.5px;
+    align-items: stretch;
+
+    & > div:nth-child(2) {
+      margin-top: 26px;
+    }
+
+    & > span {
+      margin-top: 26px;
+    }
+
+    & > * {
+      flex-basis: unset;
+    }
+  }
+
+  @media (max-width: 650px) {
+    padding-top: 35px;
+    padding-right: 39px;
+  }
+
+  & label {
+    font-size: 14px;
+    // padding-bottom: 10px;
+    margin-bottom: 0;
+  }
+
+  & first-child {
+    &::placeholder {
+      color: #a9b1b8;
+    }
+  }
+
+  .single-select {
+    flex-basis: 177px;
+
+    @media (max-width: 800px) {
+      flex-basis: unset;
+    }
+  }
+
+  .selection-side {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    right: 39px;
+    top: 25.5px;
+
+    svg {
+      fill: ${({ defaultThemeColor }) =>
+    defaultThemeColor.variant["primary-2"]};
+
+      path {
+        fill: ${({ defaultThemeColor }) =>
+    defaultThemeColor.variant["primary-2"]};
+      }
+    }
+
+    @media (max-width: 800px) {
+      margin-right: 0;
+      margin-top: 0;
+    }
+  }
+`;
+
+export const StyledClearSearch = styled.span`
+  color: #2e56f4;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 17px;
+  cursor: pointer;
+  margin-top: 37px;
+  margin-right: 65px;
+  white-space: nowrap;
+`;
+
+export const StyledCentralBar = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  max-width: 1340px;
+  width: 100%;
+  align-items: center;
+`;
+export const StyledWarning = styled.div`
+  position: absolute;
+  font-size: 12px;
+  border-radius: 50%;
+  right: 0;
+  background-color: red;
+  min-width: 20px;
+  min-height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 4ch;
+  height: 4ch;
+  padding: 0px;
+  transform: translate(30%, -30%);
+  color: white;
+  font-weight: 600;
+`;
+
+export const StyledCreateRow = styled.div`
+  width: 90%;
+`;
+
+export const StyledRow = styled.div`
+  background: linear-gradient(
+    0deg,
+    hsla(0, 0%, 100%, 1) 20%,
+    hsla(0, 0%, 100%, 0.5) 100%
+  );
+  width: 90%;
+`;
+
+export const StyledSearchRow = styled.div`
+  width: 90%;
+`;
+
+export const ActionContainer = styled.div`
+  display: flex;
+  margin-left: auto !important;
+  margin-right: auto !important;
+  cursor: pointer;
+`;
+
+export const OverlayOptionContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 180px;
+  background: #ffffff;
+  box-shadow: 0px 5px 37px rgba(56, 66, 100, 0.15);
+  border-radius: 6px;
+  margin-right: 0.5rem;
+  z-index: 999;
+`;
+
+export const OverlayOptionItemLabel = styled.div`
+  margin: 10.5px 13px;
+  padding: 0;
+`;
+
+export const ActionItem = styled.div`
+  color: #081348;
+  padding: 7.7px 6.5px 7.7px 24px;
+  margin: 2.5px 13px;
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 15px;
+
+  &:last-child {
+    margin-bottom: 1rem;
+  }
+
+  position: relative;
+
+  &:hover {
+    background: #eaeefe;
+    border-radius: 5px;
+  }
+`;
+
+export const FormContainer = styled.div`
+  position: relative;
+  padding: 25px;
+  z-index: 2;
+  display: flex;
+  width: 100%;
+  column-gap: 18px;
+  align-items: center;
+  box-sizing: border-box;
+  background: linear-gradient(
+    0deg,
+    hsla(0, 0%, 100%, 1) 20%,
+    hsla(0, 0%, 100%, 0.5) 100%
+  );
+  border-radius: 6px;
+  // margin-bottom: 25px;
+
+  @media (max-width: 900px) {
+    flex-wrap: wrap;
+    height: fit-content;
+    padding-bottom: 25.5px;
+  }
+
+  @media (max-width: 800px) {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    padding-bottom: 25.5px;
+    align-items: stretch;
+
+    & > div:nth-child(2) {
+      margin-top: 26px;
+    }
+
+    & > span {
+      margin-top: 26px;
+    }
+
+    & > * {
+      flex-basis: unset;
+    }
+  }
+
+  @media (max-width: 650px) {
+    padding-top: 35px;
+    padding-right: 39px;
+  }
+
+  & label {
+    font-size: 14px;
+    // padding-bottom: 10px;
+    margin-bottom: 0;
+  }
+
+  & first-child {
+    &::placeholder {
+      color: #a9b1b8;
+    }
+  }
+
+  .single-select {
+    flex-basis: 177px;
+
+    @media (max-width: 800px) {
+      flex-basis: unset;
+    }
+  }
+
+  .selection-side {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    right: 39px;
+    top: 25.5px;
+
+    svg {
+      fill: ${({ defaultThemeColor }) =>
+    defaultThemeColor.variant["primary-2"]};
+
+      path {
+        fill: ${({ defaultThemeColor }) =>
+    defaultThemeColor.variant["primary-2"]};
+      }
+    }
+
+    @media (max-width: 800px) {
+      margin-right: 0;
+      margin-top: 0;
+    }
+  }
+`;
+
+export const FormWrapper = styled.form`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+export const SubmitButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  
+  // custom styles
+    ${({ style }) => style}
+`;
+
+export const MultiColumnWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+{/*align-items: center;*/}
+  gap: 20px;
+`;
+
+export const MultiColumnDiv = styled.div`
+  width:50%;
+    width:  ${({ cols }) => { Math.floor(100 / cols) + '%' }};
+`;

package/components/Form/SubmitComponent.js

@@ -0,0 +1,63 @@
+import React, { Fragment, useState } from 'react'
+import { PrimaryButton, SecondaryButton } from '../Button';
+import { SubmitButtonContainer } from './StyledComponent';
+
+
+export const SubmitComponent = ({ formData, onSubmit, onReset, style, ...props }) => {
+
+    const SubmitInput = (item) => {
+        return (
+            <PrimaryButton
+                block={item.block}
+                style={item.style}
+                disabled={item.disabled}
+                type="submit"
+                children={item.children}
+                onClick={() => { item.onClick() }} />
+        )
+    }
+
+    const ResetInput = (item) => {
+        return (
+            <SecondaryButton
+                block={item.block}
+                disabled={props.disabled}
+                children={item.children}
+                onClick={() => { item.onClick() }} />
+        )
+    }
+
+    const CancelInput = (item) => {
+        return (
+            <SecondaryButton
+                block={item.block}
+                disabled={props.disabled}
+                children={item.children}
+                onClick={() => { item.onClick() }} />
+        )
+    }
+
+    const submitComponent = (item) => {
+        switch (item.type) {
+            case 'submit':
+                return SubmitInput(item)
+            case 'reset':
+                return ResetInput(item)
+            case 'cancel':
+                return CancelInput(item)
+            default:
+                break;
+        }
+    }
+    return <Fragment>
+        <SubmitButtonContainer style={style}>
+            {formData && formData.map((row, i) => {
+                return row.map((item, i) => {
+                    return submitComponent(item)
+                })
+            })}
+        </SubmitButtonContainer>
+    </Fragment>
+}
+
+

package/components/Form/index.js

@@ -0,0 +1,4 @@
+export * from './FormComponent';
+export * from './HeaderComponent';
+export * from './SubmitComponent';
+export * from './StyledComponent';

package/components/GroupAvatars/GroupAvatars.js

@@ -0,0 +1,143 @@
+import React from "react";
+import PropTypes from 'prop-types';
+import styled, { useTheme } from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
+import { Avatar } from '../Avatar'
+/**
+ * Primary UI component for user interaction
+ */
+
+const StyledContainer = styled.span`
+    background: transparent;
+    position: relative;
+    display: flex;
+    align-items: center;
+    
+    &>span:not(:first-of-type){
+        margin-left: -13px;
+    }
+`;
+
+const StyledQty = styled.p`
+    color: ${({ theme, variantQty }) => theme.variant[variantQty]};
+    margin: 0;
+    margin-left: 7px;
+    font-size: 16px;
+`;
+
+export const GroupAvatars = ({ items, block, size, variantCircle, variantName, variantQty, flagName, user, colorCircle, colorBorderCircle, ...props }) => {
+    const theme = useTheme() || defaultThemeColor;
+
+    return (
+        <StyledContainer block={block} {...props}>
+            {items?.map((user, i) => {
+
+                let customStylesCircle = {}
+                let customStylesImage = {}
+
+                if (colorCircle) {
+                    customStylesCircle.backgroundColor = `${theme.variant[colorCircle]}`
+                } else {
+                    customStylesCircle.backgroundColor = `${theme.variant[variantCircle]}`
+                }
+                if (i !== 0) {
+                    customStylesCircle.border = colorBorderCircle ? `2px solid ${colorBorderCircle}` : `2px solid ${theme.variant[variantCircle]}`
+                    customStylesImage.border = colorBorderCircle ? `2px solid ${colorBorderCircle}` : `2px solid ${theme.variant[variantCircle]}`
+                }
+
+                return (
+                    //If only one user display its avatar and the name
+                    (items.length === 1) ? (
+                        <Avatar
+                            key={user.id}
+                            // variantCircle={variantCircle}
+                            customStylesContainer={{ width: 'auto' }}
+                            customStylesName={{ color: `${theme.variant[{ variantName }]}` }}
+                            // block={false}
+                            size={size}
+                            toggleName={true}
+                            user={user}
+                            customStylesCircle={customStylesCircle}
+                            customStylesImage={customStylesImage}
+                        // customStylesCircle={colorCircle ? {backgroundColor: `${theme.variant[colorCircle]}`} : {backgroundColor: `${theme.variant[variantCircle]}`}}
+                        // colorBorderCircle={i !== 0 ? colorBorderCircle : colorCircle ? colorCircle : variantCircle}
+                        />) : (i <= 3) ? (
+                            //else display just the avatar
+                            <Avatar
+                                key={user.id}
+                                // variantCircle={variantCircle}
+                                // variantName={variantName}
+                                customStylesContainer={{ width: 'auto' }}
+                                customStylesName={{ color: `${theme.variant[{ variantName }]}` }}
+                                // block={false}
+                                size={size}
+                                toggleName={false}
+                                user={user}
+                                customStylesCircle={customStylesCircle}
+                                customStylesImage={customStylesImage}
+                            // colorCircle={colorCircle}
+                            // colorBorderCircle={i !== 0 ? colorBorderCircle : colorCircle ? colorCircle : variantCircle}
+                            />
+                            //display only 4 avatars if more than 4 users then just display the quantity
+                        ) : (null)
+                )
+            })}
+            {(items.length - 4) > 0 ? (<StyledQty variantQty={variantQty}>+{items.length - 4}</StyledQty>) : null}
+        </StyledContainer>
+    );
+};
+
+GroupAvatars.propTypes = {
+    /**
+     * Background color of circle base on variant. primary-1, 2, error, etc.
+     */
+    variantCircle: PropTypes.string,
+    /**
+     * Color of the text name base on variant. primary-1, 2, error, etc.
+     */
+    variantName: PropTypes.string,
+    /**
+     * How large should the Avatar be?
+     */
+    size: PropTypes.oneOf(['SM', 'MD', 'LG']),
+    /**
+     * 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,
+    /**
+     * Theme object
+     */
+    theme: PropTypes.object,
+    /**
+     * Optional Custom color of the circle
+     */
+    colorCircle: PropTypes.string,
+    /**
+     * Optional Custom color of the border circle (if missing no border displayed)
+     */
+    colorBorderCircle: PropTypes.string,
+    /**
+     * Optional variantQty color of the text for the quantity
+     */
+    variantQty: PropTypes.string,
+};
+
+StyledQty.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+GroupAvatars.defaultProps = {
+    theme: defaultThemeColor,
+    variantCircle: 'primary-1',
+    variantName: 'primary-2',
+    block: false,
+    size: 'MD',
+    flagName: false,
+    user: {
+        userName: "1",
+    },
+    colorCircle: null,
+    colorBorderCircle: "#FFFFFF",
+    variantQty: 'primary-1'
+};
+

package/components/GroupAvatars/index.js

@@ -0,0 +1 @@
+export * from './GroupAvatars';