@dnanpm/styleguide/build/cjs/components/Tab/Tab.js

DNA Styleguide repository provides the set of components and theme object used in various DNA projects.

'use strict';

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

var tslib = require('tslib');
var React = require('react');
var styledComponents = require('styled-components');
var theme = require('../../themes/theme.js');
var styledUtils = require('../../utils/styledUtils.js');
var Box = require('../Box/Box.js');
var Divider = require('../Divider/Divider.js');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefaultCompat(React);

// TODO: Change to button HTML element as a part of https://jira.dna.fi/browse/STYLE-622
const TabLabel = styledComponents.styled.li `
    display: inline-block;
    list-style: none;
    font-size: ${theme.default.fontSize.default};
    line-height: ${theme.default.lineHeight.default};
    font-weight: ${({ $isActive }) => ($isActive ? theme.default.fontWeight.bold : theme.default.fontWeight.book)};
    background-color: ${({ $isActive }) => $isActive ? theme.default.color.background.white.default : theme.default.color.background.sand.E01};
    border-radius: ${theme.default.radius.default} ${theme.default.radius.default} 0 0;
    border: 1px solid ${theme.default.color.line.L03};
    border-bottom: 0 none;
    padding: 0.625rem 1.25rem;
    cursor: pointer;

    &:focus {
        border: 1px solid ${theme.default.color.focus.light};
        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.dark};
        z-index: 1;
        outline: none;
    }
`;
const TabStyle = styledComponents.styled.li `
    display: inline-block;
    list-style: none;
    cursor: pointer;
    padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.8)}
        ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.6)};
    color: ${theme.default.color.text.black};
    font-size: ${theme.default.fontSize.default};
    line-height: ${theme.default.lineHeight.default};
    font-weight: ${theme.default.fontWeight.book};

    ${({ $isActive }) => $isActive &&
    `
            color: ${theme.default.color.text.pink};
            background-color: ${theme.default.color.background.sand.E01};
        `}

    ${({ $type }) => $type === 'underlined' &&
    `
            padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.6)} 0;
        `}
    
    ${({ $isActive, $type }) => $isActive &&
    $type === 'underlined' &&
    `
            border-bottom: 2px solid ${theme.default.color.default.pink};
            background-color: transparent;
        `}
`;
const ContentContainer = styledComponents.styled.div `
    ${({ $type }) => {
    if ($type === 'box' || $type === 'default') {
        return `
                border-top-left-radius: 0;
            `;
    }
    if ($type === 'panel') {
        return `
                border-top: 1px solid ${theme.default.color.line.L03};
            `;
    }
    if ($type === 'underlined' || $type === 'gray') {
        return `
                margin-top: ${theme.default.grid.gutter};
            `;
    }
    return '';
}}
`;
/** @visibleName Tab */
const Tab = (_a) => {
    var { type = 'box', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
    const onClickHandler = (e) => {
        if (props.onClick) {
            props.onClick(props.label, e);
        }
    };
    const isActive = props.activeTab ? props.activeTab === props.label : props.isActive;
    return type === 'box' || type === 'default' || type === 'panel' ? (React__default.default.createElement(React__default.default.Fragment, null,
        React__default.default.createElement(TabLabel, { role: "tab", id: props.id, "$type": type, "aria-selected": isActive, "$isActive": isActive, onClick: onClickHandler, tabIndex: isActive ? 0 : -1 }, props.label),
        props.isStateless &&
            (props.children && (props.activeTab === props.label || props.isActive) ? (React__default.default.createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type, as: (type === 'box' || type === 'default') && !props.tabStyle
                    ? Box.default
                    : undefined }, props.children)) : (React__default.default.createElement(Divider.default, { margin: "0" }))))) : (React__default.default.createElement(React__default.default.Fragment, null,
        React__default.default.createElement(TabStyle, { role: "tab", id: props.id, "$type": props.tabStyle || type, "aria-selected": isActive, "$isActive": isActive, onClick: onClickHandler, tabIndex: isActive ? 0 : -1 }, props.label),
        props.isStateless &&
            props.children &&
            (props.activeTab === props.label || props.isActive) && (React__default.default.createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type }, props.children))));
};

exports.default = Tab;