@spothero/ui 15.10.8 → 16.0.0-beta.0

package/styles/common/sass/_disable-scrolling.scss

@@ -1,7 +0,0 @@
-%disable-scrolling {
-    overflow: hidden;
-
-    body {
-        overflow: hidden;
-    }
-}

package/styles/common/sass/_forms.scss

@@ -1,72 +0,0 @@
-%form-element {
-    .FormElement-control {
-        position: relative;
-    }
-
-    .FormElement-item {
-        @extend %form-element-item;
-        @extend %control-size;
-        height: 38px;
-        line-height: 38px;
-    }
-
-    .FormElement-help-text {
-        font-size: 12px;
-        margin-top: 8px;
-        color: $color-cement;
-    }
-
-    &.FormElement-contains-error {
-        @extend %form-element-error;
-    }
-}
-
-%form-element-item {
-    @include font-family;
-    display: block;
-    width: 100%;
-    background-color: $color-white;
-    background-image: none;
-    border: 1px solid $color-dashboard;
-    color: $color-black;
-    font-weight: $font-weight-normal;
-    outline: none;
-    position: relative;
-    appearance: none;
-
-    &:focus {
-        border-color: $color-go;
-    }
-
-    &:disabled {
-        cursor: not-allowed;
-        color: $color-cement;
-        background-color: $color-pavement;
-        opacity: 1; // Mobile Safari sets opacity to 0.4... Why?
-    }
-
-    &:invalid {
-        box-shadow: none;
-    }
-
-    &::placeholder {
-        color: $color-dashboard;
-    }
-}
-
-/* stylelint-disable declaration-no-important */
-%form-element-error {
-    .Label {
-        color: $color-stop !important;
-    }
-
-    .FormElement-item {
-        color: $color-stop !important;
-        border-color: $color-stop !important;
-
-        &::placeholder {
-            color: $color-stop !important;
-        }
-    }
-}
-/* stylelint-enable declaration-no-important */

package/styles/index.js

@@ -1,50 +0,0 @@
-export {Radio, RadioGroup} from './Radio';
-export {default as Alert} from './Alert/Alert';
-export {default as Badge} from './Badge/Badge';
-export {default as Chart} from './Chart/Chart';
-export {default as Label} from './Label/Label';
-export {default as Flyout} from './Flyout/Flyout';
-export {default as Portal} from './Portal/Portal';
-export {default as Sprite} from './Sprite/Sprite';
-export {default as Tooltip} from './Tooltip/Tooltip';
-export {Select, SelectItemPropTypes} from './Select';
-export {default as Checkbox} from './Checkbox/Checkbox';
-export {default as TextArea} from './TextArea/TextArea';
-export {TextInput, TextInputPropTypes} from './TextInput';
-export {default as PulseLoader} from './PulseLoader/PulseLoader';
-export {default as RenderInBody} from './RenderInBody/RenderInBody';
-export {Tab, TabContent, TabNavigation, TabPanel, Tabs} from './Tabs';
-export {default as ErrorBoundary} from './ErrorBoundary/ErrorBoundary';
-export {Form, FormElementError, FormGroup, FormGroupError} from './Form';
-export {default as HorizontalRule} from './HorizontalRule/HorizontalRule';
-export {NotificationContainer, NotificationPropTypes} from './Notification';
-export {default as PasswordControl} from './PasswordControl/PasswordControl';
-export {default as AutoSuggestInput} from './AutoSuggestInput/AutoSuggestInput';
-
-export {
-    TimePicker,
-    DatePicker,
-    DateTimePicker,
-    DatePickerCalendar,
-    DateTimeRangePicker,
-    DatePickerCalendarWithRange,
-} from './DateTime';
-
-export {
-    PoweredByGoogle,
-    GooglePlacesSearchInput,
-} from './GooglePlacesSearchInput';
-
-export {
-    Table,
-    TableControls,
-    TableSortType,
-    TableCellPropTypes,
-    TableHeadingPropTypes,
-} from './v1/components/Table';
-export {default as Panel} from './v1/components/Panel/Panel';
-export {default as Button} from './v1/components/Button/Button';
-export {default as TextButton} from './v1/components/TextButton/TextButton';
-export {default as Image} from './v1/components/Image/Image';
-export {default as Loader} from './v1/components/Loader/Loader';
-export {Modal, ModalContent, ModalFooter} from './v1/components/Modal';

