Inbox task 2 (#991)

* Add ability to properly cast a string, number, null to an integer

* Adding Tab UI component

* Only trigger chromatic when asked

front/src/modules/ui/tab/components/Tab.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  title: string;
+  active?: boolean;
+  className?: string;
+  onClick?: () => void;
+};
+
+const StyledTab = styled.div<{ active?: boolean }>`
+  align-items: center;
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  border-color: ${({ theme, active }) =>
+    active ? theme.border.color.inverted : 'transparent'};
+  color: ${({ theme, active }) =>
+    active ? theme.font.color.primary : theme.font.color.secondary};
+
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing(2) + ' ' + theme.spacing(4)};
+
+  &:hover,
+  &:active {
+    border-color: ${({ theme }) => theme.border.color.inverted};
+    color: ${({ theme }) => theme.font.color.primary};
+  }
+`;
+
+export function Tab({ title, active = false, onClick, className }: OwnProps) {
+  return (
+    <StyledTab onClick={onClick} active={active} className={className}>
+      {title}
+    </StyledTab>
+  );
+}