@cimpress/react-components/dist/esm/src/TabMenu/Tab.js

React components to support the MCP styleguide

import React from 'react';
import { css, cx } from '@emotion/css';
import cvar from '../theme/cvar';
import { coal, slate } from '../colors';
import { BlockButton } from '../internal';
const tabStyle = css `
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: ${cvar('spacing-12')} ${cvar('spacing-32')};
  background-color: ${cvar('color-tabmenu-background')};
  border-bottom: 1px solid ${cvar('color-border-default')};

  &:hover {
    background-color: ${cvar('color-background-light')};
  }

  & > svg {
    margin-right: ${cvar('spacing-16')};
  }

  & > div > p {
    margin: 0;
  }
`;
const tabActiveStyle = css `
  background-color: ${cvar('color-background')};
  padding-bottom: ${cvar('spacing-12')};
  border-bottom: ${cvar('spacing-2')} solid ${cvar('color-interactive')};
  pointer-events: none;
`;
const tabTitleStyle = css `
  color: ${cvar('color-text-selected')};
  margin: ${cvar('spacing-2')} 0;
`;
const tabTitleActiveStyle = css `
  color: ${cvar('color-tabcard-text-selected')};
`;
const Tab = ({ id, title, description, icon: Icon, onTabClick, isActive }) => (React.createElement(BlockButton, { "data-testid": id, className: cx(tabStyle, { [tabActiveStyle]: isActive }), onClick: event => onTabClick(event, id) },
    Icon ? React.createElement(Icon, { "data-testid": `icon-for-${id}`, weight: "light", color: isActive ? coal : slate, size: "2x" }) : null,
    React.createElement("div", null,
        React.createElement("h5", { className: cx(tabTitleStyle, { [tabTitleActiveStyle]: isActive }) }, title),
        description ? React.createElement("p", null, description) : null)));
export default Tab;
//# sourceMappingURL=Tab.js.map