feat(Pills): add a Pill Component

src/components/Pill/Pill.stories.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import Pill from ".";
+
+export default {
+  title: "Components/Pill",
+  component: Pill,
+  argTypes: {
+    onClick: {action: "clicked"}
+  }
+};
+
+const Template: any = (args: any) => <Pill {...args} />;
+
+export const GroupOfPills = () => (
+  <div>
+    <Pill label="Days" active />
+    <Pill label="Weeks" />
+    <Pill label="Months" />
+  </div>
+);
+
+export const ActivePill = Template.bind({});
+ActivePill.args = {
+  active: true,
+  label: "Active"
+};
+
+export const NotActivePill = Template.bind({});
+NotActivePill.args = {
+  active: false,
+  label: "Not Active"
+};
+
+export const DisabledPill = Template.bind({});
+DisabledPill.args = {
+  disabled: false,
+  label: "Disabled"
+};
+
+export const OnClick = Template.bind({});
+OnClick.args = {
+  label: "Click me 👆"
+};

src/components/Pill/index.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import "fontsource-roboto";
+import styled from "styled-components";
+
+type Props = {
+  disabled?: boolean;
+  onClick?: () => void;
+  active?: boolean;
+  label: string;
+};
+
+const InnerText = styled.span`
+  //font-family: "Roboto", helvetica, arial, sans-serif;
+  //font-weight: 300;
+  //line-height: 1.5;
+  font-family: "Roboto", helvetica, arial, sans-serif;
+  font-weight: 400;
+  line-height: 19.5px;
+  font-size: 13px;
+`;
+
+const PillComponent = styled.a<Pick<Props, "disabled" | "active">>`
+  border: none;
+  cursor: pointer;
+  padding: 5px 16px 5px 16px;
+  margin: 0 2px;
+  text-decoration: none;
+  border-radius: 16px;
+
+  background-color: ${({active, disabled}) => {
+    if (disabled) {
+      return "#c6c6c6";
+    }
+
+    return active ? "#e5f4ff" : "none";
+  }};
+
+  color: ${({active, disabled}) => {
+    if (disabled) {
+      return "White";
+    }
+
+    return active ? "#0085FF" : "#1c1f3b";
+  }};
+
+  &:hover {
+    background-color: ${({active}) => {
+      return active ? "none" : "rgb(237, 238, 240)";
+    }};
+  }
+`;
+
+const Pill: React.FunctionComponent<Props> = ({
+  label,
+  onClick,
+  disabled = false,
+  active = false
+}) => (
+  <PillComponent active={active} disabled={disabled} onClick={onClick}>
+    <InnerText>{label}</InnerText>
+  </PillComponent>
+);
+
+export default Pill;