x-live-blog-post component

.storybook/config.js

@@ -14,4 +14,5 @@ configure(() => {
 	// Add regular story definitions (i.e. those using storiesOf() directly below)
 	require('../components/x-increment/storybook/index.jsx');
 	require('../components/x-follow-button/storybook/index.jsx');
+	require('../components/x-live-blog-post/storybook/index.jsx');
 }, module);

CODEOWNERS

@@ -6,3 +6,4 @@
 
 components/x-teaser @Financial-Times/content-discovery
 components/x-teaser-timeline @Financial-Times/content-discovery
+components/x-live-blog-post @Financial-Times/content-innovation

components/x-live-blog-post/.bowerrc

@@ -0,0 +1,8 @@
+{
+	"registry": {
+		"search": [
+			"https://origami-bower-registry.ft.com",
+			"https://registry.bower.io"
+		]
+	}
+}

components/x-live-blog-post/.npmignore

@@ -0,0 +1,3 @@
+src/
+stories/
+rollup.js

components/x-live-blog-post/bower.json

@@ -0,0 +1,11 @@
+{
+  "name": "@financial-times/x-live-blog-post",
+  "description": "",
+  "main": "dist/LiveBlogPost.cjs.js",
+  "private": true,
+  "dependencies": {
+    "o-colors": "^5.2.4",
+    "o-spacing": "^2.0.4",
+    "o-typography": "^6.4.0"
+  }
+}

