jamespot-react-components 1.0.3 → 1.0.65

package/src/components/JRCButton/JRCButton.stories.tsx

@@ -1,311 +0,0 @@
-import * as React from 'react';
-import JRCButton, { JRCButtonProps } from './JRCButton';
-import { action } from '@storybook/addon-actions';
-import styled from 'styled-components';
-import { withReduxForm } from '../../storybook/decorators';
-import { useState } from 'react';
-import { JRCValidationButton, JRCValidationButtonProps } from './JRCValidationButton';
-import { Meta, Story } from '@storybook/react';
-
-export default {
-    title: 'JRCButton',
-    component: JRCButton,
-    decorators: [withReduxForm],
-} as Meta;
-
-const Template: Story<JRCButtonProps> = (args) => {
-    const [loader, setLoader] = useState(false);
-    return (
-        <JRCButton {...args} loader={loader} onClick={() => setLoader(true)}>
-            {args.children}
-        </JRCButton>
-    );
-};
-
-export const CustomButton = Template.bind({});
-CustomButton.args = {
-    children: 'Click to see loading Icon',
-    icon: 'icon-backward',
-    type: 'submit',
-    dataCy: 'button-cy-demo',
-};
-
-const JRCButtonWrapper = styled.div`
-    display: flex;
-    flex-wrap: wrap;
-`;
-
-export const AllButtons = () => {
-    return (
-        <>
-            <JRCButtonWrapper>
-                <JRCButton onClick={action('button-click')} type="submit" color="primary" variant="contained">
-                    Button
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    // icon="icon-check"
-                    type="submit"
-                    color="primary"
-                    variant="contained">
-                    Button + Icon
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="primary"
-                    variant="contained"></JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="primary"
-                    variant="contained">
-                    Icon + Button
-                </JRCButton>
-            </JRCButtonWrapper>
-            <JRCButtonWrapper>
-                <JRCButton onClick={action('button-click')} type="submit" color="valid" variant="contained">
-                    Button
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="valid"
-                    variant="contained">
-                    Button + Icon
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="valid"
-                    variant="contained"></JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="valid"
-                    variant="contained">
-                    Icon + Button
-                </JRCButton>
-            </JRCButtonWrapper>
-            <JRCButtonWrapper>
-                <JRCButton onClick={action('button-click')} type="submit" color="danger" variant="contained">
-                    Button
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="danger"
-                    variant="contained">
-                    Button + Icon
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="danger"
-                    variant="contained"></JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="danger"
-                    variant="contained">
-                    Icon + Button
-                </JRCButton>
-            </JRCButtonWrapper>
-            <JRCButtonWrapper>
-                <JRCButton onClick={action('button-click')} disabled type="submit" color="primary" variant="contained">
-                    Button
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    disabled
-                    icon="icon-check"
-                    type="submit"
-                    color="primary"
-                    variant="contained">
-                    Button + Icon
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    disabled
-                    icon="icon-check"
-                    type="submit"
-                    color="primary"
-                    variant="contained"></JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    disabled
-                    icon="icon-check"
-                    type="submit"
-                    color="primary"
-                    variant="contained">
-                    Icon + Button
-                </JRCButton>
-            </JRCButtonWrapper>
-            <br />
-            <JRCButtonWrapper>
-                <JRCButton onClick={action('button-click')} type="submit" color="primary" variant="outlined">
-                    Button
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="primary"
-                    variant="outlined">
-                    Button + Icon
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="primary"
-                    variant="outlined"></JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="primary"
-                    variant="outlined">
-                    Icon + Button
-                </JRCButton>
-            </JRCButtonWrapper>
-            <JRCButtonWrapper>
-                <JRCButton onClick={action('button-click')} type="submit" color="valid" variant="outlined">
-                    Button
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="valid"
-                    variant="outlined">
-                    Button + Icon
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="valid"
-                    variant="outlined"></JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="valid"
-                    variant="outlined">
-                    Icon + Button
-                </JRCButton>
-            </JRCButtonWrapper>
-            <JRCButtonWrapper>
-                <JRCButton onClick={action('button-click')} type="submit" color="danger" variant="outlined">
-                    Button
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="danger"
-                    variant="outlined">
-                    Button + Icon
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="danger"
-                    variant="outlined"></JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="danger"
-                    variant="outlined">
-                    Icon + Button
-                </JRCButton>
-            </JRCButtonWrapper>
-            <JRCButtonWrapper>
-                <JRCButton onClick={action('button-click')} type="submit" color="secondary" variant="outlined">
-                    Button
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="secondary"
-                    variant="outlined">
-                    Button + Icon
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="secondary"
-                    variant="outlined"></JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="secondary"
-                    variant="outlined">
-                    Icon + Button
-                </JRCButton>
-            </JRCButtonWrapper>
-            <JRCButtonWrapper>
-                <JRCButton onClick={action('button-click')} disabled type="submit" color="primary" variant="outlined">
-                    Button
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    disabled
-                    icon="icon-check"
-                    type="submit"
-                    color="primary"
-                    variant="outlined">
-                    Button + Icon
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    disabled
-                    icon="icon-check"
-                    type="submit"
-                    color="danger"
-                    variant="outlined"></JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    disabled
-                    icon="icon-check"
-                    type="submit"
-                    color="danger"
-                    variant="outlined">
-                    Icon + Button
-                </JRCButton>
-            </JRCButtonWrapper>
-        </>
-    );
-};
-
-const ValidationTemplate: Story<JRCValidationButtonProps> = (args) => {
-    const [loader, setLoader] = useState(false);
-    return (
-        <JRCValidationButton {...args} loader={loader} onClick={() => setLoader(true)}>
-            {args.children}
-        </JRCValidationButton>
-    );
-};
-
-export const ValidationButton = ValidationTemplate.bind({});
-ValidationButton.args = {
-    children: 'Click to see loading Icon',
-    icon: 'icon-backward',
-    type: 'submit',
-    onValidationClick: action('validation'),
-    dataCy: 'demo-cy-validation-button',
-};

