Adding dedicated subpages for every DS (#104)

* #97 - WIP - Adds react-router-dom. Adds wip version of details page. Slices main view into smaller components.

* #97 Adds basic css styles

* #97 - Adds icons

* #97 - small styling changes

* #97 - Adds observer to add breadcrumbs + CSS styling adjustments

* #97 - Adds small adjustments in styles. Adds inline documentation to the 'data' service.

* #97 - updates tests specs

(fixes #97)

.eslintrc.js

@@ -13,5 +13,6 @@ module.exports = {
     'class-methods-use-this': 'off',
     'no-mixed-operators': 'off',
     'jsx-a11y/tabindex-no-positive': 'off',
+    'import/prefer-default-export': 'off',
   },
 };

package.json

@@ -58,6 +58,7 @@
     "raw-loader": "^4.0.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
     "react-svg-inline": "^2.1.1",
     "react-test-renderer": "^16.13.1",
     "styled-components": "^5.1.1",

src/components/cells/internal-link.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import { table } from '../../style_tokens/tokens';
+import { clearKey } from '../../helpers/text';
+
+export function InternalLinkCell({ value, route }) {
+  const to = clearKey(route);
+
+  return (
+    <StyledLink to={to}>
+      {value}
+    </StyledLink>
+  );
+}
+
+InternalLinkCell.propTypes = {
+  route: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+};
+
+export const StyledLink = styled(Link)`
+  color: ${table.typography.color};
+  display: flex;
+  padding-left: ${table.space.cellPadding};
+  padding-right: ${table.space.cellPadding};
+  text-decoration: none;
+
+  &:hover {
+    color: ${table.typography.hoveredLink};
+    text-decoration: underline;
+
+    span > svg {
+      fill: ${table.typography.hoveredLink};
+    }
+  }
+
+  span {
+    align-items: center;
+    display: flex;
+    height: 24px;
+    margin-right: 3px;
+    width: 14px;
+  }
+`;

src/components/logo/logo.jsx

@@ -1,20 +1,20 @@
 /* eslint-disable arrow-body-style */
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
 import SVGInline from 'react-svg-inline';
+
 import logo from '../../icons/uxpin_logo.svg';
 
 const Logo = ({ tab }) => {
   return (
-    <a
-      href="https://www.uxpin.com?utm_source=adele.uxpin.com&utm_medium=upartner&utm_campaign=Adele"
-      target="_blank"
-      rel="noopener noreferrer"
-      title="UXPin logo"
+    <Link
+      to="/"
       tabIndex={tab}
+      title="UXPin logo"
     >
       <SVGInline svg={logo} />
-    </a>
+    </Link>
   );
 };
 

src/components/logo/tests/__snapshots__/logo.test.jsx.snap

@@ -1,32 +1,69 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders Logo correctly 1`] = `
-<Logo
-  tab={0}
->
-  <a
-    href="https://www.uxpin.com?utm_source=adele.uxpin.com&utm_medium=upartner&utm_campaign=Adele"
-    rel="noopener noreferrer"
-    tabIndex={0}
-    target="_blank"
-    title="UXPin logo"
+<BrowserRouter>
+  <Router
+    history={
+      Object {
+        "action": "POP",
+        "block": [Function],
+        "createHref": [Function],
+        "go": [Function],
+        "goBack": [Function],
+        "goForward": [Function],
+        "length": 1,
+        "listen": [Function],
+        "location": Object {
+          "hash": "",
+          "pathname": "/",
+          "search": "",
+          "state": undefined,
+        },
+        "push": [Function],
+        "replace": [Function],
+      }
+    }
   >
-    <SVGInline
-      classSuffix="-svg"
-      cleanup={Array []}
-      cleanupExceptions={Array []}
-      component="span"
-      svg="test-file-stub"
+    <Logo
+      tab={0}
     >
-      <span
-        className="SVGInline"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "test-file-stub",
-          }
-        }
-      />
-    </SVGInline>
-  </a>
-</Logo>
+      <Link
+        tabIndex={0}
+        title="UXPin logo"
+        to="/"
+      >
+        <LinkAnchor
+          href="/"
+          navigate={[Function]}
+          tabIndex={0}
+          title="UXPin logo"
+        >
+          <a
+            href="/"
+            onClick={[Function]}
+            tabIndex={0}
+            title="UXPin logo"
+          >
+            <SVGInline
+              classSuffix="-svg"
+              cleanup={Array []}
+              cleanupExceptions={Array []}
+              component="span"
+              svg="test-file-stub"
+            >
+              <span
+                className="SVGInline"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "test-file-stub",
+                  }
+                }
+              />
+            </SVGInline>
+          </a>
+        </LinkAnchor>
+      </Link>
+    </Logo>
+  </Router>
+</BrowserRouter>
 `;

src/components/logo/tests/logo.test.jsx

@@ -1,10 +1,11 @@
 import { mount } from 'enzyme';
 import React from 'react';
 import 'jest-styled-components';
+import { BrowserRouter } from 'react-router-dom';
 
 import Logo from '../logo';
 
 it('renders Logo correctly', () => {
-  const wrapper = mount(<Logo />);
+  const wrapper = mount(<BrowserRouter><Logo /></BrowserRouter>);
   expect(wrapper).toMatchSnapshot();
 });

src/components/sectionHeader/section-header.jsx

@@ -3,15 +3,21 @@ import PropTypes from 'prop-types';
 import StyledSectionHeader from './section-header.styles';
 
 const SectionHeader = ({
+  className,
   content,
   id,
 }) => (
-  <StyledSectionHeader id={id}>{content}</StyledSectionHeader>
+  <StyledSectionHeader id={id} className={className}>{content}</StyledSectionHeader>
 );
 
 SectionHeader.propTypes = {
+  className: PropTypes.string,
   content: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
 };
 
+SectionHeader.defaultProps = {
+  className: '',
+};
+
 export { SectionHeader as default };

src/components/sectionHeader/tests/__snapshots__/section-header.test.jsx.snap

@@ -11,10 +11,12 @@ exports[`renders SectionHeader correctly 1`] = `
 }
 
 <SectionHeader
+  className=""
   content="why adele?"
   id="test"
 >
   <styled.h3
+    className=""
     id="test"
   >
     <h3