@spothero/ui 16.0.0-beta.0 → 16.0.0-beta.1

package/styles/components/Text/Text.stories.js

@@ -1,47 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import Component from './Text';
-
-import asOptions from './options';
-import {variants} from './Text.styles';
-
-export default {
-    title: 'v2/Text',
-    component: Component,
-    parameters: {
-        removeBaseHtmlClass: true,
-    },
-    argTypes: {
-        variant: {
-            control: {
-                type: 'select',
-                options: Object.keys(variants),
-            },
-        },
-        as: {
-            control: {
-                type: 'select',
-                options: asOptions,
-            },
-        },
-        children: {
-            control: {
-                type: 'text',
-            },
-        },
-    },
-};
-
-const Template = props => <Component {...props} />;
-
-Template.propTypes = {
-    children: PropTypes.node,
-};
-
-export const Text = Template.bind({});
-
-Text.args = {
-    children:
-        'Bonbon lollipop tiramisu cupcake bear claw cupcake. Icing candy canes cookie caramels wafer tootsie roll soufflé halvah. Ice cream tart gummies apple pie chocolate bar. Pastry gummies macaroon fruitcake donut sweet caramels candy. Oat cake marshmallow biscuit carrot cake fruitcake brownie pastry liquorice liquorice. Topping sweet gingerbread. Chupa chups caramels brownie. Icing jujubes chupa chups cookie. Carrot cake gummi bears powder apple pie donut pudding macaroon. Icing jelly cupcake powder jelly croissant pastry. Powder jelly fruitcake gummies sweet tootsie roll candy. Icing cheesecake toffee tart pastry lemon drops lemon drops bonbon wafer. Cheesecake ice cream wafer apple pie candy canes croissant. Sweet croissant pudding carrot cake oat cake chupa chups. Gingerbread lemon drops biscuit oat cake carrot cake. Chocolate cake jelly-o cake cake candy lollipop.',
-};

package/styles/components/Text/Text.styles.js

@@ -1,33 +0,0 @@
-import merge from 'lodash/merge';
-import chakraDefaultTheme from '@chakra-ui/theme';
-import {fontSizes, fontWeights} from 'theme/base/typography';
-
-const baseStyle = {
-    lineHeight: 1.5,
-    fontWeight: fontWeights.normal,
-};
-
-export const variants = {
-    body: {
-        ...baseStyle,
-        fontSize: {base: fontSizes.base, desktop: fontSizes.base},
-    },
-    body2: {
-        ...baseStyle,
-        fontSize: {base: fontSizes.sm, desktop: fontSizes.sm},
-    },
-    caption: {
-        ...baseStyle,
-        fontSize: {base: fontSizes.xs, desktop: fontSizes.xs},
-    },
-};
-
-const defaultProps = {
-    variant: variants.body,
-};
-
-export default merge(chakraDefaultTheme.components.Text, {
-    variants,
-    baseStyle,
-    defaultProps,
-});

package/styles/components/Text/combineAsWithVariant.js

