@spothero/ui 15.10.9 → 16.0.0-beta.0

package/styles/v1/components/Table/stories/Methods.stories.js

@@ -1,141 +0,0 @@
-import React, {useEffect, useState} from 'react';
-
-import Table from '../Table';
-import TableSortType from '../TableSortType';
-
-import TableData from './helpers/table-data';
-import headers from './helpers/table-headers';
-
-export default {
-    component: Table,
-    title: 'v1/Table/Methods',
-};
-
-const PAGE_SIZE = 3;
-const {DESC} = TableSortType;
-const PAGE_1_DATA = TableData.slice(0, 3);
-const PAGE_2_DATA = TableData.slice(3);
-
-const whichSort = ({dataKey, sortOrder}) => {
-    return item => (sortOrder !== DESC ? item[dataKey] : -item[dataKey]);
-};
-
-const sortFirstNameAscending = item => {
-    if (window.sorting) {
-        window.sorting(item);
-    }
-
-    return item.firstName;
-};
-
-export const Pagination = () => {
-    const [currentPage, setCurrentPage] = useState(1);
-    const [data, setData] = useState(PAGE_1_DATA);
-
-    const onPageChange = pages => {
-        if (window.onPageChange) {
-            window.onPageChange(pages);
-        }
-
-        setCurrentPage(pages.currentPage);
-        setData(pages.currentPage === 1 ? PAGE_1_DATA : PAGE_2_DATA);
-    };
-
-    return (
-        <Table
-            data={data}
-            headers={headers}
-            pageSize={PAGE_SIZE}
-            currentPage={currentPage}
-            className="AvengersTable"
-            onPageChange={onPageChange}
-            totalDataRowCount={TableData.length}
-        />
-    );
-};
-
-export const AsyncPagination = () => {
-    const [currentPage, setCurrentPage] = useState(1);
-    const [data, setData] = useState(PAGE_1_DATA);
-    const [totalDataRowCount, setTotalDataRowCount] = useState(0);
-
-    const onPageChange = pages => {
-        if (window.onPageChange) {
-            window.onPageChange(pages);
-        }
-
-        setCurrentPage(pages.currentPage);
-        setData(pages.currentPage === 1 ? PAGE_1_DATA : PAGE_2_DATA);
-    };
-
-    useEffect(() => {
-        setTimeout(() => {
-            setTotalDataRowCount(TableData.length);
-        }, 500);
-    }, [])
-
-    return (
-        <Table
-            data={data}
-            headers={headers}
-            pageSize={PAGE_SIZE}
-            currentPage={currentPage}
-            className="AvengersTable"
-            onPageChange={onPageChange}
-            totalDataRowCount={totalDataRowCount}
-        />
-    );
-};
-
-
-
-export const WithSortableHeaders = () => {
-    const [{sortBy, sortOrder, sortDataKey}, setState] = useState({
-        sortBy: ['-lastName'],
-        sortDataKey: 'lastName',
-        sortOrder: DESC,
-    });
-
-    const HEADERS = headers.map(heading => {
-        return {
-            ...heading,
-            isSortable: heading.dataKey !== 'email',
-        };
-    });
-
-    const onSortChange = options => {
-        if (window.onSortChange) {
-            window.onSortChange(options);
-        }
-
-        setState({
-            sortOrder,
-            sortDataKey: options.dataKey,
-            sortBy: whichSort(options),
-        });
-    };
-
-    return (
-        <Table
-            data={TableData}
-            sorting={sortBy}
-            headers={HEADERS}
-            sortOrder={sortOrder}
-            className="AvengersTable"
-            sortDataKey={sortDataKey}
-            onSortChange={onSortChange}
-            totalDataRowCount={TableData.length}
-        />
-    );
-};
-
-export const WithSortingFunction = () => {
-    return (
-        <Table
-            data={TableData}
-            headers={headers}
-            sorting={sortFirstNameAscending}
-            totalDataRowCount={TableData.length}
-        />
-    );
-};

package/styles/v1/components/Table/stories/helpers/TableCellEmail.jsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import isEmpty from 'lodash/isEmpty';
-
-import TableCellPropTypes from '../../TableCellPropTypes';
-
-const TableCellEmail = ({className, headingLabel, value}) => {
-    const classes = classNames('TableCell', 'TableCellEmail', className);
-
-    return (
-        <td className={classes} data-label={headingLabel}>
-            <div>
-                {!isEmpty(value) ? (
-                    <a href={`mailto:${value}`}>{value}</a>
-                ) : (
-                    'N/A'
-                )}
-            </div>
-        </td>
-    );
-};
-
-TableCellEmail.propTypes = TableCellPropTypes;
-
-export default TableCellEmail;

