feat(files): adds files tab

cypress/integration/tab-files.spec.js

@@ -0,0 +1,45 @@
+/* eslint-env mocha */
+/* globals cy, expect */
+const { setState } = require('../helpers/state')
+const domSelectors = require('../selectors')
+
+describe('Files Tab', () => {
+  let selectors
+
+  beforeEach(cy.bootstrap)
+  beforeEach(() => {
+    selectors = domSelectors(cy)
+  })
+
+  describe('Audio Files', () => {
+    it('renders the audio container', function () {
+      cy.window().then(setState(this.episode, this.audio, this.show, this.runtime))
+      cy.tab('files')
+      selectors.tabs.files.container()
+      selectors.tabs.files.audio()
+    })
+
+    it('renders a list of audio files', function () {
+      cy.window().then(setState(this.episode, this.audio, this.show, this.runtime))
+      cy.tab('files')
+      selectors.tabs.files.container()
+      selectors.tabs.files.audio().get('.files-container--file').should('have.length', 2)
+    })
+
+    it('renders a copy link button', function () {
+      cy.window().then(setState(this.episode, this.audio, this.show, this.runtime))
+      cy.tab('files')
+      selectors.tabs.files.container()
+      selectors.tabs.files.audio().get('.files-container--file a').eq(0).should('have.attr', 'href', this.audio.audio[0].url)
+      selectors.tabs.files.audio().get('.files-container--file a').eq(1).should('have.attr', 'href', this.audio.audio[1].url)
+    })
+
+    it('renders a copy button', function () {
+      cy.window().then(setState(this.episode, this.audio, this.show, this.runtime))
+      cy.tab('files')
+      selectors.tabs.files.container()
+      selectors.tabs.files.audio().get('.files-container--file button').eq(0)
+      selectors.tabs.files.audio().get('.files-container--file button').eq(1)
+    })
+  })
+})

cypress/integration/visible-components.spec.js

