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

React components to support the MCP styleguide

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const css_1 = require("@emotion/css");
const cvar_1 = __importDefault(require("../theme/cvar"));
const colors_1 = require("../colors");
const internal_1 = require("../internal");
const tabStyle = (0, css_1.css) `
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: ${(0, cvar_1.default)('spacing-12')} ${(0, cvar_1.default)('spacing-32')};
  background-color: ${(0, cvar_1.default)('color-tabmenu-background')};
  border-bottom: 1px solid ${(0, cvar_1.default)('color-border-default')};

  &:hover {
    background-color: ${(0, cvar_1.default)('color-background-light')};
  }

  & > svg {
    margin-right: ${(0, cvar_1.default)('spacing-16')};
  }

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