groundfloor-react-ui 1.2.8 → 1.2.10

package/components/Cards/DocumentCard.js

@@ -1,215 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled, { css, useTheme } from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
-
-/**
- * Primary UI component for user interaction
- */
-
-const sizes = {
-  sm: {
-    cardWidth: '178px',
-    cardMinHeight: '88px',
-    borderRadius: '4px',
-    border: '0.7px',
-    bodyHeight: '55px',
-    footerFontSize: '10px',
-    footerMinHeight: '31px',
-    footerPadding: '10.5px 16px',
-    footerLineHeight: '16px',
-    lineHeight: '12px',
-  },
-  md: {
-    cardWidth: '215px',
-    cardMinHeight: '123px',
-    borderRadius: '6px',
-    border: '1px',
-    bodyHeight: '67px',
-    footerFontSize: '14px',
-    footerMinHeight: '54px',
-    footerPadding: '18px 19px',
-    footerLineHeight: '12px',
-    lineHeight: '16px',
-  },
-};
-
-const StyledDocumentCard = styled.div`
-  ${({ trimFileName }) => {
-    if (trimFileName) {
-      return css`
-        height: ${({ size }) => sizes[size].cardMinHeight};
-      `;
-    } else {
-      return css`
-        min-height: ${({ size }) => sizes[size].cardMinHeight};
-      `;
-    }
-  }}
-  width: ${({ size }) => sizes[size].cardWidth};
-  border-radius: ${({ size }) => sizes[size].borderRadius};
-  border: ${({ size }) => sizes[size].border} solid
-    ${({ theme, variantBorder }) => theme.variant[variantBorder]};
-  box-sizing: border-box;
-
-  &:hover {
-    border: ${({ size }) => sizes[size].border} solid
-      ${({ theme, variantBorderHover }) => theme.variant[variantBorderHover]};
-    button {
-      &:hover {
-        opacity: 0.8;
-      }
-    }
-  }
-`;
-
-const StyledCardBody = styled.div`
-  display: flex;
-  justify-content: ${({ buttons }) =>
-    buttons !== '11' ? 'center' : 'space-between'};
-  align-items: center;
-  height: ${({ size }) => sizes[size].bodyHeight};
-  margin: 0;
-  padding: ${({ size }) => sizes[size].bodyPadding};
-  border: none;
-  border-top-left-radius: ${({ size }) => sizes[size].borderRadius};
-  border-top-right-radius: ${({ size }) => sizes[size].borderRadius};
-  background-color: ${({ theme, variantBgBody }) =>
-    theme.variant[variantBgBody]};
-  background: linear-gradient(
-      0deg,
-      rgba(226, 230, 245, 0.5),
-      rgba(226, 230, 245, 0.5)
-    )
-    ${({ bgUrl }) => (bgUrl ? `, url('/images/documentCardBG.png')` : null)};
-  background-size: cover;
-  box-sizing: border-box;
-`;
-
-const StyledCardFooter = styled.div`
-  ${({ trimFileName }) => {
-    if (trimFileName) {
-      return css`
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        height: ${({ size }) => sizes[size].footerMinHeight};
-      `;
-    } else {
-      return css`
-        display: flex;
-        align-items: center;
-        min-height: ${({ size }) => sizes[size].footerMinHeight};
-        overflow-wrap: anywhere;
-        hyphens: auto;
-      `;
-    }
-  }}
-  font-size: ${({ size }) => sizes[size].footerFontSize};
-  padding: ${({ size }) => sizes[size].footerPadding};
-  color: ${({ theme, variant }) => theme.variant[variant]};
-  background-color: ${({ theme, variantBgFooter }) =>
-    variantBgFooter ? theme.variant[variantBgFooter] : theme['bgColor']};
-  box-sizing: border-box;
-  line-height: ${({ size }) => sizes[size].lineHeight};
-  border-bottom-left-radius: inherit;
-  border-bottom-right-radius: inherit;
-`;
-export const DocumentCard = ({
-  variant,
-  variantBorder,
-  variantBorderHover,
-  variantBgBody,
-  variantBgFooter,
-  fileName,
-  bgUrl,
-  size,
-  trimFileName,
-  bodyContent,
-  ...props
-}) => {
-  const activeTheme = useTheme() || defaultThemeColor;
-
-  return (
-    <StyledDocumentCard
-      variantBorder={variantBorder}
-      variantBorderHover={variantBorderHover}
-      variantBgBody={variantBgBody}
-      size={size}
-      trimFileName={trimFileName}
-      theme={activeTheme}
-      {...props}
-    >
-      <StyledCardBody bgUrl={bgUrl} size={size} theme={activeTheme}>
-        {bodyContent}
-      </StyledCardBody>
-      <StyledCardFooter
-        theme={activeTheme}
-        title={fileName}
-        variant={variant}
-        variantBgFooter={variantBgFooter}
-        trimFileName={trimFileName}
-        size={size}
-      >
-        {fileName}
-      </StyledCardFooter>
-    </StyledDocumentCard>
-  );
-};
-
-DocumentCard.propTypes = {
-  /**
-   * Color of Footer text. primary-1, 2, error, etc.
-   */
-  variant: PropTypes.string,
-  /**
-   * Color of DocumentCard border. primary-1, 2, error, etc.
-   */
-  variantBorder: PropTypes.string,
-  /**
-   * Color of DocumentCard border on hover. primary-1, 2, error, etc.
-   */
-  variantBorderHover: PropTypes.string,
-  /**
-   * Color of Body background. primary-1, 2, error, etc.
-   */
-  variantBgBody: PropTypes.string,
-  /**
-   * Color of Footer background. primary-1, 2, error, etc.
-   */
-  variantBgFooter: PropTypes.string,
-  /**
-   * String to display in the footer
-   */
-  fileName: PropTypes.string,
-  /**
-   * Url of the picture to display as card body background
-   */
-  bgUrl: PropTypes.string,
-  /**
-   * Size of the card small or medium
-   */
-  size: PropTypes.oneOf(['sm', 'md']),
-  /**
-   * If true if the fimeName is longer than the width is trimmed. If false the fileName is wrapped and the footer expands vertically
-   */
-  trimFileName: PropTypes.bool,
-
-  /**
-   * Children component of the Card Body
-   */
-  bodyContent: PropTypes.element,
-};
-
-DocumentCard.defaultProps = {
-  variant: 'black',
-  variantBorder: 'neutral-5',
-  variantBorderHover: 'primary-1',
-  variantBgBody: 'neutral-4',
-  variantBgFooter: null,
-  fileName: '',
-  bgUrl: null,
-  size: 'md',
-  trimFileName: true,
-  bodyContent: null,
-};

