feat: adds Breadcrumb component for react layout

packages/react-layouts/src/Breadcrumb/Breadcrumb.md

@@ -0,0 +1,42 @@
+Breadcrumb example:
+It allows users to keep track and maintain awareness of their locations within your website.
+
+```js
+const { MemoryRouter } = require('react-router-dom');
+const items = [
+  {
+    label: 'Project Name 13',
+    path: '/',
+    arrowIcon: 'angle_double_right',
+    emphasized: true,
+  },
+  {
+    label: 'SEARCH',
+    path: '/search',
+    tooltip: 'project AND name',
+  },
+  {
+    label: 'EXPLORE',
+    path: '/search/explore',
+  },
+  {
+    label: 'ANALYZE',
+    path: '/Breadcrumb',
+    disabled: true,
+  },
+  {
+    label: 'PRESENT',
+    path: '/search/explore/analyze/present',
+    disabled: true,
+  },
+  {
+    label: 'EXTERNAL',
+    path: 'https://quid.com',
+    external: true,
+  },
+];
+
+<MemoryRouter>
+  <Breadcrumb items={items} />
+</MemoryRouter>;
+```

packages/react-layouts/src/Breadcrumb/NavLink/index.js

@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) Quid, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @flow
+import * as React from 'react';
+import { NavLink as RouterNavLink } from 'react-router-dom';
+import styled from '@emotion/styled/macro';
+import css from '@emotion/css/macro';
+import { textStyles, withFallback as wf } from '@quid/theme';
+import { ClassNames } from '@emotion/core';
+
+export type Props = {
+  to: string,
+  external?: boolean,
+  disabled?: boolean,
+  emphasized?: boolean,
+  children: React.Node,
+};
+
+const NavLink = styled(
+  ({
+    to,
+    external = false,
+    disabled = false,
+    emphasized = false,
+    children,
+    ...props
+  }: Props) => {
+    if (external || disabled) {
+      return (
+        <a href={!disabled ? to : undefined} {...props}>
+          {children}
+        </a>
+      );
+    } else {
+      return (
+        <ClassNames>
+          {({ css }) => (
+            <RouterNavLink
+              exact
+              activeClassName={css`
+                //FIXME(gabriel.micko) Find a way to use textStyles('bold')
+                font-weight: bold;
+              `}
+              to={to}
+              {...props}
+            >
+              {children}
+            </RouterNavLink>
+          )}
+        </ClassNames>
+      );
+    }
+  }
+)`
+  ${textStyles('normal')};
+  color: ${wf(props => {
+    return props.theme.primary;
+  })};
+  text-decoration: none;
+
+  ${props =>
+    props.emphasized &&
+    css`
+      ${textStyles('bold')(props)};
+    `}
+
+  ${props =>
+    props.disabled &&
+    css`
+      ${textStyles('disabled')(props)};
+      cursor: default;
+    `}
+`;
+
+export default NavLink;