feat: o-share Bluesky buttons

Financial-Times · Dec 23, 2024 · 9e034f4 · 9e034f4
1 parent 4022d60
commit 9e034f4
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 7 deletions.
diff --git a/components/o-share/demos/src/data.json b/components/o-share/demos/src/data.json
@@ -6,6 +6,12 @@
 			"link": "https://x.com/intent/tweet?url=http%3A%2F%2Fon.ft.com%2F1mUdgA2&text=US%20drugs&related=ftcompanies&via=FT",
 			"svg": "<svg viewBox='0 0 1024 1024' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M554.158 472.797L740.663 256H696.467L534.525 444.242L405.182 256H256L451.592 540.655L256 768H300.198L471.213 569.21L607.809 768H756.991L554.158 472.797ZM316.123 289.272H384.009L696.488 736.241H628.602L316.123 289.272Z' /></svg>"
 		},
+		{
+			"name": "Bluesky",
+			"className": "bluesky",
+			"link": "https://bsky.app/intent/compose?text=US%20drugs%20http%3A%2F%2Fon.ft.com%2F1mUdgA2",
+			"svg": "<svg viewBox=\"-8 -8 40 40\" fill=\"none\"  xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565C.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479c.815 2.736 3.713 3.66 6.383 3.364c.136-.02.275-.039.415-.056c-.138.022-.276.04-.415.056c-3.912.58-7.387 2.005-2.83 7.078c5.013 5.19 6.87-1.113 7.823-4.308c.953 3.195 2.05 9.271 7.733 4.308c4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056c2.67.297 5.568-.628 6.383-3.364c.246-.828.624-5.79.624-6.478c0-.69-.139-1.861-.902-2.206c-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8\"/></svg>"
+		},
 		{
 			"name": "Facebook",
 			"className": "facebook",

diff --git a/components/o-share/src/scss/_variables.scss b/components/o-share/src/scss/_variables.scss
@@ -37,7 +37,7 @@ $o-share-ft-icons-names: (corporate, mail, link, share, 'bookmark-outline');
 
 /// List of accepted social network icons, and the version
 /// @type Map
-$_o-share-icons: (x, facebook, linkedin, link, share, mail, pinterest, whatsapp, corporate, 'bookmark-outline');
+$_o-share-icons: (x, facebook, linkedin, link, share, mail, pinterest, whatsapp, corporate, 'bookmark-outline', bluesky);
 
 /// A map of icons to their colour.
 /// @type Map
@@ -47,5 +47,6 @@ $_o-share-colors: (
 	facebook: #3b579d,
 	linkedin: #0077b5,
 	pinterest: #bd081c,
-	whatsapp: #25d366
+	whatsapp: #25d366,
+	bluesky: #0385ff
 );
diff --git a/components/o-share/src/tsx/shareIcon.tsx b/components/o-share/src/tsx/shareIcon.tsx
@@ -5,6 +5,7 @@ type IconType =
 	| "facebook"
 	| "linkedin"
 	| "whatsapp"
+	| "bluesky"
 
 export type UrlProps = {
 	url: string;
@@ -86,8 +87,10 @@ function generateDescriptiveLinkText(title: string, socialNetwork: IconType) {
 		linkedin: `Share ${title} on LinkedIn (opens a new window)`,
 		pinterest: `Share ${title} on Pinterest (opens a new window)`,
 		whatsapp: `Share ${title} on Whatsapp (opens a new window)`,
+		bluesky: `Share ${title} on Bluesky (opens a new window)`,
 		link: `Open link in new window`,
 		enterpriseSharing: `Share ${title} with your Enterprise Sharing tools (opens a new window)`,
+
 	};
 	return descriptiveLinkText[socialNetwork];
 }
@@ -120,6 +123,7 @@ function generateSocialUrl(
 		linkedin: `http://www.linkedin.com/shareArticle?mini=true&url=${url}&title=${title}+%7C+${titleExtra}&summary=${summary}&source=Financial+Times`,
 		pinterest: `http://www.pinterest.com/pin/create/button/?url=${url}&description=${title}`,
 		whatsapp: `whatsapp://send?text=${title}%20(${titleExtra})%20-%20${url}`,
+		bluesky: `https://bsky.app/intent/compose?text=${title}%20(${titleExtra})%20-%20${url}`,
 		link: url,
 		enterpriseSharing: url,
 	};

diff --git a/components/o-share/src/tsx/svgComponents.tsx b/components/o-share/src/tsx/svgComponents.tsx
@@ -3,6 +3,7 @@ export const iconMap = {
 	facebook: <FacebookSVG />,
 	linkedin: <LinkedInSVG />,
 	whatsapp: <WhatsappSVG />,
+	bluesky: <BlueskySVG />,
 };
 
 function XSVG() {
@@ -38,3 +39,11 @@ function WhatsappSVG() {
 		</svg>
 	);
 }
+
+function BlueskySVG() {
+	return (
+		<svg viewBox="-8 -8 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565C.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479c.815 2.736 3.713 3.66 6.383 3.364c.136-.02.275-.039.415-.056c-.138.022-.276.04-.415.056c-3.912.58-7.387 2.005-2.83 7.078c5.013 5.19 6.87-1.113 7.823-4.308c.953 3.195 2.05 9.271 7.733 4.308c4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056c2.67.297 5.568-.628 6.383-3.364c.246-.828.624-5.79.624-6.478c0-.69-.139-1.861-.902-2.206c-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8" />
+		</svg>
+	);
+}
diff --git a/components/o-share/stories/docs/sassdoc.md b/components/o-share/stories/docs/sassdoc.md
@@ -21,7 +21,7 @@ Output all o-share styles.
 
 | Parameter | Type | Default                                                                                                                                                        | Description                                                                   |
 | --------- | ---- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
-| opts      | Map  | ('icons': ('x', 'facebook', 'linkedin', 'link', 'share', 'mail', 'pinterest', 'whatsapp', 'corporate'), 'sizes': ('small'), 'vertical': true, 'inverse': true) | The o-share variants to include styles for (see the README for more details). |
+| opts      | Map  | ('icons': ('x', 'facebook', 'linkedin', 'link', 'share', 'mail', 'pinterest', 'whatsapp', 'corporate', 'bluesky'), 'sizes': ('small'), 'vertical': true, 'inverse': true) | The o-share variants to include styles for (see the README for more details). |
 
 #### Examples
 
@@ -39,7 +39,7 @@ styles for select variants.
 
 ```Output
 @include oShare($opts: (
-     'icons': ('x', 'facebook', 'linkedin', 'link', 'share', 'mail', 'pinterest', 'whatsapp', 'corporate'),
+     'icons': ('x', 'facebook', 'linkedin', 'bluesky', 'link', 'share', 'mail', 'pinterest', 'whatsapp', 'corporate'),
      'sizes': ('small'),
      'vertical': true,
      'inverse': true

diff --git a/components/o-share/stories/share.stories.tsx b/components/o-share/stories/share.stories.tsx
@@ -43,6 +43,7 @@ const StoryTemplate: Story<ShareProps> = args => {
 			<ShareIcon icon="facebook" urlProps={shareIconProps} />
 			<ShareIcon icon="linkedin" urlProps={shareIconProps} />
 			<ShareIcon icon="whatsapp" urlProps={shareIconProps} />
+			<ShareIcon icon="bluesky" urlProps={shareIconProps} />
 		</Share>
 	);
 };

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