@financial-times/x-teaser 17.0.2 → 17.0.3

package/__tests__/RelativeTime.test.jsx

@@ -0,0 +1,67 @@
+const { h } = require('@financial-times/x-engine')
+const { mount } = require('@financial-times/x-test-utils/enzyme')
+
+import RelativeTime from '../src/RelativeTime'
+
+jest.mock('../src/concerns/date-time', () => ({
+	isRecent: jest.fn(),
+	getRelativeDate: jest.fn(),
+	getStatus: jest.fn()
+}))
+
+import { isRecent, getRelativeDate, getStatus } from '../src/concerns/date-time'
+
+describe('RelativeTime - Timestamp and Status Label Logic', () => {
+	const samplePublishedDate = '2021-10-15T12:00:00.000Z'
+
+	beforeEach(() => {
+		jest.clearAllMocks()
+		getRelativeDate.mockReturnValue('1 hour ago')
+		isRecent.mockReturnValue(true)
+	})
+
+	describe('NEW status', () => {
+		beforeEach(() => {
+			getStatus.mockReturnValue('new')
+		})
+
+		it('displays only the NEW label without timestamp element', () => {
+			const subject = mount(
+				<RelativeTime publishedDate={samplePublishedDate} firstPublishedDate={samplePublishedDate} />
+			)
+			expect(subject.find('.o-teaser__timestamp-prefix')).toHaveLength(1)
+			expect(subject.find('.o-teaser__timestamp-prefix').text()).toContain('new')
+			expect(subject.find('time')).toHaveLength(0)
+		})
+	})
+
+	describe('UPDATED status', () => {
+		beforeEach(() => {
+			getStatus.mockReturnValue('updated')
+		})
+
+		it('displays only the UPDATED label without timestamp element', () => {
+			const subject = mount(
+				<RelativeTime publishedDate={samplePublishedDate} firstPublishedDate={samplePublishedDate} />
+			)
+			expect(subject.find('.o-teaser__timestamp-prefix')).toHaveLength(1)
+			expect(subject.find('.o-teaser__timestamp-prefix').text()).toContain('updated')
+			expect(subject.find('time')).toHaveLength(0)
+		})
+	})
+
+	describe('no status (older content)', () => {
+		beforeEach(() => {
+			getStatus.mockReturnValue('')
+		})
+
+		it('displays only the timestamp without status label', () => {
+			const subject = mount(
+				<RelativeTime publishedDate={samplePublishedDate} firstPublishedDate={samplePublishedDate} />
+			)
+			expect(subject.find('.o-teaser__timestamp-prefix')).toHaveLength(0)
+			expect(subject.find('time')).toHaveLength(1)
+			expect(subject.find('.o-teaser__timestamp-date')).toHaveLength(1)
+		})
+	})
+})

package/dist/Teaser.cjs.js

@@ -429,12 +429,12 @@ var RelativeTime = ({
     className: `o-teaser__timestamp o-teaser__timestamp--${status}`
   }, status ? xEngine.h("span", {
     className: "o-teaser__timestamp-prefix"
-  }, ` ${status} `, " ") : null, xEngine.h("time", {
+  }, ` ${status} `, " ") : xEngine.h("time", {
     className: "o-teaser__timestamp-date o-date",
     "data-o-component": "o-date",
     "data-o-date-format": showAlways ? 'time-ago-limit-24-hours' : 'time-ago-limit-4-hours',
     dateTime: dateformat(publishedDate, dateformat.masks.isoDateTime, true)
-  }, status ? '' : displayTime(relativeDate))) : null;
+  }, displayTime(relativeDate))) : null;
 };
 
 const LiveBlogLabels = {

package/dist/Teaser.es5.js

@@ -516,12 +516,12 @@ var RelativeTime = (function (_ref) {
     className: "o-teaser__timestamp o-teaser__timestamp--".concat(status)
   }, status ? xEngine.h("span", {
     className: "o-teaser__timestamp-prefix"
-  }, " ".concat(status, " "), " ") : null, xEngine.h("time", {
+  }, " ".concat(status, " "), " ") : xEngine.h("time", {
     className: "o-teaser__timestamp-date o-date",
     "data-o-component": "o-date",
     "data-o-date-format": showAlways ? 'time-ago-limit-24-hours' : 'time-ago-limit-4-hours',
     dateTime: dateformat(publishedDate, dateformat.masks.isoDateTime, true)
-  }, status ? '' : displayTime(relativeDate))) : null;
+  }, displayTime(relativeDate))) : null;
 });
 
 var LiveBlogLabels = {

package/dist/Teaser.esm.js

@@ -423,12 +423,12 @@ var RelativeTime = ({
     className: `o-teaser__timestamp o-teaser__timestamp--${status}`
   }, status ? h("span", {
     className: "o-teaser__timestamp-prefix"
-  }, ` ${status} `, " ") : null, h("time", {
+  }, ` ${status} `, " ") : h("time", {
     className: "o-teaser__timestamp-date o-date",
     "data-o-component": "o-date",
     "data-o-date-format": showAlways ? 'time-ago-limit-24-hours' : 'time-ago-limit-4-hours',
     dateTime: dateformat(publishedDate, dateformat.masks.isoDateTime, true)
-  }, status ? '' : displayTime(relativeDate))) : null;
+  }, displayTime(relativeDate))) : null;
 };
 
 const LiveBlogLabels = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/x-teaser",
-  "version": "17.0.2",
+  "version": "17.0.3",
   "description": "This module provides templates for use with o-teaser. Teasers are used to present content.",
   "source": "src/Teaser.jsx",
   "main": "dist/Teaser.cjs.js",
@@ -18,7 +18,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@financial-times/x-engine": "^17.0.2",
+    "@financial-times/x-engine": "^17.0.3",
     "date-fns": "^2.30.0",
     "dateformat": "^3.0.3"
   },

package/src/RelativeTime.jsx

@@ -21,15 +21,19 @@ export default ({ publishedDate, firstPublishedDate, showAlways = false }) => {
 
 	return showAlways === true || isRecent(relativeDate) ? (
 		<div className={`o-teaser__timestamp o-teaser__timestamp--${status}`}>
-			{status ? <span className="o-teaser__timestamp-prefix">{` ${status} `} </span> : null}
-			<time
-				className="o-teaser__timestamp-date o-date"
-				data-o-component="o-date"
-				data-o-date-format={showAlways ? 'time-ago-limit-24-hours' : 'time-ago-limit-4-hours'}
-				dateTime={dateformat(publishedDate, dateformat.masks.isoDateTime, true)}>
-				{/* Let o-date handle anything < 1 hour on the client */}
-				{status ? '' : displayTime(relativeDate)}
-			</time>
+			{status ? (
+				<span className="o-teaser__timestamp-prefix">{` ${status} `} </span>
+			) : (
+				<time
+					className="o-teaser__timestamp-date o-date"
+					data-o-component="o-date"
+					data-o-date-format={showAlways ? 'time-ago-limit-24-hours' : 'time-ago-limit-4-hours'}
+					dateTime={dateformat(publishedDate, dateformat.masks.isoDateTime, true)}
+				>
+					{/* Let o-date handle anything < 1 hour on the client */}
+					{displayTime(relativeDate)}
+				</time>
+			)}
 		</div>
 	) : null
 }