Fix: Migrate tests to new page that showcases how it works (#141)

* drop classnames

* Improved example

Author: stipsan

example/pages/index.tsx

@@ -1,7 +1,6 @@
 import { Component } from 'react'
 import Head from 'next/head'
 import systemFontStack from 'system-font-stack'
-import cx from 'classnames'
 import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed'
 
 export interface IndexPageProps {
@@ -56,21 +55,22 @@ export default class IndexPage extends Component<
             white-space: nowrap;
           }
 
-          ul li {
+          li {
             background: #eee;
             border-radius: 5px;
             display: inline-block;
             list-style: none;
             padding: 5px 10px;
+            margin: 3px;
           }
 
-          ul li:nth-child(2n + 1) {
+          li:nth-child(2n + 1) {
             background: #ddd;
             text-align: right;
           }
 
-          ul li.selected {
-            background: #bada55;
+          li:nth-child(8n + 1) {
+            display: block;
           }
         `}</style>
         <ul
@@ -82,15 +82,17 @@ export default class IndexPage extends Component<
         >
           {this.props.items.map(i => (
             <li
-              className={cx({ selected: this.state.selected === i })}
+              style={{
+                background: this.state.selected === i ? '#bada55' : null,
+              }}
               key={i.toString()}
             >
               item #{i}
             </li>
           ))}
         </ul>
         <div>
-          {[0, 11, 22, 24, 26, 33, 44, 55, 66, 77, 82, 82, 86, 99].map(v => (
+          {[0, 11, 22, 24, 26, 33, 44, 55, 66, 77, 82, 84, 86, 99].map(v => (
             <button onClick={this.handleClick} value={v}>
               #{v}
             </button>

package.json

@@ -33,15 +33,13 @@
     "amator": "1.0.1"
   },
   "devDependencies": {
-    "@types/classnames": "^2.2.3",
     "@types/next": "^2.4.5",
     "@types/react": "^16.0.20",
     "@types/react-dom": "^16.0.2",
     "babel-cli": "^6.23.0",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-preset-env": "^1.2.1",
     "babel-preset-es2015-rollup": "^3.0.0",
-    "classnames": "^2.2.5",
     "concurrently": "^3.5.0",
     "cypress": "^1.0.3",
     "husky": "^0.14.3",

test/test-vertical.html

@@ -61,10 +61,6 @@
     lodash "^4.17.4"
     pify "^3.0.0"
 
-"@types/classnames@^2.2.3":
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.3.tgz#3f0ff6873da793870e20a260cada55982f38a9e5"
-
 "@types/next@^2.4.5":
   version "2.4.5"
   resolved "https://registry.yarnpkg.com/@types/next/-/next-2.4.5.tgz#6c18502fec7d82c153f502da0562dfd5e6a15e27"
@@ -1327,10 +1323,6 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
-classnames@^2.2.5:
-  version "2.2.5"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
-
 cli-cursor@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-1.0.2.tgz#64da3f7d56a54412e59794bd62dc35295e8f2987"