diff --git a/src/develop/Develop.js b/src/develop/Develop.js
index 487a59a..ebdcc25 100644
--- a/src/develop/Develop.js
+++ b/src/develop/Develop.js
@@ -19,6 +19,7 @@ var DashboardDoc = require('./patterns/DashboardDoc');
var NavigationDoc = require('./patterns/NavigationDoc');
var MarqueeDoc = require('./components/MarqueeDoc');
var WorldMapDoc = require('./components/WorldMapDoc');
+var ResourcesDoc = require('./components/ResourcesDoc');
var ContentCardDoc = require('./components/ContentCardDoc');
var StackDoc = require('./components/StackDoc');
@@ -49,6 +50,7 @@ var CONTENTS = [
contents: [
{route: 'develop_box', label: 'Box', component: BoxDoc},
{route: 'develop_marquee', label: 'Marquee', component: MarqueeDoc},
+ {route: 'develop_resources', label: 'Resources', component: ResourcesDoc},
{route: 'develop_content-card', label: 'ContentCard', component: ContentCardDoc},
{route: 'develop_stack', label: 'Stack', component: StackDoc},
{route: 'develop_world-map', label: 'WorldMap', component: WorldMapDoc}
diff --git a/src/develop/components/ResourcesDoc.js b/src/develop/components/ResourcesDoc.js
new file mode 100644
index 0000000..4c04c86
--- /dev/null
+++ b/src/develop/components/ResourcesDoc.js
@@ -0,0 +1,95 @@
+// (C) Copyright 2014-2015 Hewlett Packard Enterprise Development LP
+
+var React = require('react');
+var jsxToString = require('jsx-to-string');
+var DocsArticle = require('../../DocsArticle');
+var Resources = require('../../modules/Resources');
+
+Resources.displayName = 'Resources';
+
+var inline = "";
+
+var ResourcesDoc = React.createClass({
+
+ contextTypes: {
+ routePrefix: React.PropTypes.string.isRequired
+ },
+
+ _renderCode(name, jsx) {
+ return (
+
+
{name}
+
+ {jsx}
+
+
+ {jsxToString(jsx)}
+
+
The Resources module.
+ {inline}
+
+
+ Resources Options
+
+ tiles {`[{thumbnail: , title: , description: , link: }, ...]`}- An array of resource tiles. Required.
+
+
+
+
+ ResourcesTile Options
+
+ thumbnail {'{string}'}- Url path to image. Required.
+ title {'{string}'}- Resource title. Required.
+ description {'{string}'}- Resource description. Required.
+ link {'{string}'}- URL where the link should go.
+
+
+
+
+ Examples
+
+ {this._renderCode('Default', simpleResources)}
+
+
+ );
+ }
+});
+
+module.exports = ResourcesDoc;
diff --git a/src/examples/Examples.js b/src/examples/Examples.js
index 0bbfe01..252f05b 100644
--- a/src/examples/Examples.js
+++ b/src/examples/Examples.js
@@ -16,6 +16,7 @@ var SocialFacebookIcon = require('grommet/components/icons/base/SocialFacebook')
var Marquee = require('../modules/Marquee');
var ContentCard = require('../modules/ContentCard');
var MarqueeParallax = require('../modules/MarqueeParallax');
+var Resources = require('../modules/Resources');
var Header = require('./Header');
var Examples = React.createClass({
@@ -243,6 +244,27 @@ var Examples = React.createClass({
type: 'mp4'
}}
/>
+ console.log('Hello')
+ },
+ {
+ thumbnail: '/docs/img/resource-img-3.png',
+ title: 'Video -1:41',
+ description: 'Real Academia de Bellas Artes Ehances Experience with Mobile App'
+ }
+ ]}
+ />
+ {subHeader}
+
+ );
+ }
+
+ const resourceTiles = tiles.map((tile, key) => {
+ return ;
+ });
+
+ return (
+
+
+ {header}
+ {subHeaderMarkup}
+
+
+ {resourceTiles}
+
+
+ );
+ }
+};
+
+Resources.propTypes = {
+ header: PropTypes.string,
+ subHeader: PropTypes.string,
+ tiles: PropTypes.arrayOf(PropTypes.shape({
+ thumbnail: PropTypes.string.isRequired,
+ title: PropTypes.string.isRequired,
+ description: PropTypes.string.isRequired,
+ link: PropTypes.string
+ })).isRequired
+};
+
+Resources.defaultProps = {
+ header: 'Resources'
+};
diff --git a/src/modules/ResourcesTile.js b/src/modules/ResourcesTile.js
new file mode 100644
index 0000000..939608c
--- /dev/null
+++ b/src/modules/ResourcesTile.js
@@ -0,0 +1,65 @@
+// (C) Copyright 2014-2015 Hewlett Packard Enterprise Development LP
+
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import Box from 'grommet/components/Box';
+import Heading from 'grommet/components/Heading';
+import Tile from 'grommet/components/Tile';
+import Paragraph from 'grommet/components/Paragraph';
+
+const CLASS_ROOT = 'resources-tile';
+
+export default class ResourcesTile extends Component {
+ constructor (props) {
+ super(props);
+ this._handleClick = this._handleClick.bind(this);
+ }
+
+ _handleClick () {
+ window.location.href = this.props.link;
+ }
+
+ render () {
+ const {
+ className,
+ thumbnail,
+ title,
+ description,
+ link,
+ ...props
+ } = this.props;
+
+ const classes = classnames(
+ CLASS_ROOT,
+ className
+ );
+
+ return (
+
+
+
+ {title}
+ {description}
+
+
+ );
+ }
+};
+
+ResourcesTile.propTypes = {
+ title: PropTypes.string.isRequired,
+ description: PropTypes.string.isRequired,
+ thumbnail: PropTypes.string.isRequired,
+ link: PropTypes.string
+};
diff --git a/src/scss/_objects.modules.scss b/src/scss/_objects.modules.scss
index 2426b4e..78925ea 100644
--- a/src/scss/_objects.modules.scss
+++ b/src/scss/_objects.modules.scss
@@ -1,5 +1,7 @@
@import 'objects.marquee';
@import 'objects.marquee-parallax';
+@import 'objects.resources';
+@import 'objects.resources-tile';
@import 'objects.content-card';
@import 'objects.stack';
diff --git a/src/scss/_objects.resources-tile.scss b/src/scss/_objects.resources-tile.scss
new file mode 100644
index 0000000..06c9738
--- /dev/null
+++ b/src/scss/_objects.resources-tile.scss
@@ -0,0 +1,13 @@
+.resources-tile {
+ background-color: $background-color;
+
+ &__thumbnail {
+ width: $graphic-small-size;
+ height: $graphic-small-size;
+ }
+
+ .grommetux-heading--uppercase {
+ letter-spacing: normal;
+ }
+}
+
diff --git a/src/scss/_objects.resources.scss b/src/scss/_objects.resources.scss
new file mode 100644
index 0000000..688c83b
--- /dev/null
+++ b/src/scss/_objects.resources.scss
@@ -0,0 +1,13 @@
+.resources {
+
+ .grommetux-tiles {
+ @include media-query(lap-and-up) {
+ margin: halve(-$inuit-base-spacing-unit);
+
+ > .grommetux-tile {
+ flex-basis: $inuit-base-spacing-unit * 17;
+ }
+ }
+ }
+}
+