Merge branch 'source' into 56-homepage-logos

# Conflicts:
#	stories/implementations.js

components/Grid/Examples/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Grid from '../Grid';
+import './style.css';
+
+export default ({ items }) => (
+ <div className="examples">
+ <div className="heading">
+ <h1>Storybook Examples</h1>
+ <a
+ className="edit-link"
+ href="https://github.com/storybooks/storybooks.github.io/tree/source/pages/examples/_examples.yml"
+ target="_blank"
+ >
+ Edit this list
+ </a>
+ </div>
+ <Grid columnWidth={350} items={items} />
+ </div>
+);

components/Grid/Examples/style.css

@@ -0,0 +1,10 @@
+.examples .heading {
+ margin: 40px 80px 0 80px;
+}
+
+.examples a.edit-link {
+ color: #E25E5E !important;
+ font-size: 11px;
+ text-transform: uppercase;
+ font-weight: bold;
+}

components/Grid/Grid/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import StackGrid from 'react-stack-grid';
+import GridItem from '../GridItem';
+
+export default ({ items, columnWidth }) => (
+ <StackGrid columnWidth={columnWidth}>
+ {items.map((item, idx) => <GridItem key={idx} {...item} />)}
+ </StackGrid>
+);

components/Grid/GridItem/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import './style.css';
+
+const linkProps = {
+ rel: 'nofollow',
+ target: '_blank',
+ className: 'link',
+};
+
+export default ({ title, description, source, demo, site, thumbnail }) => (
+ <div className="grid-item">
+ <div className="photobox" style={{ backgroundImage: `url(${thumbnail})` }}>
+ <div className="overlay" />
+ </div>
+ <div className="text">
+ <h2>{title}</h2>
+ <p className="desc">{description}</p>
+ <div className="button-row">
+ {demo ? <a href={demo} {...linkProps}>Demo</a> : null}
+ {source ? <a href={source} {...linkProps}>Source</a> : null}
+ </div>
+ </div>
+ </div>
+);

components/Grid/GridItem/style.css

@@ -0,0 +1,69 @@
+div {
+ box-sizing: border-box;
+}
+
+.grid-item {
+ margin: 30px;
+ background: white;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+ font-weight: 300;
+}
+
+.grid-item .photobox {
+ position: relative;
+ width: 100%;
+ height: 200px;
+ background-color: #ddd;
+ border-radius: 0;
+ background-size: cover;
+}
+
+.grid-item .overlay {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ background-color: rgba(0, 0, 0, 0.03);
+}
+
+.grid-item .button-row {
+ position: absolute;
+ width: 100%;
+ right: 0px;
+ bottom: 0px;
+ text-align: right;
+}
+
+.grid-item .link {
+ display: inline-block;
+ cursor: pointer;
+ padding: 5px 15px;
+ margin: 0 10px 10px 0px;
+ background-color: rgba(0, 0, 0, 0.4);
+ border-radius: 20px;
+ color: white;
+ transition: all 0.3s linear;
+ font-size: 12px;
+}
+.grid-item .link:hover {
+ background-color: rgba(0, 0, 0, 0.7);
+}
+
+.grid-item .text {
+ position: relative;
+ height: 150px;
+ padding: 20px 15px 10px 20px;
+}
+
+.grid-item h2 {
+ margin: 0 0 10px 0;
+ font-size: 21px;
+ font-weight: 600;
+}
+
+.grid-item .desc {
+ color: #aaa;
+ font-size: 12px;
+ line-height: 1.4;
+}

components/Header/index.js

