@spothero/ui 15.10.8 → 16.0.0-beta.0

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

@@ -1,526 +0,0 @@
-import TableSortType from './TableSortType';
-
-const {ASC, DESC} = TableSortType;
-
-describe('<Table />', () => {
-    context('Display', () => {
-        context('Default', () => {
-            beforeEach(() => {
-                cy.visitStory('v1/Table/Display', 'Default');
-            });
-
-            it('Renders table and data', () => {
-                cy.viewport('macbook-15')
-                    // make sure table container exists
-                    .get('.Table-container')
-                    // make sure Table component exists
-                    .get('table')
-                    .should('have.class', 'Table')
-                    // make sure heading exists
-                    .get('thead')
-                    .should('have.class', 'TableHead')
-                    // verify heading labels
-                    .get('.TableHeading')
-                    .eq(0)
-                    .should('contain.text', 'First Name')
-                    .get('.TableHeading')
-                    .eq(1)
-                    .should('contain.text', 'Last Name')
-                    .get('.TableHeading')
-                    .eq(2)
-                    .should('contain.text', 'Email')
-                    .get('.TableHeading')
-                    .eq(3)
-                    .should('contain.text', 'Age')
-                    // make sure table body exists
-                    .get('tbody')
-                    .should('have.class', 'TableBody')
-                    // verify TableCell exists
-                    .get('.TableCell')
-                    // verify desktop breakpoints use table-cell display
-                    .should('have.css', 'display', 'table-cell')
-                    // verify first table row
-                    .get('.TableBody > tr')
-                    .eq(0)
-                    .should('contain', 'Tony')
-                    .should('contain', 'Stark')
-                    .should('contain', 'ironman@avengers.com')
-                    .should('contain', '38')
-                    // verify desktop breakpoints use table-row display
-                    .should('have.css', 'display', 'table-row')
-                    // verify Table footer message
-                    .get('.TableFooter')
-                    .should('contain', 'Showing 4 of 4')
-                    // verify TableControls doesn't exist
-                    .get('.TableControls')
-                    .should('not.exist');
-            });
-
-            it(`Renders tablet table with proper 'card' styling`, () => {
-                cy.viewport('ipad-2')
-                    // verify TableCell exists
-                    .get('.TableCell')
-                    // verify tablet breakpoints use block display
-                    .should('have.css', 'display', 'block')
-                    // get first table row
-                    .get('.TableBody > tr')
-                    .eq(0)
-                    // verify tablet breakpoints use inline-block display
-                    .should('have.css', 'display', 'inline-block')
-                    // verify TableFooter hides message
-                    .get('.TableFooter-info')
-                    .should('not.be.visible');
-            });
-
-            it(`Renders mobile table with proper 'card' styling`, () => {
-                cy.viewport('iphone-6')
-                    // verify TableCell exists
-                    .get('.TableCell')
-                    // verify mobile breakpoints use block display
-                    .should('have.css', 'display', 'block')
-                    // get first table row
-                    .get('.TableBody > tr')
-                    .eq(0)
-                    // verify mobile breakpoints use block display
-                    .should('have.css', 'display', 'block')
-                    // verify TableFooter hides message
-                    .get('.TableFooter-info')
-                    .should('not.be.visible');
-            });
-        });
-
-        context('With custom class names', () => {
-            it('Renders table with custom class names', () => {
-                cy.visitStory('v1/Table/Display', 'WithClassNames')
-                    // make sure table container has class name
-                    .get('.Table-container')
-                    .should('have.class', 'AvengersTable-container')
-                    // make sure Table has class name
-                    .get('.Table')
-                    .should('have.class', 'AvengersTable')
-                    // verify headings have class names
-                    .get('.TableHeading')
-                    .eq(0)
-                    .should('have.class', 'AvengersTableHeading-first-name')
-                    .get('.TableHeading')
-                    .eq(1)
-                    .should('have.class', 'AvengersTableHeading-last-name')
-                    .get('.TableHeading')
-                    .eq(2)
-                    .should('have.class', 'AvengersTableHeading-email')
-                    .get('.TableHeading')
-                    .eq(3)
-                    .should('have.class', 'AvengersTableHeading-age')
-                    // verify TableCells have class names
-                    .get('.TableCell')
-                    .eq(0)
-                    .should('have.class', 'AvengersTableCell-first-name')
-                    .get('.TableCell')
-                    .eq(1)
-                    .should('have.class', 'AvengersTableCell-last-name')
-                    .get('.TableCell')
-                    .eq(2)
-                    .should('have.class', 'AvengersTableCell-email')
-                    .get('.TableCell')
-                    .eq(3)
-                    .should('have.class', 'AvengersTableCell-age');
-            });
-
-            it('Renders table with custom class names for rows', () => {
-                cy.visitStory('v1/Table/Display', 'WithRowClassNames')
-                    .get('.Table tbody tr')
-                    .should('have.length', 4)
-                    .should('have.class', 'TableRow');
-            });
-        });
-
-        context('With custom renders', () => {
-            it('Renders table with custom heading and cell renders', () => {
-                cy.visitStory('v1/Table/Display', 'WithCustomRenders')
-                    // verify custom table heading exists
-                    .get('.TableHeadingEmail')
-                    // verify custom table cell exists
-                    .get('.TableCellEmail');
-            });
-
-            it('Renders table with custom row render', () => {
-                cy.visitStory('v1/Table/Display', 'WithCustomRowRender')
-                    // verify custom table row exists
-                    .get('.TableCustomRow')
-                    .eq(0)
-                    .should('contain', 'This is an Avenger!');
-            });
-        });
-
-        context('With large rows', () => {
-            it('Renders table with large rows', () => {
-                cy.visitStory('v1/Table/Display', 'WithLargeRows')
-                    // verify large table rows exist
-                    .get('.Table')
-                    .should('have.class', 'Table-large');
-            });
-        });
-
-        context('With sorting via array', () => {
-            it('Renders table sorted by firstName data key', () => {
-                cy.visitStory('v1/Table/Display', 'WithSortingArray')
-                    // verify first table row
-                    .get('.TableBody > tr')
-                    .eq(0)
-                    .should('contain', 'Bruce')
-                    .should('contain', 'Banner')
-                    .should('contain', 'hulksmash@avengers.com');
-            });
-        });
-
-        context('With no data', () => {
-            const confirmNoData = () => {
-                return cy
-                    .get('.TableBody')
-                    .should('have.class', 'Table-no-data');
-            };
-
-            it('Renders table with no data (using a default message)', () => {
-                cy.visitStory('v1/Table/Display', 'NoData').then(() => {
-                    confirmNoData();
-                    cy.get('.TableBody').should(
-                        'contain.text',
-                        'No data available at this time.'
-                    );
-                });
-            });
-
-            it('Renders table with no data or footer (using a custom message)', () => {
-                cy.visitStory('v1/Table/Display', 'NoDataCustomMessage').then(
-                    () => {
-                        confirmNoData();
-                        cy.get('.TableBody').should(
-                            'contain.text',
-                            'The Avengers are no more!'
-                        );
-                    }
-                );
-            });
-        });
-
-        context('With no footer', () => {
-            const confirmNoFooter = () => {
-                return cy.get('.TableFooter-info').should('not.exist');
-            };
-
-            it('Renders table with no footer when provided no data (default message)', () => {
-                cy.visitStory('v1/Table/Display', 'NoData').then(() => {
-                    cy.viewport('macbook-15');
-                    confirmNoFooter();
-                });
-            });
-
-            it('Renders table with no footer when provided no data (custom message)', () => {
-                cy.visitStory('v1/Table/Display', 'NoDataCustomMessage').then(
-                    () => {
-                        cy.viewport('macbook-15');
-                        confirmNoFooter();
-                    }
-                );
-            });
-
-            it('Renders table with no footer', () => {
-                cy.visitStory('v1/Table/Display', 'WithNoFooterMessage').then(
-                    () => {
-                        cy.viewport('macbook-15');
-                        confirmNoFooter();
-                    }
-                );
-            });
-        });
-
-        context('With table footer options', () => {
-            it('Renders table with a custom footer message', () => {
-                cy.visitStory('v1/Table/Display', 'WithCustomFooterMessage')
-                    .viewport('macbook-15')
-                    // verify table footer has custom message
-                    .get('.TableFooter-info')
-                    .should('contain.text', '4 Rows');
-            });
-        });
-
-        context('With no tableDataRowCount', () => {
-            it('Renders table with a valid footer message using the table data array length', () => {
-                cy.visitStory('v1/Table/Display', 'WithNoTableDataRowCount')
-                    .viewport('macbook-15')
-                    // verify table footer
-                    .get('.TableFooter-info')
-                    .should('contain.text', 'Showing 4 of 4');
-            });
-        });
-    });
-
-    context('Methods', () => {
-        context('Pagination (onPageChange)', () => {
-            it('Pagination functions properly', () => {
-                cy.visitStory('v1/Table/Methods', 'Pagination', {
-                    onBeforeLoad: contentWindow => {
-                        contentWindow.onPageChange = ({
-                            totalPages,
-                            currentPage,
-                            previousPage,
-                        }) => {
-                            console.log('onPageChange'); // eslint-disable-line no-console
-                        };
-                        cy.stub(contentWindow, 'onPageChange').as('pageChange');
-                    },
-                })
-                    // verify TableFooter message
-                    .get('.TableFooter-info')
-                    .should('contain', 'Showing 1-3 of 4')
-                    // make sure TableControls and TableControls-pagination divs exists
-                    .get('.TableControls')
-                    .get('.TableControls-pagination')
-                    // make sure Page 1 initially selected
-                    .get('.TableControls-pagination option:selected')
-                    .should('contain.text', 'Page 1')
-                    // change Page via select - cannot use selectItem method due to rerender of TableControls
-                    .get('.Select')
-                    .find('select')
-                    .select('2')
-                    .wait(500);
-
-                cy.get('@pageChange')
-                    .should('be.calledWith', {
-                        totalPages: 2,
-                        currentPage: 2,
-                        previousPage: 1,
-                    })
-                    // make sure Page 2 became selected
-                    .get('.TableControls-pagination option:selected')
-                    .should('contain.text', 'Page 2')
-                    // verify TableFooter message
-                    .get('.TableFooter-info')
-                    .should('contain', 'Showing 4-4 of 4')
-                    // change page via Prev arrow button and verify onPageChange called
-                    .get('.TableControls-pagination > .Button-secondary')
-                    .eq(0)
-                    .click()
-                    .wait(500);
-
-                cy.get('@pageChange')
-                    .should('be.calledWith', {
-                        totalPages: 2,
-                        currentPage: 1,
-                        previousPage: 2,
-                    })
-                    // change page via Next arrow button and verify onPageChange called
-                    .get('.TableControls-pagination > .Button-secondary')
-                    .eq(1)
-                    .click()
-                    .wait(500);
-
-                cy.get('@pageChange').should('be.calledWith', {
-                    currentPage: 2,
-                    previousPage: 1,
-                    totalPages: 2,
-                });
-            });
-        });
-
-        context('Sortable Headers (onSortChange)', () => {
-            beforeEach(() => {
-                cy.visitStory('v1/Table/Methods', 'WithSortableHeaders', {
-                    onBeforeLoad: contentWindow => {
-                        contentWindow.onSortChange = ({dataKey, sortOrder}) => {
-                            console.log('onSortChange'); // eslint-disable-line no-console
-                        };
-                        cy.stub(contentWindow, 'onSortChange').as('sortChange');
-                    },
-                });
-            });
-            it('Sorting functions properly - desktop via headers', () => {
-                cy.viewport('macbook-15')
-                    // make sortable headers exist where they should (email doesn't sort)
-                    // verify headings have class names
-                    .get('.TableHeading')
-                    .eq(0)
-                    .should('have.class', 'TableHeading-sortable')
-                    .get('.TableHeading')
-                    .eq(1)
-                    .should('have.class', 'TableHeading-sortable')
-                    .get('.TableHeading')
-                    .eq(2)
-                    .should('not.have.class', 'TableHeading-sortable')
-                    .get('.TableHeading')
-                    .eq(3)
-                    .should('have.class', 'TableHeading-sortable')
-                    // make sure Last Name initially selected and sorted in Descending order
-                    .get('.TableHeading')
-                    .eq(1)
-                    .should('have.class', 'TableHeading-sort-active')
-                    .should('have.class', 'TableHeading-sort-descending')
-                    // verify first table row
-                    .get('.TableBody > tr')
-                    .eq(0)
-                    .should('contain', 'Tony')
-                    .should('contain', 'Stark')
-                    .should('contain', 'ironman@avengers.com')
-                    .should('contain', '38')
-                    // click a non sortable column and verify no call is made
-                    .get('.AvengersTableHeading-email')
-                    .click()
-                    .wait(500)
-                    .get('@sortChange')
-                    .should('not.be.called')
-                    // change Sort via header - click the Age column header
-                    .get('.AvengersTableHeading-age')
-                    .click()
-                    .wait(500);
-                cy.get('@sortChange')
-                    .should('be.calledWith', {
-                        dataKey: 'age',
-                        sortOrder: ASC,
-                    })
-                    // verify row 1 data
-                    .get('.TableBody > tr')
-                    .eq(0)
-                    .should('contain', 'Bruce')
-                    .should('contain', 'Banner')
-                    .should('contain', 'hulksmash@avengers.com')
-                    .should('contain', '36')
-                    // change Sort via the same Age header
-                    .get('.AvengersTableHeading-age')
-                    .click()
-                    .wait(500);
-                cy.get('@sortChange')
-                    .should('be.calledWith', {
-                        dataKey: 'age',
-                        sortOrder: DESC,
-                    })
-                    // verify row 1 data
-                    .get('.TableBody > tr')
-                    .eq(0)
-                    .should('contain', 'Thor')
-                    .should('contain', 'Odinson')
-                    .should('contain', 'godofthunder@avengers.com')
-                    .should('contain', '1015');
-            });
-
-            it('Sorting functions properly - mobile via Select', () => {
-                cy.viewport('ipad-2')
-                    // make sortable headers exist where they should (email doesn't sort)
-                    // verify headings have class names
-                    .get('.TableHeading')
-                    .eq(0)
-                    .should('have.class', 'TableHeading-sortable')
-                    .get('.TableHeading')
-                    .eq(1)
-                    .should('have.class', 'TableHeading-sortable')
-                    .get('.TableHeading')
-                    .eq(2)
-                    .should('not.have.class', 'TableHeading-sortable')
-                    .get('.TableHeading')
-                    .eq(3)
-                    .should('have.class', 'TableHeading-sortable')
-                    // make sure Last Name initially selected and sorted in Descending order
-                    .get('option:selected')
-                    .contains(`Last Name - ${DESC}`)
-                    .should('have.value', `lastName-${DESC}`)
-                    // verify first table row
-                    .get('.TableBody > tr')
-                    .eq(0)
-                    .should('contain', 'Tony')
-                    .should('contain', 'Stark')
-                    .should('contain', 'ironman@avengers.com')
-                    .should('contain', '38')
-                    // verify no Email option(s) in sort Select
-                    .get('.Select')
-                    .should('not.contain', 'Email')
-                    // change Sort via select - click the Age - Ascending option
-                    // cannot use selectItem method due to rerender of TabNavigation
-                    .get('select')
-                    .select(`age-${ASC}`)
-                    .wait(500);
-                cy.get('@sortChange')
-                    .should('be.calledWith', {
-                        dataKey: 'age',
-                        sortOrder: ASC,
-                    })
-                    // verify row 1 data
-                    .get('.TableBody > tr')
-                    .eq(0)
-                    .should('contain', 'Bruce')
-                    .should('contain', 'Banner')
-                    .should('contain', 'hulksmash@avengers.com')
-                    .should('contain', '36')
-                    // change Sort via select - click the Age - Descending option
-                    // cannot use selectItem method due to rerender of TabNavigation
-                    .get('select')
-                    .select(`age-${DESC}`)
-                    .wait(500);
-                cy.get('@sortChange')
-                    .should('be.calledWith', {
-                        dataKey: 'age',
-                        sortOrder: DESC,
-                    })
-                    // verify row 1 data
-                    .get('.TableBody > tr')
-                    .eq(0)
-                    .should('contain', 'Thor')
-                    .should('contain', 'Odinson')
-                    .should('contain', 'godofthunder@avengers.com')
-                    .should('contain', '1015');
-            });
-        });
-
-        context('With sorting via function', () => {
-            it('Sorting with function works properly', () => {
-                cy.visitStory('v1/Table/Methods', 'WithSortingFunction', {
-                    onBeforeLoad: contentWindow => {
-                        // sorting function will be passed the item object
-                        // in this case, we have firstName, lastName, and email
-                        contentWindow.sorting = ({
-                            firstName,
-                            lastName,
-                            email,
-                            age,
-                        }) => {
-                            console.log('sorting'); // eslint-disable-line no-console
-                        };
-                        cy.stub(contentWindow, 'sorting').as('sorting');
-                    },
-                })
-                    // verify first table row
-                    .get('.TableBody > tr')
-                    .eq(0)
-                    .should('contain', 'Bruce')
-                    .should('contain', 'Banner')
-                    .should('contain', 'hulksmash@avengers.com')
-                    .should('contain', '36')
-                    // verify sorting function was called 4 times, once per data object
-                    .get('@sorting')
-                    .should('have.callCount', 4)
-                    .should('be.calledWith', {
-                        firstName: 'Tony',
-                        lastName: 'Stark',
-                        email: 'ironman@avengers.com',
-                        age: 38,
-                    })
-                    .should('be.calledWith', {
-                        firstName: 'Bruce',
-                        lastName: 'Banner',
-                        email: 'hulksmash@avengers.com',
-                        age: 36,
-                    })
-                    .should('be.calledWith', {
-                        firstName: 'Steve',
-                        lastName: 'Rogers',
-                        email: 'captamerica@avengers.com',
-                        age: 104,
-                    })
-                    .should('be.calledWith', {
-                        firstName: 'Thor',
-                        lastName: 'Odinson',
-                        email: 'godofthunder@avengers.com',
-                        age: 1015,
-                    });
-            });
-        });
-    });
-});

