@spothero/ui 15.10.8 → 16.0.0-beta.0

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

@@ -1,72 +0,0 @@
-import max from 'lodash/max';
-import min from 'lodash/min';
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import TableControls from './TableControls';
-
-const TableFooter = ({
-    rowSize,
-    pageSize,
-    totalDataRowCount,
-    currentPage,
-    totalPages,
-    currentPageLength,
-    showMessage,
-    message,
-    onPageChange,
-    onPreviousPage,
-    onNextPage,
-}) => {
-    const classes = classNames('TableFooter', {
-        'TableFooter-large': rowSize === 'large',
-    });
-    const totalCount = max([currentPageLength, totalDataRowCount]);
-    const displayMessage = message
-        ? message
-        : totalPages > 1
-        ? `Showing ${(currentPage - 1) * pageSize + 1}-${min([
-              currentPage * pageSize,
-              totalCount,
-          ])} of ${totalCount}`
-        : `Showing ${currentPageLength} of ${totalCount}`;
-
-    if (!currentPageLength) {
-        return null;
-    }
-
-    return (
-        <div className="TableFooter-container">
-            <div className={classes}>
-                {showMessage && (
-                    <div className="TableFooter-info">{displayMessage}</div>
-                )}
-                {totalPages > 1 && (
-                    <TableControls
-                        currentPage={currentPage}
-                        totalPages={totalPages}
-                        onPageChange={onPageChange}
-                        onPreviousPage={onPreviousPage}
-                        onNextPage={onNextPage}
-                    />
-                )}
-            </div>
-        </div>
-    );
-};
-
-TableFooter.propTypes = {
-    rowSize: PropTypes.string.isRequired,
-    pageSize: PropTypes.number.isRequired,
-    totalDataRowCount: PropTypes.number.isRequired,
-    currentPage: PropTypes.number.isRequired,
-    totalPages: PropTypes.number.isRequired,
-    currentPageLength: PropTypes.number.isRequired,
-    showMessage: PropTypes.bool.isRequired,
-    message: PropTypes.node,
-    onPageChange: PropTypes.func.isRequired,
-    onPreviousPage: PropTypes.func.isRequired,
-    onNextPage: PropTypes.func.isRequired,
-};
-
-export default React.memo(TableFooter);

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

@@ -1,58 +0,0 @@
-import React, {Component} from 'react';
-import classNames from 'classnames';
-import IconTriangleDown from '@spothero/icons/triangle-down';
-import IconTriangleUp from '@spothero/icons/triangle-up';
-import TableHeadingPropTypes from './TableHeadingPropTypes';
-import TableSortType from './TableSortType';
-
-const {ASC, DESC} = TableSortType;
-
-export default class TableHeading extends Component {
-    static propTypes = TableHeadingPropTypes;
-
-    _onSortToggleClick = () => {
-        const {dataKey, sortOrder, onSortClick} = this.props;
-
-        onSortClick({
-            dataKey,
-            sortOrder: !sortOrder ? ASC : sortOrder === ASC ? DESC : ASC,
-        });
-    };
-
-    render() {
-        const {className, label, dataKey, sortOrder, isSortable} = this.props;
-        const hasActiveSort = isSortable && sortOrder;
-        const sortOrderClass = hasActiveSort
-            ? `TableHeading-sort-${sortOrder.toLowerCase()}`
-            : '';
-        const classes = classNames(
-            'TableHeading',
-            {'TableHeading-sortable': isSortable},
-            {'TableHeading-sort-active': hasActiveSort},
-            sortOrderClass,
-            className,
-            dataKey
-        );
-        const headingProps = {
-            className: classes,
-        };
-        const Icon = sortOrder === ASC ? IconTriangleUp : IconTriangleDown;
-
-        if (isSortable) {
-            headingProps.onClick = this._onSortToggleClick;
-        }
-
-        return (
-            <th {...headingProps}>
-                <div className="TableHeading-content">
-                    <div className="TableHeading-label">{label}</div>
-                    {isSortable && sortOrder && (
-                        <div className="TableHeading-sort">
-                            <Icon className="TableHeading-sort-icon" />
-                        </div>
-                    )}
-                </div>
-            </th>
-        );
-    }
-}

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

