From 54c5b767b4e2d00eeefde29fbced7f1adb6380bd Mon Sep 17 00:00:00 2001 From: tinuola <24995224+tinuola@users.noreply.github.com> Date: Fri, 15 Dec 2023 13:35:05 -0800 Subject: [PATCH] feat: APPS-2468 BannerText component (#424) * fix: changes from rebase * feat: add BannerText comp, spec, stories * fix: use of index in v-for directive * feat: add BannerHeader comp, spec, stories, types * fix: rebase * fix: syntax update * fix: syntax update * fix: syntax updates * task: remove commented out code --------- Co-authored-by: tinuola --- src/lib-components/BannerFeatured.vue | 2 +- src/lib-components/BannerHeader.vue | 10 +- src/lib-components/BannerText.vue | 615 ++++++++++++++++++ src/lib-components/BlockCardWithImage.vue | 2 +- src/lib-components/BlockClippedDate.vue | 2 +- src/lib-components/BlockFloatingHighlight.vue | 2 +- .../Flexible/MediaGallery/NewLightbox.vue | 4 +- src/lib-components/MastheadPrimary.vue | 2 +- src/lib-components/MastheadSecondary.vue | 2 +- src/lib-components/ResponsiveImage.vue | 2 +- src/lib-components/index.js | 1 + src/stories/BannerText.spec.js | 26 + src/stories/BannerText.stories.js | 274 ++++++++ 13 files changed, 931 insertions(+), 13 deletions(-) create mode 100644 src/lib-components/BannerText.vue create mode 100644 src/stories/BannerText.spec.js create mode 100644 src/stories/BannerText.stories.js diff --git a/src/lib-components/BannerFeatured.vue b/src/lib-components/BannerFeatured.vue index 86009c140..8481ecc04 100644 --- a/src/lib-components/BannerFeatured.vue +++ b/src/lib-components/BannerFeatured.vue @@ -34,7 +34,7 @@ import getSectionName from '@/utils/getSectionName' const props = defineProps({ image: { type: Object as PropType, - default: () => ({}), + default: () => {}, }, title: { type: String, diff --git a/src/lib-components/BannerHeader.vue b/src/lib-components/BannerHeader.vue index 4993ce6b0..7eec50e4a 100644 --- a/src/lib-components/BannerHeader.vue +++ b/src/lib-components/BannerHeader.vue @@ -17,7 +17,7 @@ import ResponsiveImage from '@/lib-components/ResponsiveImage.vue' // Enable BlockForm in template // import BlockForm from '@/lib-components/BlockForm.vue' -import type { BylineItemType, ImageItemType, LocationItemType, SubjectAreaItemType } from '@/types/types' +import type { ImageItemType, LocationItemType, SubjectAreaItemType } from '@/types/types' // Utility functions import formatEventTimes from '@/utils/formatEventTimes' @@ -27,7 +27,7 @@ import getSectionName from '@/utils/getSectionName' const props = defineProps({ image: { type: Object as PropType, - default: () => ({}), + default: () => {}, }, title: { type: String, @@ -38,7 +38,7 @@ const props = defineProps({ default: '', }, byline: { - type: Array as PropType, + type: Array as PropType, default: () => [], }, contributors: { @@ -291,7 +291,7 @@ const parsedLocations = computed(() => {
{{ item }} @@ -299,7 +299,7 @@ const parsedLocations = computed(() => {
-
+
{{ item.title }}
diff --git a/src/lib-components/BannerText.vue b/src/lib-components/BannerText.vue new file mode 100644 index 000000000..a8991a6f3 --- /dev/null +++ b/src/lib-components/BannerText.vue @@ -0,0 +1,615 @@ + + + + + diff --git a/src/lib-components/BlockCardWithImage.vue b/src/lib-components/BlockCardWithImage.vue index 3f3a8c2a6..a167d7289 100644 --- a/src/lib-components/BlockCardWithImage.vue +++ b/src/lib-components/BlockCardWithImage.vue @@ -16,7 +16,7 @@ import type { ImageItemType, LocationItemType } from '@/types/types' const props = defineProps({ image: { type: Object as PropType, - default: () => ({}), + default: () => {}, }, to: { type: String, diff --git a/src/lib-components/BlockClippedDate.vue b/src/lib-components/BlockClippedDate.vue index 6d78e77c7..e06bbd3fd 100644 --- a/src/lib-components/BlockClippedDate.vue +++ b/src/lib-components/BlockClippedDate.vue @@ -18,7 +18,7 @@ import type { ImageItemType, LocationItemType } from '@/types/types' const props = defineProps({ image: { type: Object as PropType, - default: () => ({}), + default: () => {}, }, to: { type: String, diff --git a/src/lib-components/BlockFloatingHighlight.vue b/src/lib-components/BlockFloatingHighlight.vue index 87900118c..cd3d8a0ed 100644 --- a/src/lib-components/BlockFloatingHighlight.vue +++ b/src/lib-components/BlockFloatingHighlight.vue @@ -17,7 +17,7 @@ import type { ImageItemType, LocationItemType } from '@/types/types' const props = defineProps({ image: { type: Object as PropType, - default: () => ({}), + default: () => {}, }, to: { type: String, diff --git a/src/lib-components/Flexible/MediaGallery/NewLightbox.vue b/src/lib-components/Flexible/MediaGallery/NewLightbox.vue index 246cce594..b1c3b2537 100644 --- a/src/lib-components/Flexible/MediaGallery/NewLightbox.vue +++ b/src/lib-components/Flexible/MediaGallery/NewLightbox.vue @@ -11,6 +11,8 @@ import SmartLink from '../../SmartLink.vue' import type { MediaGalleryItemType } from '@/types/types' import MediaItem from '@/lib-components/Media/Item.vue' +// import { title } from 'process' + // defineProps is a macro hence we do not need to import it const { items, selectedItem } = defineProps({ items: { @@ -74,7 +76,7 @@ function setCurrentSlide(currentSlide: number) {
diff --git a/src/lib-components/MastheadPrimary.vue b/src/lib-components/MastheadPrimary.vue index 64b613db3..3543b717d 100644 --- a/src/lib-components/MastheadPrimary.vue +++ b/src/lib-components/MastheadPrimary.vue @@ -14,7 +14,7 @@ const { linkItems, advancedSearchLink } = defineProps({ }, advancedSearchLink: { type: Object as PropType, - default: () => ({}), + default: () => {}, }, }) diff --git a/src/lib-components/MastheadSecondary.vue b/src/lib-components/MastheadSecondary.vue index 47c5a740b..e7a06bfc6 100644 --- a/src/lib-components/MastheadSecondary.vue +++ b/src/lib-components/MastheadSecondary.vue @@ -28,7 +28,7 @@ const props = defineProps({ }, heroImage: { type: Object as PropType, - default: () => ({}), + default: () => {}, }, }) diff --git a/src/lib-components/ResponsiveImage.vue b/src/lib-components/ResponsiveImage.vue index 841858d54..2fdbbf64e 100644 --- a/src/lib-components/ResponsiveImage.vue +++ b/src/lib-components/ResponsiveImage.vue @@ -43,7 +43,7 @@ const props = defineProps({ }, image: { type: Object as PropType, - default: () => ({}), + default: () => {}, }, }) diff --git a/src/lib-components/index.js b/src/lib-components/index.js index 36353243b..42a10e4ed 100644 --- a/src/lib-components/index.js +++ b/src/lib-components/index.js @@ -4,6 +4,7 @@ import '@/styles/global.scss' export { default as AlphabeticalBrowseBy } from './AlphabeticalBrowseBy.vue' export { default as BannerFeatured } from './BannerFeatured.vue' export { default as BannerHeader } from './BannerHeader.vue' +export { default as BannerText } from './BannerText.vue' export { default as BlockAmenities } from './BlockAmenities.vue' export { default as BlockCampusMap } from './BlockCampusMap.vue' export { default as BlockCallToAction } from './BlockCallToAction.vue' diff --git a/src/stories/BannerText.spec.js b/src/stories/BannerText.spec.js new file mode 100644 index 000000000..bcb5687c6 --- /dev/null +++ b/src/stories/BannerText.spec.js @@ -0,0 +1,26 @@ +describe('BannerText', () => { + it('Default', () => { + cy.visit('/iframe.html?id=banner-text--default&args=&viewMode=story') + cy.get('.banner-text').should('exist') + + // Opens local link in same tag + cy.contains('a.smart-link', 'Curabitur').should( + 'not.have.attr', + 'target', + '_blank' + ) + + cy.percySnapshot('Banner Text: Default') + }) + + it('Opens external links in a new tab', () => { + cy.visit( + '/iframe.html?id=banner-text--external-link&args=&viewMode=story' + ) + cy.contains('a.smart-link', 'Curabitur').should( + 'have.attr', + 'target', + '_blank' + ) + }) +}) diff --git a/src/stories/BannerText.stories.js b/src/stories/BannerText.stories.js new file mode 100644 index 000000000..a5e732387 --- /dev/null +++ b/src/stories/BannerText.stories.js @@ -0,0 +1,274 @@ +import BannerText from '@/lib-components/BannerText' + +// TODO: Enable for BlockForm story +// import BlockFormData from '@/stories/mock/BlockFormData.json' + +export default { + title: 'Banner Text', + component: BannerText +} + +const mock = { + category: 'Event', + text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan, metus in aliquet venenatis, mi lectus placerat leo, congue gravida mi quam sit amet neque.', + title: 'Curabitur Tortor Pellentesque', + alternativeFullName: '陳餘敏卿纪念基金', + language: 'zh', + locations: [ + { id: '523', title: 'Powellarium', to: '/location/bar' }, + { + id: '801', + title: 'Research Library (Charles E. Young)', + to: '/location/baz', + }, + ], + startDate: '1995-12-17T03:24:00', + endDate: '1995-12-17T03:24:00', + buttonText: 'Curabitur', + subjectAreas: [{ title: 'Ghosts' }, { title: 'Clowns' }], + byline: ['Cursus Quis', 'Charles E. Young'], + to: '/visit/foo/bar/', + sectionHandle: 'event', +} + +export function Default() { + return { + data() { + return { + ...mock, + } + }, + components: { BannerText }, + template: ``, + } +} + +export function WithSubjectAreas() { + return { + data() { + return { + ...mock, + } + }, + components: { BannerText }, + template: ``, + } +} + +export function NoButton() { + return { + data() { + return { + ...mock, + } + }, + components: { BannerText }, + template: ``, + } +} + +export function NoText() { + return { + data() { + return { + ...mock, + } + }, + components: { BannerText }, + template: ``, + } +} + +export function DarkBlueBackground() { + return { + data() { + return { + ...mock, + } + }, + components: { BannerText }, + template: ``, + } +} + +export function LocationInfo() { + return { + data() { + return { + ...mock, + to: '/help/foo/bar/', + sectionHandle: 'workshopOrEventSeries', + } + }, + components: { BannerText }, + template: ``, + } +} + +export function LocationInfoDarkBlue() { + return { + data() { + return { + ...mock, + to: '/help/foo/bar/', + sectionHandle: 'location', + } + }, + components: { BannerText }, + template: ``, + } +} + +export function ExternalLink() { + return { + data() { + return { + ...mock, + to: 'https://an.external.url/', + } + }, + components: { BannerText }, + template: ``, + } +} + +// TODO: Enable BlockForm component: https://uclalibrary.atlassian.net/browse/APPS-2518 +// export function WithBlockForm() { +// return { +// data() { +// return { +// ...mock, +// ...BlockFormData, +// } +// }, +// provide: { +// // explicitly provide a computed property +// eventId: '9383207', +// blockFormData: BlockFormData.mock0, +// libcalEndpoint: 'https://proxy.calendar.library.ucla.edu/', +// registrationType: 'online', +// }, +// components: { BannerText }, +// template: ``, +// } +// } + +// --------- ARTICLE -------------- + +const article = { + title: 'I Like Turtles', + category: 'Library News', + articleType: 'news', + dateCreated: '2022-02-09T10:57:46-08:00', + sectionHandle: 'article', + byline: [' Written by Courtney Hoffner', 'Illustrations by Jen Diamond'], + locations: [ + { + id: '523', + title: 'Powell Library', + to: 'visit/locations/powell-library', + }, + { + id: '3062', + title: 'Online', + to: 'visit/locations/online', + }, + ], + alignRight: true, + text: 'Turtles are an order of reptiles known as Testudines, characterized by a shell developed mainly from their ribs. Turtles are groups, big ones and small ones.', +} + +export function ArticleDetail() { + return { + data() { + return { + ...article, + } + }, + components: { BannerText }, + template: ` + + `, + } +}