change twitter icon to X

Financial-Times · Sep 6, 2023 · da2f6ad · da2f6ad
1 parent f918608
commit da2f6ad
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 36 deletions.
diff --git a/components/x-gift-article/package.json b/components/x-gift-article/package.json
@@ -48,7 +48,7 @@
     "@financial-times/o-loading": "^5.2.1",
     "@financial-times/o-message": "^5.4.2",
     "@financial-times/o-normalise": "^3.2.2",
-    "@financial-times/o-share": "^9.0.2",
+    "@financial-times/o-share": "^10.0.0",
     "@financial-times/o-typography": "^7.4.1"
   }
 }
diff --git a/components/x-gift-article/src/ShareArticleDialog.scss b/components/x-gift-article/src/ShareArticleDialog.scss
@@ -49,7 +49,7 @@
 	), $types: ('action', 'alert'));
 
 @include oShare($opts: (
-	'icons': ('twitter', 'facebook', 'linkedin', 'mail', 'whatsapp')
+	'icons': ('x', 'facebook', 'linkedin', 'mail', 'whatsapp')
 ));
 
 @include oIcons($opts: (

diff --git a/components/x-gift-article/src/SocialShareButtons.jsx b/components/x-gift-article/src/SocialShareButtons.jsx
@@ -1,14 +1,7 @@
 import { h } from '@financial-times/x-engine'
 import { ShareType } from './lib/constants'
 
-export const SocialShareButtons = ({
-	actions,
-	mailtoUrl,
-	shareType,
-	enterpriseEnabled,
-	url,
-	article
-}) => {
+export const SocialShareButtons = ({ actions, mailtoUrl, shareType, enterpriseEnabled, url, article }) => {
 	const onClickHandler = (event) => {
 		switch (shareType) {
 			case ShareType.gift:
@@ -25,19 +18,17 @@ export const SocialShareButtons = ({
 	}
 
 	const mobileShareLinks = {
-		facebook: `http://www.facebook.com/sharer.php?u=${encodeURIComponent(
-			url
-		)}&t=${encodeURIComponent(article.title)}`,
-		twitter: `https://twitter.com/intent/tweet?url=${encodeURIComponent(
-			url
-		)}&text=${encodeURIComponent(article.title)}&via=financialtimes`,
+		facebook: `http://www.facebook.com/sharer.php?u=${encodeURIComponent(url)}&t=${encodeURIComponent(
+			article.title
+		)}`,
+		twitter: `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(
+			article.title
+		)}&via=financialtimes`,
 		linkedin: `http://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(
 			url
 		)}&title=${encodeURIComponent(article.title)}&source=Financial+Times`,
-		whatsapp: `whatsapp://send?text=${encodeURIComponent(article.title)}%20-%20${encodeURIComponent(
-			url
-		)}`
-	};
+		whatsapp: `whatsapp://send?text=${encodeURIComponent(article.title)}%20-%20${encodeURIComponent(url)}`
+	}
 
 	return (
 		<div>
@@ -46,7 +37,7 @@ export const SocialShareButtons = ({
 				<ul className="share-article-dialog__share-via-socials-wrapper">
 					<li className="o-share__action">
 						<a
-							className="o-share__icon o-share__icon--twitter"
+							className="o-share__icon o-share__icon--x"
 							href={mobileShareLinks.twitter}
 							rel="noopener noreferrer"
 							data-trackable="twitter"

diff --git a/components/x-live-blog-post/package.json b/components/x-live-blog-post/package.json
@@ -48,6 +48,6 @@
     "@financial-times/o-colors": "^6.4.2",
     "@financial-times/o-spacing": "^3.2.1",
     "@financial-times/o-typography": "^7.2.2",
-    "@financial-times/o-share" : "^9.0.0"
+    "@financial-times/o-share" : "^10.0.0"
   }
 }
diff --git a/components/x-live-blog-post/src/ShareButtons.jsx b/components/x-live-blog-post/src/ShareButtons.jsx
@@ -26,7 +26,7 @@ export default ({ postId, articleUrl, title }) => {
 				<ul data-toolbar="share">
 					<li className="o-share__action" data-share="twitter">
 						<a
-							className="o-share__icon o-share__icon--twitter"
+							className="o-share__icon o-share__icon--x"
 							rel="noopener"
 							href={twitterUrl}
 							data-trackable="twitter"

diff --git a/components/x-live-blog-post/src/__tests__/ShareButtons.test.jsx b/components/x-live-blog-post/src/__tests__/ShareButtons.test.jsx
@@ -13,7 +13,7 @@ describe('x-live-blog-post', () => {
 	describe('ShareButtons', () => {
 		it('renders correct twitter url', () => {
 			const shareButtons = mount(<ShareButtons {...props} />)
-			const twitterButton = shareButtons.find('.o-share__icon--twitter').first()
+			const twitterButton = shareButtons.find('.o-share__icon--x').first()
 
 			expect(twitterButton.prop('href')).toEqual(
 				'https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.ft.com%2F%23post-12345&text=Test%20title&via=financialtimes'

diff --git a/components/x-live-blog-post/src/svgIcons.jsx b/components/x-live-blog-post/src/svgIcons.jsx
@@ -6,8 +6,8 @@ Once this is resolved, these components should be replaced with o-share https://
  */
 export function TwitterSVG() {
 	return (
-		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
-			<path d="M417 720c193.2 0 298.9-160.1 298.9-298.9 0-4.5 0-9.1-.3-13.6 20.6-14.9 38.3-33.3 52.4-54.4-19.2 8.5-39.5 14.1-60.3 16.5 21.9-13.1 38.3-33.8 46.2-58.1-20.6 12.2-43.2 20.9-66.7 25.5-39.8-42.3-106.3-44.3-148.6-4.6-27.3 25.7-38.9 63.9-30.4 100.4-84.5-4.2-163.2-44.1-216.5-109.8-27.9 48-13.6 109.4 32.5 140.2-16.7-.5-33.1-5-47.7-13.1v1.3c0 50 35.3 93.1 84.3 103-15.5 4.2-31.7 4.8-47.4 1.8 13.8 42.8 53.2 72.1 98.1 72.9-37.2 29.2-83.1 45.1-130.5 45.1-8.4 0-16.7-.5-25-1.5 48 31 103.9 47.3 161 47.3" />
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+			<path d="M21.647 18.469 28.932 10h-1.726l-6.326 7.353L15.827 10H10l7.64 11.12L10 30h1.726l6.68-7.765L23.744 30h5.827l-7.924-11.531Zm-2.365 2.748-.774-1.107-6.16-8.81H15l4.971 7.11.774 1.107 6.462 9.242h-2.652l-5.273-7.541Z" />
 		</svg>
 	)
 }

diff --git a/components/x-live-blog-post/storybook/index.jsx b/components/x-live-blog-post/storybook/index.jsx
@@ -5,7 +5,7 @@ import '../src/LiveBlogPost.scss'
 
 const dependencies = {
 	'o-fonts': '^5.3.0',
-	'o-share': '^9.0.0'
+	'o-share': '^10.0.0'
 }
 
 export default {

diff --git a/package-lock.json b/package-lock.json