@@ -1,20 +0,0 @@
-import PropTypes from 'prop-types';
-import TableSortType from './TableSortType';
-
-export default {
-    /** Additional class(es) to add to the component. */
-    className: PropTypes.string,
-    /** The header label. */
-    label: PropTypes.string.isRequired,
-    /** Determines whether or not table can sort by header cell dataKey. */
-    isSortable: PropTypes.bool,
-    /** Determines whether or not this heading should render with sorting order arrow. */
-    sortOrder: PropTypes.oneOf([TableSortType.ASC, TableSortType.DESC]),
-    /**
-     * A function to call when a sortable header is clicked.
-     *
-     * @param {String} dataKey - The header's dataKey.
-     * @param {String} sortOrder - The sort order to use (ASC or DESC).
-     */
-    onSortClick: PropTypes.func,
-};

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

@@ -1,63 +0,0 @@
-import forEach from 'lodash/forEach';
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import Select from '../../../Select/Select';
-import TableSortType from './TableSortType';
-
-const {ASC, DESC} = TableSortType;
-
-export default class TableSortSelector extends Component {
-    static propTypes = {
-        headers: PropTypes.array.isRequired,
-        sortOrder: PropTypes.oneOf([ASC, DESC]),
-        sortDataKey: PropTypes.string,
-        onSortChange: PropTypes.func.isRequired,
-    };
-
-    constructor(props) {
-        super(props);
-
-        this._HEADERS = props.headers;
-        this._sortItems = [];
-
-        forEach(this._HEADERS, ({isSortable, label, dataKey}) => {
-            if (isSortable) {
-                this._sortItems.push({
-                    label: `${label} - ${ASC}`,
-                    value: `${dataKey}-${ASC}`,
-                });
-                this._sortItems.push({
-                    label: `${label} - ${DESC}`,
-                    value: `${dataKey}-${DESC}`,
-                });
-            }
-        });
-    }
-
-    _onSortChange = ({value}) => {
-        const [dataKey, sortOrder] = value.split('-');
-
-        this.props.onSortChange({
-            dataKey,
-            sortOrder,
-        });
-    };
-
-    render() {
-        const {sortOrder, sortDataKey} = this.props;
-        const defaultSortValue =
-            sortDataKey && sortOrder ? `${sortDataKey}-${sortOrder}` : null;
-
-        return (
-            <div className="TableSortSelector">
-                <Select
-                    key={defaultSortValue}
-                    className="TableSortSelector-Select"
-                    defaultValue={defaultSortValue}
-                    items={this._sortItems}
-                    onChange={this._onSortChange}
-                />
-            </div>
-        );
-    }
-}

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

@@ -1,4 +0,0 @@
-export default {
-    ASC: 'Ascending',
-    DESC: 'Descending',
-};

package/styles/v1/components/Table/_Table.scss

