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" /> + @@ -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',