From 2dba739e44b2feae31dcf8a3eaa8a0025c8691be Mon Sep 17 00:00:00 2001 From: "Bartlack, Mario" Date: Fri, 5 Jun 2020 16:16:34 +0200 Subject: [PATCH] feat(vue): add embed-content component for embedding arbitrary html content --- src/embed-utils/README.md | 92 +------------------ src/embed-utils/embeds.ts | 22 ----- src/embed-utils/iframely.test.ts | 49 ---------- src/embed-utils/iframely.ts | 15 --- src/embed-utils/index.test.ts | 2 +- src/embed-utils/index.ts | 3 - src/embed-utils/instagram.test.ts | 61 ------------ src/embed-utils/instagram.ts | 15 --- src/embed-utils/oembed.test.ts | 20 ++-- src/embed-utils/oembed.ts | 4 +- src/embed-utils/script-loader.ts | 4 + src/embed-utils/twitter.test.ts | 76 --------------- src/embed-utils/twitter.ts | 15 --- src/embed-utils/typings.d.ts | 21 ----- .../components/EmbedConsent/EmbedConsent.vue | 5 +- .../EmbedContent/EmbedContent.test.ts | 64 +++++++++++++ .../components/EmbedContent/EmbedContent.vue | 38 ++++++++ src/vue/components/EmbedContent/README.md | 2 + src/vue/components/EmbedContent/index.ts | 1 + .../EmbedFacebook/EmbedFacebook.test.ts | 27 ------ .../EmbedFacebook/EmbedFacebook.vue | 25 ----- src/vue/components/EmbedFacebook/README.md | 1 - src/vue/components/EmbedFacebook/index.ts | 1 - .../EmbedFacebookConsent.vue | 6 +- .../EmbedInstagram/EmbedInstagram.test.ts | 5 - .../EmbedInstagram/EmbedInstagram.vue | 11 ++- .../EmbedTwitter/EmbedTwitter.test.ts | 27 ------ .../components/EmbedTwitter/EmbedTwitter.vue | 25 ----- src/vue/components/EmbedTwitter/README.md | 1 - src/vue/components/EmbedTwitter/index.ts | 1 - .../EmbedTwitterConsent.vue | 6 +- .../EmbedYoutube/EmbedYoutube.test.ts | 20 ---- .../components/EmbedYoutube/EmbedYoutube.vue | 21 ----- src/vue/components/EmbedYoutube/README.md | 1 - src/vue/components/EmbedYoutube/index.ts | 1 - .../EmbedYoutubeConsent.vue | 6 +- src/vue/components/EmbedsConsent.stories.js | 6 +- src/vue/components/index.test.ts | 4 +- src/vue/components/index.ts | 4 +- 39 files changed, 147 insertions(+), 561 deletions(-) delete mode 100644 src/embed-utils/embeds.ts delete mode 100644 src/embed-utils/iframely.test.ts delete mode 100644 src/embed-utils/iframely.ts delete mode 100644 src/embed-utils/instagram.test.ts delete mode 100644 src/embed-utils/instagram.ts delete mode 100644 src/embed-utils/twitter.test.ts delete mode 100644 src/embed-utils/twitter.ts create mode 100644 src/vue/components/EmbedContent/EmbedContent.test.ts create mode 100644 src/vue/components/EmbedContent/EmbedContent.vue create mode 100644 src/vue/components/EmbedContent/README.md create mode 100644 src/vue/components/EmbedContent/index.ts delete mode 100644 src/vue/components/EmbedFacebook/EmbedFacebook.test.ts delete mode 100644 src/vue/components/EmbedFacebook/EmbedFacebook.vue delete mode 100644 src/vue/components/EmbedFacebook/README.md delete mode 100644 src/vue/components/EmbedFacebook/index.ts delete mode 100644 src/vue/components/EmbedTwitter/EmbedTwitter.test.ts delete mode 100644 src/vue/components/EmbedTwitter/EmbedTwitter.vue delete mode 100644 src/vue/components/EmbedTwitter/README.md delete mode 100644 src/vue/components/EmbedTwitter/index.ts delete mode 100644 src/vue/components/EmbedYoutube/EmbedYoutube.test.ts delete mode 100644 src/vue/components/EmbedYoutube/EmbedYoutube.vue delete mode 100644 src/vue/components/EmbedYoutube/README.md delete mode 100644 src/vue/components/EmbedYoutube/index.ts diff --git a/src/embed-utils/README.md b/src/embed-utils/README.md index f2dcf7d4..a9bbffeb 100644 --- a/src/embed-utils/README.md +++ b/src/embed-utils/README.md @@ -21,7 +21,7 @@ loadScript('https://some-domain.com/some-script.js').then(() => console.log('loa ### `getScriptSrcFromOembedHTML` ```typescript -getScriptSrcFromOembedHTML(html: string, fallback: string): string | null +getScriptSrcFromOembedHTML(html: string): string | null ``` Get the script source from given (oEmbed) html string. @@ -33,93 +33,3 @@ const someOembedHTML = '
', 'fallback'], - ['script.js', '', 'fallback'], - ['script.js', '', 'fallback'], - ['script.js', ``, 'fallback'], - ['fallback', ``, 'fallback'], - ['fallback', '', 'fallback'], - ['fallback', '', 'fallback'], - ])('should return %s for input: %s', (expected, input, fallback) => { - expect(getScriptSrcFromOembedHTML(input, fallback)).toBe(expected); + ['script.js', ''], + ['script.js', ''], + ['script.js', ''], + ['script.js', ``], + [null, ``], + [null, ''], + [null, ''], + ])('should return %s for input: %s', (expected, input) => { + expect(getScriptSrcFromOembedHTML(input)).toBe(expected); }); }); }); diff --git a/src/embed-utils/oembed.ts b/src/embed-utils/oembed.ts index a98cf493..7a0d0544 100644 --- a/src/embed-utils/oembed.ts +++ b/src/embed-utils/oembed.ts @@ -1,5 +1,5 @@ -export const getScriptSrcFromOembedHTML = (html: string, fallback: string): string => { +export const getScriptSrcFromOembedHTML = (html: string): string | null => { const src = html.match(/script async src\s*=\s*["'](.+?)["']/); - return src ? src[1].trim() : fallback; + return src ? src[1].trim() : null; }; diff --git a/src/embed-utils/script-loader.ts b/src/embed-utils/script-loader.ts index 04bb1874..76c51a13 100644 --- a/src/embed-utils/script-loader.ts +++ b/src/embed-utils/script-loader.ts @@ -1,5 +1,9 @@ export const loadScript = (src: string): Promise => { return new Promise((resolve, reject) => { + if (document.head.querySelector(`[src="${src}"]`)) { + return resolve(); + } + const script = document.createElement('script'); script.async = true; diff --git a/src/embed-utils/twitter.test.ts b/src/embed-utils/twitter.test.ts deleted file mode 100644 index 9bcd2a95..00000000 --- a/src/embed-utils/twitter.test.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { mocked } from 'ts-jest/utils'; -import { libraryIsAvailable, processEmbedContent, processEmbeds } from './twitter'; -import { process } from './embeds'; -import { Twitter } from './typings'; - -jest.mock('./embeds'); - -const processMock = mocked(process); - -describe('twitter utilities', () => { - afterEach(() => { - processMock.mockReset(); - delete window.twttr; - }); - - describe('processEmbedContent', () => { - it('should call the process function', () => { - processEmbedContent('embed content'); - - expect(processMock).toHaveBeenCalled(); - }); - - it('should call the process function with given parameter', () => { - window.twttr = { widgets: { load: jest.fn() } }; - - processMock.mockImplementation((config) => { - config.processEmbeds(); - return Promise.resolve(); - }); - - const element = document.createElement('DIV'); - - processEmbedContent('embed content', element); - - expect(window.twttr.widgets.load).toHaveBeenCalledWith(element); - }); - }); - - describe('libraryIsAvailable', () => { - it('should return false if twttr object is not present', () => { - expect(libraryIsAvailable()).toBe(false); - }); - - it('should return false if twttr.widgets object is not present', () => { - window.twttr = {} as Twitter; - - expect(libraryIsAvailable()).toBe(false); - }); - - it('should return true', () => { - window.twttr = { widgets: { load: jest.fn() } }; - - expect(libraryIsAvailable()).toBe(true); - }); - }); - - describe('processEmbeds', () => { - it('should not throw an error if twttr object not exists', () => { - expect(() => processEmbeds()).not.toThrow(); - }); - - it('should not throw an error if twttr.widgets object not exists', () => { - window.twttr = {} as Twitter; - - expect(() => processEmbeds()).not.toThrow(); - }); - - it('should call process method of Embeds object', () => { - window.twttr = { widgets: { load: jest.fn() } }; - - processEmbeds(); - - expect(window.twttr.widgets.load).toHaveBeenCalled(); - }); - }); -}); diff --git a/src/embed-utils/twitter.ts b/src/embed-utils/twitter.ts deleted file mode 100644 index 2eaab84a..00000000 --- a/src/embed-utils/twitter.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { process } from './embeds'; - -export const TWITTER_WIDGETS_LIBRARY_URL = 'https://platform.twitter.com/widgets.js'; - -export const libraryIsAvailable = (): boolean => Boolean(window.twttr?.widgets); - -export const processEmbeds = (element?: HTMLElement): void => window.twttr?.widgets?.load(element); - -export const processEmbedContent = async (content: string, element?: HTMLElement): Promise => - process({ - libraryIsAvailable, - processEmbeds: () => processEmbeds(element), - defaultEmbedLibrary: TWITTER_WIDGETS_LIBRARY_URL, - content, - }); diff --git a/src/embed-utils/typings.d.ts b/src/embed-utils/typings.d.ts index 2a6150a4..2a92120a 100644 --- a/src/embed-utils/typings.d.ts +++ b/src/embed-utils/typings.d.ts @@ -1,11 +1,3 @@ -export interface TwitterWidgets { - load(element?: HTMLElement): void; -} - -export interface Twitter { - widgets: TwitterWidgets; -} - export interface InstagramEmbeds { process(): void; } @@ -14,21 +6,8 @@ export interface Instagram { Embeds: InstagramEmbeds; } -export interface Iframely { - load(): void; -} - export declare global { interface Window { - twttr?: Twitter; instgrm?: Instagram; - iframely?: Iframely; } } - -export type ProcessEmbedContentParameters = { - defaultEmbedLibrary: string; - libraryIsAvailable: () => boolean; - processEmbeds: () => void; - content: string; -}; diff --git a/src/vue/components/EmbedConsent/EmbedConsent.vue b/src/vue/components/EmbedConsent/EmbedConsent.vue index ed2311ae..e1cf33d7 100644 --- a/src/vue/components/EmbedConsent/EmbedConsent.vue +++ b/src/vue/components/EmbedConsent/EmbedConsent.vue @@ -4,7 +4,7 @@ @@ -13,6 +13,7 @@ import Vue from 'vue'; import { ConsentWrapper } from '../ConsentWrapper'; import { EmbedPlaceholder } from '../EmbedPlaceholder'; +import { EmbedContent } from '../EmbedContent'; type Props = { vendorId: string; @@ -22,7 +23,7 @@ type Props = { export default Vue.extend<{}, {}, {}, Props>({ name: 'EmbedInstagramConsent', - components: { EmbedPlaceholder, ConsentWrapper }, + components: { EmbedPlaceholder, ConsentWrapper, EmbedContent }, props: { privacyManagerId: { type: Number, diff --git a/src/vue/components/EmbedContent/EmbedContent.test.ts b/src/vue/components/EmbedContent/EmbedContent.test.ts new file mode 100644 index 00000000..4834ea14 --- /dev/null +++ b/src/vue/components/EmbedContent/EmbedContent.test.ts @@ -0,0 +1,64 @@ +import { mount } from '@vue/test-utils'; +import EmbedContent from './EmbedContent.vue'; +import { loadScript, getScriptSrcFromOembedHTML } from '../../../embed-utils'; +import { mocked } from 'ts-jest'; + +jest.mock('../../../embed-utils'); + +const loadScriptMock = mocked(loadScript); +const getScript = mocked(getScriptSrcFromOembedHTML); + +describe('EmbedContent component', () => { + afterEach(() => { + loadScriptMock.mockReset(); + getScript.mockReset(); + }); + + it('should render given (html) content', () => { + const wrapper = mount(EmbedContent, { + propsData: { + content: '
some (html) content
', + }, + }); + + expect(wrapper.element).toMatchInlineSnapshot(` +
+
+ some (html) content +
+
+ `); + }); + + it('should emit an event if a detected script has loaded successfully', async () => { + loadScriptMock.mockImplementation(() => Promise.resolve()); + getScript.mockReturnValue('https://script.com/source.js'); + + const wrapper = mount(EmbedContent, { + propsData: { + content: '
some (html) content
', + }, + }); + + await wrapper.vm.$nextTick(); + + expect(wrapper.emitted('scriptLoaded')).toEqual([[{ src: 'https://script.com/source.js', success: true }]]); + }); + + it('should emit an event if a detected script has not loaded successfully', async () => { + loadScriptMock.mockImplementation(() => Promise.reject('error')); + getScript.mockReturnValue('https://script.com/source.js'); + + const wrapper = mount(EmbedContent, { + propsData: { + content: '
some (html) content
', + }, + }); + + await wrapper.vm.$nextTick(); + + expect(wrapper.emitted('scriptLoaded')).toEqual([ + [{ error: 'error', src: 'https://script.com/source.js', success: false }], + ]); + }); +}); diff --git a/src/vue/components/EmbedContent/EmbedContent.vue b/src/vue/components/EmbedContent/EmbedContent.vue new file mode 100644 index 00000000..e3588d20 --- /dev/null +++ b/src/vue/components/EmbedContent/EmbedContent.vue @@ -0,0 +1,38 @@ + diff --git a/src/vue/components/EmbedContent/README.md b/src/vue/components/EmbedContent/README.md new file mode 100644 index 00000000..c30951fd --- /dev/null +++ b/src/vue/components/EmbedContent/README.md @@ -0,0 +1,2 @@ +# Component for rendering arbitrary html content + diff --git a/src/vue/components/EmbedContent/index.ts b/src/vue/components/EmbedContent/index.ts new file mode 100644 index 00000000..4b1837bd --- /dev/null +++ b/src/vue/components/EmbedContent/index.ts @@ -0,0 +1 @@ +export { default as EmbedContent } from './EmbedContent.vue'; diff --git a/src/vue/components/EmbedFacebook/EmbedFacebook.test.ts b/src/vue/components/EmbedFacebook/EmbedFacebook.test.ts deleted file mode 100644 index add7c73d..00000000 --- a/src/vue/components/EmbedFacebook/EmbedFacebook.test.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { mount } from '@vue/test-utils'; -import EmbedFacebook from './EmbedFacebook.vue'; -import { processEmbedContent } from '../../../embed-utils/iframely'; - -jest.mock('../../../embed-utils/iframely'); - -describe('EmbedFacebook component', () => { - it('should render given (html) content', async () => { - (processEmbedContent as jest.Mock).mockReturnValueOnce(Promise.resolve()); - - const wrapper = mount(EmbedFacebook, { - propsData: { - content: '
some (html) content
', - }, - }); - - await wrapper.vm.$nextTick(); - - expect(wrapper.element).toMatchInlineSnapshot(` -
-
- some (html) content -
-
- `); - }); -}); diff --git a/src/vue/components/EmbedFacebook/EmbedFacebook.vue b/src/vue/components/EmbedFacebook/EmbedFacebook.vue deleted file mode 100644 index 153f9a6b..00000000 --- a/src/vue/components/EmbedFacebook/EmbedFacebook.vue +++ /dev/null @@ -1,25 +0,0 @@ - - - diff --git a/src/vue/components/EmbedFacebook/README.md b/src/vue/components/EmbedFacebook/README.md deleted file mode 100644 index f9e46241..00000000 --- a/src/vue/components/EmbedFacebook/README.md +++ /dev/null @@ -1 +0,0 @@ -# Component for Facebook Embeds diff --git a/src/vue/components/EmbedFacebook/index.ts b/src/vue/components/EmbedFacebook/index.ts deleted file mode 100644 index e7e9e623..00000000 --- a/src/vue/components/EmbedFacebook/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as EmbedFacebook } from './EmbedFacebook.vue'; diff --git a/src/vue/components/EmbedFacebookConsent/EmbedFacebookConsent.vue b/src/vue/components/EmbedFacebookConsent/EmbedFacebookConsent.vue index cd4039a0..6eeb5445 100644 --- a/src/vue/components/EmbedFacebookConsent/EmbedFacebookConsent.vue +++ b/src/vue/components/EmbedFacebookConsent/EmbedFacebookConsent.vue @@ -4,7 +4,7 @@ @@ -13,7 +13,7 @@ import Vue from 'vue'; import { EmbedFacebookPlaceholder } from '../EmbedFacebookPlaceholder'; import { ConsentWrapper } from '../ConsentWrapper'; -import { EmbedFacebook } from '../EmbedFacebook'; +import { EmbedContent } from '../EmbedContent'; import { VENDOR_ID_FACEBOOK } from '../../../vendor-mapping'; type Data = { @@ -27,7 +27,7 @@ type Props = { export default Vue.extend({ name: 'EmbedFacebookConsent', - components: { ConsentWrapper, EmbedFacebook, EmbedFacebookPlaceholder }, + components: { ConsentWrapper, EmbedFacebookPlaceholder, EmbedContent }, data: () => ({ vendorId: VENDOR_ID_FACEBOOK, }), diff --git a/src/vue/components/EmbedInstagram/EmbedInstagram.test.ts b/src/vue/components/EmbedInstagram/EmbedInstagram.test.ts index 6d7e2018..e91f179e 100644 --- a/src/vue/components/EmbedInstagram/EmbedInstagram.test.ts +++ b/src/vue/components/EmbedInstagram/EmbedInstagram.test.ts @@ -1,13 +1,8 @@ import { mount } from '@vue/test-utils'; import EmbedInstagram from './EmbedInstagram.vue'; -import { processEmbedContent } from '../../../embed-utils/instagram'; - -jest.mock('../../../embed-utils/instagram'); describe('EmbedInstagram component', () => { it('should render given (html) content', async () => { - (processEmbedContent as jest.Mock).mockReturnValueOnce(Promise.resolve()); - const wrapper = mount(EmbedInstagram, { propsData: { content: '
some (html) content
', diff --git a/src/vue/components/EmbedInstagram/EmbedInstagram.vue b/src/vue/components/EmbedInstagram/EmbedInstagram.vue index abc12a4c..f21e15ca 100644 --- a/src/vue/components/EmbedInstagram/EmbedInstagram.vue +++ b/src/vue/components/EmbedInstagram/EmbedInstagram.vue @@ -1,10 +1,10 @@ diff --git a/src/vue/components/EmbedTwitter/EmbedTwitter.test.ts b/src/vue/components/EmbedTwitter/EmbedTwitter.test.ts deleted file mode 100644 index fac7cb0b..00000000 --- a/src/vue/components/EmbedTwitter/EmbedTwitter.test.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { mount } from '@vue/test-utils'; -import EmbedTwitter from './EmbedTwitter.vue'; -import { processEmbedContent } from '../../../embed-utils/twitter'; - -jest.mock('../../../embed-utils/twitter'); - -describe('EmbedTwitter component', () => { - it('should render given (html) content', async () => { - (processEmbedContent as jest.Mock).mockReturnValueOnce(Promise.resolve()); - - const wrapper = mount(EmbedTwitter, { - propsData: { - content: '
some (html) content
', - }, - }); - - await wrapper.vm.$nextTick(); - - expect(wrapper.element).toMatchInlineSnapshot(` -
-
- some (html) content -
-
- `); - }); -}); diff --git a/src/vue/components/EmbedTwitter/EmbedTwitter.vue b/src/vue/components/EmbedTwitter/EmbedTwitter.vue deleted file mode 100644 index 7e8b8049..00000000 --- a/src/vue/components/EmbedTwitter/EmbedTwitter.vue +++ /dev/null @@ -1,25 +0,0 @@ - - - diff --git a/src/vue/components/EmbedTwitter/README.md b/src/vue/components/EmbedTwitter/README.md deleted file mode 100644 index 23376276..00000000 --- a/src/vue/components/EmbedTwitter/README.md +++ /dev/null @@ -1 +0,0 @@ -# Component for Twitter Embeds diff --git a/src/vue/components/EmbedTwitter/index.ts b/src/vue/components/EmbedTwitter/index.ts deleted file mode 100644 index df85fd3d..00000000 --- a/src/vue/components/EmbedTwitter/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as EmbedTwitter } from './EmbedTwitter.vue'; diff --git a/src/vue/components/EmbedTwitterConsent/EmbedTwitterConsent.vue b/src/vue/components/EmbedTwitterConsent/EmbedTwitterConsent.vue index 5d4dc4bc..a635bdfe 100644 --- a/src/vue/components/EmbedTwitterConsent/EmbedTwitterConsent.vue +++ b/src/vue/components/EmbedTwitterConsent/EmbedTwitterConsent.vue @@ -4,7 +4,7 @@ @@ -13,7 +13,7 @@ import Vue from 'vue'; import { EmbedTwitterPlaceholder } from '../EmbedTwitterPlaceholder'; import { ConsentWrapper } from '../ConsentWrapper'; -import { EmbedTwitter } from '../EmbedTwitter'; +import { EmbedContent } from '../EmbedContent'; import { VENDOR_ID_TWITTER } from '../../../vendor-mapping'; type Data = { @@ -27,7 +27,7 @@ type Props = { export default Vue.extend({ name: 'EmbedTwitterConsent', - components: { ConsentWrapper, EmbedTwitter, EmbedTwitterPlaceholder }, + components: { ConsentWrapper, EmbedTwitterPlaceholder, EmbedContent }, data: () => ({ vendorId: VENDOR_ID_TWITTER, }), diff --git a/src/vue/components/EmbedYoutube/EmbedYoutube.test.ts b/src/vue/components/EmbedYoutube/EmbedYoutube.test.ts deleted file mode 100644 index 64a739ed..00000000 --- a/src/vue/components/EmbedYoutube/EmbedYoutube.test.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { mount } from '@vue/test-utils'; -import EmbedYoutube from './EmbedYoutube.vue'; - -describe('EmbedFacebook component', () => { - it('should render given (html) content', () => { - const wrapper = mount(EmbedYoutube, { - propsData: { - content: '
some (html) content
', - }, - }); - - expect(wrapper.element).toMatchInlineSnapshot(` -
-
- some (html) content -
-
- `); - }); -}); diff --git a/src/vue/components/EmbedYoutube/EmbedYoutube.vue b/src/vue/components/EmbedYoutube/EmbedYoutube.vue deleted file mode 100644 index 9656b539..00000000 --- a/src/vue/components/EmbedYoutube/EmbedYoutube.vue +++ /dev/null @@ -1,21 +0,0 @@ - - - diff --git a/src/vue/components/EmbedYoutube/README.md b/src/vue/components/EmbedYoutube/README.md deleted file mode 100644 index fa7d3cd1..00000000 --- a/src/vue/components/EmbedYoutube/README.md +++ /dev/null @@ -1 +0,0 @@ -# Component for Youtube Embeds diff --git a/src/vue/components/EmbedYoutube/index.ts b/src/vue/components/EmbedYoutube/index.ts deleted file mode 100644 index d24f99f4..00000000 --- a/src/vue/components/EmbedYoutube/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as EmbedYoutube } from './EmbedYoutube.vue'; diff --git a/src/vue/components/EmbedYoutubeConsent/EmbedYoutubeConsent.vue b/src/vue/components/EmbedYoutubeConsent/EmbedYoutubeConsent.vue index 7833de13..b794e6dd 100644 --- a/src/vue/components/EmbedYoutubeConsent/EmbedYoutubeConsent.vue +++ b/src/vue/components/EmbedYoutubeConsent/EmbedYoutubeConsent.vue @@ -4,7 +4,7 @@ @@ -13,7 +13,7 @@ import Vue from 'vue'; import { EmbedYoutubePlaceholder } from '../EmbedYoutubePlaceholder'; import { ConsentWrapper } from '../ConsentWrapper'; -import { EmbedYoutube } from '../EmbedYoutube'; +import { EmbedContent } from '../EmbedContent'; import { VENDOR_ID_YOUTUBE } from '../../../vendor-mapping'; type Data = { @@ -27,7 +27,7 @@ type Props = { export default Vue.extend({ name: 'EmbedYoutubeConsent', - components: { ConsentWrapper, EmbedYoutube, EmbedYoutubePlaceholder }, + components: { ConsentWrapper, EmbedContent, EmbedYoutubePlaceholder }, data: () => ({ vendorId: VENDOR_ID_YOUTUBE, }), diff --git a/src/vue/components/EmbedsConsent.stories.js b/src/vue/components/EmbedsConsent.stories.js index f09a5898..7968d7d8 100644 --- a/src/vue/components/EmbedsConsent.stories.js +++ b/src/vue/components/EmbedsConsent.stories.js @@ -16,9 +16,9 @@ import { EmbedYoutubeConsent } from './EmbedYoutubeConsent'; import { EmbedConsent } from './EmbedConsent'; import { hasCustomConsentById } from '../../sourcepoint'; -const defaultInstagramEmbedContent = `
`; -const defaultTwitterEmbedContent = ``; -const defaultFacebookEmbedContent = `
`; +const defaultInstagramEmbedContent = `
`; +const defaultTwitterEmbedContent = ``; +const defaultFacebookEmbedContent = `
`; const defaultYoutubeEmbedContent = `
`; const defaultEmbedContent = `
Default Embed Content
`; diff --git a/src/vue/components/index.test.ts b/src/vue/components/index.test.ts index 6903514d..fc585534 100644 --- a/src/vue/components/index.test.ts +++ b/src/vue/components/index.test.ts @@ -8,23 +8,21 @@ describe('vue components index', () => { 'ConsentedData', 'ConsentManagement', 'ConsentWrapper', - 'EmbedFacebook', 'EmbedFacebookConsent', 'EmbedFacebookPlaceholder', 'EmbedInstagram', 'EmbedInstagramConsent', 'EmbedInstagramPlaceholder', 'EmbedPlaceholder', - 'EmbedTwitter', 'EmbedTwitterConsent', 'EmbedTwitterPlaceholder', - 'EmbedYoutube', 'EmbedYoutubeConsent', 'EmbedYoutubePlaceholder', 'PrivacyManager', 'VendorMapping', 'SocialSharingPopup', 'EmbedConsent', + 'EmbedContent', ]); }); }); diff --git a/src/vue/components/index.ts b/src/vue/components/index.ts index 9a8c8f80..28c94726 100644 --- a/src/vue/components/index.ts +++ b/src/vue/components/index.ts @@ -1,20 +1,18 @@ export * from './ConsentedData'; export * from './ConsentManagement'; export * from './ConsentWrapper'; -export * from './EmbedFacebook'; export * from './EmbedFacebookConsent'; export * from './EmbedFacebookPlaceholder'; export * from './EmbedInstagram'; export * from './EmbedInstagramConsent'; export * from './EmbedInstagramPlaceholder'; export * from './EmbedPlaceholder'; -export * from './EmbedTwitter'; export * from './EmbedTwitterConsent'; export * from './EmbedTwitterPlaceholder'; -export * from './EmbedYoutube'; export * from './EmbedYoutubeConsent'; export * from './EmbedYoutubePlaceholder'; export * from './PrivacyManager'; export * from './VendorMapping'; export * from './SocialSharingPopup'; export * from './EmbedConsent'; +export * from './EmbedContent';