@bento-core/tab 1.0.1-CDS.0 → 1.0.1-popsci.0

package/dist/Tabs.js

@@ -5,20 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _ToolTip = _interopRequireDefault(require("@bento-core/tool-tip/src/ToolTip"));
 var _core = require("@material-ui/core");
 var _defaultTheme = require("./defaultTheme");
-var _generateStyle = _interopRequireDefault(require("./utils/generateStyle"));
-const _excluded = ["title"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 const TabItems = _ref => {
   let {
     tabItems,
@@ -27,42 +21,28 @@ const TabItems = _ref => {
     orientation,
     customTheme = {}
   } = _ref;
-  const generatedStyle = (0, _generateStyle.default)();
-  const useStyles = (0, _core.makeStyles)(generatedStyle);
-  const classes = useStyles();
-  const getTabLabel = _ref2 => {
+  const getTabLalbel = _ref2 => {
     let {
       name,
       count,
       clsName,
       index
     } = _ref2;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, name, count && /*#__PURE__*/_react.default.createElement("span", {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h3", {
+      className: "index_".concat(index, " tab_label ").concat(clsName, "_name")
+    }, name, count && /*#__PURE__*/_react.default.createElement("span", {
       className: "index_".concat(index, " ").concat(clsName, "_count")
     }, count)));
   };
-  const CustomTab = tabItems.map((tab, index) => {
-    const _ref3 = tab.tooltipConfig || {},
-      {
-        title: tooltipTitle
-      } = _ref3,
-      tooltipProps = _objectWithoutProperties(_ref3, _excluded);
-    return /*#__PURE__*/_react.default.createElement(_ToolTip.default, _extends({
-      key: "tab_".concat(index, "_").concat(tab.name),
-      title: tooltipTitle || '',
-      classes: {
-        tooltip: classes.customTooltip,
-        arrow: classes.customArrow
-      }
-    }, tooltipProps), /*#__PURE__*/_react.default.createElement(_core.Tab, {
-      index: index,
-      label: getTabLabel(_objectSpread(_objectSpread({}, tab), {}, {
-        index
-      })),
-      className: tab.clsName,
-      disableRipple: true
-    }));
-  });
+  const TABs = tabItems.map((tab, index) => /*#__PURE__*/_react.default.createElement(_core.Tab, {
+    index: index,
+    label: getTabLalbel(_objectSpread(_objectSpread({}, tab), {}, {
+      index
+    })),
+    key: index,
+    className: tab.clsName,
+    disableRipple: true
+  }));
   const themeConfig = (0, _core.createTheme)({
     overrides: _objectSpread(_objectSpread({}, (0, _defaultTheme.defaultTheme)()), customTheme)
   });
@@ -77,7 +57,7 @@ const TabItems = _ref => {
       }
     },
     orientation: orientation
-  }, CustomTab));
+  }, TABs));
 };
 var _default = TabItems;
 exports.default = _default;

package/dist/tabsStyle.js

