feat: ✨ replace twitter with x

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'

packages/nuxt-ripple/composables/use-tide-site.ts

@@ -31,7 +31,18 @@ export const useTideSite = async (id?: number): Promise<TideSiteData> => {
 
     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

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 = []

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'

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

packages/ripple-ui-core/src/components/contact-us/RplContactUs.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { IRplListItemArray } from '../list/constants'
+import { computed } from 'vue'
 import RplList from '../list/RplList.vue'
 import {
   useRippleEvent,
@@ -40,6 +41,13 @@ const handleClick = (event) => {
     { global: true }
   )
 }
+
+// Intercept social links to replace icon-twitter with icon-x
+const socialLinks = computed(() =>
+  props.items.map((i) =>
+    i.icon === 'icon-twitter' ? { ...i, icon: 'icon-x' } : i
+  )
+)
 </script>
 
 <template>
@@ -59,7 +67,7 @@ const handleClick = (event) => {
       </p>
     </div>
     <RplList
-      :items="items"
+      :items="socialLinks"
       class="rpl-type-p"
       @item-click="handleClick"
     ></RplList>

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

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

packages/ripple-ui-core/src/components/social-share/RplSocialShareLink.vue

@@ -59,6 +59,6 @@ const handleClick = () => {
     @click.prevent="handleClick"
   >
     <RplIcon class="rpl-social-share__icon" :name="`icon-${key}`"></RplIcon>
-    <span>{{ network }}</span>
+    <span>{{ network === 'X' ? 'X (formerly Twitter)' : network }}</span>
   </RplTextLink>
 </template>

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