groundfloor-react-ui 1.2.9 → 1.2.11

package/components/Avatar/AvatarSBfooter.js

@@ -1,279 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { useState } from "react";
-import styled, { css, useTheme } from 'styled-components';
-import defaultStyles from '../constants/defaultStyle';
-import defaultThemeColor from '../constants/defaultThemeColor';
-import { Image } from '../Images';
-
-/**
- * Primary UI component for user interaction
- */
-const StyledContainer = styled.span`
-
-${({ inBuiltCss, type, 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]) {
-                    tempObj[property] = inBuiltCss[type][property]
-                    delete inBuiltCss.common[property]
-
-                }
-            }
-            return { ...tempObj, ...customStyles };
-        }
-    }}
-  width: auto;
-`;
-
-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]) {
-                for (const property in inBuiltCss['common']) {
-                    tempObj[property] = inBuiltCss['common'][property];
-                }
-                for (const property in inBuiltCss[type]) {
-                    tempObj[property] = inBuiltCss[type][property];
-                    delete inBuiltCss.common[property];
-                }
-                for (const property in inBuiltCss[`${type}${size}`]) {
-                    tempObj[property] = inBuiltCss[`${type}${size}`][property];
-                    delete inBuiltCss.common[property];
-
-                }
-            }
-            return { ...tempObj, ...customStyles };
-        }
-    }}
-  ${({ isSelected, selectedStyle, notSelectedStyle }) => {
-        if (isSelected) {
-            return css`
-        ${selectedStyle}
-
-        min-width: 42px;
-        min-height: 42px;
-      `;
-        } else {
-            return css`
-        ${notSelectedStyle}
-      `;
-        }
-    }}
-    font-weight: 600;
-`;
-
-//Create the style for the Avatar
-
-//   let customStylesCircle = {}
-//   let customStylesContainer = {}
-//   customStylesCircle.border = app.userName === selectedApp.lev1 ? `2px solid rgba(255, 255, 255, 0.3)` : `2px solid #2240CB`
-//   customStylesCircle.backgroundColor = app.userName === selectedApp.lev1 ? '#1D36AD' : '#2240CB'
-//   customStylesCircle.width = app.userName === selectedApp.lev1 ? '42px' : '38px'
-//   customStylesCircle.height = app.userName === selectedApp.lev1 ? '42px' : '38px'
-//   customStylesCircle.fontWeight = '600'
-//   customStylesContainer.width = 'auto'
-//   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]) {
-                    delete inBuiltCss.common[property];
-                    tempObj[property] = inBuiltCss[type][property];
-                }
-                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]) {
-            //     for (const property in inBuiltCss['common']) {
-            //         tempObj[property] = inBuiltCss['common'][property]
-            //     }
-            //     for (const property in inBuiltCss[type]) {
-            //         delete inBuiltCss.common[property]
-            //         tempObj[property] = inBuiltCss[type][property]
-            //     }
-            //     for (const property in inBuiltCss[`${type}${size}`]) {
-            //         tempObj[property] = inBuiltCss[`${type}${size}`][property]
-            //         delete inBuiltCss.common[property]
-            //     }
-            // }
-            return { ...tempObj, ...customStylesHover };
-        }
-    }}
-  }
-`;
-
-export const AvatarSBfooter = ({
-
-    inBuiltCss,
-
-    customStylesContainer,
-    customStylesImage,
-    customStylesCircle,
-    customStylesName,
-    customStylesNameHover,
-    size,
-    toggleName,
-    user,
-    border,
-    selectedStyle,
-    notSelectedStyle,
-    isSelected,
-    value,
-    ...props
-}) => {
-
-    const activeTheme = useTheme() || defaultThemeColor;
-    const [avatarStatus, setAvatarStatus] = useState("loading");
-
-
-    const handleImageStatus = (imageStatus) => {
-        setAvatarStatus(imageStatus);
-    };
-    // console.log('user', user)
-    return (
-
-        <StyledContainer
-            border={border}
-            theme={activeTheme}
-            inBuiltCss={defaultStyles}
-            customStyles={customStylesContainer}
-            type={'avatarContainer'}
-            {...props}
-        >
-            {user?.url && (
-                <Image
-                    {...props}
-                    inBuiltCss={defaultStyles}
-                    customStyles={customStylesImage}
-                    type={'imageAvatar'}
-                    size={size}
-                    alt='user-picture'
-                    src={user.url}
-                    handleImageStatus={handleImageStatus}
-                    style={{
-                        visibility: avatarStatus !== 'loaded' ? 'hidden' : 'visible',
-                    }}
-                />
-            )}
-
-            <StyledCircle
-                {...props}
-                theme={activeTheme}
-                inBuiltCss={defaultStyles}
-
-                type={'avatarCircle'}
-                customStyles={customStylesCircle}
-                size={size}
-                style={{ visibility: avatarStatus !== 'loaded' ? 'visible' : 'hidden' }}
-                isSelected={isSelected}
-                selectedStyle={selectedStyle}
-                notSelectedStyle={notSelectedStyle}
-            >
-                {value}
-            </StyledCircle>
-
-            {toggleName && (
-                <StyledName
-                    theme={activeTheme}
-                    {...props}
-                    inBuiltCss={defaultStyles}
-                    type={'avatarName'}
-                    customStyles={customStylesName}
-                    customStylesHover={customStylesNameHover}
-                    size={size}
-                >
-                    {user.userName}{' '}
-                </StyledName>
-            )}
-
-        </StyledContainer>
-    );
-};
-
-AvatarSBfooter.propTypes = {
-    /**
-     * Custom style for circle
-     */
-    customStylesCircle: PropTypes.object,
-    /**
-     * Custom style for name
-     */
-    customStylesName: PropTypes.object,
-    /**
-     * Optional Custom color of the circle
-     */
-    customStylesContainer: PropTypes.object,
-    /**
-     * Optional Custom color of the border circle (if missing no border displayed)
-     */
-    customStylesImage: PropTypes.object,
-    /**
-     * Toggle name visibility
-     */
-    toggleName: PropTypes.bool,
-    /**
-     * 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,
-
-};
-
-AvatarSBfooter.defaultProps = {
-    /**
-     * inBuiltCss object
-     */
-    inBuiltCss: PropTypes.object,
-};
-
-AvatarSBfooter.defaultProps = {
-    inBuiltCss: defaultStyles,
-
-    block: false,
-    size: 'MD',
-    toggleName: false,
-    user: null,
-    customStylesContainer: null,
-    customStylesImage: null,
-    customStylesCircle: null,
-    customStylesName: null,
-};

package/components/Avatar/index.js

@@ -1,4 +0,0 @@
-export * from './Avatar';
-export * from './AvatarSB';
-export * from './AvatarSBfooter';
-

package/components/Banner/Banner.js

@@ -1,70 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled, { useTheme } from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
-
-const BannerWrapper = styled.div`
-  color: ${({ theme }) => theme.textColor};
-  display: flex;
-  background-color: ${({ backgroundColor, theme }) =>
-        backgroundColor ? backgroundColor : theme.variant['insight-purple']};
-  border-left: 5px solid
-    ${({ borderColor, theme }) =>
-        borderColor ? borderColor : theme.variant['graph-3']};
-  padding-left: 28px;
-  padding-top: 22px;
-  padding-bottom: 22px;
-  width: inherit;
-`;
-
-const BannerContent = styled.div`
-  color: ${({ theme }) => theme.textColor};
-  display: flex;
-  font-size: 16px;
-  text-align: left;
-  word-wrap: break-word;
-`;
-
-export const Banner = ({
-    backgroundColor,
-    borderColor,
-    variant,
-    children,
-    ...props
-}) => {
-    const activeTheme = useTheme() || defaultThemeColor;
-
-    return (
-        <>
-            <BannerWrapper
-                theme={activeTheme}
-                backgroundColor={backgroundColor}
-                borderColor={borderColor}
-                {...props}
-            >
-                <BannerContent theme={activeTheme} {...props}>
-                    {children}
-                </BannerContent>
-            </BannerWrapper>
-        </>
-    );
-};
-
-Banner.propTypes = {
-    /**
-     *	background color of the banner
-     */
-    backgroundColor: PropTypes.string,
-    /**
-     *	border color of the banner
-     */
-    borderColor: PropTypes.string,
-    /**
-     *	What will be rendered inside the bannaer
-     */
-    children: PropTypes.any,
-};
-
-Banner.defaultProps = {
-    children: '',
-};

package/components/Banner/index.js

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

package/components/Breadcrumb/Breadcrumb.js

@@ -1,225 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { useEffect, useRef, useState } from 'react';
-import styled, { css, useTheme } from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
-
-/**
- * Primary UI component for user interaction
- */
-
-const StyledBreadcrumb = styled.div`
-  background: transparent;
-  color: ${({ theme, variant }) => theme.variant[variant]};
-  font-size: ${({ isPrimary }) => (isPrimary ? '16px' : '14px')};
-  display: flex;
-  align-items: center;
-
-  ${({ isWrap }) => {
-    if (isWrap) {
-      return css`
-        width: ${({ block }) => (block ? 'auto' : 'fit-content')};
-        flex-wrap: wrap;
-        visibility: visible;
-      `;
-    } else {
-      return css`
-        border: 1px solid transparent;
-        overflow-x: auto;
-        overflow-y: hidden;
-        visibility: ${({ isBreadcrumbVisible }) =>
-          isBreadcrumbVisible ? 'visible' : 'hidden'};
-        /* Hide scrollbar for Chrome, Safari and Opera */
-        &::-webkit-scrollbar {
-          display: none;
-        }
-        /* Hide scrollbar for IE, Edge and Firefox */
-        &-ms-overflow-style: none; /* IE and Edge */
-        scrollbar-width: none; /* Firefox */
-      `;
-    }
-  }};
-
-  .breadcrumb-icon svg path {
-    fill: ${({ theme, variant }) => theme.variant[variant]};
-  }
-
-  .breadcrumb-icon-separator svg path {
-    fill: ${({ theme, variantSeparator }) => theme.variant[variantSeparator]};
-  }
-
-  .breadcrumb-icon-separator {
-    margin: 0 ${({ isPrimary }) => (isPrimary ? '12px' : '7px')};
-  }
-`;
-
-const StyledCombo = styled.div`
-  display: flex;
-  flex-wrap: nowrap;
-`;
-
-const StyledItem = styled.div`
-  cursor: ${({ href }) => (href ? 'pointer' : 'default')};
-  list-style: none;
-  color: ${({ theme, variant }) => theme.variant[variant]};
-  white-space: nowrap;
-  max-width: 15ch;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  &:hover {
-    text-decoration: ${({ href }) => (href ? 'underline' : 'none')};
-  }
-`;
-
-export const Breadcrumb = ({
-  wrap,
-  block,
-  style,
-  variant,
-  variantSeparator,
-  appLogo,
-  separator,
-  items,
-  onClick,
-  isPrimary,
-  ...props
-}) => {
-  const activeTheme = useTheme() || defaultThemeColor;
-
-  const breadcrumbRef = useRef(null);
-
-  const [isBreadcrumbVisible, setIsBreadcrumbVisible] = useState(undefined);
-
-  const handleWindowResize = () => {
-    if (
-      breadcrumbRef?.current?.scrollWidth < breadcrumbRef?.current?.offsetWidth
-    ) {
-      setIsBreadcrumbVisible(true);
-    } else {
-      setIsBreadcrumbVisible(false);
-    }
-  };
-
-  useEffect(() => {
-    handleWindowResize();
-  }, [items]);
-
-  //On component mount add event listener
-  useEffect(() => {
-    if (!wrap) {
-      // Monitor the width of the viewPort to adjust the text of the arrow accordingly
-      window.addEventListener('resize', handleWindowResize);
-      return () => window.removeEventListener('resize', handleWindowResize);
-    }
-  }, []);
-
-  const list = items
-    ? items.map((item, i) => {
-      return (
-        <StyledCombo key={item.label}>
-          {i === 0 && !appLogo ? null : (
-            <div className='breadcrumb-icon-separator'>{separator}</div>
-          )}
-          <StyledItem
-            id={item.id}
-            theme={activeTheme}
-            onClick={() => {
-              if (item.href) onClick(item.href);
-            }}
-            variant={variant}
-            href={item.href}
-            title={item.label}
-          >
-            {/* If label longer than 15chs trim it by css */}
-            {item.label}
-          </StyledItem>
-        </StyledCombo>
-      );
-    })
-    : null;
-
-  return (
-    <StyledBreadcrumb
-      theme={activeTheme}
-      isWrap={wrap}
-      ref={!wrap ? breadcrumbRef : null}
-      isBreadcrumbVisible={isBreadcrumbVisible}
-      block={block}
-      variant={variant}
-      variantSeparator={variantSeparator}
-      style={style}
-      isPrimary={isPrimary}
-      {...props}
-    >
-      {appLogo && <div className='breadcrumb-icon'>{appLogo}</div>}
-      {list}
-    </StyledBreadcrumb>
-  );
-};
-
-Breadcrumb.propTypes = {
-  /**
-   * Color of text. primary-1, 2, error, etc.
-   */
-  variant: PropTypes.string,
-  /**
-   * Color of separator. primary-1, 2, error, etc.
-   */
-  variantSeparator: PropTypes.string,
-  /**
-   * Click handler
-   */
-  onClick: PropTypes.func,
-  /**
-   * Optional Icon element with app icon
-   */
-  appLogo: PropTypes.any,
-  /**
-   * Optional Icon element with separator icon
-   */
-  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,
-  /**
-   * Optional width selector
-   */
-  block: PropTypes.bool,
-
-  /**
-   * If true wrap items when shrink else hide
-   */
-  wrap: PropTypes.bool,
-  /**
-   * If true bigger font and margin, if false it means secondary breadcrum with smaller font and less margin
-   */
-  isPrimary: PropTypes.bool,
-};
-
-Breadcrumb.defaultProps = {
-  variant: 'neutral-2',
-  variantSeparator: 'neutral-3',
-  block: false,
-  onClick: undefined,
-  wrap: false,
-  isPrimary: true,
-};

package/components/Breadcrumb/index.js

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