groundfloor-react-ui 1.2.9 → 1.2.11

package/components/Button/PrimaryButton.js

@@ -1,167 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled, { useTheme } from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
-import getDefaultStyles, { hexToRGB } from '../constants/utils';
-import { Loader } from '../Loaders';
-
-/**
- * Primary UI component for user interaction
- */
-
-const sizes = {
-    sm: {
-        fontSize: '14px',
-        padding: '5px 15px',
-    },
-    md: {
-        fontSize: '16px',
-        padding: '5.5px 15px',
-    },
-    lg: {
-        fontSize: '18px',
-        padding: '8px 20px',
-    },
-};
-
-const buttonDisabledBg = ({ theme, variant }) =>
-    hexToRGB(theme.variant[variant], 0.6);
-
-const StyledButton = styled.button`
-  background: ${({ theme, variant }) => theme.variant[variant]};
-  color: ${({ theme }) => theme.bgColor};
-  padding: ${({ size }) => sizes[size].padding};
-  border: 1px solid ${({ theme, variant }) => theme.variant[variant]};
-  border-radius: 5px;
-  font-size: ${({ size }) => sizes[size].fontSize};
-  display: flex;
-  align-items: center;
-  width: ${({ block }) => (block ? '100%' : 'auto')};
-  cursor: pointer;
-  line-height: 18px;
-  outline: none;
-  &:disabled {
-    color: ${({ theme }) => theme.bgColor};
-    background: ${buttonDisabledBg};
-    border: 1px solid ${buttonDisabledBg};
-    cursor: not-allowed;
-  }
-
-  //Set the styles from the default styles object
-  ${({ theme, defaultStyle }) => {
-        return getDefaultStyles(theme, defaultStyle);
-    }}
-
-  // custom styles
-  ${({ btnStyle }) => btnStyle}
-`;
-
-
-export const PrimaryButton = ({
-    btnStyle,
-    block,
-    size,
-    style,
-    variant,
-    disabled,
-    isLoading,
-    type,
-    theme,
-    id,
-    ...props
-}) => {
-    const activeTheme = useTheme() || defaultThemeColor
-
-    return (
-        <StyledButton
-            id={id}
-            block={block}
-            variant={variant}
-            defaultStyle='button'
-            type={type}
-            style={style}
-            size={size}
-            theme={theme}
-            disabled={disabled}
-            btnStyle={btnStyle}
-            {...props}
-        >
-            {isLoading && (
-                <div
-                    style={{
-                        paddingRight: '10px',
-                        display: 'flex',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                    }}
-                >
-                    <Loader
-                        customStyles={{ 'background-color': activeTheme.bgColor }}
-                        size={16}
-                    />
-                </div>
-            )}
-            {props.children}
-        </StyledButton>
-    );
-};
-
-PrimaryButton.propTypes = {
-    /**
-     * Type of Button. primary-1, 2, error, etc.
-     */
-    variant: PropTypes.string,
-    /**
-     * Is the button disabled?
-     */
-    disabled: PropTypes.bool,
-    /**
-     * How large should the button be?
-     */
-    size: PropTypes.oneOf(['sm', 'md', 'lg']),
-    /**
-     * Optional click handler
-     */
-    block: PropTypes.bool,
-    /**
-     * Optional loading handler
-     */
-    isLoading: PropTypes.bool,
-    /**
-     * Optional click handler
-     */
-    onClick: PropTypes.func,
-    /**
-     * Theme object
-     */
-    theme: PropTypes.object,
-    /**
-     * Type of the btn i.e: button or submit etc.
-     */
-    type: PropTypes.string,
-    /**
-     * custom style of button
-     */
-    btnStyle: PropTypes.object,
-    /**
-    * id of the primaryBtn
-    */
-    id: PropTypes.string,
-
-};
-
-StyledButton.defaultProps = {
-    theme: defaultThemeColor,
-};
-
-PrimaryButton.defaultProps = {
-    theme: defaultThemeColor,
-    variant: 'primary-1',
-    block: false,
-    isLoading: false,
-    disabled: false,
-    size: 'md',
-    onClick: undefined,
-    btnStyle: {},
-    id: ''
-};

package/components/Button/SecondaryButton.js

