@guardian/atoms-rendering - npm Package Compare versions

Comparing version 1.12.0 to 1.13.0

dist/index.js

@@ -1,2 +0,2 @@
-var e,t,a=require("emotion"),l=require("react"),n=(e=l)&&"object"==typeof e&&"default"in e?e.default:e,r=require("@guardian/src-foundations/typography"),i=require("@guardian/src-foundations"),s=require("@guardian/src-foundations/palette"),o=require("@guardian/src-foundations/accessibility"),c=require("@guardian/src-foundations/palette/"),d=require("@guardian/src-icons"),m=require("react-dom/server"),u=function(e){var t=e.children;return n.createElement("figure",{"data-atom-id":e.id,"data-atom-type":"explainer",className:a.css("padding-bottom:",i.space[1],"px;padding-left:",i.space[2],"px;padding-right:",i.space[2],"px;border-top:1px solid ",s.text.primary,";color:",s.text.primary,";background:",s.neutral[97],";p{margin-top:",i.space[3],"px;margin-bottom:",i.space[3],"px;};label:className;")},t)},p=function(e){var t=e.title;return n.createElement("h3",{className:a.css(r.headline.xxsmall({fontWeight:"bold"})," margin-top:",i.space[2],"px;;label:className;")},t)},g=function(e){var t=e.html;return n.createElement("div",{className:a.css(r.textSans.small({fontWeight:"light",lineHeight:"tight"}),";label:className;"),dangerouslySetInnerHTML:{__html:t}})},b=((t={})[0]=s.news,t[1]=s.opinion,t[2]=s.sport,t[3]=s.culture,t[4]=s.lifestyle,t),f=a.css("border-image:repeating-linear-gradient( to bottom,",i.palette.neutral[86],",",i.palette.neutral[86]," 1px,transparent 1px,transparent 4px ) 13;border-top:13px solid black;background-color:",i.palette.neutral[97],";position:relative;padding-left:5px;padding-right:5px;padding-bottom:1px;margin:16px 0 36px;;label:wrapperStyles;"),h=a.css({name:"e7wosl-figureStyle",styles:"width:100%;;label:figureStyle;"}),x=function(e){return a.css("color:",b[e].main,";",r.headline.xxxsmall({fontWeight:"bold"}),";")},y=a.css(r.headline.xxxsmall(),";;label:titleStyle;"),E=a.css({name:"hi1fzf-audioBodyStyle",styles:"display:flex;overflow:hidden;;label:audioBodyStyle;"}),v=a.css({name:"19itewg-audioElementStyle",styles:"height:0;vertical-align:baseline;width:300px;;label:audioElementStyle;"}),k=a.css({name:"1pgsral-audioControlsStyle",styles:"box-sizing:content-box;padding:5px;width:50px;height:55px;;label:audioControlsStyle;"}),w=a.css("padding:0;border:0;outline:0;cursor:pointer;background-color:transparent;:focus{",o.focusHalo,"};label:buttonStyle;"),N=a.css({name:"hkgkch-svgPlayStyle",styles:"fill:currentColor;overflow:hidden;width:50px;height:auto;;label:svgPlayStyle;"}),S=a.css({name:"srizkq-svgPauseStyle",styles:"fill:currentColor;overflow:hidden;width:50px;height:auto;;label:svgPauseStyle;"}),T=a.css({name:"1qy05o4-timingStyle",styles:"align-items:center;display:flex;flex:1;;label:timingStyle;"}),C=a.css({name:"vz6asm-timePlayedStyle",styles:"min-width:75px;padding-top:6px;display:block;;label:timePlayedStyle;"}),H=a.css({name:"jhr1l0-progressBarStyle",styles:"flex:1;display:block;;label:progressBarStyle;"}),A=function(e){return a.css("width:100%;appearance:none;background-image:linear-gradient( to right,",b[e].main," 0%,",i.palette.neutral[60]," 0% );height:6px;outline:0;cursor:pointer;margin-left:0;margin-right:0;:focus{",o.focusHalo,"}")},I=a.css({name:"wzt3b5-timeDurationStyle",styles:"min-width:65px;padding-top:6px;padding-left:10px;display:block;;label:timeDurationStyle;"}),D=a.css(r.textSans.small(),";label:timeStyles;"),z=function(e){return e.toFixed(0).padStart(2,"0")},L=function(e){var t=Math.floor(e%60),a=Math.floor(e%3600/60),l=Math.floor(e/3600);return z(l)+":"+z(a)+":"+z(t)},M=function(e){return n.createElement("button",{"data-testid":"pause-button",onClick:e.onClick,className:w},n.createElement("svg",{className:S,width:"30px",height:"30px",viewBox:"0 0 30 30"},n.createElement("g",{fill:"none",fillRule:"evenodd"},n.createElement("circle",{fill:b[e.pillar].main,cx:"15",cy:"15",r:"15"}),n.createElement("path",{d:"M9.429 7.286h3.429v15.429h-3.43zm7.286 0h3.429v15.429h-3.43z",fill:i.palette.neutral[100]}))))},W=function(e){return n.createElement("button",{"data-testid":"play-button",onClick:e.onClick,className:w},n.createElement("svg",{className:N,width:"30px",height:"30px",viewBox:"0 0 30 30"},n.createElement("g",{fill:"none",fillRule:"evenodd"},n.createElement("circle",{fill:b[e.pillar].main,cx:"15",cy:"15",r:"15"}),n.createElement("path",{fill:i.palette.neutral[100],d:"M10.113 8.571l-.47.366V20.01l.472.347 13.456-5.593v-.598z"}))))};function _(e,t){switch(e){case"opinion":return c.opinion[t];case"sport":return c.sport[t];case"culture":return c.culture[t];case"lifestyle":return c.lifestyle[t];case"news":return c.news[t];default:return c.news[400]}}var j=a.css({name:"dc74hn-footerStyling",styles:"font-size:13px;line-height:16px;display:flex;justify-content:flex-end;;label:footerStyling;"}),q=function(){return n.createElement("svg",{className:a.css({name:"15k23p-className",styles:"width:16px;height:16px;;label:className;"}),viewBox:"0 0 40 40"},n.createElement("path",{fill:"#FFF",d:"M33.78 22.437l-4.228 13.98L27.93 37.5 5.062 34.14V15.503l7.8-1.517L24.354 2.5h1.624L28.9 5.426l-4.548 8.67h.107l10.477 1.31"}))},F=function(e){var t=e.likeHandler,i=e.dislikeHandler,s=a.css("display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background:black;color:white;border-style:hidden;border-radius:100%;margin:0 0 0 5px;padding:0;width:28px;height:28px;:hover{background:",_(e.pillar,400),";}:focus{border:none;};label:buttonStyling;"),o=l.useState(!1),c=o[0],d=o[1];return n.createElement("footer",{className:j},n.createElement("div",{hidden:c},n.createElement("div",{className:a.css("display:flex;align-items:center;",r.textSans.xsmall(),";;label:className;")},n.createElement("div",null,"Was this helpful?"),n.createElement("button",{"data-testid":"like",className:s,onClick:function(){t(),d(!0)}},n.createElement(q,null)),n.createElement("button",{className:a.cx(s,a.css({name:"13tfp3m-className",styles:"transform:rotate(180deg);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);;label:className;"})),"data-testid":"dislike",onClick:function(){i(),d(!0)}},n.createElement(q,null)))),n.createElement("div",{className:a.css(r.textSans.xsmall(),";height:28px;;label:className;"),"data-testid":"feedback",hidden:!c},"Thank you for your feedback."))},P=a.css(r.headline.xxxsmall({fontWeight:"medium"}),";margin:0;line-height:22px;;label:titleStyling;"),B=a.css({name:"kd64v9-plusStyling",styles:"margin-right:12px;margin-bottom:6px;width:33px;fill:white;height:28px;;label:plusStyling;"}),U=a.css({name:"16egkfy-minusStyling",styles:"margin-right:14px;margin-bottom:6px;width:30px;fill:white;height:25px;padding-left:4px;;label:minusStyling;"}),R=a.css("display:inline-flex;align-items:center;",r.textSans.small(),";;label:iconSpacing;"),O=function(e){var t=e.sectionTitle,i=e.title,s=e.pillar,o=e.expandCallback,m=a.css("display:block;",r.body.medium({lineHeight:"tight",fontWeight:"bold"}),";color:",_(s,400),";;label:atomTitleStyling;"),u=a.css("background:",c.neutral[7],";color:",c.neutral[100],";height:2rem;position:absolute;bottom:0;transform:translate(0,50%);padding:0 15px 0 7px;border-radius:100em;cursor:pointer;display:inline-flex;align-items:center;border:0;margin:0;:hover{background:",_(s,400),";};label:showHideStyling;"),p=l.useState(!1),g=p[0],b=p[1],f=l.useState(!1),h=f[0],x=f[1];return n.createElement("summary",{onClick:function(){h||(o(),x(!0)),b(!g)}},n.createElement("span",{className:m},t),n.createElement("h4",{className:P},i),n.createElement("span",{className:u},g?n.createElement("span",{className:R},n.createElement("span",{className:U},n.createElement(d.SvgMinus,null)),"Hide"):n.createElement("span",{className:R},n.createElement("span",{className:B},n.createElement(d.SvgPlus,null)),"Show")))},Q=a.css({name:"cq3eyp-containerStyling",styles:"display:block;position:relative;margin-bottom:0.75rem;margin-top:1rem;;label:containerStyling;"}),K=a.css("margin:16px 0 36px;background:",s.neutral[93],";color:",s.text.primary,";padding:0 5px 6px;border-image:repeating-linear-gradient( to bottom,",s.neutral[86],",",s.neutral[86]," 1px,transparent 1px,transparent 4px ) 13;border-top:13px solid black;position:relative;summary{list-style:none;margin:0 0 16px;}summary::-webkit-details-marker{display:none;}summary:focus{outline:none;};label:detailStyling;"),V=function(e){var t=e.id,a=e.children,l=e.atomType;return n.createElement("div",{className:Q,"data-atom-id":t,"data-atom-type":l},n.createElement("details",{className:K,"data-atom-id":t,"data-snippet-type":l,open:e.expandForStorybook},n.createElement(O,{sectionTitle:e.atomTypeTitle,pillar:e.pillar,title:e.title,expandCallback:e.expandCallback}),a))},Y=a.css({name:"yngtwb-imageStyling",styles:".forceHeightAndWidth &{width:100px;height:100px;}float:left;margin-right:16px;margin-bottom:6px;object-fit:cover;border-radius:50%;display:block;border:0px;;label:imageStyling;"}),G=a.css(r.textSans.xsmall(),";margin:12px 0;display:flex;align-items:center;svg{width:30px;fill:",s.neutral[60],";};label:creditStyling;"),J=a.css(r.body.medium()," p{margin-bottom:0.5rem;}ol{list-style:decimal;list-style-position:inside;margin-bottom:1rem;}ul{list-style:none;margin:0 0 0.75rem;padding:0;margin-bottom:1rem;}ul li{margin-bottom:0.375rem;padding-left:1.25rem;}ul li:before{display:inline-block;content:'';border-radius:0.375rem;height:0.75rem;width:0.75rem;margin-right:0.5rem;background-color:",s.neutral[86],";margin-left:-1.25rem;}b{font-weight:700;}i{font-style:italic;};label:bodyStyling;"),X=function(e){return a.css("a{color:",_(e,300),";text-decoration:none;border-bottom:0.0625rem solid ",s.neutral[86],";transition:border-color 0.15s ease-out;}a:hover{border-bottom:solid 0.0625rem ",_(e,400),";}")},Z=function(e){var t=e.html,l=e.image,r=e.credit,i=e.pillar;return n.createElement("div",null,l&&n.createElement("span",{className:"forceHeightAndWidth"},n.createElement("img",{className:Y,src:l,alt:""})),n.createElement("div",{className:a.cx(J,X(i)),dangerouslySetInnerHTML:{__html:t}}),r&&n.createElement("div",{className:G},n.createElement(d.SvgInfo,null),r))},$=function(e){var t=e.css,a=e.js,l=e.html;return m.renderToString(n.createElement("html",null,n.createElement("head",null,n.createElement("meta",{charSet:"utf-8"}),n.createElement("meta",{name:"viewport",content:"width=device-width,minimum-scale=1,initial-scale=1"}),t&&n.createElement("style",{dangerouslySetInnerHTML:{__html:t}})),n.createElement("body",null,l&&n.createElement("div",{dangerouslySetInnerHTML:{__html:l}})),n.createElement("script",{dangerouslySetInnerHTML:{__html:a}}),n.createElement("script",{dangerouslySetInnerHTML:{__html:"\n                            function resize() {\n                                window.frameElement.height = document.body.offsetHeight;\n                            }\n                            window.addEventListener('resize', resize);\n                            resize();\n                        "}}),n.createElement("script",{dangerouslySetInnerHTML:{__html:"\n                            var fonts = [].slice.apply(window.parent.document.styleSheets)\n                                .filter(function (sheet) { return sheet.ownerNode.className.indexOf(\"webfont\") > - 1; })\n                                .map(function (sheet) { return sheet.ownerNode.textContent; })\n                                .join(' ');\n                            var css = document.createElement('style');\n                            css.textContent = fonts;\n                            document.head.appendChild(css);\n                        "}})))},ee=a.css({name:"xc14i8-figureStyles",styles:"margin:0;;label:figureStyles;"}),te=a.css({name:"ta2q8u-fullWidthStyles",styles:"width:100%;;label:fullWidthStyles;"}),ae=a.css({name:"o2wys0-wrapperStyles",styles:"display:flex;align-items:center;padding:0 5px 5px 5px;;label:wrapperStyles;"}),le=function(e){return n.createElement("span",{className:(t=e.pillar,a.css("width:24px;height:23px;background-color:",0===t?b[t].bright:b[t].main,";border-radius:50%;display:inline-block;> svg{width:14px;height:auto;margin-left:auto;margin-right:auto;margin-top:6px;display:block;transform:translateY(0.0625rem);}"))},n.createElement(d.SvgVideo,null));var t},ne=function(e){var t,l=e.mediaDuration;return n.createElement("p",{className:(t=e.pillar,a.css("color:",0===t?b[t].bright:b[t].main,";",r.textSans.xsmall({fontWeight:"bold"})))},function(e){if(void 0===e||0===e)return"";var t=Number(e),a=Math.floor(t/3600),l=Math.floor(t%3600/60),n=Math.floor(t%3600%60),r=[];return a>0&&r.push(a),(l>0||0===a)&&r.push(l),n>0&&r.push(n),r.join(":")}(l))},re=function(e){var t=e.mediaDuration,a=e.pillar;return n.createElement("div",{className:ae},n.createElement(le,{pillar:a})," ",t&&n.createElement(ne,{mediaDuration:t,pillar:a}))},ie=function(e){var t=e.children;return n.createElement("div",{className:a.css("position:absolute;bottom:",i.space[3],";left:",i.space[3],";;label:className;")},t)},se=function(e){var t,l=e.pillar,r=e.duration;return n.createElement("div",{className:(t=e.image,a.css("background-image:url(",t,");background-size:cover;background-position:49% 49%;background-repeat:no-repeat;z-index:0;text-align:center;height:100%;width:100%;position:absolute;max-height:100vh;cursor:pointer;"))},n.createElement(ie,null,n.createElement(re,{mediaDuration:r,pillar:l})))},oe=function(e){var t=e.children;return n.createElement("div",{className:a.css("position:relative;padding-bottom:",e.height/e.width*100,"%;iframe{width:100%;height:100%;position:absolute;top:0;left:0;};label:className;")},t)},ce=a.css("height:26px;svg{fill:",s.neutral[100],";height:26px;width:26px;};label:iconStyle;"),de=a.css({name:"kvx5ty-answerWrapperStyles",styles:"display:flex;flex-direction:row;margin-bottom:6px;padding-top:12px;padding-bottom:12px;padding-left:20px;padding-right:20px;;label:answerWrapperStyles;"}),me=a.css(":hover{background-color:",s.neutral[86],";cursor:pointer;}:focus{background-color:",s.neutral[86],";",o.focusHalo,"};label:selectableAnswerStyles;"),ue=function(e){return a.css(r.body.medium(),";background-color:",s.neutral[97],";",e?"":me," ",de," padding-left:28px;")},pe=function(e){var t=e.id,l=e.onClick,r=e.disabled,i=e.answerText,s=e.onKeyPress;return n.createElement("div",null,n.createElement("label",{className:ue(r),onKeyPress:s,tabIndex:r?-1:0,htmlFor:"answer-"+t,"data-answerType":r?"unselected-disabled-answer":"unselected-enabled-answer",id:t,"data-testId":t},i),n.createElement("input",{type:"radio",tabIndex:-1,required:!0,id:"answer-"+t,onClick:l,disabled:r,className:a.css(o.visuallyHidden,";;label:className;")}))},ge=a.css("color:",s.neutral[100],";padding-left:8px;display:flex;flex-direction:column;;label:correctSelectedAnswerStyles;"),be=function(e){var t=e.answerText,l=e.explainerText,i=e.id;return n.createElement("div",{className:a.css(de," background-color:rgb(61,181,64);;label:className;")},n.createElement("div",{className:ce},n.createElement(d.SvgCheckmark,null)),n.createElement("label",{className:ge,id:i,"data-testId":i,"data-answerType":"correct-selected-answer"},n.createElement("span",{className:a.css(r.body.medium(),";;label:className;")},t),n.createElement("span",{className:a.css(r.textSans.xsmall(),";label:className;")},l)))},fe=a.css("color:",s.neutral[0],";padding-left:8px;display:flex;flex-direction:column;;label:nonSelectedCorrectAnswerLabelStyles;"),he=function(e){var t=e.answerText,l=e.explainerText,i=e.id;return n.createElement("div",{className:a.css(de," background-color:rgb(61,181,64,0.6);;label:className;")},n.createElement("label",{className:fe,id:i,"data-testId":i,"data-answerType":"non-selected-correct-answer"},n.createElement("span",{className:a.css(r.body.medium(),";;label:className;")},t),n.createElement("span",{className:a.css(r.textSans.xsmall(),";label:className;")},l)))},xe=a.css("color:",s.neutral[100],";padding-left:8px;display:flex;flex-direction:column;",r.body.medium(),";;label:incorrectAnswerLabelStyles;"),ye=function(e){var t=e.answerText,l=e.id;return n.createElement("div",{className:a.css(de," background-color:",s.news[400],";;label:className;")},n.createElement("div",{className:ce},n.createElement(d.SvgCross,null)),n.createElement("label",{className:xe,id:l,"data-testId":l,"data-answerType":"incorrect-answer"},t))},Ee=a.css({name:"1usw75q-fieldsetStyle",styles:"margin-bottom:12px;border:0px;padding:0px;;label:fieldsetStyle;"}),ve=function(e){var t=e.text,i=e.imageUrl,s=e.answers,o=e.number,c=l.useState(void 0),d=c[0],m=c[1];return n.createElement("div",{className:a.css(r.body.medium(),";;label:className;")},n.createElement("fieldset",{className:Ee},n.createElement("div",null,n.createElement("legend",{className:a.css({name:"19e1jvj-className",styles:"margin-bottom:12px;;label:className;"})},n.createElement("span",{className:a.css({name:"1kbwa6u-className",styles:"padding-right:12px;;label:className;"})},o+"."),t)),i&&n.createElement("img",{className:a.css({name:"17mnt1y-className",styles:"width:100%;;label:className;"}),src:i}),n.createElement("div",{className:a.css({name:"w284zz-className",styles:"position:relative;;label:className;"})},s.map(function(e,t){var a=void 0!==d;if(a){if(d===e.id){if(e.isCorrect)return n.createElement(be,{id:e.id,answerText:e.text,explainerText:e.revealText||""});if(!e.isCorrect)return n.createElement(ye,{id:e.id,answerText:e.text})}return e.isCorrect?n.createElement(he,{id:e.id,answerText:e.text,explainerText:e.revealText||""}):n.createElement(pe,{id:e.id,disabled:!0,answerText:e.text})}return n.createElement(pe,{id:e.id,disabled:!1,answerText:e.text,onClick:function(){return m(e.id)},onKeyPress:function(t){"Enter"!==t.key||a||m(e.id)}})}))))},ke=a.css(":not(:last-child){border-left:0.0625rem solid ",i.neutral[60],";padding-bottom:",i.remSpace[4],";}padding-left:",i.space[4],"px;margin-left:",i.space[2],"px;;label:Snippet;"),we=a.css(r.body.medium({lineHeight:"tight",fontWeight:"bold"}),";;label:EventTitle;"),Ne=a.css("::before{",a.css("content:'';width:",i.space[4],"px;height:",i.space[4],"px;border-radius:100%;float:left;position:relative;left:-24px;background-color:#121212;;label:EventDateBullet;"),"}margin-left:-16px;background:",i.brandAlt[400],";",r.body.medium({lineHeight:"tight",fontWeight:"bold"}),";;label:EventDate;"),Se=a.css("background:",i.brandAlt[400],";",r.body.medium({lineHeight:"tight",fontWeight:"bold"}),";;label:EventToDate;"),Te=function(e){var t=e.pillar;return n.createElement("div",null,e.events.map(function(e,a){var l=new Date(Date.parse(e.date)).toISOString(),r=e.toDate?new Date(Date.parse(e.toDate)).toISOString():"";return n.createElement("div",{key:a,"data-type":"event-snippet",className:ke},n.createElement("div",null,n.createElement("time",{dateTime:l,className:Ne},e.date),e.toDate&&n.createElement("span",null," ","-"," ",n.createElement("time",{dateTime:r,className:Se},e.toDate))),e.title&&n.createElement("div",{className:we},e.title),e.body&&n.createElement(Z,{html:e.body,pillar:t}))}))};exports.AudioAtom=function(e){var t=e.id,r=e.trackUrl,i=e.kicker,s=e.title,o=e.pillar,c=l.useRef(null),d=l.useState(!1),m=d[0],u=d[1],p=l.useState(0),g=p[0],b=p[1],w=l.useState(0),N=w[0],S=w[1];l.useEffect(function(){var e=function(){S(c.current?c.current.currentTime/c.current.duration*100:0),b(c.current?c.current.currentTime:0)};return c.current&&c.current.addEventListener("timeupdate",e),function(){return c.current?c.current.removeEventListener("timeupdate",e):void 0}},[c,b]);var z=l.useState(0),_=z[0],j=z[1];l.useEffect(function(){var e=function(){return j(c.current?c.current.duration:0)};return c.current&&c.current.addEventListener("loadeddata",e),function(){return c.current?c.current.removeEventListener("loadeddata",e):void 0}},[c,j]),l.useEffect(function(){m?c.current&&c.current.play():c.current&&c.current.pause()},[m,c]);var q=l.useRef(null);return l.useEffect(function(){var e=function(e){39===e.keyCode&&document.activeElement===q.current&&c.current&&(c.current.currentTime+=15),37===e.keyCode&&document.activeElement===q.current&&c.current&&(c.current.currentTime-=15)};return document.addEventListener("keydown",e),function(){return document.removeEventListener("keydown",e)}},[c,q]),n.createElement("figure",{className:h,"data-atom-id":t,"data-atom-type":"audio"},n.createElement("div",{className:f},n.createElement("div",{className:a.css({name:"1k6uwis-className",styles:"padding-left:5px;;label:className;"})},n.createElement("span",{className:x(o)},i),n.createElement("h4",{className:y},s)),n.createElement("div",{className:E},n.createElement("audio",{className:v,src:r,ref:c,"data-duration":_,"data-media-id":t,"data-title":y},n.createElement("p",null,"Sorry your browser does not support audio - but you can download here and listen https://audio.guim.co.uk/2020/05/05-61553-gnl.fw.200505.jf.ch7DW.mp3")),n.createElement("div",{className:k},m?n.createElement(M,{pillar:o,onClick:function(){return u(!1)}}):n.createElement(W,{pillar:o,onClick:function(){return u(!0)}})),n.createElement("div",{className:T},n.createElement("div",{className:C},n.createElement("span",{className:D},L(g))),n.createElement("div",{className:H},n.createElement("input",{className:A(o),ref:q,type:"range",min:"0",max:"100",step:"1",value:N,onClick:function(e){c.current&&(c.current.currentTime=c.current.duration/100*(e.nativeEvent.offsetX/e.currentTarget.offsetWidth*100))}})),n.createElement("div",{className:I},n.createElement("span",{className:D},L(_)))))))},exports.ChartAtom=function(e){var t=e.id,l=e.html;return n.createElement("div",{"data-atom-id":t,"data-testid":"chart","data-atom-type":"chart","data-snippet-type":"chart",className:a.css("padding-bottom:",i.space[1],"px;margin-bottom:",i.space[2],"px;;label:className;")},n.createElement("iframe",{className:"atom__iframe",name:t,srcDoc:l,width:"100%",frameBorder:"0"}))},exports.ExplainerAtom=function(e){var t=e.html;return n.createElement(u,{id:e.id},n.createElement(p,{title:e.title}),n.createElement(g,{html:t}))},exports.GuideAtom=function(e){var t=e.pillar,a=e.likeHandler,l=e.dislikeHandler;return n.createElement(V,{id:e.id,title:e.title,pillar:t,atomType:"guide",atomTypeTitle:"Quick Guide",expandForStorybook:e.expandForStorybook,expandCallback:e.expandCallback},n.createElement(Z,{html:e.html,image:e.image,credit:e.credit,pillar:t}),n.createElement(F,{pillar:t,dislikeHandler:l,likeHandler:a}))},exports.InteractiveAtom=function(e){return n.createElement("figure",{className:ee,"data-atom-id":e.id,"data-atom-type":"interactive"},n.createElement("iframe",{className:te,srcDoc:$({js:e.js,css:e.css,html:e.html}),frameBorder:"0"}))},exports.ProfileAtom=function(e){var t=e.pillar,a=e.likeHandler,l=e.dislikeHandler;return n.createElement(V,{id:e.id,title:e.title,pillar:t,atomType:"profile",atomTypeTitle:"Profile",expandForStorybook:e.expandForStorybook,expandCallback:e.expandCallback},n.createElement(Z,{html:e.html,image:e.image,credit:e.credit,pillar:t}),n.createElement(F,{pillar:t,dislikeHandler:l,likeHandler:a}))},exports.QandaAtom=function(e){var t=e.pillar,a=e.likeHandler,l=e.dislikeHandler;return n.createElement(V,{id:e.id,title:e.title,atomType:"qanda",atomTypeTitle:"Q&A",pillar:t,expandForStorybook:e.expandForStorybook,expandCallback:e.expandCallback},n.createElement(Z,{html:e.html,image:e.image,credit:e.credit,pillar:t}),n.createElement(F,{pillar:t,likeHandler:a,dislikeHandler:l}))},exports.QuizAtom=function(e){return n.createElement("form",{"data-atom-id":e.id},e.questions.map(function(e,t){return n.createElement(ve,{key:e.id,id:e.id,number:t+1,text:e.text,imageUrl:e.imageUrl,answers:e.answers})}))},exports.TimelineAtom=function(e){var t=e.events,a=e.description,l=e.pillar,r=e.likeHandler,i=e.dislikeHandler;return n.createElement(V,{atomType:"timeline",atomTypeTitle:"Timeline",id:e.id,pillar:l,expandForStorybook:e.expandForStorybook,title:e.title,expandCallback:e.expandCallback},a&&n.createElement(Z,{html:a,pillar:l}),t&&n.createElement(Te,{events:t,pillar:l}),n.createElement(F,{pillar:l,dislikeHandler:i,likeHandler:r}))},exports.YoutubeAtom=function(e){var t=e.format,a=e.videoMeta,l=e.overlayImage,r=e.adTargeting,i=e.height,s=void 0===i?259:i,o=e.width,c=void 0===o?460:o,d=e.title,m=void 0===d?"YouTube video player":d,u=e.duration,p=r&&JSON.stringify(function(e){return{adsConfig:{adTagParameters:{iu:""+(e.adUnit||""),cust_params:encodeURIComponent((t=e.customParams,Object.keys(t).map(function(e){var a=t[e];return e+"="+(Array.isArray(a)?a.map(function(e){return encodeURIComponent(e)}).join(","):encodeURIComponent(a))}).join("&")))}}};var t}(r));return n.createElement("div",null,n.createElement(oe,{height:s,width:c},l&&n.createElement(se,{image:l,pillar:t.pillar,duration:u}),n.createElement("iframe",{title:m,width:c,height:s,src:"https://www.youtube.com/embed/"+a.assetId+"?embed_config="+p+"&enablejsapi=1&origin=https://www.theguardian.com&widgetid=1&modestbranding=1"})))};
+var e,t,a=require("emotion"),l=require("react"),n=(e=l)&&"object"==typeof e&&"default"in e?e.default:e,r=require("@guardian/src-foundations/typography"),i=require("@guardian/src-foundations"),s=require("@guardian/src-foundations/palette"),o=require("@guardian/src-foundations/accessibility"),c=require("@guardian/src-foundations/palette/"),d=require("@guardian/src-icons"),m=require("react-dom/server"),u=function(e){var t=e.children;return n.createElement("figure",{"data-atom-id":e.id,"data-atom-type":"explainer",className:a.css("padding-bottom:",i.space[1],"px;padding-left:",i.space[2],"px;padding-right:",i.space[2],"px;border-top:1px solid ",s.text.primary,";color:",s.text.primary,";background:",s.neutral[97],";p{margin-top:",i.space[3],"px;margin-bottom:",i.space[3],"px;};label:className;")},t)},p=function(e){var t=e.title;return n.createElement("h3",{className:a.css(r.headline.xxsmall({fontWeight:"bold"})," margin-top:",i.space[2],"px;;label:className;")},t)},g=function(e){var t=e.html;return n.createElement("div",{className:a.css(r.textSans.small({fontWeight:"light",lineHeight:"tight"}),";label:className;"),dangerouslySetInnerHTML:{__html:t}})},b=((t={})[0]=s.news,t[1]=s.opinion,t[2]=s.sport,t[3]=s.culture,t[4]=s.lifestyle,t),f=a.css("border-image:repeating-linear-gradient( to bottom,",i.palette.neutral[86],",",i.palette.neutral[86]," 1px,transparent 1px,transparent 4px ) 13;border-top:13px solid black;background-color:",i.palette.neutral[97],";position:relative;padding-left:5px;padding-right:5px;padding-bottom:1px;margin:16px 0 36px;;label:wrapperStyles;"),h=a.css({name:"e7wosl-figureStyle",styles:"width:100%;;label:figureStyle;"}),x=function(e){return a.css("color:",b[e].main,";",r.headline.xxxsmall({fontWeight:"bold"}),";")},y=a.css(r.headline.xxxsmall(),";;label:titleStyle;"),E=a.css({name:"hi1fzf-audioBodyStyle",styles:"display:flex;overflow:hidden;;label:audioBodyStyle;"}),v=a.css({name:"19itewg-audioElementStyle",styles:"height:0;vertical-align:baseline;width:300px;;label:audioElementStyle;"}),k=a.css({name:"1pgsral-audioControlsStyle",styles:"box-sizing:content-box;padding:5px;width:50px;height:55px;;label:audioControlsStyle;"}),w=a.css("padding:0;border:0;outline:0;cursor:pointer;background-color:transparent;:focus{",o.focusHalo,"};label:buttonStyle;"),N=a.css({name:"hkgkch-svgPlayStyle",styles:"fill:currentColor;overflow:hidden;width:50px;height:auto;;label:svgPlayStyle;"}),S=a.css({name:"srizkq-svgPauseStyle",styles:"fill:currentColor;overflow:hidden;width:50px;height:auto;;label:svgPauseStyle;"}),T=a.css({name:"1qy05o4-timingStyle",styles:"align-items:center;display:flex;flex:1;;label:timingStyle;"}),C=a.css({name:"vz6asm-timePlayedStyle",styles:"min-width:75px;padding-top:6px;display:block;;label:timePlayedStyle;"}),H=a.css({name:"jhr1l0-progressBarStyle",styles:"flex:1;display:block;;label:progressBarStyle;"}),A=function(e){return a.css("width:100%;appearance:none;background-image:linear-gradient( to right,",b[e].main," 0%,",i.palette.neutral[60]," 0% );height:6px;outline:0;cursor:pointer;margin-left:0;margin-right:0;:focus{",o.focusHalo,"}")},I=a.css({name:"wzt3b5-timeDurationStyle",styles:"min-width:65px;padding-top:6px;padding-left:10px;display:block;;label:timeDurationStyle;"}),D=a.css(r.textSans.small(),";label:timeStyles;"),_=function(e){return e.toFixed(0).padStart(2,"0")},z=function(e){var t=Math.floor(e%60),a=Math.floor(e%3600/60),l=Math.floor(e/3600);return _(l)+":"+_(a)+":"+_(t)},L=function(e){return n.createElement("button",{"data-testid":"pause-button",onClick:e.onClick,className:w},n.createElement("svg",{className:S,width:"30px",height:"30px",viewBox:"0 0 30 30"},n.createElement("g",{fill:"none",fillRule:"evenodd"},n.createElement("circle",{fill:b[e.pillar].main,cx:"15",cy:"15",r:"15"}),n.createElement("path",{d:"M9.429 7.286h3.429v15.429h-3.43zm7.286 0h3.429v15.429h-3.43z",fill:i.palette.neutral[100]}))))},M=function(e){return n.createElement("button",{"data-testid":"play-button",onClick:e.onClick,className:w},n.createElement("svg",{className:N,width:"30px",height:"30px",viewBox:"0 0 30 30"},n.createElement("g",{fill:"none",fillRule:"evenodd"},n.createElement("circle",{fill:b[e.pillar].main,cx:"15",cy:"15",r:"15"}),n.createElement("path",{fill:i.palette.neutral[100],d:"M10.113 8.571l-.47.366V20.01l.472.347 13.456-5.593v-.598z"}))))};function W(e,t){switch(e){case"opinion":return c.opinion[t];case"sport":return c.sport[t];case"culture":return c.culture[t];case"lifestyle":return c.lifestyle[t];case"news":return c.news[t];default:return c.news[400]}}var j=a.css({name:"dc74hn-footerStyling",styles:"font-size:13px;line-height:16px;display:flex;justify-content:flex-end;;label:footerStyling;"}),q=function(){return n.createElement("svg",{className:a.css({name:"15k23p-className",styles:"width:16px;height:16px;;label:className;"}),viewBox:"0 0 40 40"},n.createElement("path",{fill:"#FFF",d:"M33.78 22.437l-4.228 13.98L27.93 37.5 5.062 34.14V15.503l7.8-1.517L24.354 2.5h1.624L28.9 5.426l-4.548 8.67h.107l10.477 1.31"}))},F=function(e){var t=e.likeHandler,i=e.dislikeHandler,s=a.css("display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background:black;color:white;border-style:hidden;border-radius:100%;margin:0 0 0 5px;padding:0;width:28px;height:28px;:hover{background:",W(e.pillar,400),";}:focus{border:none;};label:buttonStyling;"),o=l.useState(!1),c=o[0],d=o[1];return n.createElement("footer",{className:j},n.createElement("div",{hidden:c},n.createElement("div",{className:a.css("display:flex;align-items:center;",r.textSans.xsmall(),";;label:className;")},n.createElement("div",null,"Was this helpful?"),n.createElement("button",{"data-testid":"like",className:s,onClick:function(){t(),d(!0)}},n.createElement(q,null)),n.createElement("button",{className:a.cx(s,a.css({name:"13tfp3m-className",styles:"transform:rotate(180deg);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);;label:className;"})),"data-testid":"dislike",onClick:function(){i(),d(!0)}},n.createElement(q,null)))),n.createElement("div",{className:a.css(r.textSans.xsmall(),";height:28px;;label:className;"),"data-testid":"feedback",hidden:!c},"Thank you for your feedback."))},P=a.css(r.headline.xxxsmall({fontWeight:"medium"}),";margin:0;line-height:22px;;label:titleStyling;"),B=a.css({name:"kd64v9-plusStyling",styles:"margin-right:12px;margin-bottom:6px;width:33px;fill:white;height:28px;;label:plusStyling;"}),U=a.css({name:"16egkfy-minusStyling",styles:"margin-right:14px;margin-bottom:6px;width:30px;fill:white;height:25px;padding-left:4px;;label:minusStyling;"}),R=a.css("display:inline-flex;align-items:center;",r.textSans.small(),";;label:iconSpacing;"),O=function(e){var t=e.sectionTitle,i=e.title,s=e.pillar,o=e.expandCallback,m=a.css("display:block;",r.body.medium({lineHeight:"tight",fontWeight:"bold"}),";color:",W(s,400),";;label:atomTitleStyling;"),u=a.css("background:",c.neutral[7],";color:",c.neutral[100],";height:2rem;position:absolute;bottom:0;transform:translate(0,50%);padding:0 15px 0 7px;border-radius:100em;cursor:pointer;display:inline-flex;align-items:center;border:0;margin:0;:hover{background:",W(s,400),";};label:showHideStyling;"),p=l.useState(!1),g=p[0],b=p[1],f=l.useState(!1),h=f[0],x=f[1];return n.createElement("summary",{onClick:function(){h||(o(),x(!0)),b(!g)}},n.createElement("span",{className:m},t),n.createElement("h4",{className:P},i),n.createElement("span",{className:u},g?n.createElement("span",{className:R},n.createElement("span",{className:U},n.createElement(d.SvgMinus,null)),"Hide"):n.createElement("span",{className:R},n.createElement("span",{className:B},n.createElement(d.SvgPlus,null)),"Show")))},Q=a.css({name:"cq3eyp-containerStyling",styles:"display:block;position:relative;margin-bottom:0.75rem;margin-top:1rem;;label:containerStyling;"}),K=a.css("margin:16px 0 36px;background:",s.neutral[93],";color:",s.text.primary,";padding:0 5px 6px;border-image:repeating-linear-gradient( to bottom,",s.neutral[86],",",s.neutral[86]," 1px,transparent 1px,transparent 4px ) 13;border-top:13px solid black;position:relative;summary{list-style:none;margin:0 0 16px;}summary::-webkit-details-marker{display:none;}summary:focus{outline:none;};label:detailStyling;"),V=function(e){var t=e.id,a=e.children,l=e.atomType;return n.createElement("div",{className:Q,"data-atom-id":t,"data-atom-type":l},n.createElement("details",{className:K,"data-atom-id":t,"data-snippet-type":l,open:e.expandForStorybook},n.createElement(O,{sectionTitle:e.atomTypeTitle,pillar:e.pillar,title:e.title,expandCallback:e.expandCallback}),a))},Y=a.css({name:"yngtwb-imageStyling",styles:".forceHeightAndWidth &{width:100px;height:100px;}float:left;margin-right:16px;margin-bottom:6px;object-fit:cover;border-radius:50%;display:block;border:0px;;label:imageStyling;"}),G=a.css(r.textSans.xsmall(),";margin:12px 0;display:flex;align-items:center;svg{width:30px;fill:",s.neutral[60],";};label:creditStyling;"),J=a.css(r.body.medium()," p{margin-bottom:0.5rem;}ol{list-style:decimal;list-style-position:inside;margin-bottom:1rem;}ul{list-style:none;margin:0 0 0.75rem;padding:0;margin-bottom:1rem;}ul li{margin-bottom:0.375rem;padding-left:1.25rem;}ul li:before{display:inline-block;content:'';border-radius:0.375rem;height:0.75rem;width:0.75rem;margin-right:0.5rem;background-color:",s.neutral[86],";margin-left:-1.25rem;}b{font-weight:700;}i{font-style:italic;};label:bodyStyling;"),X=function(e){return a.css("a{color:",W(e,300),";text-decoration:none;border-bottom:0.0625rem solid ",s.neutral[86],";transition:border-color 0.15s ease-out;}a:hover{border-bottom:solid 0.0625rem ",W(e,400),";}")},Z=function(e){var t=e.html,l=e.image,r=e.credit,i=e.pillar;return n.createElement("div",null,l&&n.createElement("span",{className:"forceHeightAndWidth"},n.createElement("img",{className:Y,src:l,alt:""})),n.createElement("div",{className:a.cx(J,X(i)),dangerouslySetInnerHTML:{__html:t}}),r&&n.createElement("div",{className:G},n.createElement(d.SvgInfo,null),r))},$=function(e){var t=e.css,a=e.js,l=e.html;return m.renderToString(n.createElement("html",null,n.createElement("head",null,n.createElement("meta",{charSet:"utf-8"}),n.createElement("meta",{name:"viewport",content:"width=device-width,minimum-scale=1,initial-scale=1"}),t&&n.createElement("style",{dangerouslySetInnerHTML:{__html:t}})),n.createElement("body",null,l&&n.createElement("div",{dangerouslySetInnerHTML:{__html:l}})),n.createElement("script",{dangerouslySetInnerHTML:{__html:a}}),n.createElement("script",{dangerouslySetInnerHTML:{__html:"\n                            function resize() {\n                                window.frameElement.height = document.body.offsetHeight;\n                            }\n                            window.addEventListener('resize', resize);\n                            resize();\n                        "}}),n.createElement("script",{dangerouslySetInnerHTML:{__html:"\n                            var fonts = [].slice.apply(window.parent.document.styleSheets)\n                                .filter(function (sheet) { return sheet.ownerNode.className.indexOf(\"webfont\") > - 1; })\n                                .map(function (sheet) { return sheet.ownerNode.textContent; })\n                                .join(' ');\n                            var css = document.createElement('style');\n                            css.textContent = fonts;\n                            document.head.appendChild(css);\n                        "}})))},ee=a.css({name:"xc14i8-figureStyles",styles:"margin:0;;label:figureStyles;"}),te=a.css({name:"ta2q8u-fullWidthStyles",styles:"width:100%;;label:fullWidthStyles;"}),ae=a.css({name:"o2wys0-wrapperStyles",styles:"display:flex;align-items:center;padding:0 5px 5px 5px;;label:wrapperStyles;"}),le=function(e){return n.createElement("span",{className:(t=e.pillar,a.css("width:24px;height:23px;background-color:",0===t?b[t].bright:b[t].main,";border-radius:50%;display:inline-block;> svg{width:14px;height:auto;margin-left:auto;margin-right:auto;margin-top:6px;display:block;transform:translateY(0.0625rem);}"))},n.createElement(d.SvgVideo,null));var t},ne=function(e){var t,l=e.mediaDuration;return n.createElement("p",{className:(t=e.pillar,a.css("color:",0===t?b[t].bright:b[t].main,";",r.textSans.xsmall({fontWeight:"bold"})))},function(e){if(void 0===e||0===e)return"";var t=Number(e),a=Math.floor(t/3600),l=Math.floor(t%3600/60),n=Math.floor(t%3600%60),r=[];return a>0&&r.push(a),(l>0||0===a)&&r.push(l),n>0&&r.push(n),r.join(":")}(l))},re=function(e){var t=e.mediaDuration,a=e.pillar;return n.createElement("div",{className:ae},n.createElement(le,{pillar:a})," ",t&&n.createElement(ne,{mediaDuration:t,pillar:a}))},ie=function(e){var t=e.children;return n.createElement("div",{className:a.css("position:absolute;bottom:",i.space[3],";left:",i.space[3],";;label:className;")},t)},se=function(e){var t,l=e.pillar,r=e.duration;return n.createElement("div",{className:(t=e.image,a.css("background-image:url(",t,");background-size:cover;background-position:49% 49%;background-repeat:no-repeat;z-index:0;text-align:center;height:100%;width:100%;position:absolute;max-height:100vh;cursor:pointer;"))},n.createElement(ie,null,n.createElement(re,{mediaDuration:r,pillar:l})))},oe=function(e){var t=e.children;return n.createElement("div",{className:a.css("position:relative;padding-bottom:",e.height/e.width*100,"%;iframe{width:100%;height:100%;position:absolute;top:0;left:0;};label:className;")},t)},ce=a.css("height:26px;svg{fill:",s.neutral[100],";height:26px;width:26px;};label:iconStyle;"),de=a.css({name:"kvx5ty-answerWrapperStyles",styles:"display:flex;flex-direction:row;margin-bottom:6px;padding-top:12px;padding-bottom:12px;padding-left:20px;padding-right:20px;;label:answerWrapperStyles;"}),me=a.css(":hover{background-color:",s.neutral[86],";cursor:pointer;}:focus{background-color:",s.neutral[86],";",o.focusHalo,"};label:selectableAnswerStyles;"),ue=function(e){return a.css(r.body.medium(),";background-color:",s.neutral[97],";",e?"":me," ",de," padding-left:28px;")},pe=function(e){var t=e.id,l=e.onClick,r=e.disabled,i=e.answerText,s=e.onKeyPress;return n.createElement("div",null,n.createElement("label",{className:ue(r),onKeyPress:s,tabIndex:r?-1:0,htmlFor:"answer-"+t,"data-answerType":r?"unselected-disabled-answer":"unselected-enabled-answer",id:t,"data-testId":t},i),n.createElement("input",{type:"radio",tabIndex:-1,required:!0,id:"answer-"+t,onClick:l,disabled:r,className:a.css(o.visuallyHidden,";;label:className;")}))},ge=a.css("color:",s.neutral[100],";padding-left:8px;display:flex;flex-direction:column;;label:correctSelectedAnswerStyles;"),be=function(e){var t=e.answerText,l=e.explainerText,i=e.id;return n.createElement("div",{className:a.css(de," background-color:rgb(61,181,64);;label:className;")},n.createElement("div",{className:ce},n.createElement(d.SvgCheckmark,null)),n.createElement("label",{className:ge,id:i,"data-testId":i,"data-answerType":"correct-selected-answer"},n.createElement("span",{className:a.css(r.body.medium(),";;label:className;")},t),n.createElement("span",{className:a.css(r.textSans.xsmall(),";label:className;")},l)))},fe=a.css("color:",s.neutral[0],";padding-left:8px;display:flex;flex-direction:column;;label:nonSelectedCorrectAnswerLabelStyles;"),he=function(e){var t=e.answerText,l=e.explainerText,i=e.id;return n.createElement("div",{className:a.css(de," background-color:rgb(61,181,64,0.6);;label:className;")},n.createElement("label",{className:fe,id:i,"data-testId":i,"data-answerType":"non-selected-correct-answer"},n.createElement("span",{className:a.css(r.body.medium(),";;label:className;")},t),n.createElement("span",{className:a.css(r.textSans.xsmall(),";label:className;")},l)))},xe=a.css("color:",s.neutral[100],";padding-left:8px;display:flex;flex-direction:column;",r.body.medium(),";;label:incorrectAnswerLabelStyles;"),ye=function(e){var t=e.answerText,l=e.id;return n.createElement("div",{className:a.css(de," background-color:",s.news[400],";;label:className;")},n.createElement("div",{className:ce},n.createElement(d.SvgCross,null)),n.createElement("label",{className:xe,id:l,"data-testId":l,"data-answerType":"incorrect-answer"},t))},Ee=a.css({name:"1usw75q-fieldsetStyle",styles:"margin-bottom:12px;border:0px;padding:0px;;label:fieldsetStyle;"}),ve=function(e){var t=e.text,i=e.imageUrl,s=e.answers,o=e.number,c=l.useState(void 0),d=c[0],m=c[1];return n.createElement("div",{className:a.css(r.body.medium(),";;label:className;")},n.createElement("fieldset",{className:Ee},n.createElement("div",null,n.createElement("legend",{className:a.css({name:"19e1jvj-className",styles:"margin-bottom:12px;;label:className;"})},n.createElement("span",{className:a.css({name:"1kbwa6u-className",styles:"padding-right:12px;;label:className;"})},o+"."),t)),i&&n.createElement("img",{className:a.css({name:"17mnt1y-className",styles:"width:100%;;label:className;"}),src:i}),n.createElement("div",{className:a.css({name:"w284zz-className",styles:"position:relative;;label:className;"})},s.map(function(e,t){var a=void 0!==d;if(a){if(d===e.id){if(e.isCorrect)return n.createElement(be,{id:e.id,answerText:e.text,explainerText:e.revealText||""});if(!e.isCorrect)return n.createElement(ye,{id:e.id,answerText:e.text})}return e.isCorrect?n.createElement(he,{id:e.id,answerText:e.text,explainerText:e.revealText||""}):n.createElement(pe,{id:e.id,disabled:!0,answerText:e.text})}return n.createElement(pe,{id:e.id,disabled:!1,answerText:e.text,onClick:function(){return m(e.id)},onKeyPress:function(t){"Enter"!==t.key||a||m(e.id)}})}))))},ke=a.css(":not(:last-child){border-left:0.0625rem solid ",i.neutral[60],";padding-bottom:",i.remSpace[4],";}padding-left:",i.space[4],"px;margin-left:",i.space[2],"px;;label:Snippet;"),we=a.css(r.body.medium({lineHeight:"tight",fontWeight:"bold"}),";;label:EventTitle;"),Ne=a.css("::before{",a.css("content:'';width:",i.space[4],"px;height:",i.space[4],"px;border-radius:100%;float:left;position:relative;left:-24px;background-color:#121212;;label:EventDateBullet;"),"}margin-left:-16px;background:",i.brandAlt[400],";",r.body.medium({lineHeight:"tight",fontWeight:"bold"}),";;label:EventDate;"),Se=a.css("background:",i.brandAlt[400],";",r.body.medium({lineHeight:"tight",fontWeight:"bold"}),";;label:EventToDate;"),Te=function(e){var t=e.pillar;return n.createElement("div",null,e.events.map(function(e,a){var l=new Date(Date.parse(e.date)).toISOString(),r=e.toDate?new Date(Date.parse(e.toDate)).toISOString():"";return n.createElement("div",{key:a,"data-type":"event-snippet",className:ke},n.createElement("div",null,n.createElement("time",{dateTime:l,className:Ne},e.date),e.toDate&&n.createElement("span",null," ","-"," ",n.createElement("time",{dateTime:r,className:Se},e.toDate))),e.title&&n.createElement("div",{className:we},e.title),e.body&&n.createElement(Z,{html:e.body,pillar:t}))}))};exports.AudioAtom=function(e){var t=e.id,r=e.trackUrl,i=e.kicker,s=e.title,o=e.pillar,c=l.useRef(null),d=l.useState(!1),m=d[0],u=d[1],p=l.useState(0),g=p[0],b=p[1],w=l.useState(0),N=w[0],S=w[1];l.useEffect(function(){var e=function(){S(c.current?c.current.currentTime/c.current.duration*100:0),b(c.current?c.current.currentTime:0)};return c.current&&c.current.addEventListener("timeupdate",e),function(){return c.current?c.current.removeEventListener("timeupdate",e):void 0}},[c,b]);var _=l.useState(0),W=_[0],j=_[1];l.useEffect(function(){var e=function(){return j(c.current?c.current.duration:0)};return c.current&&c.current.addEventListener("loadeddata",e),function(){return c.current?c.current.removeEventListener("loadeddata",e):void 0}},[c,j]);var q=l.useRef(null);return l.useEffect(function(){var e=function(e){39===e.keyCode&&document.activeElement===q.current&&c.current&&(c.current.currentTime+=15),37===e.keyCode&&document.activeElement===q.current&&c.current&&(c.current.currentTime-=15)};return document.addEventListener("keydown",e),function(){return document.removeEventListener("keydown",e)}},[c,q]),n.createElement("figure",{className:h,"data-atom-id":t,"data-atom-type":"audio"},n.createElement("div",{className:f},n.createElement("div",{className:a.css({name:"1k6uwis-className",styles:"padding-left:5px;;label:className;"})},n.createElement("span",{className:x(o)},i),n.createElement("h4",{className:y},s)),n.createElement("div",{className:E},n.createElement("audio",{className:v,src:r,ref:c,"data-duration":W,"data-media-id":t||"_no_ids","data-title":y},n.createElement("p",null,"Sorry your browser does not support audio - but you can download here and listen https://audio.guim.co.uk/2020/05/05-61553-gnl.fw.200505.jf.ch7DW.mp3")),n.createElement("div",{className:k},m?n.createElement(L,{pillar:o,onClick:function(){u(!1),c.current&&c.current.pause()}}):n.createElement(M,{pillar:o,onClick:function(){c.current&&c.current.play(),u(!0)}})),n.createElement("div",{className:T},n.createElement("div",{className:C},n.createElement("span",{className:D},z(g))),n.createElement("div",{className:H},n.createElement("input",{className:A(o),ref:q,type:"range",min:"0",max:"100",step:"1",value:N,onClick:function(e){c.current&&(c.current.currentTime=c.current.duration/100*(e.nativeEvent.offsetX/e.currentTarget.offsetWidth*100))}})),n.createElement("div",{className:I},n.createElement("span",{className:D},z(W)))))))},exports.ChartAtom=function(e){var t=e.id,l=e.html;return n.createElement("div",{"data-atom-id":t,"data-testid":"chart","data-atom-type":"chart","data-snippet-type":"chart",className:a.css("padding-bottom:",i.space[1],"px;margin-bottom:",i.space[2],"px;;label:className;")},n.createElement("iframe",{className:"atom__iframe",name:t,srcDoc:l,width:"100%",frameBorder:"0"}))},exports.ExplainerAtom=function(e){var t=e.html;return n.createElement(u,{id:e.id},n.createElement(p,{title:e.title}),n.createElement(g,{html:t}))},exports.GuideAtom=function(e){var t=e.pillar,a=e.likeHandler,l=e.dislikeHandler;return n.createElement(V,{id:e.id,title:e.title,pillar:t,atomType:"guide",atomTypeTitle:"Quick Guide",expandForStorybook:e.expandForStorybook,expandCallback:e.expandCallback},n.createElement(Z,{html:e.html,image:e.image,credit:e.credit,pillar:t}),n.createElement(F,{pillar:t,dislikeHandler:l,likeHandler:a}))},exports.InteractiveAtom=function(e){return n.createElement("figure",{className:ee,"data-atom-id":e.id,"data-atom-type":"interactive"},n.createElement("iframe",{className:te,srcDoc:$({js:e.js,css:e.css,html:e.html}),frameBorder:"0"}))},exports.ProfileAtom=function(e){var t=e.pillar,a=e.likeHandler,l=e.dislikeHandler;return n.createElement(V,{id:e.id,title:e.title,pillar:t,atomType:"profile",atomTypeTitle:"Profile",expandForStorybook:e.expandForStorybook,expandCallback:e.expandCallback},n.createElement(Z,{html:e.html,image:e.image,credit:e.credit,pillar:t}),n.createElement(F,{pillar:t,dislikeHandler:l,likeHandler:a}))},exports.QandaAtom=function(e){var t=e.pillar,a=e.likeHandler,l=e.dislikeHandler;return n.createElement(V,{id:e.id,title:e.title,atomType:"qanda",atomTypeTitle:"Q&A",pillar:t,expandForStorybook:e.expandForStorybook,expandCallback:e.expandCallback},n.createElement(Z,{html:e.html,image:e.image,credit:e.credit,pillar:t}),n.createElement(F,{pillar:t,likeHandler:a,dislikeHandler:l}))},exports.QuizAtom=function(e){return n.createElement("form",{"data-atom-id":e.id},e.questions.map(function(e,t){return n.createElement(ve,{key:e.id,id:e.id,number:t+1,text:e.text,imageUrl:e.imageUrl,answers:e.answers})}))},exports.TimelineAtom=function(e){var t=e.events,a=e.description,l=e.pillar,r=e.likeHandler,i=e.dislikeHandler;return n.createElement(V,{atomType:"timeline",atomTypeTitle:"Timeline",id:e.id,pillar:l,expandForStorybook:e.expandForStorybook,title:e.title,expandCallback:e.expandCallback},a&&n.createElement(Z,{html:a,pillar:l}),t&&n.createElement(Te,{events:t,pillar:l}),n.createElement(F,{pillar:l,dislikeHandler:i,likeHandler:r}))},exports.YoutubeAtom=function(e){var t=e.format,a=e.videoMeta,l=e.overlayImage,r=e.adTargeting,i=e.height,s=void 0===i?259:i,o=e.width,c=void 0===o?460:o,d=e.title,m=void 0===d?"YouTube video player":d,u=e.duration,p=r&&JSON.stringify(function(e){return{adsConfig:{adTagParameters:{iu:""+(e.adUnit||""),cust_params:encodeURIComponent((t=e.customParams,Object.keys(t).map(function(e){var a=t[e];return e+"="+(Array.isArray(a)?a.map(function(e){return encodeURIComponent(e)}).join(","):encodeURIComponent(a))}).join("&")))}}};var t}(r));return n.createElement("div",null,n.createElement(oe,{height:s,width:c},l&&n.createElement(se,{image:l,pillar:t.pillar,duration:u}),n.createElement("iframe",{title:m,width:c,height:s,src:"https://www.youtube.com/embed/"+a.assetId+"?embed_config="+p+"&enablejsapi=1&origin=https://www.theguardian.com&widgetid=1&modestbranding=1"})))};
 //# sourceMappingURL=index.js.map

