adding more examples and updating the docs

docs-site/index.html

@@ -4,7 +4,7 @@
     <link rel="stylesheet" type="text/css" href="style.css">
     <title>React Add to Calendar Button crafted by Jason Salzman</title>
     <meta charset="UTF-8">
-    <meta name="description" content="A simple and reusable Add to Calendar component for React.">
+    <meta name="description" content="A simple, customizable, and reusable Add to Calendar button component for React.">
     <meta name="keywords" content="React, HTML, CSS, JavaScript, JSX, date, calendar, add to calendar, event">
   </head>
 

docs-site/src/example_components.jsx

@@ -1,52 +1,89 @@
 import React from 'react'
 import hljs from 'highlight.js'
 import Default from './examples/default'
+import ChangeLabel from './examples/changeLabel'
+import ChangeTemplate from './examples/changeTemplate'
+import TextOnlyTemplate from './examples/textOnlyTemplate'
+import TextOnlyDropdown from './examples/textOnlyDropdown'
+import ChangeDropdownOrder from './examples/changeDropdownOrder'
+import RemoveDropdownItem from './examples/removeDropdownItem'
+import ChangeDropdownLabels from './examples/changeDropdownLabels'
 import CodeExampleComponent from './code_example_component'
 
 import 'react-add-to-calendar/dist/react-add-to-calendar.css'
 import './style.scss'
 
 export default React.createClass({
-  displayName: 'exampleComponents',
+    displayName: 'exampleComponents',
 
-  componentDidMount () {
-    hljs.initHighlightingOnLoad()
-  },
+    componentDidMount () {
+        hljs.initHighlightingOnLoad()
+    },
 
-  examples: [
-    {
-      title: 'Default',
-      component: <Default />
+    examples: [
+        {
+          title: 'Default',
+          component: <Default />
+        },
+        {
+            title: 'Change Button Label',
+            component: <ChangeLabel />
+        },
+        {
+            title: 'Change Button Template',
+            component: <ChangeTemplate />
+        },
+        {
+            title: 'Text Only Button Template',
+            component: <TextOnlyTemplate />
+        },
+        {
+            title: 'Text Only Dropdown Items',
+            component: <TextOnlyDropdown />
+        },
+        {
+            title: 'Change Dropdown Order',
+            component: <ChangeDropdownOrder />
+        },
+        {
+            title: 'Remove Dropdown Item',
+            component: <RemoveDropdownItem />
+        },
+        {
+            title: 'Change Dropdown Labels',
+            component: <ChangeDropdownLabels />
+        }
+    ],
+
+    renderExamples () {
+        return this.examples.map((example, index) =>
+            <CodeExampleComponent key={`example-${index}`} id={index} title={example.title}>
+                {example.component}
+            </CodeExampleComponent>
+        )
+    },
+
+    renderLeftColumn () {
+        return this.examples.map((example, index) =>
+            <li className="examples__navigation-item" key={`link-${index}`}>
+                <a href={`#example-${index}`}>
+                    {example.title}
+                </a>
+            </li>
+        )
+    },
+
+    render () {
+        return (
+            <div>
+                <h1>Examples</h1>
+                <ul className="examples__navigation">
+                    {this.renderLeftColumn()}
+                </ul>
+                <div className="examples">
+                    {this.renderExamples()}
+                </div>
+            </div>
+        )
     }
-  ],
-
-  renderExamples () {
-    return this.examples.map((example, index) =>
-      <CodeExampleComponent key={`example-${index}`} id={index} title={example.title}>
-        {example.component}
-      </CodeExampleComponent>
-    )
-  },
-
-  renderLeftColumn () {
-    return this.examples.map((example, index) =>
-      <li className="examples__navigation-item" key={`link-${index}`}>
-        <a href={`#example-${index}`}>
-          {example.title}
-        </a>
-      </li>
-    )
-  },
-
-  render () {
-    return <div>
-      <h1>Examples</h1>
-      <ul className="examples__navigation">
-        {this.renderLeftColumn()}
-      </ul>
-      <div className="examples">
-        {this.renderExamples()}
-      </div>
-    </div>
-  }
 })

docs-site/src/examples/changeDropdownLabels.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import AddToCalendar from 'react-add-to-calendar'
+
+export default React.createClass({
+    displayName: 'Change Dropdown Labels',
+
+    render () {
+        let event = {
+            title: 'Sample Event',
+            description: 'This is the sample event provided as an example only',
+            location: 'Portland, OR',
+            startTime: '2016-09-16T20:15:00-04:00',
+            endTime: '2016-09-16T21:45:00-04:00'
+        };
+
+        let items = [
+            { outlook: 'Outlook' },
+            { apple: 'iCal' },
+            { yahoo: 'Yahoo!' },
+            { google: 'Google' }
+        ];
+
+        return (
+            <div className="row">
+                <pre className="column example__code">
+                    <code className="js">
+                        {"let items = ["}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"\{ outlook: 'Outlook' \}"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"\{ apple: 'iCal' \}"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"\{ yahoo: 'Yahoo!' \}"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"\{ google: 'Google' \}"}<br/>
+                        {"];"}<br/><br/>
+                    </code>
+                    <code className="jsx">
+                        {"<AddToCalendar"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"event={event}"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"listItems=\{items\} />"}
+                    </code>
+                </pre>
+                <div className="column">
+                    <AddToCalendar event={event} listItems={items} />
+                </div>
+            </div>
+        );
+    }
+})

