@explorer-1/vue 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -28,7 +28,7 @@
     "vue": "^3.4.21",
     "vue-observe-visibility": "^1.0.0",
     "vue3-compare-image": "^1.2.5",
-    "@explorer-1/common": "1.0.4"
+    "@explorer-1/common": "1.0.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/BaseHeading/BaseHeading.vue

@@ -26,7 +26,7 @@ export default defineComponent({
     size: {
       type: String as PropType<HeadingLevel>,
       required: false,
-      default: 'h2',
+      default: '',
       validator: (prop: string): boolean => Object.keys(headings).includes(prop)
     }
   },

package/src/components/BlockHeading/BlockHeading.vue

@@ -2,7 +2,6 @@
   <BaseHeading
     v-if="data"
     :level="data.level"
-    :size="data.size"
   >
     {{ data.heading }}
   </BaseHeading>

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

@@ -49,6 +49,16 @@ export const BlockStreamfieldData = {
         '<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><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'
     },
     BlockInlineImageData.block,
+    {
+      blockType: 'HeadingBlock',
+      heading: 'Heading 2',
+      level: 'h2'
+    },
+    {
+      blockType: 'HeadingBlock',
+      heading: 'Heading 3',
+      level: 'h3'
+    },
     {
       blockType: 'RichTextBlock',
       value:

package/src/components/BlockTable/BlockTable.vue

@@ -65,9 +65,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import '@explorer-1/common/src/scss/typography';
-// required for @apply text-subtitle in _BlockTable.scss
-@import '@explorer-1/common/src/scss/components/BlockText';
-// required for @extend .BlockText in _BlockTable.scss
 @import '@explorer-1/common/src/scss/components/BlockTable';
 </style>

package/src/components/NavDesktopEdu/NavDesktopEdu.vue

@@ -8,13 +8,11 @@
       'transition-transform': scrollTop > 0 && scrolledCurrentPage, // If not at the top of the page, just transition the transform to prevents content from peeking through on header reveal.
       'transform -translate-y-full': !scrolledUp && !headerVisible,
       '-scrolled transform translate-y-0': scrolledUp && headerVisible && scrollTop > 0,
-      '-transparent': invert,
       '-hasSecondary': !headerStore?.highlightPrimary
     }"
   >
     <!-- navbar -->
     <div class="header-bg z-10 max-w-screen-3xl absolute inset-0 mx-auto"></div>
-    <div class="bg-primary z-0 absolute right-0 w-1/2 top-0 bottom-0"></div>
     <div class="px-4">
       <div class="h-18 container flex items-center justify-between mx-auto">
         <!-- branding -->
@@ -287,29 +285,5 @@ export default defineComponent({
       }
     }
   }
-
-  &.-scrolled {
-    @apply border-b border-gray-mid border-opacity-50 bg-white;
-
-    &.-transparent {
-      > .header-bg {
-        @apply opacity-0 bg-white;
-      }
-
-      .main-navigation {
-        > * {
-          @apply text-gray-dark;
-
-          .NavDesktopDropdown > button {
-            text-shadow: none;
-          }
-        }
-      }
-    }
-
-    &.-hasSecondary {
-      @apply border-0 border-transparent;
-    }
-  }
 }
 </style>

package/src/components/NavSecondary/NavSecondary.vue

@@ -139,7 +139,7 @@ export default defineComponent({
 <style lang="scss">
 .NavSecondary {
   top: -1px; // for intersection observer to work
-  @apply sticky z-50 w-full bg-white border-b border-gray-mid border-opacity-0 transition-border-opacity duration-150 ease-in;
+  @apply sticky z-50 w-full bg-white border-b edu:border-0 border-gray-mid border-opacity-0 transition-border-opacity duration-150 ease-in;
   @apply hidden;
   @screen lg {
     @apply block;

package/src/templates/PageContent/PageContent.vue

@@ -1,12 +1,16 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { useRoute } from 'vue-router'
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
+
 import HeroMedia from '@explorer-1/vue/src/components/HeroMedia/HeroMedia.vue'
 import NavSecondary from '@explorer-1/vue/src/components/NavSecondary/NavSecondary.vue'
 import LayoutHelper from '@explorer-1/vue/src/components/LayoutHelper/LayoutHelper.vue'
 import DetailHeadline from '@explorer-1/vue/src/components/DetailHeadline/DetailHeadline.vue'
 import BlockImageStandard from '@explorer-1/vue/src/components/BlockImage/BlockImageStandard.vue'
 import ShareButtons from '@explorer-1/vue/src/components/ShareButtons/ShareButtons.vue'
+import ShareButtonsEdu from '@explorer-1/vue/src/components/ShareButtonsEdu/ShareButtonsEdu.vue'
 import BlockStreamfield from '@explorer-1/vue/src/components/BlockStreamfield/BlockStreamfield.vue'
 import BlockRelatedLinks from '@explorer-1/vue/src/components/BlockRelatedLinks/BlockRelatedLinks.vue'
 import FormContact from '@explorer-1/vue/src/components/FormContact/FormContact.vue'
@@ -24,6 +28,7 @@ export default defineComponent({
     DetailHeadline,
     BlockImageStandard,
     ShareButtons,
+    ShareButtonsEdu,
     BlockStreamfield,
     BlockRelatedLinks,
     FormContact,
@@ -38,6 +43,10 @@ export default defineComponent({
     }
   },
   computed: {
+    ...mapStores(useThemeStore),
+    isEdu() {
+      return this.themeStore.theme === 'ThemeEdu'
+    },
     heroInline() {
       if (this.data?.heroPosition === 'inline') {
         return true
@@ -92,6 +101,13 @@ export default defineComponent({
         :label="data.displayLabel"
         :class="{ 'sr-only': hideH1 }"
       />
+      <ShareButtonsEdu
+        v-if="isEdu && data?.url"
+        class="mt-4"
+        :url="data.url"
+        :title="data.title"
+        :image="data.thumbnailImage?.original"
+      />
     </LayoutHelper>
 
     <!-- inline hero -->
@@ -114,7 +130,7 @@ export default defineComponent({
       class="lg:mb-0 relative mb-8"
     >
       <ShareButtons
-        v-if="data.title && data.url"
+        v-if="data.title && data.url && !isEdu"
         :title="data.title"
         :url="data.url"
       />

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

@@ -0,0 +1,31 @@
+import { ContentPageData } from './../PageContent/PageContent.stories.js'
+import PageContent from './../PageContent/PageContent.vue'
+
+export default {
+  title: 'Templates/EDU/PageContent',
+  component: PageContent,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="ThemeEdu"><story/></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    },
+    docs: {
+      description: {
+        component:
+          'EDU uses the same `PageContent` component as WWW. The only difference is the theme class used on the site.'
+      }
+    }
+  },
+  excludeStories: /.*(Data)$/
+}
+
+// stories
+export const BaseStory = {
+  args: {
+    data: ContentPageData
+  }
+}

package/src/templates/edu/PageEduNewsDetail.vue

@@ -101,7 +101,7 @@ const dateTimeArray = computed(() => {
         :topics="data.getTopicsForDisplay"
         schema
       />
-      <share-buttons-edu
+      <ShareButtonsEdu
         v-if="data?.url"
         class="mt-4"
         :url="data.url"