package/src/components/JRCButton/JRCButton.test.tsx

@@ -1,34 +0,0 @@
-import * as React from 'react';
-import { screen } from '@testing-library/react';
-import { renderWithWrapper } from 'utils/test-utils';
-import UserEvent from '@testing-library/user-event';
-
-import JRCButton from './JRCButton';
-
-const TEXT = "I'm a text";
-
-describe('JRCButton', () => {
-    test('match snapshot', () => {
-        const { asFragment } = renderWithWrapper(<JRCButton>{TEXT}</JRCButton>);
-        expect(asFragment()).toMatchSnapshot();
-    });
-
-    test('renders button with correct text', () => {
-        renderWithWrapper(<JRCButton>{TEXT}</JRCButton>);
-        expect(screen.getByText(TEXT)).toBeInTheDocument();
-        expect(screen.getByRole('button')).toBeInTheDocument();
-    });
-
-    test('calls correct function on click', () => {
-        const onClick = jest.fn();
-        renderWithWrapper(<JRCButton onClick={onClick}>{TEXT}</JRCButton>);
-        UserEvent.click(screen.getByText(TEXT));
-        expect(onClick).toHaveBeenCalled();
-    });
-
-    test('button should be disabled', () => {
-        renderWithWrapper(<JRCButton disabled>{TEXT}</JRCButton>);
-        expect(screen.getByText(TEXT)).toHaveAttribute('disabled');
-        expect(screen.getByText(TEXT)).toBeDisabled();
-    });
-});

package/src/components/JRCButton/JRCButton.tsx

@@ -1,120 +0,0 @@
-import * as React from 'react';
-import JRCIcon, { JRCIconProps } from '../JRCIcon/JRCIcon';
-import styled from 'styled-components';
-import JRCLoader from 'components/JRCLoader/JRCLoader';
-import config, { ButtonType } from './JRCButtonConfig';
-import { ForwardedRef } from 'react';
-import { DataCy } from '../../types/dataAttributes';
-
-export type JRCButtonProps = React.ComponentPropsWithoutRef<'button'> &
-    DataCy & {
-        /** Color of the background of the button */
-        color?: 'primary' | 'valid' | 'danger' | 'secondary';
-        /** Indicates loading of content on the button */
-        loader?: boolean;
-        /** This Boolean attribute specifies that the button should have input focus when the page loads */
-        autofocus?: boolean;
-        /** Defines the value associated with the button’s name when it’s submitted with the form data */
-        value?: string;
-        /** Enhance your button with an icon */
-        icon?: string;
-        /** The variant is used to define what type of action the button will take */
-        variant?: 'contained' | 'outlined';
-        /** CSS float attribute */
-        float?: 'left' | 'right';
-        /** CSS min-width attribute */
-        minWidth?: string;
-    };
-
-export const transformColor = (color?: string): JRCIconProps['color'] => {
-    switch (color) {
-        case 'valid':
-            return 'green';
-        case 'danger':
-            return 'orange';
-        case 'secondary':
-            return 'grey4';
-        default:
-            return 'primary';
-    }
-};
-
-const Button = styled.button<{ themeButton: ButtonType; hasChildren: boolean } & JRCButtonProps>`
-    float: ${(props) => props.float};
-    min-width: ${(props) => props.minWidth};
-    display: inline-flex;
-    flex-direction: row;
-    justify-content: center;
-    cursor: ${(props) => (props.disabled ? 'not-allowed' : props.loader ? 'wait' : 'pointer')};
-    align-items: center;
-    color: ${(props) => props.theme.color[props.themeButton.color]};
-    height: 40px;
-    margin: 0.2rem;
-    position: relative;
-    outline: none;
-    border-radius: 8px;
-    padding: ${(props) => (props.hasChildren ? '8px 16px' : '8px 10px')};
-    background-color: ${(props) => props.theme.color[props.themeButton.background]};
-    box-sizing: border-box;
-    border: 2px solid ${(props) => props.theme.color[props.themeButton.border]};
-    transition: color 0.5s, background-color 0.5s, border 0.5s;
-    &:hover {
-        background-color: ${(props) => props.theme.color[props.themeButton.hover.background]};
-        border-color: ${(props) => props.theme.color[props.themeButton.hover.border]};
-    }
-    &:active {
-        background-color: ${(props) => props.theme.color[props.themeButton.active.background]};
-        border-color: ${(props) => props.theme.color[props.themeButton.active.border]};
-    }
-    &:before {
-        display: none;
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: calc(100% - 2.5px);
-        border-radius: inherit;
-        height: calc(100% - 2.5px);
-        border: 1px dashed ${(props) => props.theme.color[props.themeButton.color]};
-    }
-    & > i,
-    & > div {
-        margin: ${(props) => `0 ${props.hasChildren ? '8px' : '0'} 0 0`};
-    }
-    &:focus-visible:before {
-        display: ${(props) => !props.disabled && !props.loader && 'block'};
-    }
-`;
-
-const JRCButton = React.forwardRef(
-    (
-        { color = 'primary', type = 'button', variant = 'contained', ...props }: JRCButtonProps,
-        ref: ForwardedRef<HTMLButtonElement>,
-    ) => {
-        const disabled = props.disabled || props.loader;
-        const themeButton = config[variant][disabled ? 'disabled' : color];
-
-        return (
-            <Button
-                hasChildren={!!props.children}
-                themeButton={themeButton}
-                type={type}
-                data-cy={props.dataCy}
-                disabled={disabled}
-                {...props}
-                ref={ref}>
-                {props.icon && !props.loader && (
-                    <JRCIcon
-                        name={props.icon}
-                        color={props.disabled ? 'grey3' : variant === 'contained' ? 'white' : transformColor(color)}
-                    />
-                )}
-                {props.loader && <JRCLoader color="grey3" />}
-                {props.children}
-            </Button>
-        );
-    },
-);
-
-export default JRCButton;

