Added new share button: OK, Pinterst, Pocket, Reddit, Tumbler, Xing

src/App.vue

@@ -114,7 +114,6 @@
       <weibo-button class="share-button--circle share-button--outline" btnText></weibo-button>
       <weibo-button class="share-button--circle share-button--outline" v-bind:hasIcon="false"></weibo-button>
     </div>
-
     <div class="share-buttons-group">
       <evernote-button shareTitle="Comment"></evernote-button>
       <evernote-button
@@ -148,7 +147,6 @@
         v-bind:hasIcon="false"
       ></evernote-button>
     </div>
-
     <div class="share-buttons-group">
       <vkontakte-button shareTitle="Comment"></vkontakte-button>
       <vkontakte-button
@@ -248,6 +246,208 @@
         v-bind:hasIcon="false"
       ></linkedIn-button>
     </div>
+    <div class="share-buttons-group">
+      <tumblr-button shareTitle="Comment"></tumblr-button>
+      <tumblr-button
+        v-bind:isBlank="false"
+        shareText="Twiiter share good work"
+        shareTitle="Comment"
+        btnText
+      ></tumblr-button>
+      <tumblr-button v-bind:hasIcon="false" shareTitle="Comment"></tumblr-button>
+      <tumblr-button class="share-button--circle" shareTitle="Comment"></tumblr-button>
+      <tumblr-button class="share-button--circle" shareTitle="Comment" btnText></tumblr-button>
+      <tumblr-button class="share-button--circle" shareTitle="Comment" v-bind:hasIcon="false"></tumblr-button>
+      <tumblr-button class="share-button--outline" shareTitle="Comment"></tumblr-button>
+      <tumblr-button
+        class="share-button--outline"
+        v-bind:isBlank="false"
+        shareText="Twiiter share good work"
+        shareTitle="Comment"
+        btnText
+      ></tumblr-button>
+      <tumblr-button class="share-button--outline" shareTitle="Comment" v-bind:hasIcon="false"></tumblr-button>
+      <tumblr-button class="share-button--circle share-button--outline" shareTitle="Comment"></tumblr-button>
+      <tumblr-button
+        class="share-button--circle share-button--outline"
+        shareTitle="Comment"
+        btnText
+      ></tumblr-button>
+      <tumblr-button
+        class="share-button--circle share-button--outline"
+        shareTitle="Comment"
+        v-bind:hasIcon="false"
+      ></tumblr-button>
+    </div>
+    <div class="share-buttons-group">
+      <pinterest-button shareTitle="Comment"></pinterest-button>
+      <pinterest-button
+        v-bind:isBlank="false"
+        shareText="Twiiter share good work"
+        shareTitle="Comment"
+        btnText
+      ></pinterest-button>
+      <pinterest-button v-bind:hasIcon="false" shareTitle="Comment"></pinterest-button>
+      <pinterest-button class="share-button--circle" shareTitle="Comment"></pinterest-button>
+      <pinterest-button class="share-button--circle" shareTitle="Comment" btnText></pinterest-button>
+      <pinterest-button class="share-button--circle" shareTitle="Comment" v-bind:hasIcon="false"></pinterest-button>
+      <pinterest-button class="share-button--outline" shareTitle="Comment"></pinterest-button>
+      <pinterest-button
+        class="share-button--outline"
+        v-bind:isBlank="false"
+        shareText="Twiiter share good work"
+        shareTitle="Comment"
+        btnText
+      ></pinterest-button>
+      <pinterest-button class="share-button--outline" shareTitle="Comment" v-bind:hasIcon="false"></pinterest-button>
+      <pinterest-button class="share-button--circle share-button--outline" shareTitle="Comment"></pinterest-button>
+      <pinterest-button
+        class="share-button--circle share-button--outline"
+        shareTitle="Comment"
+        btnText
+      ></pinterest-button>
+      <pinterest-button
+        class="share-button--circle share-button--outline"
+        shareTitle="Comment"
+        v-bind:hasIcon="false"
+      ></pinterest-button>
+    </div>
+    <div class="share-buttons-group">
+      <reddit-button shareTitle="Comment"></reddit-button>
+      <reddit-button
+        v-bind:isBlank="false"
+        shareText="Twiiter share good work"
+        shareTitle="Comment"
+        btnText
+      ></reddit-button>
+      <reddit-button v-bind:hasIcon="false" shareTitle="Comment"></reddit-button>
+      <reddit-button class="share-button--circle" shareTitle="Comment"></reddit-button>
+      <reddit-button class="share-button--circle" shareTitle="Comment" btnText></reddit-button>
+      <reddit-button class="share-button--circle" shareTitle="Comment" v-bind:hasIcon="false"></reddit-button>
+      <reddit-button class="share-button--outline" shareTitle="Comment"></reddit-button>
+      <reddit-button
+        class="share-button--outline"
+        v-bind:isBlank="false"
+        shareText="Twiiter share good work"
+        shareTitle="Comment"
+        btnText
+      ></reddit-button>
+      <reddit-button class="share-button--outline" shareTitle="Comment" v-bind:hasIcon="false"></reddit-button>
+      <reddit-button class="share-button--circle share-button--outline" shareTitle="Comment"></reddit-button>
+      <reddit-button
+        class="share-button--circle share-button--outline"
+        shareTitle="Comment"
+        btnText
+      ></reddit-button>
+      <reddit-button
+        class="share-button--circle share-button--outline"
+        shareTitle="Comment"
+        v-bind:hasIcon="false"
+      ></reddit-button>
+    </div>
+    <div class="share-buttons-group">
+      <pocket-button shareTitle="Comment"></pocket-button>
+      <pocket-button
+        v-bind:isBlank="false"
+        shareText="Twiiter share good work"
+        shareTitle="Comment"
+        btnText
+      ></pocket-button>
+      <pocket-button v-bind:hasIcon="false" shareTitle="Comment"></pocket-button>
+      <pocket-button class="share-button--circle" shareTitle="Comment"></pocket-button>
+      <pocket-button class="share-button--circle" shareTitle="Comment" btnText></pocket-button>
+      <pocket-button class="share-button--circle" shareTitle="Comment" v-bind:hasIcon="false"></pocket-button>
+      <pocket-button class="share-button--outline" shareTitle="Comment"></pocket-button>
+      <pocket-button
+        class="share-button--outline"
+        v-bind:isBlank="false"
+        shareText="Twiiter share good work"
+        shareTitle="Comment"
+        btnText
+      ></pocket-button>
+      <pocket-button class="share-button--outline" shareTitle="Comment" v-bind:hasIcon="false"></pocket-button>
+      <pocket-button class="share-button--circle share-button--outline" shareTitle="Comment"></pocket-button>
+      <pocket-button
+        class="share-button--circle share-button--outline"
+        shareTitle="Comment"
+        btnText
+      ></pocket-button>
+      <pocket-button
+        class="share-button--circle share-button--outline"
+        shareTitle="Comment"
+        v-bind:hasIcon="false"
+      ></pocket-button>
+    </div>
+    <div class="share-buttons-group">
+      <xing-button shareTitle="Comment"></xing-button>
+      <xing-button
+        v-bind:isBlank="false"
+        shareText="Twiiter share good work"
+        shareTitle="Comment"
+        btnText
+      ></xing-button>
+      <xing-button v-bind:hasIcon="false" shareTitle="Comment"></xing-button>
+      <xing-button class="share-button--circle" shareTitle="Comment"></xing-button>
+      <xing-button class="share-button--circle" shareTitle="Comment" btnText></xing-button>
+      <xing-button class="share-button--circle" shareTitle="Comment" v-bind:hasIcon="false"></xing-button>
+      <xing-button class="share-button--outline" shareTitle="Comment"></xing-button>
+      <xing-button
+        class="share-button--outline"
+        v-bind:isBlank="false"
+        shareText="Twiiter share good work"
+        shareTitle="Comment"
+        btnText
+      ></xing-button>
+      <xing-button class="share-button--outline" shareTitle="Comment" v-bind:hasIcon="false"></xing-button>
+      <xing-button class="share-button--circle share-button--outline" shareTitle="Comment"></xing-button>
+      <xing-button class="share-button--circle share-button--outline" shareTitle="Comment" btnText></xing-button>
+      <xing-button
+        class="share-button--circle share-button--outline"
+        shareTitle="Comment"
+        v-bind:hasIcon="false"
+      ></xing-button>
+    </div>
+    <div class="share-buttons-group">
+      <odnoklassniki-button shareTitle="Comment"></odnoklassniki-button>
+      <odnoklassniki-button
+        v-bind:isBlank="false"
+        shareText="Twiiter share good work"
+        shareTitle="Comment"
+        btnText
+      ></odnoklassniki-button>
+      <odnoklassniki-button v-bind:hasIcon="false" shareTitle="Comment"></odnoklassniki-button>
+      <odnoklassniki-button class="share-button--circle" shareTitle="Comment"></odnoklassniki-button>
+      <odnoklassniki-button class="share-button--circle" shareTitle="Comment" btnText></odnoklassniki-button>
+      <odnoklassniki-button
+        class="share-button--circle"
+        shareTitle="Comment"
+        v-bind:hasIcon="false"
+      ></odnoklassniki-button>
+      <odnoklassniki-button class="share-button--outline" shareTitle="Comment"></odnoklassniki-button>
+      <odnoklassniki-button
+        class="share-button--outline"
+        v-bind:isBlank="false"
+        shareText="Twiiter share good work"
+        shareTitle="Comment"
+        btnText
+      ></odnoklassniki-button>
+      <odnoklassniki-button
+        class="share-button--outline"
+        shareTitle="Comment"
+        v-bind:hasIcon="false"
+      ></odnoklassniki-button>
+      <odnoklassniki-button class="share-button--circle share-button--outline" shareTitle="Comment"></odnoklassniki-button>
+      <odnoklassniki-button
+        class="share-button--circle share-button--outline"
+        shareTitle="Comment"
+        btnText
+      ></odnoklassniki-button>
+      <odnoklassniki-button
+        class="share-button--circle share-button--outline"
+        shareTitle="Comment"
+        v-bind:hasIcon="false"
+      ></odnoklassniki-button>
+    </div>
   </div>
 </template>
 
