Upgrade prettier

.gitignore

@@ -5,3 +5,4 @@ dist
 demo/dist
 npm-debug.log
 yarn.lock
+package-lock.json

demo/src/components/App/components/Examples/Examples.js

@@ -8,9 +8,7 @@ import ScrollableContainer from 'ScrollableContainer/ScrollableContainer';
 
 const Examples = () =>
   <div className={styles.container}>
-    <h2 className={styles.header}>
-      Examples
-    </h2>
+    <h2 className={styles.header}>Examples</h2>
     <Basic />
     <MultipleSections />
     <CustomRender />

demo/src/components/App/components/Examples/components/Basic/Basic.js

@@ -23,7 +23,10 @@ const getSuggestions = value => {
 
 const getSuggestionValue = suggestion => suggestion.name;
 
-const renderSuggestion = suggestion => <span>{suggestion.name}</span>;
+const renderSuggestion = suggestion =>
+  <span>
+    {suggestion.name}
+  </span>;
 
 export default class Basic extends Component {
   constructor() {
@@ -64,9 +67,7 @@ export default class Basic extends Component {
     return (
       <div id="basic-example" className={styles.container}>
         <div className={styles.textContainer}>
-          <div className={styles.title}>
-            Basic
-          </div>
+          <div className={styles.title}>Basic</div>
           <div className={styles.description}>
             Let’s start simple. Here’s a plain list of suggestions.
           </div>

demo/src/components/App/components/Examples/components/CustomRender/CustomRender.js

@@ -38,7 +38,11 @@ const renderSuggestion = (suggestion, { query }) => {
         {parts.map((part, index) => {
           const className = part.highlight ? theme.highlight : null;
 
-          return <span className={className} key={index}>{part.text}</span>;
+          return (
+            <span className={className} key={index}>
+              {part.text}
+            </span>
+          );
         })}
       </span>
     </span>
@@ -88,9 +92,7 @@ export default class CustomRender extends Component {
     return (
       <div id="custom-render-example" className={styles.container}>
         <div className={styles.textContainer}>
-          <div className={styles.title}>
-            Custom render
-          </div>
+          <div className={styles.title}>Custom render</div>
           <div className={styles.description}>
             Apply any styling you wish.<br />
             For example, render images and highlight the matching string.

demo/src/components/App/components/Examples/components/MultipleSections/MultipleSections.js

@@ -33,9 +33,15 @@ const getSuggestions = value => {
 
 const getSuggestionValue = suggestion => suggestion.name;
 
-const renderSuggestion = suggestion => <span>{suggestion.name}</span>;
+const renderSuggestion = suggestion =>
+  <span>
+    {suggestion.name}
+  </span>;
 
-const renderSectionTitle = section => <strong>{section.title}</strong>;
+const renderSectionTitle = section =>
+  <strong>
+    {section.title}
+  </strong>;
 
 const getSectionSuggestions = section => section.languages;
 
@@ -78,12 +84,10 @@ export default class MultipleSections extends Component {
     return (
       <div id="multiple-sections-example" className={styles.container}>
         <div className={styles.textContainer}>
-          <div className={styles.title}>
-            Multiple sections
-          </div>
+          <div className={styles.title}>Multiple sections</div>
           <div className={styles.description}>
-            Suggestions can also be presented in multiple sections.
-            Note that we highlight the first suggestion by default here.
+            Suggestions can also be presented in multiple sections. Note that we
+            highlight the first suggestion by default here.
           </div>
           <Link
             className={styles.codepenLink}

demo/src/components/App/components/Examples/components/ScrollableContainer/ScrollableContainer.js

@@ -103,19 +103,18 @@ export default class ScrollableContainer extends Component {
     return (
       <div id="scrollable-container-example" className={styles.container}>
         <div className={styles.textContainer}>
-          <div className={styles.title}>
-            Scrollable container
-          </div>
+          <div className={styles.title}>Scrollable container</div>
           <div className={styles.description}>
             When the suggestions list is long, you may want to make it
-            scrollable.
-            Note that the suggestions are rendered even when the input field
-            is not focused.
+            scrollable. Note that the suggestions are rendered even when the
+            input field is not focused.
           </div>
         </div>
         <div className={styles.demoContainer}>
           <div className={styles.question}>Where do you live?</div>
-          <div className={styles.answer}>{selected.name}</div>
+          <div className={styles.answer}>
+            {selected.name}
+          </div>
           <button className={styles.editButton} onClick={this.openModal}>
             Edit
           </button>
@@ -130,9 +129,7 @@ export default class ScrollableContainer extends Component {
           }
           style={modalStyle}
         >
-          <div className={styles.modalTitle}>
-            Please select a country:
-          </div>
+          <div className={styles.modalTitle}>Please select a country:</div>
           <div className={styles.modalBody}>
             <Autosuggest
               suggestions={suggestions}

demo/src/components/App/components/Features/Features.js

@@ -5,15 +5,11 @@ import Link from 'Link/Link';
 
 const Features = () =>
   <div className={styles.container}>
-    <h2 className={styles.header}>
-      Features
-    </h2>
+    <h2 className={styles.header}>Features</h2>
     <div className={styles.content}>
       <div className={styles.feature}>
         <div className={styles.accessibleIcon} />
-        <div className={styles.featureName}>
-          Accessible
-        </div>
+        <div className={styles.featureName}>Accessible</div>
         <div className={styles.featureDescription}>
           <Link
             className={styles.link}
@@ -26,18 +22,14 @@ const Features = () =>
       </div>
       <div className={styles.feature}>
         <div className={styles.mobileFriendlyIcon} />
-        <div className={styles.featureName}>
-          Mobile friendly
-        </div>
+        <div className={styles.featureName}>Mobile friendly</div>
         <div className={styles.featureDescription}>
           Works well on those little devices you carry around in your hands.
         </div>
       </div>
       <div className={styles.feature}>
         <div className={styles.customizableIcon} />
-        <div className={styles.featureName}>
-          Customizable
-        </div>
+        <div className={styles.featureName}>Customizable</div>
         <div className={styles.featureDescription}>
           Supports custom suggestion rendering, multiple sections, and more.
         </div>

demo/src/components/App/components/Header/Header.js

@@ -10,7 +10,7 @@ export default class Header extends Component {
     super();
 
     this.state = {
-      stargazers: '2020'
+      stargazers: '2363'
     };
   }
 
@@ -32,9 +32,7 @@ export default class Header extends Component {
     return (
       <div className={styles.container}>
         <div className={styles.logo} />
-        <h1 className={styles.header}>
-          React Autosuggest
-        </h1>
+        <h1 className={styles.header}>React Autosuggest</h1>
         <div className={styles.subHeader}>
           WAI-ARIA compliant autosuggest component built in React
         </div>

demo/standalone/app.js

@@ -76,7 +76,10 @@ const getSuggestions = value => {
 
 const getSuggestionValue = suggestion => suggestion.name;
 
-const renderSuggestion = suggestion => <span>{suggestion.name}</span>;
+const renderSuggestion = suggestion =>
+  <span>
+    {suggestion.name}
+  </span>;
 
 // prettier-ignore
 class App extends React.Component { // eslint-disable-line no-undef

demo/standalone/compiled.app.js

@@ -48,6 +48,7 @@
     /* 1 */
     /***/ function(module, exports) {
       'use strict';
+
       var _createClass = (function() {
         function defineProperties(target, props) {
           for (var i = 0; i < props.length; i++) {