Merge pull request #897 from dpc-sdp/task/sdpap-8247-update-twitter-icon

[SDPAP-8247] 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,6 +31,7 @@ export const useTideSite = async (id?: number): Promise<TideSiteData> => {
 
     return data.value
   }
+
   return siteData.value
 }
 

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

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/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'
       },
       {

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:

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',
@@ -72,6 +72,11 @@ export const SingleTemplate = (args) => ({
           url: 'https://i',
           icon: 'icon-instagram'
         },
+        {
+          text: '@legacytwitterhandle',
+          url: 'https:/t',
+          icon: 'icon-twitter'
+        },
         {
           text: '',
           url: '',

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 }
   )
 }
+
+// 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'
 }