@explorer-1/vue 0.2.22 → 0.2.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.22",
+  "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/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/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'
@@ -86,6 +87,7 @@ export const BlockStreamfieldData = {
       heading: 'Heading 2',
       level: 'h2'
     },
+    BlockAccordionData,
     {
       blockType: 'HeadingBlock',
       heading: 'Heading 3',

package/src/components/BlockStreamfield/BlockStreamfield.vue

@@ -207,6 +207,15 @@
         <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
         v-else
         :key="index"
@@ -247,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
 }
@@ -280,7 +292,8 @@ export default defineComponent({
     BlockGist,
     BlockVideo,
     BlockVideoEmbed,
-    BlockAnchor
+    BlockAnchor,
+    BlockAccordion
   },
   props: {
     variant: {

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/NavSecondary/NavSecondaryDropdown.vue

@@ -9,7 +9,7 @@
     <NavDropdownToggle
       :aria-expanded="dropdownVisible ? true : false"
       :path="item.path"
-      class="font-medium border-t-2 border-transparent block px-3 py-2"
+      class="-t-2 border-transparent block px-3 py-2"
       :class="dropdownToggleClasses(index)"
       :invert="invert"
       @toggle-clicked="toggleDropdown()"
@@ -69,7 +69,6 @@ export default defineComponent({
       type: Object,
       required: true
     },
-
     invert: {
       type: Boolean,
       required: false,
@@ -121,13 +120,13 @@ export default defineComponent({
     dropdownToggleClasses(index: number) {
       return this.invert
         ? {
-            'mr-auto text-white font-semibold secondary-root': index === 0,
-            'text-white': index !== 0,
+            'mr-auto text-white font-bold secondary-root': index === 0,
+            'text-white font-semibold !pt-[.6rem]': index !== 0,
             '-open': this.dropdownVisible
           }
         : {
             'mr-auto text-primary font-semibold secondary-root': index === 0,
-            'text-gray-dark': index !== 0,
+            'text-gray-dark font-medium !pt-[.6rem]': index !== 0,
             '-open': this.dropdownVisible
           }
     },

package/src/components/NavSecondary/NavSecondaryLink.vue

@@ -50,11 +50,13 @@ export default defineComponent({
       return false
     },
     baseLinkClasses(index: number | undefined) {
-      let rootClasses = 'mr-auto font-semibold secondary-root'
+      let rootClasses = 'mr-auto secondary-root'
       rootClasses = this.invert
-        ? `${rootClasses} text-white -invert`
-        : `${rootClasses} text-primary`
-      const regularClasses = this.invert ? 'text-white -invert' : 'text-gray-dark'
+        ? `${rootClasses} text-white font-bold -invert`
+        : `${rootClasses} text-primary font-semibold`
+      const regularClasses = this.invert
+        ? 'text-white -invert font-semibold'
+        : 'text-gray-dark font-medium'
       return index === 0 ? rootClasses : regularClasses
     },
     spanClasses(index: number | undefined) {

package/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue

@@ -131,6 +131,7 @@ export default defineComponent({
       :title="data.title"
       :blocks="data.body"
       :enabled="data.showJumpMenu"
+      dropdown-text="In this article"
     />
     <!-- inline hero content -->
     <LayoutHelper

package/src/templates/edu/PageEduLesson/PageEduLesson.vue

@@ -368,6 +368,7 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
       :title="data.title"
       :blocks="consolidatedBlocks"
       :enabled="true"
+      dropdown-text="In this lesson"
     />
 
     <template

package/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue

@@ -72,6 +72,7 @@ defineExpose({
       :title="data.title"
       :blocks="data.body"
       :enabled="data.showJumpMenu"
+      dropdown-text="In this news article"
     />
 
     <!-- schema.org -->