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

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

import React__default from 'react';
import { css, createGlobalStyle } from 'styled-components';
import { Tabs as Tabs$1 } from '../../../../node_modules/@reach/tabs/es/index.js';
export { Tab, TabList, TabPanel, TabPanels } from '../../../../node_modules/@reach/tabs/es/index.js';
import * as reachTabsGlobalCSS from '../../../../node_modules/@reach/tabs/styles.css.js';

/**
 * @file index.tsx
 *
 * @fileoverview Renders information grouped on tabs.
 */
const TabsCSS = 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 = createGlobalStyle `
  ${reachTabsGlobalCSS}
  ${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(Tabs$1, null, children)));
};

export { GlobalTabsStyle, Tabs, TabsCSS };