@@ -262,6 +462,12 @@ import EvernoteButton from "./components/EvernoteButton";
 import VkontakteButton from "./components/VkontakteButton";
 import FacebookButton from "./components/FacebookButton";
 import LinkedInButton from "./components/LinkedInButton";
+import TumblrButton from "./components/TumblrButton";
+import PinterestButton from "./components/PinterestButton";
+import RedditButton from "./components/RedditButton";
+import PocketButton from "./components/PocketButton";
+import XingButton from "./components/XingButton";
+import OdnoklassnikiButton from "./components/OdnoklassnikiButton";
 
 export default {
   name: "app-share-buttons",
@@ -275,7 +481,13 @@ export default {
     EvernoteButton,
     VkontakteButton,
     FacebookButton,
-    LinkedInButton
+    LinkedInButton,
+    TumblrButton,
+    PinterestButton,
+    RedditButton,
+    PocketButton,
+    XingButton,
+    OdnoklassnikiButton
   }
 };
 </script>

src/components/OdnoklassnikiButton.vue

@@ -0,0 +1,69 @@
+<template>
+  <button
+    class="share-button share-button--odnoklassniki"
+    type="button"
+    :class="className"
+    :shareUrl="shareUrl"
+    :shareTitle="shareTitle"
+    :shareDescription="shareDescription"
+    :sharePic="sharePic"
+    :btnText="btnText"
+    :windowWidth="windowWidth"
+    :windowHeight="windowHeight"
+    :hasIcon="hasIcon"
+    :isBlank="isBlank"
+    @click="openShareWindow"
+  >
+    <icon iconName="Odnoklassniki" class="share-button__icon" v-if="hasIcon === true">
+      <path
+        d="M14.505 17.44c1.275-.29 2.493-.794 3.6-1.49.834-.558 1.058-1.686.5-2.52-.536-.802-1.604-1.044-2.435-.553-2.55 1.595-5.79 1.595-8.34 0-.847-.534-1.965-.28-2.5.565 0 .002 0 .004-.002.005-.534.847-.28 1.966.567 2.5l.002.002c1.105.695 2.322 1.2 3.596 1.488l-3.465 3.465c-.707.695-.72 1.83-.028 2.537l.03.03c.344.354.81.53 1.274.53.465 0 .93-.176 1.275-.53L12 20.065l3.404 3.406c.72.695 1.87.676 2.566-.045.678-.703.678-1.818 0-2.52l-3.465-3.466zM12 12.388c3.42-.004 6.19-2.774 6.195-6.193C18.195 2.78 15.415 0 12 0S5.805 2.78 5.805 6.197c.005 3.42 2.776 6.19 6.195 6.192zm0-8.757c1.416.002 2.563 1.15 2.564 2.565 0 1.416-1.148 2.563-2.564 2.565-1.415-.002-2.562-1.148-2.565-2.564C9.437 4.78 10.585 3.633 12 3.63z"
+      />
+    </icon>
+    <span class="share-button__text" v-if="btnText">{{btnText}}</span>
+  </button>
+</template>
+ 
+<script>
+import Icon from "./icon/Icon.vue";
+import {
+  getDocumentHref,
+  getDocumentTitle,
+  eventEmit,
+  createWindow
+} from "../helpers";
+
+export default {
+  name: "OdnoklassnikiShareButton",
+  components: { Icon },
+  props: {
+    className: { type: String },
+    shareUrl: { type: String, default: getDocumentHref },
+    shareTitle: { type: String, default: "" },
+    shareDescription: { type: String, default: getDocumentTitle },
+    sharePic: { type: String, default: "" },
+    btnText: { type: String, default: "Odnoklassniki" },
+    windowWidth: { type: Number },
+    windowHeight: { type: Number },
+    hasIcon: { type: Boolean, default: true },
+    isBlank: { type: Boolean, default: true }
+  },
+  methods: {
+    openShareWindow: function() {
+      eventEmit(this, { name: "Odnoklassniki" });
+      const configWindow = createWindow();
+      const url = `https://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=${encodeURIComponent(
+        this.$props.shareUrl
+      )}&st.comments=${encodeURIComponent(this.$props.shareTitle)}`;
+
+      return this.$props.isBlank
+        ? window.open(url, "__blank")
+        : window.open(url, "Share this", configWindow);
+    }
+  }
+};
+</script>
+
+<style>
+@import "../style/index.css";
+@import "../style/odnoklassnikiButton.css";
+</style>

