Finished layout for Twitter button

src/App.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="share-buttons">
-    <twitter-button class="button-social--twitter" btnText="Twitter" pageUrl hasIcon></twitter-button>
+    <twitter-button></twitter-button>
+    <twitter-button v-bind:isBlank="false" shareText="Twiiter share good work" btnText></twitter-button>
+    <twitter-button v-bind:hasIcon="false"></twitter-button>
+    <twitter-button class="share-button--circle"></twitter-button>
+    <twitter-button class="share-button--circle" btnText></twitter-button>
+    <twitter-button class="share-button--circle" v-bind:hasIcon="false"></twitter-button>
+    <twitter-button class="share-button--circle share-button--outline"></twitter-button>
+    <twitter-button class="share-button--circle share-button--outline" btnText></twitter-button>
+    <twitter-button class="share-button--circle share-button--outline" v-bind:hasIcon="false"></twitter-button>
   </div>
 </template>
 
@@ -18,10 +26,5 @@ export default {
 <style>
 #app {
   font-family: "Avenir", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
 }
 </style>

src/components/TwitterButton.vue

@@ -1,33 +1,61 @@
 <template>
-  <button class="share-button" :class="className" @click="openShareWindow">
+  <button
-    <i class="share-button__icon">123</i>
+    class="share-button share-button--twitter"
+    type="button"
+    :class="className"
+    :pageUrl="pageUrl"
+    :shareText="shareText"
+    :btnText="btnText"
+    :hasIcon="hasIcon"
+    :isBlank="isBlank"
+    @click="openShareWindow"
+  >
+    <icon iconName="Twitter" class="share-button__icon" v-if="hasIcon === true">
+      <path
+        d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"
+      />
+    </icon>
     <span class="share-button__text" v-if="btnText">{{btnText}}</span>
   </button>
 </template>
  
 <script>
-import { getDocumentHref, eventEmit } from "../helpers";
+import Icon from "./icon/Icon.vue";
+import {
+  getDocumentHref,
+  getDocumentTitle,
+  eventEmit,
+  createWindow
+} from "../helpers";
+
 export default {
   name: "twitter-button",
+  components: { Icon },
   props: {
     className: { type: String },
     pageUrl: { type: String, deflate: getDocumentHref },
+    shareText: { type: String, default: getDocumentTitle },
     btnText: { type: String, default: "Twitter" },
-    hasIcon: { type: Boolean, default: true }
+    hasIcon: { type: Boolean, default: true },
+    isBlank: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow: function() {
-      console.log(eventEmit(this, { name: "qwee" }));
+      eventEmit(this, { name: "Twitter" });
-      const url =
+      const configWindow = createWindow();
-        "https://twitter.com/share?url=https://vuejs.org/&text=Super-test";
+      const url = `https://twitter.com/share?url=${this.$props.pageUrl}&text=${
-      // return window.open(url, "__blank");
+        this.$props.shareText
-      return window.open(
+      }`;
-        url,
+
-        "Share this",
+      return this.$props.isBlank
-        "width=500,height=700,left=100,top=200,toolbar=no,menubar=no,scrollbars=no"
+        ? window.open(url, "__blank")
-      );
+        : window.open(url, "Share this", configWindow);
     }
   }
 };
 </script>
 
+<style>
+@import "../style/index.css";
+@import "../style/twitterButton.css";
+</style>

src/components/icon/Icon.vue

@@ -0,0 +1,23 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="width"
+    :height="height"
+    :viewBox="`0 0 24 24`"
+    :aria-labelledby="iconName"
+    role="presentation"
+  >
+    <title lang="en">{{ iconName }} icon</title>
+    <slot></slot>
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    iconName: { type: String },
+    width: { type: [Number, String], default: 20 },
+    height: { type: [Number, String], default: 20 }
+  }
+};
+</script>

src/helpers/createWindow.js

@@ -0,0 +1,13 @@
+/**
+ * Create a sharing window.
+ *
+ * @param {number} width - Window width.
+ * @param {number} height - Window height.
+ * @param {string} params - Other window options.
+ * @returns {string} - Configuration string.
+ */
+export const createWindow = (width = 500, height = 500, params = "") => {
+  const left = screen.width / 2 - width / 2;
+  const top = screen.height / 2 - height / 2;
+  return `width=${width},height=${height},left=${left},top=${top},${params}`;
+};

