@navinc/base-react-components/src/tab-group.js

Nav's Pattern Library

import React, { Children } from 'react'
import propTypes from 'prop-types'
import Text from './text.js'
import styled from 'styled-components'
import isRebrand from './is-rebrand.js'

export const TabGroup = styled.nav`
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  border-bottom: 1px solid ${({ theme }) => (isRebrand(theme) ? theme.navNeutral200 : theme.neutral300)};
  padding-top: 16px;

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

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

export const Tab = styled(Text).withConfig({
  shouldForwardProp: (prop) => !['isActive'].includes(prop),
})`
  position: relative;
  color: ${({ theme }) => (isRebrand(theme) ? theme.navNeutralDark : theme.neutral500)};

  &:hover {
    color: ${({ theme }) => (isRebrand(theme) ? theme.navNeutralDark : theme.neutral500)};
  }

  &::after {
    content: '';
    width: 100%;
    height: 4px;
    background-color: ${({ isActive, theme }) => (isActive ? theme.navPrimary : 'transparent')};
    border-radius: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
  }
`

Tab.propTypes = {
  isActive: propTypes.bool,
}

export default ({ children, ...props }) => (
  <TabGroup data-testid="tab-group" {...props}>
    {Children.toArray(children).map(({ type, key, props }) => (
      <Tab as={type} key={key} {...props} />
    ))}
  </TabGroup>
)