components/x-live-blog-post/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@financial-times/x-live-blog-post",
+  "version": "0.0.0",
+  "description": "",
+  "main": "dist/LiveBlogPost.cjs.js",
+  "module": "dist/LiveBlogPost.esm.js",
+  "browser": "dist/LiveBlogPost.es5.js",
+  "style": "dist/LiveBlogPost.css",
+  "scripts": {
+    "prepare": "bower install && npm run build",
+    "build": "node rollup.js",
+    "start": "node rollup.js --watch"
+  },
+  "keywords": [
+    "x-dash"
+  ],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@financial-times/x-engine": "file:../../packages/x-engine"
+  },
+  "devDependencies": {
+    "@financial-times/x-test-utils": "file:../../packages/x-test-utils",
+    "@financial-times/x-rollup": "file:../../packages/x-rollup",
+    "bower": "^1.8.8"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Financial-Times/x-dash.git"
+  },
+  "homepage": "https://github.com/Financial-Times/x-dash/tree/master/components/x-live-blog-post",
+  "engines": {
+    "node": ">= 10.x"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

components/x-live-blog-post/readme.md

@@ -0,0 +1,47 @@
+# x-live-blog-post
+
+This module displays a live blog post with title, body, timestamp and share buttons.  
+
+
+## Installation
+
+This module is compatible with Node 10.x+ and is distributed on npm.
+
+```bash
+npm install --save @financial-times/x-live-blog-post
+```
+
+The [`x-engine`][engine] module is used to inject your chosen runtime into the component. Please read the `x-engine` documentation first if you are consuming `x-` components for the first time in your application.
+
+[engine]: https://github.com/Financial-Times/x-dash/tree/master/packages/x-engine
+
+
+## Usage
+
+The components provided by this module are all functions that expect a map of [properties](#properties). They can be used with vanilla JavaScript or JSX (If you are not familiar check out [WTF is JSX][jsx-wtf] first). For example if you were writing your application using React you could use the component like this:
+
+```jsx
+import React from 'react';
+import { LiveBlogPost } from '@financial-times/x-live-blog-post';
+
+// A == B == C
+const a = LiveBlogPost(props);
+const b = <LiveBlogPost {...props} />;
+const c = React.createElement(LiveBlogPost, props);
+```
+
+All `x-` components are designed to be compatible with a variety of runtimes, not just React. Check out the [`x-engine`][engine] documentation for a list of recommended libraries and frameworks.
+
+[jsx-wtf]: https://jasonformat.com/wtf-is-jsx/
+
+### Properties
+
+Feature             | Type   | Notes
+--------------------|--------|----------------------------
+`postId`            | String | Unique id to reference the content
+`title`             | String | Title of the content
+`content`           | String | Body of the content
+`isBreakingNews`    | Bool   | When `true` displays "breaking news" tag
+`publishedTimestamp`| String | ISO timestamp of publish date
+`articleUrl`        | String | Url of the main article that includes this post
+`showShareButtons`  | Bool   | default: `false` - Shows social media share buttons when `true`

components/x-live-blog-post/rollup.js

@@ -0,0 +1,4 @@
+const xRollup = require('@financial-times/x-rollup');
+const pkg = require('./package.json');
+
+xRollup({ input: './src/LiveBlogPost.jsx', pkg });

components/x-live-blog-post/src/LiveBlogPost.jsx

@@ -0,0 +1,31 @@
+import { h } from '@financial-times/x-engine';
+import ShareButtons from './ShareButtons';
+import Timestamp from './Timestamp';
+import styles from './LiveBlogPost.scss';
+
+const LiveBlogPost = (props) => {
+	const {
+		postId,
+		title,
+		content,
+		publishedTimestamp,
+		isBreakingNews,
+		articleUrl,
+		showShareButtons = false,
+	} = props;
+
+	return (
+		<article className={styles['live-blog-post']} data-trackable="live-post">
+			<div className="live-blog-post__meta">
+				<Timestamp publishedTimestamp={publishedTimestamp} />
+			</div>
+			{isBreakingNews && <div className={styles['live-blog-post__breaking-news']}>Breaking news</div>}
+			<h1 className={styles['live-blog-post__title']}>{title}</h1>
+			<div className={styles['live-blog-post__body']} dangerouslySetInnerHTML={{ __html: content }} />
+			{showShareButtons &&
+			<ShareButtons postId={postId} articleUrl={articleUrl} title={title} />}
+		</article>
+	);
+};
+
+export { LiveBlogPost };

components/x-live-blog-post/src/LiveBlogPost.scss

@@ -0,0 +1,70 @@
+@import 'o-typography/main';
+@import 'o-spacing/main';
+@import 'o-colors/main';
+
+.live-blog-post {
+  	border-bottom: 1px solid oColorsMix(black, paper, 20);
+  	margin-top: oSpacingByName('s8');
+	color: oColorsMix(black, paper, 90);
+}
+
+.live-blog-post__title {
+	@include oTypographyDisplay($scale: 5);
+  	margin-top: oSpacingByName('s4');
+}
+
+.live-blog-post__breaking-news + .live-blog-post__title {
+  	margin-top: oSpacingByName('s1');
+}
+
+.live-blog-post__body {
+	@include oTypographySerif($scale: 1, $line-height: 1.55);
+  	margin-top: oSpacingByName('s6');
+}
+
+.live-blog-post__body ul {
+  	@include oTypographyList('unordered');
+}
+
+.live-blog-post__timestamp {
+  	@include oTypographySans($scale:0, $weight: 'semibold');
+  	font-size: 14px;
+  	text-transform: uppercase;
+}
+
+.live-blog-post__timestamp-exact-time {
+  	@include oTypographySans($scale:0, $weight: 'light');
+  	font-size: 14px;
+  	color: oColorsMix(black, paper, 50);
+  	padding-left: oSpacingByName('s2');
+}
+
+.live-blog-post__timestamp-container:after {
+  	content: '';
+  	display: block;
+  	width: oSpacingByName('s4');
+  	border-bottom: 4px solid oColorsMix(black, paper, 90);
+}
+
+.live-blog-post__share-buttons {
+  	margin-top: oSpacingByName('s6');
+  	margin-bottom: oSpacingByName('s8');
+}
+
+.live-blog-post__breaking-news {
+  	@include oTypographySans($scale:0);
+	font-size: 12px;
+	color: oColorsByName('crimson');
+	text-transform: uppercase;
+  	margin-top: oSpacingByName('s4');
+}
+
+.live-blog-post__breaking-news:before {
+  	content: '';
+  	display: inline-block;
+  	width: oSpacingByName('s2');
+  	height: oSpacingByName('s2');
+	margin-right: oSpacingByName('s1');
+  	border-radius: 50%;
+  	background-color: oColorsByName('crimson');
+}

components/x-live-blog-post/src/ShareButtons.jsx

@@ -0,0 +1,52 @@
+import { h } from '@financial-times/x-engine';
+import styles from './LiveBlogPost.scss';
+
+export default ({ postId, articleUrl, title }) => {
+	const shareUrl = articleUrl ? new URL(articleUrl) : null;
+	if (shareUrl) {
+		shareUrl.hash = `post-${postId}`;
+	}
+
+	const twitterUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(shareUrl)}&text=${encodeURIComponent(title)}&via=financialtimes`;
+	const facebookUrl = `http://www.facebook.com/sharer.php?u=${encodeURIComponent(shareUrl)}&t=${encodeURIComponent(title)}`;
+	const linkedInUrl = `http://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(shareUrl)}&title=${encodeURIComponent(title)}&source=Financial+Times`;
+
+	return (
+		<div className={styles['live-blog-post__share-buttons']}>
+			<div
+				data-o-component="o-share"
+				data-o-share-location={`live-blog-post-${postId}`}
+				className="o-share o-share--small">
+				<ul data-toolbar="share">
+					<li className="o-share__action" data-share="twitter">
+						<a
+							className="o-share__icon o-share__icon--twitter"
+							rel="noopener"
+							href={twitterUrl}
+							data-trackable="twitter">
+							<span className="o-share__text" aria-label={`Share ${title} on Twitter`}>Share on Twitter (opens new window)</span>
+						</a>
+					</li>
+					<li className="o-share__action" data-share="facebook">
+						<a
+							className="o-share__icon o-share__icon--facebook"
+							rel="noopener"
+							href={facebookUrl}
+							data-trackable="facebook">
+							<span className="o-share__text" aria-label={`Share ${title} on Facebook`}>Share on Facebook (opens new window)</span>
+						</a>
+					</li>
+					<li className="o-share__action" data-share="linkedin">
+						<a
+							className="o-share__icon o-share__icon--linkedin"
+							rel="noopener"
+							href={linkedInUrl}
+							data-trackable="linkedin">
+							<span className="o-share__text" aria-label={`Share ${title} on LinkedIn`}>Share on LinkedIn (opens new window)</span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	);
+};

components/x-live-blog-post/src/Timestamp.jsx

@@ -0,0 +1,45 @@
+import { h } from '@financial-times/x-engine';
+import styles from './LiveBlogPost.scss';
+
+export default ({ publishedTimestamp }) => {
+	const now = new Date();
+	const oneDay = 24 * 60 * 60 * 1000;
+	const date = new Date(publishedTimestamp);
+	const formatted = date.toLocaleString();
+
+	let format;
+	let showExactTime;
+
+	if (now.getTime() - date.getTime() < oneDay) {
+		// display published date in 'xx minutes ago' format
+		// and render exact time next to it
+		format = 'time-ago-no-seconds';
+		showExactTime = true;
+	} else {
+		// don't display time string if the post is older than one day
+		// because it is already included in the formatted timestamp
+		format = 'MMM dd, HH:mm';
+		showExactTime = false;
+	}
+
+	return (
+		<div className={styles['live-blog-post__timestamp-container']}>
+			<time
+				data-o-component="o-date"
+				className={`o-date ${styles['live-blog-post__timestamp']}`}
+				itemProp="datePublished"
+				data-o-date-format={format}
+				dateTime={publishedTimestamp}>{formatted}
+			</time>
+			{showExactTime && (
+			<time
+				data-o-component="o-date"
+				className={`o-date ${styles['live-blog-post__timestamp-exact-time']}`}
+				itemProp="exactTime"
+				data-o-date-format="HH:mm"
+				dateTime={publishedTimestamp}>{formatted}
+			</time>
+			)}
+		</div>
+	);
+};

components/x-live-blog-post/src/__tests__/LiveBlogPost.test.jsx

@@ -0,0 +1,62 @@
+const { h } = require('@financial-times/x-engine');
+const { mount } = require('@financial-times/x-test-utils/enzyme');
+
+import { LiveBlogPost } from '../LiveBlogPost';
+
+const breakingNews = {
+	postId: '12345',
+	title: 'Test',
+	content: '<p>Test</p>',
+	publishedTimestamp: new Date().toISOString(),
+	isBreakingNews: true,
+	articleUrl: 'Https://www.ft.com',
+	showShareButtons: true
+};
+
+const regularPost = {
+	postId: '12345',
+	title: 'Test title',
+	content: '<p><i>Test body</i></p>',
+	publishedTimestamp: new Date().toISOString(),
+	isBreakingNews: false,
+	articleUrl: 'Https://www.ft.com',
+	showShareButtons: true
+}
+
+describe('x-live-blog-post', () => {
+	it('renders title', () => {
+		const liveBlogPost = mount(<LiveBlogPost {...regularPost} />);
+
+		expect(liveBlogPost.html()).toContain('Test title');
+	});
+
+	it('renders timestamp', () => {
+		const liveBlogPost = mount(<LiveBlogPost {...regularPost} />);
+
+		expect(liveBlogPost.html()).toContain(regularPost.publishedTimestamp);
+	});
+
+	it('renders sharing buttons', () => {
+		const liveBlogPost = mount(<LiveBlogPost {...regularPost} />);
+
+		expect(liveBlogPost.html()).toContain('o-share__icon--linkedin');
+	});
+
+	it('renders breaking news tag when the post is a breaking news', () => {
+		const liveBlogPost = mount(<LiveBlogPost {...breakingNews} />);
+
+		expect(liveBlogPost.html()).toContain('Breaking news');
+	});
+
+	it('does not render breaking news tag when the post is not breaking news', () => {
+		const liveBlogPost = mount(<LiveBlogPost {...regularPost} />);
+
+		expect(liveBlogPost.html()).not.toContain('Breaking news');
+	});
+
+	it('does not escape content html', () => {
+		const liveBlogPost = mount(<LiveBlogPost {...regularPost} />);
+
+		expect(liveBlogPost.html()).toContain('<p><i>Test body</i></p>');
+	});
+});