initialise

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react","es2015"]
+}

.gitignore

@@ -0,0 +1,4 @@
+dist/Accordion.js
+node_modules
+.DS_Store
+npm-debug.log

.npmignore

@@ -0,0 +1 @@
+example/

LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Glenn Flanagan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,80 @@
+# React Responsive Accordion Component
+
+React component to wrap content in Accordion element.
+
+![Alt text](example/img/example.gif)
+
+This component is dependent on [React Collapsible](https://github.com/glennflanagan/react-collapsible)
+
+
+## Installation
+Installation can be achieved via NPM.
+```
+npm install react-responsive-accordion
+```
+
+Alternatively just download the `Accordion.js` file form the `src` folder and include it in your project in your chosen way.
+
+## Usage
+Collapsible can receive any HTML elements or React component as it's children. Collapsible will wrap the contents, as well as generate a trigger element which will control showing and hiding.
+
+### ES6
+```javascript
+
+
+```
+
+With a little CSS becomes
+
+![Alt text](example/img/becomes.png)
+
+
+## Properties *(Options)*
+
+### `triggerText` | *string* | **required**
+The text to appear in the trigger link.
+
+### `triggerTextWhenOpen` | *string*
+Optional trigger text to change to when the Collapsible is open.
+
+### `transitionTime` | *number* | default: 400
+The number of milliseconds for the open/close transition to take.
+
+### `easing` | *string* | default: 'liner'
+The CSS easing method you wish to apply to the open/close transition. This string can be any valid value of CSS `transition-timing-function`. For reference view the [MDN documentation](https://developer.mozilla.org/en/docs/Web/CSS/transition-timing-function).
+
+### `open` | *bool* | default: false
+Set to true if you want the Collapsible to begin in the open state. You can also use this prop to manage the state from a parent component.
+
+### `classParentString` | *string* | default: Collapsible
+Use this to overwrite the parent CSS class for the Collapsible component parts. Read more in the CSS section below.
+
+## CSS Styles
+In theory you don't need any CSS to get this to work, but let's face it, it'd be pretty rubbish without it.
+
+By default the parent CSS class name is `.Collapsible` but this can be changed by setting the `classParentString` property on the component.
+
+The CSS class names follow a [type of BEM pattern](http://getbem.com/introduction/) of CSS naming. Below is a list of the CSS classes available on the component.  
+
+
+### `.Collapsible`
+The parent element for the components.
+
+### `.Collapsible__trigger`
+The trigger link that controls the opening and closing of the component.
+The state of the component is also reflected on this element with the modifier classes;
+- `is-closed` | Closed state
+- `is-open` | Open setState
+
+### `.Collapsible__contentOuter`
+The outer container that hides the content. This is set to `overflow: hidden` within the javascript but everything else about it is for you to change.
+
+### `.Collapsible__contentInner`
+This is a container for the content passed into the compoenent. This keeps everything nice and neat and allows the component to do all it's whizzy calculations.
+
+
+## Example
+An example of the component in action is available in the example folder. To see it in action you can run `npm install` and then run `gulp`. This will compile all the JSX into JS and open the example page using BrowserSync.
+
+## Licence
+React Responsive Collapsible Section Component is [MIT licensed](LICENSE.md)

browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square70x70logo src="/mstile-70x70.png"/>
+      <square150x150logo src="/mstile-150x150.png"/>
+      <square310x310logo src="/mstile-310x310.png"/>
+      <wide310x150logo src="/mstile-310x150.png"/>
+      <TileColor>#00aba9</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>

example/_src/jsx/app.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './components/App';
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('App')
+);

example/_src/jsx/components/App.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import Accordion from '../../../../src/Accordion';
+
+
+var App = React.createClass({
+
+
+  render: function() {
+    return(
+      <div>
+
+        <Accordion>
+          <div triggerText="Trigger Text One">
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          </div>
+
+          <div triggerText="Trigger Text Two">
+            <p>Dolor sit amet, consectetur adipxercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          </div>
+
+          <div triggerText="Trigger Text Three" triggerTextWhenOpen="Ohh I'm open">
+            <p>Eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+            <Accordion>
+              <div triggerText="Nested Trigger Text One">
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+              </div>
+
+              <div triggerText="Nested Trigger Text Two">
+                <p>Dolor sit amet, consectetur adipxercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+              </div>
+
+              <div triggerText="Nested Trigger Text Three">
+                <p>Eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+              </div>
+            </Accordion>
+          </div>
+        </Accordion>
+
+      </div>
+    );
+  }
+
+});
+
+export default App;

example/_src/sass/base/_clearfix.scss

@@ -0,0 +1,26 @@
+/**
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ *    contenteditable attribute is included anywhere else in the document.
+ *    Otherwise it causes space to appear at the top and bottom of elements
+ *    that are clearfixed.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ *    `:before` to contain the top-margins of child elements.
+ */
+.cf:before,
+.cf:after {
+    content: " "; /* 1 */
+    display: table; /* 2 */
+}
+
+.cf:after {
+    clear: both;
+}
+
+/**
+ * For IE 6/7 only
+ * Include this rule to trigger hasLayout and contain floats.
+ */
+.cf {
+    *zoom: 1;
+}

example/_src/sass/base/_mixins.scss

@@ -0,0 +1,11 @@
+@function strip-unit($num) {
+  @return $num / ($num * 0 + 1);
+}
+
+
+@function rem($sizeValue: 1.6) {
+
+  $value: strip-unit($sizeValue / $BASE_FONT_SIZE);
+
+  @return $value + rem;
+}

example/_src/sass/base/_reset.scss

@@ -0,0 +1,54 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}

example/_src/sass/base/_variables.scss

@@ -0,0 +1,12 @@
+$yellow:  rgb(248, 159, 0);
+$cyan:    rgb(0, 172, 157);
+$grey:    rgb(51, 51, 51);
+$black:   rgb(38, 38, 38);
+$base:    rgb(255, 255, 255);
+$lightGrey:    rgb(235, 235, 235);
+
+$BASE_FONT_SIZE: 16px;
+
+$breakpointMega: 1600px;
+$breakpointLarge: 990px;
+$breakpointMed: 767px;

example/_src/sass/components/_Collapsible.scss

@@ -0,0 +1,52 @@
+// The main container element
+.Collapsible {
+  background-color: $base;
+}
+
+
+//The content within the collaspable area
+.Collapsible__contentInner {
+  padding: 10px;
+  border: 1px solid $lightGrey;
+  border-top: 0;
+
+  p {
+    margin-bottom: 10px;
+    font-size: 14px;
+    line-height: 20px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+//The link which when clicked opens the collapsable area
+.Collapsible__trigger {
+  display: block;
+  font-weight: 400;
+  text-decoration: none;
+  color: $grey;
+  position: relative;
+  border: 1px solid white;
+  padding: 10px;
+  background: $cyan;
+  color: white;
+
+
+  &:after {
+    font-family: 'FontAwesome';
+    content: '\f107';
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    display: block;
+    transition: transform 300ms;
+  }
+
+  &.is-open {
+    &:after {
+      transform: rotateZ(180deg);
+    }
+  }
+}

example/_src/sass/main.scss

@@ -0,0 +1,37 @@
+@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic);
+@import "base/reset";
+@import "base/clearfix";
+@import "base/variables";
+@import "base/mixins";
+
+html {
+  font-size: $BASE_FONT_SIZE;
+}
+
+body {
+  background-color: $grey;
+  font-family: 'Roboto', sans-serif;
+  padding-top: 50px;
+}
+
+h1 {
+  color: white;
+  text-align: center;
+  font-size: 30px;
+  margin-bottom: 50px;
+}
+
+h2 {
+  font-weight: 800;
+  text-transform: uppercase;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+#App {
+  max-width: 960px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@import "components/Collapsible";