jobiqo-cl/lib/src/components/02-atoms/17-tabs/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var index = require('../../../../node_modules/@reach/tabs/es/index.js');
var styles = require('../../../../node_modules/@reach/tabs/styles.css.js');

/**
 * @file index.tsx
 *
 * @fileoverview Renders information grouped on tabs.
 */
const TabsCSS = styled.css `
  body [data-reach-tabs] {
    position: relative;
  }
  body [data-reach-tab-list] {
    overflow: auto;
    ${props => (props.tabsListItemFull ? `display: flex;` : ``)}
    ${props => props.hardBackground
    ? `background: ${props.theme.colors[props.hardBackgroundColor]};`
    : `background: ${props.theme.colors.gray2};`}
  }
  body [data-reach-tab] {
    padding: ${props => props.theme.tabs.tab.padding};
    text-transform: ${props => props.theme.tabs.tab.textTransform};
    font-size: ${props => props.theme.tabs.tab.fontSize};
    ${props => (props.hardBackground ? `color: ${props.theme.colors[`${props.hardBackgroundColor}VeryLight`]};` : ``)}
    ${props => (props.tabsListItemFull ? `flex: 1;` : `flex:none;`)}
  }
  body [data-reach-tab][data-selected] {
    ${props => props.hardBackground
    ? `border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: ${props.theme.button.color[props.hardBackgroundColor]};
        color: ${props.theme.button.color[props.hardBackgroundColor]};`
    : `
          border: none;
          background: ${props.theme.colors.white};
        `}

    font-weight: bold;
  }
  body [data-reach-tab-panels] {
    padding: ${props => props.theme.tabs.panel.width};
    background: ${props => props.theme.colors.white};
  }
`;
const GlobalTabsStyle = styled.createGlobalStyle `
  ${styles}
  ${TabsCSS}
`;
const Tabs = ({ tabsListItemFull = true, hardBackground = true, hardBackgroundColor = 'primary', children, }) => {
    return (React__default.createElement(React__default.Fragment, null,
        React__default.createElement(GlobalTabsStyle, { tabsListItemFull: tabsListItemFull, hardBackground: hardBackground, hardBackgroundColor: hardBackgroundColor }),
        React__default.createElement(index.Tabs, null, children)));
};

exports.Tab = index.Tab;
exports.TabList = index.TabList;
exports.TabPanel = index.TabPanel;
exports.TabPanels = index.TabPanels;
exports.GlobalTabsStyle = GlobalTabsStyle;
exports.Tabs = Tabs;
exports.TabsCSS = TabsCSS;