package/components/Cards/index.js

@@ -1,5 +0,0 @@
-
-export * from './Card';
-export * from './CardRef';
-export * from './DocumentCard';
-

package/components/Content/Content.js

@@ -1,50 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled from 'styled-components';
-import defaultStyles from '../constants/defaultStyle';
-import getDefaultStyles from '../constants/utils';
-
-const ContentLayout = styled.div`
-    //Set the styles from the default styles object
-    ${({ theme, type }) => {
-        return getDefaultStyles(theme, type);
-    }}
-    @media (max-width: 980px) {
-        margin-left: 0px;
-    }
-    // custom styles
-    ${({ customStyles }) => customStyles}
-`;
-
-export const Content = ({ theme, type, customStyles, ...props }) => {
-    return (
-        <ContentLayout theme={theme} customStyles={customStyles} type={type} {...props}>
-            {props.children}
-        </ContentLayout>
-    )
-}
-
-
-
-Content.propTypes = {
-    /**
-     *	Theme props
-     */
-    theme: PropTypes.object,
-    /**
-     *	Custom style object
-     */
-    customStyles: PropTypes.object,
-    /**
-     *	type Content
-     */
-    type: PropTypes.string,
-}
-
-Content.defaultProps = {
-    theme: defaultStyles,
-    customStyles: null,
-    type: 'content'
-}
-
-

package/components/Content/index.js

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

package/components/DesignComponent/StyledComponent/StyledComponent.js

@@ -1,326 +0,0 @@
-import React from 'react';
-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: 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;
-
-  @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;
-  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;
-  
-  @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 SubmitButtonContainer = styled.div`
-  display: flex;
-  justify-content: end;
-`;
-
-export const MultiColumnWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  flex-direction: row;
-  align-items: flex-start;
-  gap: 20px;
-`;
-
-export const MultiColumnDiv = styled.div`
-  width: 48;
-  max-width: 48%;
-  min-width: 48%;
-  
-`;
-
-const Wrapper = styled.form`
-  width: 40vw;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  gap: 20px;
-  ${({ customStyles }) => customStyles}
-`;
-
-export const FormWrapper = ({ customStyles, children }) => {
-  return <Wrapper customStyles={customStyles}>{children}</Wrapper>;
-};

package/components/DesignComponent/StyledComponent/index.js

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

package/components/DesignComponent/index.js

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

package/components/Divider/Divider.js

@@ -1,56 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled, { useTheme } from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
-
-/**
- * Primary UI component for user interaction
- */
-
-const StyledDivider = styled.div`
-  display: ${({ vertical }) => (vertical ? 'inline-block' : 'block')};
-  background: ${({ theme, borderColor }) =>
-        borderColor ? borderColor : theme.neutral['neutral-5']};
-  content: '';
-  height: ${({ vertical, thickness, height }) =>
-        vertical ? height : thickness};
-  width: ${({ vertical, thickness }) => (vertical ? thickness : null)};
-`;
-export const Divider = ({ vertical, borderColor, thickness, height, ...props }) => {
-    const activeTheme = useTheme() || defaultThemeColor;
-    return (
-        <StyledDivider
-            theme={activeTheme}
-            borderColor={borderColor}
-            thickness={thickness}
-            vertical={vertical}
-            height={height}
-            {...props}
-        />
-    );
-};
-
-Divider.propTypes = {
-    /**
-     * Optional: How thick should be the divider in px
-     */
-    thickness: PropTypes.string,
-    /**
-     * Optional custom border color
-     */
-    borderColor: PropTypes.string,
-    /**
-     * Optional flag for vertical direction
-     */
-    vertical: PropTypes.bool,
-    /**
-     * Optional: How hight should be the divider in px (apply only when vertical is TRUE)
-     */
-    height: PropTypes.string,
-};
-
-Divider.defaultProps = {
-    thickness: '2px',
-    vertical: false,
-    height: '10px',
-};

package/components/Divider/index.js

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