Cleanup and file reorganization
This commit is contained in:
Tom Raithel
32
js/components/App.js
Normal file
32
js/components/App.js
Normal file
@@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import Header from './Header';
|
||||
import Router from './Router';
|
||||
|
||||
function App(props) {
|
||||
return (
|
||||
<div className="js--body">
|
||||
<div className="page">
|
||||
<div className="page__header">
|
||||
<Header />
|
||||
</div>
|
||||
<div className="page__content">
|
||||
<Router {...props} />
|
||||
</div>
|
||||
<div className="page__footer">
|
||||
<div className="branding">
|
||||
<span className="branding__logo"><img src="/assets/logo.svg"/></span>
|
||||
<div className="branding__content"><span className="footnote">AOE is a leading provider of Enterprise Open Source web solutions.
|
||||
Using current agile development methods, more than 250+ developers
|
||||
and consultants in 8 global locations develop customized Open Source
|
||||
solutions for global companies and corporations.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default connect(({ items, releases, pageName }) => ({ items, releases, pageName }))(App);
|
||||
16
js/components/Header.js
Normal file
16
js/components/Header.js
Normal file
@@ -0,0 +1,16 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function() {
|
||||
return (
|
||||
<div className="branding">
|
||||
<a className="branding__logo" href="/"><img src="/assets/logo.svg"/></a>
|
||||
<div className="branding__content">
|
||||
<div className="nav">
|
||||
<div className="nav__item"><a className="icon-link" href="/help.html"><span className="icon icon--question icon-link__icon"></span>How to Use Technology Radar?</a></div>
|
||||
<div className="nav__item"><a className="icon-link" href="/overview.html"><span className="icon icon--overview icon-link__icon"></span>Technologies Overview</a></div>
|
||||
<div className="nav__item"><a className="icon-link" href="#todo"><span className="icon icon--search icon-link__icon"></span>Search</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
9
js/components/HeadlineGroup.js
Normal file
9
js/components/HeadlineGroup.js
Normal file
@@ -0,0 +1,9 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function({ children }) {
|
||||
return (
|
||||
<div className="headline-group">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
10
js/components/HeroHeadline.js
Normal file
10
js/components/HeroHeadline.js
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function({ children, alt }) {
|
||||
return (
|
||||
<div className="hero-headline">
|
||||
{children}
|
||||
<span className="hero-headline__alt"> {alt}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
10
js/components/PageHelp.js
Normal file
10
js/components/PageHelp.js
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
import HeroHeadline from './HeroHeadline';
|
||||
|
||||
export default function PageHelp() {
|
||||
return (
|
||||
<div>
|
||||
<HeroHeadline>How to use AOE Technology Radar</HeroHeadline>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
112
js/components/PageIndex.js
Normal file
112
js/components/PageIndex.js
Normal file
@@ -0,0 +1,112 @@
|
||||
import React from 'react';
|
||||
import HeroHeadline from './HeroHeadline';
|
||||
|
||||
export default function PageIndex() {
|
||||
return (
|
||||
<div>
|
||||
<div className="headline-group">
|
||||
<HeroHeadline alt="Mar 2017">AOE Technology Radar</HeroHeadline>
|
||||
</div>
|
||||
<div className="quadrant-grid">
|
||||
<div className="quadrant-grid__quadrant">
|
||||
<div className="quadrant-section">
|
||||
<div className="quadrant-section__header">
|
||||
<div className="split">
|
||||
<div className="split__left">
|
||||
<h4 className="headline">Platforms and AOE Services</h4>
|
||||
</div>
|
||||
<div className="split__right"><a className="icon-link" href="/platforms-and-aoe-services.html"><span className="icon icon--pie icon-link__icon"></span>Quadrant Overview</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="quadrant-section__rings">
|
||||
<div className="quadrant-section__ring">
|
||||
<div className="ring-list">
|
||||
<div className="ring-list__header"><span className="badge badge--assess">assess</span></div>
|
||||
<span className="ring-list__item"><a className="link" href="/platforms-and-aoe-services/bar.html">Bar</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="quadrant-grid__quadrant">
|
||||
<div className="quadrant-section">
|
||||
<div className="quadrant-section__header">
|
||||
<div className="split">
|
||||
<div className="split__left">
|
||||
<h4 className="headline">Methods & Patterns</h4>
|
||||
</div>
|
||||
<div className="split__right"><a className="icon-link" href="/methods-and-patterns.html"><span className="icon icon--pie icon-link__icon"></span>Quadrant Overview</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="quadrant-section__rings">
|
||||
<div className="quadrant-section__ring">
|
||||
<div className="ring-list">
|
||||
<div className="ring-list__header"><span className="badge badge--trial">trial</span></div>
|
||||
<span className="ring-list__item"><a className="link" href="/methods-and-patterns/foo.html">Foo</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="quadrant-grid__quadrant">
|
||||
<div className="quadrant-section">
|
||||
<div className="quadrant-section__header">
|
||||
<div className="split">
|
||||
<div className="split__left">
|
||||
<h4 className="headline">Tools</h4>
|
||||
</div>
|
||||
<div className="split__right"><a className="icon-link" href="/tools.html"><span className="icon icon--pie icon-link__icon"></span>Quadrant Overview</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="quadrant-section__rings">
|
||||
<div className="quadrant-section__ring">
|
||||
<div className="ring-list">
|
||||
<div className="ring-list__header"><span className="badge badge--hold">hold</span></div>
|
||||
<span className="ring-list__item"><a className="link" href="/tools/grunt.html">Grunt 2</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="quadrant-grid__quadrant">
|
||||
<div className="quadrant-section">
|
||||
<div className="quadrant-section__header">
|
||||
<div className="split">
|
||||
<div className="split__left">
|
||||
<h4 className="headline">Languages & Frameworks</h4>
|
||||
</div>
|
||||
<div className="split__right"><a className="icon-link" href="/languages-and-frameworks.html"><span className="icon icon--pie icon-link__icon"></span>Quadrant Overview</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="quadrant-section__rings">
|
||||
<div className="quadrant-section__ring">
|
||||
<div className="ring-list">
|
||||
<div className="ring-list__header"><span className="badge badge--trial">trial</span></div>
|
||||
<span className="ring-list__item"><a className="link" href="/languages-and-frameworks/react.html">React</a></span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="quadrant-section__ring">
|
||||
<div className="ring-list">
|
||||
<div className="ring-list__header"><span className="badge badge--assess">assess</span></div>
|
||||
<span className="ring-list__item"><a className="link" href="/languages-and-frameworks/react123.html">This is a long title</a></span><span className="ring-list__item"><a className="link" href="/languages-and-frameworks/vue123.html">Vue 123</a></span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="quadrant-section__ring">
|
||||
<div className="ring-list">
|
||||
<div className="ring-list__header"><span className="badge badge--adopt">adopt</span></div>
|
||||
<span className="ring-list__item"><a className="link" href="/languages-and-frameworks/vue.html">Vue</a></span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="quadrant-section__ring">
|
||||
<div className="ring-list">
|
||||
<div className="ring-list__header"><span className="badge badge--hold">hold</span></div>
|
||||
<span className="ring-list__item"><a className="link" href="/languages-and-frameworks/vue1230.html">Something else</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
86
js/components/PageOverview.js
Normal file
86
js/components/PageOverview.js
Normal file
@@ -0,0 +1,86 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import HeadlineGroup from './HeadlineGroup';
|
||||
import HeroHeadline from './HeroHeadline';
|
||||
|
||||
const rings = ['all', 'assess', 'trial', 'hold', 'adopt'];
|
||||
|
||||
class PageOverview extends React.Component {
|
||||
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
this.state = {
|
||||
ring: rings[0],
|
||||
};
|
||||
}
|
||||
|
||||
handleRingClick = (ring) => (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
this.setState({
|
||||
...this.state,
|
||||
ring,
|
||||
});
|
||||
}
|
||||
|
||||
isRingActive(ringName) {
|
||||
return this.state.ring === ringName;
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<HeadlineGroup>
|
||||
<HeroHeadline>Technologies Overview</HeroHeadline>
|
||||
</HeadlineGroup>
|
||||
<div className="filter">
|
||||
<div className="nav">
|
||||
{
|
||||
rings.map(ringName => (
|
||||
<div className="nav__item" key={ringName}>
|
||||
<a
|
||||
className={classNames('badge badge--big', {
|
||||
'badge--empty': !this.isRingActive(ringName),
|
||||
[`badge--${ringName}`]: this.isRingActive(ringName),
|
||||
})}
|
||||
onClick={this.handleRingClick(ringName)}
|
||||
href="#"
|
||||
>
|
||||
{ringName}
|
||||
</a>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="letter-index">
|
||||
<div className="letter-index__group">
|
||||
<div className="letter-index__letter">B</div>
|
||||
<div className="letter-index__items">
|
||||
<div className="item-list">
|
||||
<div className="item-list__list">
|
||||
<a className="item item--big item--no-leading-border item--no-trailing-border" href="/platforms-and-aoe-services/bar.html">
|
||||
<div className="split split--overview">
|
||||
<div className="split__left">
|
||||
<div className="item__title">Bar</div>
|
||||
</div>
|
||||
<div className="split__right">
|
||||
<div className="nav">
|
||||
<div className="nav__item">Platforms and AOE Services</div>
|
||||
<div className="nav__item"><span className="badge badge--assess">assess</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PageOverview;
|
||||
24
js/components/Router.js
Normal file
24
js/components/Router.js
Normal file
@@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
import PageIndex from './PageIndex';
|
||||
import PageOverview from './PageOverview';
|
||||
import PageHelp from './PageHelp';
|
||||
|
||||
export default function Router({ pageName, ...props}) {
|
||||
let Comp;
|
||||
switch (pageName) {
|
||||
case 'index':
|
||||
Comp = PageIndex;
|
||||
break;
|
||||
case 'overview':
|
||||
Comp = PageOverview;
|
||||
break;
|
||||
case 'help':
|
||||
Comp = PageHelp;
|
||||
break;
|
||||
default:
|
||||
Comp = 'div';
|
||||
break;
|
||||
}
|
||||
|
||||
return <Comp {...props} />;
|
||||
}
|
||||
Reference in New Issue
Block a user