docs-site/src/examples/changeDropdownOrder.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import AddToCalendar from 'react-add-to-calendar'
+
+export default React.createClass({
+    displayName: 'Change Dropdown Order',
+
+    render () {
+        let event = {
+            title: 'Sample Event',
+            description: 'This is the sample event provided as an example only',
+            location: 'Portland, OR',
+            startTime: '2016-09-16T20:15:00-04:00',
+            endTime: '2016-09-16T21:45:00-04:00'
+        };
+
+        let items = [
+            { outlook: 'Outlook' },
+            { apple: 'Apple Calendar' },
+            { yahoo: 'Yahoo' },
+            { google: 'Google' }
+        ];
+
+        return (
+            <div className="row">
+                <pre className="column example__code">
+                    <code className="js">
+                        {"let items = ["}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"\{ outlook: 'Outlook' \}"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"\{ apple: 'Apple Calendar' \}"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"\{ yahoo: 'Yahoo' \}"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"\{ google: 'Google' \}"}<br/>
+                        {"];"}<br/><br/>
+                    </code>
+                    <code className="jsx">
+                        {"<AddToCalendar"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"event={event}"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"listItems=\{items\} />"}
+                    </code>
+                </pre>
+                <div className="column">
+                    <AddToCalendar event={event} listItems={items} />
+                </div>
+            </div>
+        );
+    }
+})

docs-site/src/examples/changeLabel.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import AddToCalendar from 'react-add-to-calendar'
+
+export default React.createClass({
+    displayName: 'ChangeLabel',
+
+    render () {
+        let event = {
+            title: 'Sample Event',
+            description: 'This is the sample event provided as an example only',
+            location: 'Portland, OR',
+            startTime: '2016-09-16T20:15:00-04:00',
+            endTime: '2016-09-16T21:45:00-04:00'
+        };
+
+        return (
+            <div className="row">
+                <pre className="column example__code">
+                    <code className="jsx">
+                        {"<AddToCalendar"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"event={event}"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"buttonLabel=\"Put on my calendar\" />"}
+                    </code>
+                </pre>
+                <div className="column">
+                    <AddToCalendar event={event} buttonLabel="Put on my calendar" />
+                </div>
+            </div>
+        );
+    }
+})