package/styles/v1/components/Table/stories/helpers/TableCustomRow.jsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const TableCustomRow = ({firstName, lastName, email, age}) => {
-    return (
-        <tr colSpan={4}>
-            <td colSpan={4}>
-                <table className="TableCustomRow">
-                    <tbody>
-                        <tr>
-                            <td>
-                                <a href={`mailto:${email}`}>{email}</a>
-                            </td>
-                            <td>{firstName}</td>
-                            <td>{lastName}</td>
-                            <td>{age}</td>
-                        </tr>
-                        <tr colSpan={4}>
-                            <td colSpan={4}>This is an Avenger!</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </td>
-        </tr>
-    );
-};
-
-TableCustomRow.propTypes = {
-    firstName: PropTypes.string,
-    lastName: PropTypes.string,
-    email: PropTypes.string,
-    age: PropTypes.number,
-};
-
-export default TableCustomRow;

package/styles/v1/components/Table/stories/helpers/TableHeadingEmail.jsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import IconEnvelope from '@spothero/icons/envelope';
-import TableHeadingPropTypes from '../../TableHeadingPropTypes';
-
-const TableHeadingEmail = ({className, label}) => {
-    const classes = classNames('TableHeading', 'TableHeadingEmail', className);
-
-    return (
-        <th className={classes}>
-            {label}
-            &nbsp;
-            <IconEnvelope width="12px" height="12px" />
-        </th>
-    );
-};
-
-TableHeadingEmail.propTypes = TableHeadingPropTypes;
-
-export default TableHeadingEmail;

package/styles/v1/components/Table/stories/helpers/table-data.js

@@ -1,26 +0,0 @@
-export default [
-    {
-        firstName: 'Tony',
-        lastName: 'Stark',
-        email: 'ironman@avengers.com',
-        age: 38,
-    },
-    {
-        firstName: 'Bruce',
-        lastName: 'Banner',
-        email: 'hulksmash@avengers.com',
-        age: 36,
-    },
-    {
-        firstName: 'Steve',
-        lastName: 'Rogers',
-        email: 'captamerica@avengers.com',
-        age: 104,
-    },
-    {
-        firstName: 'Thor',
-        lastName: 'Odinson',
-        email: 'godofthunder@avengers.com',
-        age: 1015,
-    },
-];

package/styles/v1/components/Table/stories/helpers/table-headers.js

@@ -1,14 +0,0 @@
-export default [
-    {
-        label: 'First Name',
-        dataKey: 'firstName',
-        className: 'AvengersTableHeading-first-name',
-    },
-    {
-        label: 'Last Name',
-        dataKey: 'lastName',
-        className: 'AvengersTableHeading-last-name',
-    },
-    {label: 'Email', dataKey: 'email', className: 'AvengersTableHeading-email'},
-    {label: 'Age', dataKey: 'age', className: 'AvengersTableHeading-age'},
-];

package/styles/v1/components/TextButton/TextButton.jsx

@@ -1,78 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import deprecate from 'v1/utils/deprecate';
-
-deprecate({
-    name: 'TextButton',
-    newName: 'Button',
-    changes: [
-        'Text button has now become a style variant of the v2 Button component',
-        'Since the v1 TextButton was a styled version of the v1 Button, the two have been combined in the v2 Button component. All of the core functionality of both v1 button types has been included in the v2 Button.',
-        '---- Props ----',
-        'iconPosition has been removed, iconLeft and iconRight have replaced it.',
-        'color was removed.',
-        'block was removed, if full width is needed, use isFullWidth',
-        'loading was replaced by isLoading',
-    ],
-});
-
-const TextButton = ({
-    className,
-    children,
-    href,
-    iconPosition,
-    block,
-    disabled,
-    loading,
-    onClick,
-    ...attrs
-}) => {
-    const classes = classNames(
-        'TextButton',
-        {'TextButton-block': block},
-        {'TextButton-loading': loading},
-        {[`TextButton-with-icon-${iconPosition}`]: iconPosition},
-        className
-    );
-    const tag = href ? 'a' : 'button';
-    const opts = {
-        className: classes,
-        disabled,
-        onClick,
-        href,
-        ...attrs,
-    };
-
-    if (!href) {
-        opts.type = 'button';
-    }
-
-    return React.createElement(tag, opts, children);
-};
-
-TextButton.propTypes = {
-    /** Additional class(es) to add to the component. */
-    className: PropTypes.string,
-    /** The markup node to insert into the button. */
-    children: PropTypes.node,
-    /** The url to send the link to, if applicable. If provided, will turn button into an anchor element. */
-    href: PropTypes.node,
-    /** If an icon is provided, whether to add the margin to the icon on the left or right side. */
-    iconPosition: PropTypes.oneOf(['left', 'right']),
-    /** Whether the button should display as a block level element. */
-    block: PropTypes.bool,
-    /** Whether the button is disabled or not. */
-    disabled: PropTypes.bool,
-    /** Whether to show a loading animation inside of the button. */
-    loading: PropTypes.bool,
-    /**
-     * The handler to execute when the button is clicked.
-     *
-     * @param {SyntheticEvent} evt - The React `SyntheticEvent`.
-     */
-    onClick: PropTypes.func,
-};
-
-export default TextButton;