dist/index.modern.js

@@ -1,2 +0,2 @@
-import{css as e,cx as t}from"emotion";import a,{useRef as l,useState as r,useEffect as n}from"react";import{headline as i,textSans as s,body as o}from"@guardian/src-foundations/typography";import{space as m,palette as d,brandAlt as c,neutral as p,remSpace as u}from"@guardian/src-foundations";import{text as g,neutral as b,news as h,opinion as y,sport as x,culture as f,lifestyle as E}from"@guardian/src-foundations/palette";import{focusHalo as k,visuallyHidden as v}from"@guardian/src-foundations/accessibility";import{news as w,lifestyle as N,culture as S,sport as T,opinion as C,neutral as H}from"@guardian/src-foundations/palette/";import{SvgPlus as D,SvgMinus as I,SvgInfo as L,SvgVideo as z,SvgCheckmark as W,SvgCross as _}from"@guardian/src-icons";import{renderToString as M}from"react-dom/server";const j=({id:t,children:l})=>a.createElement("figure",{"data-atom-id":t,"data-atom-type":"explainer",className:e("padding-bottom:",m[1],"px;padding-left:",m[2],"px;padding-right:",m[2],"px;border-top:1px solid ",g.primary,";color:",g.primary,";background:",b[97],";p{margin-top:",m[3],"px;margin-bottom:",m[3],"px;};label:className;")},l),F=({title:t})=>a.createElement("h3",{className:e(i.xxsmall({fontWeight:"bold"})," margin-top:",m[2],"px;;label:className;")},t),P=({html:t})=>a.createElement("div",{className:e(s.small({fontWeight:"light",lineHeight:"tight"}),";label:className;"),dangerouslySetInnerHTML:{__html:t}}),B=({id:e,title:t,html:l})=>a.createElement(j,{id:e},a.createElement(F,{title:t}),a.createElement(P,{html:l})),A={0:h,1:y,2:x,3:f,4:E},q=e("border-image:repeating-linear-gradient( to bottom,",d.neutral[86],",",d.neutral[86]," 1px,transparent 1px,transparent 4px ) 13;border-top:13px solid black;background-color:",d.neutral[97],";position:relative;padding-left:5px;padding-right:5px;padding-bottom:1px;margin:16px 0 36px;;label:wrapperStyles;"),U=e({name:"e7wosl-figureStyle",styles:"width:100%;;label:figureStyle;"}),$=t=>e("color:",A[t].main,";",i.xxxsmall({fontWeight:"bold"}),";"),O=e(i.xxxsmall(),";;label:titleStyle;"),R=e({name:"hi1fzf-audioBodyStyle",styles:"display:flex;overflow:hidden;;label:audioBodyStyle;"}),K=e({name:"19itewg-audioElementStyle",styles:"height:0;vertical-align:baseline;width:300px;;label:audioElementStyle;"}),Q=e({name:"1pgsral-audioControlsStyle",styles:"box-sizing:content-box;padding:5px;width:50px;height:55px;;label:audioControlsStyle;"}),V=e("padding:0;border:0;outline:0;cursor:pointer;background-color:transparent;:focus{",k,"};label:buttonStyle;"),Y=e({name:"hkgkch-svgPlayStyle",styles:"fill:currentColor;overflow:hidden;width:50px;height:auto;;label:svgPlayStyle;"}),G=e({name:"srizkq-svgPauseStyle",styles:"fill:currentColor;overflow:hidden;width:50px;height:auto;;label:svgPauseStyle;"}),J=e({name:"1qy05o4-timingStyle",styles:"align-items:center;display:flex;flex:1;;label:timingStyle;"}),X=e({name:"vz6asm-timePlayedStyle",styles:"min-width:75px;padding-top:6px;display:block;;label:timePlayedStyle;"}),Z=e({name:"jhr1l0-progressBarStyle",styles:"flex:1;display:block;;label:progressBarStyle;"}),ee=t=>e("width:100%;appearance:none;background-image:linear-gradient( to right,",A[t].main," 0%,",d.neutral[60]," 0% );height:6px;outline:0;cursor:pointer;margin-left:0;margin-right:0;:focus{",k,"}"),te=e({name:"wzt3b5-timeDurationStyle",styles:"min-width:65px;padding-top:6px;padding-left:10px;display:block;;label:timeDurationStyle;"}),ae=e(s.small(),";label:timeStyles;"),le=e=>e.toFixed(0).padStart(2,"0"),re=e=>{const t=Math.floor(e%60),a=Math.floor(e%3600/60),l=Math.floor(e/3600);return`${le(l)}:${le(a)}:${le(t)}`},ne=({onClick:e,pillar:t})=>a.createElement("button",{"data-testid":"pause-button",onClick:e,className:V},a.createElement("svg",{className:G,width:"30px",height:"30px",viewBox:"0 0 30 30"},a.createElement("g",{fill:"none",fillRule:"evenodd"},a.createElement("circle",{fill:A[t].main,cx:"15",cy:"15",r:"15"}),a.createElement("path",{d:"M9.429 7.286h3.429v15.429h-3.43zm7.286 0h3.429v15.429h-3.43z",fill:d.neutral[100]})))),ie=({onClick:e,pillar:t})=>a.createElement("button",{"data-testid":"play-button",onClick:e,className:V},a.createElement("svg",{className:Y,width:"30px",height:"30px",viewBox:"0 0 30 30"},a.createElement("g",{fill:"none",fillRule:"evenodd"},a.createElement("circle",{fill:A[t].main,cx:"15",cy:"15",r:"15"}),a.createElement("path",{fill:d.neutral[100],d:"M10.113 8.571l-.47.366V20.01l.472.347 13.456-5.593v-.598z"})))),se=({id:t,trackUrl:i,kicker:s,title:o,pillar:m})=>{const d=l(null),[c,p]=r(!1),[u,g]=r(0),[b,h]=r(0);n(()=>{const e=()=>{h(d.current?d.current.currentTime/d.current.duration*100:0),g(d.current?d.current.currentTime:0)};return d.current&&d.current.addEventListener("timeupdate",e),()=>d.current?d.current.removeEventListener("timeupdate",e):void 0},[d,g]);const[y,x]=r(0);n(()=>{const e=()=>x(d.current?d.current.duration:0);return d.current&&d.current.addEventListener("loadeddata",e),()=>d.current?d.current.removeEventListener("loadeddata",e):void 0},[d,x]),n(()=>{c?d.current&&d.current.play():d.current&&d.current.pause()},[c,d]);const f=l(null);return n(()=>{const e=e=>{39===e.keyCode&&document.activeElement===f.current&&d.current&&(d.current.currentTime+=15),37===e.keyCode&&document.activeElement===f.current&&d.current&&(d.current.currentTime-=15)};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[d,f]),a.createElement("figure",{className:U,"data-atom-id":t,"data-atom-type":"audio"},a.createElement("div",{className:q},a.createElement("div",{className:e({name:"1k6uwis-className",styles:"padding-left:5px;;label:className;"})},a.createElement("span",{className:$(m)},s),a.createElement("h4",{className:O},o)),a.createElement("div",{className:R},a.createElement("audio",{className:K,src:i,ref:d,"data-duration":y,"data-media-id":t,"data-title":O},a.createElement("p",null,"Sorry your browser does not support audio - but you can download here and listen https://audio.guim.co.uk/2020/05/05-61553-gnl.fw.200505.jf.ch7DW.mp3")),a.createElement("div",{className:Q},c?a.createElement(ne,{pillar:m,onClick:()=>p(!1)}):a.createElement(ie,{pillar:m,onClick:()=>p(!0)})),a.createElement("div",{className:J},a.createElement("div",{className:X},a.createElement("span",{className:ae},re(u))),a.createElement("div",{className:Z},a.createElement("input",{className:ee(m),ref:f,type:"range",min:"0",max:"100",step:"1",value:b,onClick:e=>{d.current&&(d.current.currentTime=d.current.duration/100*(e.nativeEvent.offsetX/e.currentTarget.offsetWidth*100))}})),a.createElement("div",{className:te},a.createElement("span",{className:ae},re(y)))))))},oe=({id:t,html:l})=>a.createElement("div",{"data-atom-id":t,"data-testid":"chart","data-atom-type":"chart","data-snippet-type":"chart",className:e("padding-bottom:",m[1],"px;margin-bottom:",m[2],"px;;label:className;")},a.createElement("iframe",{className:"atom__iframe",name:t,srcDoc:l,width:"100%",frameBorder:"0"}));function me(e,t){switch(e){case"opinion":return C[t];case"sport":return T[t];case"culture":return S[t];case"lifestyle":return N[t];case"news":return w[t];default:return w[400]}}const de=e({name:"dc74hn-footerStyling",styles:"font-size:13px;line-height:16px;display:flex;justify-content:flex-end;;label:footerStyling;"}),ce=()=>a.createElement("svg",{className:e({name:"15k23p-className",styles:"width:16px;height:16px;;label:className;"}),viewBox:"0 0 40 40"},a.createElement("path",{fill:"#FFF",d:"M33.78 22.437l-4.228 13.98L27.93 37.5 5.062 34.14V15.503l7.8-1.517L24.354 2.5h1.624L28.9 5.426l-4.548 8.67h.107l10.477 1.31"})),pe=({pillar:l,likeHandler:n,dislikeHandler:i})=>{const o=e("display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background:black;color:white;border-style:hidden;border-radius:100%;margin:0 0 0 5px;padding:0;width:28px;height:28px;:hover{background:",me(l,400),";}:focus{border:none;};label:buttonStyling;"),[m,d]=r(!1);return a.createElement("footer",{className:de},a.createElement("div",{hidden:m},a.createElement("div",{className:e("display:flex;align-items:center;",s.xsmall(),";;label:className;")},a.createElement("div",null,"Was this helpful?"),a.createElement("button",{"data-testid":"like",className:o,onClick:()=>{n(),d(!0)}},a.createElement(ce,null)),a.createElement("button",{className:t(o,e({name:"13tfp3m-className",styles:"transform:rotate(180deg);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);;label:className;"})),"data-testid":"dislike",onClick:()=>{i(),d(!0)}},a.createElement(ce,null)))),a.createElement("div",{className:e(s.xsmall(),";height:28px;;label:className;"),"data-testid":"feedback",hidden:!m},"Thank you for your feedback."))},ue=e(i.xxxsmall({fontWeight:"medium"}),";margin:0;line-height:22px;;label:titleStyling;"),ge=e({name:"kd64v9-plusStyling",styles:"margin-right:12px;margin-bottom:6px;width:33px;fill:white;height:28px;;label:plusStyling;"}),be=e({name:"16egkfy-minusStyling",styles:"margin-right:14px;margin-bottom:6px;width:30px;fill:white;height:25px;padding-left:4px;;label:minusStyling;"}),he=e("display:inline-flex;align-items:center;",s.small(),";;label:iconSpacing;"),ye=({sectionTitle:t,title:l,pillar:n,expandCallback:i})=>{const s=e("display:block;",o.medium({lineHeight:"tight",fontWeight:"bold"}),";color:",me(n,400),";;label:atomTitleStyling;"),m=e("background:",H[7],";color:",H[100],";height:2rem;position:absolute;bottom:0;transform:translate(0,50%);padding:0 15px 0 7px;border-radius:100em;cursor:pointer;display:inline-flex;align-items:center;border:0;margin:0;:hover{background:",me(n,400),";};label:showHideStyling;"),[d,c]=r(!1),[p,u]=r(!1);return a.createElement("summary",{onClick:()=>{p||(i(),u(!0)),c(!d)}},a.createElement("span",{className:s},t),a.createElement("h4",{className:ue},l),a.createElement("span",{className:m},d?a.createElement("span",{className:he},a.createElement("span",{className:be},a.createElement(I,null)),"Hide"):a.createElement("span",{className:he},a.createElement("span",{className:ge},a.createElement(D,null)),"Show")))},xe=e({name:"cq3eyp-containerStyling",styles:"display:block;position:relative;margin-bottom:0.75rem;margin-top:1rem;;label:containerStyling;"}),fe=e("margin:16px 0 36px;background:",b[93],";color:",g.primary,";padding:0 5px 6px;border-image:repeating-linear-gradient( to bottom,",b[86],",",b[86]," 1px,transparent 1px,transparent 4px ) 13;border-top:13px solid black;position:relative;summary{list-style:none;margin:0 0 16px;}summary::-webkit-details-marker{display:none;}summary:focus{outline:none;};label:detailStyling;"),Ee=({id:e,title:t,children:l,pillar:r,expandForStorybook:n,atomType:i,atomTypeTitle:s,expandCallback:o})=>a.createElement("div",{className:xe,"data-atom-id":e,"data-atom-type":i},a.createElement("details",{className:fe,"data-atom-id":e,"data-snippet-type":i,open:n},a.createElement(ye,{sectionTitle:s,pillar:r,title:t,expandCallback:o}),l)),ke=e({name:"yngtwb-imageStyling",styles:".forceHeightAndWidth &{width:100px;height:100px;}float:left;margin-right:16px;margin-bottom:6px;object-fit:cover;border-radius:50%;display:block;border:0px;;label:imageStyling;"}),ve=e(s.xsmall(),";margin:12px 0;display:flex;align-items:center;svg{width:30px;fill:",b[60],";};label:creditStyling;"),we=e(o.medium()," p{margin-bottom:0.5rem;}ol{list-style:decimal;list-style-position:inside;margin-bottom:1rem;}ul{list-style:none;margin:0 0 0.75rem;padding:0;margin-bottom:1rem;}ul li{margin-bottom:0.375rem;padding-left:1.25rem;}ul li:before{display:inline-block;content:'';border-radius:0.375rem;height:0.75rem;width:0.75rem;margin-right:0.5rem;background-color:",b[86],";margin-left:-1.25rem;}b{font-weight:700;}i{font-style:italic;};label:bodyStyling;"),Ne=t=>e("a{color:",me(t,300),";text-decoration:none;border-bottom:0.0625rem solid ",b[86],";transition:border-color 0.15s ease-out;}a:hover{border-bottom:solid 0.0625rem ",me(t,400),";}"),Se=({html:e,image:l,credit:r,pillar:n})=>a.createElement("div",null,l&&a.createElement("span",{className:"forceHeightAndWidth"},a.createElement("img",{className:ke,src:l,alt:""})),a.createElement("div",{className:t(we,Ne(n)),dangerouslySetInnerHTML:{__html:e}}),r&&a.createElement("div",{className:ve},a.createElement(L,null),r)),Te=({id:e,title:t,image:l,html:r,credit:n,pillar:i,expandForStorybook:s,likeHandler:o,dislikeHandler:m,expandCallback:d})=>a.createElement(Ee,{id:e,title:t,pillar:i,atomType:"guide",atomTypeTitle:"Quick Guide",expandForStorybook:s,expandCallback:d},a.createElement(Se,{html:r,image:l,credit:n,pillar:i}),a.createElement(pe,{pillar:i,dislikeHandler:m,likeHandler:o})),Ce=({css:e,js:t,html:l})=>M(a.createElement("html",null,a.createElement("head",null,a.createElement("meta",{charSet:"utf-8"}),a.createElement("meta",{name:"viewport",content:"width=device-width,minimum-scale=1,initial-scale=1"}),e&&a.createElement("style",{dangerouslySetInnerHTML:{__html:e}})),a.createElement("body",null,l&&a.createElement("div",{dangerouslySetInnerHTML:{__html:l}})),a.createElement("script",{dangerouslySetInnerHTML:{__html:t}}),a.createElement("script",{dangerouslySetInnerHTML:{__html:"\n                            function resize() {\n                                window.frameElement.height = document.body.offsetHeight;\n                            }\n                            window.addEventListener('resize', resize);\n                            resize();\n                        "}}),a.createElement("script",{dangerouslySetInnerHTML:{__html:"\n                            var fonts = [].slice.apply(window.parent.document.styleSheets)\n                                .filter(function (sheet) { return sheet.ownerNode.className.indexOf(\"webfont\") > - 1; })\n                                .map(function (sheet) { return sheet.ownerNode.textContent; })\n                                .join(' ');\n                            var css = document.createElement('style');\n                            css.textContent = fonts;\n                            document.head.appendChild(css);\n                        "}}))),He=e({name:"xc14i8-figureStyles",styles:"margin:0;;label:figureStyles;"}),De=e({name:"ta2q8u-fullWidthStyles",styles:"width:100%;;label:fullWidthStyles;"}),Ie=({id:e,html:t,js:l,css:r})=>a.createElement("figure",{className:He,"data-atom-id":e,"data-atom-type":"interactive"},a.createElement("iframe",{className:De,srcDoc:Ce({js:l,css:r,html:t}),frameBorder:"0"})),Le=t=>e("width:24px;height:23px;background-color:",0===t?A[t].bright:A[t].main,";border-radius:50%;display:inline-block;> svg{width:14px;height:auto;margin-left:auto;margin-right:auto;margin-top:6px;display:block;transform:translateY(0.0625rem);}"),ze=t=>e("color:",0===t?A[t].bright:A[t].main,";",s.xsmall({fontWeight:"bold"})),We=e({name:"o2wys0-wrapperStyles",styles:"display:flex;align-items:center;padding:0 5px 5px 5px;;label:wrapperStyles;"}),_e=({pillar:e})=>a.createElement("span",{className:Le(e)},a.createElement(z,null)),Me=({mediaDuration:e,pillar:t})=>a.createElement("p",{className:ze(t)},(e=>{if(void 0===e||0===e)return"";const t=Number(e),a=Math.floor(t/3600),l=Math.floor(t%3600/60),r=Math.floor(t%3600%60),n=[];return a>0&&n.push(a),(l>0||0===a)&&n.push(l),r>0&&n.push(r),n.join(":")})(e)),je=({mediaDuration:e,pillar:t})=>a.createElement("div",{className:We},a.createElement(_e,{pillar:t})," ",e&&a.createElement(Me,{mediaDuration:e,pillar:t})),Fe=t=>e("background-image:url(",t,");background-size:cover;background-position:49% 49%;background-repeat:no-repeat;z-index:0;text-align:center;height:100%;width:100%;position:absolute;max-height:100vh;cursor:pointer;"),Pe=({children:t})=>a.createElement("div",{className:e("position:absolute;bottom:",m[3],";left:",m[3],";;label:className;")},t),Be=({image:e,pillar:t,duration:l})=>a.createElement("div",{className:Fe(e)},a.createElement(Pe,null,a.createElement(je,{mediaDuration:l,pillar:t}))),Ae=({height:t,width:l,children:r})=>a.createElement("div",{className:e("position:relative;padding-bottom:",t/l*100,"%;iframe{width:100%;height:100%;position:absolute;top:0;left:0;};label:className;")},r),qe=({format:e,videoMeta:t,overlayImage:l,adTargeting:r,height:n=259,width:i=460,title:s="YouTube video player",duration:o})=>{const m=r&&JSON.stringify((e=>{return{adsConfig:{adTagParameters:{iu:""+(e.adUnit||""),cust_params:encodeURIComponent((t=e.customParams,Object.keys(t).map(e=>{const a=t[e];return`${e}=${Array.isArray(a)?a.map(e=>encodeURIComponent(e)).join(","):encodeURIComponent(a)}`}).join("&")))}}};var t})(r));return a.createElement("div",null,a.createElement(Ae,{height:n,width:i},l&&a.createElement(Be,{image:l,pillar:e.pillar,duration:o}),a.createElement("iframe",{title:s,width:i,height:n,src:`https://www.youtube.com/embed/${t.assetId}?embed_config=${m}&enablejsapi=1&origin=https://www.theguardian.com&widgetid=1&modestbranding=1`})))},Ue=({id:e,title:t,image:l,html:r,credit:n,pillar:i,expandForStorybook:s,likeHandler:o,dislikeHandler:m,expandCallback:d})=>a.createElement(Ee,{id:e,title:t,pillar:i,atomType:"profile",atomTypeTitle:"Profile",expandForStorybook:s,expandCallback:d},a.createElement(Se,{html:r,image:l,credit:n,pillar:i}),a.createElement(pe,{pillar:i,dislikeHandler:m,likeHandler:o})),$e=({id:e,title:t,image:l,html:r,credit:n,pillar:i,expandForStorybook:s,likeHandler:o,dislikeHandler:m,expandCallback:d})=>a.createElement(Ee,{id:e,title:t,atomType:"qanda",atomTypeTitle:"Q&A",pillar:i,expandForStorybook:s,expandCallback:d},a.createElement(Se,{html:r,image:l,credit:n,pillar:i}),a.createElement(pe,{pillar:i,likeHandler:o,dislikeHandler:m})),Oe=e("height:26px;svg{fill:",b[100],";height:26px;width:26px;};label:iconStyle;"),Re=e({name:"kvx5ty-answerWrapperStyles",styles:"display:flex;flex-direction:row;margin-bottom:6px;padding-top:12px;padding-bottom:12px;padding-left:20px;padding-right:20px;;label:answerWrapperStyles;"}),Ke=e(":hover{background-color:",b[86],";cursor:pointer;}:focus{background-color:",b[86],";",k,"};label:selectableAnswerStyles;"),Qe=t=>e(o.medium(),";background-color:",b[97],";",t?"":Ke," ",Re," padding-left:28px;"),Ve=({id:t,onClick:l,disabled:r,answerText:n,onKeyPress:i})=>a.createElement("div",null,a.createElement("label",{className:Qe(r),onKeyPress:i,tabIndex:r?-1:0,htmlFor:"answer-"+t,"data-answerType":r?"unselected-disabled-answer":"unselected-enabled-answer",id:t,"data-testId":t},n),a.createElement("input",{type:"radio",tabIndex:-1,required:!0,id:"answer-"+t,onClick:l,disabled:r,className:e(v,";;label:className;")})),Ye=e("color:",b[100],";padding-left:8px;display:flex;flex-direction:column;;label:correctSelectedAnswerStyles;"),Ge=({answerText:t,explainerText:l,id:r})=>a.createElement("div",{className:e(Re," background-color:rgb(61,181,64);;label:className;")},a.createElement("div",{className:Oe},a.createElement(W,null)),a.createElement("label",{className:Ye,id:r,"data-testId":r,"data-answerType":"correct-selected-answer"},a.createElement("span",{className:e(o.medium(),";;label:className;")},t),a.createElement("span",{className:e(s.xsmall(),";label:className;")},l))),Je=e("color:",b[0],";padding-left:8px;display:flex;flex-direction:column;;label:nonSelectedCorrectAnswerLabelStyles;"),Xe=({answerText:t,explainerText:l,id:r})=>a.createElement("div",{className:e(Re," background-color:rgb(61,181,64,0.6);;label:className;")},a.createElement("label",{className:Je,id:r,"data-testId":r,"data-answerType":"non-selected-correct-answer"},a.createElement("span",{className:e(o.medium(),";;label:className;")},t),a.createElement("span",{className:e(s.xsmall(),";label:className;")},l))),Ze=e("color:",b[100],";padding-left:8px;display:flex;flex-direction:column;",o.medium(),";;label:incorrectAnswerLabelStyles;"),et=({answerText:t,id:l})=>a.createElement("div",{className:e(Re," background-color:",h[400],";;label:className;")},a.createElement("div",{className:Oe},a.createElement(_,null)),a.createElement("label",{className:Ze,id:l,"data-testId":l,"data-answerType":"incorrect-answer"},t)),tt=e({name:"1usw75q-fieldsetStyle",styles:"margin-bottom:12px;border:0px;padding:0px;;label:fieldsetStyle;"}),at=({id:e,questions:t})=>a.createElement("form",{"data-atom-id":e},t.map((e,t)=>a.createElement(lt,{key:e.id,id:e.id,number:t+1,text:e.text,imageUrl:e.imageUrl,answers:e.answers}))),lt=({text:t,imageUrl:l,answers:n,number:i})=>{const[s,m]=r(void 0);return a.createElement("div",{className:e(o.medium(),";;label:className;")},a.createElement("fieldset",{className:tt},a.createElement("div",null,a.createElement("legend",{className:e({name:"19e1jvj-className",styles:"margin-bottom:12px;;label:className;"})},a.createElement("span",{className:e({name:"1kbwa6u-className",styles:"padding-right:12px;;label:className;"})},i+"."),t)),l&&a.createElement("img",{className:e({name:"17mnt1y-className",styles:"width:100%;;label:className;"}),src:l}),a.createElement("div",{className:e({name:"w284zz-className",styles:"position:relative;;label:className;"})},n.map((e,t)=>{const l=void 0!==s;if(l){if(s===e.id){if(e.isCorrect)return a.createElement(Ge,{id:e.id,answerText:e.text,explainerText:e.revealText||""});if(!e.isCorrect)return a.createElement(et,{id:e.id,answerText:e.text})}return e.isCorrect?a.createElement(Xe,{id:e.id,answerText:e.text,explainerText:e.revealText||""}):a.createElement(Ve,{id:e.id,disabled:!0,answerText:e.text})}return a.createElement(Ve,{id:e.id,disabled:!1,answerText:e.text,onClick:()=>m(e.id),onKeyPress:t=>{"Enter"!==t.key||l||m(e.id)}})}))))},rt=e(":not(:last-child){border-left:0.0625rem solid ",p[60],";padding-bottom:",u[4],";}padding-left:",m[4],"px;margin-left:",m[2],"px;;label:Snippet;"),nt=e(o.medium({lineHeight:"tight",fontWeight:"bold"}),";;label:EventTitle;"),it=e("::before{",e("content:'';width:",m[4],"px;height:",m[4],"px;border-radius:100%;float:left;position:relative;left:-24px;background-color:#121212;;label:EventDateBullet;"),"}margin-left:-16px;background:",c[400],";",o.medium({lineHeight:"tight",fontWeight:"bold"}),";;label:EventDate;"),st=e("background:",c[400],";",o.medium({lineHeight:"tight",fontWeight:"bold"}),";;label:EventToDate;"),ot=({events:e,pillar:t})=>a.createElement("div",null,e.map((e,l)=>{const r=new Date(Date.parse(e.date)).toISOString(),n=e.toDate?new Date(Date.parse(e.toDate)).toISOString():"";return a.createElement("div",{key:l,"data-type":"event-snippet",className:rt},a.createElement("div",null,a.createElement("time",{dateTime:r,className:it},e.date),e.toDate&&a.createElement("span",null," ","-"," ",a.createElement("time",{dateTime:n,className:st},e.toDate))),e.title&&a.createElement("div",{className:nt},e.title),e.body&&a.createElement(Se,{html:e.body,pillar:t}))})),mt=({id:e,events:t,description:l,title:r,pillar:n,expandForStorybook:i,likeHandler:s,dislikeHandler:o,expandCallback:m})=>a.createElement(Ee,{atomType:"timeline",atomTypeTitle:"Timeline",id:e,pillar:n,expandForStorybook:i,title:r,expandCallback:m},l&&a.createElement(Se,{html:l,pillar:n}),t&&a.createElement(ot,{events:t,pillar:n}),a.createElement(pe,{pillar:n,dislikeHandler:o,likeHandler:s}));export{se as AudioAtom,oe as ChartAtom,B as ExplainerAtom,Te as GuideAtom,Ie as InteractiveAtom,Ue as ProfileAtom,$e as QandaAtom,at as QuizAtom,mt as TimelineAtom,qe as YoutubeAtom};
+import{css as e,cx as t}from"emotion";import a,{useRef as l,useState as r,useEffect as n}from"react";import{headline as i,textSans as s,body as o}from"@guardian/src-foundations/typography";import{space as m,palette as d,brandAlt as c,neutral as p,remSpace as u}from"@guardian/src-foundations";import{text as g,neutral as b,news as h,opinion as y,sport as x,culture as f,lifestyle as E}from"@guardian/src-foundations/palette";import{focusHalo as k,visuallyHidden as v}from"@guardian/src-foundations/accessibility";import{news as w,lifestyle as N,culture as S,sport as T,opinion as C,neutral as H}from"@guardian/src-foundations/palette/";import{SvgPlus as D,SvgMinus as I,SvgInfo as _,SvgVideo as L,SvgCheckmark as z,SvgCross as W}from"@guardian/src-icons";import{renderToString as M}from"react-dom/server";const j=({id:t,children:l})=>a.createElement("figure",{"data-atom-id":t,"data-atom-type":"explainer",className:e("padding-bottom:",m[1],"px;padding-left:",m[2],"px;padding-right:",m[2],"px;border-top:1px solid ",g.primary,";color:",g.primary,";background:",b[97],";p{margin-top:",m[3],"px;margin-bottom:",m[3],"px;};label:className;")},l),F=({title:t})=>a.createElement("h3",{className:e(i.xxsmall({fontWeight:"bold"})," margin-top:",m[2],"px;;label:className;")},t),P=({html:t})=>a.createElement("div",{className:e(s.small({fontWeight:"light",lineHeight:"tight"}),";label:className;"),dangerouslySetInnerHTML:{__html:t}}),B=({id:e,title:t,html:l})=>a.createElement(j,{id:e},a.createElement(F,{title:t}),a.createElement(P,{html:l})),A={0:h,1:y,2:x,3:f,4:E},q=e("border-image:repeating-linear-gradient( to bottom,",d.neutral[86],",",d.neutral[86]," 1px,transparent 1px,transparent 4px ) 13;border-top:13px solid black;background-color:",d.neutral[97],";position:relative;padding-left:5px;padding-right:5px;padding-bottom:1px;margin:16px 0 36px;;label:wrapperStyles;"),U=e({name:"e7wosl-figureStyle",styles:"width:100%;;label:figureStyle;"}),$=t=>e("color:",A[t].main,";",i.xxxsmall({fontWeight:"bold"}),";"),O=e(i.xxxsmall(),";;label:titleStyle;"),R=e({name:"hi1fzf-audioBodyStyle",styles:"display:flex;overflow:hidden;;label:audioBodyStyle;"}),K=e({name:"19itewg-audioElementStyle",styles:"height:0;vertical-align:baseline;width:300px;;label:audioElementStyle;"}),Q=e({name:"1pgsral-audioControlsStyle",styles:"box-sizing:content-box;padding:5px;width:50px;height:55px;;label:audioControlsStyle;"}),V=e("padding:0;border:0;outline:0;cursor:pointer;background-color:transparent;:focus{",k,"};label:buttonStyle;"),Y=e({name:"hkgkch-svgPlayStyle",styles:"fill:currentColor;overflow:hidden;width:50px;height:auto;;label:svgPlayStyle;"}),G=e({name:"srizkq-svgPauseStyle",styles:"fill:currentColor;overflow:hidden;width:50px;height:auto;;label:svgPauseStyle;"}),J=e({name:"1qy05o4-timingStyle",styles:"align-items:center;display:flex;flex:1;;label:timingStyle;"}),X=e({name:"vz6asm-timePlayedStyle",styles:"min-width:75px;padding-top:6px;display:block;;label:timePlayedStyle;"}),Z=e({name:"jhr1l0-progressBarStyle",styles:"flex:1;display:block;;label:progressBarStyle;"}),ee=t=>e("width:100%;appearance:none;background-image:linear-gradient( to right,",A[t].main," 0%,",d.neutral[60]," 0% );height:6px;outline:0;cursor:pointer;margin-left:0;margin-right:0;:focus{",k,"}"),te=e({name:"wzt3b5-timeDurationStyle",styles:"min-width:65px;padding-top:6px;padding-left:10px;display:block;;label:timeDurationStyle;"}),ae=e(s.small(),";label:timeStyles;"),le=e=>e.toFixed(0).padStart(2,"0"),re=e=>{const t=Math.floor(e%60),a=Math.floor(e%3600/60),l=Math.floor(e/3600);return`${le(l)}:${le(a)}:${le(t)}`},ne=({onClick:e,pillar:t})=>a.createElement("button",{"data-testid":"pause-button",onClick:e,className:V},a.createElement("svg",{className:G,width:"30px",height:"30px",viewBox:"0 0 30 30"},a.createElement("g",{fill:"none",fillRule:"evenodd"},a.createElement("circle",{fill:A[t].main,cx:"15",cy:"15",r:"15"}),a.createElement("path",{d:"M9.429 7.286h3.429v15.429h-3.43zm7.286 0h3.429v15.429h-3.43z",fill:d.neutral[100]})))),ie=({onClick:e,pillar:t})=>a.createElement("button",{"data-testid":"play-button",onClick:e,className:V},a.createElement("svg",{className:Y,width:"30px",height:"30px",viewBox:"0 0 30 30"},a.createElement("g",{fill:"none",fillRule:"evenodd"},a.createElement("circle",{fill:A[t].main,cx:"15",cy:"15",r:"15"}),a.createElement("path",{fill:d.neutral[100],d:"M10.113 8.571l-.47.366V20.01l.472.347 13.456-5.593v-.598z"})))),se=({id:t,trackUrl:i,kicker:s,title:o,pillar:m})=>{const d=l(null),[c,p]=r(!1),[u,g]=r(0),[b,h]=r(0);n(()=>{const e=()=>{h(d.current?d.current.currentTime/d.current.duration*100:0),g(d.current?d.current.currentTime:0)};return d.current&&d.current.addEventListener("timeupdate",e),()=>d.current?d.current.removeEventListener("timeupdate",e):void 0},[d,g]);const[y,x]=r(0);n(()=>{const e=()=>x(d.current?d.current.duration:0);return d.current&&d.current.addEventListener("loadeddata",e),()=>d.current?d.current.removeEventListener("loadeddata",e):void 0},[d,x]);const f=l(null);return n(()=>{const e=e=>{39===e.keyCode&&document.activeElement===f.current&&d.current&&(d.current.currentTime+=15),37===e.keyCode&&document.activeElement===f.current&&d.current&&(d.current.currentTime-=15)};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[d,f]),a.createElement("figure",{className:U,"data-atom-id":t,"data-atom-type":"audio"},a.createElement("div",{className:q},a.createElement("div",{className:e({name:"1k6uwis-className",styles:"padding-left:5px;;label:className;"})},a.createElement("span",{className:$(m)},s),a.createElement("h4",{className:O},o)),a.createElement("div",{className:R},a.createElement("audio",{className:K,src:i,ref:d,"data-duration":y,"data-media-id":t||"_no_ids","data-title":O},a.createElement("p",null,"Sorry your browser does not support audio - but you can download here and listen https://audio.guim.co.uk/2020/05/05-61553-gnl.fw.200505.jf.ch7DW.mp3")),a.createElement("div",{className:Q},c?a.createElement(ne,{pillar:m,onClick:()=>{p(!1),d.current&&d.current.pause()}}):a.createElement(ie,{pillar:m,onClick:()=>{d.current&&d.current.play(),p(!0)}})),a.createElement("div",{className:J},a.createElement("div",{className:X},a.createElement("span",{className:ae},re(u))),a.createElement("div",{className:Z},a.createElement("input",{className:ee(m),ref:f,type:"range",min:"0",max:"100",step:"1",value:b,onClick:e=>{d.current&&(d.current.currentTime=d.current.duration/100*(e.nativeEvent.offsetX/e.currentTarget.offsetWidth*100))}})),a.createElement("div",{className:te},a.createElement("span",{className:ae},re(y)))))))},oe=({id:t,html:l})=>a.createElement("div",{"data-atom-id":t,"data-testid":"chart","data-atom-type":"chart","data-snippet-type":"chart",className:e("padding-bottom:",m[1],"px;margin-bottom:",m[2],"px;;label:className;")},a.createElement("iframe",{className:"atom__iframe",name:t,srcDoc:l,width:"100%",frameBorder:"0"}));function me(e,t){switch(e){case"opinion":return C[t];case"sport":return T[t];case"culture":return S[t];case"lifestyle":return N[t];case"news":return w[t];default:return w[400]}}const de=e({name:"dc74hn-footerStyling",styles:"font-size:13px;line-height:16px;display:flex;justify-content:flex-end;;label:footerStyling;"}),ce=()=>a.createElement("svg",{className:e({name:"15k23p-className",styles:"width:16px;height:16px;;label:className;"}),viewBox:"0 0 40 40"},a.createElement("path",{fill:"#FFF",d:"M33.78 22.437l-4.228 13.98L27.93 37.5 5.062 34.14V15.503l7.8-1.517L24.354 2.5h1.624L28.9 5.426l-4.548 8.67h.107l10.477 1.31"})),pe=({pillar:l,likeHandler:n,dislikeHandler:i})=>{const o=e("display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background:black;color:white;border-style:hidden;border-radius:100%;margin:0 0 0 5px;padding:0;width:28px;height:28px;:hover{background:",me(l,400),";}:focus{border:none;};label:buttonStyling;"),[m,d]=r(!1);return a.createElement("footer",{className:de},a.createElement("div",{hidden:m},a.createElement("div",{className:e("display:flex;align-items:center;",s.xsmall(),";;label:className;")},a.createElement("div",null,"Was this helpful?"),a.createElement("button",{"data-testid":"like",className:o,onClick:()=>{n(),d(!0)}},a.createElement(ce,null)),a.createElement("button",{className:t(o,e({name:"13tfp3m-className",styles:"transform:rotate(180deg);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);;label:className;"})),"data-testid":"dislike",onClick:()=>{i(),d(!0)}},a.createElement(ce,null)))),a.createElement("div",{className:e(s.xsmall(),";height:28px;;label:className;"),"data-testid":"feedback",hidden:!m},"Thank you for your feedback."))},ue=e(i.xxxsmall({fontWeight:"medium"}),";margin:0;line-height:22px;;label:titleStyling;"),ge=e({name:"kd64v9-plusStyling",styles:"margin-right:12px;margin-bottom:6px;width:33px;fill:white;height:28px;;label:plusStyling;"}),be=e({name:"16egkfy-minusStyling",styles:"margin-right:14px;margin-bottom:6px;width:30px;fill:white;height:25px;padding-left:4px;;label:minusStyling;"}),he=e("display:inline-flex;align-items:center;",s.small(),";;label:iconSpacing;"),ye=({sectionTitle:t,title:l,pillar:n,expandCallback:i})=>{const s=e("display:block;",o.medium({lineHeight:"tight",fontWeight:"bold"}),";color:",me(n,400),";;label:atomTitleStyling;"),m=e("background:",H[7],";color:",H[100],";height:2rem;position:absolute;bottom:0;transform:translate(0,50%);padding:0 15px 0 7px;border-radius:100em;cursor:pointer;display:inline-flex;align-items:center;border:0;margin:0;:hover{background:",me(n,400),";};label:showHideStyling;"),[d,c]=r(!1),[p,u]=r(!1);return a.createElement("summary",{onClick:()=>{p||(i(),u(!0)),c(!d)}},a.createElement("span",{className:s},t),a.createElement("h4",{className:ue},l),a.createElement("span",{className:m},d?a.createElement("span",{className:he},a.createElement("span",{className:be},a.createElement(I,null)),"Hide"):a.createElement("span",{className:he},a.createElement("span",{className:ge},a.createElement(D,null)),"Show")))},xe=e({name:"cq3eyp-containerStyling",styles:"display:block;position:relative;margin-bottom:0.75rem;margin-top:1rem;;label:containerStyling;"}),fe=e("margin:16px 0 36px;background:",b[93],";color:",g.primary,";padding:0 5px 6px;border-image:repeating-linear-gradient( to bottom,",b[86],",",b[86]," 1px,transparent 1px,transparent 4px ) 13;border-top:13px solid black;position:relative;summary{list-style:none;margin:0 0 16px;}summary::-webkit-details-marker{display:none;}summary:focus{outline:none;};label:detailStyling;"),Ee=({id:e,title:t,children:l,pillar:r,expandForStorybook:n,atomType:i,atomTypeTitle:s,expandCallback:o})=>a.createElement("div",{className:xe,"data-atom-id":e,"data-atom-type":i},a.createElement("details",{className:fe,"data-atom-id":e,"data-snippet-type":i,open:n},a.createElement(ye,{sectionTitle:s,pillar:r,title:t,expandCallback:o}),l)),ke=e({name:"yngtwb-imageStyling",styles:".forceHeightAndWidth &{width:100px;height:100px;}float:left;margin-right:16px;margin-bottom:6px;object-fit:cover;border-radius:50%;display:block;border:0px;;label:imageStyling;"}),ve=e(s.xsmall(),";margin:12px 0;display:flex;align-items:center;svg{width:30px;fill:",b[60],";};label:creditStyling;"),we=e(o.medium()," p{margin-bottom:0.5rem;}ol{list-style:decimal;list-style-position:inside;margin-bottom:1rem;}ul{list-style:none;margin:0 0 0.75rem;padding:0;margin-bottom:1rem;}ul li{margin-bottom:0.375rem;padding-left:1.25rem;}ul li:before{display:inline-block;content:'';border-radius:0.375rem;height:0.75rem;width:0.75rem;margin-right:0.5rem;background-color:",b[86],";margin-left:-1.25rem;}b{font-weight:700;}i{font-style:italic;};label:bodyStyling;"),Ne=t=>e("a{color:",me(t,300),";text-decoration:none;border-bottom:0.0625rem solid ",b[86],";transition:border-color 0.15s ease-out;}a:hover{border-bottom:solid 0.0625rem ",me(t,400),";}"),Se=({html:e,image:l,credit:r,pillar:n})=>a.createElement("div",null,l&&a.createElement("span",{className:"forceHeightAndWidth"},a.createElement("img",{className:ke,src:l,alt:""})),a.createElement("div",{className:t(we,Ne(n)),dangerouslySetInnerHTML:{__html:e}}),r&&a.createElement("div",{className:ve},a.createElement(_,null),r)),Te=({id:e,title:t,image:l,html:r,credit:n,pillar:i,expandForStorybook:s,likeHandler:o,dislikeHandler:m,expandCallback:d})=>a.createElement(Ee,{id:e,title:t,pillar:i,atomType:"guide",atomTypeTitle:"Quick Guide",expandForStorybook:s,expandCallback:d},a.createElement(Se,{html:r,image:l,credit:n,pillar:i}),a.createElement(pe,{pillar:i,dislikeHandler:m,likeHandler:o})),Ce=({css:e,js:t,html:l})=>M(a.createElement("html",null,a.createElement("head",null,a.createElement("meta",{charSet:"utf-8"}),a.createElement("meta",{name:"viewport",content:"width=device-width,minimum-scale=1,initial-scale=1"}),e&&a.createElement("style",{dangerouslySetInnerHTML:{__html:e}})),a.createElement("body",null,l&&a.createElement("div",{dangerouslySetInnerHTML:{__html:l}})),a.createElement("script",{dangerouslySetInnerHTML:{__html:t}}),a.createElement("script",{dangerouslySetInnerHTML:{__html:"\n                            function resize() {\n                                window.frameElement.height = document.body.offsetHeight;\n                            }\n                            window.addEventListener('resize', resize);\n                            resize();\n                        "}}),a.createElement("script",{dangerouslySetInnerHTML:{__html:"\n                            var fonts = [].slice.apply(window.parent.document.styleSheets)\n                                .filter(function (sheet) { return sheet.ownerNode.className.indexOf(\"webfont\") > - 1; })\n                                .map(function (sheet) { return sheet.ownerNode.textContent; })\n                                .join(' ');\n                            var css = document.createElement('style');\n                            css.textContent = fonts;\n                            document.head.appendChild(css);\n                        "}}))),He=e({name:"xc14i8-figureStyles",styles:"margin:0;;label:figureStyles;"}),De=e({name:"ta2q8u-fullWidthStyles",styles:"width:100%;;label:fullWidthStyles;"}),Ie=({id:e,html:t,js:l,css:r})=>a.createElement("figure",{className:He,"data-atom-id":e,"data-atom-type":"interactive"},a.createElement("iframe",{className:De,srcDoc:Ce({js:l,css:r,html:t}),frameBorder:"0"})),_e=t=>e("width:24px;height:23px;background-color:",0===t?A[t].bright:A[t].main,";border-radius:50%;display:inline-block;> svg{width:14px;height:auto;margin-left:auto;margin-right:auto;margin-top:6px;display:block;transform:translateY(0.0625rem);}"),Le=t=>e("color:",0===t?A[t].bright:A[t].main,";",s.xsmall({fontWeight:"bold"})),ze=e({name:"o2wys0-wrapperStyles",styles:"display:flex;align-items:center;padding:0 5px 5px 5px;;label:wrapperStyles;"}),We=({pillar:e})=>a.createElement("span",{className:_e(e)},a.createElement(L,null)),Me=({mediaDuration:e,pillar:t})=>a.createElement("p",{className:Le(t)},(e=>{if(void 0===e||0===e)return"";const t=Number(e),a=Math.floor(t/3600),l=Math.floor(t%3600/60),r=Math.floor(t%3600%60),n=[];return a>0&&n.push(a),(l>0||0===a)&&n.push(l),r>0&&n.push(r),n.join(":")})(e)),je=({mediaDuration:e,pillar:t})=>a.createElement("div",{className:ze},a.createElement(We,{pillar:t})," ",e&&a.createElement(Me,{mediaDuration:e,pillar:t})),Fe=t=>e("background-image:url(",t,");background-size:cover;background-position:49% 49%;background-repeat:no-repeat;z-index:0;text-align:center;height:100%;width:100%;position:absolute;max-height:100vh;cursor:pointer;"),Pe=({children:t})=>a.createElement("div",{className:e("position:absolute;bottom:",m[3],";left:",m[3],";;label:className;")},t),Be=({image:e,pillar:t,duration:l})=>a.createElement("div",{className:Fe(e)},a.createElement(Pe,null,a.createElement(je,{mediaDuration:l,pillar:t}))),Ae=({height:t,width:l,children:r})=>a.createElement("div",{className:e("position:relative;padding-bottom:",t/l*100,"%;iframe{width:100%;height:100%;position:absolute;top:0;left:0;};label:className;")},r),qe=({format:e,videoMeta:t,overlayImage:l,adTargeting:r,height:n=259,width:i=460,title:s="YouTube video player",duration:o})=>{const m=r&&JSON.stringify((e=>{return{adsConfig:{adTagParameters:{iu:""+(e.adUnit||""),cust_params:encodeURIComponent((t=e.customParams,Object.keys(t).map(e=>{const a=t[e];return`${e}=${Array.isArray(a)?a.map(e=>encodeURIComponent(e)).join(","):encodeURIComponent(a)}`}).join("&")))}}};var t})(r));return a.createElement("div",null,a.createElement(Ae,{height:n,width:i},l&&a.createElement(Be,{image:l,pillar:e.pillar,duration:o}),a.createElement("iframe",{title:s,width:i,height:n,src:`https://www.youtube.com/embed/${t.assetId}?embed_config=${m}&enablejsapi=1&origin=https://www.theguardian.com&widgetid=1&modestbranding=1`})))},Ue=({id:e,title:t,image:l,html:r,credit:n,pillar:i,expandForStorybook:s,likeHandler:o,dislikeHandler:m,expandCallback:d})=>a.createElement(Ee,{id:e,title:t,pillar:i,atomType:"profile",atomTypeTitle:"Profile",expandForStorybook:s,expandCallback:d},a.createElement(Se,{html:r,image:l,credit:n,pillar:i}),a.createElement(pe,{pillar:i,dislikeHandler:m,likeHandler:o})),$e=({id:e,title:t,image:l,html:r,credit:n,pillar:i,expandForStorybook:s,likeHandler:o,dislikeHandler:m,expandCallback:d})=>a.createElement(Ee,{id:e,title:t,atomType:"qanda",atomTypeTitle:"Q&A",pillar:i,expandForStorybook:s,expandCallback:d},a.createElement(Se,{html:r,image:l,credit:n,pillar:i}),a.createElement(pe,{pillar:i,likeHandler:o,dislikeHandler:m})),Oe=e("height:26px;svg{fill:",b[100],";height:26px;width:26px;};label:iconStyle;"),Re=e({name:"kvx5ty-answerWrapperStyles",styles:"display:flex;flex-direction:row;margin-bottom:6px;padding-top:12px;padding-bottom:12px;padding-left:20px;padding-right:20px;;label:answerWrapperStyles;"}),Ke=e(":hover{background-color:",b[86],";cursor:pointer;}:focus{background-color:",b[86],";",k,"};label:selectableAnswerStyles;"),Qe=t=>e(o.medium(),";background-color:",b[97],";",t?"":Ke," ",Re," padding-left:28px;"),Ve=({id:t,onClick:l,disabled:r,answerText:n,onKeyPress:i})=>a.createElement("div",null,a.createElement("label",{className:Qe(r),onKeyPress:i,tabIndex:r?-1:0,htmlFor:"answer-"+t,"data-answerType":r?"unselected-disabled-answer":"unselected-enabled-answer",id:t,"data-testId":t},n),a.createElement("input",{type:"radio",tabIndex:-1,required:!0,id:"answer-"+t,onClick:l,disabled:r,className:e(v,";;label:className;")})),Ye=e("color:",b[100],";padding-left:8px;display:flex;flex-direction:column;;label:correctSelectedAnswerStyles;"),Ge=({answerText:t,explainerText:l,id:r})=>a.createElement("div",{className:e(Re," background-color:rgb(61,181,64);;label:className;")},a.createElement("div",{className:Oe},a.createElement(z,null)),a.createElement("label",{className:Ye,id:r,"data-testId":r,"data-answerType":"correct-selected-answer"},a.createElement("span",{className:e(o.medium(),";;label:className;")},t),a.createElement("span",{className:e(s.xsmall(),";label:className;")},l))),Je=e("color:",b[0],";padding-left:8px;display:flex;flex-direction:column;;label:nonSelectedCorrectAnswerLabelStyles;"),Xe=({answerText:t,explainerText:l,id:r})=>a.createElement("div",{className:e(Re," background-color:rgb(61,181,64,0.6);;label:className;")},a.createElement("label",{className:Je,id:r,"data-testId":r,"data-answerType":"non-selected-correct-answer"},a.createElement("span",{className:e(o.medium(),";;label:className;")},t),a.createElement("span",{className:e(s.xsmall(),";label:className;")},l))),Ze=e("color:",b[100],";padding-left:8px;display:flex;flex-direction:column;",o.medium(),";;label:incorrectAnswerLabelStyles;"),et=({answerText:t,id:l})=>a.createElement("div",{className:e(Re," background-color:",h[400],";;label:className;")},a.createElement("div",{className:Oe},a.createElement(W,null)),a.createElement("label",{className:Ze,id:l,"data-testId":l,"data-answerType":"incorrect-answer"},t)),tt=e({name:"1usw75q-fieldsetStyle",styles:"margin-bottom:12px;border:0px;padding:0px;;label:fieldsetStyle;"}),at=({id:e,questions:t})=>a.createElement("form",{"data-atom-id":e},t.map((e,t)=>a.createElement(lt,{key:e.id,id:e.id,number:t+1,text:e.text,imageUrl:e.imageUrl,answers:e.answers}))),lt=({text:t,imageUrl:l,answers:n,number:i})=>{const[s,m]=r(void 0);return a.createElement("div",{className:e(o.medium(),";;label:className;")},a.createElement("fieldset",{className:tt},a.createElement("div",null,a.createElement("legend",{className:e({name:"19e1jvj-className",styles:"margin-bottom:12px;;label:className;"})},a.createElement("span",{className:e({name:"1kbwa6u-className",styles:"padding-right:12px;;label:className;"})},i+"."),t)),l&&a.createElement("img",{className:e({name:"17mnt1y-className",styles:"width:100%;;label:className;"}),src:l}),a.createElement("div",{className:e({name:"w284zz-className",styles:"position:relative;;label:className;"})},n.map((e,t)=>{const l=void 0!==s;if(l){if(s===e.id){if(e.isCorrect)return a.createElement(Ge,{id:e.id,answerText:e.text,explainerText:e.revealText||""});if(!e.isCorrect)return a.createElement(et,{id:e.id,answerText:e.text})}return e.isCorrect?a.createElement(Xe,{id:e.id,answerText:e.text,explainerText:e.revealText||""}):a.createElement(Ve,{id:e.id,disabled:!0,answerText:e.text})}return a.createElement(Ve,{id:e.id,disabled:!1,answerText:e.text,onClick:()=>m(e.id),onKeyPress:t=>{"Enter"!==t.key||l||m(e.id)}})}))))},rt=e(":not(:last-child){border-left:0.0625rem solid ",p[60],";padding-bottom:",u[4],";}padding-left:",m[4],"px;margin-left:",m[2],"px;;label:Snippet;"),nt=e(o.medium({lineHeight:"tight",fontWeight:"bold"}),";;label:EventTitle;"),it=e("::before{",e("content:'';width:",m[4],"px;height:",m[4],"px;border-radius:100%;float:left;position:relative;left:-24px;background-color:#121212;;label:EventDateBullet;"),"}margin-left:-16px;background:",c[400],";",o.medium({lineHeight:"tight",fontWeight:"bold"}),";;label:EventDate;"),st=e("background:",c[400],";",o.medium({lineHeight:"tight",fontWeight:"bold"}),";;label:EventToDate;"),ot=({events:e,pillar:t})=>a.createElement("div",null,e.map((e,l)=>{const r=new Date(Date.parse(e.date)).toISOString(),n=e.toDate?new Date(Date.parse(e.toDate)).toISOString():"";return a.createElement("div",{key:l,"data-type":"event-snippet",className:rt},a.createElement("div",null,a.createElement("time",{dateTime:r,className:it},e.date),e.toDate&&a.createElement("span",null," ","-"," ",a.createElement("time",{dateTime:n,className:st},e.toDate))),e.title&&a.createElement("div",{className:nt},e.title),e.body&&a.createElement(Se,{html:e.body,pillar:t}))})),mt=({id:e,events:t,description:l,title:r,pillar:n,expandForStorybook:i,likeHandler:s,dislikeHandler:o,expandCallback:m})=>a.createElement(Ee,{atomType:"timeline",atomTypeTitle:"Timeline",id:e,pillar:n,expandForStorybook:i,title:r,expandCallback:m},l&&a.createElement(Se,{html:l,pillar:n}),t&&a.createElement(ot,{events:t,pillar:n}),a.createElement(pe,{pillar:n,dislikeHandler:o,likeHandler:s}));export{se as AudioAtom,oe as ChartAtom,B as ExplainerAtom,Te as GuideAtom,Ie as InteractiveAtom,Ue as ProfileAtom,$e as QandaAtom,at as QuizAtom,mt as TimelineAtom,qe as YoutubeAtom};
 //# sourceMappingURL=index.modern.js.map

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("emotion"),require("react"),require("@guardian/src-foundations/typography"),require("@guardian/src-foundations"),require("@guardian/src-foundations/palette"),require("@guardian/src-foundations/accessibility"),require("@guardian/src-foundations/palette/"),require("@guardian/src-icons"),require("react-dom/server")):"function"==typeof define&&define.amd?define(["exports","emotion","react","@guardian/src-foundations/typography","@guardian/src-foundations","@guardian/src-foundations/palette","@guardian/src-foundations/accessibility","@guardian/src-foundations/palette/","@guardian/src-icons","react-dom/server"],t):t((e=e||self).atomsRendering={},e.emotion,e.react,e.typography,e.srcFoundations,e.palette,e.accessibility,e._,e.srcIcons,e.server)}(this,function(e,t,a,l,n,r,i,s,o,c){var d,m="default"in a?a.default:a,u=function(e){var a=e.children;return m.createElement("figure",{"data-atom-id":e.id,"data-atom-type":"explainer",className:t.css("padding-bottom:",n.space[1],"px;padding-left:",n.space[2],"px;padding-right:",n.space[2],"px;border-top:1px solid ",r.text.primary,";color:",r.text.primary,";background:",r.neutral[97],";p{margin-top:",n.space[3],"px;margin-bottom:",n.space[3],"px;};label:className;")},a)},p=function(e){var a=e.title;return m.createElement("h3",{className:t.css(l.headline.xxsmall({fontWeight:"bold"})," margin-top:",n.space[2],"px;;label:className;")},a)},g=function(e){var a=e.html;return m.createElement("div",{className:t.css(l.textSans.small({fontWeight:"light",lineHeight:"tight"}),";label:className;"),dangerouslySetInnerHTML:{__html:a}})},f=((d={})[0]=r.news,d[1]=r.opinion,d[2]=r.sport,d[3]=r.culture,d[4]=r.lifestyle,d),b=t.css("border-image:repeating-linear-gradient( to bottom,",n.palette.neutral[86],",",n.palette.neutral[86]," 1px,transparent 1px,transparent 4px ) 13;border-top:13px solid black;background-color:",n.palette.neutral[97],";position:relative;padding-left:5px;padding-right:5px;padding-bottom:1px;margin:16px 0 36px;;label:wrapperStyles;"),h=t.css({name:"e7wosl-figureStyle",styles:"width:100%;;label:figureStyle;"}),y=function(e){return t.css("color:",f[e].main,";",l.headline.xxxsmall({fontWeight:"bold"}),";")},x=t.css(l.headline.xxxsmall(),";;label:titleStyle;"),v=t.css({name:"hi1fzf-audioBodyStyle",styles:"display:flex;overflow:hidden;;label:audioBodyStyle;"}),E=t.css({name:"19itewg-audioElementStyle",styles:"height:0;vertical-align:baseline;width:300px;;label:audioElementStyle;"}),k=t.css({name:"1pgsral-audioControlsStyle",styles:"box-sizing:content-box;padding:5px;width:50px;height:55px;;label:audioControlsStyle;"}),w=t.css("padding:0;border:0;outline:0;cursor:pointer;background-color:transparent;:focus{",i.focusHalo,"};label:buttonStyle;"),N=t.css({name:"hkgkch-svgPlayStyle",styles:"fill:currentColor;overflow:hidden;width:50px;height:auto;;label:svgPlayStyle;"}),S=t.css({name:"srizkq-svgPauseStyle",styles:"fill:currentColor;overflow:hidden;width:50px;height:auto;;label:svgPauseStyle;"}),T=t.css({name:"1qy05o4-timingStyle",styles:"align-items:center;display:flex;flex:1;;label:timingStyle;"}),C=t.css({name:"vz6asm-timePlayedStyle",styles:"min-width:75px;padding-top:6px;display:block;;label:timePlayedStyle;"}),H=t.css({name:"jhr1l0-progressBarStyle",styles:"flex:1;display:block;;label:progressBarStyle;"}),I=function(e){return t.css("width:100%;appearance:none;background-image:linear-gradient( to right,",f[e].main," 0%,",n.palette.neutral[60]," 0% );height:6px;outline:0;cursor:pointer;margin-left:0;margin-right:0;:focus{",i.focusHalo,"}")},A=t.css({name:"wzt3b5-timeDurationStyle",styles:"min-width:65px;padding-top:6px;padding-left:10px;display:block;;label:timeDurationStyle;"}),D=t.css(l.textSans.small(),";label:timeStyles;"),z=function(e){return e.toFixed(0).padStart(2,"0")},L=function(e){var t=Math.floor(e%60),a=Math.floor(e%3600/60),l=Math.floor(e/3600);return z(l)+":"+z(a)+":"+z(t)},_=function(e){return m.createElement("button",{"data-testid":"pause-button",onClick:e.onClick,className:w},m.createElement("svg",{className:S,width:"30px",height:"30px",viewBox:"0 0 30 30"},m.createElement("g",{fill:"none",fillRule:"evenodd"},m.createElement("circle",{fill:f[e.pillar].main,cx:"15",cy:"15",r:"15"}),m.createElement("path",{d:"M9.429 7.286h3.429v15.429h-3.43zm7.286 0h3.429v15.429h-3.43z",fill:n.palette.neutral[100]}))))},M=function(e){return m.createElement("button",{"data-testid":"play-button",onClick:e.onClick,className:w},m.createElement("svg",{className:N,width:"30px",height:"30px",viewBox:"0 0 30 30"},m.createElement("g",{fill:"none",fillRule:"evenodd"},m.createElement("circle",{fill:f[e.pillar].main,cx:"15",cy:"15",r:"15"}),m.createElement("path",{fill:n.palette.neutral[100],d:"M10.113 8.571l-.47.366V20.01l.472.347 13.456-5.593v-.598z"}))))};function W(e,t){switch(e){case"opinion":return s.opinion[t];case"sport":return s.sport[t];case"culture":return s.culture[t];case"lifestyle":return s.lifestyle[t];case"news":return s.news[t];default:return s.news[400]}}var j=t.css({name:"dc74hn-footerStyling",styles:"font-size:13px;line-height:16px;display:flex;justify-content:flex-end;;label:footerStyling;"}),q=function(){return m.createElement("svg",{className:t.css({name:"15k23p-className",styles:"width:16px;height:16px;;label:className;"}),viewBox:"0 0 40 40"},m.createElement("path",{fill:"#FFF",d:"M33.78 22.437l-4.228 13.98L27.93 37.5 5.062 34.14V15.503l7.8-1.517L24.354 2.5h1.624L28.9 5.426l-4.548 8.67h.107l10.477 1.31"}))},F=function(e){var n=e.likeHandler,r=e.dislikeHandler,i=t.css("display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background:black;color:white;border-style:hidden;border-radius:100%;margin:0 0 0 5px;padding:0;width:28px;height:28px;:hover{background:",W(e.pillar,400),";}:focus{border:none;};label:buttonStyling;"),s=a.useState(!1),o=s[0],c=s[1];return m.createElement("footer",{className:j},m.createElement("div",{hidden:o},m.createElement("div",{className:t.css("display:flex;align-items:center;",l.textSans.xsmall(),";;label:className;")},m.createElement("div",null,"Was this helpful?"),m.createElement("button",{"data-testid":"like",className:i,onClick:function(){n(),c(!0)}},m.createElement(q,null)),m.createElement("button",{className:t.cx(i,t.css({name:"13tfp3m-className",styles:"transform:rotate(180deg);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);;label:className;"})),"data-testid":"dislike",onClick:function(){r(),c(!0)}},m.createElement(q,null)))),m.createElement("div",{className:t.css(l.textSans.xsmall(),";height:28px;;label:className;"),"data-testid":"feedback",hidden:!o},"Thank you for your feedback."))},P=t.css(l.headline.xxxsmall({fontWeight:"medium"}),";margin:0;line-height:22px;;label:titleStyling;"),B=t.css({name:"kd64v9-plusStyling",styles:"margin-right:12px;margin-bottom:6px;width:33px;fill:white;height:28px;;label:plusStyling;"}),R=t.css({name:"16egkfy-minusStyling",styles:"margin-right:14px;margin-bottom:6px;width:30px;fill:white;height:25px;padding-left:4px;;label:minusStyling;"}),U=t.css("display:inline-flex;align-items:center;",l.textSans.small(),";;label:iconSpacing;"),O=function(e){var n=e.sectionTitle,r=e.title,i=e.pillar,c=e.expandCallback,d=t.css("display:block;",l.body.medium({lineHeight:"tight",fontWeight:"bold"}),";color:",W(i,400),";;label:atomTitleStyling;"),u=t.css("background:",s.neutral[7],";color:",s.neutral[100],";height:2rem;position:absolute;bottom:0;transform:translate(0,50%);padding:0 15px 0 7px;border-radius:100em;cursor:pointer;display:inline-flex;align-items:center;border:0;margin:0;:hover{background:",W(i,400),";};label:showHideStyling;"),p=a.useState(!1),g=p[0],f=p[1],b=a.useState(!1),h=b[0],y=b[1];return m.createElement("summary",{onClick:function(){h||(c(),y(!0)),f(!g)}},m.createElement("span",{className:d},n),m.createElement("h4",{className:P},r),m.createElement("span",{className:u},g?m.createElement("span",{className:U},m.createElement("span",{className:R},m.createElement(o.SvgMinus,null)),"Hide"):m.createElement("span",{className:U},m.createElement("span",{className:B},m.createElement(o.SvgPlus,null)),"Show")))},Q=t.css({name:"cq3eyp-containerStyling",styles:"display:block;position:relative;margin-bottom:0.75rem;margin-top:1rem;;label:containerStyling;"}),K=t.css("margin:16px 0 36px;background:",r.neutral[93],";color:",r.text.primary,";padding:0 5px 6px;border-image:repeating-linear-gradient( to bottom,",r.neutral[86],",",r.neutral[86]," 1px,transparent 1px,transparent 4px ) 13;border-top:13px solid black;position:relative;summary{list-style:none;margin:0 0 16px;}summary::-webkit-details-marker{display:none;}summary:focus{outline:none;};label:detailStyling;"),V=function(e){var t=e.id,a=e.children,l=e.atomType;return m.createElement("div",{className:Q,"data-atom-id":t,"data-atom-type":l},m.createElement("details",{className:K,"data-atom-id":t,"data-snippet-type":l,open:e.expandForStorybook},m.createElement(O,{sectionTitle:e.atomTypeTitle,pillar:e.pillar,title:e.title,expandCallback:e.expandCallback}),a))},Y=t.css({name:"yngtwb-imageStyling",styles:".forceHeightAndWidth &{width:100px;height:100px;}float:left;margin-right:16px;margin-bottom:6px;object-fit:cover;border-radius:50%;display:block;border:0px;;label:imageStyling;"}),G=t.css(l.textSans.xsmall(),";margin:12px 0;display:flex;align-items:center;svg{width:30px;fill:",r.neutral[60],";};label:creditStyling;"),J=t.css(l.body.medium()," p{margin-bottom:0.5rem;}ol{list-style:decimal;list-style-position:inside;margin-bottom:1rem;}ul{list-style:none;margin:0 0 0.75rem;padding:0;margin-bottom:1rem;}ul li{margin-bottom:0.375rem;padding-left:1.25rem;}ul li:before{display:inline-block;content:'';border-radius:0.375rem;height:0.75rem;width:0.75rem;margin-right:0.5rem;background-color:",r.neutral[86],";margin-left:-1.25rem;}b{font-weight:700;}i{font-style:italic;};label:bodyStyling;"),X=function(e){return t.css("a{color:",W(e,300),";text-decoration:none;border-bottom:0.0625rem solid ",r.neutral[86],";transition:border-color 0.15s ease-out;}a:hover{border-bottom:solid 0.0625rem ",W(e,400),";}")},Z=function(e){var a=e.html,l=e.image,n=e.credit,r=e.pillar;return m.createElement("div",null,l&&m.createElement("span",{className:"forceHeightAndWidth"},m.createElement("img",{className:Y,src:l,alt:""})),m.createElement("div",{className:t.cx(J,X(r)),dangerouslySetInnerHTML:{__html:a}}),n&&m.createElement("div",{className:G},m.createElement(o.SvgInfo,null),n))},$=function(e){var t=e.css,a=e.js,l=e.html;return c.renderToString(m.createElement("html",null,m.createElement("head",null,m.createElement("meta",{charSet:"utf-8"}),m.createElement("meta",{name:"viewport",content:"width=device-width,minimum-scale=1,initial-scale=1"}),t&&m.createElement("style",{dangerouslySetInnerHTML:{__html:t}})),m.createElement("body",null,l&&m.createElement("div",{dangerouslySetInnerHTML:{__html:l}})),m.createElement("script",{dangerouslySetInnerHTML:{__html:a}}),m.createElement("script",{dangerouslySetInnerHTML:{__html:"\n                            function resize() {\n                                window.frameElement.height = document.body.offsetHeight;\n                            }\n                            window.addEventListener('resize', resize);\n                            resize();\n                        "}}),m.createElement("script",{dangerouslySetInnerHTML:{__html:"\n                            var fonts = [].slice.apply(window.parent.document.styleSheets)\n                                .filter(function (sheet) { return sheet.ownerNode.className.indexOf(\"webfont\") > - 1; })\n                                .map(function (sheet) { return sheet.ownerNode.textContent; })\n                                .join(' ');\n                            var css = document.createElement('style');\n                            css.textContent = fonts;\n                            document.head.appendChild(css);\n                        "}})))},ee=t.css({name:"xc14i8-figureStyles",styles:"margin:0;;label:figureStyles;"}),te=t.css({name:"ta2q8u-fullWidthStyles",styles:"width:100%;;label:fullWidthStyles;"}),ae=t.css({name:"o2wys0-wrapperStyles",styles:"display:flex;align-items:center;padding:0 5px 5px 5px;;label:wrapperStyles;"}),le=function(e){return m.createElement("span",{className:(a=e.pillar,t.css("width:24px;height:23px;background-color:",0===a?f[a].bright:f[a].main,";border-radius:50%;display:inline-block;> svg{width:14px;height:auto;margin-left:auto;margin-right:auto;margin-top:6px;display:block;transform:translateY(0.0625rem);}"))},m.createElement(o.SvgVideo,null));var a},ne=function(e){var a,n=e.mediaDuration;return m.createElement("p",{className:(a=e.pillar,t.css("color:",0===a?f[a].bright:f[a].main,";",l.textSans.xsmall({fontWeight:"bold"})))},function(e){if(void 0===e||0===e)return"";var t=Number(e),a=Math.floor(t/3600),l=Math.floor(t%3600/60),n=Math.floor(t%3600%60),r=[];return a>0&&r.push(a),(l>0||0===a)&&r.push(l),n>0&&r.push(n),r.join(":")}(n))},re=function(e){var t=e.mediaDuration,a=e.pillar;return m.createElement("div",{className:ae},m.createElement(le,{pillar:a})," ",t&&m.createElement(ne,{mediaDuration:t,pillar:a}))},ie=function(e){var a=e.children;return m.createElement("div",{className:t.css("position:absolute;bottom:",n.space[3],";left:",n.space[3],";;label:className;")},a)},se=function(e){var a,l=e.pillar,n=e.duration;return m.createElement("div",{className:(a=e.image,t.css("background-image:url(",a,");background-size:cover;background-position:49% 49%;background-repeat:no-repeat;z-index:0;text-align:center;height:100%;width:100%;position:absolute;max-height:100vh;cursor:pointer;"))},m.createElement(ie,null,m.createElement(re,{mediaDuration:n,pillar:l})))},oe=function(e){var a=e.children;return m.createElement("div",{className:t.css("position:relative;padding-bottom:",e.height/e.width*100,"%;iframe{width:100%;height:100%;position:absolute;top:0;left:0;};label:className;")},a)},ce=t.css("height:26px;svg{fill:",r.neutral[100],";height:26px;width:26px;};label:iconStyle;"),de=t.css({name:"kvx5ty-answerWrapperStyles",styles:"display:flex;flex-direction:row;margin-bottom:6px;padding-top:12px;padding-bottom:12px;padding-left:20px;padding-right:20px;;label:answerWrapperStyles;"}),me=t.css(":hover{background-color:",r.neutral[86],";cursor:pointer;}:focus{background-color:",r.neutral[86],";",i.focusHalo,"};label:selectableAnswerStyles;"),ue=function(e){return t.css(l.body.medium(),";background-color:",r.neutral[97],";",e?"":me," ",de," padding-left:28px;")},pe=function(e){var a=e.id,l=e.onClick,n=e.disabled,r=e.answerText,s=e.onKeyPress;return m.createElement("div",null,m.createElement("label",{className:ue(n),onKeyPress:s,tabIndex:n?-1:0,htmlFor:"answer-"+a,"data-answerType":n?"unselected-disabled-answer":"unselected-enabled-answer",id:a,"data-testId":a},r),m.createElement("input",{type:"radio",tabIndex:-1,required:!0,id:"answer-"+a,onClick:l,disabled:n,className:t.css(i.visuallyHidden,";;label:className;")}))},ge=t.css("color:",r.neutral[100],";padding-left:8px;display:flex;flex-direction:column;;label:correctSelectedAnswerStyles;"),fe=function(e){var a=e.answerText,n=e.explainerText,r=e.id;return m.createElement("div",{className:t.css(de," background-color:rgb(61,181,64);;label:className;")},m.createElement("div",{className:ce},m.createElement(o.SvgCheckmark,null)),m.createElement("label",{className:ge,id:r,"data-testId":r,"data-answerType":"correct-selected-answer"},m.createElement("span",{className:t.css(l.body.medium(),";;label:className;")},a),m.createElement("span",{className:t.css(l.textSans.xsmall(),";label:className;")},n)))},be=t.css("color:",r.neutral[0],";padding-left:8px;display:flex;flex-direction:column;;label:nonSelectedCorrectAnswerLabelStyles;"),he=function(e){var a=e.answerText,n=e.explainerText,r=e.id;return m.createElement("div",{className:t.css(de," background-color:rgb(61,181,64,0.6);;label:className;")},m.createElement("label",{className:be,id:r,"data-testId":r,"data-answerType":"non-selected-correct-answer"},m.createElement("span",{className:t.css(l.body.medium(),";;label:className;")},a),m.createElement("span",{className:t.css(l.textSans.xsmall(),";label:className;")},n)))},ye=t.css("color:",r.neutral[100],";padding-left:8px;display:flex;flex-direction:column;",l.body.medium(),";;label:incorrectAnswerLabelStyles;"),xe=function(e){var a=e.answerText,l=e.id;return m.createElement("div",{className:t.css(de," background-color:",r.news[400],";;label:className;")},m.createElement("div",{className:ce},m.createElement(o.SvgCross,null)),m.createElement("label",{className:ye,id:l,"data-testId":l,"data-answerType":"incorrect-answer"},a))},ve=t.css({name:"1usw75q-fieldsetStyle",styles:"margin-bottom:12px;border:0px;padding:0px;;label:fieldsetStyle;"}),Ee=function(e){var n=e.text,r=e.imageUrl,i=e.answers,s=e.number,o=a.useState(void 0),c=o[0],d=o[1];return m.createElement("div",{className:t.css(l.body.medium(),";;label:className;")},m.createElement("fieldset",{className:ve},m.createElement("div",null,m.createElement("legend",{className:t.css({name:"19e1jvj-className",styles:"margin-bottom:12px;;label:className;"})},m.createElement("span",{className:t.css({name:"1kbwa6u-className",styles:"padding-right:12px;;label:className;"})},s+"."),n)),r&&m.createElement("img",{className:t.css({name:"17mnt1y-className",styles:"width:100%;;label:className;"}),src:r}),m.createElement("div",{className:t.css({name:"w284zz-className",styles:"position:relative;;label:className;"})},i.map(function(e,t){var a=void 0!==c;if(a){if(c===e.id){if(e.isCorrect)return m.createElement(fe,{id:e.id,answerText:e.text,explainerText:e.revealText||""});if(!e.isCorrect)return m.createElement(xe,{id:e.id,answerText:e.text})}return e.isCorrect?m.createElement(he,{id:e.id,answerText:e.text,explainerText:e.revealText||""}):m.createElement(pe,{id:e.id,disabled:!0,answerText:e.text})}return m.createElement(pe,{id:e.id,disabled:!1,answerText:e.text,onClick:function(){return d(e.id)},onKeyPress:function(t){"Enter"!==t.key||a||d(e.id)}})}))))},ke=t.css(":not(:last-child){border-left:0.0625rem solid ",n.neutral[60],";padding-bottom:",n.remSpace[4],";}padding-left:",n.space[4],"px;margin-left:",n.space[2],"px;;label:Snippet;"),we=t.css(l.body.medium({lineHeight:"tight",fontWeight:"bold"}),";;label:EventTitle;"),Ne=t.css("::before{",t.css("content:'';width:",n.space[4],"px;height:",n.space[4],"px;border-radius:100%;float:left;position:relative;left:-24px;background-color:#121212;;label:EventDateBullet;"),"}margin-left:-16px;background:",n.brandAlt[400],";",l.body.medium({lineHeight:"tight",fontWeight:"bold"}),";;label:EventDate;"),Se=t.css("background:",n.brandAlt[400],";",l.body.medium({lineHeight:"tight",fontWeight:"bold"}),";;label:EventToDate;"),Te=function(e){var t=e.pillar;return m.createElement("div",null,e.events.map(function(e,a){var l=new Date(Date.parse(e.date)).toISOString(),n=e.toDate?new Date(Date.parse(e.toDate)).toISOString():"";return m.createElement("div",{key:a,"data-type":"event-snippet",className:ke},m.createElement("div",null,m.createElement("time",{dateTime:l,className:Ne},e.date),e.toDate&&m.createElement("span",null," ","-"," ",m.createElement("time",{dateTime:n,className:Se},e.toDate))),e.title&&m.createElement("div",{className:we},e.title),e.body&&m.createElement(Z,{html:e.body,pillar:t}))}))};e.AudioAtom=function(e){var l=e.id,n=e.trackUrl,r=e.kicker,i=e.title,s=e.pillar,o=a.useRef(null),c=a.useState(!1),d=c[0],u=c[1],p=a.useState(0),g=p[0],f=p[1],w=a.useState(0),N=w[0],S=w[1];a.useEffect(function(){var e=function(){S(o.current?o.current.currentTime/o.current.duration*100:0),f(o.current?o.current.currentTime:0)};return o.current&&o.current.addEventListener("timeupdate",e),function(){return o.current?o.current.removeEventListener("timeupdate",e):void 0}},[o,f]);var z=a.useState(0),W=z[0],j=z[1];a.useEffect(function(){var e=function(){return j(o.current?o.current.duration:0)};return o.current&&o.current.addEventListener("loadeddata",e),function(){return o.current?o.current.removeEventListener("loadeddata",e):void 0}},[o,j]),a.useEffect(function(){d?o.current&&o.current.play():o.current&&o.current.pause()},[d,o]);var q=a.useRef(null);return a.useEffect(function(){var e=function(e){39===e.keyCode&&document.activeElement===q.current&&o.current&&(o.current.currentTime+=15),37===e.keyCode&&document.activeElement===q.current&&o.current&&(o.current.currentTime-=15)};return document.addEventListener("keydown",e),function(){return document.removeEventListener("keydown",e)}},[o,q]),m.createElement("figure",{className:h,"data-atom-id":l,"data-atom-type":"audio"},m.createElement("div",{className:b},m.createElement("div",{className:t.css({name:"1k6uwis-className",styles:"padding-left:5px;;label:className;"})},m.createElement("span",{className:y(s)},r),m.createElement("h4",{className:x},i)),m.createElement("div",{className:v},m.createElement("audio",{className:E,src:n,ref:o,"data-duration":W,"data-media-id":l,"data-title":x},m.createElement("p",null,"Sorry your browser does not support audio - but you can download here and listen https://audio.guim.co.uk/2020/05/05-61553-gnl.fw.200505.jf.ch7DW.mp3")),m.createElement("div",{className:k},d?m.createElement(_,{pillar:s,onClick:function(){return u(!1)}}):m.createElement(M,{pillar:s,onClick:function(){return u(!0)}})),m.createElement("div",{className:T},m.createElement("div",{className:C},m.createElement("span",{className:D},L(g))),m.createElement("div",{className:H},m.createElement("input",{className:I(s),ref:q,type:"range",min:"0",max:"100",step:"1",value:N,onClick:function(e){o.current&&(o.current.currentTime=o.current.duration/100*(e.nativeEvent.offsetX/e.currentTarget.offsetWidth*100))}})),m.createElement("div",{className:A},m.createElement("span",{className:D},L(W)))))))},e.ChartAtom=function(e){var a=e.id,l=e.html;return m.createElement("div",{"data-atom-id":a,"data-testid":"chart","data-atom-type":"chart","data-snippet-type":"chart",className:t.css("padding-bottom:",n.space[1],"px;margin-bottom:",n.space[2],"px;;label:className;")},m.createElement("iframe",{className:"atom__iframe",name:a,srcDoc:l,width:"100%",frameBorder:"0"}))},e.ExplainerAtom=function(e){var t=e.html;return m.createElement(u,{id:e.id},m.createElement(p,{title:e.title}),m.createElement(g,{html:t}))},e.GuideAtom=function(e){var t=e.pillar,a=e.likeHandler,l=e.dislikeHandler;return m.createElement(V,{id:e.id,title:e.title,pillar:t,atomType:"guide",atomTypeTitle:"Quick Guide",expandForStorybook:e.expandForStorybook,expandCallback:e.expandCallback},m.createElement(Z,{html:e.html,image:e.image,credit:e.credit,pillar:t}),m.createElement(F,{pillar:t,dislikeHandler:l,likeHandler:a}))},e.InteractiveAtom=function(e){return m.createElement("figure",{className:ee,"data-atom-id":e.id,"data-atom-type":"interactive"},m.createElement("iframe",{className:te,srcDoc:$({js:e.js,css:e.css,html:e.html}),frameBorder:"0"}))},e.ProfileAtom=function(e){var t=e.pillar,a=e.likeHandler,l=e.dislikeHandler;return m.createElement(V,{id:e.id,title:e.title,pillar:t,atomType:"profile",atomTypeTitle:"Profile",expandForStorybook:e.expandForStorybook,expandCallback:e.expandCallback},m.createElement(Z,{html:e.html,image:e.image,credit:e.credit,pillar:t}),m.createElement(F,{pillar:t,dislikeHandler:l,likeHandler:a}))},e.QandaAtom=function(e){var t=e.pillar,a=e.likeHandler,l=e.dislikeHandler;return m.createElement(V,{id:e.id,title:e.title,atomType:"qanda",atomTypeTitle:"Q&A",pillar:t,expandForStorybook:e.expandForStorybook,expandCallback:e.expandCallback},m.createElement(Z,{html:e.html,image:e.image,credit:e.credit,pillar:t}),m.createElement(F,{pillar:t,likeHandler:a,dislikeHandler:l}))},e.QuizAtom=function(e){return m.createElement("form",{"data-atom-id":e.id},e.questions.map(function(e,t){return m.createElement(Ee,{key:e.id,id:e.id,number:t+1,text:e.text,imageUrl:e.imageUrl,answers:e.answers})}))},e.TimelineAtom=function(e){var t=e.events,a=e.description,l=e.pillar,n=e.likeHandler,r=e.dislikeHandler;return m.createElement(V,{atomType:"timeline",atomTypeTitle:"Timeline",id:e.id,pillar:l,expandForStorybook:e.expandForStorybook,title:e.title,expandCallback:e.expandCallback},a&&m.createElement(Z,{html:a,pillar:l}),t&&m.createElement(Te,{events:t,pillar:l}),m.createElement(F,{pillar:l,dislikeHandler:r,likeHandler:n}))},e.YoutubeAtom=function(e){var t=e.format,a=e.videoMeta,l=e.overlayImage,n=e.adTargeting,r=e.height,i=void 0===r?259:r,s=e.width,o=void 0===s?460:s,c=e.title,d=void 0===c?"YouTube video player":c,u=e.duration,p=n&&JSON.stringify(function(e){return{adsConfig:{adTagParameters:{iu:""+(e.adUnit||""),cust_params:encodeURIComponent((t=e.customParams,Object.keys(t).map(function(e){var a=t[e];return e+"="+(Array.isArray(a)?a.map(function(e){return encodeURIComponent(e)}).join(","):encodeURIComponent(a))}).join("&")))}}};var t}(n));return m.createElement("div",null,m.createElement(oe,{height:i,width:o},l&&m.createElement(se,{image:l,pillar:t.pillar,duration:u}),m.createElement("iframe",{title:d,width:o,height:i,src:"https://www.youtube.com/embed/"+a.assetId+"?embed_config="+p+"&enablejsapi=1&origin=https://www.theguardian.com&widgetid=1&modestbranding=1"})))}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("emotion"),require("react"),require("@guardian/src-foundations/typography"),require("@guardian/src-foundations"),require("@guardian/src-foundations/palette"),require("@guardian/src-foundations/accessibility"),require("@guardian/src-foundations/palette/"),require("@guardian/src-icons"),require("react-dom/server")):"function"==typeof define&&define.amd?define(["exports","emotion","react","@guardian/src-foundations/typography","@guardian/src-foundations","@guardian/src-foundations/palette","@guardian/src-foundations/accessibility","@guardian/src-foundations/palette/","@guardian/src-icons","react-dom/server"],t):t((e=e||self).atomsRendering={},e.emotion,e.react,e.typography,e.srcFoundations,e.palette,e.accessibility,e._,e.srcIcons,e.server)}(this,function(e,t,a,l,n,r,i,s,o,c){var d,m="default"in a?a.default:a,u=function(e){var a=e.children;return m.createElement("figure",{"data-atom-id":e.id,"data-atom-type":"explainer",className:t.css("padding-bottom:",n.space[1],"px;padding-left:",n.space[2],"px;padding-right:",n.space[2],"px;border-top:1px solid ",r.text.primary,";color:",r.text.primary,";background:",r.neutral[97],";p{margin-top:",n.space[3],"px;margin-bottom:",n.space[3],"px;};label:className;")},a)},p=function(e){var a=e.title;return m.createElement("h3",{className:t.css(l.headline.xxsmall({fontWeight:"bold"})," margin-top:",n.space[2],"px;;label:className;")},a)},g=function(e){var a=e.html;return m.createElement("div",{className:t.css(l.textSans.small({fontWeight:"light",lineHeight:"tight"}),";label:className;"),dangerouslySetInnerHTML:{__html:a}})},f=((d={})[0]=r.news,d[1]=r.opinion,d[2]=r.sport,d[3]=r.culture,d[4]=r.lifestyle,d),b=t.css("border-image:repeating-linear-gradient( to bottom,",n.palette.neutral[86],",",n.palette.neutral[86]," 1px,transparent 1px,transparent 4px ) 13;border-top:13px solid black;background-color:",n.palette.neutral[97],";position:relative;padding-left:5px;padding-right:5px;padding-bottom:1px;margin:16px 0 36px;;label:wrapperStyles;"),h=t.css({name:"e7wosl-figureStyle",styles:"width:100%;;label:figureStyle;"}),y=function(e){return t.css("color:",f[e].main,";",l.headline.xxxsmall({fontWeight:"bold"}),";")},x=t.css(l.headline.xxxsmall(),";;label:titleStyle;"),v=t.css({name:"hi1fzf-audioBodyStyle",styles:"display:flex;overflow:hidden;;label:audioBodyStyle;"}),E=t.css({name:"19itewg-audioElementStyle",styles:"height:0;vertical-align:baseline;width:300px;;label:audioElementStyle;"}),k=t.css({name:"1pgsral-audioControlsStyle",styles:"box-sizing:content-box;padding:5px;width:50px;height:55px;;label:audioControlsStyle;"}),w=t.css("padding:0;border:0;outline:0;cursor:pointer;background-color:transparent;:focus{",i.focusHalo,"};label:buttonStyle;"),N=t.css({name:"hkgkch-svgPlayStyle",styles:"fill:currentColor;overflow:hidden;width:50px;height:auto;;label:svgPlayStyle;"}),S=t.css({name:"srizkq-svgPauseStyle",styles:"fill:currentColor;overflow:hidden;width:50px;height:auto;;label:svgPauseStyle;"}),T=t.css({name:"1qy05o4-timingStyle",styles:"align-items:center;display:flex;flex:1;;label:timingStyle;"}),C=t.css({name:"vz6asm-timePlayedStyle",styles:"min-width:75px;padding-top:6px;display:block;;label:timePlayedStyle;"}),H=t.css({name:"jhr1l0-progressBarStyle",styles:"flex:1;display:block;;label:progressBarStyle;"}),I=function(e){return t.css("width:100%;appearance:none;background-image:linear-gradient( to right,",f[e].main," 0%,",n.palette.neutral[60]," 0% );height:6px;outline:0;cursor:pointer;margin-left:0;margin-right:0;:focus{",i.focusHalo,"}")},A=t.css({name:"wzt3b5-timeDurationStyle",styles:"min-width:65px;padding-top:6px;padding-left:10px;display:block;;label:timeDurationStyle;"}),_=t.css(l.textSans.small(),";label:timeStyles;"),D=function(e){return e.toFixed(0).padStart(2,"0")},z=function(e){var t=Math.floor(e%60),a=Math.floor(e%3600/60),l=Math.floor(e/3600);return D(l)+":"+D(a)+":"+D(t)},L=function(e){return m.createElement("button",{"data-testid":"pause-button",onClick:e.onClick,className:w},m.createElement("svg",{className:S,width:"30px",height:"30px",viewBox:"0 0 30 30"},m.createElement("g",{fill:"none",fillRule:"evenodd"},m.createElement("circle",{fill:f[e.pillar].main,cx:"15",cy:"15",r:"15"}),m.createElement("path",{d:"M9.429 7.286h3.429v15.429h-3.43zm7.286 0h3.429v15.429h-3.43z",fill:n.palette.neutral[100]}))))},M=function(e){return m.createElement("button",{"data-testid":"play-button",onClick:e.onClick,className:w},m.createElement("svg",{className:N,width:"30px",height:"30px",viewBox:"0 0 30 30"},m.createElement("g",{fill:"none",fillRule:"evenodd"},m.createElement("circle",{fill:f[e.pillar].main,cx:"15",cy:"15",r:"15"}),m.createElement("path",{fill:n.palette.neutral[100],d:"M10.113 8.571l-.47.366V20.01l.472.347 13.456-5.593v-.598z"}))))};function W(e,t){switch(e){case"opinion":return s.opinion[t];case"sport":return s.sport[t];case"culture":return s.culture[t];case"lifestyle":return s.lifestyle[t];case"news":return s.news[t];default:return s.news[400]}}var j=t.css({name:"dc74hn-footerStyling",styles:"font-size:13px;line-height:16px;display:flex;justify-content:flex-end;;label:footerStyling;"}),q=function(){return m.createElement("svg",{className:t.css({name:"15k23p-className",styles:"width:16px;height:16px;;label:className;"}),viewBox:"0 0 40 40"},m.createElement("path",{fill:"#FFF",d:"M33.78 22.437l-4.228 13.98L27.93 37.5 5.062 34.14V15.503l7.8-1.517L24.354 2.5h1.624L28.9 5.426l-4.548 8.67h.107l10.477 1.31"}))},F=function(e){var n=e.likeHandler,r=e.dislikeHandler,i=t.css("display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background:black;color:white;border-style:hidden;border-radius:100%;margin:0 0 0 5px;padding:0;width:28px;height:28px;:hover{background:",W(e.pillar,400),";}:focus{border:none;};label:buttonStyling;"),s=a.useState(!1),o=s[0],c=s[1];return m.createElement("footer",{className:j},m.createElement("div",{hidden:o},m.createElement("div",{className:t.css("display:flex;align-items:center;",l.textSans.xsmall(),";;label:className;")},m.createElement("div",null,"Was this helpful?"),m.createElement("button",{"data-testid":"like",className:i,onClick:function(){n(),c(!0)}},m.createElement(q,null)),m.createElement("button",{className:t.cx(i,t.css({name:"13tfp3m-className",styles:"transform:rotate(180deg);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);;label:className;"})),"data-testid":"dislike",onClick:function(){r(),c(!0)}},m.createElement(q,null)))),m.createElement("div",{className:t.css(l.textSans.xsmall(),";height:28px;;label:className;"),"data-testid":"feedback",hidden:!o},"Thank you for your feedback."))},P=t.css(l.headline.xxxsmall({fontWeight:"medium"}),";margin:0;line-height:22px;;label:titleStyling;"),B=t.css({name:"kd64v9-plusStyling",styles:"margin-right:12px;margin-bottom:6px;width:33px;fill:white;height:28px;;label:plusStyling;"}),R=t.css({name:"16egkfy-minusStyling",styles:"margin-right:14px;margin-bottom:6px;width:30px;fill:white;height:25px;padding-left:4px;;label:minusStyling;"}),U=t.css("display:inline-flex;align-items:center;",l.textSans.small(),";;label:iconSpacing;"),O=function(e){var n=e.sectionTitle,r=e.title,i=e.pillar,c=e.expandCallback,d=t.css("display:block;",l.body.medium({lineHeight:"tight",fontWeight:"bold"}),";color:",W(i,400),";;label:atomTitleStyling;"),u=t.css("background:",s.neutral[7],";color:",s.neutral[100],";height:2rem;position:absolute;bottom:0;transform:translate(0,50%);padding:0 15px 0 7px;border-radius:100em;cursor:pointer;display:inline-flex;align-items:center;border:0;margin:0;:hover{background:",W(i,400),";};label:showHideStyling;"),p=a.useState(!1),g=p[0],f=p[1],b=a.useState(!1),h=b[0],y=b[1];return m.createElement("summary",{onClick:function(){h||(c(),y(!0)),f(!g)}},m.createElement("span",{className:d},n),m.createElement("h4",{className:P},r),m.createElement("span",{className:u},g?m.createElement("span",{className:U},m.createElement("span",{className:R},m.createElement(o.SvgMinus,null)),"Hide"):m.createElement("span",{className:U},m.createElement("span",{className:B},m.createElement(o.SvgPlus,null)),"Show")))},Q=t.css({name:"cq3eyp-containerStyling",styles:"display:block;position:relative;margin-bottom:0.75rem;margin-top:1rem;;label:containerStyling;"}),K=t.css("margin:16px 0 36px;background:",r.neutral[93],";color:",r.text.primary,";padding:0 5px 6px;border-image:repeating-linear-gradient( to bottom,",r.neutral[86],",",r.neutral[86]," 1px,transparent 1px,transparent 4px ) 13;border-top:13px solid black;position:relative;summary{list-style:none;margin:0 0 16px;}summary::-webkit-details-marker{display:none;}summary:focus{outline:none;};label:detailStyling;"),V=function(e){var t=e.id,a=e.children,l=e.atomType;return m.createElement("div",{className:Q,"data-atom-id":t,"data-atom-type":l},m.createElement("details",{className:K,"data-atom-id":t,"data-snippet-type":l,open:e.expandForStorybook},m.createElement(O,{sectionTitle:e.atomTypeTitle,pillar:e.pillar,title:e.title,expandCallback:e.expandCallback}),a))},Y=t.css({name:"yngtwb-imageStyling",styles:".forceHeightAndWidth &{width:100px;height:100px;}float:left;margin-right:16px;margin-bottom:6px;object-fit:cover;border-radius:50%;display:block;border:0px;;label:imageStyling;"}),G=t.css(l.textSans.xsmall(),";margin:12px 0;display:flex;align-items:center;svg{width:30px;fill:",r.neutral[60],";};label:creditStyling;"),J=t.css(l.body.medium()," p{margin-bottom:0.5rem;}ol{list-style:decimal;list-style-position:inside;margin-bottom:1rem;}ul{list-style:none;margin:0 0 0.75rem;padding:0;margin-bottom:1rem;}ul li{margin-bottom:0.375rem;padding-left:1.25rem;}ul li:before{display:inline-block;content:'';border-radius:0.375rem;height:0.75rem;width:0.75rem;margin-right:0.5rem;background-color:",r.neutral[86],";margin-left:-1.25rem;}b{font-weight:700;}i{font-style:italic;};label:bodyStyling;"),X=function(e){return t.css("a{color:",W(e,300),";text-decoration:none;border-bottom:0.0625rem solid ",r.neutral[86],";transition:border-color 0.15s ease-out;}a:hover{border-bottom:solid 0.0625rem ",W(e,400),";}")},Z=function(e){var a=e.html,l=e.image,n=e.credit,r=e.pillar;return m.createElement("div",null,l&&m.createElement("span",{className:"forceHeightAndWidth"},m.createElement("img",{className:Y,src:l,alt:""})),m.createElement("div",{className:t.cx(J,X(r)),dangerouslySetInnerHTML:{__html:a}}),n&&m.createElement("div",{className:G},m.createElement(o.SvgInfo,null),n))},$=function(e){var t=e.css,a=e.js,l=e.html;return c.renderToString(m.createElement("html",null,m.createElement("head",null,m.createElement("meta",{charSet:"utf-8"}),m.createElement("meta",{name:"viewport",content:"width=device-width,minimum-scale=1,initial-scale=1"}),t&&m.createElement("style",{dangerouslySetInnerHTML:{__html:t}})),m.createElement("body",null,l&&m.createElement("div",{dangerouslySetInnerHTML:{__html:l}})),m.createElement("script",{dangerouslySetInnerHTML:{__html:a}}),m.createElement("script",{dangerouslySetInnerHTML:{__html:"\n                            function resize() {\n                                window.frameElement.height = document.body.offsetHeight;\n                            }\n                            window.addEventListener('resize', resize);\n                            resize();\n                        "}}),m.createElement("script",{dangerouslySetInnerHTML:{__html:"\n                            var fonts = [].slice.apply(window.parent.document.styleSheets)\n                                .filter(function (sheet) { return sheet.ownerNode.className.indexOf(\"webfont\") > - 1; })\n                                .map(function (sheet) { return sheet.ownerNode.textContent; })\n                                .join(' ');\n                            var css = document.createElement('style');\n                            css.textContent = fonts;\n                            document.head.appendChild(css);\n                        "}})))},ee=t.css({name:"xc14i8-figureStyles",styles:"margin:0;;label:figureStyles;"}),te=t.css({name:"ta2q8u-fullWidthStyles",styles:"width:100%;;label:fullWidthStyles;"}),ae=t.css({name:"o2wys0-wrapperStyles",styles:"display:flex;align-items:center;padding:0 5px 5px 5px;;label:wrapperStyles;"}),le=function(e){return m.createElement("span",{className:(a=e.pillar,t.css("width:24px;height:23px;background-color:",0===a?f[a].bright:f[a].main,";border-radius:50%;display:inline-block;> svg{width:14px;height:auto;margin-left:auto;margin-right:auto;margin-top:6px;display:block;transform:translateY(0.0625rem);}"))},m.createElement(o.SvgVideo,null));var a},ne=function(e){var a,n=e.mediaDuration;return m.createElement("p",{className:(a=e.pillar,t.css("color:",0===a?f[a].bright:f[a].main,";",l.textSans.xsmall({fontWeight:"bold"})))},function(e){if(void 0===e||0===e)return"";var t=Number(e),a=Math.floor(t/3600),l=Math.floor(t%3600/60),n=Math.floor(t%3600%60),r=[];return a>0&&r.push(a),(l>0||0===a)&&r.push(l),n>0&&r.push(n),r.join(":")}(n))},re=function(e){var t=e.mediaDuration,a=e.pillar;return m.createElement("div",{className:ae},m.createElement(le,{pillar:a})," ",t&&m.createElement(ne,{mediaDuration:t,pillar:a}))},ie=function(e){var a=e.children;return m.createElement("div",{className:t.css("position:absolute;bottom:",n.space[3],";left:",n.space[3],";;label:className;")},a)},se=function(e){var a,l=e.pillar,n=e.duration;return m.createElement("div",{className:(a=e.image,t.css("background-image:url(",a,");background-size:cover;background-position:49% 49%;background-repeat:no-repeat;z-index:0;text-align:center;height:100%;width:100%;position:absolute;max-height:100vh;cursor:pointer;"))},m.createElement(ie,null,m.createElement(re,{mediaDuration:n,pillar:l})))},oe=function(e){var a=e.children;return m.createElement("div",{className:t.css("position:relative;padding-bottom:",e.height/e.width*100,"%;iframe{width:100%;height:100%;position:absolute;top:0;left:0;};label:className;")},a)},ce=t.css("height:26px;svg{fill:",r.neutral[100],";height:26px;width:26px;};label:iconStyle;"),de=t.css({name:"kvx5ty-answerWrapperStyles",styles:"display:flex;flex-direction:row;margin-bottom:6px;padding-top:12px;padding-bottom:12px;padding-left:20px;padding-right:20px;;label:answerWrapperStyles;"}),me=t.css(":hover{background-color:",r.neutral[86],";cursor:pointer;}:focus{background-color:",r.neutral[86],";",i.focusHalo,"};label:selectableAnswerStyles;"),ue=function(e){return t.css(l.body.medium(),";background-color:",r.neutral[97],";",e?"":me," ",de," padding-left:28px;")},pe=function(e){var a=e.id,l=e.onClick,n=e.disabled,r=e.answerText,s=e.onKeyPress;return m.createElement("div",null,m.createElement("label",{className:ue(n),onKeyPress:s,tabIndex:n?-1:0,htmlFor:"answer-"+a,"data-answerType":n?"unselected-disabled-answer":"unselected-enabled-answer",id:a,"data-testId":a},r),m.createElement("input",{type:"radio",tabIndex:-1,required:!0,id:"answer-"+a,onClick:l,disabled:n,className:t.css(i.visuallyHidden,";;label:className;")}))},ge=t.css("color:",r.neutral[100],";padding-left:8px;display:flex;flex-direction:column;;label:correctSelectedAnswerStyles;"),fe=function(e){var a=e.answerText,n=e.explainerText,r=e.id;return m.createElement("div",{className:t.css(de," background-color:rgb(61,181,64);;label:className;")},m.createElement("div",{className:ce},m.createElement(o.SvgCheckmark,null)),m.createElement("label",{className:ge,id:r,"data-testId":r,"data-answerType":"correct-selected-answer"},m.createElement("span",{className:t.css(l.body.medium(),";;label:className;")},a),m.createElement("span",{className:t.css(l.textSans.xsmall(),";label:className;")},n)))},be=t.css("color:",r.neutral[0],";padding-left:8px;display:flex;flex-direction:column;;label:nonSelectedCorrectAnswerLabelStyles;"),he=function(e){var a=e.answerText,n=e.explainerText,r=e.id;return m.createElement("div",{className:t.css(de," background-color:rgb(61,181,64,0.6);;label:className;")},m.createElement("label",{className:be,id:r,"data-testId":r,"data-answerType":"non-selected-correct-answer"},m.createElement("span",{className:t.css(l.body.medium(),";;label:className;")},a),m.createElement("span",{className:t.css(l.textSans.xsmall(),";label:className;")},n)))},ye=t.css("color:",r.neutral[100],";padding-left:8px;display:flex;flex-direction:column;",l.body.medium(),";;label:incorrectAnswerLabelStyles;"),xe=function(e){var a=e.answerText,l=e.id;return m.createElement("div",{className:t.css(de," background-color:",r.news[400],";;label:className;")},m.createElement("div",{className:ce},m.createElement(o.SvgCross,null)),m.createElement("label",{className:ye,id:l,"data-testId":l,"data-answerType":"incorrect-answer"},a))},ve=t.css({name:"1usw75q-fieldsetStyle",styles:"margin-bottom:12px;border:0px;padding:0px;;label:fieldsetStyle;"}),Ee=function(e){var n=e.text,r=e.imageUrl,i=e.answers,s=e.number,o=a.useState(void 0),c=o[0],d=o[1];return m.createElement("div",{className:t.css(l.body.medium(),";;label:className;")},m.createElement("fieldset",{className:ve},m.createElement("div",null,m.createElement("legend",{className:t.css({name:"19e1jvj-className",styles:"margin-bottom:12px;;label:className;"})},m.createElement("span",{className:t.css({name:"1kbwa6u-className",styles:"padding-right:12px;;label:className;"})},s+"."),n)),r&&m.createElement("img",{className:t.css({name:"17mnt1y-className",styles:"width:100%;;label:className;"}),src:r}),m.createElement("div",{className:t.css({name:"w284zz-className",styles:"position:relative;;label:className;"})},i.map(function(e,t){var a=void 0!==c;if(a){if(c===e.id){if(e.isCorrect)return m.createElement(fe,{id:e.id,answerText:e.text,explainerText:e.revealText||""});if(!e.isCorrect)return m.createElement(xe,{id:e.id,answerText:e.text})}return e.isCorrect?m.createElement(he,{id:e.id,answerText:e.text,explainerText:e.revealText||""}):m.createElement(pe,{id:e.id,disabled:!0,answerText:e.text})}return m.createElement(pe,{id:e.id,disabled:!1,answerText:e.text,onClick:function(){return d(e.id)},onKeyPress:function(t){"Enter"!==t.key||a||d(e.id)}})}))))},ke=t.css(":not(:last-child){border-left:0.0625rem solid ",n.neutral[60],";padding-bottom:",n.remSpace[4],";}padding-left:",n.space[4],"px;margin-left:",n.space[2],"px;;label:Snippet;"),we=t.css(l.body.medium({lineHeight:"tight",fontWeight:"bold"}),";;label:EventTitle;"),Ne=t.css("::before{",t.css("content:'';width:",n.space[4],"px;height:",n.space[4],"px;border-radius:100%;float:left;position:relative;left:-24px;background-color:#121212;;label:EventDateBullet;"),"}margin-left:-16px;background:",n.brandAlt[400],";",l.body.medium({lineHeight:"tight",fontWeight:"bold"}),";;label:EventDate;"),Se=t.css("background:",n.brandAlt[400],";",l.body.medium({lineHeight:"tight",fontWeight:"bold"}),";;label:EventToDate;"),Te=function(e){var t=e.pillar;return m.createElement("div",null,e.events.map(function(e,a){var l=new Date(Date.parse(e.date)).toISOString(),n=e.toDate?new Date(Date.parse(e.toDate)).toISOString():"";return m.createElement("div",{key:a,"data-type":"event-snippet",className:ke},m.createElement("div",null,m.createElement("time",{dateTime:l,className:Ne},e.date),e.toDate&&m.createElement("span",null," ","-"," ",m.createElement("time",{dateTime:n,className:Se},e.toDate))),e.title&&m.createElement("div",{className:we},e.title),e.body&&m.createElement(Z,{html:e.body,pillar:t}))}))};e.AudioAtom=function(e){var l=e.id,n=e.trackUrl,r=e.kicker,i=e.title,s=e.pillar,o=a.useRef(null),c=a.useState(!1),d=c[0],u=c[1],p=a.useState(0),g=p[0],f=p[1],w=a.useState(0),N=w[0],S=w[1];a.useEffect(function(){var e=function(){S(o.current?o.current.currentTime/o.current.duration*100:0),f(o.current?o.current.currentTime:0)};return o.current&&o.current.addEventListener("timeupdate",e),function(){return o.current?o.current.removeEventListener("timeupdate",e):void 0}},[o,f]);var D=a.useState(0),W=D[0],j=D[1];a.useEffect(function(){var e=function(){return j(o.current?o.current.duration:0)};return o.current&&o.current.addEventListener("loadeddata",e),function(){return o.current?o.current.removeEventListener("loadeddata",e):void 0}},[o,j]);var q=a.useRef(null);return a.useEffect(function(){var e=function(e){39===e.keyCode&&document.activeElement===q.current&&o.current&&(o.current.currentTime+=15),37===e.keyCode&&document.activeElement===q.current&&o.current&&(o.current.currentTime-=15)};return document.addEventListener("keydown",e),function(){return document.removeEventListener("keydown",e)}},[o,q]),m.createElement("figure",{className:h,"data-atom-id":l,"data-atom-type":"audio"},m.createElement("div",{className:b},m.createElement("div",{className:t.css({name:"1k6uwis-className",styles:"padding-left:5px;;label:className;"})},m.createElement("span",{className:y(s)},r),m.createElement("h4",{className:x},i)),m.createElement("div",{className:v},m.createElement("audio",{className:E,src:n,ref:o,"data-duration":W,"data-media-id":l||"_no_ids","data-title":x},m.createElement("p",null,"Sorry your browser does not support audio - but you can download here and listen https://audio.guim.co.uk/2020/05/05-61553-gnl.fw.200505.jf.ch7DW.mp3")),m.createElement("div",{className:k},d?m.createElement(L,{pillar:s,onClick:function(){u(!1),o.current&&o.current.pause()}}):m.createElement(M,{pillar:s,onClick:function(){o.current&&o.current.play(),u(!0)}})),m.createElement("div",{className:T},m.createElement("div",{className:C},m.createElement("span",{className:_},z(g))),m.createElement("div",{className:H},m.createElement("input",{className:I(s),ref:q,type:"range",min:"0",max:"100",step:"1",value:N,onClick:function(e){o.current&&(o.current.currentTime=o.current.duration/100*(e.nativeEvent.offsetX/e.currentTarget.offsetWidth*100))}})),m.createElement("div",{className:A},m.createElement("span",{className:_},z(W)))))))},e.ChartAtom=function(e){var a=e.id,l=e.html;return m.createElement("div",{"data-atom-id":a,"data-testid":"chart","data-atom-type":"chart","data-snippet-type":"chart",className:t.css("padding-bottom:",n.space[1],"px;margin-bottom:",n.space[2],"px;;label:className;")},m.createElement("iframe",{className:"atom__iframe",name:a,srcDoc:l,width:"100%",frameBorder:"0"}))},e.ExplainerAtom=function(e){var t=e.html;return m.createElement(u,{id:e.id},m.createElement(p,{title:e.title}),m.createElement(g,{html:t}))},e.GuideAtom=function(e){var t=e.pillar,a=e.likeHandler,l=e.dislikeHandler;return m.createElement(V,{id:e.id,title:e.title,pillar:t,atomType:"guide",atomTypeTitle:"Quick Guide",expandForStorybook:e.expandForStorybook,expandCallback:e.expandCallback},m.createElement(Z,{html:e.html,image:e.image,credit:e.credit,pillar:t}),m.createElement(F,{pillar:t,dislikeHandler:l,likeHandler:a}))},e.InteractiveAtom=function(e){return m.createElement("figure",{className:ee,"data-atom-id":e.id,"data-atom-type":"interactive"},m.createElement("iframe",{className:te,srcDoc:$({js:e.js,css:e.css,html:e.html}),frameBorder:"0"}))},e.ProfileAtom=function(e){var t=e.pillar,a=e.likeHandler,l=e.dislikeHandler;return m.createElement(V,{id:e.id,title:e.title,pillar:t,atomType:"profile",atomTypeTitle:"Profile",expandForStorybook:e.expandForStorybook,expandCallback:e.expandCallback},m.createElement(Z,{html:e.html,image:e.image,credit:e.credit,pillar:t}),m.createElement(F,{pillar:t,dislikeHandler:l,likeHandler:a}))},e.QandaAtom=function(e){var t=e.pillar,a=e.likeHandler,l=e.dislikeHandler;return m.createElement(V,{id:e.id,title:e.title,atomType:"qanda",atomTypeTitle:"Q&A",pillar:t,expandForStorybook:e.expandForStorybook,expandCallback:e.expandCallback},m.createElement(Z,{html:e.html,image:e.image,credit:e.credit,pillar:t}),m.createElement(F,{pillar:t,likeHandler:a,dislikeHandler:l}))},e.QuizAtom=function(e){return m.createElement("form",{"data-atom-id":e.id},e.questions.map(function(e,t){return m.createElement(Ee,{key:e.id,id:e.id,number:t+1,text:e.text,imageUrl:e.imageUrl,answers:e.answers})}))},e.TimelineAtom=function(e){var t=e.events,a=e.description,l=e.pillar,n=e.likeHandler,r=e.dislikeHandler;return m.createElement(V,{atomType:"timeline",atomTypeTitle:"Timeline",id:e.id,pillar:l,expandForStorybook:e.expandForStorybook,title:e.title,expandCallback:e.expandCallback},a&&m.createElement(Z,{html:a,pillar:l}),t&&m.createElement(Te,{events:t,pillar:l}),m.createElement(F,{pillar:l,dislikeHandler:r,likeHandler:n}))},e.YoutubeAtom=function(e){var t=e.format,a=e.videoMeta,l=e.overlayImage,n=e.adTargeting,r=e.height,i=void 0===r?259:r,s=e.width,o=void 0===s?460:s,c=e.title,d=void 0===c?"YouTube video player":c,u=e.duration,p=n&&JSON.stringify(function(e){return{adsConfig:{adTagParameters:{iu:""+(e.adUnit||""),cust_params:encodeURIComponent((t=e.customParams,Object.keys(t).map(function(e){var a=t[e];return e+"="+(Array.isArray(a)?a.map(function(e){return encodeURIComponent(e)}).join(","):encodeURIComponent(a))}).join("&")))}}};var t}(n));return m.createElement("div",null,m.createElement(oe,{height:i,width:o},l&&m.createElement(se,{image:l,pillar:t.pillar,duration:u}),m.createElement("iframe",{title:d,width:o,height:i,src:"https://www.youtube.com/embed/"+a.assetId+"?embed_config="+p+"&enablejsapi=1&origin=https://www.theguardian.com&widgetid=1&modestbranding=1"})))}});
 //# sourceMappingURL=index.umd.js.map

