Add project

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["env", "stage-2", "react"]
+}

.eslintrc

@@ -0,0 +1,22 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jest": true
+  },
+  "extends": ["airbnb", "prettier", "prettier/react"],
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "rules": {
+    "comma-dangle": ["warn", "never"],
+    "no-mixed-operators": "off",
+    "object-curly-newline": "off",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "function-paren-newline": "off"
+  }
+}

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+/dist
+*.log
+coverage
+.vscode

.npmignore

@@ -0,0 +1,12 @@
+__tests__
+src
+examples
+.babelrc
+.eslintrc
+.gitignore
+.prettierignore
+.vscode
+webpack.config.js
+jest.config.js
+jest.setup.js
+coverage

.prettierignore

@@ -0,0 +1,3 @@
+dist
+coverage
+package-lock.json

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Dutiyesh Salunkhe
+
+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,64 @@
+# react-expand-collapse
+
+A simple and customizable expand-collapse react component for the web.
+
+* **Customizable** - Easy to customize button state and text.
+* **Lightweight** - Less than 5kb of size. No dependencies other than _prop-types_.
+
+
+## Demo
+
+[Demo Link](https://dutiyesh.github.io/react-expand-collapse/)
+
+## Installation
+
+```bash
+npm install react-expand-collapse
+```
+
+## Usage
+> Important: Make sure to include the [css file](https://github.com/dutiyesh/react-expand-collapse/blob/master/examples/src/expand-collapse.css) or feel free to create your own.
+
+```js
+import React from 'react';
+import ExpandCollapse from 'react-expand-collapse';
+
+class MovieInfo extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div>
+        <h4>Inception</h4>
+        <ExpandCollapse
+          previewHeight="88px"
+        >
+          Visionary filmmaker Christopher Nolan (Memento, The Dark Knight) writes and directs this psychological sci-fi action film about a thief who possesses the power to enter into the dreams of others. Dom Cobb (Leonardo DiCaprio) doesn't steal things, he steals ideas. By projecting himself deep into the subconscious of his targets, he can glean information that even the best computer hackers can't get to. In the world of corporate espionage, Cobb is the ultimate weapon. But even weapons have their weakness, and when Cobb loses everything, he's forced to embark on one final mission in a desperate quest for redemption. This time, Cobb won't be harvesting an idea, but sowing one. Should he and his team of specialists succeed, they will have discovered a new frontier in the art of psychic espionage. They've planned everything to perfection, and they have all the tools to get the job done. Their mission is complicated, however, by the sudden appearance of a malevolent foe that seems to know exactly what they're up to, and precisely how to stop them. ~ Jason Buchanan, Rovi
+        </ExpandCollapse>
+    );
+  }
+}
+```
+
+## API
+
+| Prop  | Type | Default | Description
+| -------------- | ------------- | ------------- | ------------- |
+| previewHeight  | string  | **Required**  | The height of component in collapsed state.  |
+| children  | node  | **Required**  | Element to render inside the component.  |
+| className  | string  | `''`  | A custom class will be applied to the root of `ExpandCollapse`. |
+| expanded  | bool  | `false`  | If `true`, the component is in expanded state. If `false`, it is in collapsed state.  |
+| expandText  | string  | `Expand`  | The text shown in expanded state.  |
+| collapseText  | string  | `Collapse`  | The text shown in collapsed state.  |
+| collapse  | bool  | `true`  | If `true`, the component can be collapsed. If `false`, once it is expanded, it cannot be collapsed. |
+| ellipsis  | bool  | `true`  | If `true`, the `expandText` will have a prefix of `ellipsisText` prop. If `false`, no prefix will appear.  |
+| ellipsisText  | string  | `'...'`  | The text to show before `expandText` text.  |
+| onExpandClick  | func  | `null`  | Invoked when the user clicks on expand button  |
+| onCollapseClick  | func  | `null`  | Invoked when the user clicks on collapse button  |
+| onClick  | func  | `null`  | Invoked when the user clicks on button  |
+
+## License
+
+MIT

__tests__/ExpandCollapse.Events.test.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import ExpandCollapse from "../src/ExpandCollapse";
+
+describe("<ExpandCollapse />", function() {
+  it("handles expand click button", function() {
+    const wrapper = mount(
+      <ExpandCollapse
+        previewHeight="88px"
+        expanded={false}
+      >
+        Visionary filmmaker Christopher Nolan (Memento, The Dark Knight) writes and directs this psychological sci-fi action film about a thief who possesses the power to enter into the dreams of others. Dom Cobb (Leonardo DiCaprio) doesn't steal things, he steals ideas. By projecting himself deep into the subconscious of his targets, he can glean information that even the best computer hackers can't get to. In the world of corporate espionage, Cobb is the ultimate weapon. But even weapons have their weakness, and when Cobb loses everything, he's forced to embark on one final mission in a desperate quest for redemption. This time, Cobb won't be harvesting an idea, but sowing one. Should he and his team of specialists succeed, they will have discovered a new frontier in the art of psychic espionage. They've planned everything to perfection, and they have all the tools to get the job done. Their mission is complicated, however, by the sudden appearance of a malevolent foe that seems to know exactly what they're up to, and precisely how to stop them. ~ Jason Buchanan, Rovi
+      </ExpandCollapse>
+    )
+    expect(wrapper.find('.toggle-content__button').text()).toEqual("... Expand");
+    wrapper.find(".toggle-content__button").simulate("click");
+    expect(wrapper.find('.toggle-content__button').text()).toEqual("Collapse");
+  });
+});

__tests__/ExpandCollapse.Props.test.jsx

@@ -0,0 +1,70 @@
+import React from "react";
+import ExpandCollapse from "../src/ExpandCollapse";
+
+describe("<ExpandCollapse /> Props", function() {
+  it("matches the custom class", function() {
+    const customClassName = "movie-info";
+
+    const wrapper = render(
+      <ExpandCollapse
+        previewHeight="88px"
+        className="movie-overview"
+      >
+        Visionary filmmaker Christopher Nolan (Memento, The Dark Knight) writes and directs this psychological sci-fi action film about a thief who possesses the power to enter into the dreams of others.
+      </ExpandCollapse>
+    )
+    expect(wrapper
+      .prop("class"))
+      .toMatch(/(movie-overview)+/);
+  })
+
+  it("matches the expanded state", function() {
+    const customClassName = "movie-info";
+
+    const wrapper = render(
+      <ExpandCollapse
+        previewHeight="88px"
+        expanded={true}
+        collapseText="Collapse"
+      >
+        Visionary filmmaker Christopher Nolan (Memento, The Dark Knight) writes and directs this psychological sci-fi action film about a thief who possesses the power to enter into the dreams of others.
+      </ExpandCollapse>
+    )
+    expect(wrapper
+      .prop("class"))
+      .toMatch(/(toggle-content--expanded)+/);
+    expect(wrapper
+      .find(".toggle-content__button")
+      .text()).toEqual("Collapse");
+  })
+
+  it("matches expandText with ellipsis", function() {
+    const wrapper = mount(
+      <ExpandCollapse
+        previewHeight="88px"
+        expandText="Expand"
+        ellipsis={true}
+      >
+        Visionary filmmaker Christopher Nolan (Memento, The Dark Knight) writes and directs this psychological sci-fi action film about a thief who possesses the power to enter into the dreams of others.
+      </ExpandCollapse>
+    );
+    expect(wrapper
+      .find(".toggle-content__button")
+      .text()).toEqual("... Expand");
+  });
+
+  it("matches expandText without ellipsis", function() {
+    const wrapper = mount(
+      <ExpandCollapse
+        previewHeight="88px"
+        expandText="Expand"
+        ellipsis={false}
+      >
+        Visionary filmmaker Christopher Nolan (Memento, The Dark Knight) writes and directs this psychological sci-fi action film about a thief who possesses the power to enter into the dreams of others.
+      </ExpandCollapse>
+    );
+    expect(wrapper
+      .find(".toggle-content__button")
+      .text()).toEqual("Expand");
+  });
+});

__tests__/ExpandCollapse.Render.test.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import ExpandCollapse from "../src/ExpandCollapse";
+
+describe("<ExpandCollapse /> Component Rendering", function() {
+  it("renders the component with default props", function() {
+    const wrapper = render(
+      <ExpandCollapse
+        previewHeight="88px"
+      >
+        Visionary filmmaker Christopher Nolan (Memento, The Dark Knight) writes and directs this psychological sci-fi action film about a thief who possesses the power to enter into the dreams of others. Dom Cobb (Leonardo DiCaprio) doesn't steal things, he steals ideas. By projecting himself deep into the subconscious of his targets, he can glean information that even the best computer hackers can't get to. In the world of corporate espionage, Cobb is the ultimate weapon. But even weapons have their weakness, and when Cobb loses everything, he's forced to embark on one final mission in a desperate quest for redemption. This time, Cobb won't be harvesting an idea, but sowing one. Should he and his team of specialists succeed, they will have discovered a new frontier in the art of psychic espionage. They've planned everything to perfection, and they have all the tools to get the job done. Their mission is complicated, however, by the sudden appearance of a malevolent foe that seems to know exactly what they're up to, and precisely how to stop them. ~ Jason Buchanan, Rovi
+      </ExpandCollapse>
+    )
+    expect(wrapper).toMatchSnapshot();
+  })
+})

__tests__/__snapshots__/ExpandCollapse.Render.test.jsx.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ExpandCollapse /> Component Rendering renders the component with default props 1`] = `
+<div
+  class="toggle__content  "
+  style="height:88px"
+>
+  <div
+    class="toggle-content__body"
+  >
+    Visionary filmmaker Christopher Nolan (Memento, The Dark Knight) writes and directs this psychological sci-fi action film about a thief who possesses the power to enter into the dreams of others. Dom Cobb (Leonardo DiCaprio) doesn't steal things, he steals ideas. By projecting himself deep into the subconscious of his targets, he can glean information that even the best computer hackers can't get to. In the world of corporate espionage, Cobb is the ultimate weapon. But even weapons have their weakness, and when Cobb loses everything, he's forced to embark on one final mission in a desperate quest for redemption. This time, Cobb won't be harvesting an idea, but sowing one. Should he and his team of specialists succeed, they will have discovered a new frontier in the art of psychic espionage. They've planned everything to perfection, and they have all the tools to get the job done. Their mission is complicated, however, by the sudden appearance of a malevolent foe that seems to know exactly what they're up to, and precisely how to stop them. ~ Jason Buchanan, Rovi
+  </div>
+  <span
+    aria-expanded="false"
+    aria-label="... Expand"
+    class="toggle-content__button"
+    role="button"
+  >
+    ... Expand
+  </span>
+</div>
+`;