Create the Pills component

.storybook/config.js

@@ -4,6 +4,8 @@ import { withKnobs } from '@storybook/addon-knobs'
 import { setOptions } from '@storybook/addon-options'
 import { ThemeProvider } from 'styled-components'
 
+import 'globals'
+
 import 'styles/global'
 import theme from 'styles/theme'
 

src/components/base/Box/index.js

@@ -8,6 +8,7 @@ import {
   borderWidth,
   color,
   fontSize,
+  fontWeight,
   justifyContent,
   space,
   flex,
@@ -25,6 +26,7 @@ const Box = styled.div`
   ${space};
   ${flex};
   ${fontSize};
+  ${fontWeight};
   ${color};
   ${alignItems};
   ${justifyContent};

src/components/base/Pills/index.js

@@ -0,0 +1,55 @@
+// @flow
+
+import React from 'react'
+import styled from 'styled-components'
+
+import { rgba } from 'styles/helpers'
+import Box, { Tabbable } from 'components/base/Box'
+
+type Item = {
+  key: string,
+  label: string,
+}
+
+type Props = {
+  items: Array<Item>,
+  activeKey: string,
+  onChange: Item => void,
+}
+
+const Container = styled(Box).attrs({
+  horizontal: true,
+})``
+
+const Pill = styled(Tabbable).attrs({
+  color: p => (p.isActive ? 'dodgerBlue' : 'warmGrey'),
+  bg: p => (p.isActive ? rgba(p.theme.colors.dodgerBlue, 0.1) : ''),
+  px: 2,
+  fontSize: 0,
+  align: 'center',
+  justify: 'center',
+})`
+  height: 30px;
+  border-radius: 4px;
+  outline: none;
+  cursor: pointer;
+
+  &:focus {
+    color: ${p => p.theme.colors.dodgerBlue};
+  }
+`
+
+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>
+      ))}
+    </Container>
+  )
+}
+
+export default Pills

src/components/base/Pills/stories.js

@@ -0,0 +1,35 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import { storiesOf } from '@storybook/react'
+
+import Pills from 'components/base/Pills'
+
+const stories = storiesOf('Pills', module)
+
+type State = {
+  key: string,
+}
+
+class Wrapper extends PureComponent<any, State> {
+  state = {
+    key: 'day',
+  }
+  render() {
+    const { key } = this.state
+    return (
+      <Pills
+        activeKey={key}
+        items={[
+          { key: 'day', label: 'Day' },
+          { key: 'week', label: 'Week' },
+          { key: 'month', label: 'Month' },
+          { key: 'year', label: 'Year' },
+        ]}
+        onChange={item => this.setState({ key: item.key })}
+      />
+    )
+  }
+}
+
+stories.add('basic', () => <Wrapper />)

src/styles/theme.js

@@ -4,6 +4,7 @@ export default {
   sizes: {
     sideBarWidth: 250,
   },
+  fontSizes: [13, 14, 16, 20, 24, 32, 48, 64, 72],
   colors: {
     transparent: 'transparent',
 
@@ -23,5 +24,8 @@ export default {
     pearl: '#f4f4f4',
     shark: '#666666',
     steel: '#767676',
+
+    dodgerBlue: '#4b84ff',
+    warmGrey: '#999999',
   },
 }