@explorer-1/vue 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "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/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"