Resources component

src/develop/Develop.js

@@ -21,6 +21,7 @@ var MarqueeDoc = require('./components/MarqueeDoc');
 var WorldMapDoc = require('./components/WorldMapDoc');
 var AccordionDoc = require('./components/AccordionDoc');
 var CalloutDoc = require('./components/CalloutDoc');
+var ResourcesDoc = require('./components/ResourcesDoc');
 
 //hjjs configuration
 var hljs = require('highlight.js/lib/highlight');
@@ -51,6 +52,7 @@ var CONTENTS = [
       {route: 'develop_marquee', label: 'Marquee', component: MarqueeDoc},
       {route: 'develop_accordion', label: 'Accordion', component: AccordionDoc},
       {route: 'develop_callout', label: 'Callout', component: CalloutDoc},
+      {route: 'develop_resources', label: 'Resources', component: ResourcesDoc},
       {route: 'develop_world-map', label: 'WorldMap', component: WorldMapDoc}
     ]
   }

src/develop/components/ResourcesDoc.js

@@ -0,0 +1,79 @@
+// (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 = "<Resources ... />";
+
+var ResourcesDoc = React.createClass({
+
+  contextTypes: {
+    routePrefix: React.PropTypes.string.isRequired
+  },
+
+  _renderCode(name, jsx) {
+    return (
+      <div>
+        <h3>{name}</h3>
+        <div className="example">
+          {jsx}
+        </div>
+        <pre><code className="html hljs xml">
+          {jsxToString(jsx)}
+        </code></pre>
+      </div>
+    );
+  },
+
+  render: function() {
+    var simpleResources = (
+      <Resources
+        tiles={[
+          {
+            thumbnail: '/docs/img/resource-img-1.png',
+            title: 'Brochure',
+            description: 'Enable workplace productivity HPE Transformation Workshop'
+          },
+          {
+            thumbnail: '/docs/img/resource-img-2.png',
+            title: 'Solution Brief',
+            description: 'Digital Context Aware Solutions'
+          },
+          {
+            thumbnail: '/docs/img/resource-img-3.png',
+            title: 'Video -1:41',
+            description: 'Real Academia de Bellas Artes Ehances Experience with Mobile App'
+          }
+        ]}
+      />
+    );
+
+    return (
+      <DocsArticle title="Resources" colorIndex="neutral-3">
+
+        <p>The Resources module.</p>
+        <pre><code className="html hljs xml">{inline}</code></pre>
+
+        <section>
+          <h2>Resources Options</h2>
+          <dl>
+            <dt><code>tiles              {`[{thumbnail: , title: , description: }, ...]`}</code></dt>
+            <dd>An array of resource tiles.</dd>
+          </dl>
+        </section>
+
+        <section>
+          <h2>Examples</h2>
+
+          {this._renderCode('Default', simpleResources)}
+        </section>
+      </DocsArticle>
+    );
+  }
+});
+
+module.exports = ResourcesDoc;

src/examples/Examples.js

@@ -8,9 +8,10 @@ var PlayIcon = require('grommet/components/icons/base/Play');
 var Heading = require('grommet/components/Heading');
 var Paragraph = require('grommet/components/Paragraph');
 var Marquee = require('../modules/Marquee');
-var Callout = require('../modules/Callout');
 var Accordion = require('../modules/Accordion');
 var AccordionPanel = require('../modules/AccordionPanel');