@@ -1,106 +0,0 @@
-import {variants} from './Text.styles';
-import {fontWeights} from 'theme/base/typography';
-
-// Create list of commonly used html text elements
-const asOptions = Object.freeze({
-    bold: 'b',
-    strong: 'strong',
-    italic: 'i',
-    emphasis: 'em',
-    small: 'small',
-    strikethrough: 's',
-    underline: 'u',
-});
-
-/**
- * ### `combineAsWithVariant`
- * A function that takes in the `as` value (the HTML element to render the Text component as), and the
- * `variant` value. The default-like styling for the `as` prop is merged with the styling from the
- * `variant` and a combined styleProp object is returned.
- *
- * By default the `as` property only effects the underlying semantics of the markup, whereas the
- * `variant` only effects the visual styling of the text. In order for the text component to be built
- * with accessibility and ease-of-use in mind, these two properties _should_ be interconnected. Having
- * the style and markup unified allows an experience that is accessible to those using screen-readers
- * (or any other assistive technology) that matches (or is at least a close approximation) of the
- * "standard" visual experience.
- *
- * @function combineAsWithVariant
- * @param {string} args.as - The HTML element to render the Text component as
- * @param {string} args.variant - The style variant for the Text component
- * @returns {Object} An object containing the merged styleProps from the `variant` and the `as` props
- */
-
-const combineAsWithVariant = ({as, variant}) => {
-    const variantFontSizeBase = Number(
-        variants[`${variant}`].fontSize.base.replace('rem', '')
-    );
-    const variantFontSizeDesktop = Number(
-        variants[`${variant}`].fontSize.desktop.replace('rem', '')
-    );
-    let styleProps;
-
-    switch (as) {
-        case asOptions.bold:
-            styleProps = {
-                ...variants[`${variant}`],
-                fontWeight: fontWeights.semibold,
-            };
-            break;
-
-        case asOptions.strong:
-            styleProps = {
-                ...variants[`${variant}`],
-                fontWeight: fontWeights.semibold,
-            };
-            break;
-
-        case asOptions.italic:
-            styleProps = {
-                ...variants[`${variant}`],
-                fontStyle: 'italic',
-            };
-            break;
-
-        case asOptions.emphasis:
-            styleProps = {
-                ...variants[`${variant}`],
-                fontStyle: 'italic',
-            };
-            break;
-
-        case asOptions.underline:
-            styleProps = {
-                ...variants[`${variant}`],
-                textDecoration: 'underline',
-            };
-            break;
-
-        case asOptions.strikethrough:
-            styleProps = {
-                ...variants[`${variant}`],
-                textDecoration: 'line-through',
-            };
-            break;
-
-        case asOptions.small:
-            styleProps = {
-                ...variants[`${variant}`],
-                fontSize: {
-                    base: `${variantFontSizeBase * 0.8}rem`,
-                    desktop: `${variantFontSizeDesktop * 0.8}rem`,
-                },
-            };
-            break;
-
-        default:
-            styleProps = {
-                ...variants[`${variant}`],
-            };
-            break;
-    }
-
-    return styleProps;
-};
-
-export default combineAsWithVariant;

package/styles/components/Text/options.js

@@ -1,92 +0,0 @@
-const options = [
-    'a',
-    'abbr',
-    'address',
-    'article',
-    'aside',
-    'b',
-    'bdi',
-    'bdo',
-    'blockquote',
-    'button',
-    'caption',
-    'cite',
-    'code',
-    'colgroup',
-    'data',
-    'datalist',
-    'dd',
-    'del',
-    'details',
-    'dfn',
-    'dialog',
-    'div',
-    'dl',
-    'dt',
-    'em',
-    'fieldset',
-    'figure',
-    'footer',
-    'form',
-    'header',
-    'hgroup',
-    'i',
-    'input',
-    'ins',
-    'kbd',
-    'label',
-    'legend',
-    'li',
-    'link',
-    'main',
-    'map',
-    'mark',
-    'menu',
-    'meter',
-    'nav',
-    'noscript',
-    'object',
-    'ol',
-    'optgroup',
-    'option',
-    'output',
-    'p',
-    'pre',
-    'progress',
-    'q',
-    'rb',
-    'rp',
-    'rt',
-    'rtc',
-    'ruby',
-    's',
-    'samp',
-    'script',
-    'section',
-    'select',
-    'small',
-    'span',
-    'strong',
-    'style',
-    'sub',
-    'summary',
-    'sup',
-    'table',
-    'tbody',
-    'td',
-    'template',
-    'textarea',
-    'tfoot',
-    'th',
-    'thead',
-    'time',
-    'title',
-    'tr',
-    'track',
-    'u',
-    'ul',
-    'var',
-    'video',
-];
-
-export default options;

package/styles/components/ThemeProvider/ThemeProvider.jsx

