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' }