src/components/PinterestButton.vue

@@ -0,0 +1,71 @@
+<template>
+  <button
+    class="share-button share-button--pinterest"
+    type="button"
+    :class="className"
+    :shareUrl="shareUrl"
+    :shareTitle="shareTitle"
+    :shareDescription="shareDescription"
+    :sharePic="sharePic"
+    :btnText="btnText"
+    :windowWidth="windowWidth"
+    :windowHeight="windowHeight"
+    :hasIcon="hasIcon"
+    :isBlank="isBlank"
+    @click="openShareWindow"
+  >
+    <icon iconName="Pinterest" class="share-button__icon" v-if="hasIcon === true">
+      <path
+        d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"
+      />
+    </icon>
+    <span class="share-button__text" v-if="btnText">{{btnText}}</span>
+  </button>
+</template>
+ 
+<script>
+import Icon from "./icon/Icon.vue";
+import {
+  getDocumentHref,
+  getDocumentTitle,
+  eventEmit,
+  createWindow
+} from "../helpers";
+
+export default {
+  name: "PinterestShareButton",
+  components: { Icon },
+  props: {
+    className: { type: String },
+    shareUrl: { type: String, default: getDocumentHref },
+    shareTitle: { type: String, default: "" },
+    shareDescription: { type: String, default: getDocumentTitle },
+    sharePic: { type: String, default: "" },
+    btnText: { type: String, default: "Pinterest" },
+    windowWidth: { type: Number },
+    windowHeight: { type: Number },
+    hasIcon: { type: Boolean, default: true },
+    isBlank: { type: Boolean, default: true }
+  },
+  methods: {
+    openShareWindow: function() {
+      eventEmit(this, { name: "Pinterest" });
+      const configWindow = createWindow();
+      const url = `https://www.pinterest.com/pin/create/button/?canonicalUrl=${encodeURIComponent(
+        this.$props.shareUrl
+      )}&description=${encodeURIComponent(
+        this.$props.shareDescription
+      )}&media=${encodeURIComponent(this.$props.sharePic)}`;
+
+      return this.$props.isBlank
+        ? window.open(url, "__blank")
+        : window.open(url, "Share this", configWindow);
+    }
+  }
+};
+</script>
+
+<style>
+@import "../style/index.css";
+@import "../style/pinterestButton.css";
+</style>

