@explorer-1/vue 0.2.95 → 0.2.98

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @explorer-1/vue
 
+## 0.2.97
+
+### Patch Changes
+
+- 039afc4: Adding logic to show/hide share links on content pages
+- 232c7b4: Adding option to autoplay/loop video.
+
+## 0.2.96
+
+### Patch Changes
+
+- 2735223: Fixing link logic in HomepageTeaserBlock
+
 ## 0.2.95
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.95",
+  "version": "0.2.98",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/BaseVideo/BaseVideo.vue

@@ -14,7 +14,7 @@
         :muted="autoplay"
         :playsinline="autoplay"
         :autoplay="autoplay"
-        :controls="!autoplay"
+        controls
       >
         <template v-if="data.fileWebm">
           <source

package/src/components/BlockVideo/BlockVideo.stories.js

@@ -13,7 +13,8 @@ export const BlockVideoData = {
     blockType: 'VideoBlock',
     video: BaseVideoData,
     caption: 'Lorem ipsum dolor sit amet consectatur',
-    credit: 'Credit'
+    credit: 'Credit',
+    autoplay: false
   }
 }
 

package/src/components/BlockVideo/BlockVideo.vue

@@ -5,7 +5,7 @@
   >
     <BaseVideo
       :data="data.video"
-      :autoplay="autoplay"
+      :autoplay="data.autoplay"
     />
 
     <div

package/src/components/HeroMedia/HeroMedia.vue

