{"version":3,"sources":["webpack:///./src/components/modules/checkbox-list/checkbox-list.js","webpack:///./src/components/modules/sidebar-contents/sidebar-contents.js","webpack:///./src/templates/simple-step/simple-step.js"],"names":["CheckboxList","items","className","map","i","rawValue","key","SidebarContents","headers","useState","isActive","setIsActive","goToElement","e","preventDefault","targetId","target","getAttribute","document","getElementById","scrollIntoView","aria-label","onClick","length","header","data-target","convertToId","href","inject","observer","regionStore","data","wagtail","page","title","subtitle","seoTitle","description","canonicalUrl","simpleStepContent","validInEngland","validInScotland","contentsHeaders","setContentsHeaders","isEngland","isScotland","isNotRelevantToRegion","useEffect","body","querySelector","addIdsToH2s","querySelectorAll","innerHTML","redirectToAppropriateRegion","parsedBody","DOMParser","parseFromString","heading","setAttribute","textContent","canonical","element","type","isCheckboxList","isCallout","dangerouslySetInnerHTML","__html","replace","blocks","subheader","calloutStyle"],"mappings":"qKAAA,6EAMaA,GANb,UAM4B,SAAC,GAAD,IAAGC,EAAH,EAAGA,MAAH,OAC1B,wBAAIC,UAAU,iBACXD,EAAME,KAAI,WAAeC,GAAf,IAAGC,EAAH,EAAGA,SAAH,OACT,wBAAIC,IAAKF,GAAIC,U,kCCTnB,4FAQaE,GARb,UAQ+B,SAAC,GAA2B,IAAzBC,EAAyB,EAAzBA,QAASN,EAAgB,EAAhBA,UAAgB,EACzBO,oBAAS,GAAlCC,EADkD,KACxCC,EADwC,KAQnDC,EAAc,SAAAC,GAClBA,EAAEC,iBACF,IAAMC,EAAWF,EAAEG,OAAOC,aAAa,eACvCC,SAASC,eAAeJ,GAAUK,kBAGpC,OACE,2BAAOlB,UAAS,oBAAsBA,GACpC,4BAAQA,UAAU,6BAChB,wBAAIA,UAAU,uBAAd,YAEA,4BACEA,UAAS,4HAKLQ,EAAW,YAAc,IALpB,eAOTW,aAAW,yBACXC,QAzBc,SAAAT,GACpBA,EAAEC,iBACFH,GAAaD,KAyBNA,EAAW,QAAU,SAI1B,6BAEA,0BAAMW,aAAW,0BACdb,EAAQe,OACP,yBACEF,aAAW,wBACXnB,UAAS,0DAELQ,EAAW,GAAK,aAFX,kBAKT,4BACGF,EAAQL,KAAI,SAAAqB,GAAM,OACjB,wBAAIlB,IAAKkB,GACP,uBACEC,cAAaC,sBAAYF,GACzBG,KAAI,IAAMD,sBAAYF,GACtBF,QAASV,GAERY,SAOX,0D,k+BCvDKI,sBAAO,cAAPA,CACbC,aAAS,YAA2B,IAAxBC,EAAwB,EAAxBA,YAAwB,IAAXC,KAUdC,QAAQC,KARfC,EAFgC,EAEhCA,MACAC,EAHgC,EAGhCA,SACAC,EAJgC,EAIhCA,SACAC,EALgC,EAKhCA,YACAC,EANgC,EAMhCA,aACAC,EAPgC,EAOhCA,kBACAC,EARgC,EAQhCA,eACAC,EATgC,EAShCA,gBATgC,EAYYhC,mBAAS,IAAhDiC,EAZ2B,KAYVC,EAZU,KAc1BC,EAA0Bd,EAA1Bc,UAAWC,EAAef,EAAfe,WAEbC,EACHF,IAAcJ,GAAoBK,IAAeJ,EAEpDM,qBAAU,WACR,IAAMC,EAAO9B,SAAS+B,cAAc,qBACpCC,EAAYF,GACZL,EACE,YAAIK,EAAKG,iBAAiB,OAAOhD,KAAI,qBAAGiD,gBAEzC,IAEHL,qBAAU,WACJD,GACFO,sCAA4BT,EAAWC,MAI3C,IAAMK,EAAc,SAAAF,GAMlB,IALA,IAKA,EALMM,GAAa,IAAIC,WAAYC,gBACjCR,EAAKI,UACL,aAGF,IADmBE,EAAWH,iBAAiB,SAC/C,aAAgC,KAAvBM,EAAuB,QAC9BA,EAAQC,aAAa,KAAMhC,sBAAY+B,EAAQE,cAEjDX,EAAKI,UAAYE,EAAWN,KAAKI,WAGnC,OACE,kBAAC,UAAD,KACE,kBAAC,MAAD,CACElB,MAAK,iBAAmBE,EACxBC,YAAaA,EACbuB,UAAWtB,IAGZC,GACC,yBAAKrC,UAAU,mBACb,yBAAKA,UAAU,2CACb,wBAAIA,UAAU,qBACXgC,EACD,0BAAMhC,UAAU,2BAA2BiC,KAI/C,kBAAC,kBAAD,CACEjC,UAAU,+BACVM,QAASkC,IAGX,yBAAKxC,UAAU,uDACZqC,EAAkBpC,KAAI,SAAC0D,EAASzD,GAC/B,IAAM0D,EAAOD,EAAO,WAEdE,EAA0B,cAATD,EACjBE,EAAqB,gBAATF,EAElB,GAJ6B,kBAATA,EAKlB,OACE,yBACExD,IAAKF,EACL6D,wBAAyB,CACvBC,OAAQL,EAAQxD,SACb8D,QAAQ,OAAQ,YAChBA,QAAQ,SAAU,gBAItB,GAAIJ,EACT,OAAO,kBAAC,eAAD,CAAczD,IAAKF,EAAGH,MAAO4D,EAAQ5D,QACvC,GAAI+D,EAAW,CACpB,IAAMxC,EAASqC,EAAQO,OAAO,GAAG/D,SAC3BgE,EAAYR,EAAQO,OAAO,GAAG/D,SAC9BiE,EAAeT,EAAQO,OAAO,GAAG/D,SACjC2C,EAAOa,EAAQO,OAAO,GAAG/D,SAE/B,OACE,yBAAKC,IAAKF,EAAGF,UAAS,MAAQoE,GAC5B,4BAAK9C,GACJ6C,GAAa,4BAAKA,GACnB,yBACEJ,wBAAyB,CACvBC,OAAQlB,EACLmB,QAAQ,OAAQ,YAChBA,QAAQ,SAAU","file":"component---src-templates-simple-step-simple-step-js-4be73b7e949fb2c44fb3.js","sourcesContent":["import React from \"react\"\n\nimport PropTypes from \"prop-types\"\n\nimport \"./checkbox-list.scss\"\n\nexport const CheckboxList = ({ items }) => (\n  <ul className=\"checkbox-list\">\n    {items.map(({ rawValue }, i) => (\n      <li key={i}>{rawValue}</li>\n    ))}\n  </ul>\n)\n\nCheckboxList.propTypes = {\n  items: PropTypes.array,\n}\n","import React, { useState } from \"react\"\n\nimport PropTypes from \"prop-types\"\n\nimport { convertToId } from \"../../../helpers/helpers\"\n\nimport \"./sidebar-contents.scss\"\n\nexport const SidebarContents = ({ headers, className }) => {\n  const [isActive, setIsActive] = useState(false)\n\n  const handleOnClick = e => {\n    e.preventDefault()\n    setIsActive(!isActive)\n  }\n\n  const goToElement = e => {\n    e.preventDefault()\n    const targetId = e.target.getAttribute(\"data-target\")\n    document.getElementById(targetId).scrollIntoView()\n  }\n\n  return (\n    <aside className={`sidebar-contents ${className}`}>\n      <header className=\"d-flex align-items-center\">\n        <h3 className=\"d-inline-block mb-0\">Contents</h3>\n\n        <button\n          className={`\n            btn \n            btn-light \n            btn-sm \n            sidebar-contents-header-link \n            ${isActive ? \"is-active\" : \"\"}\n          `}\n          aria-label=\"Open table of contents\"\n          onClick={handleOnClick}\n        >\n          {isActive ? \"Close\" : \"Open\"}\n        </button>\n      </header>\n\n      <hr />\n\n      <main aria-label=\"table of contents main\">\n        {headers.length ? (\n          <nav\n            aria-label=\"table of contents nav\"\n            className={`\n              sidebar-contents-list \n              ${isActive ? \"\" : \"is-hidden\"}\n            `}\n          >\n            <ul>\n              {headers.map(header => (\n                <li key={header}>\n                  <a\n                    data-target={convertToId(header)}\n                    href={`#${convertToId(header)}`}\n                    onClick={goToElement}\n                  >\n                    {header}\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </nav>\n        ) : (\n          <p>No contents available.</p>\n        )}\n      </main>\n    </aside>\n  )\n}\n\nSidebarContents.propTypes = {\n  headers: PropTypes.array,\n  className: PropTypes.string,\n}\n","import React, { useEffect, useState } from \"react\"\n\nimport { inject, observer } from \"mobx-react\"\nimport { graphql } from \"gatsby\"\n\nimport { Wrapper } from \"../../components/base/wrapper/wrapper\"\nimport { SEO } from \"../../components/base/seo/seo\"\nimport { SidebarContents } from \"../../components/modules/sidebar-contents/sidebar-contents\"\nimport { CheckboxList } from \"../../components/modules/checkbox-list/checkbox-list\"\nimport { convertToId, redirectToAppropriateRegion } from \"../../helpers/helpers\"\n\nimport \"./simple-step.scss\"\n\nexport default inject(\"regionStore\")(\n  observer(({ regionStore, data }) => {\n    const {\n      title,\n      subtitle,\n      seoTitle,\n      description,\n      canonicalUrl,\n      simpleStepContent,\n      validInEngland,\n      validInScotland,\n    } = data.wagtail.page\n\n    const [contentsHeaders, setContentsHeaders] = useState([])\n\n    const { isEngland, isScotland } = regionStore\n\n    const isNotRelevantToRegion =\n      (isEngland && !validInEngland) || (isScotland && !validInScotland)\n\n    useEffect(() => {\n      const body = document.querySelector(\".simple-step-body\")\n      addIdsToH2s(body)\n      setContentsHeaders(\n        [...body.querySelectorAll(\"h2\")].map(({ innerHTML }) => innerHTML)\n      )\n    }, [])\n\n    useEffect(() => {\n      if (isNotRelevantToRegion) {\n        redirectToAppropriateRegion(isEngland, isScotland)\n      }\n    })\n\n    const addIdsToH2s = body => {\n      const parsedBody = new DOMParser().parseFromString(\n        body.innerHTML,\n        \"text/html\"\n      )\n      const h2Elements = parsedBody.querySelectorAll(\"h2\")\n      for (let heading of h2Elements) {\n        heading.setAttribute(\"id\", convertToId(heading.textContent))\n      }\n      body.innerHTML = parsedBody.body.innerHTML\n    }\n\n    return (\n      <Wrapper>\n        <SEO\n          title={`Simple Step - ${seoTitle}`}\n          description={description}\n          canonical={canonicalUrl}\n        />\n\n        {simpleStepContent && (\n          <div className=\"row simple-step\">\n            <div className=\"col col-md-8 printable offset-md-3 mb-3\">\n              <h1 className=\"simple-step-title\">\n                {title}\n                <span className=\"ml-3 font-weight-normal\">{subtitle}</span>\n              </h1>\n            </div>\n\n            <SidebarContents\n              className=\"col-12 col-md-3 d-print-none\"\n              headers={contentsHeaders}\n            />\n\n            <div className=\"col offset-md-3 printable col-md-8 simple-step-body\">\n              {simpleStepContent.map((element, i) => {\n                const type = element[\"__typename\"]\n                const isParagraph = type === \"RichTextBlock\"\n                const isCheckboxList = type === \"ListBlock\"\n                const isCallout = type === \"StructBlock\"\n\n                if (isParagraph) {\n                  return (\n                    <div\n                      key={i}\n                      dangerouslySetInnerHTML={{\n                        __html: element.rawValue\n                          .replace(/<b>/g, \"<strong>\")\n                          .replace(/<\\/b>/g, \"</strong>\"),\n                      }}\n                    />\n                  )\n                } else if (isCheckboxList) {\n                  return <CheckboxList key={i} items={element.items} />\n                } else if (isCallout) {\n                  const header = element.blocks[0].rawValue\n                  const subheader = element.blocks[1].rawValue\n                  const calloutStyle = element.blocks[2].rawValue\n                  const body = element.blocks[3].rawValue\n\n                  return (\n                    <div key={i} className={`ss-${calloutStyle}`}>\n                      <h3>{header}</h3>\n                      {subheader && <h4>{subheader}</h4>}\n                      <div\n                        dangerouslySetInnerHTML={{\n                          __html: body\n                            .replace(/<b>/g, \"<strong>\")\n                            .replace(/<\\/b>/g, \"</strong>\"),\n                        }}\n                      />\n                    </div>\n                  )\n                }\n              })}\n            </div>\n          </div>\n        )}\n      </Wrapper>\n    )\n  })\n)\n\nexport const query = graphql`\n  query($slug: String) {\n    wagtail {\n      page(slug: $slug) {\n        ... on SimpleStep {\n          id\n          seoTitle\n          title\n          subtitle\n          description\n          canonicalUrl\n          validInEngland\n          validInScotland\n          simpleStepContent {\n            ... on RichTextBlock {\n              id\n              rawValue\n            }\n            ... on StructBlock {\n              blocks {\n                ... on ChoiceBlock {\n                  rawValue\n                }\n                ... on CharBlock {\n                  rawValue\n                }\n                ... on RichTextBlock {\n                  id\n                  rawValue\n                }\n              }\n            }\n            ... on ListBlock {\n              id\n              items {\n                rawValue\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n`\n"],"sourceRoot":""}