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 @@
@@ -59,7 +67,7 @@ const handleClick = (event) => {
diff --git a/packages/ripple-ui-core/src/components/footer/fixtures/sample.ts b/packages/ripple-ui-core/src/components/footer/fixtures/sample.ts
index 007959cb41..70f77e4c22 100644
--- a/packages/ripple-ui-core/src/components/footer/fixtures/sample.ts
+++ b/packages/ripple-ui-core/src/components/footer/fixtures/sample.ts
@@ -114,12 +114,12 @@ export const RplFooterLinks = [
{
text: 'DFFH Twitter',
url: '#',
- icon: 'icon-twitter'
+ icon: 'icon-x'
},
{
text: 'DH Twitter',
url: '#',
- icon: 'icon-twitter'
+ icon: 'icon-x'
},
{
text: 'DFFH LinkedIn',
diff --git a/packages/ripple-ui-core/src/components/icon/constants.ts b/packages/ripple-ui-core/src/components/icon/constants.ts
index c3e249ea80..24d59806e3 100644
--- a/packages/ripple-ui-core/src/components/icon/constants.ts
+++ b/packages/ripple-ui-core/src/components/icon/constants.ts
@@ -21,9 +21,9 @@ export const RplIconGroups = {
'icon-instagram',
'icon-linkedin',
'icon-spotify',
- 'icon-twitter',
'icon-wechat',
- 'icon-youtube'
+ 'icon-youtube',
+ 'icon-x'
],
standard: [
'icon-accessible',
diff --git a/packages/ripple-ui-core/src/components/social-share/RplSocialShareLink.vue b/packages/ripple-ui-core/src/components/social-share/RplSocialShareLink.vue
index 2ed711602b..3d68727531 100644
--- a/packages/ripple-ui-core/src/components/social-share/RplSocialShareLink.vue
+++ b/packages/ripple-ui-core/src/components/social-share/RplSocialShareLink.vue
@@ -59,6 +59,6 @@ const handleClick = () => {
@click.prevent="handleClick"
>
- {{ network }}
+ {{ network === 'X' ? 'X (formerly Twitter)' : network }}
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'
}