package/styles/v1/components/Button/Button.jsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import ButtonProps from './button-props';
-
-import deprecate from 'v1/utils/deprecate';
-
-deprecate({
-    name: 'Button',
-    changes: [
-        'iconPosition has been removed, iconLeft and iconRight have replaced it.',
-        'color is now variant and takes in new values.',
-        'block was removed, if full width is needed, use isFullWidth',
-        'loading was replaced by isLoading',
-    ],
-});
-
-const Button = ({
-    className,
-    color,
-    iconPosition,
-    block,
-    loading,
-    asAnchor,
-    type,
-    ...attrs
-}) => {
-    const classes = classNames(
-        'Button',
-        {[`Button-${color}`]: color},
-        {'Button-block': block},
-        {'Button-loading': loading},
-        {[`Button-with-icon-${iconPosition}`]: iconPosition},
-        className
-    );
-    const {finalType, Element} = asAnchor
-        ? {Element: 'a'}
-        : {Element: 'button', finalType: type};
-
-    return <Element className={classes} type={finalType} {...attrs} />;
-};
-
-Button.propTypes = ButtonProps;
-
-Button.defaultProps = {
-    type: 'button',
-};
-
-export default Button;

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

@@ -1,76 +0,0 @@
-import React from 'react';
-import userEvent from '@testing-library/user-event';
-import {render, screen} from '@testing-library/react';
-import {build, fake} from '@jackfranklin/test-data-bot';
-
-import Button from './Button';
-
-const buttonProps = build('Button', {
-    fields: {
-        href: null,
-        asAnchor: false,
-        disabled: false,
-        color: 'primary',
-        onClick: jest.fn(),
-        children: fake(f => f.random.words(2)),
-    },
-});
-
-const setup = props => render(<Button {...props} />);
-
-describe('<Button />', () => {
-    it('renders properly', () => {
-        const props = buttonProps();
-
-        setup(props);
-
-        const {getByRole, getByText} = screen;
-
-        expect(getByRole('button')).toBeInTheDocument();
-        expect(getByText(props.children)).toBeInTheDocument();
-    });
-
-    it('can be clicked by default', () => {
-        const props = buttonProps();
-
-        setup(props);
-
-        const {getByRole} = screen;
-
-        userEvent.click(getByRole('button'));
-
-        expect(props.onClick).toHaveBeenCalled();
-    });
-
-    it('can be disabled', () => {
-        const props = buttonProps({
-            overrides: {
-                disabled: true,
-            },
-        });
-
-        setup(props);
-
-        const {getByRole} = screen;
-
-        userEvent.click(getByRole('button'));
-
-        expect(props.onClick).not.toHaveBeenCalled();
-    });
-
-    it('can be an anchor tag', () => {
-        const props = buttonProps({
-            overrides: {
-                href: '#',
-                asAnchor: true,
-            },
-        });
-
-        setup(props);
-
-        const {queryByRole, getByRole} = screen;
-
-        expect(queryByRole('button')).toBeNull();
-        expect(getByRole('link')).toBeInTheDocument();
-    });
-});

package/styles/v1/components/Button/_Button.scss

