@spothero/ui 15.9.4 → 15.9.5-beta.0

package/package.json

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

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'
+            }
         },
     },
 };