package/src/components/JRCButton/JRCButtonConfig.tsx

@@ -1,150 +0,0 @@
-export default {
-    contained: {
-        primary: {
-            color: 'white',
-            background: 'primary',
-            border: 'primary',
-            active: {
-                background: 'primaryD20',
-                border: 'primaryD20',
-            },
-            hover: {
-                background: 'primaryL15',
-                border: 'primaryL15',
-            },
-        },
-        valid: {
-            color: 'white',
-            background: 'green',
-            border: 'green',
-            active: {
-                background: 'greenD20',
-                border: 'greenD20',
-            },
-            hover: {
-                background: 'greenL20',
-                border: 'greenL20',
-            },
-        },
-        danger: {
-            color: 'white',
-            background: 'orange',
-            border: 'orange',
-            active: {
-                background: 'orangeD20',
-                border: 'orangeD20',
-            },
-            hover: {
-                background: 'orangeL15',
-                border: 'orangeL15',
-            },
-        },
-        secondary: {
-            color: 'grey4',
-            background: 'grey0',
-            border: 'grey2',
-            active: {
-                background: 'primaryL80',
-                border: 'grey2',
-            },
-            hover: {
-                background: 'primaryL90',
-                border: 'grey2',
-            },
-        },
-        disabled: {
-            color: 'grey3',
-            background: 'grey1',
-            border: 'grey1',
-            active: {
-                background: 'grey1',
-                border: 'grey1',
-            },
-            hover: {
-                background: 'grey1',
-                border: 'grey1',
-            },
-        },
-    },
-    outlined: {
-        primary: {
-            color: 'primary',
-            background: 'white',
-            border: 'primary',
-            active: {
-                background: 'primaryL80',
-                border: 'primary',
-            },
-            hover: {
-                background: 'primaryL90',
-                border: 'primary',
-            },
-        },
-        valid: {
-            color: 'green',
-            background: 'white',
-            border: 'green',
-            active: {
-                background: 'greenL80',
-                border: 'green',
-            },
-            hover: {
-                background: 'greenL90',
-                border: 'green',
-            },
-        },
-        danger: {
-            color: 'orange',
-            background: 'white',
-            border: 'orange',
-            active: {
-                background: 'orangeL80',
-                border: 'orange',
-            },
-            hover: {
-                background: 'orangeL90',
-                border: 'orange',
-            },
-        },
-        secondary: {
-            color: 'grey4',
-            background: 'white',
-            border: 'grey4',
-            active: {
-                background: 'primaryL80',
-                border: 'grey4',
-            },
-            hover: {
-                background: 'primaryL90',
-                border: 'grey4',
-            },
-        },
-        disabled: {
-            color: 'grey3',
-            background: 'white',
-            border: 'grey3',
-            active: {
-                background: 'white',
-                border: 'grey3',
-            },
-            hover: {
-                background: 'white',
-                border: 'grey3',
-            },
-        },
-    },
-};
-
-export type ButtonType = {
-    color: string;
-    background: string;
-    border: string;
-    active: {
-        background: string;
-        border: string;
-    };
-    hover: {
-        background: string;
-        border: string;
-    };
-};