@@ -1,263 +0,0 @@
-.Table {
-    border-collapse: collapse;
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    table-layout: fixed;
-    color: $color-fuel;
-}
-
-.TableHead {
-    position: absolute;
-    clip: rect(0 0 0 0);
-    width: 1px;
-    height: 1px;
-    margin: -1px;
-    padding: 0;
-    overflow: hidden;
-    text-transform: uppercase;
-
-    @include breakpoint($breakpoint-lg) {
-        position: static;
-        clip: none;
-        width: auto;
-        height: auto;
-        margin: auto;
-        padding: auto;
-        overflow: auto;
-
-        > tr {
-            color: $color-cement;
-            font-weight: $font-weight-semi-bold;
-            border-bottom: 1px solid $color-dashboard;
-
-            > th {
-                padding: 15px 0 15px 20px;
-                text-align: left;
-                background-color: $color-white;
-
-                &:first-child {
-                    border-top-left-radius: 4px;
-                }
-
-                &:last-child {
-                    border-top-right-radius: 4px;
-                }
-            }
-        }
-    }
-}
-
-.TableHeading-sortable {
-    cursor: pointer;
-}
-
-.TableHeading-content {
-    display: flex;
-    width: 100%;
-    align-items: center;
-}
-
-.TableHeading-sort {
-    margin-left: 6px;
-}
-
-.TableHeading-sort-icon {
-    width: 10px;
-    height: 10px;
-    margin-top: -2px;
-}
-
-.TableBody {
-    > tr {
-        display: block;
-        margin: 0 0 20px;
-        padding: 20px;
-        background-color: $color-white;
-        border-radius: 4px;
-        vertical-align: top;
-
-        &:last-child {
-            margin-bottom: 0;
-        }
-
-        > td {
-            display: block;
-            margin-bottom: 12px;
-
-            &::before {
-                display: block;
-                margin-bottom: 5px;
-                content: attr(data-label);
-                color: $color-cement;
-                font-weight: $font-weight-semi-bold;
-                text-transform: uppercase;
-            }
-
-            &:last-child {
-                margin-bottom: 0;
-            }
-
-            &.Table-no-data {
-                text-align: center;
-            }
-        }
-
-        @include breakpoint($breakpoint-lg) {
-            border-bottom: 1px solid $color-dashboard;
-            border-radius: 0;
-
-            &:last-child {
-                border-bottom: none;
-            }
-        }
-    }
-
-    &.Table-no-data {
-        > tr {
-            width: 100%;
-
-            > td {
-                text-align: center;
-            }
-        }
-    }
-
-    @include breakpoint($breakpoint-md) {
-        > tr {
-            display: inline-block;
-            width: calc(50% - 10px);
-
-            &:nth-child(even) {
-                margin-left: 20px;
-            }
-        }
-    }
-
-    @include breakpoint($breakpoint-lg) {
-        > tr {
-            > td {
-                background-color: $color-white;
-
-                > div {
-                    padding: 15px 0 15px 20px;
-                }
-            }
-        }
-    }
-}
-
-.TableHead,
-.TableBody {
-    @include breakpoint($breakpoint-lg) {
-        > tr {
-            display: table-row;
-            width: auto;
-            text-align: left;
-            background-color: transparent;
-
-            &:nth-child(even) {
-                margin-left: 0;
-            }
-
-            > td {
-                display: table-cell;
-                vertical-align: top;
-
-                &::before {
-                    display: none;
-                }
-            }
-        }
-    }
-}
-
-.Table-large {
-    @include breakpoint($breakpoint-lg) {
-        .TableBody {
-            > tr {
-                > td {
-                    > div {
-                        padding-top: 27px;
-                        padding-bottom: 27px;
-                    }
-                }
-            }
-        }
-    }
-}
-
-.TableFooter-container {
-    @extend %clearfix;
-}
-
-.TableFooter {
-    float: right;
-    margin-top: 20px;
-    background-color: $color-white;
-    border-radius: 4px;
-
-    @include breakpoint($breakpoint-lg) {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        float: none;
-        margin-top: 0;
-        border-top: 1px solid $color-dashboard;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-    }
-}
-
-.TableFooter-info {
-    display: none;
-
-    @include breakpoint($breakpoint-lg) {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: $color-cement;
-        padding: 15px 20px;
-        text-align: left;
-    }
-}
-
-.TableControls {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 4px 20px;
-}
-
-.TableControls-pagination {
-    .Select {
-        display: inline-block;
-        margin: 0 8px;
-        vertical-align: top;
-    }
-
-    .Button {
-        padding-left: 8px;
-        padding-right: 8px;
-        background-color: transparent;
-        border: none;
-    }
-}
-
-.TableSortSelector {
-    display: flex;
-    flex-direction: row-reverse;
-    margin-bottom: 20px;
-
-    @include breakpoint($breakpoint-lg) {
-        display: none;
-    }
-}
-
-.TableSortSelector-Select {
-    width: 100%;
-
-    @include breakpoint($breakpoint-md) {
-        width: calc(50% - 10px);
-    }
-}

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

@@ -1,5 +0,0 @@
-export {default as Table} from './Table';
-export {default as TableControls} from './TableControls';
-export {default as TableSortType} from './TableSortType';
-export {default as TableCellPropTypes} from './TableCellPropTypes';
-export {default as TableHeadingPropTypes} from './TableHeadingPropTypes';

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

