From 76d323334156610ab87d24548f1590b7a3424c32 Mon Sep 17 00:00:00 2001 From: Jason Smith Date: Mon, 16 Oct 2023 17:35:16 +1100 Subject: [PATCH 1/3] feat: :sparkles: replace twitter with x --- .../nuxt-ripple/components/TideSidebarContactUs.vue | 5 ++++- packages/nuxt-ripple/composables/use-tide-site.ts | 13 ++++++++++++- .../sidebar-social-share-mapping.ts | 2 +- packages/ripple-storybook/.storybook/preview.ts | 1 + .../ripple-ui-core/src/assets/icons/core/icon-x.svg | 3 +++ packages/ripple-ui-core/src/assets/icons/sprite.js | 2 +- packages/ripple-ui-core/src/assets/icons/sprite.svg | 2 +- .../components/contact-us/RplContactUs.stories.mdx | 11 ++++++++--- .../src/components/contact-us/RplContactUs.vue | 10 +++++++++- .../src/components/footer/fixtures/sample.ts | 4 ++-- .../ripple-ui-core/src/components/icon/constants.ts | 4 ++-- .../components/social-share/RplSocialShareLink.vue | 2 +- .../src/components/social-share/constants.ts | 2 +- 13 files changed, 46 insertions(+), 15 deletions(-) create mode 100644 packages/ripple-ui-core/src/assets/icons/core/icon-x.svg diff --git a/packages/nuxt-ripple/components/TideSidebarContactUs.vue b/packages/nuxt-ripple/components/TideSidebarContactUs.vue index 6383762a54..3e38d07e0e 100644 --- a/packages/nuxt-ripple/components/TideSidebarContactUs.vue +++ b/packages/nuxt-ripple/components/TideSidebarContactUs.vue @@ -43,7 +43,10 @@ const getSocialMediaIconByType = (type: string): string => { if (type === 'youtube_channel') { return 'icon-youtube' } - if (['twitter', 'facebook', 'linkedin', 'instagram'].includes(type)) { + if (type === 'twitter') { + return 'icon-x' + } + if (['x', 'facebook', 'linkedin', 'instagram'].includes(type)) { return `icon-${type}` } else { return 'icon-browser' diff --git a/packages/nuxt-ripple/composables/use-tide-site.ts b/packages/nuxt-ripple/composables/use-tide-site.ts index af93e8becb..f3e951885b 100644 --- a/packages/nuxt-ripple/composables/use-tide-site.ts +++ b/packages/nuxt-ripple/composables/use-tide-site.ts @@ -31,7 +31,18 @@ export const useTideSite = async (id?: number): Promise => { return data.value } - return siteData.value + + // Intercept social links, replace icon-twitter with icon-x + return Object.fromEntries( + Object.entries(siteData.value).map(([k, v]) => [ + k, + k !== 'socialLinks' + ? v + : siteData.value[k].map((link: any) => + link.icon === 'icon-twitter' ? { ...link, icon: 'icon-x' } : link + ) + ]) + ) as any } export default useTideSite diff --git a/packages/nuxt-ripple/mapping/base/sidebar-social-share/sidebar-social-share-mapping.ts b/packages/nuxt-ripple/mapping/base/sidebar-social-share/sidebar-social-share-mapping.ts index 8275e44370..6b1b99f5cc 100644 --- a/packages/nuxt-ripple/mapping/base/sidebar-social-share/sidebar-social-share-mapping.ts +++ b/packages/nuxt-ripple/mapping/base/sidebar-social-share/sidebar-social-share-mapping.ts @@ -5,7 +5,7 @@ export const map = (src: TideApiResponse): string[] => { return [] } - return ['Facebook', 'Twitter', 'LinkedIn'] + return ['Facebook', 'X', 'LinkedIn'] } export const includes = [] diff --git a/packages/ripple-storybook/.storybook/preview.ts b/packages/ripple-storybook/.storybook/preview.ts index 7f43aa5883..df0eb5ccd1 100644 --- a/packages/ripple-storybook/.storybook/preview.ts +++ b/packages/ripple-storybook/.storybook/preview.ts @@ -2,6 +2,7 @@ import { setup, type Preview } from '@storybook/vue3' // @ts-ignore-next-line: Missing declaration import { registerRplFormPlugin } from '@dpc-sdp/ripple-ui-forms' +// Note: rebuild ripple-ui-core after generating sprite to update in storybook // @ts-ignore-next-line: Vue SFC import { RplIconSprite, RplLink, RplImg } from '@dpc-sdp/ripple-ui-core/vue' import '@dpc-sdp/ripple-ui-core/style' diff --git a/packages/ripple-ui-core/src/assets/icons/core/icon-x.svg b/packages/ripple-ui-core/src/assets/icons/core/icon-x.svg new file mode 100644 index 0000000000..0ceaba6f96 --- /dev/null +++ b/packages/ripple-ui-core/src/assets/icons/core/icon-x.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/ripple-ui-core/src/assets/icons/sprite.js b/packages/ripple-ui-core/src/assets/icons/sprite.js index cda0d1ea6c..e2828cf444 100644 --- a/packages/ripple-ui-core/src/assets/icons/sprite.js +++ b/packages/ripple-ui-core/src/assets/icons/sprite.js @@ -1 +1 @@ -export default ["icon-cancel","icon-check-circle-filled","icon-chevron-down","icon-chevron-left","icon-chevron-right","icon-chevron-up","icon-current-location","icon-document-lined","icon-document","icon-download","icon-enlarge-square-filled","icon-enlarge","icon-exclamation-circle-filled","icon-facebook","icon-home","icon-information-circle-filled","icon-link-external-square-filled","icon-linkedin","icon-mail","icon-phone","icon-pin","icon-twitter","icon-view"] \ No newline at end of file +export default ["icon-cancel","icon-check-circle-filled","icon-chevron-down","icon-chevron-left","icon-chevron-right","icon-chevron-up","icon-current-location","icon-document-lined","icon-document","icon-download","icon-enlarge-square-filled","icon-enlarge","icon-exclamation-circle-filled","icon-facebook","icon-home","icon-information-circle-filled","icon-link-external-square-filled","icon-linkedin","icon-mail","icon-phone","icon-pin","icon-twitter","icon-view","icon-x"] \ No newline at end of file diff --git a/packages/ripple-ui-core/src/assets/icons/sprite.svg b/packages/ripple-ui-core/src/assets/icons/sprite.svg index 8bf76106a6..fd469a48c1 100644 --- a/packages/ripple-ui-core/src/assets/icons/sprite.svg +++ b/packages/ripple-ui-core/src/assets/icons/sprite.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/ripple-ui-core/src/components/contact-us/RplContactUs.stories.mdx b/packages/ripple-ui-core/src/components/contact-us/RplContactUs.stories.mdx index 11680e7258..84c1007ce2 100644 --- a/packages/ripple-ui-core/src/components/contact-us/RplContactUs.stories.mdx +++ b/packages/ripple-ui-core/src/components/contact-us/RplContactUs.stories.mdx @@ -58,9 +58,9 @@ export const SingleTemplate = (args) => ({ icon: 'icon-facebook' }, { - text: '@twitterhandle', - url: 'https:/t', - icon: 'icon-twitter' + text: '@xhandle', + url: 'https:/x', + icon: 'icon-x' }, { text: '@linkedinhandle', @@ -71,6 +71,11 @@ export const SingleTemplate = (args) => ({ text: '@instagramhandle', url: 'https://i', icon: 'icon-instagram' + }, + { + text: '@legacytwitterhandle', + url: 'https:/t', + icon: 'icon-twitter' } ] }} diff --git a/packages/ripple-ui-core/src/components/contact-us/RplContactUs.vue b/packages/ripple-ui-core/src/components/contact-us/RplContactUs.vue index 6d2c4a0be4..a13b708cbc 100644 --- a/packages/ripple-ui-core/src/components/contact-us/RplContactUs.vue +++ b/packages/ripple-ui-core/src/components/contact-us/RplContactUs.vue @@ -1,5 +1,6 @@ diff --git a/packages/ripple-ui-core/src/components/social-share/constants.ts b/packages/ripple-ui-core/src/components/social-share/constants.ts index ecc742269e..209a079602 100644 --- a/packages/ripple-ui-core/src/components/social-share/constants.ts +++ b/packages/ripple-ui-core/src/components/social-share/constants.ts @@ -1,5 +1,5 @@ export const RplSocialShareNetworks = { Facebook: 'https://www.facebook.com/sharer/sharer.php?u=$u&title=$t', LinkedIn: 'https://www.linkedin.com/shareArticle?url=$u', - Twitter: 'https://twitter.com/intent/tweet?text=$t&url=$u' + X: 'https://twitter.com/intent/tweet?text=$t&url=$u' } From b2eb2fd314c28353684f4cd0f6474a2256d7544e Mon Sep 17 00:00:00 2001 From: Jason Smith Date: Tue, 17 Oct 2023 10:54:17 +1100 Subject: [PATCH 2/3] refactor: :recycle: replace icon at mapping level --- packages/nuxt-ripple/composables/use-tide-site.ts | 12 +----------- .../mapping/utils/processSiteSocialLinks.ts | 3 ++- .../src/components/contact-us/RplContactUs.vue | 2 +- 3 files changed, 4 insertions(+), 13 deletions(-) diff --git a/packages/nuxt-ripple/composables/use-tide-site.ts b/packages/nuxt-ripple/composables/use-tide-site.ts index f3e951885b..867cc63a46 100644 --- a/packages/nuxt-ripple/composables/use-tide-site.ts +++ b/packages/nuxt-ripple/composables/use-tide-site.ts @@ -32,17 +32,7 @@ export const useTideSite = async (id?: number): Promise => { return data.value } - // Intercept social links, replace icon-twitter with icon-x - return Object.fromEntries( - Object.entries(siteData.value).map(([k, v]) => [ - k, - k !== 'socialLinks' - ? v - : siteData.value[k].map((link: any) => - link.icon === 'icon-twitter' ? { ...link, icon: 'icon-x' } : link - ) - ]) - ) as any + return siteData.value } export default useTideSite diff --git a/packages/nuxt-ripple/mapping/utils/processSiteSocialLinks.ts b/packages/nuxt-ripple/mapping/utils/processSiteSocialLinks.ts index 04c3630870..84255647e6 100644 --- a/packages/nuxt-ripple/mapping/utils/processSiteSocialLinks.ts +++ b/packages/nuxt-ripple/mapping/utils/processSiteSocialLinks.ts @@ -23,7 +23,8 @@ export const getIconForUrl = (urlString: string) => { case 'linkedin.com': return 'icon-linkedin' case 'twitter.com': - return 'icon-twitter' + case 'x.com': + return 'icon-x' case 'youtube.com': return 'icon-youtube' default: diff --git a/packages/ripple-ui-core/src/components/contact-us/RplContactUs.vue b/packages/ripple-ui-core/src/components/contact-us/RplContactUs.vue index a13b708cbc..f5fb723801 100644 --- a/packages/ripple-ui-core/src/components/contact-us/RplContactUs.vue +++ b/packages/ripple-ui-core/src/components/contact-us/RplContactUs.vue @@ -42,7 +42,7 @@ const handleClick = (event) => { ) } -// Intercept social links to replace icon-twitter with icon-x +// Replace icon-twitter with icon-x const socialLinks = computed(() => props.items.map((i) => i.icon === 'icon-twitter' ? { ...i, icon: 'icon-x' } : i From 4dc9358afe008078aa2bb06d982fa86e105cb3c6 Mon Sep 17 00:00:00 2001 From: Jason Smith Date: Tue, 17 Oct 2023 11:28:49 +1100 Subject: [PATCH 3/3] test(nuxt-ripple): :white_check_mark: fix tests --- .../__test__/sidebar-social-share-mapping.test.ts | 2 +- .../mapping/utils/processSiteSocialLinks.test.ts | 13 +++++++++---- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/nuxt-ripple/mapping/base/sidebar-social-share/__test__/sidebar-social-share-mapping.test.ts b/packages/nuxt-ripple/mapping/base/sidebar-social-share/__test__/sidebar-social-share-mapping.test.ts index 21a4eea61c..0184aa5713 100644 --- a/packages/nuxt-ripple/mapping/base/sidebar-social-share/__test__/sidebar-social-share-mapping.test.ts +++ b/packages/nuxt-ripple/mapping/base/sidebar-social-share/__test__/sidebar-social-share-mapping.test.ts @@ -22,7 +22,7 @@ describe('sidebarSocialShareMapping', () => { it('should return the default list of networks when social share display is switched on', () => { expect(sidebarSocialShareMapping(parsedData)).toEqual([ 'Facebook', - 'Twitter', + 'X', 'LinkedIn' ]) }) diff --git a/packages/nuxt-ripple/mapping/utils/processSiteSocialLinks.test.ts b/packages/nuxt-ripple/mapping/utils/processSiteSocialLinks.test.ts index 0dc8091548..7ca4a0a6d0 100644 --- a/packages/nuxt-ripple/mapping/utils/processSiteSocialLinks.test.ts +++ b/packages/nuxt-ripple/mapping/utils/processSiteSocialLinks.test.ts @@ -27,9 +27,14 @@ describe('getIconForUrl', () => { expect(getIconForUrl('https://linkedin.com/')).toBe('icon-linkedin') }) - it('returns icon-twitter when passed twitter.com link', () => { - expect(getIconForUrl('https://www.twitter.com/')).toBe('icon-twitter') - expect(getIconForUrl('https://twitter.com/')).toBe('icon-twitter') + it('returns icon-x when passed twitter.com link', () => { + expect(getIconForUrl('https://www.twitter.com/')).toBe('icon-x') + expect(getIconForUrl('https://twitter.com/')).toBe('icon-x') + }) + + it('returns icon-x when passed x.com link', () => { + expect(getIconForUrl('https://www.x.com/')).toBe('icon-x') + expect(getIconForUrl('https://x.com/')).toBe('icon-x') }) it('returns icon-youtube when passed youtube.com link', () => { @@ -122,7 +127,7 @@ describe('processSiteSocialLinks', () => { id: 'social_link-5', text: 'Twitter', url: 'https://www.twitter.com/', - icon: 'icon-twitter', + icon: 'icon-x', iconColour: 'currentColor' }, {