diff --git a/components/o-share/demos/src/data.json b/components/o-share/demos/src/data.json
index 6bbaff2bec..9cb9716f5a 100644
--- 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": ""
},
+ {
+ "name": "Bluesky",
+ "className": "bluesky",
+ "link": "https://bsky.app/intent/compose?text=US%20drugs%20via%20%40financialtimes.com%0Ahttp%3A%2F%2Fon.ft.com%2F1mUdgA2",
+ "svg": ""
+ },
{
"name": "Facebook",
"className": "facebook",
diff --git a/components/o-share/src/scss/_variables.scss b/components/o-share/src/scss/_variables.scss
index a1b17e7c8c..b65d90c2e2 100644
--- 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
index 31d9007af7..fa7e9d647c 100644
--- 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}%20via%20%40financialtimes.com%0A${url}`,
link: url,
enterpriseSharing: url,
};
diff --git a/components/o-share/src/tsx/svgComponents.tsx b/components/o-share/src/tsx/svgComponents.tsx
index 60764fb656..fabffeecb9 100644
--- a/components/o-share/src/tsx/svgComponents.tsx
+++ b/components/o-share/src/tsx/svgComponents.tsx
@@ -3,6 +3,7 @@ export const iconMap = {
facebook: ,
linkedin: ,
whatsapp: ,
+ bluesky: ,
};
function XSVG() {
@@ -38,3 +39,14 @@ function WhatsappSVG() {
);
}
+
+function BlueskySVG() {
+ return (
+
+ );
+}
diff --git a/components/o-share/stories/docs/sassdoc.md b/components/o-share/stories/docs/sassdoc.md
index 713477afe8..97993eaf04 100644
--- 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
index 020ce48582..878f48b588 100644
--- a/components/o-share/stories/share.stories.tsx
+++ b/components/o-share/stories/share.stories.tsx
@@ -1,20 +1,20 @@
-import { Story, ComponentMeta } from "@storybook/react";
+import {Story, ComponentMeta} from '@storybook/react';
-import { Share } from "../src/tsx/share";
-import { ShareIcon, UrlProps } from "../src/tsx/shareIcon";
-import { useEffect, ComponentProps } from "react";
-import javascript from "../main";
-import "./share.scss";
+import {Share} from '../src/tsx/share';
+import {ShareIcon, UrlProps} from '../src/tsx/shareIcon';
+import {useEffect, ComponentProps} from 'react';
+import javascript from '../main';
+import './share.scss';
export default {
- title: "Components/o-share",
+ title: 'Components/o-share',
component: Share,
args: {
- title: "US drugs",
- url: "http://on.ft.com/1mUdgA2",
- titleExtra: "FT.com | Pharmaceuticals",
- summary: "US drugs group vows to maintain big British presence",
- relatedXAccounts: "ftcompanies",
+ title: 'US drugs',
+ url: 'http://on.ft.com/1mUdgA2',
+ titleExtra: 'FT.com | Pharmaceuticals',
+ summary: 'US drugs group vows to maintain big British presence',
+ relatedXAccounts: 'ftcompanies',
small: false,
inverse: false,
vertical: false,
@@ -40,6 +40,7 @@ const StoryTemplate: Story = args => {
return (
+
@@ -58,7 +59,7 @@ Inverse.args = {
inverse: true,
};
Inverse.parameters = {
- origamiBackground: "slate",
+ origamiBackground: 'slate',
};
export const Vertical: Story = StoryTemplate.bind({});
Vertical.args = {
diff --git a/package-lock.json b/package-lock.json
index bf5565825a..7e12fa7158 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3176,7 +3176,7 @@
},
"components/o-share": {
"name": "@financial-times/o-share",
- "version": "10.0.2",
+ "version": "10.0.3",
"license": "MIT",
"dependencies": {
"ftdomdelegate": "^4.0.6"
@@ -3544,7 +3544,7 @@
},
"components/o3-button": {
"name": "@financial-times/o3-button",
- "version": "2.0.0",
+ "version": "2.0.1",
"license": "MIT",
"devDependencies": {
"@financial-times/o3-figma-sb-links": "^0.0.0"
@@ -4674,7 +4674,7 @@
},
"libraries/o-tracking": {
"name": "@financial-times/o-tracking",
- "version": "4.5.4",
+ "version": "4.6.1",
"license": "MIT",
"dependencies": {
"ftdomdelegate": "^5"