@@ -1,194 +0,0 @@
-import React from 'react';
-import Table from '../Table';
-import data from './helpers/table-data';
-import headers from './helpers/table-headers';
-import TableCustomRow from './helpers/TableCustomRow';
-import TableCellEmail from './helpers/TableCellEmail';
-import TableHeadingEmail from './helpers/TableHeadingEmail';
-
-import TableCell from '../TableCell';
-import TableFooter from '../TableFooter';
-import TableHeading from '../TableHeading';
-import TableControls from '../TableControls';
-import TableSortSelector from '../TableSortSelector';
-
-export default {
-    component: Table,
-    title: 'v1/Table/Display',
-    subcomponents: {
-        TableCell,
-        TableFooter,
-        TableHeading,
-        TableControls,
-        TableSortSelector,
-    },
-};
-
-export const Default = () => {
-    return (
-        <Table data={data} headers={headers} totalDataRowCount={data.length} />
-    );
-};
-
-export const NoData = () => {
-    return <Table headers={headers} data={[]} />;
-};
-
-export const NoDataCustomMessage = () => {
-    return (
-        <Table
-            data={[]}
-            headers={headers}
-            noDataAvailableMessage="The Avengers are no more!"
-        />
-    );
-};
-
-export const WithClassNames = () => {
-    const TableData = data.map(({firstName, lastName, email, age}) => ({
-        firstName: {
-            value: firstName,
-            className: 'AvengersTableCell-first-name',
-        },
-        lastName: {
-            value: lastName,
-            className: 'AvengersTableCell-last-name',
-        },
-        email: {
-            value: email,
-            className: 'AvengersTableCell-email',
-        },
-        age: {
-            value: age,
-            className: 'AvengersTableCell-age',
-        },
-    }));
-
-    return (
-        <Table
-            data={TableData}
-            headers={headers}
-            className="AvengersTable"
-            totalDataRowCount={TableData.length}
-            containerClassName="AvengersTable-container"
-        />
-    );
-};
-
-export const WithRowClassNames = () => {
-    const TableData = data.map(row => ({
-        ...row,
-        className: 'TableRow',
-    }));
-
-    return (
-        <Table
-            data={TableData}
-            headers={headers}
-            className="AvengersTable"
-            totalDataRowCount={TableData.length}
-            containerClassName="AvengersTable-container"
-        />
-    );
-};
-
-export const WithCustomFooterMessage = () => {
-    return (
-        <Table
-            data={data}
-            headers={headers}
-            totalDataRowCount={data.length}
-            footerMessage={`${data.length} Rows`}
-        />
-    );
-};
-
-export const WithCustomRenders = () => {
-    const renderEmailCell = cellProps => <TableCellEmail {...cellProps} />;
-    const renderEmailHeading = headingProps => (
-        <TableHeadingEmail {...headingProps} />
-    );
-    const customHeaders = headers.map(heading => {
-        return {
-            ...heading,
-            render: /email/i.test(heading.label) ? renderEmailHeading : null,
-        };
-    });
-    const customData = data.map(({age, email, lastName, firstName}) => ({
-        age,
-        lastName,
-        firstName,
-        email: {
-            value: email,
-            render: renderEmailCell,
-        },
-    }));
-
-    return (
-        <Table
-            data={customData}
-            headers={customHeaders}
-            className="AvengersTable"
-            totalDataRowCount={customData.length}
-        />
-    );
-};
-
-export const WithCustomRowRender = () => {
-    // eslint-disable-next-line react/prop-types
-    const renderCustomRow = ({key, row}) => {
-        return <TableCustomRow key={key} {...row} />;
-    };
-    const customData = data.map(hero => {
-        return {
-            ...hero,
-            customRowRender: renderCustomRow,
-        };
-    });
-
-    return (
-        <Table
-            className="AvengersTable"
-            headers={headers}
-            data={customData}
-            totalDataRowCount={customData.length}
-        />
-    );
-};
-
-export const WithLargeRows = () => {
-    return (
-        <Table
-            data={data}
-            rowSize="large"
-            headers={headers}
-            totalDataRowCount={data.length}
-        />
-    );
-};
-
-export const WithNoFooterMessage = () => {
-    return (
-        <Table
-            data={data}
-            headers={headers}
-            showFooterMessage={false}
-            totalDataRowCount={data.length}
-        />
-    );
-};
-
-export const WithNoTableDataRowCount = () => {
-    return <Table headers={headers} data={data} />;
-};
-
-export const WithSortingArray = () => {
-    return (
-        <Table
-            data={data}
-            headers={headers}
-            sorting={['firstName']}
-            totalDataRowCount={data.length}
-        />
-    );
-};