@explorer-1/vue 0.2.99 → 0.2.101

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @explorer-1/vue
 
+## 0.2.101
+
+### Patch Changes
+
+- Adds Newsletter Signup Block
+- Fixes captions in Video Embed block when used as a hero
+
+## 0.2.100
+
+### Patch Changes
+
+- fb6ba35: Fixing height of HeroMedia
+- Updated dependencies [fb6ba35]
+  - @explorer-1/common@1.1.24
+
 ## 0.2.99
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.99",
+  "version": "0.2.101",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -30,7 +30,7 @@
     "vue-bind-once": "^0.2.1",
     "vue3-compare-image": "^1.2.5",
     "vue3-observe-visibility": "^1.0.1",
-    "@explorer-1/common": "1.1.23"
+    "@explorer-1/common": "1.1.24"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/BaseRadioGroup/BaseRadioGroup.vue

@@ -43,7 +43,7 @@
           >
             <span
               v-if="option.title"
-              class="font-semibold"
+              :class="option.text ? 'font-semibold' : ''"
               >{{ option.title }}</span
             >
             <span v-if="option.text"> - </span>

package/src/components/BlockNewsletterSignup/BlockNewsletterSignup.stories.js

@@ -0,0 +1,21 @@
+import BlockNewsletterSignup from './BlockNewsletterSignup.vue'
+
+export default {
+  title: 'Components/Blocks/BlockNewsletterSignup',
+  component: BlockNewsletterSignup,
+  excludeStories: /.*Data$/
+}
+
+export const BlockNewsletterSignupData = {
+  blockType: 'NewsletterSignupBlock',
+  title: 'Get the JPL Newsletter',
+  description:
+    'From Mars to the Milky Way—never miss a discovery! Delivered straight to your inbox.',
+  buttonText: 'Sign Up'
+}
+
+export const BaseStory = {
+  args: {
+    data: BlockNewsletterSignupData
+  }
+}

package/src/components/BlockNewsletterSignup/BlockNewsletterSignup.vue

@@ -0,0 +1,177 @@
+<template>
+  <div
+    class="BlockNewsletterSignup bg-gray-light edu:bg-stars edu:bg-primary md:mx-0 sm:py-8 md:px-10 sm:mx-20 px-6 py-6 edu:text-white"
+  >
+    <div class="md:mx-16 xl:mx-24 text-center">
+      <p class="text-h6 edu:text-white edu:font-extrabold mb-3">{{ data.title }}</p>
+      <p>{{ data.description }}</p>
+    </div>
+    <hr class="text-gray-mid mt-6 mb-5" />
+
+    <div class="mb-3">
+      <form
+        id="ic_signupform"
+        target="_blank"
+        :captcha-key="captchaKey"
+        captcha-theme="light"
+        new-captcha="true"
+        method="POST"
+        :action="iContactForm"
+      >
+        <div
+          dataname="listGroups"
+          data-label="Which email groups would you like to join?"
+        >
+          <div>
+            <BaseRadioGroup
+              v-model="form.listgroups"
+              heading="Frequency:"
+              group="email"
+              title="Email Groups"
+              preselected="breaking"
+              :options="emailGroups"
+            />
+          </div>
+        </div>
+        <div class="flex flex-row flex-nowrap">
+          <TextInput
+            v-model="form.email"
+            class="email-container h-auto w-full"
+            input-name="data[email]"
+            label="Email"
+            type="email"
+            required
+            placeholder="Email address"
+            :show-label="false"
+          />
+          <div class="submit-container h-auto">
+            <BaseButton
+              class="text-nowrap"
+              variant="primary"
+              compact
+            >
+              {{ data.buttonText }}
+            </BaseButton>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+// @ts-nocheck
+import { defineComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
+import BaseButton from './../BaseButton/BaseButton.vue'
+import BaseRadioGroup from './../BaseRadioGroup/BaseRadioGroup.vue'
+import TextInput from './../TextInput/TextInput.vue'
+
+const iContactForm =
+  'https://app.icontact.com/icp/core/mycontacts/signup/designer/form/?id=5&cid=1389932&lid=11365'
+
+const captchaKey = '6LeCZCcUAAAAALhxcQ5fN80W6Wa2K3GqRQK6WRjA'
+
+const iContactTrackingGif =
+  'https://app.icontact.com/icp/core/signup/tracking.gif?id=5&cid=1389932&lid=11365'
+
+const emailGroups = [
+  {
+    id: 'breaking',
+    title: 'Latest News',
+    value: '41031',
+    alt: 'Lists',
+    name: 'data[listGroups][]'
+  },
+  {
+    id: 'daily',
+    title: 'Daily',
+    value: '41032',
+    alt: 'Lists',
+    name: 'data[listGroups][]'
+  },
+  {
+    id: 'weekly',
+    title: 'Weekly',
+    value: '41033',
+    alt: 'Lists',
+    name: 'data[listGroups][]'
+  },
+  {
+    id: 'monthly',
+    title: 'Monthly',
+    value: '41034',
+    alt: 'Lists',
+    name: 'data[listGroups][]'
+  }
+]
+
+export default defineComponent({
+  name: 'BlockNewsletterSignup',
+  components: {
+    BaseButton,
+    BaseRadioGroup,
+    TextInput
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      submitted: false,
+      form: {
+        email: undefined,
+        listGroups: undefined
+      }
+    }
+  },
+  computed: {
+    ...mapStores(useThemeStore),
+    buttonVariant() {
+      return this.themeStore.theme === 'ThemeEdu' ? 'dark' : 'primary'
+    },
+    iContactForm() {
+      return iContactForm
+    },
+    iContactTrackingGif() {
+      return iContactTrackingGif
+    },
+    captchaKey() {
+      return captchaKey
+    },
+    emailGroups() {
+      return emailGroups
+    }
+  },
+  mounted() {
+    const validationScript = document.createElement('script')
+    validationScript.setAttribute(
+      'src',
+      'https://app.icontact.com/icp/static/form/javascripts/validation-captcha.js'
+    )
+    const trackingScript = document.createElement('script')
+    trackingScript.setAttribute(
+      'src',
+      'https://app.icontact.com/icp/static/form/javascripts/tracking.js'
+    )
+    document.head.appendChild(validationScript, trackingScript)
+  }
+})
+</script>
+<style type="scss">
+.BlockNewsletterSignup {
+  fieldset > div {
+    column-count: 2;
+  }
+  .email-container input {
+    @apply mt-0 -mr-1;
+  }
+  .BaseRadioGroup label {
+    @apply text-base text-left;
+  }
+}
+</style>

