@financial-times/x-teaser 20.0.0-beta.1 → 20.0.0-beta.2

package/Props.d.ts

@@ -66,7 +66,7 @@ export interface Meta {
   /** @deprecated - use metaLinks instead */
   metaLink?: MetaLink
   /** @deprecated - use metaLinks instead
-   * allback used if the parentId is the same as the display concept */
+   * Fallback used if the parentId is the same as the display concept */
   metaAltLink?: MetaLink
   /** Promoted content type */
   promotedPrefixText?: string

package/__tests__/same-label.test.js

@@ -0,0 +1,19 @@
+import sameLabel from '../src/concerns/same-label'
+
+describe('same-label', () => {
+	describe('when label matches context.parentLabel', () => {
+		it('returns true', () => {
+			const context = { parentLabel: 'Opinion' }
+			const label = 'Opinion'
+			expect(sameLabel(context, label)).toBe(true)
+		})
+	})
+
+	describe('when label does not match context.parentLabel', () => {
+		it('returns false', () => {
+			const context = { parentLabel: 'Opinion' }
+			const label = 'News'
+			expect(sameLabel(context, label)).toBe(false)
+		})
+	})
+})

package/dist/Teaser.cjs.js

@@ -342,9 +342,10 @@ var Image = ({
   }))));
 };
 
-const sameLabel = (context = {}, label) => {
-  return label && context && context.parentLabel && label === context.parentLabel;
-};
+function sameLabel(context = {}, label) {
+  return Boolean(label && label === (context === null || context === void 0 ? void 0 : context.parentLabel));
+}
+
 const isLegacyMode = metaLinks => !Array.isArray(metaLinks);
 const getDisplayLink = ({
   metaLink,
@@ -664,7 +665,7 @@ var Title = ({
       className: 'js-teaser-heading-link',
       'aria-label': ariaLabel
     }
-  }), showTitlePrefix && titlePrefix && xEngine.h("span", {
+  }), showTitlePrefix && titlePrefix && !sameLabel(props.context, titlePrefix) && xEngine.h("span", {
     className: "o-teaser__heading-prefix"
   }, `${titlePrefix}. `), displayTitle));
 };
@@ -856,6 +857,7 @@ Only render the Headshot when the media rule `headshot` is true,
 which means `showByline` is falsy. */
 media(props) === 'headshot' ? xEngine.h(Headshot, props) : null), media(props) === 'promotionalContent' ? xEngine.h(PromotionalContent, props) : null, media(props) === 'image' ? xEngine.h(Image, props) : null, props.showRelatedLinks ? xEngine.h(RelatedLinks, props) : null);
 
+exports.Byline = Byline;
 exports.Container = Container;
 exports.Content = Content;
 exports.CustomSlot = CustomSlot;

package/dist/Teaser.es5.js

@@ -485,11 +485,12 @@ var Image = (function (_ref4) {
   }))));
 });
 
-var sameLabel = function sameLabel() {
+function sameLabel() {
   var context = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var label = arguments.length > 1 ? arguments[1] : undefined;
-  return label && context && context.parentLabel && label === context.parentLabel;
-};
+  return Boolean(label && label === (context === null || context === void 0 ? void 0 : context.parentLabel));
+}
+
 var isLegacyMode = function isLegacyMode(metaLinks) {
   return !Array.isArray(metaLinks);
 };
@@ -817,7 +818,7 @@ var Title = (function (_ref) {
       className: 'js-teaser-heading-link',
       'aria-label': ariaLabel
     }
-  }), showTitlePrefix && titlePrefix && xEngine.h("span", {
+  }), showTitlePrefix && titlePrefix && !sameLabel(props.context, titlePrefix) && xEngine.h("span", {
     className: "o-teaser__heading-prefix"
   }, "".concat(titlePrefix, ". ")), displayTitle));
 });