@@ -6,18 +6,45 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 const tabsStyle = {
   tabsContainer: {},
-  muiTabs: {},
-  muiTab: {},
-  tabsLabel: {},
-  tabsPanel: {},
-  customTooltip: {
-    border: '#03A383 1px solid'
+  muiTabs: {
+    root: {
+      marginTop: '15px'
+    },
+    flexContainer: {
+      borderBottom: '10px solid #40789C',
+      overflow: 'visible !important'
+    },
+    indicator: {
+      display: 'none'
+    }
   },
-  customArrow: {
-    '&::before': {
-      border: '#03A383 1px solid'
+  muiTab: {
+    root: {
+      width: '250px',
+      height: '45px',
+      minHeight: '40px',
+      marginRight: '10px',
+      background: '#EAEAEA',
+      fontSize: '18px',
+      fontFamily: 'Raleway',
+      fontWeight: '400',
+      lineHeight: '18px',
+      paddingLeft: '5px',
+      letterSpacing: '0.25px',
+      borderTop: '1px solid black',
+      borderLeft: '1px solid black',
+      borderRight: '1px solid black',
+      '&$selected': {
+        fontWeight: 'bolder'
+      }
     }
-  }
+  },
+  tabsLabel: {
+    fontFamily: 'Lato',
+    textTransform: 'capitalize',
+    fontSize: '21px'
+  },
+  tabsPanel: {}
 };
 var _default = tabsStyle;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/tab",
-  "version": "1.0.1-CDS.0",
+  "version": "1.0.1-popsci.0",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -12,9 +12,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "dependencies": {
-    "@bento-core/tool-tip": "^1.0.0"
-  },
   "peerDependencies": {
     "@material-ui/core": "^4.12.4",
     "react": "^17.0.2",
@@ -23,5 +20,5 @@
   },
   "author": "CTOS Bento Team",
   "license": "ISC",
-  "gitHead": "12ceec27794b24a5ab2870e421cbb6ff5970b438"
+  "gitHead": "01a57a616fd8d9cc6ffca70907b17b16a1dc369f"
 }

package/src/Tabs.js

@@ -1,14 +1,11 @@
 import React from 'react';
-import ToolTip from '@bento-core/tool-tip/src/ToolTip';
 import {
   Tab,
   Tabs,
   createTheme,
   ThemeProvider,
-  makeStyles,
 } from '@material-ui/core';
 import { defaultTheme } from './defaultTheme';
-import generateStyle from './utils/generateStyle';
 
 const TabItems = ({
   tabItems,
@@ -17,15 +14,11 @@ const TabItems = ({
   orientation,
   customTheme = {},
 }) => {
-  const generatedStyle = generateStyle();
-  const useStyles = makeStyles(generatedStyle);
-  const classes = useStyles();
-
-  const getTabLabel = ({
+  const getTabLalbel = ({
     name, count, clsName, index,
   }) => (
     <>
-      <span>
+      <h3 className={`index_${index} tab_label ${clsName}_name`}>
         {name}
         {count && (
         <span
@@ -34,34 +27,21 @@ const TabItems = ({
           {count}
         </span>
         )}
-      </span>
+      </h3>
     </>
   );
 
-  const CustomTab = tabItems.map((tab, index) => {
-    const { title: tooltipTitle, ...tooltipProps } = tab.tooltipConfig || {};
-
-    return (
-      (
-        <ToolTip
-          key={`tab_${index}_${tab.name}`}
-          title={tooltipTitle || ''}
-          classes={{
-            tooltip: classes.customTooltip,
-            arrow: classes.customArrow,
-          }}
-          {...tooltipProps}
-        >
-          <Tab
-            index={index}
-            label={getTabLabel({ ...tab, index })}
-            className={tab.clsName}
-            disableRipple
-          />
-        </ToolTip>
-      )
-    );
-  });
+  const TABs = tabItems.map((tab, index) => (
+    <Tab
+      index={index}
+      label={
+        getTabLalbel({ ...tab, index })
+      }
+      key={index}
+      className={tab.clsName}
+      disableRipple
+    />
+  ));
 
   const themeConfig = createTheme({ overrides: { ...defaultTheme(), ...customTheme } });
   return (
@@ -72,7 +52,7 @@ const TabItems = ({
         TabIndicatorProps={{ style: { background: 'none' } }}
         orientation={orientation}
       >
-        {CustomTab}
+        {TABs}
       </Tabs>
     </ThemeProvider>
   );

package/src/tabsStyle.js

@@ -1,17 +1,44 @@
 const tabsStyle = {
   tabsContainer: {},
-  muiTabs: {},
-  muiTab: {},
-  tabsLabel: {},
-  tabsPanel: {},
-  customTooltip: {
-    border: '#03A383 1px solid',
+  muiTabs: {
+    root: {
+      marginTop: '15px',
+    },
+    flexContainer: {
+      borderBottom: '10px solid #40789C',
+      overflow: 'visible !important',
+    },
+    indicator: {
+      display: 'none',
+    },
   },
-  customArrow: {
-    '&::before': {
-      border: '#03A383 1px solid',
+  muiTab: {
+    root: {
+      width: '250px',
+      height: '45px',
+      minHeight: '40px',
+      marginRight: '10px',
+      background: '#EAEAEA',
+      fontSize: '18px',
+      fontFamily: 'Raleway',
+      fontWeight: '400',
+      lineHeight: '18px',
+      paddingLeft: '5px',
+      letterSpacing: '0.25px',
+      borderTop: '1px solid black',
+      borderLeft: '1px solid black',
+      borderRight: '1px solid black',
+      '&$selected': {
+        fontWeight: 'bolder',
+      },
     },
   },
+  tabsLabel: {
+    fontFamily: 'Lato',
+    textTransform: 'capitalize',
+    fontSize: '21px',
+  },
+  tabsPanel: {},
 };
 
 export default tabsStyle;