From 2d1fa52638b3669e76278654764615cfe68376e3 Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Mon, 12 Feb 2018 13:46:13 +0100
Subject: [PATCH] Create and use BoldToggle component

---
 src/components/base/BoldToggle.js  | 38 ++++++++++++++++++++++++++++++
 src/components/base/Pills/index.js | 14 +++++++----
 2 files changed, 47 insertions(+), 5 deletions(-)
 create mode 100644 src/components/base/BoldToggle.js

diff --git a/src/components/base/BoldToggle.js b/src/components/base/BoldToggle.js
new file mode 100644
index 00000000..08850d40
--- /dev/null
+++ b/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
diff --git a/src/components/base/Pills/index.js b/src/components/base/Pills/index.js
index 5c2c7ec4..4e0039eb 100644
--- a/src/components/base/Pills/index.js
+++ b/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>
   )
 }