@@ -1016,6 +1017,7 @@ var Teaser = function Teaser(props) {
   media(props) === 'headshot' ? xEngine.h(Headshot, props) : null), media(props) === 'promotionalContent' ? xEngine.h(PromotionalContent, props) : null, media(props) === 'image' ? xEngine.h(Image, props) : null, props.showRelatedLinks ? xEngine.h(RelatedLinks, props) : null);
 };
 
+exports.Byline = Byline;
 exports.Container = Container;
 exports.Content = Content;
 exports.CustomSlot = CustomSlot;

package/dist/Teaser.esm.js

@@ -336,9 +336,10 @@ var Image = ({
   }))));
 };
 
-const sameLabel = (context = {}, label) => {
-  return label && context && context.parentLabel && label === context.parentLabel;
-};
+function sameLabel(context = {}, label) {
+  return Boolean(label && label === (context === null || context === void 0 ? void 0 : context.parentLabel));
+}
+
 const isLegacyMode = metaLinks => !Array.isArray(metaLinks);
 const getDisplayLink = ({
   metaLink,
@@ -658,7 +659,7 @@ var Title = ({
       className: 'js-teaser-heading-link',
       'aria-label': ariaLabel
     }
-  }), showTitlePrefix && titlePrefix && h("span", {
+  }), showTitlePrefix && titlePrefix && !sameLabel(props.context, titlePrefix) && h("span", {
     className: "o-teaser__heading-prefix"
   }, `${titlePrefix}. `), displayTitle));
 };
@@ -850,4 +851,4 @@ Only render the Headshot when the media rule `headshot` is true,
 which means `showByline` is falsy. */
 media(props) === 'headshot' ? h(Headshot, props) : null), media(props) === 'promotionalContent' ? h(PromotionalContent, props) : null, media(props) === 'image' ? h(Image, props) : null, props.showRelatedLinks ? h(RelatedLinks, props) : null);
 
-export { Container, Content, CustomSlot, Headshot, Image, Meta, RelatedLinks, Standfirst, Status, Teaser, Title, Video, presets };
+export { Byline, Container, Content, CustomSlot, Headshot, Image, Meta, RelatedLinks, Standfirst, Status, Teaser, Title, Video, presets };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/x-teaser",
-  "version": "20.0.0-beta.1",
+  "version": "20.0.0-beta.2",
   "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": "^20.0.0-beta.1",
+    "@financial-times/x-engine": "^20.0.0-beta.2",
     "dateformat": "^3.0.3"
   },
   "devDependencies": {

package/src/MetaLink.jsx

@@ -1,8 +1,5 @@
 import { h } from '@financial-times/x-engine'
-
-const sameLabel = (context = {}, label) => {
-	return label && context && context.parentLabel && label === context.parentLabel
-}
+import sameLabel from './concerns/same-label'
 
 const isLegacyMode = (metaLinks) => !Array.isArray(metaLinks)
 

package/src/Teaser.jsx

@@ -46,6 +46,7 @@ export {
 	Headshot,
 	Image,
 	Meta,
+	Byline,
 	RelatedLinks,
 	Standfirst,
 	Status,

package/src/Title.jsx

@@ -1,5 +1,6 @@
 import { h } from '@financial-times/x-engine'
 import Link from './Link'
+import sameLabel from './concerns/same-label'
 
 export default ({
 	title,
@@ -33,7 +34,7 @@ export default ({
 					'aria-label': ariaLabel
 				}}
 			>
-				{showTitlePrefix && titlePrefix && (
+				{showTitlePrefix && titlePrefix && !sameLabel(props.context, titlePrefix) && (
 					<span className="o-teaser__heading-prefix">{`${titlePrefix}. `}</span>
 				)}
 				{displayTitle}

package/src/concerns/same-label.js

@@ -0,0 +1,3 @@
+export default function sameLabel(context = {}, label) {
+	return Boolean(label && label === context?.parentLabel)
+}