src/helpers/documentData.js

@@ -0,0 +1,11 @@
+/**
+ * Get href for page.
+ *
+ * @returns {string} - Page href.
+ */
+export const getDocumentHref = () => document.location.href;
+
+/**
+ * Get title for page.
+ */
+export const getDocumentTitle = () => document.title;

src/helpers/href.js

@@ -1,6 +0,0 @@
-/**
- * Get href for page.
- *
- * @returns {string} - page href.
- */
-export const getDocumentHref = () => document.location.href;

src/helpers/index.js

@@ -1,2 +1,3 @@
-export { getDocumentHref } from "./href.js";
+export { getDocumentHref, getDocumentTitle } from "./documentData.js";
 export { eventEmit } from "./event";
+export { createWindow } from "./createWindow";

src/icons/facebook.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook icon</title><path fill="#ffffff" d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294H9.689v-3.621h3.129V8.41c0-3.099 1.894-4.785 4.659-4.785 1.325 0 2.464.097 2.796.141v3.24h-1.921c-1.5 0-1.792.721-1.792 1.771v2.311h3.584l-.465 3.63H16.56V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .593 23.408 0 22.676 0"/></svg>

src/icons/twitter-color.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter icon</title><path fill="#1ca0f1" d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>

src/icons/twitter.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter icon</title><path fill="#ffffff" d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>

src/style/index.css

@@ -0,0 +1,79 @@
+/* Base */
+.button-social * {
+  box-sizing: border-box;
+}
+
+.share-button {
+  display: inline-block;
+  min-height: 42px;
+  padding: 10px 12px;
+  margin: 4px;
+  color: #fff;
+  background-color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol";
+  font-weight: 400;
+  vertical-align: top;
+  user-select: none;
+  border: none;
+  border-radius: 4px;
+  box-shadow: none;
+  text-rendering: auto;
+  text-indent: 0px;
+  text-align: center;
+  letter-spacing: normal;
+  word-spacing: normal;
+  text-shadow: none;
+  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
+    border-color 0.3s ease-in-out;
+}
+
+.share-button:disabled {
+  opacity: 0.9;
+}
+
+.share-button:focus {
+  outline: none;
+}
+
+.share-button:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+
+.share-button:last-child {
+  margin-right: 0;
+}
+
+.share-button__icon {
+  display: inline-block;
+  margin: 0 7px;
+  padding: 0;
+  font-size: 0;
+  vertical-align: middle;
+}
+
+.share-button__icon:last-child {
+  margin: 0;
+}
+
+.share-button__text {
+  display: inline-block;
+  margin: 0 7px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+
+/* Circle */
+.share-button--circle {
+  min-width: 42px;
+  min-height: 42px;
+  padding: 10px;
+  border-radius: 42px;
+}
+
+/* Circle */
+.share-button--outline {
+  background-color: transparent;
+  border: 1px solid;
+}

src/style/twitterButton.css

@@ -0,0 +1,43 @@
+/* Twitter */
+.share-button--twitter {
+  background-color: hsla(203, 88%, 53%, 1);
+}
+
+.share-button--twitter:focus {
+  box-shadow: 0 0 0 3px hsla(203, 82%, 78%, 0.4);
+}
+
+.share-button--twitter:hover {
+  background-color: hsla(203, 89%, 53%, 0.9);
+}
+
+.share-button--twitter .share-button__icon path {
+  fill: #fff;
+}
+
+/* Circle */
+.share-button--twitter.share-button--outline {
+  background-color: transparent;
+  border-color: hsla(203, 89%, 53%, 1);
+}
+
+.share-button--twitter.share-button--outline:hover {
+  background-color: transparent;
+  border-color: hsla(203, 89%, 53%, 0.9);
+}
+
+.share-button--twitter.share-button--outline .share-button__text {
+  color: hsla(203, 89%, 53%, 1);
+}
+
+.share-button--twitter.share-button--outline:hover .share-button__text {
+  color: hsla(203, 89%, 53%, 0.9);
+}
+
+.share-button--twitter.share-button--outline .share-button__icon path {
+  fill: hsla(203, 89%, 53%, 1);
+}
+
+.share-button--twitter.share-button--outline:hover .share-button__icon path {
+  fill: hsla(203, 89%, 53%, 0.9);
+}