package/styles/v1/components/TextButton/TextButton.spec.js

@@ -1,95 +0,0 @@
-describe('<TextButton />', () => {
-    context('Display', () => {
-        context('Default', () => {
-            beforeEach(() => {
-                cy.visitStory('v1/TextButton/Display', 'Default', {
-                    onBeforeLoad: contentWindow => {
-                        contentWindow.onDefaultTextButtonClick = evt => {
-                            // eslint-disable-next-line no-console
-                            console.log('clicked default text-button');
-                        };
-
-                        cy.stub(contentWindow, 'onDefaultTextButtonClick').as(
-                            'defaultClick'
-                        );
-                    },
-                });
-            });
-
-            it('Calls onClick() properly', () => {
-                cy.get('.TextButton')
-                    .click()
-                    .get('@defaultClick')
-                    .should('be.called');
-            });
-
-            it('Renders correctly', () => {
-                cy.get('.TextButton').contains('Default');
-            });
-        });
-
-        context('Block', () => {
-            it('Has block styles', () => {
-                cy.visitStory('v1/TextButton/Display', 'Block')
-                    .get('.TextButton')
-                    .should('have.class', 'TextButton-block');
-            });
-        });
-
-        context('Disabled', () => {
-            beforeEach(() => {
-                cy.visitStory('v1/TextButton/Display', 'Disabled', {
-                    onBeforeLoad: contentWindow => {
-                        contentWindow.onDisabledTextButtonClick = evt => {
-                            // eslint-disable-next-line no-console
-                            console.log('clicked disabled text-button');
-                        };
-
-                        cy.stub(contentWindow, 'onDisabledTextButtonClick').as(
-                            'disabledClick'
-                        );
-                    },
-                });
-            });
-
-            it('Has disabled attribute', () => {
-                cy.get('.TextButton').should(
-                    'have.attr',
-                    'disabled',
-                    'disabled'
-                );
-            });
-
-            it(`Doesn't call onClick()`, () => {
-                cy.get('.TextButton')
-                    .click({force: true})
-                    .get('@disabledClick')
-                    .should('not.be.called');
-            });
-        });
-
-        context('Icon Left', () => {
-            it('Has icon left styles', () => {
-                cy.visitStory('v1/TextButton/Display', 'IconLeft')
-                    .get('.TextButton')
-                    .should('have.class', 'TextButton-with-icon-left');
-            });
-        });
-
-        context('Icon Right', () => {
-            it('Has icon right styles', () => {
-                cy.visitStory('v1/TextButton/Display', 'IconRight')
-                    .get('.TextButton')
-                    .should('have.class', 'TextButton-with-icon-right');
-            });
-        });
-
-        context('Loading', () => {
-            it('Has loading styles', () => {
-                cy.visitStory('v1/TextButton/Display', 'Loading')
-                    .get('.TextButton')
-                    .should('have.class', 'TextButton-loading');
-            });
-        });
-    });
-});

package/styles/v1/components/TextButton/_TextButton.scss

