Use named Vue component classes (Qiskit#1130)

delapuente · Nov 23, 2020 · b43009e · b43009e
1 parent 0e19b00
commit b43009e
Show file tree

Hide file tree

Showing 73 changed files with 233 additions and 70 deletions.
diff --git a/components/advocates/AdvocateCard.vue b/components/advocates/AdvocateCard.vue
@@ -26,7 +26,7 @@ import Vue from 'vue'
 import { Component, Prop } from 'vue-property-decorator'
 
 @Component
-export default class extends Vue {
+export default class AdvocateCard extends Vue {
   @Prop(String) name!: any
   @Prop(String) image!: any
   @Prop(String) location!: any

diff --git a/components/advocates/MapSection.vue b/components/advocates/MapSection.vue
@@ -53,7 +53,7 @@ import { Component, Prop } from 'vue-property-decorator'
     }
   }
 })
-export default class extends Vue {
+export default class MapSection extends Vue {
   @Prop({ type: String, default: 'end' }) extraPosition!: any
   @Prop(Array) points!: any
 }

diff --git a/components/events/EventCard.vue b/components/events/EventCard.vue
@@ -28,7 +28,7 @@ import AppCard from '~/components/ui/AppCard.vue'
 @Component({
   components: { AppCard }
 })
-export default class extends Vue {
+export default class EventCard extends Vue {
   @Prop(Array) types!: any
   @Prop(String) title!: any
   @Prop(String) image!: any

diff --git a/components/events/EventFooter.vue b/components/events/EventFooter.vue
@@ -11,7 +11,7 @@ import { Component } from 'vue-property-decorator'
 const today = new Date()
 
 @Component
-export default class extends Vue {
+export default class EventFooter extends Vue {
   currentYear = today.getFullYear()
 }
 </script>

diff --git a/components/events/EventMenu.vue b/components/events/EventMenu.vue
@@ -28,7 +28,7 @@ import AppLink from '~/components/ui/AppLink.vue'
 @Component({
   components: { AppLink }
 })
-export default class extends Vue {}
+export default class EventMenu extends Vue {}
 </script>
 
 <style lang="scss" scoped>

diff --git a/components/events/TheEventsHeader.vue b/components/events/TheEventsHeader.vue
@@ -20,5 +20,5 @@ import ThePageHeader from '~/components/ui/ThePageHeader.vue'
 import TypewriterEffect from '~/components/ui/TypewriterEffect.vue'
 
 @Component({ components: { ThePageHeader, TypewriterEffect } })
-export default class extends Vue { }
+export default class TheEventsHeader extends Vue { }
 </script>
diff --git a/components/landing/LandingCta.vue b/components/landing/LandingCta.vue
@@ -17,7 +17,7 @@ import AppLink from '~/components/ui/AppLink.vue'
 @Component({
   components: { AppLink }
 })
-export default class extends Vue {
+export default class LandingCta extends Vue {
   @Prop({ type: String, default: 'primary' }) kind!: 'primary'|'secondary';
 }
 </script>

diff --git a/components/landing/TheFeatures/TheFeatureMosaic.vue b/components/landing/TheFeatures/TheFeatureMosaic.vue
@@ -101,7 +101,7 @@ import Vue from 'vue'
 import { Component } from 'vue-property-decorator'
 
 @Component
-export default class extends Vue {}
+export default class TheFeatureMosaic extends Vue {}
 </script>
 
 <style lang="scss" scoped>

diff --git a/components/landing/TheFeatures/index.vue b/components/landing/TheFeatures/index.vue
@@ -41,7 +41,7 @@ import LandingCta from '~/components/landing/LandingCta.vue'
 @Component({
   components: { TheFeatureMosaic, LandingCta }
 })
-export default class extends Vue { }
+export default class TheFeatures extends Vue { }
 </script>
 
 <style lang="scss">

diff --git a/components/landing/TheHeroMoment/VersionInfo.vue b/components/landing/TheHeroMoment/VersionInfo.vue
@@ -35,7 +35,7 @@ import { GITHUB_REPOSITORY } from '~/constants/menuLinks'
 @Component({
   components: { AppLink }
 })
-export default class extends Vue {
+export default class VersionInfo extends Vue {
   githubRepoLink = GITHUB_REPOSITORY
 
   @Prop({ type: String, required: true }) version!: string

diff --git a/components/landing/TheHeroMoment/index.vue b/components/landing/TheHeroMoment/index.vue
@@ -38,7 +38,7 @@ import MetalGrid from '~/components/metal/MetalGrid.vue'
 @Component({
   components: { VersionInfo, LandingCta, MetalGrid }
 })
-export default class extends Vue {
+export default class TheHeroMoment extends Vue {
   @Prop({ type: String, required: true }) version!: string
 
   data () {

diff --git a/components/landing/TheLearnSection/LearnCard.vue b/components/landing/TheLearnSection/LearnCard.vue
@@ -27,7 +27,7 @@ import AppCta from '~/components/ui/AppCta.vue'
 @Component({
   components: { AppCta }
 })
-export default class extends Vue {}
+export default class LearnCard extends Vue {}
 </script>
 
 <style lang="scss" scoped>

diff --git a/components/landing/TheLearnSection/index.vue b/components/landing/TheLearnSection/index.vue
@@ -21,7 +21,7 @@ import { Component } from 'vue-property-decorator'
 import LearnCard from '~/components/landing/TheLearnSection/LearnCard.vue'
 
 @Component({ components: { LearnCard } })
-export default class extends Vue {}
+export default class TheLearnSection extends Vue {}
 </script>
 
 <style lang="scss" scoped>

diff --git a/components/landing/TheQuickStart/PrerequisitesForLinux.vue b/components/landing/TheQuickStart/PrerequisitesForLinux.vue
@@ -32,7 +32,7 @@ import Vue from 'vue'
 import { Component } from 'vue-property-decorator'
 
 @Component
-export default class extends Vue { }
+export default class PrerequisitesForLinux extends Vue { }
 </script>
 
 <style lang="scss" scoped>

diff --git a/components/landing/TheQuickStart/PrerequisitesForMac.vue b/components/landing/TheQuickStart/PrerequisitesForMac.vue
@@ -30,7 +30,7 @@ import { Component } from 'vue-property-decorator'
 import AppLink from '~/components/ui/AppLink.vue'
 
 @Component({ components: { AppLink } })
-export default class extends Vue { }
+export default class PrerequisitesForMac extends Vue { }
 </script>
 
 <style lang="scss" scoped>

diff --git a/components/landing/TheQuickStart/PrerequisitesForWindows.vue b/components/landing/TheQuickStart/PrerequisitesForWindows.vue
@@ -19,7 +19,7 @@ import Vue from 'vue'
 import { Component } from 'vue-property-decorator'
 
 @Component
-export default class extends Vue { }
+export default class PrerequisitesForWindows extends Vue { }
 </script>
 
 <style lang="scss" scoped>

diff --git a/components/landing/TheQuickStart/StartLocally.vue b/components/landing/TheQuickStart/StartLocally.vue
@@ -92,7 +92,7 @@ type InstallChoices = Array<ChoicesGroup>
     AppLink
   }
 })
-export default class extends Vue {
+export default class StartLocally extends Vue {
   OPERATING_SYSTEMS = {
     linux: 'Linux',
     mac: 'Mac',

diff --git a/components/landing/TheQuickStart/StartOnTheCloud.vue b/components/landing/TheQuickStart/StartOnTheCloud.vue
@@ -25,7 +25,7 @@ import AppCta from '~/components/ui/AppCta.vue'
 @Component({
   components: { AppCta }
 })
-export default class extends Vue {
+export default class StartOnTheCloud extends Vue {
   ibmQExperienceLink = IBM_Q_EXPERIENCE
 }
 </script>

diff --git a/components/landing/TheQuickStart/index.vue b/components/landing/TheQuickStart/index.vue
@@ -27,7 +27,7 @@ import StartOnTheCloud from './StartOnTheCloud.vue'
     StartOnTheCloud
   }
 })
-export default class extends Vue {}
+export default class TheQuickStart extends Vue {}
 </script>
 
 <style lang="scss" scoped>

diff --git a/components/layouts/PageFooter/FooterSection.vue b/components/layouts/PageFooter/FooterSection.vue
@@ -32,7 +32,7 @@ import AppLink from '~/components/ui/AppLink.vue'
 @Component({
   components: { AppLink }
 })
-export default class extends Vue {
+export default class FooterSection extends Vue {
   @Prop(String) title!: any
   @Prop(Array) elements!: any
   @Prop({ type: Boolean, default: false }) iconsOnly!: any

diff --git a/components/layouts/PageFooter/index.vue b/components/layouts/PageFooter/index.vue
@@ -67,7 +67,7 @@ import {
     AppLogo
   }
 })
-export default class extends Vue {
+export default class PageFooter extends Vue {
   @Prop({ type: String, default: 'light' }) theme!: string
 
   footerElements = FOOTER_ELEMENTS

diff --git a/components/layouts/TheBanner.vue b/components/layouts/TheBanner.vue
@@ -11,7 +11,7 @@ import Vue from 'vue'
 import { Component } from 'vue-property-decorator'
 
 @Component
-export default class extends Vue {}
+export default class TheBanner extends Vue {}
 </script>
 
 <style lang="scss" scoped>

diff --git a/components/layouts/TheMenu/MobileMenu.vue b/components/layouts/TheMenu/MobileMenu.vue
@@ -51,7 +51,7 @@ import MenuMixin from '~/mixins/menu'
 @Component({
   components: { AppLink }
 })
-export default class extends Mixins(MenuMixin) {}
+export default class MobileMenu extends Mixins(MenuMixin) {}
 </script>
 
 <style lang="scss" scoped>

diff --git a/components/layouts/TheMenu/index.vue b/components/layouts/TheMenu/index.vue
@@ -89,7 +89,7 @@ import MenuMixin from '~/mixins/menu'
 @Component({
   components: { MobileMenu, AppLink, AppLogo }
 })
-export default class extends Mixins(MenuMixin) {
+export default class TheMenu extends Mixins(MenuMixin) {
   isMobileMenuVisible: boolean = false
 
   @Watch('isMobileMenuVisible')

diff --git a/components/layouts/banners/TheBlackLivesMatterBanner.vue b/components/layouts/banners/TheBlackLivesMatterBanner.vue
@@ -19,7 +19,7 @@ import TheBanner from '~/components/layouts/TheBanner.vue'
 import AppLink from '~/components/ui/AppLink.vue'
 
 @Component({ components: { AppLink, TheBanner } })
-export default class extends Vue {}
+export default class TheBlackLivesMatterBanner extends Vue {}
 </script>
 
 <style lang="scss" scoped>

diff --git a/components/learn/CarefulExplanation.vue b/components/learn/CarefulExplanation.vue
@@ -16,7 +16,7 @@ import { Component, Prop } from 'vue-property-decorator'
 import AppCta from '~/components/ui/AppCta.vue'
 
 @Component({ components: { AppCta } })
-export default class extends Vue {
+export default class CarefulExplanation extends Vue {
   @Prop({ type: Boolean, default: false }) compact!: boolean
   @Prop({ type: String, default: '#' }) url!: string
 }

diff --git a/components/learn/TheCarefulExplanationForBeginners.vue b/components/learn/TheCarefulExplanationForBeginners.vue
@@ -23,7 +23,7 @@ import { Component } from 'vue-property-decorator'
 import CarefulExplanation from '~/components/learn/CarefulExplanation.vue'
 
 @Component({ components: { CarefulExplanation } })
-export default class extends Vue {}
+export default class TheCarefulExplanationForBeginners extends Vue {}
 </script>
 
 <style lang="scss" scoped>

diff --git a/components/learn/TheCarefulExplanationForExperts.vue b/components/learn/TheCarefulExplanationForExperts.vue
@@ -29,5 +29,5 @@ import { Component } from 'vue-property-decorator'
 import CarefulExplanation from '~/components/learn/CarefulExplanation.vue'
 
 @Component({ components: { CarefulExplanation } })
-export default class extends Vue { }
+export default class TheCarefulExplanationForExperts extends Vue { }
 </script>
diff --git a/components/learn/TheLearnHeader.vue b/components/learn/TheLearnHeader.vue
@@ -22,5 +22,5 @@ import ThePageHeader from '~/components/ui/ThePageHeader.vue'
 import TypewriterEffect from '~/components/ui/TypewriterEffect.vue'
 
 @Component({ components: { ThePageHeader, TypewriterEffect } })
-export default class extends Vue { }
+export default class TheLearnHeader extends Vue { }
 </script>
diff --git a/components/learn/TheLearningResourceList.vue b/components/learn/TheLearningResourceList.vue
@@ -88,7 +88,7 @@ import { Component, Prop } from 'vue-property-decorator'
 import AppLink from '~/components/ui/AppLink.vue'
 
 @Component({ components: { AppLink } })
-export default class extends Vue {
+export default class TheLearningResourceList extends Vue {
   @Prop({ type: Array, default: [] }) topFilters!: Array<string>
   @Prop(String) activeTopFilter!: string
 

diff --git a/components/logic/QiskitElementPage.vue b/components/logic/QiskitElementPage.vue
@@ -0,0 +1,10 @@
+<script lang="ts">
+import { Component } from 'vue-property-decorator'
+import QiskitPage from '~/components/logic/QiskitPage.vue'
+
+@Component
+export default abstract class QiskitElementPage extends QiskitPage {
+  abstract title: string
+  abstract description: string
+}
+</script>
diff --git a/components/logic/QiskitPage.vue b/components/logic/QiskitPage.vue
@@ -3,7 +3,7 @@ import { Component, Mixins } from 'vue-property-decorator'
 import SegmentMixin, { TrackedPage } from '~/mixins/segment-analytics'
 
 @Component
-export default abstract class extends Mixins(SegmentMixin) implements TrackedPage {
+export default abstract class QiskitPage extends Mixins(SegmentMixin) implements TrackedPage {
   abstract routeName: string;
 }
 </script>
diff --git a/components/metal/AppCtaBtn.vue b/components/metal/AppCtaBtn.vue
@@ -13,7 +13,7 @@ import { Component } from 'vue-property-decorator'
 import AppCta from '~/components/ui/AppCta.vue'
 
 @Component({ components: { AppCta } })
-export default class extends Vue {}
+export default class AppCtaBtn extends Vue {}
 </script>
 
 <style lang="scss" scoped>

diff --git a/components/metal/BuildingSection.vue b/components/metal/BuildingSection.vue
@@ -60,7 +60,7 @@ import AppLink from '~/components/ui/AppLink.vue'
 
 @Component({ components: { AppLink } })
 
-export default class extends Vue {}
+export default class BuildingSection extends Vue {}
 </script>
 
 <style lang="scss" scoped>

diff --git a/components/metal/CapabilitiesSection.vue b/components/metal/CapabilitiesSection.vue
@@ -63,7 +63,7 @@ import ScrollSectionsMixin from '~/mixins/scrollBetweenSections'
 @Component({
   components: { CapabilityCard }
 })
-export default class extends Mixins(ScrollSectionsMixin) {
+export default class CapabilitiesSection extends Mixins(ScrollSectionsMixin) {
   capabilities = METAL_CAPABILITIES
 
   isActiveImage (item: MetalCapability, index: number): boolean {

diff --git a/components/metal/CapabilityCard.vue b/components/metal/CapabilityCard.vue
@@ -37,7 +37,7 @@ import Vue from 'vue'
 import { Component, Prop } from 'vue-property-decorator'
 
 @Component
-export default class extends Vue {
+export default class CapabilityCard extends Vue {
   @Prop(String) visualResource!: any
   @Prop(String) title!: any
   @Prop(String) description!: any

diff --git a/components/metal/EarlyAccessSection.vue b/components/metal/EarlyAccessSection.vue
@@ -23,7 +23,7 @@ import AppCtaBtn from '~/components/metal/AppCtaBtn.vue'
   components: { AppCtaBtn }
 })
 
-export default class extends Vue {
+export default class EarlyAccessSection extends Vue {
   stayInTouchLink = {
     url: 'http://qisk.it/metal',
     label: 'Sign up to stay in touch'

diff --git a/components/metal/FeatureCard.vue b/components/metal/FeatureCard.vue
@@ -22,7 +22,7 @@ import Vue from 'vue'
 import { Component, Prop } from 'vue-property-decorator'
 
 @Component
-export default class extends Vue {
+export default class FeatureCard extends Vue {
   @Prop(String) image!: any
   @Prop(String) title!: any
   @Prop(String) description!: any

diff --git a/components/metal/FeaturesSection.vue b/components/metal/FeaturesSection.vue
@@ -30,7 +30,7 @@ import { METAL_FEATURES } from '~/constants/metalContent'
 @Component({
   components: { FeatureCard }
 })
-export default class extends Vue {
+export default class FeaturesSection extends Vue {
   metalFeatures = METAL_FEATURES
 }
 </script>

diff --git a/components/metal/IntroSection.vue b/components/metal/IntroSection.vue
@@ -34,7 +34,7 @@ import { Component } from 'vue-property-decorator'
 import AppCtaBtn from '~/components/metal/AppCtaBtn.vue'
 
 @Component({ components: { AppCtaBtn } })
-export default class extends Vue {
+export default class IntroSection extends Vue {
   accessRequest = {
     url: 'http://qisk.it/metal',
     label: 'Request early access'

diff --git a/components/metal/MetalGrid.vue b/components/metal/MetalGrid.vue
@@ -46,7 +46,7 @@ type Decoherences = { [key: number]: number }
 @Component({
   components: { TheDarkHeader }
 })
-export default class extends Vue {
+export default class MetalGrid extends Vue {
   timeToRemoveNextCell: number = 5 // in ms
   timeToLoadMetal: number = 50 // in ms
   triggerPositionFromTopCenter: CellCoordinates = { x: -3, y: 2 }

diff --git a/components/metal/TheDarkHeader.vue b/components/metal/TheDarkHeader.vue
@@ -69,7 +69,7 @@ import AppLink from '~/components/ui/AppLink.vue'
 @Component({
   components: { LandingCta, AppLink }
 })
-export default class extends Vue {}
+export default class TheDarkHeader extends Vue {}
 </script>
 
 <style lang="scss">

diff --git a/components/overview/AccordionLayout.vue b/components/overview/AccordionLayout.vue
@@ -33,7 +33,7 @@ export { AccordionLayoutProps }
 @Component({
   components: { AppCta }
 })
-export default class extends Vue implements AccordionLayoutProps {
+export default class AccordionLayout extends Vue implements AccordionLayoutProps {
   @Prop(String) image!: string
   @Prop(String) description!: string
   @Prop(Object) cta!: {

diff --git a/components/overview/ContentAccordion.vue b/components/overview/ContentAccordion.vue
@@ -39,7 +39,7 @@ export { ContentAccordionTab }
 @Component({
   components: { AccordionLayout }
 })
-export default class extends Vue {
+export default class ContentAccordion extends Vue {
   @Prop(Array) tabs!: Array<ContentAccordionTab>
 
   expandedItem: number = 0