{"version":3,"sources":["webpack:///./src/components/ShortWidePromo/index.tsx"],"names":["title","content","image","link","themeColor","buttonType","buttonColour","disableUppercase","promoBackground","setPromoBackground","buttonStyle","setButtonStyle","toLowerCase","split","background","colour","replace","className","aspectRatio","aspectRatioMobile","containerTheme","isButton","iconAfter","isExternal","reference"],"mappings":"woBAoFe,UA/EQ,SAAC,G,IACtBA,EAAK,QACLC,EAAO,UACPC,EAAK,QACLC,EAAI,OACJC,EAAU,aACVC,EAAU,aACVC,EAAY,eACZC,EAAgB,mBAEV,IAAwC,mBAAS,WAAU,GAA1DC,EAAe,KAAEC,EAAkB,KACpC,IAAgC,mBAAiD,SAAQ,GAAxFC,EAAW,KAAEC,EAAc,KA0BlC,OAxBA,qBAAU,WACR,GAAMN,GAA6B,cAAfA,IAA+BH,EAKnD,GAAKI,EAAL,CAKA,IAAKJ,IAAUI,EAGb,OAFAG,EAAmB,gBACnBE,EAAe,SAIX,QAAuBL,EAAaM,cAAcC,MAAM,MAAK,GAA5DC,EAAU,KAAEC,EAAM,KACzBN,EAAmBK,EAAWE,QAAQ,IAAK,MACvCD,GACFJ,EAAeI,EAAOC,QAAQ,UAAW,UAbzCP,EAAmB,gBALnBA,EAAmB,cAoBpB,IAGD,yBAAKQ,UAAW,sCAAyCT,GACtDN,GAA6B,aAApBM,GACR,yBAAKS,UAAU,8BACb,kBAAC,IAAD,CACEf,MAAOA,EACPgB,YAAY,MACZC,kBAAkB,eAKxB,yBAAKF,UAAU,6BACb,yBAAKA,UAAU,0BACb,yBAAKA,UAAW,4BAA2BV,EAAmB,sCAAwC,KAAOP,GAC5GC,GACC,yBAAKgB,UAAU,+BACb,kBAAC,IAAD,CAAUhB,QAASA,EAASmB,eAAgBhB,MAKjDD,GACC,yBAAKc,UAAU,0BACb,kBAAC,IAAD,KACMd,EADN,CAEEc,UAAWV,EAAmB,sCAAwC,GACtEF,WAAYA,EACZC,aAAcI,EACdW,SAAyB,iBAAfhB,GAAgD,iBAAfA,EAC3CiB,UAAW,CACTtB,MAAOG,EAAKoB,WAAa,gBAAkB,GAC3CC,UAAW","file":"habitat.61.component.js","sourcesContent":["import React, { useEffect, useState } from 'react';\r\nimport { ImageWithFocalPoint, Link, RichText } from '../common';\r\nimport './styles.scss';\r\nimport ShortWidePromoProps from './type';\r\n\r\nconst ShortWidePromo = ({\r\n  title,\r\n  content,\r\n  image,\r\n  link,\r\n  themeColor,\r\n  buttonType,\r\n  buttonColour,\r\n  disableUppercase,\r\n}: ShortWidePromoProps) => {\r\n  const [promoBackground, setPromoBackground] = useState('blue-bg');\r\n  const [buttonStyle, setButtonStyle] = useState<'white' | 'blue' | 'black' | undefined>('white');\r\n\r\n  useEffect(() => {\r\n    if ((!buttonType || buttonType === 'text-link') && image) {\r\n      setPromoBackground('image-bg');\r\n      return;\r\n    }\r\n\r\n    if (!buttonColour) {\r\n      setPromoBackground('blue-bg');\r\n      return;\r\n    }\r\n\r\n    if (!image && !buttonColour) {\r\n      setPromoBackground('blue-bg');\r\n      setButtonStyle('white');\r\n      return;\r\n    }\r\n\r\n    const [background, colour] = buttonColour.toLowerCase().split(', ');\r\n    setPromoBackground(background.replace(' ', '-'));\r\n    if (colour) {\r\n      setButtonStyle(colour.replace(' button', '') as 'white' | 'blue' | 'black' | undefined);\r\n    }\r\n  }, []);\r\n\r\n  return (\r\n    <div className={`short-wide-promo ${`short-wide-promo--${promoBackground}`}`}>\r\n      {image && promoBackground === 'image-bg' && (\r\n        <div className=\"short-wide-promo__bg-image\">\r\n          <ImageWithFocalPoint\r\n            image={image}\r\n            aspectRatio=\"6x1\"\r\n            aspectRatioMobile=\"6x7-promo\"\r\n          />\r\n        </div>\r\n      )}\r\n\r\n      <div className=\"short-wide-promo__content\">\r\n        <div className=\"short-wide-promo__body\">\r\n          <div className={`short-wide-promo__title ${disableUppercase ? 'short-wide-promo--disable-uppercase' : ''}`}>{title}</div>\r\n          {content && (\r\n            <div className=\"short-wide-promo__rich-text\">\r\n              <RichText content={content} containerTheme={themeColor} />\r\n            </div>\r\n          )}\r\n        </div>\r\n\r\n        {link && (\r\n          <div className=\"short-wide-promo__link\">\r\n            <Link\r\n              {...link}\r\n              className={disableUppercase ? 'short-wide-promo--disable-uppercase' : ''}\r\n              buttonType={buttonType}\r\n              buttonColour={buttonStyle}\r\n              isButton={buttonType === 'small-button' || buttonType === 'large-button'}\r\n              iconAfter={{\r\n                title: link.isExternal ? 'External link' : '',\r\n                reference: '#icon-think-arrow',\r\n              }}\r\n            />\r\n          </div>\r\n        )}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default ShortWidePromo;\r\n"],"sourceRoot":""}