@@ -1,39 +0,0 @@
-import PropTypes from 'prop-types';
-import React, {forwardRef} from 'react';
-import {ChakraProvider} from '@chakra-ui/react';
-
-import THEME from 'theme';
-import {Fonts, LegacyOverrides} from 'theme/global';
-import merge from 'lodash/merge';
-
-const ThemeProvider = forwardRef(
-    (
-        {
-            theme,
-            useLegacyOverrides,
-            disableExternalFonts = false,
-            children,
-            ...props
-        },
-        ref
-    ) => (
-        <ChakraProvider {...props} ref={ref} theme={merge(THEME, theme)}>
-            {disableExternalFonts ? null : <Fonts />}
-            <LegacyOverrides useLegacyOverrides={useLegacyOverrides} />
-            {children}
-        </ChakraProvider>
-    )
-);
-
-ThemeProvider.propTypes = {
-    /** If true, this will use the old `spothero-html` base styles */
-    useLegacyOverrides: PropTypes.bool,
-    /** If true, this will not load the `Fonts` global styles */
-    disableExternalFonts: PropTypes.bool,
-    /** The React node (generally your entire App) that will be provided the theme */
-    children: PropTypes.node,
-    /** Adds additional themeing on top of SpotHero's default configuration */
-    theme: PropTypes.object,
-};
-
-export default ThemeProvider;

package/styles/components/ThemeProvider/ThemeProvider.stories.js

@@ -1,85 +0,0 @@
-import React from 'react';
-import {Box, Code} from '@chakra-ui/react';
-
-import Component from './ThemeProvider';
-import Spaces from 'utils/Spaces';
-import Text from 'components/Text/Text';
-import disableArgs from 'storybook/utils/disable-args';
-
-const Usage = () => {
-    return (
-        <>
-            &#47;&#47; RootComponent.jsx
-            <br />
-            ...
-            <br />
-            return (
-            <br />
-            <Spaces />
-            &lt;ThemeProvider&gt;
-            <br />
-            <Spaces spaces={6} />
-            &lt;App/&gt;
-            <br />
-            <Spaces />
-            &lt;/ThemeProvider&gt;
-            <br />
-            );
-            <br />
-            ...
-        </>
-    );
-};
-
-export default {
-    title: 'v2/ThemeProvider',
-    component: Component,
-    parameters: {
-        removeBaseHtmlClass: true,
-        usage: [<Usage key={1} />],
-    },
-};
-
-const Template = (props, {hasDarkBackground}) => {
-    const contentTextColor = hasDarkBackground
-        ? 'text.primary.dark'
-        : 'text.primary.light';
-
-    return (
-        <Box>
-            <Text mb={8} color={contentTextColor}>
-                As the name implies, this is a theme context provider that all
-                of your v2 components utilize. It is required by all apps moving
-                to v2
-            </Text>
-            <Text />
-            <Text mb={8} color={contentTextColor}>
-                ThemeProvider has a <Code>theme</Code> prop that takes a theme
-                object. Unlike how we are both overriding and extending
-                Chakra&apos;s default theme, this property only extends our
-                default theme configuration.
-            </Text>{' '}
-            <Text mb={8} color={contentTextColor}>
-                ThemeProvider has a <Code>useLegacyOverrides</Code> prop that is
-                a boolean. If true, the ThemeProvider will insert the typography
-                styling from .spothero-html
-            </Text>{' '}
-            <Text mb={8} color={contentTextColor}>
-                ThemeProvider also has a <Code>disableExternalFonts</Code> prop
-                that is a boolean. If true, the ThemeProvider will not load the
-                font files from Google's CDN, and you will be able to handle
-                fonts on a project-level.
-            </Text>{' '}
-        </Box>
-    );
-};
-
-export const ThemeProvider = Template.bind({});
-ThemeProvider.parameters = {
-    importBy: 'ThemeProvider',
-};
-ThemeProvider.argTypes = disableArgs([
-    'theme',
-    'children',
-    'useLegacyOverrides',
-]);