@@ -1,178 +0,0 @@
-@keyframes Button-loading-rotate {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-.Button {
-    @extend %control-size;
-    @include font-family;
-    padding: 10px 30px;
-    text-align: center;
-    font-weight: $font-weight-semi-bold;
-    white-space: nowrap;
-    cursor: pointer;
-    display: inline-block;
-    user-select: none;
-    appearance: none;
-    background: none;
-    border: none;
-    margin: 0;
-    position: relative;
-    outline: none;
-    transition: background-color $animation, color $animation, border $animation;
-
-    &:focus,
-    &:active {
-        outline: none;
-    }
-
-    &:disabled {
-        cursor: not-allowed;
-    }
-
-    &::before {
-        opacity: 0;
-        transition: opacity 0.25s;
-    }
-
-    &::after {
-        content: "";
-        display: inline-block;
-        width: 0;
-        transition-property: width;
-        line-height: 1;
-    }
-
-    .Icon {
-        position: relative;
-        margin: -3px 0 0;
-        width: 12px;
-        height: 12px;
-    }
-}
-
-.Button-block {
-    display: block;
-    width: 100%;
-}
-
-.Button-with-icon-left {
-    .Icon {
-        margin-right: 5px;
-    }
-}
-
-.Button-with-icon-right {
-    .Icon {
-        margin-left: 5px;
-    }
-}
-
-.Button-primary {
-    background-color: $color-shift;
-    color: $color-white;
-    border: 1px solid $color-shift;
-
-    &:not([disabled]) {
-        &:hover {
-            background-color: $color-shift-hover;
-            border-color: $color-shift-hover;
-            color: $color-white;
-        }
-    }
-
-    &:disabled {
-        background-color: $color-dashboard;
-        color: $color-white;
-        border: 1px solid $color-dashboard;
-    }
-}
-
-.Button-secondary {
-    background-color: $color-white;
-    color: $color-shift;
-    border: 1px solid $color-dashboard;
-
-    &:not([disabled]) {
-        &:hover {
-            border-color: $color-shift;
-        }
-    }
-
-    &:disabled {
-        background-color: $color-pavement;
-        color: $color-cement;
-        border: 1px solid $color-dashboard;
-    }
-}
-
-.Button-tertiary {
-    background-color: $color-white;
-    color: $color-cement;
-    border: 1px solid $color-dashboard;
-
-    &:not([disabled]) {
-        &:hover {
-            border-color: $color-shift;
-        }
-    }
-
-    &:disabled {
-        background-color: $color-pavement;
-        color: $color-cement;
-        border: 1px solid $color-dashboard;
-    }
-}
-
-.Button-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: Button-loading-rotate;
-        animation-timing-function: linear;
-    }
-
-    &:not([disabled]) {
-        background-color: $color-pavement;
-        color: $color-cement;
-        border: 1px solid $color-dashboard;
-        opacity: 0.8;
-    }
-
-    &.Button {
-        &::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/Button/button-props.js

@@ -1,30 +0,0 @@
-import PropTypes from 'prop-types';
-
-const props = {
-    /** Additional class(es) to add to the component. */
-    className: PropTypes.string,
-    /** The markup node to insert into the button. */
-    children: PropTypes.node,
-    /** The type of button that is rendered. */
-    type: PropTypes.oneOf(['button', 'submit', 'reset']),
-    /** The color of the button. */
-    color: PropTypes.oneOf(['primary', 'secondary', 'tertiary']),
-    /** 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,
-    /** Determines if the underlying HTML element should be an <a> or <button>. */
-    asAnchor: PropTypes.bool,
-};
-
-export default props;

package/styles/v1/components/Button/stories/button.js

@@ -1,20 +0,0 @@
-import React from 'react';
-
-import IconCheck from '@spothero/icons/check';
-
-import Component from '../Button';
-import ButtonProps from '../button-props';
-
-const ButtonTemplate = ({children, iconPosition, ...props}) => {
-    return (
-        <Component {...props} iconPosition={iconPosition}>
-            {iconPosition === 'left' && <IconCheck />}
-            {children}
-            {iconPosition === 'right' && <IconCheck />}
-        </Component>
-    );
-};
-
-ButtonTemplate.propTypes = ButtonProps;
-
-export default ButtonTemplate;

package/styles/v1/components/Button/stories/index.stories.js

@@ -1,92 +0,0 @@
-import ButtonTemplate from './button';
-import OverviewTemplate from './overview';
-
-import Button from '../Button';
-import disableArgs from 'storybook/utils/disable-args';
-
-import {createSelectControl} from 'storybook/utils/create-control';
-
-const iconPositionControl = createSelectControl('iconPosition', [
-    'left',
-    'right',
-]);
-
-export default {
-    title: 'v1/Button',
-    component: {Button},
-    parameters: {
-        importBy: 'Button',
-        removeBaseHtmlClass: true,
-    },
-    argTypes: {
-        ...createSelectControl('color', ['primary', 'secondary', 'tertiary']),
-        ...disableArgs(['children']),
-    },
-};
-
-export const Overview = OverviewTemplate.bind({});
-Overview.argTypes = {
-    ...iconPositionControl,
-    ...disableArgs(['children', 'color']),
-};
-Overview.args = {
-    iconPosition: 'left',
-};
-
-export const Color = ButtonTemplate.bind({});
-Color.args = {
-    children: 'Primary',
-    color: 'primary',
-};
-
-export const Disabled = ButtonTemplate.bind({});
-Disabled.args = {
-    disabled: true,
-    children: 'Primary',
-    color: 'primary',
-};
-
-export const Loading = ButtonTemplate.bind({});
-Loading.args = {
-    loading: true,
-    children: 'Primary',
-    color: 'primary',
-};
-
-export const IconPosition = ButtonTemplate.bind({});
-IconPosition.argTypes = iconPositionControl;
-IconPosition.args = {
-    iconPosition: 'left',
-    children: 'Primary',
-    color: 'primary',
-};
-
-export const Block = ButtonTemplate.bind({});
-Block.args = {
-    block: true,
-    children: 'Primary',
-    color: 'primary',
-};
-
-export const AsAnchor = ButtonTemplate.bind({});
-AsAnchor.args = {
-    asAnchor: true,
-    children: 'Primary',
-    color: 'primary',
-};
-
-export const Type = ButtonTemplate.bind({});
-
-Type.argTypes = {
-    type: {
-        control: {
-            type: 'select',
-            options: ['button', 'reset', 'submit'],
-        },
-    },
-};
-Type.args = {
-    type: 'button',
-    children: 'Primary',
-    color: 'primary',
-};

package/styles/v1/components/Button/stories/overview.js

@@ -1,87 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import capitalize from 'lodash/capitalize';
-import {Box, ButtonGroup} from '@chakra-ui/react';
-
-import IconCheck from '@spothero/icons/check';
-
-import Component from '../Button';
-import Text from 'v2/components/Text/Text';
-import sharedStyleProps from 'storybook/utils/shared-style-props';
-
-const variationsArray = ({color, iconPosition}) => [
-    {
-        color,
-        children: color,
-    },
-    {
-        color,
-        children: `${color} disabled`,
-        disabled: true,
-    },
-    {
-        color,
-        children: `${color} loading`,
-        loading: true,
-    },
-    {
-        color,
-        iconPosition,
-        children: (
-            <>
-                {iconPosition === 'left' && <IconCheck width="1rem" />}
-
-                {`Icon ${iconPosition}`}
-
-                {iconPosition === 'right' && <IconCheck width="1rem" />}
-            </>
-        ),
-    },
-    {
-        color,
-        children: `${color} asAnchor`,
-        asAnchor: true,
-        href: '#',
-    },
-];
-
-const styles = {
-    heading: {
-        ...sharedStyleProps.headingStyles,
-    },
-    stateContainer: {
-        display: 'flex',
-        flexDirection: 'column',
-        marginBottom: 4,
-    },
-    buttonGroup: {
-        display: 'flex',
-        flexWrap: 'wrap',
-        alignContent: 'space-between',
-    },
-};
-
-const OverviewTemplate = ({iconPosition}) => (
-    <Box>
-        {['primary', 'secondary', 'tertiary'].map((color, index, arr) => (
-            <Box key={index} mb={4}>
-                <Text mb="2">{capitalize(color)}:</Text>
-                <ButtonGroup {...styles.buttonGroup}>
-                    {variationsArray({
-                        color,
-                        iconPosition,
-                    }).map((props, key) => (
-                        <Component key={key} {...props} />
-                    ))}
-                </ButtonGroup>
-            </Box>
-        ))}
-    </Box>
-);
-
-OverviewTemplate.propTypes = {
-    loadingText: PropTypes.string,
-    iconPosition: PropTypes.string,
-};
-
-export default OverviewTemplate;

package/styles/v1/components/Button/stories/types.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import Button from 'v1/components/Button/Button';
-
-export default {
-    component: Button,
-    title: 'v1/Button/Types',
-};
-
-export const Default = () => {
-    return (
-        <Button color="primary" type="button">
-            Type Button
-        </Button>
-    );
-};
-
-export const Reset = () => {
-    return (
-        <Button color="primary" type="reset">
-            Type Reset
-        </Button>
-    );
-};
-
-export const Submit = () => {
-    return (
-        <Button color="primary" type="submit">
-            Type Submit
-        </Button>
-    );
-};