diff --git a/packages/vue/src/components/BlockLinkCard/BlockLinkCard.stories.js b/packages/vue/src/components/BlockLinkCard/BlockLinkCard.stories.js
index 0be0ec46..9c26bd70 100644
--- a/packages/vue/src/components/BlockLinkCard/BlockLinkCard.stories.js
+++ b/packages/vue/src/components/BlockLinkCard/BlockLinkCard.stories.js
@@ -258,6 +258,7 @@ export const LargeEduExplainerArticle = {
}
}
}
+
export const EduCollection = {
decorators: [
() => ({
@@ -325,3 +326,50 @@ export const EduCollectionLarge = {
}
}
}
+
+export const EduNewsItem = {
+ decorators: [
+ () => ({
+ template: `
`
+ })
+ ],
+ args: {
+ ...BlockLinkCardData,
+ data: {
+ page: {
+ ...BlockLinkCardData.data,
+ __typename: 'EDUNewsPage'
+ }
+ },
+ headingLevel: 'h2',
+ size: 'sm'
+ }
+}
+
+export const ExternalLink = {
+ decorators: [
+ () => ({
+ template: `
`
+ })
+ ],
+ args: {
+ data: {
+ __typename: 'ExternalLinkCardWithDescription',
+ externalLink: 'https://nasa.gov',
+ title: 'External Link',
+ label: 'Dolor Sit',
+ summary:
+ 'Cras rhoncus lorem condimentum tellus rhoncus dictum. Maecenas finibus nibh lorem, quis ornare est vulputate et. Nulla imperdiet ultrices est, ac mattis justo consequat sit amet.',
+ thumbnailImage: {
+ __typename: 'CustomImage',
+ src: {
+ __typename: 'CustomRendition',
+ url: 'https://picsum.photos/512/288',
+ width: '512',
+ height: '288'
+ }
+ }
+ },
+ headingLevel: 'h2'
+ }
+}
diff --git a/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue b/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue
index 09b88e9b..21155e47 100644
--- a/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue
+++ b/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue
@@ -59,10 +59,17 @@
:content-type="metadataType"
:text="(theItem as EventCardObject).eventType"
/>
+
+
+
+ {{ theItem.label }}
+
+
+
@@ -177,6 +190,7 @@ import { useThemeStore } from '../../store/theme'
import { mixinFormatEventDates } from './../../utils/mixins'
import type { HeadingLevel } from './../BaseHeading/BaseHeading.vue'
import IconArrow from './../Icons/IconArrow.vue'
+import IconExternal from './../Icons/IconExternal.vue'
import BaseLink from './../BaseLink/BaseLink.vue'
import BaseImage from './../BaseImage/BaseImage.vue'
import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
@@ -191,6 +205,7 @@ export default defineComponent({
name: 'BlockLinkCard',
components: {
IconArrow,
+ IconExternal,
BaseLink,
BaseImage,
BaseImagePlaceholder,
diff --git a/packages/vue/src/constants.ts b/packages/vue/src/constants.ts
index bfbae476..43229d70 100644
--- a/packages/vue/src/constants.ts
+++ b/packages/vue/src/constants.ts
@@ -1,6 +1,12 @@
import type { PillDictionaryInterface } from './interfaces'
export const eduMetadataDictionary: PillDictionaryInterface = {
+ EDUNewsPage: {
+ label: 'News',
+ variant: 'primary',
+ icons: 'primary',
+ type: undefined
+ },
EDUEventPage: {
label: 'Event',
variant: 'primary',