@@ -8,6 +8,7 @@ import storybookLogo from '../../design/homepage/storybook-logo.png';
 const sections = [
  { id: 'home', caption: 'Home', href: '/' },
  { id: 'docs', caption: 'Docs', href: '/docs/react-storybook/basics/introduction/' },
+ { id: 'examples', caption: 'Examples', href: '/examples/' },
 ];
 
 class Header extends React.Component {

components/Homepage/UsedBy/index.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { Link } from 'react-router';
 import './style.css';
 
 const UsedByBg = ({ color }) => (
@@ -44,7 +45,9 @@ const UsedBy = ({ users }) => (
  </div>
  </div>
  </div>
- <a className="used-by-more-examples" href="#">See more examples…</a>
+ <Link to="/examples/" className="used-by-more-examples">
+ See more examples…
+ </Link>
  </div>
 );
 

components/Homepage/UsedBy/style.css

@@ -1,67 +1,67 @@
-.used-by-wrapper{
+.used-by-wrapper {
  margin-bottom: 60px;
 }
 
-.used-by{
+.used-by {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
 }
 
-.used-by-bg{
+.used-by-bg {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
 }
 
-.used-by-bg svg{
+.used-by-bg svg {
  height: 100%;
  width: 100%;
 }
 
-.used-by-contents{
+.used-by-contents {
  padding: 40px 20px;
  position: relative;
  z-index: 1;
 }
 
-.used-by-title{
+.used-by-title {
  text-align: center;
  margin: 0 0 30px 0;
  opacity: 0.5;
  color: #468c07;
 }
 
 
-.used-by-users{
+.used-by-users {
  display: flex;
  align-items: center;
  justify-content: space-around;
 }
 
-.used-by-user{
+.used-by-user {
  /*flex: 1;*/
  margin-right: 30px;
  max-width: 100px;
  filter: grayscale(100%);
  opacity: 0.8;
 }
-.used-by-user:last-child{
+.used-by-user:last-child {
  margin-right: 0;
 }
-.used-by-user:hover{
+.used-by-user:hover {
  filter: none;
  opacity: 1;
 }
-.used-by-user-image{
+.used-by-user-image {
  display: block;
  width: 100%;
 }
 
-.used-by-more-examples{
+.used-by-more-examples {
  text-align: center;
  display: block;
  margin-top: 10px;
-}
+}

package.json

@@ -14,6 +14,7 @@
  "react-helmet": "^5.0.3",
  "react-motion": "^0.1.0",
  "react-responsive-grid": "^0.3.3",
+ "react-stack-grid": "^0.2.1",
  "react-typography": "^0.15.0",
  "sitemap": "^1.12.0",
  "typography": "^0.15.8",

pages/examples/_examples.yml

@@ -0,0 +1,84 @@
+airbnb:
+ thumbnail: ./thumbnails/airbnb.jpg
+ title: Airbnb Dates
+ description: An internationalizable, mobile-friendly datepicker library for the web.
+ source: https://github.com/airbnb/react-dates
+ demo: http://airbnb.io/react-dates/
+ site: http://airbnb.com
+buffer:
+ thumbnail: ./thumbnails/buffer.jpg
+ title: Buffer Components
+ description: A collection of Buffer UI React components.
+ source: https://github.com/bufferapp/buffer-components
+ demo: https://bufferapp.github.io/buffer-components/
+ site: https://buffer.com
+lonelyplanet:
+ thumbnail: ./thumbnails/lonelyplanet.jpg
+ title: Lonely Planet
+ description: All the tools you need to build the Lonely Planet UI experience.
+ source: https://github.com/lonelyplanet/backpack-ui
+ demo: https://lonelyplanet.github.io/backpack-ui/
+ site: https://www.lonelyplanet.com/
+algolia:
+ thumbnail: ./thumbnails/algolia.jpg
+ title: Algolia Instantsearch
+ description: Lightning-fast, hyper-configurable search.
+ source: https://github.com/algolia/react-instantsearch/
+ demo: https://community.algolia.com/react-instantsearch/storybook/
+necolas:
+ thumbnail: ./thumbnails/reactnativeweb.jpg
+ title: React Native Web
+ description: Storybook demo for React Native Web.
+ source: https://github.com/necolas/react-native-web
+ demo: https://necolas.github.io/react-native-web/storybook/
+griddle:
+ thumbnail: ./thumbnails/griddle.jpg
+ title: Griddle
+ description: An ultra customizable datagrid component for React.
+ source: https://github.com/GriddleGriddle/Griddle
+ demo: https://griddlegriddle.github.io/Griddle/examples/controlling-griddle/
+ site: https://griddlegriddle.github.io/Griddle/
+appbase:
+ thumbnail: ./thumbnails/appbase.jpg
+ title: Appbase Maps
+ description: A storybook playground for ReactiveMaps and ReactiveSearch.
+ source: https://github.com/appbaseio/playground
+ demo: https://opensource.appbase.io/playground/
+ site: https://appbase.io
+quran:
+ thumbnail: ./thumbnails/quran.jpg
+ title: Quran.com
+ description: Component library for Quran.com, Quranicaudio.com and Salah.com.
+ source: https://github.com/quran/common-components
+ demo: https://quran.github.io/common-components/
+ site: https://quran.com/
+terraeclipse:
+ thumbnail: ./thumbnails/terraeclipse.jpg
+ title: TerraEclipse
+ description: React components for TerraEclipse, a political technology and strategy firm.
+ source: https://github.com/TerraEclipse/react-stack
+ demo: https://terraeclipse.github.io/react-stack/
+timeline:
+ thumbnail: ./thumbnails/timeline.jpg
+ title: React Event Timeline
+ description: Event timeline component.
+ source: https://github.com/rcdexta/react-event-timeline
+ demo: https://rcdexta.github.io/react-event-timeline/
+semanticui:
+ thumbnail: ./thumbnails/semanticui.png
+ title: Semantic-UI
+ description: Storybook for Semantic-UI React components
+ source: https://github.com/white-rabbit-japan/Semantic-UI-React-Storybook
+ demo: https://white-rabbit-japan.github.io/Semantic-UI-React-Storybook/
+hackoregon:
+ thumbnail: ./thumbnails/hackoregon.png
+ title: Hack Oregon
+ description: Official component library and storybook for Hack Oregon.
+ source: https://github.com/hackoregon/component-library
+ demo: https://hackoregon.github.io/component-library/
+todomvc:
+ thumbnail: ./thumbnails/todomvc.png
+ title: TodoMVC with Specs
+ description: Todo app Storybook with built-in unit tests.
+ source: https://github.com/thorjarhun/react-storybook-todolist
+ demo: https://thorjarhun.github.io/react-storybook-todolist/

pages/examples/index.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import Examples from 'components/Grid/Examples';
+import { values } from 'lodash';
+
+import data from './_examples.yml';
+
+export default () => <Examples items={values(data)} />;

stories/_examples.yml

@@ -0,0 +1,30 @@
+airbnb:
+ thumbnail: https://a0.muscache.com/im/pictures/90bce1b0-24ab-4e07-8499-3c4f4b0f2000.jpg?aki_policy=xl_poster
+ title: Airbnb Dates
+ description: An internationalizable, mobile-friendly datepicker library for the web.
+ source: https://github.com/airbnb/react-dates
+ demo: http://airbnb.io/react-dates/
+ site: http://airbnb.com
+appbase:
+ title: Appbase
+ description: A storybook playground for ReactiveMaps and ReactiveSearch.
+ source: https://github.com/appbaseio/playground
+ demo: https://opensource.appbase.io/playground/
+ site: https://appbase.io
+buffer:
+ title: Buffer
+ description: A collection of Buffer UI React components.
+ source: https://github.com/bufferapp/buffer-components
+ demo: https://bufferapp.github.io/buffer-components/
+ site: https://buffer.com
+lonelyplanet:
+ title: Lonely Planet
+ description: All the tools you need to build the Lonely Planet UI experience.
+ source: https://github.com/lonelyplanet/backpack-ui
+ site: https://www.lonelyplanet.com/
+griddle:
+ title: Griddle
+ description: An ultra customizable datagrid component for React.
+ source: https://github.com/GriddleGriddle/Griddle
+ demo: https://griddlegriddle.github.io/Griddle/examples/controlling-griddle/
+ site: https://griddlegriddle.github.io/Griddle/

stories/data.js

@@ -1,4 +1,4 @@
-import marked from 'marked'
+import marked from 'marked';
 
 export const docsData = {
  categories: [