@@ -1,156 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled, { useTheme } from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
-import getDefaultStyles from '../constants/utils';
-import { Loader } from '../Loaders';
-
-/**
- * Secondary UI component for user interaction
- */
-
-const sizes = {
-    sm: {
-        fontSize: '14',
-        padding: '5px 15px',
-    },
-    md: {
-        fontSize: '16',
-        padding: '5.5px 15px',
-    },
-    lg: {
-        fontSize: '18',
-        padding: '8px 20px',
-    },
-};
-
-
-const StyledButton = styled.button`
-  color: ${({ theme, variant }) => theme.variant[variant]};
-  background: ${({ theme }) => theme.bgColor};
-  padding: ${({ size }) => sizes[size].padding};
-  border: 1px solid ${({ theme, variant }) => theme.variant[variant]};
-  font-size: ${({ size }) => sizes[size].fontSize};
-  border-radius: 5px;
-  display: flex;
-  align-items: center;
-  outline: none;
-  width: ${({ block }) => (block ? '100%' : 'auto')};
-  cursor: pointer;
-  line-height: 18px;
-  &:disabled {
-    color: #929eac;
-    border: 1px solid ${({ theme }) => theme.neutral['neutral-3']};
-    cursor: not-allowed;
-  }
-
-  //Set the styles from the default styles object
-  ${({ theme, defaultStyle }) => {
-        return getDefaultStyles(theme, defaultStyle);
-    }}
-  // custom styles
-    ${({ btnStyle }) => btnStyle}
-`;
-
-export const SecondaryButton = ({
-    btnStyle,
-    isLoading,
-    block,
-    size,
-    style,
-    variant,
-    disabled,
-    type,
-    theme,
-    id,
-    ...props
-}) => {
-    const activeTheme = useTheme() || defaultThemeColor
-    return (
-        <StyledButton
-            id={id}
-            block={block}
-            variant={variant}
-            defaultStyle='button'
-            style={style}
-            size={size}
-            disabled={disabled}
-            type={type}
-            btnStyle={btnStyle}
-            isLoading={isLoading}
-            theme={theme}
-            {...props}
-        >
-            {isLoading && (
-                <div
-                    style={{
-                        paddingRight: '10px',
-                        display: 'flex',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                    }}
-                >
-                    <Loader
-                        theme={theme}
-                        customStyles={{ 'background-color': activeTheme.variant[variant] }}
-                        size={16}
-                    />        </div>
-            )}
-            {props.children}{' '}
-        </StyledButton>
-    );
-};
-
-SecondaryButton.propTypes = {
-    /**
-     * Type of Button. primary-1, 2, error, etc.
-     */
-    variant: PropTypes.string,
-    /**
-     * Is the button disabled?
-     */
-    disabled: PropTypes.bool,
-    /**
-     * How large should the button be?
-     */
-    size: PropTypes.oneOf(['sm', 'md', 'lg']),
-    /**
-     * Optional click handler
-     */
-    block: PropTypes.bool,
-    /**
-     * Optional click handler
-     */
-    onClick: PropTypes.func,
-    /**
-     * Theme object
-     */
-    theme: PropTypes.object,
-    /**
-     * Type of the btn i.e: button or submit etc.
-     */
-    type: PropTypes.string,
-    /**
-     * custome style of button
-     */
-    btnStyle: PropTypes.object,
-    /**
-    * id of the secondaryBtn
-    */
-    id: PropTypes.string,
-};
-
-StyledButton.defaultProps = {
-    theme: defaultThemeColor,
-};
-
-SecondaryButton.defaultProps = {
-    theme: defaultThemeColor,
-    variant: 'primary-1',
-    block: false,
-    disabled: false,
-    size: 'md',
-    onClick: undefined,
-    btnStyle: {},
-    id: ''
-};

package/components/Button/TinyButton.js

@@ -1,101 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled, { useTheme } from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
-import getDefaultStyles from '../constants/utils';
-
-/**
- * Primary UI component for user interaction
- */
-
-const buttonDisabledBg = '#BBC4CF';
-
-const StyledButton = styled.button`
-    background: ${({ disabled, theme, variant }) => disabled ? buttonDisabledBg : theme.variant[variant]};
-    color: ${({ theme }) => theme.bgColor};
-    padding: 3px 14px;
-    border: 1px solid ${({ theme, variant }) => theme.variant[variant]};
-    border-radius: 10.5px;
-    font-size: 14px;
-    line-height: 17px;
-    outline: none;
-    display: flex;
-    align-items: center;
-    width: ${({ block }) => block ? '100%' : 'auto'};
-    cursor: pointer;
-
-    &:disabled {
-        color: #929EAC;
-        background: ${buttonDisabledBg};
-        border: 1px solid ${buttonDisabledBg};
-        cursor: not-allowed;
-    }
-
-    //Set the styles from the default styles object
-    ${({ theme, defaultStyle }) => {
-        return getDefaultStyles(theme, defaultStyle);
-    }}
-`;
-
-export const TinyButton = ({ block, style, variant, disabled, type, id, ...props }) => {
-    const theme = useTheme() || defaultThemeColor;
-    return (
-        <StyledButton
-            id={id}
-            block={block}
-            variant={variant}
-            defaultStyle="button"
-            type={type}
-            style={style}
-            disabled={disabled}
-            {...props}
-        >
-            {props.children}
-        </StyledButton>
-    );
-};
-
-TinyButton.propTypes = {
-    /**
-     * Type of Button. primary-1, 2, error, etc.
-     */
-    variant: PropTypes.string,
-    /**
-     * Is the button disabled?
-     */
-    disabled: PropTypes.bool,
-    /**
-     * Optional click handler
-     */
-    block: PropTypes.bool,
-    /**
-     * Optional click handler
-     */
-    onClick: PropTypes.func,
-    /**
-     * Theme object
-     */
-    theme: PropTypes.object,
-    /**
-    * Type of the btn i.e: button or submit etc.
-    */
-    type: PropTypes.string,
-    /**
-    * id of the tinybtn
-    */
-    id: PropTypes.string,
-};
-
-StyledButton.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-TinyButton.defaultProps = {
-    theme: defaultThemeColor,
-    variant: 'primary-1',
-    block: false,
-    disabled: false,
-    onClick: undefined,
-    id: ''
-};
-

