@times-components/ts-slices 1.4.3 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@times-components/ts-slices",
-  "version": "1.4.3",
+  "version": "1.5.0",
   "description": "Reuseable Typescript React Components",
   "main": "dist/index.js",
   "dev": "dist/index.js",
@@ -50,7 +50,7 @@
     "node": ">=8.9"
   },
   "dependencies": {
-    "@times-components/ts-styleguide": "1.36.7",
+    "@times-components/ts-styleguide": "1.36.8",
     "date-fns": "2.28.0",
     "lodash.get": "4.4.2",
     "react": "16.9.0",
@@ -58,7 +58,7 @@
   },
   "devDependencies": {
     "@testing-library/react": "^12.1.2",
-    "@times-components/storybook": "4.3.1",
+    "@times-components/storybook": "4.4.0",
     "@types/jest": "24.9.1",
     "@types/lodash.get": "4.4.6",
     "@types/lodash.shuffle": "4.2.6",
@@ -88,5 +88,5 @@
       "@testing-library/jest-dom/extend-expect"
     ]
   },
-  "gitHead": "358bc4e3a3e654126c6b3af629dd1c6f074cc0cd"
+  "gitHead": "d63c06ead2b73c15e0735a258a243c38d382ee03"
 }

package/rnw.js

@@ -1 +1 @@
-module.exports=function(e){var t={};function i(a){if(t[a])return t[a].exports;var n=t[a]={i:a,l:!1,exports:{}};return e[a].call(n.exports,n,n.exports,i),n.l=!0,n.exports}return i.m=e,i.c=t,i.d=function(e,t,a){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(a,n,function(t){return e[t]}.bind(null,n));return a},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="",i(i.s=5)}([function(e,t){e.exports=require("react")},function(e,t){e.exports=require("@times-components/ts-styleguide/rnw")},function(e,t){e.exports=require("styled-components")},function(e,t){var i=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,a=/^\w*$/,n=/^\./,o=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,l=/\\(\\)?/g,r=/^\[object .+?Constructor\]$/,d="object"==typeof global&&global&&global.Object===Object&&global,s="object"==typeof self&&self&&self.Object===Object&&self,m=d||s||Function("return this")();var c,p=Array.prototype,h=Function.prototype,g=Object.prototype,y=m["__core-js_shared__"],f=(c=/[^.]+$/.exec(y&&y.keys&&y.keys.IE_PROTO||""))?"Symbol(src)_1."+c:"",u=h.toString,x=g.hasOwnProperty,b=g.toString,w=RegExp("^"+u.call(x).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),_=m.Symbol,S=p.splice,k=j(m,"Map"),E=j(Object,"create"),C=_?_.prototype:void 0,v=C?C.toString:void 0;function z(e){var t=-1,i=e?e.length:0;for(this.clear();++t<i;){var a=e[t];this.set(a[0],a[1])}}function F(e){var t=-1,i=e?e.length:0;for(this.clear();++t<i;){var a=e[t];this.set(a[0],a[1])}}function I(e){var t=-1,i=e?e.length:0;for(this.clear();++t<i;){var a=e[t];this.set(a[0],a[1])}}function N(e,t){for(var i,a,n=e.length;n--;)if((i=e[n][0])===(a=t)||i!=i&&a!=a)return n;return-1}function H(e,t){for(var n,o=0,l=(t=function(e,t){if(L(e))return!1;var n=typeof e;if("number"==n||"symbol"==n||"boolean"==n||null==e||P(e))return!0;return a.test(e)||!i.test(e)||null!=t&&e in Object(t)}(t,e)?[t]:L(n=t)?n:A(n)).length;null!=e&&o<l;)e=e[D(t[o++])];return o&&o==l?e:void 0}function R(e){return!(!$(e)||(t=e,f&&f in t))&&(function(e){var t=$(e)?b.call(e):"";return"[object Function]"==t||"[object GeneratorFunction]"==t}(e)||function(e){var t=!1;if(null!=e&&"function"!=typeof e.toString)try{t=!!(e+"")}catch(e){}return t}(e)?w:r).test(function(e){if(null!=e){try{return u.call(e)}catch(e){}try{return e+""}catch(e){}}return""}(e));var t}function O(e,t){var i,a,n=e.__data__;return("string"==(a=typeof(i=t))||"number"==a||"symbol"==a||"boolean"==a?"__proto__"!==i:null===i)?n["string"==typeof t?"string":"hash"]:n.map}function j(e,t){var i=function(e,t){return null==e?void 0:e[t]}(e,t);return R(i)?i:void 0}z.prototype.clear=function(){this.__data__=E?E(null):{}},z.prototype.delete=function(e){return this.has(e)&&delete this.__data__[e]},z.prototype.get=function(e){var t=this.__data__;if(E){var i=t[e];return"__lodash_hash_undefined__"===i?void 0:i}return x.call(t,e)?t[e]:void 0},z.prototype.has=function(e){var t=this.__data__;return E?void 0!==t[e]:x.call(t,e)},z.prototype.set=function(e,t){return this.__data__[e]=E&&void 0===t?"__lodash_hash_undefined__":t,this},F.prototype.clear=function(){this.__data__=[]},F.prototype.delete=function(e){var t=this.__data__,i=N(t,e);return!(i<0)&&(i==t.length-1?t.pop():S.call(t,i,1),!0)},F.prototype.get=function(e){var t=this.__data__,i=N(t,e);return i<0?void 0:t[i][1]},F.prototype.has=function(e){return N(this.__data__,e)>-1},F.prototype.set=function(e,t){var i=this.__data__,a=N(i,e);return a<0?i.push([e,t]):i[a][1]=t,this},I.prototype.clear=function(){this.__data__={hash:new z,map:new(k||F),string:new z}},I.prototype.delete=function(e){return O(this,e).delete(e)},I.prototype.get=function(e){return O(this,e).get(e)},I.prototype.has=function(e){return O(this,e).has(e)},I.prototype.set=function(e,t){return O(this,e).set(e,t),this};var A=B((function(e){var t;e=null==(t=e)?"":function(e){if("string"==typeof e)return e;if(P(e))return v?v.call(e):"";var t=e+"";return"0"==t&&1/e==-1/0?"-0":t}(t);var i=[];return n.test(e)&&i.push(""),e.replace(o,(function(e,t,a,n){i.push(a?n.replace(l,"$1"):t||e)})),i}));function D(e){if("string"==typeof e||P(e))return e;var t=e+"";return"0"==t&&1/e==-1/0?"-0":t}function B(e,t){if("function"!=typeof e||t&&"function"!=typeof t)throw new TypeError("Expected a function");var i=function(){var a=arguments,n=t?t.apply(this,a):a[0],o=i.cache;if(o.has(n))return o.get(n);var l=e.apply(this,a);return i.cache=o.set(n,l),l};return i.cache=new(B.Cache||I),i}B.Cache=I;var L=Array.isArray;function $(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function P(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&"[object Symbol]"==b.call(e)}e.exports=function(e,t,i){var a=null==e?void 0:H(e,t);return void 0===a?i:a}},function(e,t){e.exports=require("date-fns")},function(e,t,i){"use strict";i.r(t);var a=i(0),n=i.n(a),o=i(3),l=i.n(o);const r=["sm","md","lg","xlg"],d=e=>{if(e){let t={};return r.reduce((i,a)=>{const n={...t,...l()(e,a)};return t=n,{...i,[a]:n}},{})}},s=(e,t)=>!0===l()(l()(t,e),"isSideBySide"),m=(e,t)=>!0===l()(l()(t,e),"isCentered"),c=(e,t)=>`calc(${e}% - ${(e=>12*(2*e-2)/e)(t)}px)`;var p=i(4);const h=e=>l()(e,"images.alt",l()(e,"headline")),g=[760,660,560,480,380,320,270,230,180,120,80],y=(e,t)=>{var i;const a=(i=t,g.reduce((e,t)=>i<=t?t:e,g[0]))*window.devicePixelRatio,n=new URL(e),o=new URLSearchParams(n.search.slice(1));o.set("resize",a.toString());return`${"https://www.uat-thetimes.co.uk"===n.origin?"https://www.thetimes.co.uk":n.origin}${n.pathname}?${o.toString()}`},f=(e,t)=>e.includes("thetimes.co.uk/imageserver")?y(e,t):e;var u=i(2),x=i.n(u);const b=x.a.div.withConfig({displayName:"styles__LazyContainer",componentId:"qsbah5-0"})(["position:absolute;width:100%;height:100%;background-color:",";border-radius:",";transition:0.5s;div,img{width:100%;height:100%;border-radius:",";opacity:",";transition:opacity 0.5s;}"],({visible:e})=>e?"transparent":"#f0f0f0",({isRoundal:e})=>e?"50%":0,({isRoundal:e})=>e?"50%":0,({visible:e})=>e?1:0),w=x.a.div.withConfig({displayName:"styles__BackgroundImage",componentId:"qsbah5-1"})(["background:",";background-size:cover;"],({src:e})=>e?`url(${e}) no-repeat center center`:"none"),_=({url:e,alt:t,isRoundal:i,isBackground:o})=>{const l=n.a.createRef(),[r,d]=Object(a.useState)();return Object(a.useEffect)(()=>{if("IntersectionObserver"in window){const t=new IntersectionObserver(i=>i.forEach(i=>{if(i.isIntersecting&&(t.disconnect(),e&&l.current)){const t=l.current.offsetWidth,i=new Image;i.onload=()=>d(i.src),i.src=f(e,t)}}),{rootMargin:"60px"});return l.current&&t.observe(l.current),()=>t.disconnect()}e&&l.current&&d(f(e,l.current.offsetWidth))},[e,l]),n.a.createElement(b,{visible:!!r,isRoundal:i},o?n.a.createElement(w,{src:r,ref:l,role:"img","aria-label":t}):n.a.createElement("img",{src:r,alt:t,ref:l}))};var S=i(1);const k=(e,t)=>s(e,t)||((e,t)=>!0===l()(l()(t,e),"isImageHidden"))(e,t)?0:"12px",E=(e,t)=>t&&t.includes(e)?"block":"none",C=x.a.div.withConfig({displayName:"styles__ImageContainer",componentId:"sc-8lglkt-0"})(["margin-bottom:",";@media (min-width:","px){margin-bottom:",";}@media (min-width:","px){margin-bottom:",";}@media (min-width:","px){margin-bottom:",";}"],({schema:e})=>k("sm",e),S.breakpoints.medium,({schema:e})=>k("md",e),S.breakpoints.wide,({schema:e})=>k("lg",e),S.breakpoints.huge,({schema:e})=>k("xlg",e)),v=x.a.div.withConfig({displayName:"styles__ImageRatio",componentId:"sc-8lglkt-1"})(["position:relative;display:",";overflow:hidden;&:after{content:'';display:block;padding-bottom:",";}@media (min-width:","px){display:",";}@media (min-width:","px){display:",";}@media (min-width:","px){display:",";}"],({schema:e})=>E("sm",e),({ratio:e})=>(e=>{switch(e){case"16:9":return"56.25%";case"3:2":return"66.66%";case"1:1":return"100%";default:return 0}})(e),S.breakpoints.medium,({schema:e})=>E("md",e),S.breakpoints.wide,({schema:e})=>E("lg",e),S.breakpoints.huge,({schema:e})=>E("xlg",e)),z=({article:e,displaySchema:t,clickHandler:i})=>{const a=(e=>{if(!e)return{};let t;return Object.entries(e).reduce((e,[i,a])=>{const n=l()(a,"imageRatio",t);return t=n,n&&!l()(a,"isImageHidden")?{...e,[n]:[...l()(e,n,[]),i]}:e},{})})(t);return n.a.createElement(C,{schema:t},n.a.createElement("a",{onClick:t=>{e&&i&&i(t,e)},href:e.url},Object.entries(a).map(([t,i],a)=>{const o=((e,t)=>t.images.crops.find(t=>"*"===t.ratio||t.ratio===e))(t,e);return n.a.createElement(v,{key:a,ratio:t,schema:i},n.a.createElement(_,{url:l()(o,"url"),alt:h(e),isRoundal:"1:1"===t,isBackground:"*"===l()(o,"ratio")}))})))},F=(e,t)=>l()(l()(t,e),"headlineFontSize",10),I=(e,t)=>m(e,t)?"sm"===e||"md"===e?"90%":"80%":"100%",N=(e,t)=>m(e,t)?"center":"left",H=x.a.div.withConfig({displayName:"styles__HeadlineContainer",componentId:"k0mgwi-0"})(["width:",";margin:0 auto;@media (min-width:","px){width:",";}@media (min-width:","px){width:",";}@media (min-width:","px){width:",";}a{text-decoration:none;h3{margin:0;color:",";font-size:","px;line-height:","px;font-family:",";font-weight:normal;text-align:",";@media (min-width:","px){font-size:","px;line-height:","px;text-align:",";}@media (min-width:","px){font-size:","px;line-height:","px;text-align:",";}@media (min-width:","px){font-size:","px;line-height:","px;text-align:",";}}&:hover{h3{color:#006699;}}}"],({schema:e})=>I("sm",e),S.breakpoints.medium,({schema:e})=>I("md",e),S.breakpoints.wide,({schema:e})=>I("lg",e),S.breakpoints.huge,({schema:e})=>I("xlg",e),S.colours.functional.brandColour,({schema:e})=>F("sm",e),({schema:e})=>F("sm",e),S.fonts.headline,({schema:e})=>N("sm",e),S.breakpoints.medium,({schema:e})=>F("md",e),({schema:e})=>F("md",e),({schema:e})=>N("md",e),S.breakpoints.wide,({schema:e})=>F("lg",e),({schema:e})=>F("lg",e),({schema:e})=>N("lg",e),S.breakpoints.huge,({schema:e})=>F("xlg",e),({schema:e})=>F("xlg",e),({schema:e})=>N("xlg",e)),R=({article:e,displaySchema:t,clickHandler:i})=>{if(!e.headline)return null;return n.a.createElement(H,{schema:t},n.a.createElement("a",{onClick:t=>{e&&i&&i(t,e)},href:e.url},n.a.createElement("h3",null,e.headline)))},O=(e,t)=>s(e,t)?"row":"column",j=(e,t)=>s(e,t)?l()(l()(t,e),"sideBySideWidth","50%"):"100%",A=(e,t)=>s(e,t)?l()(l()(t,e),"sideBySidePadding",8)+"px":0,D=(e,t)=>m(e,t)?"center":"flex-start",B=(e,t)=>m(e,t)&&!s(e,t)?"16px 0 24px 0":0,L=(e,t)=>l()(l()(t,e),"backgroundColor","transparent"),$=x.a.article.withConfig({displayName:"shared-styles__ArticleContainer",componentId:"sc-1kek94e-0"})(["display:flex;flex-direction:",";background-color:",";@media (min-width:","px){flex-direction:",";background-color:",";}@media (min-width:","px){flex-direction:",";background-color:",";}@media (min-width:","px){flex-direction:",";background-color:",";}"],({schema:e})=>O("sm",e),({schema:e})=>L("sm",e),S.breakpoints.medium,({schema:e})=>O("md",e),({schema:e})=>L("md",e),S.breakpoints.wide,({schema:e})=>O("lg",e),({schema:e})=>L("lg",e),S.breakpoints.huge,({schema:e})=>O("xlg",e),({schema:e})=>L("xlg",e)),P=x.a.div.withConfig({displayName:"shared-styles__SideBySideColumn",componentId:"sc-1kek94e-1"})(["width:100%;&:first-of-type{flex-shrink:0;width:",";padding-right:",";}&:last-of-type{display:flex;flex-direction:column;justify-content:",";align-items:",";margin:",";padding-left:",";}@media (min-width:","px){&:first-of-type{width:",";padding-right:",";}&:last-of-type{justify-content:",";align-items:",";margin:",";padding-left:",";}}@media (min-width:","px){&:first-of-type{width:",";padding-right:",";}&:last-of-type{justify-content:",";align-items:",";margin:",";padding-left:",";}}@media (min-width:","px){&:first-of-type{width:",";padding-right:",";}&:last-of-type{justify-content:",";align-items:",";margin:",";padding-left:",";}}"],({schema:e})=>j("sm",e),({schema:e})=>A("sm",e),({schema:e})=>D("sm",e),({schema:e})=>D("sm",e),({schema:e})=>B("sm",e),({schema:e})=>A("sm",e),S.breakpoints.medium,({schema:e})=>j("md",e),({schema:e})=>A("md",e),({schema:e})=>D("md",e),({schema:e})=>D("md",e),({schema:e})=>B("md",e),({schema:e})=>A("md",e),S.breakpoints.wide,({schema:e})=>j("lg",e),({schema:e})=>A("lg",e),({schema:e})=>D("lg",e),({schema:e})=>D("lg",e),({schema:e})=>B("lg",e),({schema:e})=>A("lg",e),S.breakpoints.huge,({schema:e})=>j("xlg",e),({schema:e})=>A("xlg",e),({schema:e})=>D("xlg",e),({schema:e})=>D("xlg",e),({schema:e})=>B("xlg",e),({schema:e})=>A("xlg",e)),T=x.a.p.withConfig({displayName:"shared-styles__Label",componentId:"sc-1kek94e-2"})(["margin:0 0 4px 0;color:",";font-size:12px;line-height:16px;letter-spacing:1px;font-family:",";text-transform:uppercase;"],S.colours.functional.secondary,S.fonts.supporting),q=(e,t)=>m(e,t)?"sm"===e||"md"===e?"90%":"80%":"100%",M=(e,t)=>m(e,t)?"center":"left",W=x.a.p.withConfig({displayName:"styles__Strapline",componentId:"p3h2iu-0"})(["width:",";margin:4px auto 0 auto;color:",";font-size:14px;line-height:20px;text-align:",";font-family:",";@media (min-width:","px){width:",";text-align:",";}@media (min-width:","px){width:",";text-align:",";}@media (min-width:","px){width:",";text-align:",";}"],({schema:e})=>q("sm",e),S.colours.functional.secondary,({schema:e})=>M("sm",e),S.fonts.body,S.breakpoints.medium,({schema:e})=>q("md",e),({schema:e})=>M("md",e),S.breakpoints.wide,({schema:e})=>q("lg",e),({schema:e})=>M("lg",e),S.breakpoints.huge,({schema:e})=>q("xlg",e),({schema:e})=>M("xlg",e)),Y=x.a.p.withConfig({displayName:"styles__TimeSince",componentId:"p3h2iu-1"})(["margin:8px 0 0 0;color:",";font-size:12px;line-height:16px;letter-spacing:1px;font-family:",";text-transform:uppercase;"],S.colours.functional.secondary,S.fonts.supporting),U=x.a.div.withConfig({displayName:"styles__Link",componentId:"p3h2iu-2"})(["margin-top:8px;a{color:#006699;font-size:13px;line-height:13px;letter-spacing:0px;font-family:",";font-weight:500;text-decoration:none;&:after{display:inline-block;content:'\\E003';font-size:10px;font-family:iconfont;padding:0 0 1px 6px;vertical-align:middle;}}"],S.fonts.supporting),V=({article:e,displaySchema:t,clickHandler:i})=>{if(!e)return null;const a=e.standfirst||e.summary,o=(e=>{const t=Object(p.parseISO)(l()(e,"datePublished","")),i=Object(p.parseISO)(l()(e,"dateUpdated","")),a=Object(p.max)([t,i].filter(e=>Object(p.isValid)(e))),n=Object(p.differenceInCalendarDays)(new Date,a);return!Object(p.isValid)(a)||n>=7?null:Object(p.formatDistanceToNowStrict)(a,{roundingMethod:"floor"})+" ago"})(e);return n.a.createElement($,{schema:t},n.a.createElement(P,{schema:t},n.a.createElement(z,{article:e,displaySchema:t,clickHandler:i})),n.a.createElement(P,{schema:t},e.label&&n.a.createElement(T,null,e.label),n.a.createElement(R,{article:e,displaySchema:t,clickHandler:i}),a&&n.a.createElement(W,{schema:t},a),o&&n.a.createElement(Y,null,o),e.cta&&n.a.createElement(U,null,n.a.createElement("a",{href:e.url},e.cta))))},G=x.a.div.withConfig({displayName:"shared-styles__SliceContainer",componentId:"ismxwo-0"})(["display:flex;flex-wrap:wrap;justify-content:space-between;margin:0 auto;padding:",";@media (min-width:","px){max-width:520px;}@media (min-width:","px){max-width:860px;padding:",";}@media (min-width:","px){max-width:1024px;}@media (min-width:","px){max-width:1180px;}"],({styles:e})=>e&&e.removePadding?0:"0 16px",S.breakpoints.small,S.breakpoints.medium,({styles:e})=>e&&e.removePadding?0:"0 20px",S.breakpoints.wide,S.breakpoints.huge),J=x.a.div.withConfig({displayName:"shared-styles__SlotContainer",componentId:"ismxwo-1"})(["position:relative;width:100%;margin-bottom:",";padding-bottom:",";box-sizing:content-box;:before{content:'';display:none;position:absolute;top:0;right:0;bottom:0;width:1px;background-color:",";}:after{content:'';display:",";position:absolute;right:0;bottom:0;left:0;height:1px;background-color:",";}"],({collapse:e})=>e?0:"12px",({collapse:e})=>e?0:"12px",({styles:e})=>e&&e.lineColor?e.lineColor:"#dbdbdb",({collapse:e})=>e?"none":"block",({styles:e})=>e&&e.lineColor?e.lineColor:"#dbdbdb"),K=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"sc-614vlg-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],S.breakpoints.medium),Q=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"sc-614vlg-1"})(["@media (min-width:","px){margin-bottom:24px;padding-right:0;padding-bottom:24px;}"],S.breakpoints.medium);var X=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(K,{styles:t},n.a.createElement(Q,{styles:t},n.a.createElement(V,{article:l()(e,"children[0].article"),displaySchema:d({sm:{imageRatio:"3:2",isCentered:!0,headlineFontSize:28,backgroundColor:"#f0f0f0"},md:{isSideBySide:!0},lg:{headlineFontSize:32},xlg:{headlineFontSize:36}}),clickHandler:i}))));const Z=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"sc-1r0nv22-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],S.breakpoints.medium),ee=x()(J).withConfig({displayName:"styles__SlotContainerLead",componentId:"sc-1r0nv22-1"})(["@media (min-width:","px){margin-bottom:24px;padding-right:12px;padding-bottom:24px;:before{display:block;bottom:24px;}}"],S.breakpoints.medium),te=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"sc-1r0nv22-2"})(["@media (min-width:","px){flex-shrink:0;width:",";margin-bottom:24px;padding-bottom:24px;padding-left:12px;}"],S.breakpoints.medium,c(33.33,3));var ie=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(Z,{styles:t},n.a.createElement(ee,{styles:t},n.a.createElement(V,{article:l()(e,"children[0].article"),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:28},md:{imageRatio:"16:9"},lg:{headlineFontSize:32},xlg:{headlineFontSize:36}}),clickHandler:i})),n.a.createElement(te,{styles:t},n.a.createElement(V,{article:l()(e,"children[1].article"),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},lg:{headlineFontSize:24},xlg:{headlineFontSize:28}}),clickHandler:i}))));const ae=e=>e&&("maincomment"===e.template||"magazinecomment"===e.template||"externalcomment"===e.template),ne=x()($).withConfig({displayName:"styles__ArticleContainer",componentId:"sc-2eizyd-0"})(["align-items:center;"]),oe=x.a.div.withConfig({displayName:"styles__ImageContainer",componentId:"sc-2eizyd-1"})(["max-width:120px;margin:0 auto;@media (min-width:","px){max-width:140px;}"],S.breakpoints.huge),le=x.a.p.withConfig({displayName:"styles__Byline",componentId:"sc-2eizyd-2"})(["margin:0 0 4px 0;color:",";font-size:22px;line-height:22px;font-family:",";@media (min-width:","px){font-size:24px;line-height:24px;}"],S.colours.functional.secondary,S.fonts.headlineRegular,S.breakpoints.huge),re=({article:e,displaySchema:t,clickHandler:i})=>e?n.a.createElement(ne,{schema:t},n.a.createElement(P,{schema:t},n.a.createElement(oe,null,n.a.createElement(z,{article:e,displaySchema:t,clickHandler:i}))),n.a.createElement(P,{schema:t},e.label&&n.a.createElement(T,null,e.label),e.byline&&n.a.createElement(le,null,e.byline),n.a.createElement(R,{article:e,displaySchema:t,clickHandler:i}))):null,de=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"fss0bs-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],S.breakpoints.medium),se=x()(J).withConfig({displayName:"styles__SlotContainerLead",componentId:"fss0bs-1"})(["@media (min-width:","px){margin-bottom:24px;padding-right:12px;padding-bottom:24px;:before{display:block;bottom:24px;}}"],S.breakpoints.medium),me=x()(J).withConfig({displayName:"styles__StackedColumn",componentId:"fss0bs-2"})(["@media (min-width:","px){flex-shrink:0;width:",";margin-bottom:24px;padding-bottom:24px;padding-left:12px;}"],S.breakpoints.medium,c(33.33,3));var ce=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(de,{styles:t},n.a.createElement(se,{styles:t},n.a.createElement(V,{article:l()(e,"children[0].article"),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:28},md:{imageRatio:"16:9"},lg:{headlineFontSize:32},xlg:{headlineFontSize:36}}),clickHandler:i})),n.a.createElement(me,{styles:t},n.a.createElement(J,{styles:t},n.a.createElement(V,{article:l()(e,"children[1].article"),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},lg:{headlineFontSize:24},xlg:{headlineFontSize:28}}),clickHandler:i})),ae(l()(e,"children[2].article"))?n.a.createElement(re,{article:e.children[2].article,displaySchema:d({sm:{isSideBySide:!0,sideBySideWidth:"35%",imageRatio:"1:1",headlineFontSize:18},md:{headlineFontSize:16},lg:{sideBySideWidth:"50%"},xlg:{headlineFontSize:18}}),clickHandler:i}):n.a.createElement(V,{article:l()(e,"children[2].article"),displaySchema:d({sm:{isSideBySide:!0,imageRatio:"3:2",headlineFontSize:18},md:{headlineFontSize:16},xlg:{headlineFontSize:18}}),clickHandler:i}))));const pe=x()(J).withConfig({displayName:"styles__StackedColumn",componentId:"rqwi1t-0"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding-right:12px;padding-bottom:24px;:before{display:block;bottom:24px;}}"],S.breakpoints.medium,c(50,2)),he=x.a.div.withConfig({displayName:"styles__SideBySideColumn",componentId:"rqwi1t-1"})(["display:flex;flex-wrap:wrap;justify-content:space-between;"]),ge=x()(J).withConfig({displayName:"styles__SlotContainerLead",componentId:"rqwi1t-2"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding-bottom:24px;padding-left:12px;}"],S.breakpoints.medium,c(50,2)),ye=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"rqwi1t-3"})(["width:",";&:first-of-type{padding-right:12px;:before{display:block;bottom:12px;}}&:last-of-type{padding-left:12px;}"],c(50,2));var fe=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(G,{styles:t},n.a.createElement(pe,{styles:t},n.a.createElement(he,null,[...Array(2)].fill(null).map((a,o)=>n.a.createElement(ye,{key:o,styles:t},n.a.createElement(V,{article:l()(e,`children[${o}].article`),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:18},md:{imageRatio:"16:9"},lg:{headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i})))),n.a.createElement(V,{article:l()(e,"children[2].article"),displaySchema:d({sm:{isSideBySide:!0,sideBySidePadding:12,imageRatio:"3:2",headlineFontSize:18},md:{imageRatio:"16:9",headlineFontSize:22},lg:{headlineFontSize:24}}),clickHandler:i})),n.a.createElement(ge,{styles:t},n.a.createElement(V,{article:l()(e,"children[3].article"),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},md:{headlineFontSize:24},xlg:{headlineFontSize:28}}),clickHandler:i}))));const ue=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"z7ncw3-0"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding-bottom:24px;&:first-of-type{padding-right:12px;:before{display:block;bottom:24px;}}&:last-of-type{padding-left:12px;}}"],S.breakpoints.medium,c(50,2));var xe=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(G,{styles:t},e.children.map((e,a)=>n.a.createElement(ue,{key:a,styles:t},n.a.createElement(V,{article:e.article,displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},md:{imageRatio:"16:9",headlineFontSize:24},xlg:{headlineFontSize:28}}),clickHandler:i})))));const be=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"xnsfmb-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],S.breakpoints.wide),we=x()(J).withConfig({displayName:"styles__SlotContainerLead",componentId:"xnsfmb-1"})(["@media (min-width:","px){width:",";&:first-of-type{padding-right:12px;:before{display:block;bottom:12px;}}&:nth-of-type(2){padding-left:12px;}}@media (min-width:","px){margin-bottom:24px;padding-bottom:24px;:before{display:block;bottom:24px !important;}&:nth-of-type(2){padding-right:12px;}}"],S.breakpoints.medium,c(50,2),S.breakpoints.wide),_e=x()(J).withConfig({displayName:"styles__StackedColumn",componentId:"xnsfmb-2"})(["margin-bottom:0;padding-bottom:0;:after{display:none;}@media (min-width:","px){display:flex;justify-content:space-between;}@media (min-width:","px){display:block;flex-shrink:0;width:",";margin-bottom:24px;padding-bottom:24px;padding-left:12px;:after{display:block;}}"],S.breakpoints.medium,S.breakpoints.wide,c(33.33,3)),Se=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"xnsfmb-3"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding-bottom:24px;&:first-of-type{padding-right:12px;:before{display:block;bottom:24px;}}&:last-of-type{padding-left:12px;}}@media (min-width:","px){width:100%;margin-bottom:12px;padding-bottom:12px;&:first-of-type{padding-right:0;:before{display:none;}}&:last-of-type{margin-bottom:0;padding:0;:after{display:none;}}}"],S.breakpoints.medium,c(50,2),S.breakpoints.wide);var ke=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(be,{styles:t},[...Array(2)].fill(null).map((a,o)=>n.a.createElement(we,{key:o,styles:t},n.a.createElement(V,{article:l()(e,`children[${o}].article`),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i}))),n.a.createElement(_e,{styles:t},[...Array(2)].fill(null).map((a,o)=>{const r=l()(e,`children[${o+2}].article`);return n.a.createElement(Se,{key:o,styles:t},ae(r)?n.a.createElement(re,{article:r,displaySchema:d({sm:{isSideBySide:!0,sideBySideWidth:"35%",imageRatio:"1:1",headlineFontSize:18},md:{sideBySideWidth:"50%",headlineFontSize:16},xlg:{headlineFontSize:18}}),clickHandler:i}):n.a.createElement(V,{article:r,displaySchema:d({sm:{isSideBySide:!0,imageRatio:"3:2",headlineFontSize:18},md:{headlineFontSize:16},xlg:{headlineFontSize:18}}),clickHandler:i}))}))));const Ee=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"sc-7y5fg-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],S.breakpoints.wide),Ce=x()(J).withConfig({displayName:"styles__SlotContainerLead",componentId:"sc-7y5fg-1"})(["@media (min-width:","px){width:",";&:first-of-type{padding-right:12px;:before{display:block;bottom:12px;}}&:nth-of-type(2){padding-left:12px;}}@media (min-width:","px){margin-bottom:24px;padding-bottom:24px;:before{display:block;bottom:24px !important;}&:nth-of-type(2){padding-right:12px;}}"],S.breakpoints.medium,c(50,2),S.breakpoints.wide),ve=x()(J).withConfig({displayName:"styles__StackedColumn",componentId:"sc-7y5fg-2"})(["margin-bottom:0;padding-bottom:0;:after{display:none;}@media (min-width:","px){display:flex;justify-content:space-between;}@media (min-width:","px){display:block;flex-shrink:0;width:",";margin-bottom:24px;padding-bottom:24px;padding-left:12px;:after{display:block;}}"],S.breakpoints.medium,S.breakpoints.wide,c(33.33,3)),ze=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"sc-7y5fg-3"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding:0 12px 24px 12px;:before{display:block;bottom:24px;}&:first-of-type{padding-left:0;}&:last-of-type{padding-right:0;:before{display:none;}}}@media (min-width:","px){width:100%;margin-bottom:12px;padding:0 0 12px 0;:before{display:none;}&:last-of-type{margin-bottom:0;padding-bottom:0;:after{display:none;}}}"],S.breakpoints.medium,c(50,2),S.breakpoints.wide);var Fe=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(Ee,{styles:t},[...Array(2)].fill(null).map((a,o)=>n.a.createElement(Ce,{key:o,styles:t},n.a.createElement(V,{article:l()(e,`children[${o}].article`),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i}))),n.a.createElement(ve,{styles:t},[...Array(3)].fill(null).map((a,o)=>n.a.createElement(ze,{key:o,styles:t},n.a.createElement(V,{article:l()(e,`children[${o+2}].article`),displaySchema:d({sm:{isImageHidden:!0,imageRatio:"3:2",headlineFontSize:18},lg:{isSideBySide:!0,isImageHidden:!1,headlineFontSize:16},xlg:{headlineFontSize:18}}),clickHandler:i}))))));const Ie=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"sc-11upv3n-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],S.breakpoints.wide),Ne=x()(J).withConfig({displayName:"styles__SlotContainerLead",componentId:"sc-11upv3n-1"})(["@media (min-width:","px){width:",";&:first-of-type{padding-right:12px;:before{display:block;bottom:12px;}}&:nth-of-type(2){padding-left:12px;}}@media (min-width:","px){margin-bottom:24px;padding-bottom:24px;:before{display:block;bottom:24px !important;}&:nth-of-type(2){padding-right:12px;}}"],S.breakpoints.medium,c(50,2),S.breakpoints.wide),He=x()(J).withConfig({displayName:"styles__StackedColumn",componentId:"sc-11upv3n-2"})(["margin-bottom:0;padding-bottom:0;:after{display:none;}@media (min-width:","px){display:flex;justify-content:space-between;}@media (min-width:","px){display:block;flex-shrink:0;width:",";margin-bottom:24px;padding-bottom:24px;padding-left:12px;:after{display:block;}}"],S.breakpoints.medium,S.breakpoints.wide,c(33.33,3)),Re=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"sc-11upv3n-3"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding:0 12px 24px 12px;:before{display:block;bottom:24px;}&:first-of-type{padding-left:0;}&:last-of-type{padding-right:0;:before{display:none;}}}@media (min-width:","px){width:100%;margin-bottom:12px;padding:0 0 12px 0;:before{display:none;}&:last-of-type{margin-bottom:0;padding-bottom:0;:after{display:none;}}}"],S.breakpoints.medium,c(50,2),S.breakpoints.wide);var Oe=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(Ie,{styles:t},[...Array(2)].fill(null).map((a,o)=>n.a.createElement(Ne,{key:o,styles:t},n.a.createElement(V,{article:l()(e,`children[${o}].article`),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i}))),n.a.createElement(He,{styles:t},[...Array(3)].fill(null).map((a,o)=>n.a.createElement(Re,{key:o,styles:t},n.a.createElement(V,{article:l()(e,`children[${o+2}].article`),displaySchema:d({sm:{isImageHidden:!0,headlineFontSize:18},lg:{headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i}))))));const je=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"bazswq-0"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding:0 12px 24px 12px;:before{display:block;bottom:24px;}:after{display:block;}&:first-of-type{padding-left:0;}&:last-of-type{padding-right:0;&:before{display:none;}}}"],S.breakpoints.medium,c(33.33,3));var Ae=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(G,{styles:t},e.children.map((e,a)=>n.a.createElement(je,{key:a,styles:t,collapse:!e.article},n.a.createElement(V,{article:e.article,displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},md:{headlineFontSize:18},lg:{headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i})))));const De=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"sc-1gqjewy-0"})(["width:",";&:nth-of-type(odd){padding-right:12px;:before{display:block;bottom:12px;}}&:nth-of-type(even){padding-left:12px;}@media (min-width:","px){width:",";margin-bottom:24px;padding:0 12px 24px 12px;:before{display:block;bottom:24px !important;}&:first-of-type{padding-left:0;}&:last-of-type{padding-right:0;&:before{display:none;}}}"],c(50,2),S.breakpoints.medium,c(25,4));var Be=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(G,{styles:t},e.children.map((e,a)=>n.a.createElement(De,{key:a,styles:t},n.a.createElement(V,{article:e.article,displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:18},lg:{headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i})))));const Le=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"c5tu9p-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],S.breakpoints.wide),$e=x()(J).withConfig({displayName:"styles__SlotContainerLarge",componentId:"c5tu9p-1"})(["order:1;@media (min-width:","px){width:",";&:first-of-type{padding-right:12px;:before{display:block;bottom:12px;}}&:nth-of-type(3){padding-left:12px;}}@media (min-width:","px){flex-shrink:0;width:",";margin-bottom:24px;padding-bottom:24px;:before{display:block;bottom:24px !important;}&:nth-of-type(3){padding-right:12px;}}"],S.breakpoints.medium,c(50,2),S.breakpoints.wide,c(33.33,3)),Pe=x()(J).withConfig({displayName:"styles__SlotContainerSmall",componentId:"c5tu9p-2"})(["order:2;@media (min-width:","px){width:",";margin-bottom:24px;padding-bottom:24px;&:nth-of-type(2){padding-right:12px;:before{display:block;bottom:24px;}}&:last-of-type{padding-left:12px;}}@media (min-width:","px){order:1;&:nth-of-type(2){padding-left:12px;:before{bottom:24px;}}}"],S.breakpoints.medium,c(50,2),S.breakpoints.wide);var Te=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(Le,{styles:t},[...Array(2)].fill(null).map((a,o)=>{const r=l()(e,`children[${2*o}].article`),s=l()(e,`children[${2*o+1}].article`);return n.a.createElement(n.a.Fragment,{key:o},n.a.createElement($e,{styles:t},n.a.createElement(V,{article:r,displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i})),n.a.createElement(Pe,{styles:t},ae(s)?n.a.createElement(re,{article:s,displaySchema:d({sm:{isSideBySide:!0,sideBySideWidth:"35%",imageRatio:"1:1",headlineFontSize:18},md:{sideBySideWidth:"50%",headlineFontSize:16},lg:{isSideBySide:!1},xlg:{headlineFontSize:18}}),clickHandler:i}):n.a.createElement(V,{article:s,displaySchema:d({sm:{isImageHidden:!0,imageRatio:"3:2",headlineFontSize:18},md:{isImageHidden:!1,isSideBySide:!0,headlineFontSize:16},lg:{isSideBySide:!1},xlg:{headlineFontSize:18}}),clickHandler:i})))})));const qe=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"sc-189xcog-0"})(["width:",";&:nth-of-type(odd){padding-right:12px;:before{display:block;bottom:12px;}}&:nth-of-type(even){padding-left:12px;}@media (min-width:","px){width:",";margin-bottom:24px;padding:0 12px 24px 12px;:before{display:block;bottom:24px !important;}&:nth-of-type(5n + 1){padding-left:0;}&:nth-of-type(5n){padding-right:0;&:before{display:none;}}}"],c(50,2),S.breakpoints.medium,c(20,5));var Me=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(G,{styles:t},e.children.map((e,a)=>n.a.createElement(qe,{key:a,styles:t},n.a.createElement(V,{article:l()(e,"article"),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:18,isCentered:!0},lg:{headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i})))));const We=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"b33h2c-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],S.breakpoints.medium),Ye=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"b33h2c-1"})(["@media (min-width:","px){margin-bottom:24px;padding-right:0;padding-bottom:24px;}"],S.breakpoints.medium);var Ue=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(We,{styles:t},n.a.createElement(Ye,{styles:t},n.a.createElement(V,{article:l()(e,"children[0].article"),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:28},md:{isSideBySide:!0},lg:{headlineFontSize:32},xlg:{headlineFontSize:36}}),clickHandler:i}))));const Ve=({slice:e,styles:t,clickHandler:i})=>{const a=(e=>{switch(e){case"LEAD_1":case"LEAD_1_COMPONENT":case"INTERACTIVE_FULL_WIDTH":return X;case"LEAD_1_AND_1":case"LEAD_1_AND_1_COMPONENT":return ie;case"LEAD_1_AND_2":case"LEAD_1_AND_2_COLUMNIST":return ce;case"LEAD_1_AND_3_REVERSED":return fe;case"LEAD_2":case"LEAD_2_COMPONENT":case"INTERACTIVE_HALF_WIDTH":return xe;case"SECONDARY_2_AND_2":return ke;case"SECONDARY_2_AND_3":return Fe;case"SECONDARY_2_AND_3_NO_PIC":return Oe;case"SECONDARY_3":return Ae;case"SECONDARY_4":return Be;case"SECONDARY_4_ODD":case"SECONDARY_4_ODD_COLUMNIST":return Te;case"SECONDARY_10":return Me;case"RELATED_ARTICLE_1":return Ue;default:return()=>null}})(e.name);return n.a.createElement(a,{slice:e,styles:t,clickHandler:i})};i.d(t,"Slice",(function(){return Ve}))}]);
+module.exports=function(e){var t={};function i(a){if(t[a])return t[a].exports;var n=t[a]={i:a,l:!1,exports:{}};return e[a].call(n.exports,n,n.exports,i),n.l=!0,n.exports}return i.m=e,i.c=t,i.d=function(e,t,a){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(a,n,function(t){return e[t]}.bind(null,n));return a},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="",i(i.s=5)}([function(e,t){e.exports=require("react")},function(e,t){e.exports=require("@times-components/ts-styleguide/rnw")},function(e,t){e.exports=require("styled-components")},function(e,t){var i=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,a=/^\w*$/,n=/^\./,o=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,l=/\\(\\)?/g,r=/^\[object .+?Constructor\]$/,d="object"==typeof global&&global&&global.Object===Object&&global,s="object"==typeof self&&self&&self.Object===Object&&self,m=d||s||Function("return this")();var c,p=Array.prototype,h=Function.prototype,g=Object.prototype,y=m["__core-js_shared__"],f=(c=/[^.]+$/.exec(y&&y.keys&&y.keys.IE_PROTO||""))?"Symbol(src)_1."+c:"",u=h.toString,x=g.hasOwnProperty,b=g.toString,w=RegExp("^"+u.call(x).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),_=m.Symbol,k=p.splice,S=j(m,"Map"),E=j(Object,"create"),C=_?_.prototype:void 0,v=C?C.toString:void 0;function z(e){var t=-1,i=e?e.length:0;for(this.clear();++t<i;){var a=e[t];this.set(a[0],a[1])}}function I(e){var t=-1,i=e?e.length:0;for(this.clear();++t<i;){var a=e[t];this.set(a[0],a[1])}}function F(e){var t=-1,i=e?e.length:0;for(this.clear();++t<i;){var a=e[t];this.set(a[0],a[1])}}function N(e,t){for(var i,a,n=e.length;n--;)if((i=e[n][0])===(a=t)||i!=i&&a!=a)return n;return-1}function H(e,t){for(var n,o=0,l=(t=function(e,t){if(L(e))return!1;var n=typeof e;if("number"==n||"symbol"==n||"boolean"==n||null==e||$(e))return!0;return a.test(e)||!i.test(e)||null!=t&&e in Object(t)}(t,e)?[t]:L(n=t)?n:D(n)).length;null!=e&&o<l;)e=e[A(t[o++])];return o&&o==l?e:void 0}function R(e){return!(!B(e)||(t=e,f&&f in t))&&(function(e){var t=B(e)?b.call(e):"";return"[object Function]"==t||"[object GeneratorFunction]"==t}(e)||function(e){var t=!1;if(null!=e&&"function"!=typeof e.toString)try{t=!!(e+"")}catch(e){}return t}(e)?w:r).test(function(e){if(null!=e){try{return u.call(e)}catch(e){}try{return e+""}catch(e){}}return""}(e));var t}function O(e,t){var i,a,n=e.__data__;return("string"==(a=typeof(i=t))||"number"==a||"symbol"==a||"boolean"==a?"__proto__"!==i:null===i)?n["string"==typeof t?"string":"hash"]:n.map}function j(e,t){var i=function(e,t){return null==e?void 0:e[t]}(e,t);return R(i)?i:void 0}z.prototype.clear=function(){this.__data__=E?E(null):{}},z.prototype.delete=function(e){return this.has(e)&&delete this.__data__[e]},z.prototype.get=function(e){var t=this.__data__;if(E){var i=t[e];return"__lodash_hash_undefined__"===i?void 0:i}return x.call(t,e)?t[e]:void 0},z.prototype.has=function(e){var t=this.__data__;return E?void 0!==t[e]:x.call(t,e)},z.prototype.set=function(e,t){return this.__data__[e]=E&&void 0===t?"__lodash_hash_undefined__":t,this},I.prototype.clear=function(){this.__data__=[]},I.prototype.delete=function(e){var t=this.__data__,i=N(t,e);return!(i<0)&&(i==t.length-1?t.pop():k.call(t,i,1),!0)},I.prototype.get=function(e){var t=this.__data__,i=N(t,e);return i<0?void 0:t[i][1]},I.prototype.has=function(e){return N(this.__data__,e)>-1},I.prototype.set=function(e,t){var i=this.__data__,a=N(i,e);return a<0?i.push([e,t]):i[a][1]=t,this},F.prototype.clear=function(){this.__data__={hash:new z,map:new(S||I),string:new z}},F.prototype.delete=function(e){return O(this,e).delete(e)},F.prototype.get=function(e){return O(this,e).get(e)},F.prototype.has=function(e){return O(this,e).has(e)},F.prototype.set=function(e,t){return O(this,e).set(e,t),this};var D=T((function(e){var t;e=null==(t=e)?"":function(e){if("string"==typeof e)return e;if($(e))return v?v.call(e):"";var t=e+"";return"0"==t&&1/e==-1/0?"-0":t}(t);var i=[];return n.test(e)&&i.push(""),e.replace(o,(function(e,t,a,n){i.push(a?n.replace(l,"$1"):t||e)})),i}));function A(e){if("string"==typeof e||$(e))return e;var t=e+"";return"0"==t&&1/e==-1/0?"-0":t}function T(e,t){if("function"!=typeof e||t&&"function"!=typeof t)throw new TypeError("Expected a function");var i=function(){var a=arguments,n=t?t.apply(this,a):a[0],o=i.cache;if(o.has(n))return o.get(n);var l=e.apply(this,a);return i.cache=o.set(n,l),l};return i.cache=new(T.Cache||F),i}T.Cache=F;var L=Array.isArray;function B(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function $(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&"[object Symbol]"==b.call(e)}e.exports=function(e,t,i){var a=null==e?void 0:H(e,t);return void 0===a?i:a}},function(e,t){e.exports=require("date-fns")},function(e,t,i){"use strict";i.r(t);var a=i(0),n=i.n(a),o=i(3),l=i.n(o);const r=["sm","md","lg","xlg"],d=e=>{if(e){let t={};return r.reduce((i,a)=>{const n={...t,...l()(e,a)};return t=n,{...i,[a]:n}},{})}},s=(e,t)=>!0===l()(l()(t,e),"isSideBySide"),m=(e,t)=>!0===l()(l()(t,e),"isCentered"),c=(e,t)=>`calc(${e}% - ${(e=>12*(2*e-2)/e)(t)}px)`;var p=i(4);const h=e=>l()(e,"images.alt",l()(e,"headline")),g=[760,660,560,480,380,320,270,230,180,120,80],y=(e,t)=>{var i;const a=(i=t,g.reduce((e,t)=>i<=t?t:e,g[0]))*window.devicePixelRatio,n=new URL(e),o=new URLSearchParams(n.search.slice(1));o.set("resize",a.toString());return`${"https://www.uat-thetimes.co.uk"===n.origin?"https://www.thetimes.co.uk":n.origin}${n.pathname}?${o.toString()}`},f=(e,t)=>e.includes("thetimes.co.uk/imageserver")?y(e,t):e;var u=i(2),x=i.n(u);const b=x.a.div.withConfig({displayName:"styles__LazyContainer",componentId:"qsbah5-0"})(["position:absolute;width:100%;height:100%;background-color:",";border-radius:",";transition:0.5s;div,img{width:100%;height:100%;border-radius:",";opacity:",";transition:opacity 0.5s;}"],({visible:e})=>e?"transparent":"#f0f0f0",({isRoundal:e})=>e?"50%":0,({isRoundal:e})=>e?"50%":0,({visible:e})=>e?1:0),w=x.a.div.withConfig({displayName:"styles__BackgroundImage",componentId:"qsbah5-1"})(["background:",";background-size:cover;"],({src:e})=>e?`url(${e}) no-repeat center center`:"none"),_=({url:e,alt:t,isRoundal:i,isBackground:o})=>{const l=n.a.createRef(),[r,d]=Object(a.useState)();return Object(a.useEffect)(()=>{if("IntersectionObserver"in window){const t=new IntersectionObserver(i=>i.forEach(i=>{if(i.isIntersecting&&(t.disconnect(),e&&l.current)){const t=l.current.offsetWidth,i=new Image;i.onload=()=>d(i.src),i.src=f(e,t)}}),{rootMargin:"60px"});return l.current&&t.observe(l.current),()=>t.disconnect()}e&&l.current&&d(f(e,l.current.offsetWidth))},[e,l]),n.a.createElement(b,{visible:!!r,isRoundal:i},o?n.a.createElement(w,{src:r,ref:l,role:"img","aria-label":t}):n.a.createElement("img",{src:r,alt:t,ref:l}))};var k=i(1);const S=(e,t)=>s(e,t)||((e,t)=>!0===l()(l()(t,e),"isImageHidden"))(e,t)?0:"12px",E=(e,t)=>t&&t.includes(e)?"block":"none",C=x.a.div.withConfig({displayName:"styles__ImageContainer",componentId:"sc-8lglkt-0"})(["margin-bottom:",";@media (min-width:","px){margin-bottom:",";}@media (min-width:","px){margin-bottom:",";}@media (min-width:","px){margin-bottom:",";}"],({schema:e})=>S("sm",e),k.breakpoints.medium,({schema:e})=>S("md",e),k.breakpoints.wide,({schema:e})=>S("lg",e),k.breakpoints.huge,({schema:e})=>S("xlg",e)),v=x.a.div.withConfig({displayName:"styles__ImageRatio",componentId:"sc-8lglkt-1"})(["position:relative;display:",";overflow:hidden;&:after{content:'';display:block;padding-bottom:",";}@media (min-width:","px){display:",";}@media (min-width:","px){display:",";}@media (min-width:","px){display:",";}"],({schema:e})=>E("sm",e),({ratio:e})=>(e=>{switch(e){case"16:9":return"56.25%";case"3:2":return"66.66%";case"1:1":return"100%";default:return 0}})(e),k.breakpoints.medium,({schema:e})=>E("md",e),k.breakpoints.wide,({schema:e})=>E("lg",e),k.breakpoints.huge,({schema:e})=>E("xlg",e)),z=({article:e,displaySchema:t,clickHandler:i})=>{const a=(e=>{if(!e)return{};let t;return Object.entries(e).reduce((e,[i,a])=>{const n=l()(a,"imageRatio",t);return t=n,n&&!l()(a,"isImageHidden")?{...e,[n]:[...l()(e,n,[]),i]}:e},{})})(t);return n.a.createElement(C,{schema:t},n.a.createElement("a",{onClick:t=>{e&&i&&i(t,e)},href:e.url},Object.entries(a).map(([t,i],a)=>{const o=((e,t)=>t.images.crops.find(t=>"*"===t.ratio||t.ratio===e))(t,e);return n.a.createElement(v,{key:a,ratio:t,schema:i},n.a.createElement(_,{url:l()(o,"url"),alt:h(e),isRoundal:"1:1"===t,isBackground:"*"===l()(o,"ratio")}))})))},I=(e,t)=>l()(l()(t,e),"headlineFontSize",10),F=(e,t)=>m(e,t)?"sm"===e||"md"===e?"90%":"80%":"100%",N=(e,t)=>m(e,t)?"center":"left",H=x.a.div.withConfig({displayName:"styles__HeadlineContainer",componentId:"k0mgwi-0"})(["width:",";margin:0 auto;@media (min-width:","px){width:",";}@media (min-width:","px){width:",";}@media (min-width:","px){width:",";}a{text-decoration:none;h3{margin:0;color:",";font-size:","px;line-height:","px;font-family:",";font-weight:normal;text-align:",";@media (min-width:","px){font-size:","px;line-height:","px;text-align:",";}@media (min-width:","px){font-size:","px;line-height:","px;text-align:",";}@media (min-width:","px){font-size:","px;line-height:","px;text-align:",";}}&:hover{h3{color:#006699;}}}"],({schema:e})=>F("sm",e),k.breakpoints.medium,({schema:e})=>F("md",e),k.breakpoints.wide,({schema:e})=>F("lg",e),k.breakpoints.huge,({schema:e})=>F("xlg",e),k.colours.functional.brandColour,({schema:e})=>I("sm",e),({schema:e})=>I("sm",e),k.fonts.headline,({schema:e})=>N("sm",e),k.breakpoints.medium,({schema:e})=>I("md",e),({schema:e})=>I("md",e),({schema:e})=>N("md",e),k.breakpoints.wide,({schema:e})=>I("lg",e),({schema:e})=>I("lg",e),({schema:e})=>N("lg",e),k.breakpoints.huge,({schema:e})=>I("xlg",e),({schema:e})=>I("xlg",e),({schema:e})=>N("xlg",e)),R=({article:e,displaySchema:t,clickHandler:i})=>{if(!e.headline)return null;return n.a.createElement(H,{schema:t},n.a.createElement("a",{onClick:t=>{e&&i&&i(t,e)},href:e.url},n.a.createElement("h3",null,e.headline)))},O=(e,t)=>s(e,t)?"row":"column",j=(e,t)=>s(e,t)?l()(l()(t,e),"sideBySideWidth","50%"):"100%",D=(e,t)=>s(e,t)?l()(l()(t,e),"sideBySidePadding",8)+"px":0,A=(e,t)=>m(e,t)?"center":"flex-start",T=(e,t)=>m(e,t)&&!s(e,t)?"16px 0 24px 0":0,L=(e,t)=>l()(l()(t,e),"backgroundColor","transparent"),B=x.a.article.withConfig({displayName:"shared-styles__ArticleContainer",componentId:"sc-1kek94e-0"})(["display:flex;flex-direction:",";background-color:",";@media (min-width:","px){flex-direction:",";background-color:",";}@media (min-width:","px){flex-direction:",";background-color:",";}@media (min-width:","px){flex-direction:",";background-color:",";}"],({schema:e})=>O("sm",e),({schema:e})=>L("sm",e),k.breakpoints.medium,({schema:e})=>O("md",e),({schema:e})=>L("md",e),k.breakpoints.wide,({schema:e})=>O("lg",e),({schema:e})=>L("lg",e),k.breakpoints.huge,({schema:e})=>O("xlg",e),({schema:e})=>L("xlg",e)),$=x.a.div.withConfig({displayName:"shared-styles__SideBySideColumn",componentId:"sc-1kek94e-1"})(["width:100%;&:first-of-type{flex-shrink:0;width:",";padding-right:",";}&:last-of-type{display:flex;flex-direction:column;justify-content:",";align-items:",";margin:",";padding-left:",";}@media (min-width:","px){&:first-of-type{width:",";padding-right:",";}&:last-of-type{justify-content:",";align-items:",";margin:",";padding-left:",";}}@media (min-width:","px){&:first-of-type{width:",";padding-right:",";}&:last-of-type{justify-content:",";align-items:",";margin:",";padding-left:",";}}@media (min-width:","px){&:first-of-type{width:",";padding-right:",";}&:last-of-type{justify-content:",";align-items:",";margin:",";padding-left:",";}}"],({schema:e})=>j("sm",e),({schema:e})=>D("sm",e),({schema:e})=>A("sm",e),({schema:e})=>A("sm",e),({schema:e})=>T("sm",e),({schema:e})=>D("sm",e),k.breakpoints.medium,({schema:e})=>j("md",e),({schema:e})=>D("md",e),({schema:e})=>A("md",e),({schema:e})=>A("md",e),({schema:e})=>T("md",e),({schema:e})=>D("md",e),k.breakpoints.wide,({schema:e})=>j("lg",e),({schema:e})=>D("lg",e),({schema:e})=>A("lg",e),({schema:e})=>A("lg",e),({schema:e})=>T("lg",e),({schema:e})=>D("lg",e),k.breakpoints.huge,({schema:e})=>j("xlg",e),({schema:e})=>D("xlg",e),({schema:e})=>A("xlg",e),({schema:e})=>A("xlg",e),({schema:e})=>T("xlg",e),({schema:e})=>D("xlg",e)),P=x.a.p.withConfig({displayName:"shared-styles__Label",componentId:"sc-1kek94e-2"})(["margin:0 0 4px 0;color:",";font-size:12px;line-height:16px;letter-spacing:1px;font-family:",";text-transform:uppercase;"],k.colours.functional.secondary,k.fonts.supporting),M=(e,t)=>m(e,t)?"sm"===e||"md"===e?"90%":"80%":"100%",U=(e,t)=>m(e,t)?"center":"left",q=x.a.p.withConfig({displayName:"styles__Strapline",componentId:"p3h2iu-0"})(["width:",";margin:4px auto 0 auto;color:",";font-size:14px;line-height:20px;text-align:",";font-family:",";@media (min-width:","px){width:",";text-align:",";}@media (min-width:","px){width:",";text-align:",";}@media (min-width:","px){width:",";text-align:",";}"],({schema:e})=>M("sm",e),k.colours.functional.secondary,({schema:e})=>U("sm",e),k.fonts.body,k.breakpoints.medium,({schema:e})=>M("md",e),({schema:e})=>U("md",e),k.breakpoints.wide,({schema:e})=>M("lg",e),({schema:e})=>U("lg",e),k.breakpoints.huge,({schema:e})=>M("xlg",e),({schema:e})=>U("xlg",e)),W=x.a.p.withConfig({displayName:"styles__TimeSince",componentId:"p3h2iu-1"})(["margin:8px 0 0 0;color:",";font-size:12px;line-height:16px;letter-spacing:1px;font-family:",";text-transform:uppercase;"],k.colours.functional.secondary,k.fonts.supporting),Y=x.a.div.withConfig({displayName:"styles__Link",componentId:"p3h2iu-2"})(["margin-top:8px;a{color:#006699;font-size:13px;line-height:13px;letter-spacing:0px;font-family:",";font-weight:500;text-decoration:none;&:after{display:inline-block;content:'\\E003';font-size:10px;font-family:iconfont;padding:0 0 1px 6px;vertical-align:middle;}}"],k.fonts.supporting),V=({article:e,displaySchema:t,clickHandler:i})=>{if(!e)return null;const a=e.standfirst||e.summary,o=(e=>{const t=Object(p.parseISO)(l()(e,"datePublished","")),i=Object(p.parseISO)(l()(e,"dateUpdated","")),a=Object(p.max)([t,i].filter(e=>Object(p.isValid)(e))),n=Object(p.differenceInCalendarDays)(new Date,a);return!Object(p.isValid)(a)||n>=7?null:Object(p.formatDistanceToNowStrict)(a,{roundingMethod:"floor"})+" ago"})(e);return n.a.createElement(B,{schema:t},n.a.createElement($,{schema:t},n.a.createElement(z,{article:e,displaySchema:t,clickHandler:i})),n.a.createElement($,{schema:t},e.label&&n.a.createElement(P,null,e.label),n.a.createElement(R,{article:e,displaySchema:t,clickHandler:i}),a&&n.a.createElement(q,{schema:t},a),o&&n.a.createElement(W,null,o),e.cta&&n.a.createElement(Y,null,n.a.createElement("a",{href:e.url},e.cta))))},G=x.a.div.withConfig({displayName:"shared-styles__SliceContainer",componentId:"ismxwo-0"})(["display:flex;flex-wrap:wrap;justify-content:space-between;margin:0 auto;padding:",";@media (min-width:","px){max-width:520px;}@media (min-width:","px){max-width:860px;padding:",";}@media (min-width:","px){max-width:1024px;}@media (min-width:","px){max-width:1180px;}"],({styles:e})=>e&&e.removePadding?0:"0 16px",k.breakpoints.small,k.breakpoints.medium,({styles:e})=>e&&e.removePadding?0:"0 20px",k.breakpoints.wide,k.breakpoints.huge),J=x.a.div.withConfig({displayName:"shared-styles__SlotContainer",componentId:"ismxwo-1"})(["position:relative;width:100%;margin-bottom:",";padding-bottom:",";box-sizing:content-box;:before{content:'';display:none;position:absolute;top:0;right:0;bottom:0;width:1px;background-color:",";}:after{content:'';display:",";position:absolute;right:0;bottom:0;left:0;height:1px;background-color:",";}"],({collapse:e})=>e?0:"12px",({collapse:e})=>e?0:"12px",({styles:e})=>e&&e.lineColor?e.lineColor:"#dbdbdb",({collapse:e})=>e?"none":"block",({styles:e})=>e&&e.lineColor?e.lineColor:"#dbdbdb"),K=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"sc-614vlg-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],k.breakpoints.medium),Q=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"sc-614vlg-1"})(["@media (min-width:","px){margin-bottom:24px;padding-right:0;padding-bottom:24px;}"],k.breakpoints.medium);var X=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(K,{styles:t},n.a.createElement(Q,{styles:t},n.a.createElement(V,{article:l()(e,"children[0].article"),displaySchema:d({sm:{imageRatio:"3:2",isCentered:!0,headlineFontSize:28,backgroundColor:"#f0f0f0"},md:{isSideBySide:!0},lg:{headlineFontSize:32},xlg:{headlineFontSize:36}}),clickHandler:i}))));const Z=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"sc-1r0nv22-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],k.breakpoints.medium),ee=x()(J).withConfig({displayName:"styles__SlotContainerLead",componentId:"sc-1r0nv22-1"})(["@media (min-width:","px){margin-bottom:24px;padding-right:12px;padding-bottom:24px;:before{display:block;bottom:24px;}}"],k.breakpoints.medium),te=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"sc-1r0nv22-2"})(["@media (min-width:","px){flex-shrink:0;width:",";margin-bottom:24px;padding-bottom:24px;padding-left:12px;}"],k.breakpoints.medium,c(33.33,3));var ie=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(Z,{styles:t},n.a.createElement(ee,{styles:t},n.a.createElement(V,{article:l()(e,"children[0].article"),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:28},md:{imageRatio:"16:9"},lg:{headlineFontSize:32},xlg:{headlineFontSize:36}}),clickHandler:i})),n.a.createElement(te,{styles:t},n.a.createElement(V,{article:l()(e,"children[1].article"),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},lg:{headlineFontSize:24},xlg:{headlineFontSize:28}}),clickHandler:i}))));const ae=e=>e&&("maincomment"===e.template||"magazinecomment"===e.template||"externalcomment"===e.template),ne=x()(B).withConfig({displayName:"styles__ArticleContainer",componentId:"sc-2eizyd-0"})(["align-items:center;"]),oe=x.a.div.withConfig({displayName:"styles__ImageContainer",componentId:"sc-2eizyd-1"})(["max-width:120px;margin:0 auto;@media (min-width:","px){max-width:140px;}"],k.breakpoints.huge),le=x.a.p.withConfig({displayName:"styles__Byline",componentId:"sc-2eizyd-2"})(["margin:0 0 4px 0;color:",";font-size:22px;line-height:22px;font-family:",";@media (min-width:","px){font-size:24px;line-height:24px;}"],k.colours.functional.secondary,k.fonts.headlineRegular,k.breakpoints.huge),re=({article:e,displaySchema:t,clickHandler:i})=>e?n.a.createElement(ne,{schema:t},n.a.createElement($,{schema:t},n.a.createElement(oe,null,n.a.createElement(z,{article:e,displaySchema:t,clickHandler:i}))),n.a.createElement($,{schema:t},e.label&&n.a.createElement(P,null,e.label),e.byline&&n.a.createElement(le,null,e.byline),n.a.createElement(R,{article:e,displaySchema:t,clickHandler:i}))):null,de=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"fss0bs-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],k.breakpoints.medium),se=x()(J).withConfig({displayName:"styles__SlotContainerLead",componentId:"fss0bs-1"})(["@media (min-width:","px){margin-bottom:24px;padding-right:12px;padding-bottom:24px;:before{display:block;bottom:24px;}}"],k.breakpoints.medium),me=x()(J).withConfig({displayName:"styles__StackedColumn",componentId:"fss0bs-2"})(["@media (min-width:","px){flex-shrink:0;width:",";margin-bottom:24px;padding-bottom:24px;padding-left:12px;}"],k.breakpoints.medium,c(33.33,3));var ce=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(de,{styles:t},n.a.createElement(se,{styles:t},n.a.createElement(V,{article:l()(e,"children[0].article"),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:28},md:{imageRatio:"16:9"},lg:{headlineFontSize:32},xlg:{headlineFontSize:36}}),clickHandler:i})),n.a.createElement(me,{styles:t},n.a.createElement(J,{styles:t},n.a.createElement(V,{article:l()(e,"children[1].article"),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},lg:{headlineFontSize:24},xlg:{headlineFontSize:28}}),clickHandler:i})),ae(l()(e,"children[2].article"))?n.a.createElement(re,{article:e.children[2].article,displaySchema:d({sm:{isSideBySide:!0,sideBySideWidth:"35%",imageRatio:"1:1",headlineFontSize:18},md:{headlineFontSize:16},lg:{sideBySideWidth:"50%"},xlg:{headlineFontSize:18}}),clickHandler:i}):n.a.createElement(V,{article:l()(e,"children[2].article"),displaySchema:d({sm:{isSideBySide:!0,imageRatio:"3:2",headlineFontSize:18},md:{headlineFontSize:16},xlg:{headlineFontSize:18}}),clickHandler:i}))));const pe=x()(J).withConfig({displayName:"styles__StackedColumn",componentId:"rqwi1t-0"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding-right:12px;padding-bottom:24px;:before{display:block;bottom:24px;}}"],k.breakpoints.medium,c(50,2)),he=x.a.div.withConfig({displayName:"styles__SideBySideColumn",componentId:"rqwi1t-1"})(["display:flex;flex-wrap:wrap;justify-content:space-between;"]),ge=x()(J).withConfig({displayName:"styles__SlotContainerLead",componentId:"rqwi1t-2"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding-bottom:24px;padding-left:12px;}"],k.breakpoints.medium,c(50,2)),ye=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"rqwi1t-3"})(["width:",";&:first-of-type{padding-right:12px;:before{display:block;bottom:12px;}}&:last-of-type{padding-left:12px;}"],c(50,2));var fe=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(G,{styles:t},n.a.createElement(pe,{styles:t},n.a.createElement(he,null,[...Array(2)].fill(null).map((a,o)=>n.a.createElement(ye,{key:o,styles:t},n.a.createElement(V,{article:l()(e,`children[${o}].article`),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:18},md:{imageRatio:"16:9"},lg:{headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i})))),n.a.createElement(V,{article:l()(e,"children[2].article"),displaySchema:d({sm:{isSideBySide:!0,sideBySidePadding:12,imageRatio:"3:2",headlineFontSize:18},md:{imageRatio:"16:9",headlineFontSize:22},lg:{headlineFontSize:24}}),clickHandler:i})),n.a.createElement(ge,{styles:t},n.a.createElement(V,{article:l()(e,"children[3].article"),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},md:{headlineFontSize:24},xlg:{headlineFontSize:28}}),clickHandler:i}))));const ue=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"z7ncw3-0"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding-bottom:24px;&:first-of-type{padding-right:12px;:before{display:block;bottom:24px;}}&:last-of-type{padding-left:12px;}}"],k.breakpoints.medium,c(50,2));var xe=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(G,{styles:t},e.children.map((e,a)=>n.a.createElement(ue,{key:a,styles:t},n.a.createElement(V,{article:e.article,displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},md:{imageRatio:"16:9",headlineFontSize:24},xlg:{headlineFontSize:28}}),clickHandler:i})))));const be=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"xnsfmb-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],k.breakpoints.wide),we=x()(J).withConfig({displayName:"styles__SlotContainerLead",componentId:"xnsfmb-1"})(["@media (min-width:","px){width:",";&:first-of-type{padding-right:12px;:before{display:block;bottom:12px;}}&:nth-of-type(2){padding-left:12px;}}@media (min-width:","px){margin-bottom:24px;padding-bottom:24px;:before{display:block;bottom:24px !important;}&:nth-of-type(2){padding-right:12px;}}"],k.breakpoints.medium,c(50,2),k.breakpoints.wide),_e=x()(J).withConfig({displayName:"styles__StackedColumn",componentId:"xnsfmb-2"})(["margin-bottom:0;padding-bottom:0;:after{display:none;}@media (min-width:","px){display:flex;justify-content:space-between;}@media (min-width:","px){display:block;flex-shrink:0;width:",";margin-bottom:24px;padding-bottom:24px;padding-left:12px;:after{display:block;}}"],k.breakpoints.medium,k.breakpoints.wide,c(33.33,3)),ke=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"xnsfmb-3"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding-bottom:24px;&:first-of-type{padding-right:12px;:before{display:block;bottom:24px;}}&:last-of-type{padding-left:12px;}}@media (min-width:","px){width:100%;margin-bottom:12px;padding-bottom:12px;&:first-of-type{padding-right:0;:before{display:none;}}&:last-of-type{margin-bottom:0;padding:0;:after{display:none;}}}"],k.breakpoints.medium,c(50,2),k.breakpoints.wide);var Se=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(be,{styles:t},[...Array(2)].fill(null).map((a,o)=>n.a.createElement(we,{key:o,styles:t},n.a.createElement(V,{article:l()(e,`children[${o}].article`),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i}))),n.a.createElement(_e,{styles:t},[...Array(2)].fill(null).map((a,o)=>{const r=l()(e,`children[${o+2}].article`);return n.a.createElement(ke,{key:o,styles:t},ae(r)?n.a.createElement(re,{article:r,displaySchema:d({sm:{isSideBySide:!0,sideBySideWidth:"35%",imageRatio:"1:1",headlineFontSize:18},md:{sideBySideWidth:"50%",headlineFontSize:16},xlg:{headlineFontSize:18}}),clickHandler:i}):n.a.createElement(V,{article:r,displaySchema:d({sm:{isSideBySide:!0,imageRatio:"3:2",headlineFontSize:18},md:{headlineFontSize:16},xlg:{headlineFontSize:18}}),clickHandler:i}))}))));const Ee=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"sc-7y5fg-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],k.breakpoints.wide),Ce=x()(J).withConfig({displayName:"styles__SlotContainerLead",componentId:"sc-7y5fg-1"})(["@media (min-width:","px){width:",";&:first-of-type{padding-right:12px;:before{display:block;bottom:12px;}}&:nth-of-type(2){padding-left:12px;}}@media (min-width:","px){margin-bottom:24px;padding-bottom:24px;:before{display:block;bottom:24px !important;}&:nth-of-type(2){padding-right:12px;}}"],k.breakpoints.medium,c(50,2),k.breakpoints.wide),ve=x()(J).withConfig({displayName:"styles__StackedColumn",componentId:"sc-7y5fg-2"})(["margin-bottom:0;padding-bottom:0;:after{display:none;}@media (min-width:","px){display:flex;justify-content:space-between;}@media (min-width:","px){display:block;flex-shrink:0;width:",";margin-bottom:24px;padding-bottom:24px;padding-left:12px;:after{display:block;}}"],k.breakpoints.medium,k.breakpoints.wide,c(33.33,3)),ze=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"sc-7y5fg-3"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding:0 12px 24px 12px;:before{display:block;bottom:24px;}&:first-of-type{padding-left:0;}&:last-of-type{padding-right:0;:before{display:none;}}}@media (min-width:","px){width:100%;margin-bottom:12px;padding:0 0 12px 0;:before{display:none;}&:last-of-type{margin-bottom:0;padding-bottom:0;:after{display:none;}}}"],k.breakpoints.medium,c(50,2),k.breakpoints.wide);var Ie=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(Ee,{styles:t},[...Array(2)].fill(null).map((a,o)=>n.a.createElement(Ce,{key:o,styles:t},n.a.createElement(V,{article:l()(e,`children[${o}].article`),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i}))),n.a.createElement(ve,{styles:t},[...Array(3)].fill(null).map((a,o)=>n.a.createElement(ze,{key:o,styles:t},n.a.createElement(V,{article:l()(e,`children[${o+2}].article`),displaySchema:d({sm:{isImageHidden:!0,imageRatio:"3:2",headlineFontSize:18},lg:{isSideBySide:!0,isImageHidden:!1,headlineFontSize:16},xlg:{headlineFontSize:18}}),clickHandler:i}))))));const Fe=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"sc-11upv3n-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],k.breakpoints.wide),Ne=x()(J).withConfig({displayName:"styles__SlotContainerLead",componentId:"sc-11upv3n-1"})(["@media (min-width:","px){width:",";&:first-of-type{padding-right:12px;:before{display:block;bottom:12px;}}&:nth-of-type(2){padding-left:12px;}}@media (min-width:","px){margin-bottom:24px;padding-bottom:24px;:before{display:block;bottom:24px !important;}&:nth-of-type(2){padding-right:12px;}}"],k.breakpoints.medium,c(50,2),k.breakpoints.wide),He=x()(J).withConfig({displayName:"styles__StackedColumn",componentId:"sc-11upv3n-2"})(["margin-bottom:0;padding-bottom:0;:after{display:none;}@media (min-width:","px){display:flex;justify-content:space-between;}@media (min-width:","px){display:block;flex-shrink:0;width:",";margin-bottom:24px;padding-bottom:24px;padding-left:12px;:after{display:block;}}"],k.breakpoints.medium,k.breakpoints.wide,c(33.33,3)),Re=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"sc-11upv3n-3"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding:0 12px 24px 12px;:before{display:block;bottom:24px;}&:first-of-type{padding-left:0;}&:last-of-type{padding-right:0;:before{display:none;}}}@media (min-width:","px){width:100%;margin-bottom:12px;padding:0 0 12px 0;:before{display:none;}&:last-of-type{margin-bottom:0;padding-bottom:0;:after{display:none;}}}"],k.breakpoints.medium,c(50,2),k.breakpoints.wide);var Oe=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(Fe,{styles:t},[...Array(2)].fill(null).map((a,o)=>n.a.createElement(Ne,{key:o,styles:t},n.a.createElement(V,{article:l()(e,`children[${o}].article`),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i}))),n.a.createElement(He,{styles:t},[...Array(3)].fill(null).map((a,o)=>n.a.createElement(Re,{key:o,styles:t},n.a.createElement(V,{article:l()(e,`children[${o+2}].article`),displaySchema:d({sm:{isImageHidden:!0,headlineFontSize:18},lg:{headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i}))))));const je=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"bazswq-0"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding:0 12px 24px 12px;:before{display:block;bottom:24px;}:after{display:block;}&:first-of-type{padding-left:0;}&:last-of-type{padding-right:0;&:before{display:none;}}}"],k.breakpoints.medium,c(33.33,3));var De=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(G,{styles:t},e.children.map((e,a)=>n.a.createElement(je,{key:a,styles:t,collapse:!e.article},n.a.createElement(V,{article:e.article,displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},md:{headlineFontSize:18},lg:{headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i})))));const Ae=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"sc-1gqjewy-0"})(["width:",";&:nth-of-type(odd){padding-right:12px;:before{display:block;bottom:12px;}}&:nth-of-type(even){padding-left:12px;}@media (min-width:","px){width:",";margin-bottom:24px;padding:0 12px 24px 12px;:before{display:block;bottom:24px !important;}&:first-of-type{padding-left:0;}&:last-of-type{padding-right:0;&:before{display:none;}}}"],c(50,2),k.breakpoints.medium,c(25,4));var Te=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(G,{styles:t},e.children.map((e,a)=>n.a.createElement(Ae,{key:a,styles:t},n.a.createElement(V,{article:e.article,displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:18},lg:{headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i})))));const Le=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"c5tu9p-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],k.breakpoints.wide),Be=x()(J).withConfig({displayName:"styles__SlotContainerLarge",componentId:"c5tu9p-1"})(["order:1;@media (min-width:","px){width:",";&:first-of-type{padding-right:12px;:before{display:block;bottom:12px;}}&:nth-of-type(3){padding-left:12px;}}@media (min-width:","px){flex-shrink:0;width:",";margin-bottom:24px;padding-bottom:24px;:before{display:block;bottom:24px !important;}&:nth-of-type(3){padding-right:12px;}}"],k.breakpoints.medium,c(50,2),k.breakpoints.wide,c(33.33,3)),$e=x()(J).withConfig({displayName:"styles__SlotContainerSmall",componentId:"c5tu9p-2"})(["order:2;@media (min-width:","px){width:",";margin-bottom:24px;padding-bottom:24px;&:nth-of-type(2){padding-right:12px;:before{display:block;bottom:24px;}}&:last-of-type{padding-left:12px;}}@media (min-width:","px){order:1;&:nth-of-type(2){padding-left:12px;:before{bottom:24px;}}}"],k.breakpoints.medium,c(50,2),k.breakpoints.wide);var Pe=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(Le,{styles:t},[...Array(2)].fill(null).map((a,o)=>{const r=l()(e,`children[${2*o}].article`),s=l()(e,`children[${2*o+1}].article`);return n.a.createElement(n.a.Fragment,{key:o},n.a.createElement(Be,{styles:t},n.a.createElement(V,{article:r,displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i})),n.a.createElement($e,{styles:t},ae(s)?n.a.createElement(re,{article:s,displaySchema:d({sm:{isSideBySide:!0,sideBySideWidth:"35%",imageRatio:"1:1",headlineFontSize:18},md:{sideBySideWidth:"50%",headlineFontSize:16},lg:{isSideBySide:!1},xlg:{headlineFontSize:18}}),clickHandler:i}):n.a.createElement(V,{article:s,displaySchema:d({sm:{isImageHidden:!0,imageRatio:"3:2",headlineFontSize:18},md:{isImageHidden:!1,isSideBySide:!0,headlineFontSize:16},lg:{isSideBySide:!1},xlg:{headlineFontSize:18}}),clickHandler:i})))})));const Me=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"sc-189xcog-0"})(["width:",";&:nth-of-type(odd){padding-right:12px;:before{display:block;bottom:12px;}}&:nth-of-type(even){padding-left:12px;}@media (min-width:","px){width:",";margin-bottom:24px;padding:0 12px 24px 12px;:before{display:block;bottom:24px !important;}&:nth-of-type(5n + 1){padding-left:0;}&:nth-of-type(5n){padding-right:0;&:before{display:none;}}}"],c(50,2),k.breakpoints.medium,c(20,5));var Ue=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(G,{styles:t},e.children.map((e,a)=>n.a.createElement(Me,{key:a,styles:t},n.a.createElement(V,{article:l()(e,"article"),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:18,isCentered:!0},lg:{headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i})))));const qe=(e,t)=>{const i=new Date(Date.UTC(t,e+1,0)),a=i.getDay(),n=i.getDate()-a,o=new Date(Date.UTC(t,e,n));return o.setHours(1),o},We=e=>{if(e){const t=(e=>{const t=new Date(e);return new Date(t.getUTCFullYear(),t.getUTCMonth(),t.getUTCDate(),t.getUTCHours(),t.getUTCMinutes())})(e),i=Object(p.addMinutes)(t,(e=>{const t=qe(2,e.getFullYear()),i=qe(9,e.getFullYear()),a=e.getTime()>=t.getTime(),n=e.getTime()<i.getTime();return a&&n})(t)?60:0);return Object(p.format)(i,"MMMM dd yyyy, h.mmaaa")}return null},Ye=x.a.p.withConfig({displayName:"styles__DateTime",componentId:"sc-1p1alcs-0"})(["margin:8px 0 0 0;color:",";font-size:13px;line-height:16px;font-family:",";"],k.colours.functional.secondary,k.fonts.supporting),Ve=x.a.p.withConfig({displayName:"styles__Byline",componentId:"sc-1p1alcs-1"})(["margin:8px 0 0 0;color:",";font-size:13px;line-height:16px;font-family:",";"],k.colours.functional.brandColour,k.fonts.supporting),Ge=({article:e,displaySchema:t,clickHandler:i})=>{if(!e)return null;const a=We(e.datePublished);return n.a.createElement(B,{schema:t},n.a.createElement($,{schema:t},n.a.createElement(z,{article:e,displaySchema:t,clickHandler:i})),n.a.createElement($,{schema:t},e.label&&n.a.createElement(P,null,e.label),n.a.createElement(R,{article:e,displaySchema:t,clickHandler:i}),a&&n.a.createElement(Ye,null,a),e.byline&&n.a.createElement(Ve,null,e.byline)))},Je=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"b33h2c-0"})(["@media (min-width:","px){flex-wrap:nowrap;width:80.8%;max-width:none;padding:0;}@media (min-width:","px){width:56.2%;}"],k.breakpoints.medium,k.breakpoints.wide),Ke=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"b33h2c-1"})(["@media (min-width:","px){margin-bottom:24px;padding-right:0;padding-bottom:24px;}"],k.breakpoints.medium);var Qe=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(Je,{styles:t},n.a.createElement(Ke,{styles:t},n.a.createElement(Ge,{article:l()(e,"children[0].article"),displaySchema:d({sm:{imageRatio:"16:9",headlineFontSize:22},md:{isSideBySide:!0}}),clickHandler:i}))));const Xe=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"v1jynn-0"})(["@media (min-width:","px){width:80.8%;max-width:none;padding:0;}@media (min-width:","px){width:56.2%;}"],k.breakpoints.medium,k.breakpoints.wide),Ze=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"v1jynn-1"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding-bottom:24px;&:first-of-type{padding-right:12px;:before{display:block;bottom:24px;}}&:last-of-type{padding-left:12px;}}"],k.breakpoints.medium,c(50,2));var et=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(Xe,{styles:t},e.children.map((e,a)=>n.a.createElement(Ze,{key:a,styles:t},n.a.createElement(Ge,{article:e.article,displaySchema:d({sm:{isImageHidden:!0,imageRatio:"16:9",headlineFontSize:22},md:{isImageHidden:!1}}),clickHandler:i})))));const tt=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"yjxerl-0"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding:0 12px 24px 12px;:before{display:block;bottom:24px;}:after{display:block;}&:first-of-type{padding-left:0;}&:last-of-type{padding-right:0;&:before{display:none;}}}"],k.breakpoints.medium,c(33.33,3));var it=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(G,{styles:t},e.children.map((e,a)=>n.a.createElement(tt,{key:a,styles:t},n.a.createElement(Ge,{article:e.article,displaySchema:d({sm:{isImageHidden:!0,imageRatio:"16:9",headlineFontSize:22},md:{isImageHidden:!1}}),clickHandler:i})))));const at=({slice:e,styles:t,clickHandler:i})=>{const a=(e=>{switch(e){case"LEAD_1":case"LEAD_1_COMPONENT":case"INTERACTIVE_FULL_WIDTH":return X;case"LEAD_1_AND_1":case"LEAD_1_AND_1_COMPONENT":return ie;case"LEAD_1_AND_2":case"LEAD_1_AND_2_COLUMNIST":return ce;case"LEAD_1_AND_3_REVERSED":return fe;case"LEAD_2":case"LEAD_2_COMPONENT":case"INTERACTIVE_HALF_WIDTH":return xe;case"SECONDARY_2_AND_2":return Se;case"SECONDARY_2_AND_3":return Ie;case"SECONDARY_2_AND_3_NO_PIC":return Oe;case"SECONDARY_3":return De;case"SECONDARY_4":return Te;case"SECONDARY_4_ODD":case"SECONDARY_4_ODD_COLUMNIST":return Pe;case"SECONDARY_10":return Ue;case"RELATED_ARTICLE_1":return Qe;case"RELATED_ARTICLE_2":return et;case"RELATED_ARTICLE_3":return it;default:return()=>null}})(e.name);return n.a.createElement(a,{slice:e,styles:t,clickHandler:i})};i.d(t,"Slice",(function(){return at}))}]);

package/src/components/article/ArticleStandard/ArticleStandard.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { SliceArticle } from '../../../types/slice';
+import { ClickHandlerType } from '../../../types/event';
+import { DisplaySchema } from '../../../types/styles';
+import { getDate } from '../../../utils/getDate';
+
+import { Image } from '../../elements/Image/Image';
+import { Headline } from '../../elements/Headline/Headline';
+
+import { ArticleContainer, SideBySideColumn, Label } from '../shared-styles';
+import { DateTime, Byline } from './styles';
+
+export const ArticleStandard: React.FC<{
+  article?: SliceArticle;
+  displaySchema?: DisplaySchema;
+  clickHandler?: ClickHandlerType;
+}> = ({ article, displaySchema, clickHandler }) => {
+  if (!article) {
+    return null;
+  }
+
+  const date = getDate(article.datePublished);
+
+  return (
+    <ArticleContainer schema={displaySchema}>
+      <SideBySideColumn schema={displaySchema}>
+        <Image
+          article={article}
+          displaySchema={displaySchema}
+          clickHandler={clickHandler}
+        />
+      </SideBySideColumn>
+      <SideBySideColumn schema={displaySchema}>
+        {article.label && <Label>{article.label}</Label>}
+        <Headline
+          article={article}
+          displaySchema={displaySchema}
+          clickHandler={clickHandler}
+        />
+        {date && <DateTime>{date}</DateTime>}
+        {article.byline && <Byline>{article.byline}</Byline>}
+      </SideBySideColumn>
+    </ArticleContainer>
+  );
+};

package/src/components/article/ArticleStandard/__tests__/ArticleStandard.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { ArticleStandard } from '../ArticleStandard';
+
+jest.mock('../../../elements/Image/Image', () => ({
+  Image: () => <div>Image</div>
+}));
+
+jest.mock('../../../elements/Headline/Headline', () => ({
+  Headline: () => <div>Headline</div>
+}));
+
+describe('<ArticleStandard />', () => {
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render an article correctly', () => {
+    const article = {
+      images: { crops: [] },
+      label: 'Some text label',
+      byline: 'Some author',
+      headline: '',
+      datePublished: '2020-08-20T12:00:00.000Z',
+      url: ''
+    };
+
+    const { asFragment, getByText } = render(
+      <ArticleStandard article={article} />
+    );
+
+    getByText('Image');
+    getByText(article.label);
+    getByText('Headline');
+    getByText('August 20 2020, 1.00pm');
+    getByText('Some author');
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/src/components/article/ArticleStandard/__tests__/__snapshots__/ArticleStandard.test.tsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ArticleStandard /> should render an article correctly 1`] = `
+<DocumentFragment>
+  <article
+    class="sc-bdVaJa febYmB"
+  >
+    <div
+      class="sc-bwzfXH iKKeUw"
+    >
+      <div>
+        Image
+      </div>
+    </div>
+    <div
+      class="sc-bwzfXH iKKeUw"
+    >
+      <p
+        class="sc-htpNat dtQRdf"
+      >
+        Some text label
+      </p>
+      <div>
+        Headline
+      </div>
+      <p
+        class="sc-bxivhb jpOhka"
+      >
+        August 20 2020, 1.00pm
+      </p>
+      <p
+        class="sc-ifAKCX bbXdqc"
+      >
+        Some author
+      </p>
+    </div>
+  </article>
+</DocumentFragment>
+`;

package/src/components/article/ArticleStandard/styles.ts

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+import { colours, fonts } from '@times-components/ts-styleguide';
+
+export const DateTime = styled.p`
+  margin: 8px 0 0 0;
+  color: ${colours.functional.secondary};
+  font-size: 13px;
+  line-height: 16px;
+  font-family: ${fonts.supporting};
+`;
+
+export const Byline = styled.p`
+  margin: 8px 0 0 0;
+  color: ${colours.functional.brandColour};
+  font-size: 13px;
+  line-height: 16px;
+  font-family: ${fonts.supporting};
+`;

package/src/components/slices/RelatedArticle1/RelatedArticle1.tsx

@@ -6,27 +6,22 @@ import { SliceStyle } from '../../../types/styles';
 import { ClickHandlerType } from '../../../types/event';
 import { setDisplaySchema } from '../../../utils/getArticleStyles';
 
-import { Article } from '../../article/Article/Article';
+import { ArticleStandard } from '../../article/ArticleStandard/ArticleStandard';
 
 import { SliceContainer, SlotContainer } from './styles';
 
-const Lead1: React.FC<{
+const RelatedArticle1: React.FC<{
   slice: SliceData;
   styles?: SliceStyle;
   clickHandler?: ClickHandlerType;
 }> = React.memo(({ slice, styles, clickHandler }) => (
   <SliceContainer styles={styles}>
     <SlotContainer styles={styles}>
-      <Article
+      <ArticleStandard
         article={get(slice, 'children[0].article')}
         displaySchema={setDisplaySchema({
-          sm: {
-            imageRatio: '3:2',
-            headlineFontSize: 28
-          },
-          md: { isSideBySide: true },
-          lg: { headlineFontSize: 32 },
-          xlg: { headlineFontSize: 36 }
+          sm: { imageRatio: '16:9', headlineFontSize: 22 },
+          md: { isSideBySide: true }
         })}
         clickHandler={clickHandler}
       />
@@ -34,4 +29,4 @@ const Lead1: React.FC<{
   </SliceContainer>
 ));
 
-export default Lead1;
+export default RelatedArticle1;

package/src/components/slices/RelatedArticle1/__tests__/RelatedArticle1.test.tsx

@@ -5,8 +5,8 @@ import { getSlice } from '../../../../fixtures/getSlice';
 
 import RelatedArticle1 from '../RelatedArticle1';
 
-jest.mock('../../../article/Article/Article', () => ({
-  Article: () => <div>Article</div>
+jest.mock('../../../article/ArticleStandard/ArticleStandard', () => ({
+  ArticleStandard: () => <div>ArticleStandard</div>
 }));
 
 describe('<RelatedArticle1 />', () => {
@@ -21,7 +21,7 @@ describe('<RelatedArticle1 />', () => {
       <RelatedArticle1 slice={slice} />
     );
 
-    const article = getAllByText('Article');
+    const article = getAllByText('ArticleStandard');
     expect(article.length).toBe(1);
 
     expect(asFragment()).toMatchSnapshot();

package/src/components/slices/RelatedArticle1/__tests__/__snapshots__/RelatedArticle1.test.tsx.snap

@@ -3,13 +3,13 @@
 exports[`<RelatedArticle1 /> should render an RELATED_ARTICLE_1 slice correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa sc-htpNat cjntsS"
+    class="sc-bdVaJa sc-htpNat bhHfbl"
   >
     <div
       class="sc-bwzfXH sc-bxivhb jpYeVk"
     >
       <div>
-        Article
+        ArticleStandard
       </div>
     </div>
   </div>

package/src/components/slices/RelatedArticle1/styles.ts

@@ -9,6 +9,13 @@ import {
 export const SliceContainer = styled(SliceContainerBase)`
   @media (min-width: ${breakpoints.medium}px) {
     flex-wrap: nowrap;
+    width: 80.8%;
+    max-width: none;
+    padding: 0;
+  }
+
+  @media (min-width: ${breakpoints.wide}px) {
+    width: 56.2%;
   }
 `;
 

package/src/components/slices/RelatedArticle2/RelatedArticle2.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { SliceData, SliceSlot } from '../../../types/slice';
+import { SliceStyle } from '../../../types/styles';
+import { ClickHandlerType } from '../../../types/event';
+import { setDisplaySchema } from '../../../utils/getArticleStyles';
+
+import { ArticleStandard } from '../../article/ArticleStandard/ArticleStandard';
+
+import { SliceContainer, SlotContainer } from './styles';
+
+const RelatedArticle2: React.FC<{
+  slice: SliceData;
+  styles?: SliceStyle;
+  clickHandler?: ClickHandlerType;
+}> = React.memo(({ slice, styles, clickHandler }) => (
+  <SliceContainer styles={styles}>
+    {slice.children.map((slot: SliceSlot, i: number) => (
+      <SlotContainer key={i} styles={styles}>
+        <ArticleStandard
+          article={slot.article}
+          displaySchema={setDisplaySchema({
+            sm: {
+              isImageHidden: true,
+              imageRatio: '16:9',
+              headlineFontSize: 22
+            },
+            md: { isImageHidden: false }
+          })}
+          clickHandler={clickHandler}
+        />
+      </SlotContainer>
+    ))}
+  </SliceContainer>
+));
+
+export default RelatedArticle2;

package/src/components/slices/RelatedArticle2/__tests__/RelatedArticle2.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { getSlice } from '../../../../fixtures/getSlice';
+
+import RelatedArticle2 from '../RelatedArticle2';
+
+jest.mock('../../../article/ArticleStandard/ArticleStandard', () => ({
+  ArticleStandard: () => <div>ArticleStandard</div>
+}));
+
+describe('<RelatedArticle2 />', () => {
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render an RELATED_ARTICLE_2 slice correctly', () => {
+    const slice = getSlice('RELATED_ARTICLE_2');
+
+    const { asFragment, getAllByText } = render(
+      <RelatedArticle2 slice={slice} />
+    );
+
+    const article = getAllByText('ArticleStandard');
+    expect(article.length).toBe(2);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/src/components/slices/RelatedArticle2/__tests__/__snapshots__/RelatedArticle2.test.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RelatedArticle2 /> should render an RELATED_ARTICLE_2 slice correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-bdVaJa sc-htpNat TayYz"
+  >
+    <div
+      class="sc-bwzfXH sc-bxivhb ccFQOx"
+    >
+      <div>
+        ArticleStandard
+      </div>
+    </div>
+    <div
+      class="sc-bwzfXH sc-bxivhb ccFQOx"
+    >
+      <div>
+        ArticleStandard
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/slices/RelatedArticle2/styles.ts

@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+import { breakpoints } from '@times-components/ts-styleguide';
+
+import { calculateSlotWidth } from '../../../utils/getArticleStyles';
+
+import {
+  SliceContainer as SliceContainerBase,
+  SlotContainer as SlotContainerBase
+} from '../shared-styles';
+
+export const SliceContainer = styled(SliceContainerBase)`
+  @media (min-width: ${breakpoints.medium}px) {
+    width: 80.8%;
+    max-width: none;
+    padding: 0;
+  }
+
+  @media (min-width: ${breakpoints.wide}px) {
+    width: 56.2%;
+  }
+`;
+
+export const SlotContainer = styled(SlotContainerBase)`
+  @media (min-width: ${breakpoints.medium}px) {
+    width: ${calculateSlotWidth(50, 2)};
+    margin-bottom: 24px;
+    padding-bottom: 24px;
+
+    &:first-of-type {
+      padding-right: 12px;
+
+      :before {
+        display: block;
+        bottom: 24px;
+      }
+    }
+
+    &:last-of-type {
+      padding-left: 12px;
+    }
+  }
+`;