feat(tabs/share, icon): Add a linkedin share button

Many podcasts are targeted toward professionals who are always on LinkedIn. This change uses the
shareArticle endpoint of the LinkedIn API and adds a new icon and Channel component.

Author: grantfoster

src/components/icons/LinkedinIcon.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg role="img" width="30" height="30" viewBox="0 0 24 24">
+    <path :fill="color" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
+  </svg>
+</template>
+
+<script>
+export default {
+  props: ['color']
+}
+</script>

src/components/tabs/share/ShareChannels.vue

@@ -5,6 +5,7 @@
     <li id="tab-share--channels--pinterest"><channel-pinterest-component :text="shareText" :link="shareLink" :poster="sharePoster"></channel-pinterest-component></li>
     <li id="tab-share--channels--reddit"><channel-reddit-component :text="shareText" :link="shareLink"></channel-reddit-component></li>
     <li id="tab-share--channels--mail"><channel-mail-component :text="shareText" :subject="shareSubject"></channel-mail-component></li>
+    <li id="tab-share--channels--linkedin"><channel-linkedin-component :text="shareText" :link="shareLink"></channel-linkedin-component></li>
     <li id="tab-share--channels--embed" v-if="type !== 'show' && ((reference.config && reference.share) || reference.origin)">
       <channel-embed-component :color="theme.tabs.share.platform.button"></channel-embed-component>
     </li>
@@ -24,6 +25,7 @@
   import ChannelEmbedComponent from './channels/ChannelEmbed'
   import ChannelPinterestComponent from './channels/ChannelPinterest'
   import ChannelRedditComponent from './channels/ChannelReddit'
+  import ChannelLinkedinComponent from './channels/ChannelLinkedin'
 
   export default {
     props: ['type'],
@@ -133,7 +135,8 @@
       ChannelMailComponent,
       ChannelEmbedComponent,
       ChannelPinterestComponent,
-      ChannelRedditComponent
+      ChannelRedditComponent,
+      ChannelLinkedinComponent
     }
   }
 </script>

src/components/tabs/share/channels/ChannelLinkedin.vue

@@ -0,0 +1,33 @@
+<template>
+  <a :href="linkedinLink" class="channel-link" target="_blank">
+    <span class="channel-icon Linkedin" aria-hidden="true"><Linkedin-icon color="#fff"></Linkedin-icon></span>
+    <span class="visually-hidden">{{ $t('A11Y.SHARE_CHANNEL', { channel: 'Linkedin' }) }}</span>
+  </a>
+</template>
+
+<script>
+  import LinkedinIcon from 'icons/LinkedinIcon'
+  import { addQueryParameter } from 'utils/url'
+
+  const LINK = 'https://www.linkedin.com/shareArticle'
+
+  export default {
+    props: ['link', 'color', 'text'],
+    computed: {
+      linkedinLink () {
+        return addQueryParameter(LINK, { url: this.link, mini: true, summary: this.text })
+      }
+    },
+    components: {
+      LinkedinIcon
+    }
+  }
+</script>
+
+<style lang="scss">
+  $channel-color: #0077B5;
+
+  .channel-icon.Linkedin {
+    background-color: $channel-color;
+  }
+</style>