Right now there is no jquery tab implementation as the current usages fit the following categories:
Frameworks Team will gladly help write the jquery component for toggling tabs on-page
when the use case arises.
Hit up #frameworks if you get one and let's pair.
.tabs
%ul.tabs__navigation
%li.tabs__navigation__item.tabs__navigation__item--is-active
%a.tabs__navigation__link{href: "#"} Red Pill
%li.tabs__navigation__item
%a.tabs__navigation__link{href: "#"} Blue Pill
.tabs__content.tabs__content--is-active
.box.xs-p1
.tabs__content
.box.xs-p1
<div class='tabs'>
<ul class='tabs__navigation'>
<li class='tabs__navigation__item tabs__navigation__item--is-active'>
<a class='tabs__navigation__link' href='#'>Red Pill</a>
</li>
<li class='tabs__navigation__item'>
<a class='tabs__navigation__link' href='#'>Blue Pill</a>
</li>
</ul>
<div class='tabs__content tabs__content--is-active'>
<div class='box xs-p1'></div>
</div>
<div class='tabs__content'>
<div class='box xs-p1'></div>
</div>
</div>
.tabs.tabs--large
%ul.tabs__navigation
%li.tabs__navigation__item.tabs__navigation__item--is-active
%a.tabs__navigation__link{href: "#"} Red Pill
%li.tabs__navigation__item
%a.tabs__navigation__link{href: "#"} Blue Pill
.tabs__content.tabs__content--is-active
.box.xs-p1
<div class='tabs tabs--large'>
<ul class='tabs__navigation'>
<li class='tabs__navigation__item tabs__navigation__item--is-active'>
<a class='tabs__navigation__link' href='#'>Red Pill</a>
</li>
<li class='tabs__navigation__item'>
<a class='tabs__navigation__link' href='#'>Blue Pill</a>
</li>
</ul>
<div class='tabs__content tabs__content--is-active'>
<div class='box xs-p1'></div>
</div>
</div>
.tabs
%ul.tabs__navigation
%li.tabs__navigation__item.tabs__navigation__item--is-active
%a.tabs__navigation__link{href: "#"} Red Pill
%li.tabs__navigation__item
%a.tabs__navigation__link{href: "#"} Blue Pill
.tabs__content.tabs__content--is-active
.box.xs-p1
<div class='tabs'>
<ul class='tabs__navigation'>
<li class='tabs__navigation__item tabs__navigation__item--is-active'>
<a class='tabs__navigation__link' href='#'>Red Pill</a>
</li>
<li class='tabs__navigation__item'>
<a class='tabs__navigation__link' href='#'>Blue Pill</a>
</li>
</ul>
<div class='tabs__content tabs__content--is-active'>
<div class='box xs-p1'></div>
</div>
</div>
.tabs.tabs--fluid.tabs--large
%ul.tabs__navigation
%li.tabs__navigation__item.tabs__navigation__item--is-active
%a.tabs__navigation__link{href: "#"} Red Pill
%li.tabs__navigation__item
%a.tabs__navigation__link{href: "#"} Blue Pill
.tabs__content.tabs__content--is-active
.box.xs-p1
<div class='tabs tabs--fluid tabs--large'>
<ul class='tabs__navigation'>
<li class='tabs__navigation__item tabs__navigation__item--is-active'>
<a class='tabs__navigation__link' href='#'>Red Pill</a>
</li>
<li class='tabs__navigation__item'>
<a class='tabs__navigation__link' href='#'>Blue Pill</a>
</li>
</ul>
<div class='tabs__content tabs__content--is-active'>
<div class='box xs-p1'></div>
</div>
</div>
Right now there is only one usage of Tabs. It assumes the presence of a client router and uses nested routes to control the content of the tabs
Ping the #employer-team if you want to learn more about how they did it. (at least, until we build out cross-team react patterns/infra), or if you need help modifying the components to support regular anchor tags
// component boilerplate omitted
render() {
return (
<Tabs
className='' //
listClassName='' // Optional classNames for additional styling
>
<Tab
path={tabOnePath}
className='' //
linkClassName='' // Optional classNames for additional styling
titleClassName='' //
title='Tab One'
isActive={tabOneActive} // Bool
/>
<Tab
path={tabTwoPath}
title='Tab Two'
isActive={tabTwoActive}
/>
</Tabs>
<Route path={tabOnePath} component={TabOneComponent} />
<Route path={tabTwoPath} component={TabTwoComponent} />
);
}