@spothero/ui 16.0.0-beta.0 → 16.0.1

package/styles/components/Link/Link.stories.js

@@ -1,82 +0,0 @@
-import React from 'react';
-
-import {Box} from '@chakra-ui/react';
-import ShareIcon from '@spothero/icons/share';
-
-import Text from 'components/Text/Text';
-import Component from 'components/Link/Link';
-
-export default {
-    title: 'v2/Link',
-    component: Component,
-    parameters: {
-        removeBaseHtmlClass: true,
-    },
-};
-
-const OverviewTemplate = (props, {hasDarkBackground}) => (
-    <Box>
-        <Text
-            color={
-                hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
-            }
-        >
-            A link with{' '}
-            <Component variant={hasDarkBackground ? 'onDark' : 'standard'}>
-                no href
-            </Component>{' '}
-            is only styled.
-        </Text>
-        <Text
-            color={
-                hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
-            }
-        >
-            Links can be linked to{' '}
-            <Component
-                href="#"
-                isExternal
-                variant={hasDarkBackground ? 'onDark' : 'standard'}
-            >
-                External Pages
-            </Component>{' '}
-            and will have <code>target=&quot;_blank&quot;</code> and{' '}
-            <code>rel=&quot;noopener noreferrer&quot;</code> appended to them.
-        </Text>
-        <Text
-            color={
-                hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
-            }
-        >
-            Links can have{' '}
-            <Component
-                href="#"
-                variant={hasDarkBackground ? 'onDark' : 'standard'}
-            >
-                icons inline <ShareIcon width="1rem" />
-            </Component>
-        </Text>
-        <Text
-            color={
-                hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
-            }
-        >
-            Using the <code>as</code> prop, you can utilize a routing library,
-            like{' '}
-            <Component
-                href="https://chakra-ui.com/docs/navigation/link#usage-with-routing-library"
-                isExternal
-                variant={hasDarkBackground ? 'onDark' : 'standard'}
-            >
-                React Router
-            </Component>{' '}
-            and it will replace the <code>a</code> tag with it&apos;s{' '}
-            <code>Link</code>.
-        </Text>
-    </Box>
-);
-
-export const Overview = OverviewTemplate.bind({});
-Overview.parameters = {
-    importBy: 'Link',
-};

package/styles/components/Link/Link.styles.js

@@ -1,38 +0,0 @@
-const baseStyle = {
-    transition: `all 0.15s ease-out`,
-    color: 'text.link.light',
-    fontWeight: 'semibold',
-    _hover: {
-        color: 'primary.600',
-    },
-    _focus: {
-        boxShadow: 'outline',
-    },
-    '& svg': {
-        d: 'inline-block',
-        verticalAlign: 'initial',
-    },
-};
-
-const linkOnDark = {
-    color: 'text.link.dark',
-    _hover: {
-        color: 'text.link.dark',
-        opacity: '.8',
-    },
-};
-
-export const variants = {
-    standard: baseStyle,
-    onDark: linkOnDark,
-};
-
-const defaultProps = {
-    variant: 'standard',
-};
-
-export default {
-    baseStyle,
-    variants,
-    defaultProps,
-};

package/styles/components/List/List.jsx

@@ -1,57 +0,0 @@
-import PropTypes from 'prop-types';
-import React, {forwardRef} from 'react';
-import {List as ChakraList} from '@chakra-ui/react';
-
-const unorderedProps = {
-    as: 'ul',
-    styleType: 'disc',
-};
-
-const orderedProps = {
-    as: 'ol',
-    styleType: 'decimal',
-};
-
-const STYLE_POSITIONS = {
-    unset: 'unset',
-    revert: 'revert',
-    inside: 'inside',
-    outside: 'outside',
-    initial: 'initial',
-    inherit: 'inherit',
-};
-
-const TYPES = {
-    ordered: 'ordered',
-    unstyled: 'unstyled',
-    unordered: 'unordered',
-};
-
-const getListProps = type => {
-    switch (type) {
-        case TYPES.ordered:
-            return orderedProps;
-        case TYPES.unordered:
-            return unorderedProps;
-        default:
-            return;
-    }
-};
-
-const List = forwardRef(({type, ...props}, ref) => (
-    <ChakraList {...getListProps(type)} {...props} ref={ref} />
-));
-
-List.defaultProps = {
-    type: TYPES.unstyled,
-    stylePosition: STYLE_POSITIONS.inside,
-};
-
-List.propTypes = {
-    /** The position of the list style */
-    stylePosition: PropTypes.oneOf(Object.keys(STYLE_POSITIONS)),
-    /** Changes the underlying markdown to be an ordered or unorderd list, (unstyled will render a ul by default) */
-    type: PropTypes.oneOf(Object.keys(TYPES)),
-};
-
-export default List;