@@ -8,7 +8,7 @@ const domSelectors = require('../selectors')
 const components = exclude => [
   'tabInfo',
   'tabChapters',
-  'tabDownload',
+  'tabFiles',
   'tabAudio',
   'tabShare',
   'poster',
@@ -44,8 +44,8 @@ describe('Visible Components', () => {
       selectors.tabs.audio.header()
     })
 
-    it('renders the download tab', function () {
-      selectors.tabs.download.header()
+    it('renders the files tab', function () {
+      selectors.tabs.files.header()
     })
 
     it('renders the share tab', function () {
@@ -89,8 +89,8 @@ describe('Visible Components', () => {
       tab: 'chapters',
       key: 'tabChapters'
     }, {
-      tab: 'download',
-      key: 'tabDownload'
+      tab: 'files',
+      key: 'tabFiles'
     }, {
       tab: 'audio',
       key: 'tabAudio'

cypress/selectors/index.js

@@ -5,15 +5,15 @@ const header = require('./header')
 // Tabs
 const audio = require('./tabs/audio')
 const chapters = require('./tabs/chapters')
-const download = require('./tabs/download')
+const files = require('./tabs/files')
 const info = require('./tabs/info')
 const share = require('./tabs/share')
 
 module.exports = cy => Object.assign({}, controllbar(cy), progressbar(cy), header(cy), {
   tabs: {
     audio: audio(cy),
     chapters: chapters(cy),
-    download: download(cy),
+    files: files(cy),
     info: info(cy),
     share: share(cy)
   }

cypress/selectors/tabs/files.js

@@ -0,0 +1,5 @@
+module.exports = cy => ({
+  header: () => cy.get(`#tabs [rel="files"]`),
+  container: () => cy.get('#tab-files'),
+  audio: () => cy.get('#tab-files--audio')
+})

package.json

@@ -30,7 +30,8 @@
     "now-build": "npm run docs:prod && npm run subfont",
     "now-start": "serve dist/",
     "build:cdn": "npm run webpack:cdn && npm run subfont",
-    "dev": "node scripts/dev.js",
+    "docs": "node scripts/dev.js",
+    "dev": "npm run webpack:dev",
     "test": "npm run test:prepare && NODE_ENV=AVA nyc ava && nyc report --reporter=html",
     "test:ci": "npm run test:prepare && NODE_ENV=AVA nyc ava --tap | tap-xunit > reports/ava.xml && nyc report --reporter=lcov",
     "test:dev": "NODE_ENV=AVA ava --watch --fail-fast",

src/components/icons/FilesAudioIcon.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg :width="width || 25" :height="height || 25" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="16" cy="16" r="16" :fill="background"/>
+    <path d="M16 8.5V16.2333C15.6083 16.0917 15.1917 16 14.75 16C12.675 16 11 17.675 11 19.75C11 21.825 12.675 23.5 14.75 23.5C16.675 23.5 18.25 22.0417 18.4583 20.1667H18.5V11H21.8333V8.5H16Z" :fill="color || 'currentColor'"/>
+  </svg>
+</template>
+
+<script>
+  export default {
+    props: ['color', 'background', 'width', 'height']
+  }
+</script>
+

src/components/icons/icon-container.js

@@ -0,0 +1,19 @@
+import Vue from 'vue'
+import { mapState } from 'redux-vuex'
+
+export default iconComponent => Vue.component('icon', {
+  props: ['width', 'height'],
+
+  render: function (h) {
+    return h(iconComponent, {
+      props: {
+        color: this.theme.icon.color,
+        background: this.theme.icon.background,
+        width: this.width,
+        height: this.height
+      }
+    })
+  },
+
+  data: mapState('theme')
+})

src/components/shared/Button.vue

@@ -1,10 +1,10 @@
 <template>
-  <a v-if="type === 'link'" :href="href" class="input-button" :style="active ? activeStyle : style">
+  <a v-if="href" :href="href" class="input-button" :style="style">
     <span class="inner centered">
       <slot></slot>
     </span>
   </a>
-  <button v-else :style="active ? activeStyle : style" class="input-button" :disabled="disabled" @click="click ? click() : noop()">
+  <button v-else :style="style" class="input-button" :disabled="disabled" @click="click ? click() : noop()">
     <span class="inner centered">
       <slot></slot>
     </span>
@@ -16,23 +16,36 @@
   import { noop } from 'lodash'
 
   export default {
-    props: ['click', 'disabled', 'active', 'type', 'href'],
+    props: ['click', 'disabled', 'active', 'href', 'type'],
     data: mapState('theme'),
     computed: {
       style () {
-        return {
-          color: this.theme.button.color,
-          background: this.theme.button.background,
-          'border-color': this.theme.button.border
+        const style = {
+          color: null,
+          background: null,
+          'border-color': null
         }
-      },
 
-      activeStyle () {
-        return {
-          color: this.theme.button.background,
-          background: this.theme.button.color,
-          'border-color': this.theme.button.background
+        switch (this.type) {
+          case 'active':
+            style.color = this.theme.button.background
+            style.background = this.theme.button.color
+            style['border-color'] = this.theme.button.background
+            break
+
+          case 'light':
+            style.color = this.theme.button.color
+            style.background = this.theme.button.light
+            style['border-color'] = this.theme.button.border
+            break
+
+          default:
+            style.color = this.theme.button.color
+            style.background = this.theme.button.background
+            style['border-color'] = this.theme.button.border
         }
+
+        return style
       }
     },
     methods: {

src/components/tabs/Tabs.vue

@@ -17,9 +17,9 @@
         <share-icon slot="icon"></share-icon>
         <span slot="title">{{ $t('SHARE.TITLE') }}</span>
       </tab-header-item-component>
-      <tab-header-item-component v-if="isVisibleTab.download" name="download" :active="tabs.download" :click="toggleTab('download')">
+      <tab-header-item-component v-if="isVisibleTab.files" name="files" :active="tabs.files" :click="toggleTab('files')">
         <download-icon slot="icon"></download-icon>
-        <span slot="title">{{ $t('DOWNLOAD.TITLE') }}</span>
+        <span slot="title">{{ $t('FILES.TITLE') }}</span>
       </tab-header-item-component>
       <tab-header-item-component v-if="isVisibleTab.audio" name="audio" :active="tabs.audio" :click="toggleTab('audio')">
         <audio-icon slot="icon"></audio-icon>
@@ -39,8 +39,8 @@
     <tab-body-component :active="tabs.share" name="share" :aria-selected="tabs.share" ref="share" v-if="isVisibleTab.share && tabs.share">
       <share-tab></share-tab>
     </tab-body-component>
-    <tab-body-component :active="tabs.download" name="download" :aria-selected="tabs.download" ref="download" v-if="isVisibleTab.download && tabs.download">
-      <download-tab></download-tab>
+    <tab-body-component :active="tabs.files" name="files" :aria-selected="tabs.files" ref="files" v-if="isVisibleTab.files && tabs.files">
+      <files-tab></files-tab>
     </tab-body-component>
     <tab-body-component :active="tabs.audio" name="audio" :aria-selected="tabs.audio" ref="audio" v-if="isVisibleTab.audio && tabs.audio">
       <audio-tab></audio-tab>
@@ -67,7 +67,7 @@ const tabs = {
   ShareTab: () => import(/* webpackMode: "eager" */'./share/Share'),
   ChaptersTab: () => import(/* webpackMode: "eager" */'./chapters/Chapters'),
   TranscriptsTab: () => import(/* webpackMode: "eager" */'./transcripts/Transcripts'),
-  DownloadTab: () => import(/* webpackMode: "eager" */'./download/Download'),
+  FilesTab: () => import(/* webpackMode: "eager" */'./files/Files'),
   AudioTab: () => import(/* webpackMode: "eager" */'./audio/Audio')
 }
 
@@ -84,7 +84,7 @@ export default {
         info: this.components.tabs.info && this.visibleComponents.tabInfo,
         chapters: this.components.tabs.chapters && this.visibleComponents.tabChapters,
         share: this.components.tabs.share && this.visibleComponents.tabShare,
-        download: this.components.tabs.download && this.visibleComponents.tabDownload,
+        files: this.components.tabs.files && this.visibleComponents.tabFiles,
         transcripts: this.components.tabs.transcripts && this.visibleComponents.tabTranscripts,
         audio: this.components.tabs.audio && this.visibleComponents.tabAudio
       }