package/components/Button/index.js

@@ -1,6 +0,0 @@
-export * from './PrimaryButton';
-export * from './SecondaryButton';
-export * from './TinyButton';
-
-
-

package/components/Cards/Card.js

@@ -1,43 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled, { useTheme } from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
-
-const CardWrapper = styled.div`
-  color: ${({ activeTheme }) => activeTheme.textColor};
-  padding-top: 25px;
-  padding-bottom: 25px;
-  padding-left: 32px;
-  padding-right: 32px;
-  background-color: ${({ activeTheme }) => activeTheme.bgColor};
-  width: inherit;
-  height: inherit;
-  border-radius: 5px;
-  box-shadow: 0px 5px 37px rgba(56, 66, 100, 0.0880136);
-  border-color: ${({ activeTheme }) => activeTheme.border};
-
-  // custom styles
-  ${({ customStyles }) => customStyles}
-`;
-
-export const Card = ({ type, header, content, ...props }) => {
-    const activeTheme = useTheme() || defaultThemeColor;
-
-    return (
-        <CardWrapper activeTheme={activeTheme} {...props}>
-            {header}
-            {content}
-        </CardWrapper>
-    );
-};
-
-Card.propTypes = {
-    /**
-     * header of the card
-     */
-    header: PropTypes.any,
-    /**
-     * the content of the card
-     */
-    content: PropTypes.any,
-};

package/components/Cards/CardRef.js

@@ -1,71 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { forwardRef } from 'react';
-import styled, { useTheme } from 'styled-components';
-import defaultStyles from '../constants/defaultStyle';
-import defaultThemeColor from '../constants/defaultThemeColor';
-
-const CardWrapper = styled.div`
-
-  color: ${({ activeTheme }) => activeTheme.textColor};
-  padding-top: 25px;
-  padding-bottom: 25px;
-  padding-left: 32px;
-  padding-right: 32px;
-  background-color: ${({ activeTheme }) => activeTheme.bgColor};
-  width: inherit;
-  border-radius: 5px;
-  box-shadow: 0px 5px 37px rgba(56, 66, 100, 0.0880136);
-  border-color: ${({ activeTheme }) => activeTheme.border};
-  transition: all .5s ease .95ms !important;
-  
-  //Set the styles from the default styles object
-  ${({ inBuiltCss, type }) => {
-        if (inBuiltCss) {
-            let tempObj = {};
-            if (inBuiltCss[type]) {
-                for (const property in inBuiltCss[type]) {
-                    tempObj[property] = inBuiltCss[type][property];
-                    delete inBuiltCss.common[property];
-                }
-                for (const property in inBuiltCss['common']) {
-                    tempObj[property] = inBuiltCss['common'][property];
-                }
-            }
-            return tempObj;
-        }
-    }}
-
-  // custom styles
-        ${({ customStyles }) => customStyles}
-`;
-
-export const CardRef = forwardRef(({ type, header, content, ...props }, ref) => {
-    const activeTheme = useTheme() || defaultThemeColor;
-
-    return (
-        <CardWrapper
-            inBuiltCss={defaultStyles}
-            activeTheme={activeTheme}
-            {...props}
-            ref={ref}
-        >
-            {header}
-            {content}
-        </CardWrapper>
-    );
-});
-
-CardRef.propTypes = {
-    /**
-     * the type of the element
-     */
-    type: PropTypes.string,
-    /**
-     * header of the card
-     */
-    header: PropTypes.any,
-    /**
-     * the content of the card
-     */
-    content: PropTypes.any,
-};