package.json

 {
     "name": "@guardian/atoms-rendering",
-    "version": "1.12.0",
+    "version": "1.13.0",
     "source": "src/index.ts",
@@ -27,3 +27,3 @@ "main": "dist/index.js",
         "@babel/plugin-transform-runtime": "^7.9.6",
-        "@babel/preset-react": "^7.9.4",
+        "@babel/preset-react": "^7.10.4",
         "@babel/preset-typescript": "^7.9.0",
@@ -38,4 +38,4 @@ "@guardian/src-foundations": "^1.0.1",
         "@testing-library/react": "^10.0.4",
-        "@types/jest": "^25.2.3",
-        "@typescript-eslint/eslint-plugin": "^3.0.1",
+        "@types/jest": "^26.0.14",
+        "@typescript-eslint/eslint-plugin": "^4.0.0",
         "@typescript-eslint/parser": "^3.0.1",
@@ -45,3 +45,3 @@ "babel-loader": "^8.1.0",
         "babel-plugin-emotion": "^10.0.33",
-        "chromatic": "^5.0.0",
+        "chromatic": "^5.2.0",
         "emotion": "^10.0.27",
@@ -54,3 +54,3 @@ "eslint": "^7.1.0",
         "husky": "^4.2.5",
-        "jest": "^26.0.1",
+        "jest": "^26.5.2",
         "jest-environment-jsdom-sixteen": "^1.0.3",
@@ -57,0 +57,0 @@ "microbundle": "^0.12.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

319359

increased by0.04%

Number of medium supply chain risk alerts

1

decreased by-66.67%

No dependency changes