From 377e812abf2f5058a3550a2e7ce3bcd9ac63b81a Mon Sep 17 00:00:00 2001
From: Derrick Pelletier <derrick.pelletier@eventbase.com>
Date: Tue, 17 Oct 2017 00:31:16 -0700
Subject: [PATCH] less ridiculous example for button type in cra

---
 .../cra-kitchen-sink/src/stories/index.js     | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/examples/cra-kitchen-sink/src/stories/index.js b/examples/cra-kitchen-sink/src/stories/index.js
index 9272cfa3a62..b067b63ffa1 100644
--- a/examples/cra-kitchen-sink/src/stories/index.js
+++ b/examples/cra-kitchen-sink/src/stories/index.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import EventEmiter from 'eventemitter3';
 
 import { storiesOf } from '@storybook/react';
@@ -60,6 +61,23 @@ const InfoButton = () => (
   </span>
 );
 
+class AsyncItemLoader extends React.Component {
+  constructor() {
+    super();
+    this.state = { items: [] };
+  }
+
+  loadItems() {
+    setTimeout(() => this.setState({ items: ['pencil', 'pen', 'eraser'] }), 1500);
+  }
+
+  render() {
+    button('Load the items', () => this.loadItems());
+    return this.props.children(this.state.items);
+  }
+}
+AsyncItemLoader.propTypes = { children: PropTypes.func.isRequired };
+
 storiesOf('Button', module)
   .addDecorator(withKnobs)
   .add('with text', () => (
@@ -111,8 +129,6 @@ storiesOf('Button', module)
     const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
     const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' };
 
-    button('Arbitrary action', action('You clicked it!'));
-
     return (
       <div style={style}>
         <p>{intro}</p>
@@ -121,6 +137,14 @@ storiesOf('Button', module)
         <p>In my backpack, I have:</p>
         <ul>{items.map(item => <li key={item}>{item}</li>)}</ul>
         <p>{salutation}</p>
+        <hr />
+        <p>PS. My shirt pocket contains: </p>
+        <AsyncItemLoader>
+          {loadedItems => {
+            if (!loadedItems.length) return <li>No items!</li>;
+            return <ul>{loadedItems.map(i => <li key={i}>{i}</li>)}</ul>;
+          }}
+        </AsyncItemLoader>
       </div>
     );
   })