package/src/components/BlockStreamfield/BlockStreamfield.stories.js

@@ -16,6 +16,7 @@ import { BlockTeaserData } from './../BlockTeaser/BlockTeaser.stories'
 import { BlockIframeEmbedData } from './../BlockIframeEmbed/BlockIframeEmbed.stories'
 import { BlockVideoData } from './../BlockVideo/BlockVideo.stories'
 import { BlockVideoEmbedData } from './../BlockVideoEmbed/BlockVideoEmbed.stories'
+import { BlockNewsletterSignupData } from '../BlockNewsletterSignup/BlockNewsletterSignup.stories'
 import { MixedColumnWidths } from './../BlockRichTable/BlockRichTable.stories'
 import BlockStreamfield, { variants } from './BlockStreamfield.vue'
 
@@ -167,6 +168,7 @@ export const BlockStreamfieldData = {
         ]
       }
     },
+    BlockNewsletterSignupData,
     {
       blockType: 'ListBlock',
       field: 'card_grid',

package/src/components/BlockStreamfield/BlockStreamfield.vue

@@ -75,6 +75,14 @@
       >
         <BlockCta :data="block" />
       </LayoutHelper>
+      <LayoutHelper
+        v-else-if="block.blockType == 'NewsletterSignupBlock'"
+        :key="`newsletterSignupBlock${index}`"
+        indent="col-4"
+        :class="marginBottom"
+      >
+        <BlockNewsletterSignup :data="block" />
+      </LayoutHelper>
 
       <LayoutHelper
         v-else-if="block.blockType == 'TeaserBlock'"
@@ -277,6 +285,7 @@ import BlockVideo from './../BlockVideo/BlockVideo.vue'
 import BlockVideoEmbed, {
   type BlockData as VideoBlockEmbedData
 } from './../BlockVideoEmbed/BlockVideoEmbed.vue'
+import BlockNewsletterSignup from '../BlockNewsletterSignup/BlockNewsletterSignup.vue'
 import { mapStores } from 'pinia'
 import { useThemeStore } from '../../store/theme'
 
@@ -315,7 +324,8 @@ export default defineComponent({
     BlockIframeEmbed,
     BlockGist,
     BlockVideo,
-    BlockVideoEmbed
+    BlockVideoEmbed,
+    BlockNewsletterSignup
   },
   props: {
     variant: {

package/src/components/HeroInlineMedia/HeroInlineMedia.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
-import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BlockVideoEmbed from './../BlockVideoEmbed/BlockVideoEmbed.vue'
 import BlockIframeEmbed from './../BlockIframeEmbed/BlockIframeEmbed.vue'
 import BlockImageComparison from './../BlockImageComparison/BlockImageComparison.vue'
 import BlockImageCarousel from './../BlockImageCarousel/BlockImageCarousel.vue'
@@ -42,13 +42,10 @@ const { heroBlocks, constrain } = reactive(props)
       v-else-if="heroBlocks[0].blockType === 'VideoBlock'"
       :data="heroBlocks[0]"
     />
-    <BaseImagePlaceholder
+    <BlockVideoEmbed
       v-else-if="heroBlocks[0].blockType === 'VideoEmbedBlock'"
-      aspect-ratio="16:9"
-      dark-mode
-    >
-      <div v-html="heroBlocks[0].embed?.embed"></div>
-    </BaseImagePlaceholder>
+      :data="heroBlocks[0]"
+    />
     <BlockImageComparison
       v-else-if="heroBlocks[0].blockType === 'ImageComparisonBlock'"
       :data="heroBlocks[0]"

package/src/components/HeroMedia/HeroMedia.vue

@@ -3,40 +3,42 @@
     v-if="image || video"
     class="HeroMedia"
   >
-    <div class="vh-crop max-w-screen-3xl relative flex items-center mx-auto overflow-hidden">
-      <div class="hero w-full">
-        <template v-if="theImageData">
-          <img
-            v-if="theImageData.src"
-            class="object-cover object-center w-full h-full"
-            :srcset="theSrcSet"
-            :src="theImageData.src.url"
-            :width="theImageData.src.width"
-            :height="theImageData.src.height"
-            :alt="theImageData.alt"
-            itemprop="image"
-            data-chromatic="ignore"
-          />
-        </template>
-        <template v-else-if="video">
-          <MixinVideoBg :video="video" />
-        </template>
-      </div>
-      <div
-        v-if="hasCaptionArea"
-        class="lg:hidden absolute bottom-0 left-0 w-full h-auto mx-auto print:hidden"
-      >
-        <button
-          class="bg-opacity-90 text-gray-dark flex items-center justify-center w-12 h-12 ml-auto bg-white cursor-pointer"
-          aria-label="Toggle caption"
-          @click="toggleCaption"
+    <div>
+      <div class="vh-crop max-w-screen-3xl relative flex items-center mx-auto overflow-hidden">
+        <div class="hero w-full">
+          <template v-if="theImageData">
+            <img
+              v-if="theImageData.src"
+              class="object-cover object-center w-full h-full"
+              :srcset="theSrcSet"
+              :src="theImageData.src.url"
+              :width="theImageData.src.width"
+              :height="theImageData.src.height"
+              :alt="theImageData.alt"
+              itemprop="image"
+              data-chromatic="ignore"
+            />
+          </template>
+          <template v-else-if="video">
+            <MixinVideoBg :video="video" />
+          </template>
+        </div>
+        <div
+          v-if="hasCaptionArea"
+          class="lg:hidden absolute bottom-0 left-0 w-full h-auto mx-auto print:hidden"
         >
-          <IconInfo
-            v-show="!captionVisible"
-            class="text-xl"
-          />
-          <IconClose v-show="captionVisible" />
-        </button>
+          <button
+            class="bg-opacity-90 text-gray-dark flex items-center justify-center w-12 h-12 ml-auto bg-white cursor-pointer"
+            aria-label="Toggle caption"
+            @click="toggleCaption"
+          >
+            <IconInfo
+              v-show="!captionVisible"
+              class="text-xl"
+            />
+            <IconClose v-show="captionVisible" />
+          </button>
+        </div>
       </div>
     </div>
 

package/src/templates/PageContent/PageContent.vue

@@ -16,6 +16,7 @@ import BlockRelatedLinks from './../../components/BlockRelatedLinks/BlockRelated
 import FormContact from './../../components/FormContact/FormContact.vue'
 import FormNewsletterSignup from './../../components/FormNewsletterSignup/FormNewsletterSignup.vue'
 import BlockLinkCarousel from './../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
+import type { BlockData } from '../../interfaces'
 
 const route = useRoute()
 
@@ -71,6 +72,18 @@ export default defineComponent({
         return 'lg:mt-12 mt-5'
       }
       return 'lg:mt-12 lg:mb-18 edu:lg:mb-12 mt-5 mb-10 edu:mb-8'
+    },
+    hasNewsletterSignupBlock() {
+      let status = false
+      const blocks = this.data?.body
+      if (blocks?.length) {
+        blocks.forEach((block: BlockData) => {
+          if (block.blockType === `NewsletterSignupBlock`) {
+            status = true
+          }
+        })
+      }
+      return status
     }
   }
 })
@@ -168,7 +181,7 @@ export default defineComponent({
     </template>
 
     <!-- Newsletter Signup form for specific content page only -->
-    <template v-if="data.slug === 'newsletter-signup'">
+    <template v-if="data.slug === 'newsletter-signup' && !hasNewsletterSignupBlock">
       <!-- Newsletter Signup Form -->
       <FormNewsletterSignup class="lg:mb-18 mb-10" />
     </template>

package/src/templates/PageNewsDetail/PageNewsDetail.vue

@@ -51,34 +51,10 @@
       indent="col-2"
       class="lg:mb-22 mt-10 mb-10"
     >
-      <BlockImageStandard
-        v-if="data.hero[0].blockType === 'HeroImageBlock'"
-        :data="data.hero[0].imageInline"
-        :display-caption="data.hero[0].displayCaption"
-        :caption="data.hero[0].caption"
+      <HeroInlineMedia
+        :hero-blocks="data.hero"
         :constrain="data.heroConstrain"
       />
-      <BlockImageCarousel
-        v-else-if="data.hero[0].blockType === 'CarouselBlock'"
-        :items="data.hero[0].blocks"
-        :block-id="data.hero[0].id"
-      />
-      <BlockVideo
-        v-else-if="data.hero[0].blockType === 'VideoBlock'"
-        :data="data.hero[0]"
-        autoplay
-      />
-      <BaseImagePlaceholder
-        v-else-if="data.hero[0].blockType === 'VideoEmbedBlock'"
-        aspect-ratio="16:9"
-        dark-mode
-      >
-        <div v-html="data.hero[0].embed.embed"></div>
-      </BaseImagePlaceholder>
-      <BlockImageComparison
-        v-else-if="data.hero[0].blockType === 'ImageComparisonBlock'"
-        :data="data.hero[0]"
-      />
     </LayoutHelper>
 
     <!-- share buttons -->
@@ -166,17 +142,13 @@ import { defineComponent } from 'vue'
 import LayoutHelper from './../../components/LayoutHelper/LayoutHelper.vue'
 import HeroMedia from './../../components/HeroMedia/HeroMedia.vue'
 import DetailHeadline from './../../components/DetailHeadline/DetailHeadline.vue'
-import BaseImagePlaceholder from './../../components/BaseImagePlaceholder/BaseImagePlaceholder.vue'
 import BlockStreamfield from './../../components/BlockStreamfield/BlockStreamfield.vue'
 import NewsDetailMediaContact from './../../components/NewsDetailMediaContact/NewsDetailMediaContact.vue'
 import BlockRelatedLinks from './../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
-import BlockImageCarousel from './../../components/BlockImageCarousel/BlockImageCarousel.vue'
-import BlockImageComparison from './../../components/BlockImageComparison/BlockImageComparison.vue'
-import BlockImageStandard from './../../components/BlockImage/BlockImageStandard.vue'
+import HeroInlineMedia from './../../components/HeroInlineMedia/HeroInlineMedia.vue'
 import BlockLinkCarousel from './../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
 import ShareButtons from './../../components/ShareButtons/ShareButtons.vue'
 import BlockText from './../../components/BlockText/BlockText.vue'
-import BlockVideo from './../../components/BlockVideo/BlockVideo.vue'
 
 export default defineComponent({
   name: 'PageNewsDetail',
@@ -184,17 +156,13 @@ export default defineComponent({
     LayoutHelper,
     HeroMedia,
     DetailHeadline,
-    BaseImagePlaceholder,
     BlockStreamfield,
     NewsDetailMediaContact,
     BlockRelatedLinks,
-    BlockImageCarousel,
-    BlockImageComparison,
-    BlockImageStandard,
     BlockLinkCarousel,
     ShareButtons,
     BlockText,
-    BlockVideo
+    HeroInlineMedia
   },
   props: {
     data: {