src/components/PocketButton.vue

@@ -0,0 +1,69 @@
+<template>
+  <button
+    class="share-button share-button--pocket"
+    type="button"
+    :class="className"
+    :shareUrl="shareUrl"
+    :shareTitle="shareTitle"
+    :shareDescription="shareDescription"
+    :sharePic="sharePic"
+    :btnText="btnText"
+    :windowWidth="windowWidth"
+    :windowHeight="windowHeight"
+    :hasIcon="hasIcon"
+    :isBlank="isBlank"
+    @click="openShareWindow"
+  >
+    <icon iconName="Pocket" class="share-button__icon" v-if="hasIcon === true">
+      <path
+        d="M18.813 10.259l-5.646 5.419c-.32.305-.73.458-1.141.458-.41 0-.821-.153-1.141-.458l-5.646-5.419c-.657-.628-.677-1.671-.049-2.326.63-.657 1.671-.679 2.325-.05l4.511 4.322 4.517-4.322c.66-.631 1.697-.607 2.326.049.631.645.615 1.695-.045 2.326l-.011.001zm5.083-7.546c-.299-.858-1.125-1.436-2.041-1.436H2.179c-.9 0-1.717.564-2.037 1.405-.094.25-.142.511-.142.774v7.245l.084 1.441c.348 3.277 2.047 6.142 4.682 8.139.045.036.094.07.143.105l.03.023c1.411 1.03 2.989 1.728 4.694 2.072.786.158 1.591.24 2.389.24.739 0 1.481-.067 2.209-.204.088-.029.176-.045.264-.06.023 0 .049-.015.074-.029 1.633-.36 3.148-1.036 4.508-2.025l.029-.031.135-.105c2.627-1.995 4.324-4.862 4.686-8.148L24 10.678V3.445c0-.251-.031-.5-.121-.742l.017.01z"
+      />
+    </icon>
+    <span class="share-button__text" v-if="btnText">{{btnText}}</span>
+  </button>
+</template>
+ 
+<script>
+import Icon from "./icon/Icon.vue";
+import {
+  getDocumentHref,
+  getDocumentTitle,
+  eventEmit,
+  createWindow
+} from "../helpers";
+
+export default {
+  name: "PocketShareButton",
+  components: { Icon },
+  props: {
+    className: { type: String },
+    shareUrl: { type: String, default: getDocumentHref },
+    shareTitle: { type: String, default: "" },
+    shareDescription: { type: String, default: getDocumentTitle },
+    sharePic: { type: String, default: "" },
+    btnText: { type: String, default: "Pocket" },
+    windowWidth: { type: Number },
+    windowHeight: { type: Number },
+    hasIcon: { type: Boolean, default: true },
+    isBlank: { type: Boolean, default: true }
+  },
+  methods: {
+    openShareWindow: function() {
+      eventEmit(this, { name: "Pocket" });
+      const configWindow = createWindow();
+      const url = `https://getpocket.com/edit?url=${encodeURIComponent(
+        this.$props.shareUrl
+      )}`;
+
+      return this.$props.isBlank
+        ? window.open(url, "__blank")
+        : window.open(url, "Share this", configWindow);
+    }
+  }
+};
+</script>
+
+<style>
+@import "../style/index.css";
+@import "../style/pocketButton.css";
+</style>

src/components/RedditButton.vue