docs-site/src/examples/changeTemplate.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import AddToCalendar from 'react-add-to-calendar'
+
+export default React.createClass({
+    displayName: 'ChangeTemplate',
+
+    render () {
+        let event = {
+            title: 'Sample Event',
+            description: 'This is the sample event provided as an example only',
+            location: 'Portland, OR',
+            startTime: '2016-09-16T20:15:00-04:00',
+            endTime: '2016-09-16T21:45:00-04:00'
+        };
+
+        let icon = { 'calendar-plus-o': 'left' };
+
+        return (
+            <div className="row">
+                <pre className="column example__code">
+                    <code className="js">
+                        {"let icon = \{ 'calendar-plus-o': 'left' \};"}<br/><br/>
+                        {"/*"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"object property can be any Font Awesome icon"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"and value can be 'left' or 'right'"}<br/>
+                        {"*/"}<br/><br/>
+                    </code>
+                    <code className="jsx">
+                        {"<AddToCalendar"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"event={event}"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"buttonTemplate=\{icon\} />"}
+                    </code>
+                </pre>
+                <div className="column">
+                    <AddToCalendar event={event} buttonTemplate={icon} />
+                </div>
+            </div>
+        );
+    }
+})

docs-site/src/examples/default.jsx

@@ -2,18 +2,48 @@ import React from 'react'
 import AddToCalendar from 'react-add-to-calendar'
 
 export default React.createClass({
-  displayName: 'Default',
+    displayName: 'Default',
 
-  render () {
-    return <div className="row">
-      <pre className="column example__code">
-        <code className="jsx">
-          {"<AddToCalendar/>"}
-        </code>
-      </pre>
-      <div className="column">
-        <AddToCalendar/>
-      </div>
-    </div>
-  }
+    render () {
+        let event = {
+            title: 'Sample Event',
+            description: 'This is the sample event provided as an example only',
+            location: 'Portland, OR',
+            startTime: '2016-09-16T20:15:00-04:00',
+            endTime: '2016-09-16T21:45:00-04:00'
+        };
+
+        return (
+            <div className="row">
+                <pre className="column example__code">
+                    <code className="js">
+                        {"let event = \{"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"  title: 'Sample Event',"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"  description: 'This is the sample event provided as an example only',"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"  location: 'Portland, OR',"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"  startTime: '2016-09-16T20:15:00-04:00',"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"  endTime: '2016-09-16T21:45:00-04:00'"}<br/>
+                        {"\};"}<br/><br/>
+                        {"/*"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"startTime and endTime can use any datetime"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"string that is acceptable by MomentJS"}<br/>
+                        {"*/"}
+                    </code>
+                    <code className="jsx">
+                        {"<AddToCalendar event={event} />"}
+                    </code>
+                </pre>
+                <div className="column">
+                    <AddToCalendar event={event} />
+                </div>
+            </div>
+        );
+    }
 })

docs-site/src/examples/removeDropdownItem.jsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import AddToCalendar from 'react-add-to-calendar'
+
+export default React.createClass({
+    displayName: 'Remove Dropdown Item',
+
+    render () {
+        let event = {
+            title: 'Sample Event',
+            description: 'This is the sample event provided as an example only',
+            location: 'Portland, OR',
+            startTime: '2016-09-16T20:15:00-04:00',
+            endTime: '2016-09-16T21:45:00-04:00'
+        };
+
+        let items = [
+            { outlook: 'Outlook' },
+            { google: 'Google' }
+        ];
+
+        return (
+            <div className="row">
+                <pre className="column example__code">
+                    <code className="js">
+                        {"let items = ["}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"\{ outlook: 'Outlook' \}"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"\{ google: 'Google' \}"}<br/>
+                        {"];"}<br/><br/>
+                    </code>
+                    <code className="jsx">
+                        {"<AddToCalendar"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"event={event}"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"listItems=\{items\} />"}
+                    </code>
+                </pre>
+                <div className="column">
+                    <AddToCalendar event={event} listItems={items} />
+                </div>
+            </div>
+        );
+    }
+})