package/styles/components/List/List.stories.js

@@ -1,96 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {build, fake} from '@jackfranklin/test-data-bot';
-
-import Component from './List';
-
-import {ListItem} from './index';
-import Spaces from 'utils/Spaces';
-import Text from 'components/Text/Text';
-
-import disableArgs from 'storybook/utils/disable-args';
-
-const DISABLE_TYPE = disableArgs('type');
-
-const randomListText = build('ListText', {
-    fields: {
-        text: fake(f => f.random.words(10)),
-    },
-});
-
-const Usage = ({type}) => (
-    <Text>
-        &lt;List{type ? ` type="${type}"` : ''}&gt;
-        <br />
-        <Spaces />
-        &lt;ListItem&gt;
-        <br />
-        <Spaces spaces={6} />
-        ...
-        <br />
-        <Spaces />
-        &lt;/ListItem&gt;
-        <br />
-        <Spaces />
-        ...
-        <br />
-        &lt;/List&gt;
-    </Text>
-);
-
-Usage.propTypes = {
-    type: PropTypes.string,
-};
-
-export default {
-    title: 'v2/List',
-    component: Component,
-    subcomponents: {ListItem},
-    parameters: {
-        importBy: 'List',
-        removeBaseHtmlClass: true,
-    },
-};
-
-const OverviewTemplate = props => (
-    <Component {...props}>
-        {Array(10)
-            .fill(null)
-            .map((_, index) => (
-                <ListItem key={index}>{randomListText().text}</ListItem>
-            ))}
-    </Component>
-);
-
-export const Overview = OverviewTemplate.bind({});
-Overview.parameters = {
-    usage: [<Usage key={1} />],
-};
-export const Unordered = OverviewTemplate.bind({});
-Unordered.argTypes = DISABLE_TYPE;
-Unordered.parameters = {
-    usage: [<Usage type="unordered" key={1} />],
-};
-Unordered.args = {
-    type: 'unordered',
-};
-
-export const Ordered = OverviewTemplate.bind({});
-Ordered.argTypes = DISABLE_TYPE;
-Ordered.parameters = {
-    usage: [<Usage type="ordered" key={1} />],
-};
-Ordered.args = {
-    type: 'ordered',
-};
-export const Unstyled = OverviewTemplate.bind({});
-Unstyled.parameters = {
-    usage: [<Usage key={1} />],
-};
-Unstyled.argTypes = {
-    ...DISABLE_TYPE,
-    ...disableArgs('stylePosition'),
-};
-Unstyled.args = {
-    type: 'unstyled',
-};

package/styles/components/List/index.js

@@ -1,2 +0,0 @@
-export {default} from './List';
-export {ListItem} from '@chakra-ui/react';

package/styles/components/List/styles/index.js

@@ -1,12 +0,0 @@
-import merge from 'lodash/merge';
-import chakraDefaultTheme from '@chakra-ui/theme';
-
-import item from './item.styles';
-
-const baseStyle = {
-    item,
-};
-
-export default merge(chakraDefaultTheme.components.List, {
-    baseStyle,
-});

package/styles/components/List/styles/item.styles.js

@@ -1,5 +0,0 @@
-const item = {
-    mb: 2,
-};
-
-export default item;

package/styles/components/Loader/Loader.jsx

