#97 - WIP - Adds react-router-dom. Adds wip version of details page. …

…Slices main view into smaller components.
UXPin · Jul 28, 2020 · 897b06d · 897b06d
1 parent 7b99150
commit 897b06d
Show file tree

Hide file tree

Showing 11 changed files with 424 additions and 76 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/src/components/cells/internal-link.jsx b/src/components/cells/internal-link.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { clearKey } from '../../helpers/text';
+
+export default function generateInternalLinkCell(value) {
+  const to = clearKey(value);
+
+  return (
+    <Link to={to}>
+      {value}
+    </Link>
+  );
+}
diff --git a/src/components/logo/logo.jsx b/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>
   );
 };
 

diff --git a/src/components/table/table.jsx b/src/components/table/table.jsx
@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Sorting from '../sorting/sorting';
 import Filters from '../filters/filters';
+import LinkCellRenderer from '../cells/internal-link';
 import {
   StyledTh,
   StyledTable,
@@ -19,6 +20,11 @@ import {
 import Icon from '../icon/icon';
 import link from '../../icons/link.svg';
 
+const classNames = new Map([
+  ['company', 'fixed'],
+  ['system', 'fixed fixed-system'],
+]);
+
 export default class Table extends Component {
   /* Filter Builter. Builds all the filters in the table based on JSON Data */
   getFilters(fixed = false) {
@@ -179,24 +185,25 @@ export default class Table extends Component {
     /* If content of the cell (value) is just a single line of text then render
     ** goes as follows:
     */
+    const className = classNames.get(category) || '';
 
     if (typeof value === 'string') {
+      let content = url ? stringLink : (<p>{value}</p>);
+
+      if (category === 'company') {
+        content = LinkCellRenderer(ds);
+      }
+
       return (
         <td
           title={title}
           key={category}
-          className={
-            category === 'company' ? 'fixed' : category === 'system' ? 'fixed fixed-system' : ''
-          }
+          className={className}
           id={`${id}${category}`}
         >
-          {url ? (
-            <div className="cell-wrapper">{stringLink}</div>
-          ) : (
-            <div className="cell-wrapper">
-              <p>{value}</p>
-            </div>
-          )}
+          <div className="cell-wrapper">
+            {content}
+          </div>
         </td>
       );
     }
@@ -212,9 +219,7 @@ export default class Table extends Component {
         <td
           key={category}
           id={`${id}${category}`}
-          className={
-            category === 'company' ? 'fixed' : category === 'system' ? 'fixed fixed-system' : ''
-          }
+          className={className}
         >
           <div className="cell-wrapper">
             <ul>

diff --git a/src/components/topBar/top-bar.jsx b/src/components/topBar/top-bar.jsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { StyledTopBar, StyledBrand } from './top-bar.styles';
+import { Link } from 'react-router-dom';
 
+import { StyledTopBar, StyledBrand } from './top-bar.styles';
 import Logo from '../logo/logo';
 import Social from '../social/social';
 
@@ -10,15 +11,13 @@ const TopBar = ({ scroll }) => (
     <StyledBrand scroll={scroll}>
       <Logo tab={1} />
       <figcaption>
-        <a
+        <Link
+          to="/"
           tabIndex={1}
-          href="http://uxpin.com"
-          target="_blank"
-          rel="noopener noreferrer"
           title="UXPin - The Design Systems Platform"
         >
           The Design Systems Platform
-        </a>
+        </Link>
       </figcaption>
     </StyledBrand>
     <Social

diff --git a/src/containers/appContainer/app-container.jsx b/src/containers/appContainer/app-container.jsx
@@ -1,4 +1,8 @@
 import React, { Component } from 'react';
+import {
+  BrowserRouter, Switch, Route,
+} from 'react-router-dom';
+
 import TableContainer from '../tableContainer/table-container';
 import HeaderContainer from '../headerContainer/header-container';
 import InfoContainer from '../infoContainer/info-container';
@@ -8,6 +12,7 @@ import UXPinPromo from '../../components/uxpinPromo/uxpin-promo';
 import Footer from '../../components/footer/footer';
 
 import StyledTwoColumns from './app-container.styles';
+import DetailsPage from '../detailsPage/details-page';
 
 import prototyping from '../../assets/powerful-prototyping.png';
 import deck from '../../assets/icon-board.png';
@@ -35,34 +40,66 @@ export default class App extends Component {
 
     return (
       <main>
-        <HeaderContainer scroll={scroll} />
-        <TableContainer scroll={scroll} scrollUpdate={this.updateScroll} />
-        <InfoContainer>
-          <SectionHeader content="why adele?" id="adele-info" />
-          <AdeleInfo />
-          <SectionHeader content="do you need help with your system?" id="uxpin-info" />
-          <StyledTwoColumns>
-            <UXPinPromo
-              header="Evangelize Design System with a Free Template!"
-              text="40+ Slides ready for action. Perfect for team and stakeholder presentation.
-                Available as a powerpoint and keynote deck."
-              buttonLabel="Learn more & download"
-              alt="Slide Icon"
-              image={deck}
-              link="https://www.uxpin.com/evangelizing-design-system-roi-template?utm_source=adele.uxpin.com&utm_medium=upartner&utm_campaign=Adele"
-            />
-            <UXPinPromo
-              header="UXPin: Prototype and Manage Your Design System"
-              text="Join thousands of companies (including PayPal, Sapient and HBO)
-              and optimize your design process with UXPin."
-              buttonLabel="Start a free trial now!"
-              alt="Prototyping Icon"
-              image={prototyping}
-              link="https://www.uxpin.com?utm_source=adele.uxpin.com&utm_medium=upartner&utm_campaign=Adele"
-            />
-          </StyledTwoColumns>
-        </InfoContainer>
-        <Footer />
+        <BrowserRouter>
+          <Switch>
+            <Route path="/:id">
+              <DetailsPage />
+              <InfoContainer>
+                <SectionHeader content="do you need help with your system?" id="uxpin-info" />
+                <StyledTwoColumns>
+                  <UXPinPromo
+                    header="Evangelize Design System with a Free Template!"
+                    text="40+ Slides ready for action. Perfect for team and stakeholder presentation.
+                      Available as a powerpoint and keynote deck."
+                    buttonLabel="Learn more &amp; download"
+                    alt="Slide Icon"
+                    image={deck}
+                    link="https://www.uxpin.com/evangelizing-design-system-roi-template?utm_source=adele.uxpin.com&utm_medium=upartner&utm_campaign=Adele"
+                  />
+                  <UXPinPromo
+                    header="UXPin: Prototype and Manage Your Design System"
+                    text="Join thousands of companies (including PayPal, Sapient and HBO)
+                    and optimize your design process with UXPin."
+                    buttonLabel="Start a free trial now!"
+                    alt="Prototyping Icon"
+                    image={prototyping}
+                    link="https://www.uxpin.com?utm_source=adele.uxpin.com&utm_medium=upartner&utm_campaign=Adele"
+                  />
+                </StyledTwoColumns>
+              </InfoContainer>
+            </Route>
+            <Route exact path="/">
+              <HeaderContainer scroll={scroll} />
+              <TableContainer scroll={scroll} scrollUpdate={this.updateScroll} />
+              <InfoContainer>
+                <SectionHeader content="why adele?" id="adele-info" />
+                <AdeleInfo />
+                <SectionHeader content="do you need help with your system?" id="uxpin-info" />
+                <StyledTwoColumns>
+                  <UXPinPromo
+                    header="Evangelize Design System with a Free Template!"
+                    text="40+ Slides ready for action. Perfect for team and stakeholder presentation.
+                      Available as a powerpoint and keynote deck."
+                    buttonLabel="Learn more &amp; download"
+                    alt="Slide Icon"
+                    image={deck}
+                    link="https://www.uxpin.com/evangelizing-design-system-roi-template?utm_source=adele.uxpin.com&utm_medium=upartner&utm_campaign=Adele"
+                  />
+                  <UXPinPromo
+                    header="UXPin: Prototype and Manage Your Design System"
+                    text="Join thousands of companies (including PayPal, Sapient and HBO)
+                    and optimize your design process with UXPin."
+                    buttonLabel="Start a free trial now!"
+                    alt="Prototyping Icon"
+                    image={prototyping}
+                    link="https://www.uxpin.com?utm_source=adele.uxpin.com&utm_medium=upartner&utm_campaign=Adele"
+                  />
+                </StyledTwoColumns>
+              </InfoContainer>
+            </Route>
+          </Switch>
+          <Footer />
+        </BrowserRouter>
       </main>
     );
   }