package/styles/theme/base/breakpoints.js

@@ -1,16 +0,0 @@
-import {createBreakpoints} from '@chakra-ui/theme-tools';
-
-/**
- * The "base" breakpoint is Chakra's default non-responsive value (from 0 upwards).
- * While we don't explicitly enable a "mobile" breakpoint, we can consider "base" and
- * "mobile" the same for all intents and purposes for mobile-first responsive styling.
- * @see https://chakra-ui.com/docs/features/responsive-styles#customizing-breakpoints
- */
-const breakpoints = createBreakpoints({
-    mobileXL: '30rem', // 480px
-    tablet: '48rem', // 768px
-    desktop: '64rem', // 1024px
-    desktopXL: '90rem', // 1440px
-});
-
-export default breakpoints;

package/styles/theme/base/colors.js

@@ -1,136 +0,0 @@
-const white = '#ffffff';
-const black = '#000000';
-const brandBlue = '#0082ff';
-
-const gray = {
-    50: '#f6f7f9',
-    100: '#e1e6ec',
-    200: '#cbd4de',
-    300: '#afbdcc',
-    400: '#94a7ba',
-    500: '#7890a8',
-    600: '#537495',
-    700: '#3b5261',
-    800: '#2f3f4b',
-    900: '#26323c',
-};
-
-const blue = {
-    50: '#f6fbfd',
-    100: '#e6f8fd',
-    200: '#c0e9fb',
-    300: '#96d3fa',
-    400: '#5baafa',
-    500: '#1271eb',
-    600: '#1d58f2',
-    700: '#1b46da',
-    800: '#1735a6',
-    900: '#132b7f',
-};
-
-const navy = {
-    50: '#f4fafc',
-    100: '#e4f7fb',
-    200: '#bfebf6',
-    300: '#92d9f4',
-    400: '#51b7f0',
-    500: '#2590ea',
-    600: '#1a6cda',
-    700: '#1b55b6',
-    800: '#194185',
-    900: '#002d5b',
-};
-
-const green = {
-    50: '#ecf8f7',
-    100: '#d3f7ef',
-    200: '#a4f3d9',
-    300: '#65eabf',
-    400: '#1edb96',
-    500: '#09c66a',
-    600: '#08ad50',
-    700: '#008547',
-    800: '#11703e',
-    900: '#115a35',
-};
-
-const yellow = {
-    50: '#f9f5e5',
-    100: '#faf0bd',
-    200: '#f6e67c',
-    300: '#f1d439',
-    400: '#ffbf02',
-    500: '#e19706',
-    600: '#cf7404',
-    700: '#ae5708',
-    800: '#8e440e',
-    900: '#743710',
-};
-
-const red = {
-    50: '#fdf9f8',
-    100: '#fdeef3',
-    200: '#fbcee6',
-    300: '#fba4d1',
-    400: '#fc6bad',
-    500: '#fc4086',
-    600: '#f7265f',
-    700: '#e01438',
-    800: '#b4193c',
-    900: '#901530',
-};
-
-const colors = {
-    primary: {
-        ...blue,
-        default: blue['500'],
-    },
-    secondary: {
-        ...navy,
-        default: navy['900'],
-    },
-    gray: {
-        ...gray,
-        light: gray['50'],
-        medium: gray['200'],
-        dark: gray['600'],
-    },
-    red: {
-        ...red,
-        default: red['700'],
-    },
-    green: {
-        ...green,
-        default: green['700'],
-    },
-    yellow: {
-        ...yellow,
-        default: yellow['400'],
-    },
-    success: green['700'],
-    warning: yellow['400'],
-    error: red['700'],
-    accent: gray['200'],
-    text: {
-        primary: {
-            light: black,
-            dark: white,
-        },
-        secondary: {
-            light: gray['600'],
-        },
-        link: {
-            light: blue['500'],
-            dark: white,
-        },
-    },
-    background: {
-        gray: gray['50'],
-        white,
-    },
-    white,
-    black,
-    brandBlue,
-};
-
-export default colors;