@@ -1,75 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {CircularProgress as ChakraCircularProgress} from '@chakra-ui/react';
-
-const Loader = ({
-    color = 'success',
-    loaderBackgroundColor = 'transparent',
-    isInfinite = true,
-    size = 12,
-    thickness = 2,
-    trackColor = 'gray.medium',
-    value = 0,
-    ...props
-}) => {
-    /* -------------------------------------------------------------------- *\
-        Note: Since most of the props for this component control multiple
-        styles at a time, it was decided that it made the most sense to set
-        up the default style-related properties here in lou of creating an
-        overly complex styles file.
-    \* -------------------------------------------------------------------- */
-    const loaderDefaultProps = {
-        color,
-        isIndeterminate: isInfinite,
-        size,
-        thickness,
-        trackColor,
-        value,
-        capIsRound: true,
-    };
-
-    return (
-        <ChakraCircularProgress
-            sx={{
-                '& svg > circle:first-of-type': {
-                    fill: loaderBackgroundColor,
-                },
-            }}
-            {...loaderDefaultProps}
-            {...props}
-        />
-    );
-};
-
-Loader.propTypes = {
-    /**
-     * The color of the Progress bar. Use color names defined within `theme/base/colors`.
-     */
-    color: PropTypes.string,
-    /**
-     * Determines if Loader spins for an infinite amount of time. If `true` value prop will be ignored.
-     */
-    isInfinite: PropTypes.bool,
-    /**
-     * Sets the background color of the Loader (inside the circle). Use color names defined within `theme/base/colors`.
-     */
-    loaderBackgroundColor: PropTypes.string,
-    /**
-     * The size of the Loader. Used as both height and width. Number corresponds to Size token.
-     */
-    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    /**
-     * The thickness of the Loader. Number is used as pixel width.
-     */
-    thickness: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    /**
-     * The color of the Progress bar track.  Use color names defined within `theme/base/colors`.
-     */
-    trackColor: PropTypes.string,
-    /**
-     * The number passed in corresponds to the percentage "done" of the Loader.
-     */
-    value: PropTypes.number,
-};
-
-export default Loader;

package/styles/components/Loader/Loader.stories.js

@@ -1,145 +0,0 @@
-import React from 'react';
-
-import disableArgs from 'storybook/utils/disable-args';
-import {createRangeControl} from 'storybook/utils/create-control';
-
-import Component from './Loader';
-
-export default {
-    title: 'v2/Loader',
-    component: Component,
-    parameters: {
-        removeBaseHtmlClass: true,
-        importBy: 'Loader',
-    },
-    argTypes: {
-        color: {
-            options: [
-                'primary.default',
-                'secondary.default',
-                'white',
-                'success',
-                'warning',
-                'error',
-            ],
-            control: {
-                type: 'radio',
-                labels: {
-                    'primary.default': 'Primary',
-                    'secondary.default': 'Secondary',
-                    white: 'White',
-                    success: 'Success',
-                    warning: 'Warning',
-                    error: 'Error',
-                },
-            },
-        },
-        isInfinite: {
-            control: {
-                type: 'boolean',
-            },
-        },
-        loaderBackgroundColor: {
-            options: [
-                'white',
-                'gray.light',
-                'gray.medium',
-                'gray.dark',
-                'transparent',
-            ],
-            control: {
-                type: 'radio',
-                labels: {
-                    white: 'White',
-                    'primary.default': 'Primary',
-                    'gray.light': 'Light Gray',
-                    'gray.medium': 'Medium Gray',
-                    'gray.dark': 'Dark Gray',
-                    transparent: 'Transparent',
-                },
-            },
-        },
-        size: {
-            options: [6, 12, 28, 48],
-            control: {
-                type: 'radio',
-                labels: {
-                    6: 'Small',
-                    12: 'Medium',
-                    28: 'Large',
-                    48: 'Extra Large',
-                },
-            },
-        },
-        trackColor: {
-            options: [
-                'primary.default',
-                'gray.light',
-                'gray.medium',
-                'gray.dark',
-                'white',
-            ],
-            control: {
-                type: 'radio',
-                labels: {
-                    'primary.default': 'Primary',
-                    'gray.light': 'Light Gray',
-                    'gray.medium': 'Medium Gray',
-                    'gray.dark': 'Dark Gray',
-                    white: 'White',
-                },
-            },
-        },
-        ...createRangeControl({
-            name: 'thickness',
-            min: 2,
-            max: 16,
-            step: 2,
-        }),
-        ...createRangeControl({name: 'value', min: 1, max: 100}),
-    },
-};
-
-const Template = props => <Component {...props} />;
-
-export const Overview = Template.bind({});
-Overview.args = {
-    color: 'success',
-    isInfinite: false,
-    loaderBackgroundColor: 'transparent',
-    size: 12,
-    thickness: 2,
-    trackColor: 'gray.medium',
-    value: 35,
-};
-
-export const FiniteLoader = Template.bind({});
-FiniteLoader.argTypes = {
-    ...disableArgs([
-        'color',
-        'isInfinite',
-        'loaderBackgroundColor',
-        'size',
-        'thickness',
-        'trackColor',
-    ]),
-};
-FiniteLoader.args = {
-    isInfinite: false,
-    value: 35,
-};
-
-export const InfiniteLoader = Template.bind({});
-InfiniteLoader.argTypes = {
-    ...disableArgs([
-        'color',
-        'loaderBackgroundColor',
-        'size',
-        'thickness',
-        'trackColor',
-        'value',
-    ]),
-};
-InfiniteLoader.args = {
-    isInfinite: true,
-};