@@ -0,0 +1,69 @@
+<template>
+  <button
+    class="share-button share-button--reddit"
+    type="button"
+    :class="className"
+    :shareUrl="shareUrl"
+    :shareTitle="shareTitle"
+    :shareDescription="shareDescription"
+    :sharePic="sharePic"
+    :btnText="btnText"
+    :windowWidth="windowWidth"
+    :windowHeight="windowHeight"
+    :hasIcon="hasIcon"
+    :isBlank="isBlank"
+    @click="openShareWindow"
+  >
+    <icon iconName="Reddit" class="share-button__icon" v-if="hasIcon === true">
+      <path
+        d="M2.204 14.049c-.06.276-.091.56-.091.847 0 3.443 4.402 6.249 9.814 6.249 5.41 0 9.812-2.804 9.812-6.249 0-.274-.029-.546-.082-.809l-.015-.032c-.021-.055-.029-.11-.029-.165-.302-1.175-1.117-2.241-2.296-3.103-.045-.016-.088-.039-.126-.07-.026-.02-.045-.042-.067-.064-1.792-1.234-4.356-2.008-7.196-2.008-2.815 0-5.354.759-7.146 1.971-.014.018-.029.033-.049.049-.039.033-.084.06-.13.075-1.206.862-2.042 1.937-2.354 3.123 0 .058-.014.114-.037.171l-.008.015zm9.773 5.441c-1.794 0-3.057-.389-3.863-1.197-.173-.174-.173-.457 0-.632.176-.165.46-.165.635 0 .63.629 1.685.943 3.228.943 1.542 0 2.591-.3 3.219-.929.165-.164.45-.164.629 0 .165.18.165.465 0 .645-.809.808-2.065 1.198-3.862 1.198l.014-.028zm-3.606-7.573c-.914 0-1.677.765-1.677 1.677 0 .91.763 1.65 1.677 1.65s1.651-.74 1.651-1.65c0-.912-.739-1.677-1.651-1.677zm7.233 0c-.914 0-1.678.765-1.678 1.677 0 .91.764 1.65 1.678 1.65s1.651-.74 1.651-1.65c0-.912-.739-1.677-1.651-1.677zm4.548-1.595c1.037.833 1.8 1.821 2.189 2.904.45-.336.719-.864.719-1.449 0-1.002-.815-1.816-1.818-1.816-.399 0-.778.129-1.09.363v-.002zM2.711 9.963c-1.003 0-1.817.816-1.817 1.818 0 .543.239 1.048.644 1.389.401-1.079 1.172-2.053 2.213-2.876-.302-.21-.663-.329-1.039-.329v-.002zm9.217 12.079c-5.906 0-10.709-3.205-10.709-7.142 0-.275.023-.544.068-.809C.494 13.598 0 12.729 0 11.777c0-1.496 1.227-2.713 2.725-2.713.674 0 1.303.246 1.797.682 1.856-1.191 4.357-1.941 7.112-1.992l1.812-5.524.404.095s.016 0 .016.002l4.223.993c.344-.798 1.138-1.36 2.065-1.36 1.229 0 2.231 1.004 2.231 2.234 0 1.232-1.003 2.234-2.231 2.234s-2.23-1.004-2.23-2.23l-3.851-.912-1.467 4.477c2.65.105 5.047.854 6.844 2.021.494-.464 1.144-.719 1.833-.719 1.498 0 2.718 1.213 2.718 2.711 0 .987-.54 1.886-1.378 2.365.029.255.059.494.059.749-.015 3.938-4.806 7.143-10.72 7.143l-.034.009zm8.179-19.187c-.74 0-1.34.599-1.34 1.338 0 .738.6 1.34 1.34 1.34.732 0 1.33-.6 1.33-1.334 0-.733-.598-1.332-1.347-1.332l.017-.012z"
+      />
+    </icon>
+    <span class="share-button__text" v-if="btnText">{{btnText}}</span>
+  </button>
+</template>
+ 
+<script>
+import Icon from "./icon/Icon.vue";
+import {
+  getDocumentHref,
+  getDocumentTitle,
+  eventEmit,
+  createWindow
+} from "../helpers";
+
+export default {
+  name: "RedditShareButton",
+  components: { Icon },
+  props: {
+    className: { type: String },
+    shareUrl: { type: String, default: getDocumentHref },
+    shareTitle: { type: String, default: "" },
+    shareDescription: { type: String, default: getDocumentTitle },
+    sharePic: { type: String, default: "" },
+    btnText: { type: String, default: "Reddit" },
+    windowWidth: { type: Number },
+    windowHeight: { type: Number },
+    hasIcon: { type: Boolean, default: true },
+    isBlank: { type: Boolean, default: true }
+  },
+  methods: {
+    openShareWindow: function() {
+      eventEmit(this, { name: "Reddit" });
+      const configWindow = createWindow();
+      const url = `https://reddit.com/submit?url=${encodeURIComponent(
+        this.$props.shareUrl
+      )}&title=${encodeURIComponent(this.$props.shareTitle)}`;
+
+      return this.$props.isBlank
+        ? window.open(url, "__blank")
+        : window.open(url, "Share this", configWindow);
+    }
+  }
+};
+</script>
+
+<style>
+@import "../style/index.css";
+@import "../style/redditButton.css";
+</style>

