@cimpress/react-components/dist/src/NavTab.js

React components to support the MCP styleguide

"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.NavTab = void 0;
const react_1 = __importDefault(require("react"));
const css_1 = require("@emotion/css");
const cvar_1 = __importDefault(require("./theme/cvar"));
const FeatureFlags_1 = require("./FeatureFlags");
const navStyle = (0, css_1.css) `
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  &::before,
  &::after {
    display: table;
    content: ' ';
  }
  &::after {
    clear: both;
  }
  > li {
    position: relative;
    display: block;
  }
`;
const navTabStyle = (0, css_1.css) `
  border-bottom: none;
  margin-bottom: 30px;
  > li {
    float: left;
    margin-bottom: -1px;
  }
  > li.active > a,
  > li.active > button {
    color: ${(0, cvar_1.default)('color-button-primary')};
    background-color: transparent;
  }
  > li.active > a,
  > li.active > a:focus,
  > li.active > a:hover,
  > li.active > button,
  > li.active > button:focus,
  > li.active > button:hover {
    border-width: 0;
  }
  > li > a {
    text-decoration: none;
  }
  > li > button {
    outline: 0;
    position: relative;
    line-height: 18px;
    color: inherit;
  }
  > li > a,
  > li > button {
    display: inline-block;
    border: none;
    color: ${(0, cvar_1.default)('color-text-default')};
    font-weight: 400;
    background: 0 0;
    background-color: transparent;
  }
  > li > a,
  > li > button {
    padding: 7px 5px;
    margin: 0 10px;
  }
  > li.disabled > button {
    color: ${(0, cvar_1.default)('color-text-disabled')};
    cursor: not-allowed;
  }
  > li.active > a::after,
  > li.active > button::after,
  > li:hover > a::after,
  > li:hover > button::after {
    transform: scale(1);
  }
  > li > a::after,
  > li > button::after {
    content: '';
    background: ${(0, cvar_1.default)('color-button-primary')};
    height: 2px;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -1px;
    transition: all 250ms ease 0s;
    transform: scale(0);
  }
  > li.disabled > a::after,
  > li.disabled > button::after {
    display: none;
  }
`;
const verticalStackedStyle = (0, css_1.css) `
  > li {
    float: none;
  }
  .nav-pills > li > a,
  .nav-pills > li > button,
  > li > a,
  > li > button {
    padding: ${(0, cvar_1.default)('spacing-4')} ${(0, cvar_1.default)('spacing-16')};
    margin: ${(0, cvar_1.default)('spacing-8')} 0;
  }
  .nav-pills > li > a::after,
  .nav-pills > li > button::after,
  > li > a::after,
  > li > button::after {
    height: 100%;
    width: 2px;
    bottom: 0;
  }
`;
const noOuterMarginCss = (0, css_1.css) `
  margin-bottom: 0;
`;
const NavTab = (_a) => {
    var { children, className, vertical } = _a, rest = __rest(_a, ["children", "className", "vertical"]);
    const { v17_noOuterSpacing } = (0, FeatureFlags_1.useFeatureFlags)();
    const fullClassName = (0, css_1.cx)('crc-navtab', navStyle, navTabStyle, v17_noOuterSpacing && noOuterMarginCss, className, {
        [verticalStackedStyle]: vertical,
    });
    return (react_1.default.createElement("ul", Object.assign({ className: fullClassName }, rest), children));
};
exports.NavTab = NavTab;
//# sourceMappingURL=NavTab.js.map