package/styles/theme/base/index.js

@@ -1,5 +0,0 @@
-export {default as sizes} from './sizes';
-export {default as colors} from './colors';
-export {default as zIndices} from './zindices';
-export {default as breakpoints} from './breakpoints';
-export {fonts, fontSizes, fontWeights} from './typography';

package/styles/theme/base/sizes.js

@@ -1,48 +0,0 @@
-const container = {
-    base: '100%', // 640px
-    tablet: '45rem', // 720px
-    desktop: '72rem', // 1152px
-};
-
-const sizes = {
-    container,
-    0: '0',
-    0.5: '0.125rem', // 2px
-    1: '0.25rem', // 4px
-    1.5: '0.375rem', // 6px
-    2: '0.5rem', // 8px
-    2.5: '0.625rem', // 10px
-    3: '0.75rem', // 12px
-    3.5: '0.875rem', // 14px
-    4: '1rem', // 16px
-    5: '1.25rem', // 20px
-    6: '1.5rem', // 24px
-    7: '1.75rem', // 28px
-    8: '2rem', // 32px
-    9: '2.25rem', // 36px
-    10: '2.5rem', // 40px
-    12: '3rem', // 48px
-    14: '3.5rem', // 56px
-    16: '4rem', // 64px
-    20: '5rem', // 80px
-    24: '6rem', // 96px
-    28: '7rem', // 112px
-    32: '8rem', // 128px
-    36: '9rem', // 144px
-    40: '10rem', // 160px
-    44: '11rem', // 176px
-    48: '12rem', // 192px
-    52: '13rem', // 208px
-    56: '14rem', // 224px
-    60: '15rem', // 240px
-    64: '16rem', // 256px
-    72: '18rem', // 272px
-    80: '20rem', // 288px
-    96: '24rem', // 384px
-    px: '1px',
-    full: '100%',
-    max: 'max-content',
-    min: 'min-content',
-};
-
-export default sizes;

package/styles/theme/base/typography.js

@@ -1,24 +0,0 @@
-export const fonts = {
-    heading: `"Open Sans", sans-serif`,
-    body: `"Open Sans", sans-serif`,
-};
-
-export const fontSizes = {
-    '5xl': '3.5rem', // 56px
-    '4xl': '3rem', // 48px
-    '3xl': '2.5rem', // 40px
-    '2xl': '2rem', // 32px
-    xl: '1.5rem', // 24px
-    lg: '1.25rem', // 20px
-    md: '1.125rem', // 18px
-    base: '1rem', // 16px
-    sm: '0.875rem', // 14px
-    xs: '0.75rem', // 12px
-};
-
-export const fontWeights = {
-    light: 300,
-    normal: 400,
-    semibold: 600,
-    bold: 700,
-};

package/styles/theme/base/zindices.js

@@ -1,17 +0,0 @@
-const indices = {
-    hide: -100, // equivalent to $z-index-negative in fe-core (https://github.com/spothero/fe-core/blob/main/utils/_defaults.scss)
-    auto: 'auto',
-    base: 0, // equivalent to $z-index-back in fe-core
-    layer1: 100, // equivalent to $z-index-mid in fe-core
-    layer2: 200, // equivalent to $z-index-fore in fe-core
-    layer3: 300, // equivalent to $z-index-layer1 in fe-core
-    layer4: 400, // equivalent to $z-index-layer2 in fe-core
-    layer5: 500, // equivalent to $z-index-layer3 in fe-core
-    layer6: 600, // equivalent to $z-index-layer4 in fe-core
-    layer7: 700, // equivalent to $z-index-modal-shim in fe-core
-    layer8: 800, // equivalent to $z-index-modal in fe-core
-    layer9: 900, // equivalent to $z-index-notification in fe-core
-    layer10: 1000, // equivalent to $z-index-top in fe-core
-};
-
-export default indices;