@navinc/base-react-components/dist/sliding-tabs.js

Nav's Pattern Library

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;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Children, useState } from 'react';
import styled from 'styled-components';
import propTypes from 'prop-types';
import Text from './text.js';
import isRebrand from './is-rebrand.js';
const TabContainer = styled.div.withConfig({ displayName: "brc-sc-TabContainer", componentId: "brc-sc-2gw3qn" }) `
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: ${({ theme }) => (isRebrand(theme) ? theme.navSecondary100 : theme.neutral100)};
  border: 1px solid ${({ theme }) => (isRebrand(theme) ? theme.navNeutral300 : theme.neutral300)};
  border-radius: 99px;
  position: relative;
`;
const setTabTextColor = (isActive, theme) => {
    if (isRebrand(theme))
        return isActive ? theme.navNeutralLight : theme.navNeutral400;
    return isActive ? theme.white : theme.neutral400;
};
const Tab = styled(Text).attrs(() => ({ $bold: true })).withConfig({ displayName: "brc-sc-Tab", componentId: "brc-sc-ys6xtm" }) `
  text-align: center;
  padding: 16px 32px;
  border-radius: 99px;
  cursor: pointer;
  color: ${({ isActive, theme }) => setTabTextColor(isActive, theme)};
  transition: all 0.25s ease-in;
  position: relative;
`;
const Glider = styled.div.withConfig({ displayName: "brc-sc-Glider", componentId: "brc-sc-da8bhm" }) `
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: ${({ theme }) => (isRebrand(theme) ? theme.navPrimary400 : theme.azure)};
  width: 50%;
  border-radius: 99px;
  transition: 0.25s ease-out;
`;
Tab.propTypes = {
    isActive: propTypes.bool,
};
export default (_a) => {
    var { children, filterName } = _a, props = __rest(_a, ["children", "filterName"]);
    const [isOn, setIsOn] = useState(true);
    const handleToggleClick = () => setIsOn((isOn) => !isOn);
    return (_jsxs(TabContainer, Object.assign({ "data-testid": "sliding-tabs" }, props, { onClick: handleToggleClick }, { children: [_jsx(Glider, { "data-testid": "sliding-tabs-glider", style: { transform: `${isOn ? 'translateX(0)' : 'translateX(100%)'}` } }), Children.toArray(children).map(({ type, key, props }, i) => (_jsx(Tab, Object.assign({ as: type }, props, { id: i, "data-testid": `sliding-tabs-children-${i}` }), key)))] })));
};
//# sourceMappingURL=sliding-tabs.js.map