feat: APPS-2561 convert flexible-media-with-text component to vue3

jendiamond commented 6 months ago

Connected to APPS-2561

https://deploy-preview-469--ucla-library-storybook-vue3x.netlify.app/?path=/docs/flexible-media-with-text--docs

NOTES on SmartLink being commented out below in Notes.

ALSO

Refactor: Lightbox will NOT appear if mediaType is "Other" - BlockMediaWithText
Fix: the mobile styling
Update: the native modifier in BlockMediaWithText as referred to : https://v3-migration.vuejs.org/breaking-changes/v-on-native-modifier-removed.html (it was causing an error: '.native' modifier on 'v-on' directive is deprecated vue/no-deprecated-v-on-native-modifier
Update: src/stories/mock/Flexible_MediaWithText.js with real data structure from test-craft
Alphabetize: export { default as FlexibleMediaGallery } from './Flexible/MediaGallery.vue' in file src/lib-components/index.js
Alphabetize: interface FlexibleSimpleCard extends ContentLink in file src/types/flexible_types.ts

Component Created: Flexible/MediaWithText.vue

Stories: ~/stories/Flexible_MediaWithText.stories.js

Spec: ~/stories/Flexible_MediaWithText.spec.js

Notes: Using data from https://test-craft.library.ucla.edu/admin/entries/helpTopic/2363-printing

BlockMediaWithTextFragment Query:

fragment BlockMediaWithTextFragment on ElementInterface {
    dataId : id
    typeHandle
    sectionTitle: titleGeneral
    sectionSummary: summary
    mediaWithText {
        ... on mediaWithText_mediaEmbed_BlockType {
            titleLink: titleEmbed
            description
            coverImage {
                ...MediaAsset
            }
            buttonText
            buttonUrl
            embedCode
            typeMedia
        }
        ... on mediaWithText_mediaUpload_BlockType {
            titleUpload
            description
            buttonText
            buttonUrl
            coverImage {
                ...MediaAsset
            }
            item: upload {
                ...MediaAsset
            }
            typeMedia
        }
    }
}

STILL IN QUESTION:

Line 103 in BlockMediaWithText:
<smart-link is still commented out. the <smart-link> makes the mobile styles NOT work. Undetermined as to why this is the case.

I took out the conditional v-if="mediaLink and it still breaks the styles.
class="media-link" is no where in this file or any other code
mediaLink used as data is used in the SectionWrapper.stories.js
- Line 13: mediaLink: mockMediaWithText.mediaWithText[0].linkToMedia,
- In library-website-nuxt pages/about/components.vue linkToMedia is Line 166: under const flexibleMediaWithText. mediaLink: mockMediaWithText.mediaWithText[0].linkToMedia,
- linkToMedia is not in the BlockMediaWithTextFragment Query
- I added linkToMedia to the BlockMediaWithTextFragment Query in Craft - NOTHING was returned
- The media links are coming from the embedCode field or the item: MediaItemType field