package/styles/v1/components/Table/TableCell.jsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import TableCellPropTypes from './TableCellPropTypes';
-
-const TableCell = ({className, headingLabel, value}) => {
-    const classes = classNames('TableCell', className);
-
-    return (
-        <td className={classes} data-label={headingLabel}>
-            <div>{value}</div>
-        </td>
-    );
-};
-
-TableCell.propTypes = TableCellPropTypes;
-
-export default TableCell;

package/styles/v1/components/Table/TableCellPropTypes.js

@@ -1,10 +0,0 @@
-import PropTypes from 'prop-types';
-
-export default {
-    /** Additional class(es) to add to the component. */
-    className: PropTypes.string,
-    /** The header label that is used to display on smaller viewports above the cell's data. */
-    headingLabel: PropTypes.string.isRequired,
-    /** The data to populate inside of the cell. */
-    value: PropTypes.any,
-};

package/styles/v1/components/Table/TableControls.jsx

@@ -1,61 +0,0 @@
-import times from 'lodash/times';
-import React from 'react';
-import PropTypes from 'prop-types';
-import IconChevronLeft from '@spothero/icons/chevron-left';
-import IconChevronRight from '@spothero/icons/chevron-right';
-import Button from 'v1/components/Button/Button';
-import Select from '../../../Select/Select';
-
-const TableControls = ({
-    currentPage,
-    totalPages,
-    onPageChange,
-    onPreviousPage,
-    onNextPage,
-}) => {
-    const pages = times(totalPages, value => {
-        const page = (value + 1).toString();
-
-        return {
-            label: `Page ${page}`,
-            value: page,
-        };
-    });
-
-    return (
-        <div className="TableControls">
-            <div className="TableControls-pagination">
-                <Button
-                    color="secondary"
-                    disabled={currentPage === 1}
-                    onClick={onPreviousPage}
-                >
-                    <IconChevronLeft />
-                </Button>
-                <Select
-                    key={new Date()}
-                    defaultValue={currentPage.toString()}
-                    items={pages}
-                    onChange={onPageChange}
-                />
-                <Button
-                    color="secondary"
-                    disabled={currentPage === totalPages}
-                    onClick={onNextPage}
-                >
-                    <IconChevronRight />
-                </Button>
-            </div>
-        </div>
-    );
-};
-
-TableControls.propTypes = {
-    currentPage: PropTypes.number.isRequired,
-    totalPages: PropTypes.number.isRequired,
-    onPageChange: PropTypes.func.isRequired,
-    onPreviousPage: PropTypes.func.isRequired,
-    onNextPage: PropTypes.func.isRequired,
-};
-
-export default TableControls;