package/styles/components/Modal/Modal.jsx

@@ -1,70 +0,0 @@
-import React, {forwardRef} from 'react';
-import PropTypes from 'prop-types';
-import {
-    Modal as ChakraModal,
-    ModalOverlay,
-    ModalContent,
-    ModalHeader,
-    ModalFooter,
-    ModalBody,
-    ModalCloseButton,
-    Box,
-} from '@chakra-ui/react';
-import headerStyles from './styles/header';
-
-/**
- * @param {boolean} isMobile - Whether or not the Modal is opened in a mobile viewport
- * @param {boolean} isOpen - Whether or not the Modal is open
- * @param {React.ReactNode} children - The header text of the modal
- * @param {()=>void} [onClose] - Callback invoked to close the Modal. Not required, but strongly suggested.
- * @param {('sm'|'md'|'lg')} [size] - The size of the modal. If unspecified, uses "md" styles.
- * @param {React.ReactNode} [header] - The node for the header. Likely just a string.
- * @param {React.ReactNode} [footer] - The node for the footer. Likely some  control buttons.
- * @param {React.ReactNode} [hideCloseButton] - Whether or not to show the close button
- * @returns {React.ReactElement} - The Modal component
- */
-const Modal = forwardRef((props, ref) => {
-    const {header, footer, children, hideCloseButton, isMobile} = props;
-
-    return (
-        <ChakraModal
-            motionPreset={isMobile ? 'slideInBottom' : 'scale'}
-            {...props}
-            ref={ref}
-        >
-            <ModalOverlay />
-            <ModalContent>
-                {header ? (
-                    <ModalHeader>{header}</ModalHeader>
-                ) : (
-                    <Box {...headerStyles(props)} />
-                )}
-                {hideCloseButton ? null : <ModalCloseButton />}
-                <ModalBody>{children}</ModalBody>
-
-                {footer ? <ModalFooter>{footer}</ModalFooter> : null}
-            </ModalContent>
-        </ChakraModal>
-    );
-});
-
-export default Modal;
-
-Modal.propTypes = {
-    /** Whether or not the Modal is opened in a mobile viewport */
-    isMobile: PropTypes.bool.isRequired,
-    /** Whether or not the Modal is open */
-    isOpen: PropTypes.bool.isRequired,
-    /** React children. Body of the Modal. */
-    children: PropTypes.node.isRequired,
-    /** Callback invoked to close the Modal. Not required, but strongly suggested. */
-    onClose: PropTypes.func,
-    /** The size of the modal. If unspecified, uses md styles. */
-    size: PropTypes.oneOf(['sm', 'md', 'lg']),
-    /** The node for the header. Likely just a string (optional) */
-    header: PropTypes.node,
-    /** The node for the footer. Likely some control buttons (optional) */
-    footer: PropTypes.node,
-    /** Whether or not to show the close button (optional) */
-    hideCloseButton: PropTypes.bool,
-};