+var Callout = require('../modules/Callout');
+var Resources = require('../modules/Resources');
 var Header = require('./Header');
 
 var Examples = React.createClass({
@@ -111,8 +112,27 @@ var Examples = React.createClass({
                 linkIcon={<PlayIcon />}
                 linkText="Watch Now"
               />
+              <Resources
+                tiles={[
+                  {
+                    thumbnail: '/docs/img/resource-img-1.png',
+                    title: 'Brochure',
+                    description: 'Enable workplace productivity HPE Transformation Workshop'
+                  },
+                  {
+                    thumbnail: '/docs/img/resource-img-2.png',
+                    title: 'Solution Brief',
+                    description: 'Digital Context Aware Solutions'
+                  },
+                  {
+                    thumbnail: '/docs/img/resource-img-3.png',
+                    title: 'Video -1:41',
+                    description: 'Real Academia de Bellas Artes Ehances Experience with Mobile App'
+                  }
+                ]}
+              />
             </AccordionPanel>
-            <AccordionPanel panelTitle="Software Licensings and Managment">
+            <AccordionPanel panelTitle="Software Licensings and Management">
               <Heading tag="h3" margin="none">
                 Manage control, compliance and cost through our value-added
                 Licensing, Advisory Services and Software Asset Management.

src/modules/Resources.js

@@ -0,0 +1,59 @@
+// (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 Tiles from 'grommet/components/Tiles';
+import Paragraph from 'grommet/components/Paragraph';
+import ResourcesTile from './ResourcesTile';
+
+const CLASS_ROOT = 'resources';
+
+export default class Resources extends Component {
+  render () {
+    const { header, subHeader, tiles } = this.props;
+
+    const classes = classnames(
+      CLASS_ROOT,
+      this.props.className
+    );
+
+    let subHeaderMarkup;
+    if (subHeader) {
+      subHeaderMarkup = (
+        <Paragraph className={`${CLASS_ROOT}__subheader`} size="large">
+          {subHeader}
+        </Paragraph>
+      );
+    }
+
+    const resourceTiles = tiles.map((tile, key) => {
+      return <ResourcesTile key={key} {...tile} />;
+    });
+
+    return (
+      <Box className={classes} pad={{vertical: 'medium'}}>
+        <Heading tag="h3">{header}</Heading>
+        {subHeaderMarkup}
+        <Tiles flush={false} pad="none">
+          {resourceTiles}
+        </Tiles>
+      </Box>
+    );
+  }
+};
+
+Resources.propTypes = {
+  header: PropTypes.string,
+  subHeader: PropTypes.string,
+  tiles: PropTypes.arrayOf(PropTypes.shape({
+    thumbnail: PropTypes.string,
+    title: PropTypes.string,
+    description: PropTypes.string
+  })).isRequired
+};
+
+Resources.defaultProps = {
+  header: 'Resources'
+};

src/modules/ResourcesTile.js

@@ -0,0 +1,45 @@
+// (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 {
+  render () {
+    const { thumbnail, title, description } = this.props;
+
+    const classes = classnames(
+      CLASS_ROOT,
+      this.props.className
+    );
+
+    const thumbnailStyles = {
+      backgroundImage: `url(${thumbnail})`
+    };
+
+    return (
+      <Tile className={classes} direction="row" responsive={false} align="start">
+        <Box
+          className={`${CLASS_ROOT}__thumbnail`}
+          style={thumbnailStyles}
+          flex={false}
+        />
+        <Box pad={{horizontal: 'medium', vertical: 'small'}}>
+          <Heading tag="h6" margin="none" uppercase={true}>{title}</Heading>
+          <Paragraph margin="none">{description}</Paragraph>
+        </Box>
+      </Tile>
+    );
+  }
+};
+
+ResourcesTile.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  thumbnail: PropTypes.string.isRequired
+};

src/scss/_objects.callout.scss

@@ -14,7 +14,9 @@
   }
 
   &__content {
-    max-width: $size-small;
+    @include media-query(lap-and-up) {
+      max-width: $size-small;
+    }
   }
 
   .heading--uppercase {

src/scss/_objects.modules.scss

@@ -2,6 +2,8 @@
 @import 'objects.accordion';
 @import 'objects.accordion-panel';
 @import 'objects.callout';
+@import 'objects.resources';
+@import 'objects.resources-tile';
 
 .grommet.app {
   position: relative;

src/scss/_objects.resources-tile.scss

@@ -0,0 +1,12 @@
+.resources-tile {
+  background-color: #fff;
+
+  &__thumbnail {
+    width: 100px;
+    height: 100px;
+  }
+
+  .heading--uppercase {
+    letter-spacing: normal;
+  }
+}

src/scss/_objects.resources.scss

@@ -0,0 +1,16 @@
+.resources {
+
+  &__subheader.paragraph {
+    margin-top: 0;
+  }
+
+  .tiles {
+    @include media-query(lap-and-up) {
+      margin: -12px;
+
+      > .tile {
+        flex-basis: 411px;
+      }
+    }
+  }
+}