@navinc/base-react-components/dist/tab-group.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 } from "react/jsx-runtime";
import { Children } from 'react';
import { Text } from './text.js';
import { styled } from 'styled-components';
/** @deprecated use the wayfinder tabs from @navinc/base-react-components/wayfinder instead */
export const TabGroupContainer = styled.nav.withConfig({ displayName: "brc-sc-TabGroupContainer", componentId: "brc-sc-114jytm" }) `
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  border-bottom: 1px solid ${({ theme }) => theme.navNeutral200};
  padding-top: 16px;

  & > * {
    padding: 8px 0 16px;
    margin-right: 48px;
  }

  & > *:last-child {
    margin-right: 0;
  }

  button {
    border-bottom-width: 0;
    font-weight: 600;
  }
`;
/** @deprecated use the wayfinder tabs from @navinc/base-react-components/wayfinder instead */
export const Tab = styled(Text).withConfig({
    shouldForwardProp: (prop) => !['isActive'].includes(prop),
}) `
  position: relative;
  color: ${({ theme, isActive }) => (isActive ? theme.navPrimary400 : theme.navNeutral400)};

  &:hover {
    color: ${({ theme }) => theme.navPrimary400};
  }

  &::after {
    content: '';
    width: 100%;
    height: 4px;
    background-color: ${({ isActive, theme }) => (isActive ? theme.navPrimary400 : 'transparent')};
    border-radius: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
  }
`;
/**
 * @deprecated use the wayfinder tabs from @navinc/base-react-components/wayfinder instead
Wraps and positions tabs created from child elements. Placed at the top of a card to allow users to change the state/view of the card.

Create tabs by passing in child elements to a `TabGroup`.
For each child use the `isActive` flag to control the conditions
when active styling should be applied.

#### Usage:

For instance where the URL should not change in the case of a filter,
you can use `isActive` and an `onClick` to change the content of the page.

```
<TabGroup>
  <FilterLink
    isActive={alertsListFilter === 'ALL_ALERTS'}
    onClick={this.setAlertsFilter('ALL_ALERTS')}>
    All Alerts
  </FilterLink>

  <FilterLink
    isActive={alertsListFilter === 'BUSINESS'}
    onClick={this.setAlertsFilter('BUSINESS')}>
    Business
  </FilterLink>
<TabGroup>
```

 **/
export const TabGroup = (_a) => {
    var { children } = _a, props = __rest(_a, ["children"]);
    return (_jsx(TabGroupContainer, Object.assign({ "data-testid": "tab-group" }, props, { children: Children.toArray(children).map(({ type, key, props }) => (_jsx(Tab, Object.assign({ as: type }, props), key))) })));
};
//# sourceMappingURL=tab-group.js.map