src/components/TumblrButton.vue

@@ -0,0 +1,73 @@
+<template>
+  <button
+    class="share-button share-button--tumblr"
+    type="button"
+    :class="className"
+    :shareUrl="shareUrl"
+    :shareTitle="shareTitle"
+    :shareDescription="shareDescription"
+    :sharePic="sharePic"
+    :btnText="btnText"
+    :windowWidth="windowWidth"
+    :windowHeight="windowHeight"
+    :hasIcon="hasIcon"
+    :isBlank="isBlank"
+    @click="openShareWindow"
+  >
+    <icon iconName="Tumblr" class="share-button__icon" v-if="hasIcon === true">
+      <path
+        d="M14.563 24c-5.093 0-7.031-3.756-7.031-6.411V9.747H5.116V6.648c3.63-1.313 4.512-4.596 4.71-6.469C9.84.051 9.941 0 9.999 0h3.517v6.114h4.801v3.633h-4.82v7.47c.016 1.001.375 2.371 2.207 2.371h.09c.631-.02 1.486-.205 1.936-.419l1.156 3.425c-.436.636-2.4 1.374-4.156 1.404h-.178l.011.002z"
+      />
+    </icon>
+    <span class="share-button__text" v-if="btnText">{{btnText}}</span>
+  </button>
+</template>
+ 
+<script>
+import Icon from "./icon/Icon.vue";
+import {
+  getDocumentHref,
+  getDocumentTitle,
+  eventEmit,
+  createWindow
+} from "../helpers";
+
+export default {
+  name: "TumblrShareButton",
+  components: { Icon },
+  props: {
+    className: { type: String },
+    shareUrl: { type: String, default: getDocumentHref },
+    shareTitle: { type: String, default: "" },
+    shareDescription: { type: String, default: getDocumentTitle },
+    sharePic: { type: String, default: "" },
+    btnText: { type: String, default: "Tumblr" },
+    windowWidth: { type: Number },
+    windowHeight: { type: Number },
+    hasIcon: { type: Boolean, default: true },
+    isBlank: { type: Boolean, default: true }
+  },
+  methods: {
+    openShareWindow: function() {
+      eventEmit(this, { name: "Tumblr" });
+      const configWindow = createWindow();
+      const url = `https://www.tumblr.com/widgets/share/tool?canonicalUrl=${encodeURIComponent(
+        this.$props.shareUrl
+      )}&title=${encodeURIComponent(
+        this.$props.shareTitle
+      )}&caption=${encodeURIComponent(
+        this.$props.shareDescription
+      )}&posttype=link`;
+
+      return this.$props.isBlank
+        ? window.open(url, "__blank")
+        : window.open(url, "Share this", configWindow);
+    }
+  }
+};
+</script>
+
+<style>
+@import "../style/index.css";
+@import "../style/tumblrButton.css";
+</style>

src/components/XingButton.vue

@@ -0,0 +1,69 @@
+<template>
+  <button
+    class="share-button share-button--xing"
+    type="button"
+    :class="className"
+    :shareUrl="shareUrl"
+    :shareTitle="shareTitle"
+    :shareDescription="shareDescription"
+    :sharePic="sharePic"
+    :btnText="btnText"
+    :windowWidth="windowWidth"
+    :windowHeight="windowHeight"
+    :hasIcon="hasIcon"
+    :isBlank="isBlank"
+    @click="openShareWindow"
+  >
+    <icon iconName="Xing" class="share-button__icon" v-if="hasIcon === true">
+      <path
+        d="M23.784 18.24c.287.142.287.267 0 .374l-11.357 5.223c-.287.145-.57.145-.854 0L.213 18.614c-.284-.107-.284-.232 0-.375l2.722-1.23c.284-.14.57-.14.852 0l7.787 3.573c.285.14.57.14.854 0l7.787-3.574c.283-.14.568-.14.852 0l2.717 1.23zm0-6.454c.287.143.287.285 0 .426L12.427 17.44c-.287.104-.57.104-.854 0L.213 12.21c-.284-.143-.284-.284 0-.426l2.722-1.227c.284-.144.57-.144.852 0l7.787 3.57c.285.144.57.144.854 0l7.787-3.57c.283-.144.568-.144.852 0l2.717 1.226zM.214 5.76c-.285-.143-.285-.267 0-.375L11.574.16c.283-.14.57-.14.852 0l11.358 5.23c.287.107.287.232 0 .375l-11.357 5.223c-.287.143-.57.143-.854 0L.213 5.76z"
+      />
+    </icon>
+    <span class="share-button__text" v-if="btnText">{{btnText}}</span>
+  </button>
+</template>
+ 
+<script>
+import Icon from "./icon/Icon.vue";
+import {
+  getDocumentHref,
+  getDocumentTitle,
+  eventEmit,
+  createWindow
+} from "../helpers";
+
+export default {
+  name: "XingShareButton",
+  components: { Icon },
+  props: {
+    className: { type: String },
+    shareUrl: { type: String, default: getDocumentHref },
+    shareTitle: { type: String, default: "" },
+    shareDescription: { type: String, default: getDocumentTitle },
+    sharePic: { type: String, default: "" },
+    btnText: { type: String, default: "Xing" },
+    windowWidth: { type: Number },
+    windowHeight: { type: Number },
+    hasIcon: { type: Boolean, default: true },
+    isBlank: { type: Boolean, default: true }
+  },
+  methods: {
+    openShareWindow: function() {
+      eventEmit(this, { name: "Xing" });
+      const configWindow = createWindow();
+      const url = `https://www.xing.com/social_plugins/share?url=${encodeURIComponent(
+        this.$props.shareUrl
+      )}`;
+
+      return this.$props.isBlank
+        ? window.open(url, "__blank")
+        : window.open(url, "Share this", configWindow);
+    }
+  }
+};
+</script>
+
+<style>
+@import "../style/index.css";
+@import "../style/xingButton.css";
+</style>

