Adds new center and size properties

Changes: - *breaking* Changed the main file in `package.json` - *breaking* Changed the build files location to `dist/` folder - *breaking* Changed the component styles - Added new props: `center` and `size` - Removed fixes for tests, now tests are supported as they should be - Changed the styles language from `scss` to `sass` - Updated `peerDependencies` to support `vue@2.1` - Added `vue-play` support, removed `vue-dev-derver` - Added new examples Closes #7, closes #8, closes #9, closes #10
wemake-services · Dec 5, 2016 · 5ef05af · 5ef05af
1 parent d25290d
commit 5ef05af
Show file tree

Hide file tree

Showing 17 changed files with 914 additions and 404 deletions.
diff --git a/.gitignore b/.gitignore
@@ -103,9 +103,4 @@ $RECYCLE.BIN/
 test/unit/coverage
 
 # Built files:
-/index.js
-/style.css
-
-# vue-dev-server
-dev/index.js
-docs/
+dist/
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,17 @@
 # Changelog
 
+## Version 1.1.0
+
+- *breaking* Changed the main file in `package.json`
+- *breaking* Changed the build files location to `dist/` folder
+- *breaking* Changed the component styles
+- Added new props: `center` and `size`
+- Removed fixes for tests, now tests are supported as they should be
+- Changed the styles language from `scss` to `sass`
+- Updated `peerDependencies` to support `vue@2.1`
+- Added `vue-play` support, removed `vue-dev-derver`
+- Added new examples
+
 ## Version 1.0.0
 
 - Changed the way the `document-offset` dependency is mounted, since now it is ssr-friendly

