@spothero/ui 15.9.4-beta.0 → 15.9.5-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "15.9.4-beta.0",
+  "version": "15.9.5-beta.0",
   "description": "SpotHero's React component UI library.",
   "main": "v2/index.js",
   "repository": "https://github.com/spothero/fe-monorepo",
@@ -164,4 +164,4 @@
     "react-redux": ">=7.0.0",
     "redux": ">=4.0.0"
   }
-}
+}

package/styles/v2/components/AutoSuggestSelect/AutoSuggestSelect.jsx

@@ -168,7 +168,7 @@ AutoSuggestSelect.propTypes = {
     placeholder: PropTypes.string,
     /** Optional helper text displayed below the select */
     helperText: PropTypes.string,
-    /** Error message that would dispplay under the select */
+    /** Error message that would display under the select */
     errorMessage: PropTypes.string,
     /** Boolean that sets whether the select is valid */
     isInvalid: PropTypes.bool,

package/styles/v2/components/Skeleton/Skeleton.stories.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import {Skeleton as Component, SkeletonCircle as CircleSkeleton, SkeletonText as TextSkeleton} from './index';
+
+export default {
+    title: 'v2/Skeleton',
+    component: Component,
+    parameters: {
+        removeBaseHtmlClass: true,
+        chakraLink: 'https://chakra-ui.com/docs/components/skeleton/',
+    },
+};
+
+const SkeletonTemplate = props => (
+    <Component {...props}>
+        Text
+    </Component>
+);
+
+const SkeletonCircleTemplate = props => (
+    <CircleSkeleton>
+        Text
+    </CircleSkeleton>
+)
+
+const SkeletonTextTemplate = props => (
+    <TextSkeleton>
+        Text
+    </TextSkeleton>
+)
+
+export const Skeleton = SkeletonTemplate.bind({});
+export const SkeletonCircle = SkeletonCircleTemplate.bind({})
+export const SkeletonText = SkeletonTextTemplate.bind({})

package/styles/v2/components/Skeleton/Skeleton.styles.js

@@ -0,0 +1,3 @@
+import chakraDefaultTheme from '@chakra-ui/theme';
+
+export default chakraDefaultTheme.components.Skeleton;

package/styles/v2/components/Skeleton/index.js

@@ -0,0 +1 @@
+export {Skeleton, SkeletonCircle, SkeletonText} from '@chakra-ui/react';

package/styles/v2/components/Tabs/Tabs.jsx

@@ -1 +1,39 @@
-export {Tabs as default} from '@chakra-ui/react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {Tabs as ChakraTabs, forwardRef} from '@chakra-ui/react';
+import combineSizeWithVariant from "./combineSizeWithVariant";
+
+export const SIZE_SMALL = 'small';
+export const SIZE_BODY = 'body';
+export const SIZE_HEADING = 'heading';
+
+const sizeMapping = {
+    [SIZE_SMALL]: 'sm',
+    [SIZE_BODY]: 'md',
+    [SIZE_HEADING]: 'lg'
+};
+
+const Tabs = forwardRef(({size, ...props}, ref) => {
+    return (
+        <ChakraTabs
+            size={sizeMapping[size]}
+            {...props}
+            {...combineSizeWithVariant({size})}
+            ref={ref}
+        />
+    );
+});
+
+Tabs.defaultProps = {
+    size: SIZE_BODY,
+};
+
+Tabs.propTypes = {
+    /** The React node that will render inside the element */
+    children: PropTypes.node,
+    /** Controls the size of Tabs */
+    size: PropTypes.oneOf([SIZE_SMALL, SIZE_BODY, SIZE_HEADING]),
+};
+
+export default Tabs;
+

package/styles/v2/components/Tabs/Tabs.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Component from './Tabs';
+import Component, {SIZE_BODY, SIZE_HEADING, SIZE_SMALL} from './Tabs';
 import {TabList, TabPanels, Tab, TabPanel} from './index';
 
 export default {
@@ -8,11 +8,19 @@ export default {
     parameters: {
         removeBaseHtmlClass: true,
     },
+    argTypes: {
+        size: {
+            control: {
+                type: 'select',
+                options: [SIZE_SMALL, SIZE_BODY, SIZE_HEADING],
+            },
+        },
+    },
 };
 
-const TabsTemplate = () => {
+const TabsTemplate = props => {
     return (
-        <Component variant="line">
+        <Component variant="line" {...props}>
             <TabList>
                 <Tab>One</Tab>
                 <Tab>Two</Tab>

package/styles/v2/components/Tabs/combineSizeWithVariant.js

@@ -0,0 +1,29 @@
+import styles from './styles/index';
+import {fontSizes} from 'v2/theme/base/typography';
+import {SIZE_BODY, SIZE_HEADING, SIZE_SMALL} from "./Tabs";
+
+/**
+ * ### `combineSizeWithVariant`
+ * A function that takes in the `size` value, and the
+ * `variant` value. The default-like styling for the `size` prop is merged with the styling from the
+ * `variant` and a combined styleProp object is returned.
+ *
+ * @function combineSizeWithVariant
+ * @param {string} args.size - The size of Tabs component
+ * @param {string} args.variant - The style variant for the Text component
+ * @returns {Object} An object containing the merged styleProps from the `variant` and the `size` props
+ */
+
+const combineSizeWithVariant = ({size, variant = 'line'}) => {
+    const fontSizeMapping = {
+        [SIZE_SMALL]: fontSizes.xs,
+        [SIZE_BODY]: fontSizes.base,
+        [SIZE_HEADING]: fontSizes.lg
+    };
+
+    const styleProps = styles.variants[`${variant}`];
+    styleProps.tab.fontSize = fontSizeMapping[size];
+    return styleProps;
+};
+
+export default combineSizeWithVariant;

package/styles/v2/components/Tabs/styles/index.js

@@ -13,7 +13,7 @@ const variants = {
             borderColor: 'transparent',
             marginBottom: '-2px',
             _selected: {
-                color: 'black',
+                color: 'primary.default',
                 borderColor: 'primary.default',
                 fontWeight: 'semibold',
             },
@@ -28,6 +28,9 @@ const variants = {
                 opacity: 0.4,
                 cursor: 'not-allowed',
             },
+            _hover: {
+                color: 'black'
+            }
         },
     },
 };

package/styles/v2/components/index.js

@@ -7,6 +7,7 @@ export {
 } from './Accordion';
 export * from './Button';
 export * from './Table';
+export * from './Skeleton';
 export {TabList, TabPanels, Tab, TabPanel, default as Tabs} from './Tabs';
 export {default as Select} from './Select';
 export {default as Switch} from './Switch';

package/styles/v2/components/styles.js

@@ -16,3 +16,4 @@ export {default as Popover} from './Popover/styles';
 export {default as Input} from './Input/styles';
 export {default as Modal} from './Modal/styles';
 export {default as Radio} from './Radio/styles';
+export {default as Skeleton} from './Skeleton/Skeleton.styles';