src/components/icon/Icon.vue

@@ -3,7 +3,7 @@
     xmlns="http://www.w3.org/2000/svg"
     :width="width"
     :height="height"
-    :viewBox="`0 0 24 24`"
+    :viewBox="`0 0 ${viewBoxWidth} ${viewBoxHeight}`"
     :aria-labelledby="iconName"
     role="presentation"
   >
@@ -16,6 +16,8 @@
 export default {
   props: {
     iconName: { type: String },
+    viewBoxWidth: { type: [Number, String], default: 24 },
+    viewBoxHeight: { type: [Number, String], default: 24 },
     width: { type: [Number, String], default: 20 },
     height: { type: [Number, String], default: 20 }
   }

src/style/odnoklassnikiButton.css

@@ -0,0 +1,44 @@
+/* Odnoklassniki */
+.share-button--odnoklassniki {
+  background-color: hsla(24, 91%, 53%, 1);
+}
+
+.share-button--odnoklassniki:focus {
+  box-shadow: 0 0 0 3px hsla(24, 85%, 78%, 0.4);
+}
+
+.share-button--odnoklassniki:hover {
+  background-color: hsla(24, 91%, 53%, 0.9);
+}
+
+.share-button--odnoklassniki .share-button__icon path {
+  fill: #fff;
+}
+
+.share-button--odnoklassniki.share-button--outline {
+  background-color: transparent;
+  border-color: hsla(24, 91%, 53%, 1);
+}
+
+.share-button--odnoklassniki.share-button--outline:hover {
+  background-color: transparent;
+  border-color: hsla(24, 91%, 53%, 0.9);
+}
+
+.share-button--odnoklassniki.share-button--outline .share-button__text {
+  color: hsla(24, 91%, 53%, 1);
+}
+
+.share-button--odnoklassniki.share-button--outline:hover .share-button__text {
+  color: hsla(24, 91%, 53%, 0.9);
+}
+
+.share-button--odnoklassniki.share-button--outline .share-button__icon path {
+  fill: hsla(24, 91%, 53%, 1);
+}
+
+.share-button--odnoklassniki.share-button--outline:hover
+  .share-button__icon
+  path {
+  fill: hsla(24, 91%, 53%, 0.9);
+}

src/style/pinterestButton.css

@@ -0,0 +1,42 @@
+/* Pinterest */
+.share-button--pinterest {
+  background-color: hsla(353, 92%, 39%, 1);
+}
+
+.share-button--pinterest:focus {
+  box-shadow: 0 0 0 3px hsla(353, 86%, 64%, 0.4);
+}
+
+.share-button--pinterest:hover {
+  background-color: hsla(353, 92%, 39%, 0.9);
+}
+
+.share-button--pinterest .share-button__icon path {
+  fill: #fff;
+}
+
+.share-button--pinterest.share-button--outline {
+  background-color: transparent;
+  border-color: hsla(353, 92%, 39%, 1);
+}
+
+.share-button--pinterest.share-button--outline:hover {
+  background-color: transparent;
+  border-color: hsla(353, 92%, 39%, 0.9);
+}
+
+.share-button--pinterest.share-button--outline .share-button__text {
+  color: hsla(353, 92%, 39%, 1);
+}
+
+.share-button--pinterest.share-button--outline:hover .share-button__text {
+  color: hsla(353, 92%, 39%, 0.9);
+}
+
+.share-button--pinterest.share-button--outline .share-button__icon path {
+  fill: hsla(353, 92%, 39%, 1);
+}
+
+.share-button--pinterest.share-button--outline:hover .share-button__icon path {
+  fill: hsla(353, 92%, 39%, 0.9);
+}

src/style/pocketButton.css

@@ -0,0 +1,42 @@
+/* Pocket */
+.share-button--pocket {
+  background-color: hsla(352, 85%, 59%, 1);
+}
+
+.share-button--pocket:focus {
+  box-shadow: 0 0 0 3px hsla(352, 79%, 84%, 0.4);
+}
+
+.share-button--pocket:hover {
+  background-color: hsla(352, 85%, 59%, 0.9);
+}
+
+.share-button--pocket .share-button__icon path {
+  fill: #fff;
+}
+
+.share-button--pocket.share-button--outline {
+  background-color: transparent;
+  border-color: hsla(352, 85%, 59%, 1);
+}
+
+.share-button--pocket.share-button--outline:hover {
+  background-color: transparent;
+  border-color: hsla(352, 85%, 59%, 0.9);
+}
+
+.share-button--pocket.share-button--outline .share-button__text {
+  color: hsla(352, 85%, 59%, 1);
+}
+
+.share-button--pocket.share-button--outline:hover .share-button__text {
+  color: hsla(352, 85%, 59%, 0.9);
+}
+
+.share-button--pocket.share-button--outline .share-button__icon path {
+  fill: hsla(352, 85%, 59%, 1);
+}
+
+.share-button--pocket.share-button--outline:hover .share-button__icon path {
+  fill: hsla(352, 85%, 59%, 0.9);
+}

src/style/redditButton.css

@@ -0,0 +1,42 @@
+/* Reddit */
+.share-button--reddit {
+  background-color: hsla(16, 100%, 50%, 1);
+}
+
+.share-button--reddit:focus {
+  box-shadow: 0 0 0 3px hsla(16, 94%, 75%, 0.4);
+}
+
+.share-button--reddit:hover {
+  background-color: hsla(16, 100%, 50%, 0.9);
+}
+
+.share-button--reddit .share-button__icon path {
+  fill: #fff;
+}
+
+.share-button--reddit.share-button--outline {
+  background-color: transparent;
+  border-color: hsla(16, 100%, 50%, 1);
+}
+
+.share-button--reddit.share-button--outline:hover {
+  background-color: transparent;
+  border-color: hsla(16, 100%, 50%, 0.9);
+}
+
+.share-button--reddit.share-button--outline .share-button__text {
+  color: hsla(16, 100%, 50%, 1);
+}
+
+.share-button--reddit.share-button--outline:hover .share-button__text {
+  color: hsla(16, 100%, 50%, 0.9);
+}
+
+.share-button--reddit.share-button--outline .share-button__icon path {
+  fill: hsla(16, 100%, 50%, 1);
+}
+
+.share-button--reddit.share-button--outline:hover .share-button__icon path {
+  fill: hsla(16, 100%, 50%, 0.9);
+}

src/style/tumblrButton.css

@@ -0,0 +1,42 @@
+/* Tumblr */
+.share-button--tumblr {
+  background-color: hsla(215, 27%, 29%, 1);
+}
+
+.share-button--tumblr:focus {
+  box-shadow: 0 0 0 3px hsla(215, 21%, 54%, 0.4);
+}
+
+.share-button--tumblr:hover {
+  background-color: hsla(215, 27%, 29%, 0.9);
+}
+
+.share-button--tumblr .share-button__icon path {
+  fill: #fff;
+}
+
+.share-button--tumblr.share-button--outline {
+  background-color: transparent;
+  border-color: hsla(215, 27%, 29%, 1);
+}
+
+.share-button--tumblr.share-button--outline:hover {
+  background-color: transparent;
+  border-color: hsla(215, 27%, 29%, 0.9);
+}
+
+.share-button--tumblr.share-button--outline .share-button__text {
+  color: hsla(215, 27%, 29%, 1);
+}
+
+.share-button--tumblr.share-button--outline:hover .share-button__text {
+  color: hsla(215, 27%, 29%, 0.9);
+}
+
+.share-button--tumblr.share-button--outline .share-button__icon path {
+  fill: hsla(215, 27%, 29%, 1);
+}
+
+.share-button--tumblr.share-button--outline:hover .share-button__icon path {
+  fill: hsla(215, 27%, 29%, 0.9);
+}

src/style/xingButton.css

@@ -0,0 +1,42 @@
+/* Xing */
+.share-button--xing {
+  background-color: hsla(181, 100%, 20%, 1);
+}
+
+.share-button--xing:focus {
+  box-shadow: 0 0 0 3px hsla(181, 94%, 45%, 0.4);
+}
+
+.share-button--xing:hover {
+  background-color: hsla(181, 100%, 20%, 0.9);
+}
+
+.share-button--xing .share-button__icon path {
+  fill: #fff;
+}
+
+.share-button--xing.share-button--outline {
+  background-color: transparent;
+  border-color: hsla(181, 100%, 20%, 1);
+}
+
+.share-button--xing.share-button--outline:hover {
+  background-color: transparent;
+  border-color: hsla(181, 100%, 20%, 0.9);
+}
+
+.share-button--xing.share-button--outline .share-button__text {
+  color: hsla(181, 100%, 20%, 1);
+}
+
+.share-button--xing.share-button--outline:hover .share-button__text {
+  color: hsla(181, 100%, 20%, 0.9);
+}
+
+.share-button--xing.share-button--outline .share-button__icon path {
+  fill: hsla(181, 100%, 20%, 1);
+}
+
+.share-button--xing.share-button--outline:hover .share-button__icon path {
+  fill: hsla(181, 100%, 20%, 0.9);
+}