Styleguide

Tabs

Right now there is no jquery tab implementation as the current usages fit the following categories:

  1. simple anchor tags with full page requests
  2. Tabs React component consumers, for which you can see an example below.

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.

Sizes

Small by Default

.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>

Large

.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>

Types

Fixed by Default

.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>

Fluid

.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>

Tabs in React

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} />
  );
}