diff --git a/README.md b/README.md
@@ -36,4 +36,4 @@ npm install vue-material-ripple
 </script>
 ```
 
-For more examples, please check [`/dev`](https://github.com/wemake-services/vue-material-ripple/tree/master/dev) folder and the [project's website](http://wemake.services/vue-material-ripple).
+For more examples, please check [`/play`](https://github.com/wemake-services/vue-material-ripple/tree/master/play) folder and the [project's website](http://wemake.services/vue-material-ripple).
diff --git a/build/webpack.conf.js b/build/webpack.conf.js
@@ -1,5 +1,6 @@
 var path = require('path')
 var projectRoot = path.resolve(__dirname, '../')
+var dist = path.join(projectRoot, 'dist')
 
 var webpack = require('webpack')
 var ExtractTextPlugin = require('extract-text-webpack-plugin')
@@ -9,7 +10,7 @@ module.exports = {
     app: './src/index.js'
   },
   output: {
-    path: projectRoot,
+    path: dist,
     filename: 'index.js',
     library: 'VueMaterialInput',
     libraryTarget: 'umd'
@@ -40,7 +41,7 @@ module.exports = {
   },
   vue: {
     loaders: {
-      scss: ExtractTextPlugin.extract(
+      sass: ExtractTextPlugin.extract(
         'vue-style-loader', 'css-loader!sass-loader'
       )
     },

diff --git a/dev/webpack.config.js b/dev/webpack.config.js
diff --git a/package.json b/package.json
@@ -12,19 +12,19 @@
     "test:security": "./node_modules/.bin/nsp check",
     "test": "npm run test:unit && npm run test:security",
     "lint": "eslint --ext .js,.vue src test/unit/specs dev",
-    "dev:server": "./node_modules/.bin/vue-dev-server",
-    "ghpages": "./node_modules/.bin/vue-dev-server --static docs/ && ./node_modules/.bin/gh-pages -d docs"
+    "ghpages": "npm run play:build && ./node_modules/.bin/gh-pages -d dist-play",
+    "play": "vue-play start",
+    "play:build": "vue-play build"
   },
   "files": [
     "src/",
-    "dev/",
-    "build/",
-    "style.css",
-    "index.js",
+    "src/",
+    "dist/",
+    "LICENSE.md",
     "README.md"
   ],
   "peerDependencies": {
-    "vue": "~2.0"
+    "vue": "2.x.x"
   },
   "devDependencies": {
     "autoprefixer": "^6.4.0",
@@ -82,16 +82,19 @@
     "publish-please": "^2.2.0",
     "sass-loader": "^4.0.2",
     "selenium-server": "2.53.1",
+    "simulant": "^0.2.2",
     "sinon": "^1.17.3",
     "sinon-chai": "^2.8.0",
     "url-loader": "^0.5.7",
-    "vue": "^2.0.3",
-    "vue-dev-server": "^2.0.4",
+    "vue": "^2.1.4",
     "vue-hot-reload-api": "^2.0.6",
     "vue-html-loader": "^1.2.3",
-    "vue-loader": "^9.7.0",
+    "vue-loader": "^10.0.2",
+    "vue-play": "^2.1.1",
+    "vue-play-cli": "^1.0.4",
     "vue-router": "^2.0.1",
     "vue-style-loader": "^1.0.0",
+    "vue-template-compiler": "^2.1.4",
     "vueify": "^9.2.4",
     "vueify-insert-css": "^1.0.0",
     "webpack": "^1.13.3",
@@ -107,7 +110,7 @@
     "effect",
     "wemake.services"
   ],
-  "main": "index.js",
+  "main": "dist/index.js",
   "repository": {
     "url": "https://github.com/wemake-services/vue-material-ripple.git",
     "type": "git"

diff --git a/play/components/CenteredAnimation.vue b/play/components/CenteredAnimation.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="ripple-example">
+    <h1>You can center Material Ripple effect</h1>
+
+    <div class="ripple-centered">
+      <button
+        type="button"
+        class="ripple-centered-button">
+          +
+      </button>
+
+      <MaterialRipple :center="true" :size="55"></MaterialRipple>
+    </div>
+</template>
+
+<script>
+  import MaterialRipple from '../../src/components/MaterialRipple.vue'
+
+  module.exports = {
+    name: 'material-ripple-customization',
+    components: {
+      MaterialRipple
+    }
+  }
+</script>
+
+<style lang="sass">
+  .ripple-centered {
+    overflow: hidden;
+    position: relative;
+    display: inline-block;
+    padding: 20px;
+
+    .ripple-centered-button {
+      background: white;
+      border: 1px solid;
+      border-radius: 50%;
+      width: 50px;
+      height: 50px;
+      font-size: 25px;
+      user-select: none;
+
+      &:focus, &:active {
+        outline: none;
+      }
+    }
+
+    .material-ripple__component {
+      background: orange;
+
+      &.ripple--animation {
+        animation: smallripple .5s linear; // runs the animation on element.
+      }
+    }
+  }
+
+  @keyframes smallripple {
+    from {
+      opacity: .5;
+    }
+    to {
+      opacity: 0;
+      transform: scale(1.5);
+    }
+  }
+</style>
+
diff --git a/dev/MaterialRippleExample.vue → play/components/Example.vue b/dev/MaterialRippleExample.vue → play/components/Example.vue
@@ -1,6 +1,5 @@
 <template>
-  <div class="ripple-examples__component">
-    <a href="#">back</a>
+  <div class="ripple-example">
     <h1>You can place Material Ripple effect on any other component</h1>
     <button type="button" class="ripple-example-button">
       Button
@@ -26,7 +25,7 @@
 </template>
 
 <script>
-  import MaterialRipple from '../src/components/MaterialRipple.vue'
+  import MaterialRipple from '../../src/components/MaterialRipple.vue'
 
   module.exports = {
     name: 'material-ripple-examples',
@@ -36,7 +35,7 @@
   }
 </script>
 
-<style lang="scss">
+<style lang="sass">
   %base-example {
     background: orange;
     color: white;
@@ -48,26 +47,20 @@
     transform: translate(0);
   }
 
-  .ripple-examples__component {
-    max-width: 300px;
-    display: block;
-    margin: 0 auto;
-
-    .ripple-example-button {
-      @extend %base-example;
+  .ripple-example-button {
+    @extend %base-example;
 
-      font-size: 18px;
-      outline: none;
-      border: none;
-    }
+    font-size: 18px;
+    outline: none;
+    border: none;
+  }
 
-    .ripple-example-div {
-      @extend %base-example;
-    }
+  .ripple-example-div {
+    @extend %base-example;
+  }
 
-    .ripple-example-a {
-      @extend %base-example;
-      display: block;
-    }
+  .ripple-example-a {
+    @extend %base-example;
+    display: block;
   }
 </style>
diff --git a/dev/MaterialRippleCustomization.vue → play/components/Theme.vue b/dev/MaterialRippleCustomization.vue → play/components/Theme.vue
@@ -1,29 +1,34 @@
 <template>
-  <div class="ripple-customization__component">
-    <a href="#">back</a>
+  <div class="ripple-example">
     <h1>You can customize Material Ripple effect</h1>
-    <button type="button" class="ripple-customization-button button--white">
-      Button
-      <MaterialRipple className="ripple--black"></MaterialRipple>
+    <button
+      type="button"
+      class="ripple-customization-button button--white ripple--black">
+        Button
+        <MaterialRipple></MaterialRipple>
     </button>
 
     <hr>
 
-    <button type="button" class="ripple-customization-button button--orange">
-      Button
-      <MaterialRipple className="ripple--white"></MaterialRipple>
+    <button
+      type="button"
+      class="ripple-customization-button button--orange ripple--white">
+        Button
+        <MaterialRipple></MaterialRipple>
     </button>
 
     <hr>
 
-    <button type="button" class="ripple-customization-button button--white">
-      Button
-      <MaterialRipple className="ripple--custom"></MaterialRipple>
+    <button
+      type="button"
+      class="ripple-customization-button button--white ripple--orange">
+        Button
+        <MaterialRipple></MaterialRipple>
     </button>
 </template>
 
 <script>
-  import MaterialRipple from '../src/components/MaterialRipple.vue'
+  import MaterialRipple from '../../src/components/MaterialRipple.vue'
 
   module.exports = {
     name: 'material-ripple-customization',
@@ -33,8 +38,8 @@
   }
 </script>
 
-<style lang="scss">
-  .ripple-customization__component {
+<style lang="sass">
+  .ripple-example {
     max-width: 300px;
     display: block;
     margin: 0 auto;
@@ -62,9 +67,16 @@
       outline: none;
       border: none;
     }
+  }
+
+  // Custom styling
+
+  .material-ripple__component {
+    .ripple--black & {
+      background-color: rgba(0, 0, 0, .1);
+    }
 
-    // Custom styling
-    .ripple--custom {
+    .ripple--orange & {
       background-color: orange;
     }
   }

diff --git a/play/index.js b/play/index.js
@@ -0,0 +1,10 @@
+import { play } from 'vue-play'
+
+import Example from './components/Example.vue'
+import Theme from './components/Theme.vue'
+import CenteredAnimation from './components/CenteredAnimation.vue'
+
+play('MaterialButton', module)
+  .add('example', Example)
+  .add('theme', Theme)
+  .add('centered', CenteredAnimation)