docs-site/src/examples/textOnlyDropdown.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import AddToCalendar from 'react-add-to-calendar'
+
+export default React.createClass({
+    displayName: 'TextOnlyDropdown',
+
+    render () {
+        let event = {
+            title: 'Sample Event',
+            description: 'This is the sample event provided as an example only',
+            location: 'Portland, OR',
+            startTime: '2016-09-16T20:15:00-04:00',
+            endTime: '2016-09-16T21:45:00-04:00'
+        };
+
+        return (
+            <div className="row">
+                <pre className="column example__code">
+                    <code className="jsx">
+                        {"<AddToCalendar"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"event={event}"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"displayItemIcons=\{false\} />"}
+                    </code>
+                </pre>
+                <div className="column">
+                    <AddToCalendar event={event} displayItemIcons={false} />
+                </div>
+            </div>
+        );
+    }
+})

docs-site/src/examples/textOnlyTemplate.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import AddToCalendar from 'react-add-to-calendar'
+
+export default React.createClass({
+    displayName: 'TextOnlyTemplate',
+
+    render () {
+        let event = {
+            title: 'Sample Event',
+            description: 'This is the sample event provided as an example only',
+            location: 'Portland, OR',
+            startTime: '2016-09-16T20:15:00-04:00',
+            endTime: '2016-09-16T21:45:00-04:00'
+        };
+
+        let icon = { textOnly: 'none' };
+
+        return (
+            <div className="row">
+                <pre className="column example__code">
+                    <code className="js">
+                        {"let icon = \{ textOnly: 'none' \};"}<br/><br/>
+                    </code>
+                    <code className="jsx">
+                        {"<AddToCalendar"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"event={event}"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"buttonTemplate=\{icon\} />"}
+                    </code>
+                </pre>
+                <div className="column">
+                    <AddToCalendar event={event} buttonTemplate={icon} />
+                </div>
+            </div>
+        );
+    }
+})

docs-site/src/root.jsx

@@ -25,24 +25,21 @@ export default React.createClass({
         </div>
         <div className="wrapper">
           <h1>React Add to Calendar Button</h1>
-          { /* <p>
-            <a href="https://npmjs.org/package/react-datepicker">
-              <img src="https://badge.fury.io/js/react-datepicker.svg" className="badge" />
+          <p>
+            <a href="https://npmjs.org/package/react-add-to-calendar">
+              <img src="https://badge.fury.io/js/react-add-to-calendar.svg" className="badge" />
+            </a>&nbsp;&nbsp;
+            <a href="https://travis-ci.org/jasonsalzman/react-add-to-calendar">
+              <img src="https://travis-ci.org/jasonsalzman/react-add-to-calendar.svg?branch=master" className="badge" />
+            </a>&nbsp;&nbsp;
+            <a href="https://david-dm.org/jasonsalzman/react-add-to-calendar">
+              <img src="https://img.shields.io/david/peer/webcomponents/generator-element.svg?maxAge=2592000" className="badge" />
+            </a>&nbsp;&nbsp;
+            <a href={'https://npmjs.org/package/react-add-to-calendar'}>
+              <img src="https://img.shields.io/npm/dm/react-add-to-calendar.svg" className="badge" />
             </a>
-            <a href="https://travis-ci.org/Hacker0x01/react-datepicker">
-              <img src="https://travis-ci.org/Hacker0x01/react-datepicker.svg?branch=master" className="badge" />
-            </a>
-            <a href="https://david-dm.org/Hacker0x01/react-datepicker">
-              <img src="https://david-dm.org/Hacker0x01/react-datepicker.svg" className="badge" />
-            </a>
-            <a href={'https://npmjs.org/package/react-datepicker' +
-              '?__hstc=72727564.ca821b01b5b29b1831f0936a681f0483.1428679773810.1435582678273.1438354735499.5' +
-              '&__hssc=72727564.1.1438354735499' +
-              '&__hsfp=2497064007'}>
-              <img src="https://img.shields.io/npm/dm/react-datepicker.svg" className="badge" />
-            </a>
-          </p> */}
-          <p>A simple and reusable Add to Calendar component for React.</p>
+          </p>
+          <p>A simple, customizable, and reusable Add to Calendar button component for React.</p>
 
           <h2>Installation</h2>
           <p>The package can be installed via NPM:</p>