@@ -1,114 +0,0 @@
-@keyframes TextButton-loading-rotate {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-.TextButton {
-    @include font-family;
-    display: inline-block;
-    cursor: pointer;
-    white-space: nowrap;
-    appearance: none;
-    background: none;
-    border: none;
-    margin: 0;
-    padding: 0;
-    user-select: none;
-    position: relative;
-    outline: none;
-    font-weight: $font-weight-semi-bold;
-    color: $color-shift;
-    transition: color $animation;
-
-    &:focus,
-    &:active {
-        outline: none;
-    }
-
-    &:not([disabled]) {
-        &:hover {
-            color: $color-shift-hover;
-        }
-    }
-
-    &:disabled {
-        cursor: not-allowed;
-        color: $color-dashboard;
-    }
-
-    .Icon {
-        position: relative;
-        margin: 0;
-        width: 10px;
-        height: 10px;
-        line-height: 1;
-    }
-}
-
-.TextButton-block {
-    display: block;
-    width: 100%;
-}
-
-.TextButton-with-icon-left {
-    .Icon {
-        margin-right: 5px;
-    }
-}
-
-.TextButton-with-icon-right {
-    .Icon {
-        margin-left: 5px;
-    }
-}
-
-.TextButton-loading {
-    position: relative;
-    pointer-events: none;
-    cursor: not-allowed;
-
-    &::before {
-        content: "";
-        position: absolute;
-        right: 0.5em;
-        top: 0;
-        bottom: 0;
-        margin: auto;
-        width: 0.5em;
-        height: 0.5em;
-        border: 2px solid;
-        border-left-color: transparent;
-        border-radius: 50%;
-        opacity: 1;
-        animation-duration: 0.5s;
-        animation-iteration-count: infinite;
-        animation-name: TextButton-loading-rotate;
-        animation-timing-function: linear;
-    }
-
-    &:not([disabled]) {
-        color: $color-cement;
-        opacity: 0.8;
-    }
-
-    &.TextButton {
-        &::before {
-            border: 2px solid;
-            border-left-color: transparent;
-            right: -1.5em;
-            width: 1em;
-            height: 1em;
-            opacity: 1;
-        }
-
-        &::after {
-            transition-delay: 0;
-            width: 1em;
-        }
-    }
-}

package/styles/v1/components/TextButton/stories/Display.stories.js

@@ -1,46 +0,0 @@
-import React from 'react';
-import IconCheck from '@spothero/icons/check';
-import TextButton from 'v1/components/TextButton/TextButton';
-
-export default {
-    component: TextButton,
-    title: 'v1/TextButton/Display',
-};
-
-export const Default = () => {
-    return (
-        <TextButton
-            onClick={window.onDefaultTextButtonClick} // eslint-disable-line react/jsx-handler-names
-        >
-            Default
-        </TextButton>
-    );
-};
-
-export const Block = () => {
-    return <TextButton block>Block</TextButton>;
-};
-
-export const Disabled = () => {
-    return <TextButton disabled>Disabled</TextButton>;
-};
-
-export const Loading = () => {
-    return <TextButton loading>Loading</TextButton>;
-};
-
-export const IconLeft = () => {
-    return (
-        <TextButton iconPosition="left">
-            <IconCheck /> TextButton with Icon left
-        </TextButton>
-    );
-};
-
-export const IconRight = () => {
-    return (
-        <TextButton iconPosition="right">
-            TextButton with Icon right <IconCheck />
-        </TextButton>
-    );
-};

package/styles/v1/components/index.js

@@ -1,7 +0,0 @@
-export {default as Panel} from './Panel/Panel';
-export {default as Button} from './Button/Button';
-export {default as Table} from './Table/Table';
-export {default as TextButton} from './TextButton/TextButton';
-export {default as Image} from './Image/Image';
-export {default as Loader} from './Loader/Loader';
-export {Modal, ModalContent, ModalFooter} from './Modal';

package/styles/v1/utils/deprecate.js

@@ -1,45 +0,0 @@
-/* eslint-disable no-console */
-/* eslint-disable no-undef */
-/**
- * Logs a Deprecation Warning to the console for v1 components.
- * @static
- * @function deprecationWarningLog
- * @param {Object} [deprecationWarningContent={}] - The content of the deprecation warning.
- * @param {String} [deprecationWarningContent.componentName=null] - The name of the original component.
- * @param {string} [deprecationWarningContent.newComponentName=null] - The name of the new component if the name is significantly different than the original (ie. 'Panel' becomes 'Accordion').
- * @param {Array} [deprecationWarningContent.changes=null] - The array of changes to the component.
- * @example
- * const deprecationWarningContent = {
- * name: 'Old Component',
-    newName: 'New Component',
-    changes: [
-        'Prop 1 changed to Prop A',
-        'Prop 2 changed to Prop B',
-    ],
- * };
- *
- * deprecate(deprecationWarningContent);
- * @returns {void}
- */
-
-const DEPRECATION_LIST = [];
-
-const deprecate = ({name, newName, changes}) => {
-    if (
-        process.env.NODE_ENV !== 'development' ||
-        DEPRECATION_LIST.includes(name)
-    ) {
-        return;
-    }
-
-    console.groupCollapsed(`fe-ui v1 ${name} Deprecation Warning: `);
-    console.log(
-        `This component, ${name}, is now deprecated. Please use the v2 ${
-            newName ? newName : name
-        } instead.`
-    );
-    changes.forEach(change => console.log(change));
-    console.groupEnd(`fe-ui v1 ${name} Deprecation Warning: `);
-};
-
-export default deprecate;