diff --git a/packages/common/src/scss/_grid.scss b/packages/common/src/scss/_grid.scss index 23318452..161f831e 100644 --- a/packages/common/src/scss/_grid.scss +++ b/packages/common/src/scss/_grid.scss @@ -92,10 +92,10 @@ } } - // for use on pages with flush-top hero sections + // for use on pages with flush-top hero sections // doesn't apply to EDU .-nav-offset { @screen lg { - @apply -mt-1; // get rid of the barely visible white line + @apply mt-0; // get rid of the barely visible white line } } } diff --git a/packages/vue/src/components/BaseCarousel/BaseCarousel.vue b/packages/vue/src/components/BaseCarousel/BaseCarousel.vue new file mode 100644 index 00000000..f446f3b4 --- /dev/null +++ b/packages/vue/src/components/BaseCarousel/BaseCarousel.vue @@ -0,0 +1,152 @@ + + + diff --git a/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue b/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue index 7ac4d8a8..24a62404 100644 --- a/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue +++ b/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue @@ -133,6 +133,7 @@ v-else-if="metadataAttrs.type === 'resource'" :resource="theItem as EduResourceCardObject" :variant="metadataAttrs.icons" + :show-time="true" compact /> diff --git a/packages/vue/src/components/HeroListingIndex/HeroListingIndex.stories.js b/packages/vue/src/components/HeroListingIndex/HeroListingIndex.stories.js index 1abcb3b8..ea2c1c89 100644 --- a/packages/vue/src/components/HeroListingIndex/HeroListingIndex.stories.js +++ b/packages/vue/src/components/HeroListingIndex/HeroListingIndex.stories.js @@ -11,26 +11,24 @@ export default { // data export const HeroListingIndexData = { - listingPage: { - featured: { - __typename: 'EDUExplainerArticlePage', - topicLabel: 'Mars', - url: '/news/new-maps-open-roads-to-research/', - title: 'Creating Robots to go Where Humans Can’t', - image: { - src: { - url: 'https://picsum.photos/id/973/1800/1200', - width: 1800, - height: 1200 - }, - srcSet: - 'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w, https://picsum.photos/id/865/1800/963 1800w', - screenMd: { - url: 'https://picsum.photos/id/921/800/640' - }, - screenSm: { - url: 'https://picsum.photos/id/247/640/900' - } + featuredPage: { + __typename: 'EDUExplainerArticlePage', + topicLabel: 'Mars', + url: '/news/new-maps-open-roads-to-research/', + title: 'Creating Robots to go Where Humans Can’t', + image: { + src: { + url: 'https://picsum.photos/id/973/1800/1200', + width: 1800, + height: 1200 + }, + srcSet: + 'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w, https://picsum.photos/id/865/1800/963 1800w', + screenMd: { + url: 'https://picsum.photos/id/921/800/640' + }, + screenSm: { + url: 'https://picsum.photos/id/247/640/900' } } } @@ -42,7 +40,7 @@ export const BaseStory = { name: 'HeroListingIndex', args: { customLabel: 'Featured', - pageData: HeroListingIndexData.listingPage + pageData: HeroListingIndexData.featuredPage } } @@ -50,31 +48,29 @@ export const NewsImageHero = { args: { customLabel: 'Featured', pageData: { - featured: { - topicLabel: 'Mars', - url: '/news/new-maps-open-roads-to-research/', - title: 'Creating Robots to go Where Humans Can’t', - heroBlocks: [ - { - blockType: 'ImageChooserBlock', - listingPageHeroImage: { - src: { - url: 'https://picsum.photos/id/973/1800/1200', - width: 1800, - height: 1200 - }, - srcSet: - 'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w, https://picsum.photos/id/865/1800/963 1800w', - screenMd: { - url: 'https://picsum.photos/id/921/800/640' - }, - screenSm: { - url: 'https://picsum.photos/id/247/640/900' - } + topicLabel: 'Mars', + url: '/news/new-maps-open-roads-to-research/', + title: 'Creating Robots to go Where Humans Can’t', + heroBlocks: [ + { + blockType: 'ImageChooserBlock', + listingPageHeroImage: { + src: { + url: 'https://picsum.photos/id/973/1800/1200', + width: 1800, + height: 1200 + }, + srcSet: + 'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w, https://picsum.photos/id/865/1800/963 1800w', + screenMd: { + url: 'https://picsum.photos/id/921/800/640' + }, + screenSm: { + url: 'https://picsum.photos/id/247/640/900' } } - ] - } + } + ] } } } @@ -83,20 +79,18 @@ export const NewsVideoHero = { args: { customLabel: 'Featured', pageData: { - featured: { - topicLabel: 'Mars', - url: '/news/new-maps-open-roads-to-research/', - title: 'Creating Robots to go Where Humans Can’t', - heroBlocks: [ - { - blockType: 'VideoBlock', - video: { - file: '/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.mp4', - fileWebm: '/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.webm' - } + topicLabel: 'Mars', + url: '/news/new-maps-open-roads-to-research/', + title: 'Creating Robots to go Where Humans Can’t', + heroBlocks: [ + { + blockType: 'VideoBlock', + video: { + file: '/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.mp4', + fileWebm: '/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.webm' } - ] - } + } + ] } } } @@ -105,52 +99,50 @@ export const NewsCarouselHero = { args: { customLabel: 'Featured', pageData: { - featured: { - topicLabel: 'Mars', - url: '/news/new-maps-open-roads-to-research/', - title: 'Creating Robots to go Where Humans Can’t', - heroBlocks: [ - { - blockType: 'CarouselBlock', - blocks: [ - { - listingPageHeroImage: { - src: { - url: 'https://picsum.photos/id/973/1800/1200', - width: 1800, - height: 1200 - }, - srcSet: - 'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w, https://picsum.photos/id/865/1800/963 1800w', - screenMd: { - url: 'https://picsum.photos/id/921/800/640' - }, - screenSm: { - url: 'https://picsum.photos/id/247/640/900' - } + topicLabel: 'Mars', + url: '/news/new-maps-open-roads-to-research/', + title: 'Creating Robots to go Where Humans Can’t', + heroBlocks: [ + { + blockType: 'CarouselBlock', + blocks: [ + { + listingPageHeroImage: { + src: { + url: 'https://picsum.photos/id/973/1800/1200', + width: 1800, + height: 1200 + }, + srcSet: + 'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w, https://picsum.photos/id/865/1800/963 1800w', + screenMd: { + url: 'https://picsum.photos/id/921/800/640' + }, + screenSm: { + url: 'https://picsum.photos/id/247/640/900' } - }, - { - listingPageHeroImage: { - src: { - url: 'https://picsum.photos/id/973/1800/1200', - width: 1800, - height: 1200 - }, - srcSet: - 'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w, https://picsum.photos/id/865/1800/963 1800w', - screenMd: { - url: 'https://picsum.photos/id/921/800/640' - }, - screenSm: { - url: 'https://picsum.photos/id/247/640/900' - } + } + }, + { + listingPageHeroImage: { + src: { + url: 'https://picsum.photos/id/973/1800/1200', + width: 1800, + height: 1200 + }, + srcSet: + 'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w, https://picsum.photos/id/865/1800/963 1800w', + screenMd: { + url: 'https://picsum.photos/id/921/800/640' + }, + screenSm: { + url: 'https://picsum.photos/id/247/640/900' } } - ] - } - ] - } + } + ] + } + ] } } } diff --git a/packages/vue/src/components/HeroListingIndex/HeroListingIndex.vue b/packages/vue/src/components/HeroListingIndex/HeroListingIndex.vue index 41828a88..92f9153e 100644 --- a/packages/vue/src/components/HeroListingIndex/HeroListingIndex.vue +++ b/packages/vue/src/components/HeroListingIndex/HeroListingIndex.vue @@ -1,20 +1,18 @@