@@ -78,11 +78,11 @@ export default defineComponent({
     // image object includes the image caption and credit
     image: {
       type: Object,
-      required: false
+      default: undefined
     },
     video: {
       type: Object,
-      required: false
+      default: undefined
     },
     // if a caption should even be visible
     displayCaption: {
@@ -92,11 +92,11 @@ export default defineComponent({
     // for video heroes that pass separate caption and credit data
     caption: {
       type: String,
-      required: false
+      default: undefined
     },
     credit: {
       type: String,
-      required: false
+      default: undefined
     }
   },
   data() {

package/src/components/HomepageTeaserBlock/HomepageTeaserBlock.vue

@@ -33,14 +33,14 @@
             class="lg:pr-14"
             :text="data.paragraph"
           />
-          <template v-if="data.link && theLink">
+          <template v-if="data.link || theExternalLink">
             <BaseLink
               variant="primary"
               class="mt-5"
               link-class="inline-block"
               caret-wrapper-class="py-2"
-              :href="theLink"
-              :to="data.link.page ? data.link.page.url : null"
+              :href="theExternalLink"
+              :to="data.link.page ? data.link.page.url : undefined"
               external-target-blank
             >
               {{ data.link.text }}
@@ -60,13 +60,13 @@
               v-if="theCard.image"
               class="relative h-auto"
             >
-              <template v-if="theCard.link && theLink">
+              <template v-if="theCard.link || theCardExternalLink">
                 <BaseLink
                   variant="none"
                   link-class="block"
                   :aria-label="theCard.link.text || 'Learn more'"
-                  :href="theLink"
-                  :to="theCard.link.page ? theCard.link.page.url : null"
+                  :href="theCardExternalLink"
+                  :to="theCard.link.page?.url || undefined"
                   external-target-blank
                 >
                   <HomepageTeaserBlockCardImage :data="theCard" />
@@ -87,14 +87,14 @@
                 {{ theCard.description }}
               </p>
 
-              <template v-if="theCard.link && theLink">
+              <template v-if="theCard.link || theCardExternalLink">
                 <BaseLink
                   variant="primary"
                   class="mt-3"
                   link-class="inline-block"
                   caret-wrapper-class="py-2"
-                  :href="theLink"
-                  :to="theCard.link.page ? theCard.link.page.url : null"
+                  :href="theCardExternalLink"
+                  :to="theCard.link.page ? theCard.link.page.url : undefined"
                   external-target-blank
                 >
                   {{ theCard.link.text }}
@@ -135,11 +135,11 @@ export default defineComponent({
     }
   },
   computed: {
-    theCard(): object | null {
-      if (this.data.card && this.data.card.length > 0) {
-        return this.data.card[0]
+    theCard(): object | undefined {
+      if (this.data?.card && this.data.card.length > 0) {
+        return this.data?.card[0]
       }
-      return null
+      return undefined
     },
     hasCoverImage(): boolean {
       if (this.data.coverImage && this.data.coverImage.src) {
@@ -147,8 +147,11 @@ export default defineComponent({
       }
       return false
     },
-    theLink() {
-      return mixinGetExternalLink(this.data.link) || undefined
+    theExternalLink() {
+      return mixinGetExternalLink(this.data?.link) || undefined
+    },
+    theCardExternalLink() {
+      return mixinGetExternalLink(this.theCard?.link) || undefined
     },
     theSrcSet() {
       return this.data.coverImage

package/src/components/MixinVideoBg/MixinVideoBg.stories.js

@@ -4,7 +4,14 @@ import MixinVideoBg from './MixinVideoBg.vue'
 export default {
   title: 'Mixins/MixinVideoBg',
   component: MixinVideoBg,
-  excludeStories: /.*Data$/
+  excludeStories: /.*Data$/,
+  parameters: {
+    docs: {
+      description: {
+        component: 'This mix-in will always autoplay and loop a video.'
+      }
+    }
+  }
 }
 
 export const BaseStory = {

package/src/components/MixinVideoBg/MixinVideoBg.vue

@@ -5,6 +5,7 @@
     muted
     playsinline
     autoplay
+    controls
     preload="auto"
     class="object-cover w-full h-full"
   >
@@ -32,7 +33,11 @@ export default defineComponent({
   props: {
     video: {
       type: Object,
-      required: false
+      default: undefined
+    },
+    autoplay: {
+      type: Boolean,
+      default: false
     }
   }
 })

package/src/templates/PageContent/PageContent.stories.js

@@ -28,6 +28,7 @@ export const ContentPageData = {
   breadcrumb: NavSecondaryData.breadcrumb,
   title: 'Make a Paper Mars Helicopter',
   displayLabel: 'Classroom Activity',
+  showShareLinks: true,
   heroPosition: 'inline',
   heroImage: HeroMediaData.image,
   heroImageInline: HeroMediaData.imageInline,
@@ -87,3 +88,11 @@ export const BaseStory = {
     data: ContentPageData
   }
 }
+export const NoShareLinks = {
+  args: {
+    data: {
+      ...ContentPageData,
+      showShareLinks: false
+    }
+  }
+}

package/src/templates/PageContent/PageContent.vue

@@ -144,7 +144,7 @@ export default defineComponent({
       class="lg:mb-0 relative mb-8"
     >
       <ShareButtons
-        v-if="data.title && data.url && !themeStore.isEdu"
+        v-if="data.showShareLinks && data.title && data.url && !themeStore.isEdu"
         :title="data.title"
         :url="data.url"
       />

package/src/templates/PageNewsDetail/PageNewsDetail.vue

@@ -22,6 +22,7 @@
       class="md:mb-12 lg:mb-18 mb-10"
       :image="data.hero[0].image"
       :video="data.hero[0].video"
+      :autoplay="data.hero[0].autoplay"
       :display-caption="data.hero[0].displayCaption"
       :caption="data.hero[0].caption"
       :credit="data.hero[0].credit"

package/src/utils/mixins.ts

@@ -217,9 +217,9 @@ export const mixinGetSrcSet = (srcSetObject: Partial<ImageObject>): string => {
 }
 // Use with RelatedLinkBlock to retrieve the external link to use with an href prop
 export const mixinGetExternalLink = (link: RelatedLinkObject): string | undefined => {
-  if (link.externalLink) {
+  if (link?.externalLink) {
     return link.externalLink
-  } else if (link.document) {
+  } else if (link?.document) {
     return link.document.url
   }
   return undefined