Create and use BoldToggle component

src/components/base/BoldToggle.js

@@ -0,0 +1,38 @@
+// @flow
+
+import React from 'react'
+
+import Text from 'components/base/Text'
+import Box from 'components/base/Box'
+
+type Props = {
+  boldWeight?: string | number,
+  normalWeight?: string | number,
+  isBold: boolean,
+  children: any,
+}
+
+function BoldToggle(props: Props) {
+  const { boldWeight, normalWeight, isBold, children, ...p } = props
+  return (
+    <Box relative>
+      <Text fontWeight={boldWeight} style={{ opacity: isBold ? 1 : 0 }} {...p}>
+        {children}
+      </Text>
+      {!isBold && (
+        <Box sticky align="center" justify="center">
+          <Text fontWeight={normalWeight} {...p}>
+            {children}
+          </Text>
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+BoldToggle.defaultProps = {
+  boldWeight: 600,
+  normalWeight: 400,
+}
+
+export default BoldToggle

src/components/base/Pills/index.js

@@ -5,6 +5,7 @@ import styled from 'styled-components'
 
 import { rgba } from 'styles/helpers'
 import Box, { Tabbable } from 'components/base/Box'
+import BoldToggle from 'components/base/BoldToggle'
 
 type Item = {
   key: string,
@@ -43,11 +44,14 @@ function Pills(props: Props) {
   const { items, activeKey, onChange, ...p } = props
   return (
     <Container {...p}>
-      {items.map(item => (
-        <Pill isActive={item.key === activeKey} onClick={() => onChange(item)} key={item.key}>
-          {item.label}
-        </Pill>
-      ))}
+      {items.map(item => {
+        const isActive = item.key === activeKey
+        return (
+          <Pill isActive={isActive} onClick={() => onChange(item)} key={item.key}>
+            <BoldToggle isBold={isActive}>{item.label}</BoldToggle>
+          </Pill>
+        )
+      })}
     </Container>
   )
 }