@explorer-1/vue 0.2.98 → 0.2.100

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/package.json +2 -2
  3. package/src/components/HeroMedia/HeroMedia.vue +35 -33
  4. package/src/templates/PageNewsDetail/PageNewsDetail.stories.js +3 -1
  5. package/src/templates/PageNewsDetail/PageNewsDetail.vue +8 -10
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @explorer-1/vue
2
2
 
3
+ ## 0.2.100
4
+
5
+ ### Patch Changes
6
+
7
+ - fb6ba35: Fixing height of HeroMedia
8
+ - Updated dependencies [fb6ba35]
9
+ - @explorer-1/common@1.1.24
10
+
11
+ ## 0.2.99
12
+
13
+ ### Patch Changes
14
+
15
+ - 815dd6d: Prepping for next release
16
+
3
17
  ## 0.2.97
4
18
 
5
19
  ### Patch Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@explorer-1/vue",
3
- "version": "0.2.98",
3
+ "version": "0.2.100",
4
4
  "private": false,
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -30,7 +30,7 @@
30
30
  "vue-bind-once": "^0.2.1",
31
31
  "vue3-compare-image": "^1.2.5",
32
32
  "vue3-observe-visibility": "^1.0.1",
33
- "@explorer-1/common": "1.1.23"
33
+ "@explorer-1/common": "1.1.24"
34
34
  },
35
35
  "devDependencies": {
36
36
  "@vitejs/plugin-vue": "^5.0.4",
package/src/components/HeroMedia/HeroMedia.vue CHANGED
@@ -3,40 +3,42 @@
3
3
  v-if="image || video"
4
4
  class="HeroMedia"
5
5
  >
6
- <div class="vh-crop max-w-screen-3xl relative flex items-center mx-auto overflow-hidden">
7
- <div class="hero w-full">
8
- <template v-if="theImageData">
9
- <img
10
- v-if="theImageData.src"
11
- class="object-cover object-center w-full h-full"
12
- :srcset="theSrcSet"
13
- :src="theImageData.src.url"
14
- :width="theImageData.src.width"
15
- :height="theImageData.src.height"
16
- :alt="theImageData.alt"
17
- itemprop="image"
18
- data-chromatic="ignore"
19
- />
20
- </template>
21
- <template v-else-if="video">
22
- <MixinVideoBg :video="video" />
23
- </template>
24
- </div>
25
- <div
26
- v-if="hasCaptionArea"
27
- class="lg:hidden absolute bottom-0 left-0 w-full h-auto mx-auto print:hidden"
28
- >
29
- <button
30
- class="bg-opacity-90 text-gray-dark flex items-center justify-center w-12 h-12 ml-auto bg-white cursor-pointer"
31
- aria-label="Toggle caption"
32
- @click="toggleCaption"
6
+ <div>
7
+ <div class="vh-crop max-w-screen-3xl relative flex items-center mx-auto overflow-hidden">
8
+ <div class="hero w-full">
9
+ <template v-if="theImageData">
10
+ <img
11
+ v-if="theImageData.src"
12
+ class="object-cover object-center w-full h-full"
13
+ :srcset="theSrcSet"
14
+ :src="theImageData.src.url"
15
+ :width="theImageData.src.width"
16
+ :height="theImageData.src.height"
17
+ :alt="theImageData.alt"
18
+ itemprop="image"
19
+ data-chromatic="ignore"
20
+ />
21
+ </template>
22
+ <template v-else-if="video">
23
+ <MixinVideoBg :video="video" />
24
+ </template>
25
+ </div>
26
+ <div
27
+ v-if="hasCaptionArea"
28
+ class="lg:hidden absolute bottom-0 left-0 w-full h-auto mx-auto print:hidden"
33
29
  >
34
- <IconInfo
35
- v-show="!captionVisible"
36
- class="text-xl"
37
- />
38
- <IconClose v-show="captionVisible" />
39
- </button>
30
+ <button
31
+ class="bg-opacity-90 text-gray-dark flex items-center justify-center w-12 h-12 ml-auto bg-white cursor-pointer"
32
+ aria-label="Toggle caption"
33
+ @click="toggleCaption"
34
+ >
35
+ <IconInfo
36
+ v-show="!captionVisible"
37
+ class="text-xl"
38
+ />
39
+ <IconClose v-show="captionVisible" />
40
+ </button>
41
+ </div>
40
42
  </div>
41
43
  </div>
42
44
 
package/src/templates/PageNewsDetail/PageNewsDetail.stories.js CHANGED
@@ -41,6 +41,7 @@ export const BaseStory = {
41
41
  url: 'http://localhost:3000/topics/mars'
42
42
  }
43
43
  ],
44
+ hideShareLinks: false,
44
45
  topper: '',
45
46
  readTime: '2 min read',
46
47
  summary:
@@ -115,7 +116,8 @@ export const HeroVideo = {
115
116
  blockType: 'VideoBlock',
116
117
  video: BaseVideoData,
117
118
  caption: 'Lorem ipsum dolor sit amet',
118
- credit: 'NASA/JPL'
119
+ credit: 'NASA/JPL',
120
+ autoplay: true
119
121
  }
120
122
  ]
121
123
  }
package/src/templates/PageNewsDetail/PageNewsDetail.vue CHANGED
@@ -83,6 +83,7 @@
83
83
 
84
84
  <!-- share buttons -->
85
85
  <LayoutHelper
86
+ v-if="!data.hideShareLinks"
86
87
  indent="col-2"
87
88
  class="lg:mb-0 relative mb-8"
88
89
  >
@@ -175,7 +176,7 @@ import BlockImageStandard from './../../components/BlockImage/BlockImageStandard
175
176
  import BlockLinkCarousel from './../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
176
177
  import ShareButtons from './../../components/ShareButtons/ShareButtons.vue'
177
178
  import BlockText from './../../components/BlockText/BlockText.vue'
178
- import BlockVideo from './../../components/BlockText/BlockText.vue'
179
+ import BlockVideo from './../../components/BlockVideo/BlockVideo.vue'
179
180
 
180
181
  export default defineComponent({
181
182
  name: 'PageNewsDetail',
@@ -206,16 +207,13 @@ export default defineComponent({
206
207
  return (this.data?.hero || []).length === 0
207
208
  },
208
209
  heroInline(): boolean {
209
- if (!this.heroEmpty) {
210
- if (this.data?.hero[0].blockType === 'VideoBlock') {
211
- return false
212
- } else if (
213
- this.data?.heroPosition === 'inline' ||
210
+ if (
211
+ !this.heroEmpty &&
212
+ (this.data?.heroPosition === 'inline' ||
214
213
  this.data?.hero[0].blockType === 'CarouselBlock' ||
215
- this.data?.hero[0].blockType === 'VideoEmbedBlock'
216
- ) {
217
- return true
218
- }
214
+ this.data?.hero[0].blockType === 'VideoEmbedBlock')
215
+ ) {
216
+ return true
219
217
  }
220
218
  return false
221
219
  },