@explorer-1/vue 0.2.21 → 0.2.23

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/components/TheFooter/TheFooter.vue

@@ -32,7 +32,7 @@
             <BaseLink
               variant="none"
               href="https://www.nasa.gov/learning-resources/"
-              class="text-subtitle text-blue edu:text-white mb-3"
+              class="text-subtitle text-blue edu:text-white sm:mb-3 xl:col-span-2 md:col-span-3 col-span-4 mb-8"
               link-class="flex flex-wrap-none overflow-visible whitespace-nowrap items-center"
               external-target-blank
             >

package/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.stories.js

@@ -13,6 +13,7 @@ import PageEduExplainerArticle from './PageEduExplainerArticle.vue'
 export default {
   title: 'Templates/EDU/PageEduExplainerArticle',
   component: PageEduExplainerArticle,
+  tags: ['!autodocs'],
   decorators: [
     () => ({
       template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
@@ -28,6 +29,7 @@ export default {
 }
 
 export const BaseStory = {
+  name: 'PageEduExplainerArticle',
   args: {
     data: {
       __typename: 'EDUExplainerArticlePage',
@@ -50,7 +52,7 @@ export const BaseStory = {
       showJumpMenu: true,
       ...BlockStreamfieldTruncatedData,
       publicationDate: '2024-07-09',
-      summary: 'Summary of resource article',
+      topper: 'Topper of resource article',
       getTopicsForDisplay: [
         {
           __typename: 'TopicPage',

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

@@ -5,6 +5,7 @@ import BaseImagePlaceholder from './../../../components/BaseImagePlaceholder/Bas
 import BlockImageCarousel from './../../../components/BlockImageCarousel/BlockImageCarousel.vue'
 import BlockImageComparison from './../../../components/BlockImageComparison/BlockImageComparison.vue'
 import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
+import BlockText from './../../../components/BlockText/BlockText.vue'
 import BlockVideo from './../../../components/BlockVideo/BlockVideo.vue'
 import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
 import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
@@ -30,6 +31,7 @@ export default defineComponent({
     BlockImageComparison,
     BlockLinkCarousel,
     BlockRelatedLinks,
+    BlockText,
     BlockVideo,
     NavJumpMenu
   },
@@ -129,6 +131,7 @@ export default defineComponent({
       :title="data.title"
       :blocks="data.body"
       :enabled="data.showJumpMenu"
+      dropdown-text="In this article"
     />
     <!-- inline hero content -->
     <LayoutHelper
@@ -170,17 +173,16 @@ export default defineComponent({
       />
     </LayoutHelper>
 
-    <!-- summary and topper -->
     <LayoutHelper
+      v-if="data.topper"
       indent="col-3"
       class="lg:mb-8 mb-5"
     >
-      <p
-        class="text-body-lg font-semibold"
-        itemprop="abstract"
-      >
-        {{ data.summary }}
-      </p>
+      <BlockText
+        v-if="data.topper"
+        class="lg:mb-8 mb-5 px-4 lg:px-0"
+        :text="data.topper"
+      />
     </LayoutHelper>
 
     <!-- streamfield blocks -->

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 -->