@explorer-1/vue 0.2.21 → 0.2.23

package/package.json

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

package/src/components/BaseAccordionItem/BaseAccordionItem.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { computed, reactive, ref } from 'vue'
-import { AccordionItemObject } from './../../interfaces.ts'
+import type { AccordionItemObject } from './../../interfaces.ts'
 import { uniqueId } from 'lodash'
 import IconPlus from './../Icons/IconPlus.vue'
-import BlockStreamfield from './../BlockStreamfield/BlockStreamfield.vue'
 
 export interface BaseAccordionItemProps {
   headingLevel?: string
@@ -58,9 +57,12 @@ const emit = defineEmits(['accordionItemOpened', 'accordionItemClosed'])
       <slot name="header">
         <div
           v-if="headingLevel && item"
-          class="border-b border-gray-light-mid"
+          :class="{ 'border-b border-gray-light-mid': isHidden }"
         >
-          <component :is="headingLevel">
+          <component
+            :is="headingLevel"
+            class="!font-medium"
+          >
             <button
               v-bind-once="{ id: headingId, 'aria-controls': panelId }"
               :aria-expanded="ariaExpanded"
@@ -91,15 +93,10 @@ const emit = defineEmits(['accordionItemOpened', 'accordionItemClosed'])
         <div
           v-bind-once="{ id: panelId, 'aria-labelledby': headingId }"
           role="region"
-          class="BaseAccordion-panel"
+          class="BaseAccordion-panel border-b border-gray-light-mid"
         >
           <slot name="panelContents">
-            <div class="px-4 pb-8">
-              <BlockStreamfield
-                :data="item.body"
-                variant="fluid"
-              />
-            </div>
+            <pre>{{ item.body }}</pre>
           </slot>
         </div>
       </slot>

package/src/components/BaseImageCaption/BaseImageCaption.vue

@@ -14,6 +14,14 @@ export default defineComponent({
       type: Object as PropType<Partial<ImageObject>>,
       required: true,
       default: undefined
+    },
+    customLink: {
+      type: String,
+      default: undefined
+    },
+    customLinkText: {
+      type: String,
+      default: 'Custom Link'
     }
   }
 })
@@ -43,6 +51,14 @@ export default defineComponent({
     >
       Full Image Details
     </BaseLink>
+    <BaseLink
+      v-else-if="customLink"
+      class="inline-block"
+      variant="default"
+      :to="customLink"
+    >
+      {{ customLinkText }}
+    </BaseLink>
   </div>
 </template>
 

package/src/components/BlockAccordion/BlockAccordion.stories.js

@@ -1,29 +1,74 @@
 import BlockAccordion from './BlockAccordion.vue'
-import { BlockStreamfieldTruncatedData } from '../BlockStreamfield/BlockStreamfield.stories'
+import { BlockImageData } from './../BlockImage/BlockImage.stories'
 
 export default {
   title: 'Components/Blocks/BlockAccordion',
-  component: BlockAccordion
+  component: BlockAccordion,
+  tags: ['!autodocs'],
+  excludeStories: /.*Data$/
 }
 
+const AccordionItemStreamfieldData = [
+  {
+    blockType: 'RichTextBlock',
+    value:
+      '<p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit. Quisque vitae justo quis justo malesuada molestie. Cras sed tincidunt dui.</p>\n'
+  },
+  { ...BlockImageData, blockType: 'ImageBlock' },
+  {
+    blockType: 'RichTextBlock',
+    value:
+      '<p>Integer imperdiet blandit neque vitae euismod. Nulla aliquet lacus nibh,  vel tincidunt urna efficitur non. In et eros vitae ex posuere maximus  quis eget urna. Suspendisse fringilla posuere velit sit amet posuere.  Morbi malesuada bibendum vehicula. Donec faucibus ut erat ut mattis.  Suspendisse ornare, quam at placerat cursus, dolor mi lacinia nunc, eget  maximus augue nulla in dolor.</p>\n'
+  }
+]
+
+export const BlockAccordionData = {
+  blockType: 'AccordionBlock',
+  accordionItemsHeadingLevel: '3',
+  accordionItems: [
+    {
+      blockType: 'AccordionItemBlock',
+      blocks: [
+        {
+          blockType: 'CharBlock',
+          value: 'First Accordion Item'
+        },
+        {
+          blockType: 'AccordionBodyStreamfieldBlock',
+          blocks: AccordionItemStreamfieldData
+        }
+      ]
+    },
+    {
+      blockType: 'AccordionItemBlock',
+      blocks: [
+        {
+          blockType: 'CharBlock',
+          value: 'Second Accordion Item'
+        },
+        {
+          blockType: 'AccordionBodyStreamfieldBlock',
+          blocks: AccordionItemStreamfieldData
+        }
+      ]
+    },
+    {
+      blockType: 'AccordionItemBlock',
+      blocks: [
+        {
+          blockType: 'CharBlock',
+          value: 'Third Accordion Item'
+        },
+        {
+          blockType: 'AccordionBodyStreamfieldBlock',
+          blocks: AccordionItemStreamfieldData
+        }
+      ]
+    }
+  ]
+}
 // stories
 export const BaseStory = {
   name: 'BlockAccordion',
-  args: {
-    headingLevel: 'h5',
-    items: [
-      {
-        title: 'Title for the accordion',
-        body: BlockStreamfieldTruncatedData.body
-      },
-      {
-        title: 'Another',
-        body: BlockStreamfieldTruncatedData.body
-      },
-      {
-        title: 'Yet another',
-        body: BlockStreamfieldTruncatedData.body
-      }
-    ]
-  }
+  args: { data: BlockAccordionData }
 }

package/src/components/BlockAccordion/BlockAccordion.vue

@@ -1,32 +1,113 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
-import { AccordionItemObject } from '../../interfaces'
+import { computed, reactive } from 'vue'
+import type { AccordionItemObject, ImageBlock, ImageObject } from '../../interfaces'
 import BaseAccordionItem from './../BaseAccordionItem/BaseAccordionItem.vue'
+import BlockImageStandard from './../BlockImage/BlockImageStandard.vue'
+import BlockText from './../BlockText/BlockText.vue'
 
+interface AccordionItemCharBlock {
+  blockType: 'CharBlock'
+  value: string
+}
+interface RichTextBlock {
+  blockType: 'RichTextBlock'
+  text: string
+  variant: string
+}
+interface AccordionBodyStreamfieldBlock {
+  blockType: 'AccordionBodyStreamfieldBlock'
+  blocks: (ImageBlock | RichTextBlock)[]
+}
+interface AccordionItemBlock {
+  blockType: 'AccordionItemBlock'
+  blocks: (AccordionBodyStreamfieldBlock | AccordionItemCharBlock)[]
+}
+export interface AccordionBlockObject {
+  accordionItemsHeadingLevel: string
+  accordionItems: AccordionItemBlock[]
+}
 interface BlockAccordionProps {
-  autoClose?: boolean
-  headingLevel?: string
-  items?: AccordionItemObject[]
+  data: AccordionBlockObject
 }
 
 // define props
 const props = withDefaults(defineProps<BlockAccordionProps>(), {
-  autoClose: false,
-  headingLevel: 'h2',
-  items: undefined
+  data: undefined
 })
 
-const { headingLevel, items } = reactive(props)
+const { data } = reactive(props)
+
+const headingLevel = computed(() => {
+  return data ? `h${data?.accordionItemsHeadingLevel}` : undefined
+})
+
+const remappedAccordionItems = computed((): AccordionItemObject[] | undefined => {
+  if (data?.accordionItems) {
+    const remappedItems = data.accordionItems.map((item) => {
+      let title = ''
+      let body: (ImageBlock | RichTextBlock)[] = []
+
+      item.blocks.forEach((block) => {
+        if (block.blockType === 'CharBlock') {
+          title = (block as AccordionItemCharBlock).value || ''
+        } else if (block.blockType === 'AccordionBodyStreamfieldBlock') {
+          body = (block as AccordionBodyStreamfieldBlock).blocks || []
+        }
+      })
+      return {
+        title,
+        body
+      }
+    })
+    return remappedItems
+  }
+  return undefined
+})
 </script>
 <template>
-  <div class="BlockAccordion">
-    <slot>
-      <BaseAccordionItem
-        v-for="(item, index) in items"
-        :key="index"
-        :heading-level="headingLevel"
-        :item="item"
-      />
-    </slot>
+  <div class="BlockAccordion border-t border-gray-light-mid">
+    <BaseAccordionItem
+      v-for="(item, index) in remappedAccordionItems"
+      :key="index"
+      :heading-level="headingLevel"
+      :item="item"
+    >
+      <template #panelContents>
+        <div
+          v-if="item.body"
+          class="px-4 pb-8"
+        >
+          <div
+            v-for="(block, block_index) in item.body"
+            :key="block_index"
+            :class="{ 'mb-5': Number(block_index) + 1 != item.body.length }"
+          >
+            <template v-if="block.blockType === 'ImageBlock'">
+              <BlockImageStandard
+                class="AccordionItemImage"
+                :data="block.image as ImageObject"
+                :caption="block.caption"
+                :display-bacpotion="block.displayCaption"
+              />
+            </template>
+            <template v-else-if="block.blockType === 'RichTextBlock'">
+              <BlockText
+                :text="block.value"
+                variant="medium"
+              />
+            </template>
+          </div>
+        </div>
+      </template>
+    </BaseAccordionItem>
   </div>
 </template>
+<style lang="scss">
+.BlockAccordion {
+  .AccordionItemImage {
+    div.p-4 {
+      @apply px-0 #{!important};
+    }
+  }
+}
+</style>

package/src/components/BlockCardGrid/BlockCardGrid.vue

@@ -18,7 +18,7 @@
       />
     </div>
     <MixinCarousel
-      class="md:hidden sm:px-10 sm:-ml-10 py-10 -mt-10 overflow-x-visible"
+      class="md:hidden sm:-ml-10 py-14 lg:py-10 -mt-10 overflow-x-hidden"
       indent="col-1"
       :slides-per-view="3"
       no-links

package/src/components/BlockGist/BlockGist.stories.js

@@ -8,10 +8,9 @@ export default {
 
 export const BlockGistData = {
   blockType: 'GitHubGistBlock',
-  caption:
-    '<p data-block-key="a7ves">The count of contributions (summary of Pull Requests, opened issues and commits) to public repos at GitHub.com from Wed, 21 Sep 2022 till Thu, 21 Sep 2023.</p>',
+  caption: '<p>Caption for gist block</p>',
   id: 'cefc8e20-2833-4d0b-a4d6-7f469d5dbd02',
-  url: 'https://gist.github.com/paulmillr/2657075'
+  url: 'https://gist.github.com/nasajpledu/acb1a3f04895a9905570b267193d42ac'
 }
 
 // stories

package/src/components/BlockGist/BlockGist.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
+import BaseImageCaption from './../BaseImageCaption/BaseImageCaption.vue'
 import GitHub404 from './GitHub404.vue'
 interface BlockGistProps {
   data: {
@@ -46,7 +47,7 @@ watch(
       <GitHub404 />
     </template>
     <template v-else-if="gistUrl">
-      <div class="z-50 relative">
+      <div class="relative">
         <div
           id="iframe-description"
           class="sr-only"
@@ -79,7 +80,6 @@ watch(
           ref="frame"
           :src="gistUrl"
           :class="{ loaded }"
-          class="md:min-h-[313px] lg:min-h-[613px]"
           width="100%"
           frameborder="0"
           title="Code snippet display"
@@ -87,17 +87,15 @@ watch(
           aria-describedby="iframe-description"
           aria-hidden="false"
         ></iframe>
-        <div class="gist-caption">
-          <!-- eslint-disable-next-line vue/no-v-html -->
-          <span v-html="props.data.caption"></span>
-          <nuxt-link
-            :to="props.data.url"
-            target="_blank"
-            rel="noopener noreferrer"
-            title="View on GitHub"
-          >
-            {{ 'View on GitHub' }}
-          </nuxt-link>
+        <div
+          v-if="data.caption"
+          class="py-4"
+        >
+          <BaseImageCaption
+            :data="data"
+            :custom-link="props.data.url"
+            custom-link-text="View on GitHub"
+          />
         </div>
       </div>
     </template>
@@ -106,8 +104,6 @@ watch(
 
 <style scoped lang="scss">
 .BlockGist {
-  margin: 2rem 0;
-
   .GitHubIcon {
     @apply h-5 pb-0.5 flex flex-row items-baseline flex-grow-0;
   }
@@ -115,31 +111,12 @@ watch(
   iframe {
     @apply border border-gray-light-mid border-t-8 rounded-none;
   }
-
-  .gist-caption {
-    @apply text-sm font-medium m-1 flex-wrap;
-
-    span {
-      p {
-        @apply text-gray-mid;
-      }
-    }
-
-    a {
-      @apply underline text-action can-hover:hover:text-action-dark cursor-pointer;
-      white-space: nowrap; /* Prevents the link from wrapping onto a new line */
-    }
-  }
 }
 body.ThemeVariantLight {
   .BlockGist {
     iframe {
       @apply border-gray-light-mid;
     }
-
-    .gist-caption {
-      @apply text-gray-mid-dark;
-    }
   }
 }
 
@@ -148,10 +125,6 @@ body.ThemeVariantDark {
     iframe {
       @apply border-gray-mid-dark bg-gray-light;
     }
-
-    .gist-caption {
-      @apply text-gray-light-mid;
-    }
   }
 }
 </style>

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

@@ -1,3 +1,4 @@
+import { BlockAccordionData } from './../BlockAccordion/BlockAccordion.stories'
 import { BlockCardGridData } from './../BlockCardGrid/BlockCardGrid.stories'
 import { BlockCtaData } from './../BlockCta/BlockCta.stories'
 import { BlockHeadingData } from './../BlockHeading/BlockHeading.stories'
@@ -20,6 +21,7 @@ import BlockStreamfield, { variants } from './BlockStreamfield.vue'
 export default {
   title: 'Components/Blocks/BlockStreamfield',
   component: BlockStreamfield,
+  tags: ['!autodocs'],
   argTypes: {
     variant: {
       control: { type: 'select' },
@@ -85,11 +87,18 @@ export const BlockStreamfieldData = {
       heading: 'Heading 2',
       level: 'h2'
     },
+    BlockAccordionData,
     {
       blockType: 'HeadingBlock',
       heading: 'Heading 3',
       level: 'h3'
     },
+    {
+      blockType: 'GitHubGistBlock',
+      caption: '<p>Caption for gist block</p>',
+      id: 'cefc8e20-2833-4d0b-a4d6-7f469d5dbd02',
+      url: 'https://gist.github.com/nasajpledu/acb1a3f04895a9905570b267193d42ac'
+    },
     {
       blockType: 'RichTextBlock',
       value:

package/src/components/BlockStreamfield/BlockStreamfield.vue

@@ -169,7 +169,7 @@
       <LayoutHelper
         v-else-if="block.blockType == 'GitHubGistBlock'"
         :key="`GitHubGistBlock${index}`"
-        indent="col-2"
+        indent="col-3"
         class="lg:mb-18 mb-10"
       >
         <BlockGist :data="block" />
@@ -199,13 +199,21 @@
         :data="block"
       />
 
-      <LayoutHelper
+      <div
         v-else-if="block.blockType == 'ListBlock' && block.field === 'card_grid'"
-        :key="`gridBlock${index}`"
-        indent="col-1"
+        :key="`cardGridBlock${index}`"
         class="lg:mb-18 mb-10"
       >
         <BlockCardGrid :cards="block.items" />
+      </div>
+
+      <LayoutHelper
+        v-else-if="block.blockType == 'AccordionBlock'"
+        :key="`accordionBlock${index}`"
+        indent="col-3"
+        class="lg:mb-18 mb-10"
+      >
+        <BlockAccordion :data="block as unknown as AccordionBlockObject" />
       </LayoutHelper>
 
       <div
@@ -248,6 +256,9 @@ import BlockVideoEmbed, {
   type BlockData as VideoBlockEmbedData
 } from './../BlockVideoEmbed/BlockVideoEmbed.vue'
 import BlockAnchor from './../BlockAnchor/BlockAnchor.vue'
+import BlockAccordion from './../BlockAccordion/BlockAccordion.vue'
+import { type AccordionBlockObject } from './../BlockAccordion/BlockAccordion.vue'
+
 interface Variants {
   [key: string]: string
 }
@@ -281,7 +292,8 @@ export default defineComponent({
     BlockGist,
     BlockVideo,
     BlockVideoEmbed,
-    BlockAnchor
+    BlockAnchor,
+    BlockAccordion
   },
   props: {
     variant: {

package/src/components/BlockTeaser/BlockTeaser.vue

@@ -115,16 +115,14 @@ export default defineComponent({
      * Fall back to the linked page’s label, if there is one.
      */
     theLabel(): string {
-      return (
-        this.customLabel || this.label || (this.theTeaserPage && this.theTeaserPage.label) || ''
-      )
+      return this.customLabel || this.label || this.theTeaserPage?.label || ''
     },
 
     /**
      * Fall back to the linked page’s title, if there is one.
      */
     theHeading(): string {
-      return this.heading || (this.theTeaserPage && this.theTeaserPage.title) || ''
+      return this.heading || this.theTeaserPage?.title || ''
     },
 
     /**
@@ -146,25 +144,30 @@ export default defineComponent({
     },
     // necessary as the streamfield teaser block passes an array of blocks
     // this is necessary to retrieve the label from the teaser pages
-    theTeaserPage(): teaserPageObject | null {
-      if (this.teaserPage && typeof this.teaserPage === 'object') {
+    theTeaserPage(): teaserPageObject | undefined {
+      if (this.teaserPageBlock) {
+        return this.teaserPageBlock
+      } else if (this.teaserPage && typeof this.teaserPage === 'object') {
         return this.teaserPage as teaserPageObject
-      } else if (this.teaserPage && Object.keys(this.teaserPage).length) {
-        const parsedTeaserPage = this.getTeaserPageBlock()
-        if (parsedTeaserPage) {
-          return parsedTeaserPage[0].page
+      }
+      return undefined
+    },
+    teaserPageBlock(): teaserPageObject | undefined {
+      if (Array.isArray(this.teaserPage) && this.teaserPage?.length) {
+        const filteredBlocks = this.teaserPage.filter(
+          (block: teaserPageBlock) => block.blockType === 'PageChooserBlock'
+        )
+        if (filteredBlocks?.length) {
+          return filteredBlocks[0].page
         }
       }
-      return null
+      return undefined
     }
   },
   methods: {
-    getTeaserPageBlock(): teaserPageBlock[] | null {
-      if (this.teaserPage && this.teaserPage.length) {
-        const theBlocks = this.teaserPage
-        return theBlocks.filter((block: teaserPageBlock) => block.blockType === 'PageChooserBlock')
-      }
-      return null
+    getTeaserPageBlock(page: any[]): teaserPageBlock[] | null {
+      const theBlocks = page
+      return theBlocks.filter((block: teaserPageBlock) => block.blockType === 'PageChooserBlock')
     }
   }
 })

package/src/components/NavDesktop/NavDesktop.stories.js

@@ -120,14 +120,10 @@ export const NavDesktopData = {
           title: 'Missions'
         },
         {
-          ...MenuLinkColumnWithHeaderData,
-          heading: null,
-          headingPage: null
+          ...MenuLinkColumnWithHeaderData
         },
         {
-          ...MenuLinkColumnWithHeaderData,
-          heading: null,
-          headingPage: null
+          ...MenuLinkColumnWithHeaderData
         }
       ]
     },

package/src/components/NavHeading/NavHeading.vue

@@ -15,7 +15,7 @@
     </template>
     <template v-else-if="data.heading">
       <div class="text-subtitle text-jpl-blue-lighter edu:text-primary-lighter inline-block mb-4">
-        <span class="p-2">{{ data.heading }}</span>
+        <span class="px-2 block">{{ data.heading }}</span>
       </div>
     </template>
   </div>

package/src/components/NavJumpMenu/NavJumpMenu.vue

@@ -50,6 +50,7 @@ interface NavJumpMenuProps {
   headingLevel?: string
   invert?: boolean
   enabled?: boolean
+  dropdownText?: string
 }
 
 const props = withDefaults(defineProps<NavJumpMenuProps>(), {
@@ -59,7 +60,8 @@ const props = withDefaults(defineProps<NavJumpMenuProps>(), {
   headingLevel: 'h2',
   enabled: true,
   invert: true,
-  hidden: false
+  hidden: false,
+  dropdownText: 'Jump to…'
 })
 
 const NavJumpMenuRef = ref()
@@ -102,7 +104,7 @@ const theBreadcrumbs = computed(() => {
         path: '#siteTop'
       }
   const jumpMenu: BreadcrumbPathObject = {
-    title: 'Jump to…',
+    title: props.dropdownText,
     path: '#',
     children: theJumpLinks.value as BreadcrumbPathObject[]
   }
@@ -139,5 +141,15 @@ watch(
       @apply opacity-100 transition-all pointer-events-auto;
     }
   }
+  .NavSecondaryLink.secondary-root {
+    span {
+      @apply border-primary #{!important};
+    }
+    &.-invert {
+      span {
+        @apply border-white #{!important};
+      }
+    }
+  }
 }
 </style>

package/src/components/NavLinkList/NavLinkList.stories.js

@@ -18,7 +18,7 @@ export default {
 
 export const MenuLinkColumnWithHeaderData = {
   blockType: 'MenuLinkColumnWithHeader',
-  heading: 'The Heading',
+  heading: 'Online Resources',
   headingPage: {
     url: '/solar-system/'
   },