@nationalarchives/frontend 0.1.5-prerelease → 0.1.7-prerelease

package/README.md

@@ -2,7 +2,7 @@
 
 # The National Archives Frontend
 
-[![Main build status](https://github.com/nationalarchives/tna-frontend/actions/workflows/ci.yml/badge.svg?branch=main&event=push)](https://github.com/nationalarchives/tna-frontend/actions/workflows/test.yml?query=branch%3Amain)
+[![Main build status](https://github.com/nationalarchives/tna-frontend/actions/workflows/ci.yml/badge.svg?branch=main&event=push)](https://github.com/nationalarchives/tna-frontend/actions/workflows/ci.yml?query=branch%3Amain)
 [![Latest release](https://img.shields.io/github/v/release/nationalarchives/tna-frontend?style=flat-square&logo=github&logoColor=white&sort=semver)](https://github.com/nationalarchives/tna-frontend/releases)
 [![NPM version](https://img.shields.io/npm/v/@nationalarchives/frontend?style=flat-square&logo=npm&logoColor=white)](https://www.npmjs.com/package/@nationalarchives/frontend)
 [![Node version](https://img.shields.io/node/v-lts/@nationalarchives/frontend?style=flat-square&logo=nodedotjs&logoColor=white)](https://github.com/nationalarchives/tna-frontend/blob/main/.nvmrc)

package/govuk-prototype-kit.config.json

@@ -9,6 +9,21 @@
     "/nationalarchives/assets"
   ],
   "sass": [
-    "/nationalarchives/_prototype-kit.scss"
+    "/nationalarchives/all.scss"
+  ],
+  "stylesheets": [
+    "/nationalarchives/all.css"
+  ],
+  "templates": [
+    {
+      "name": "Homepage",
+      "path": "/nationalarchives/templates/homepage.njk",
+      "type": "nunjucks"
+    },
+    {
+      "name": "Search results",
+      "path": "/nationalarchives/templates/search-results.njk",
+      "type": "nunjucks"
+    }
   ]
 }

package/nationalarchives/all.css

@@ -1 +1 @@
-@import"https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Roboto+Mono:wght@500;700&display=swap";.tna-template{min-width:320px;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}@media(prefers-reduced-motion){.tna-template *{animation:none !important;transition:none !important}}.tna-template__body{margin:0;padding:0;background-color:#fff;overflow:auto}img,svg,video,canvas{max-width:100%;display:block}video,canvas{width:100%}.tna-template{font-family:"Open Sans",sans-serif;font-size:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:none;direction:ltr}.tna-template__body{font-size:1rem;line-height:1.6}.tna-heading--xl{font-size:4rem}.tna-heading--l{font-size:2rem}.tna-heading--m{font-size:1.3rem}.tna-heading--s{font-size:1.125rem}.tna-hgroup--xl .tna-hgroup__title{font-size:4rem}.tna-hgroup--l .tna-hgroup__title{font-size:2rem}.tna-hgroup--m .tna-hgroup__title{font-size:1.3rem}.tna-hgroup--s .tna-hgroup__title{font-size:1.125rem}.tna-hgroup__supertitle{text-transform:uppercase}.tna-button{padding:.25rem 1rem;display:inline-block;color:#fff;text-decoration:none;background-color:#000}.tna-button:hover{background-color:#069}.tna-button--secondary{color:#000;background-color:#ff0}.tna-button--secondary:hover{color:#fff}.tna-card{display:-ms-flexbox;display:flex;-ms-box-orient:vertical;-ms-flex-direction:column;flex-direction:column}.tna-card__heading{order:2}.tna-card__image{order:1}.tna-card__body{order:3}.tna-card__actions{order:4}.tna-footer{padding-top:3rem;padding-bottom:3rem;color:#fff;background-color:#26262a}.tna-footer__link{color:inherit}.tna-footer__link:hover{color:#f0a}.tna-footer__navigation{padding-bottom:3rem}.tna-footer__navigation-group-items{padding-left:0;list-style:none}.tna-footer__social{padding-bottom:4rem}.tna-footer__social-item{text-align:center}.tna-footer__licence-logo{display:block}.tna-footer__govuk-link{display:inline-block;color:inherit;fill:#fff}.tna-footer__govuk-link:hover{color:#f0a;fill:#f0a}.tna-footer__govuk-logotype-crown{margin:0 auto;display:block;fill:inherit}.tna-container{max-width:75.25rem;width:100%;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem;box-sizing:border-box;display:-ms-flexbox;display:flex;flex-wrap:wrap;justify-content:stretch;align-items:stretch}.tna-container.tna-container--max{max-width:none}.tna-container.tna-container--no-padding{max-width:71.25rem;padding-right:0;padding-left:0}.tna-container.tna-container--no-padding .tna-column{padding-right:0;padding-left:0}.tna-column{padding-right:1rem;padding-left:1rem;box-sizing:border-box}.tna-column.tna-column--full{width:100%}.tna-column--flex-1{flex:1 0}.tna-column--flex-2{flex:2 0}.tna-column--flex-3{flex:3 0}.tna-column--width-1-12{width:8.3333333333%}.tna-column--width-1-6{width:16.6666666667%}.tna-column--width-1-4{width:25%}.tna-column--width-1-3{width:33.3333333333%}.tna-column--width-5-12{width:41.6666666667%}.tna-column--width-1-2{width:50%}.tna-column--width-7-12{width:58.3333333333%}.tna-column--width-2-3{width:66.6666666667%}.tna-column--width-3-4{width:75%}.tna-column--width-5-6{width:83.3333333333%}.tna-column--width-11-12{width:91.6666666667%}@media(min-width: 769px)and (max-width: 1024px){.tna-column--width-full-medium{width:100%}.tna-column--flex-1-medium{flex:1 0}.tna-column--flex-2-medium{flex:2 0}.tna-column--flex-3-medium{flex:3 0}.tna-column--width-1-6-medium{width:16.6666666667%}.tna-column--width-1-3-medium{width:33.3333333333%}.tna-column--width-1-2-medium{width:50%}.tna-column--width-2-3-medium{width:66.6666666667%}.tna-column--width-5-6-medium{width:83.3333333333%}}@media(max-width: 768px){.tna-container{padding-right:1.125rem;padding-left:1.125rem}.tna-column{padding-right:.375rem;padding-left:.375rem}}@media(min-width: 481px)and (max-width: 768px){.tna-column--width-full-small{width:100%}.tna-column--flex-1-small{flex:1 0}.tna-column--flex-2-small{flex:2 0}.tna-column--flex-3-small{flex:3 0}.tna-column--width-1-4-small{width:25%}.tna-column--width-1-2-small{width:50%}.tna-column--width-3-4-small{width:75%}}@media(max-width: 480px){.tna-column--width-full-tiny{width:100%}.tna-column--flex-1-tiny{width:auto;flex:1 0}.tna-column--flex-2-tiny{width:auto;flex:2 0}.tna-column--flex-3-tiny{width:auto;flex:3 0}.tna-column--width-1-2-tiny{width:50%}}.tna-sensitive-image__details{position:relative}.tna-sensitive-image__details::after{width:100%;padding-bottom:calc(100%*var(--sensitive-image-height)/var(--sensitive-image-width));display:block;position:relative;z-index:-1;background-image:var(--sensitive-image);background-clip:padding-box;background-size:contain;filter:blur(20px) saturate(0);content:""}.tna-sensitive-image__show{display:flex;align-items:center;justify-content:center;position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;font-size:0;cursor:pointer}.tna-sensitive-image__show::after{padding:.5rem 2rem;font-size:1rem;background-color:#ff0;content:attr(data-action)}.tna-sensitive-image__show:hover::after{color:#fff;background-color:#000}.tna-sensitive-image__image{width:100%}.tna-sensitive-image__details[open]::after,.tna-sensitive-image__details[open] .tna-sensitive-image__show{display:none}/*# sourceMappingURL=all.css.map */
+@import"https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Roboto+Mono:wght@500;700&display=swap";@import"https://use.typekit.net/hkj3kuz.css";.tna-template{min-width:320px;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;font-size:16}@media(prefers-reduced-motion){.tna-template *{animation:none !important;transition:none !important}}.tna-template__body{margin:0;padding:0;background-color:#fff;overflow:auto}img,svg,video,canvas{max-width:100%;display:block}video,canvas{width:100%}*:focus{outline:3px #f0a solid}.tna-template{font-family:"Open Sans",sans-serif;font-weight:400;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:none;direction:ltr}.tna-template p{margin:0 0 2rem}.tna-template p:last-child{margin-bottom:0}.tna-template a:active{text-decoration-thickness:4px}.tna-template a:hover{text-decoration-thickness:3px}.tna-template .tna-template__body{font-size:1rem;line-height:1.6}.tna-template .tna-ul,.tna-template .tna-ol{padding-left:2rem}.tna-template .tna-ul li::marker,.tna-template .tna-ol li::marker{color:#f0a;font-weight:700}.tna-template .tna-ul--plain,.tna-template .tna-ol--plain{padding-left:0;list-style:none}.tna-template .tna-heading{margin-top:0;margin-bottom:1.5rem;font-family:supria-sans-condensed,monospace;font-weight:600}.tna-template .tna-heading:last-child{margin-bottom:0}.tna-template .tna-heading--xl{font-size:4rem;line-height:1}.tna-template .tna-heading--l{font-size:2rem;line-height:1.2}.tna-template .tna-heading--m{font-size:1.25rem;line-height:1.4}.tna-template .tna-heading--s{font-size:1.125rem;line-height:1.6}.tna-template .tna-hgroup{margin-bottom:2rem}.tna-template .tna-hgroup:last-child{margin-bottom:0}.tna-template .tna-hgroup__supertitle{margin:0;font-size:0.875rem;font-family:"Roboto Mono",monospace;font-weight:500;text-transform:uppercase}.tna-template .tna-hgroup__title{margin:0}.tna-template .tna-hgroup__title .tna-hgroup__supertitle{display:block}.tna-template .tna-hgroup--xl .tna-hgroup__title{font-size:4rem}.tna-template .tna-hgroup--l .tna-hgroup__title{font-size:2rem}.tna-template .tna-hgroup--m .tna-hgroup__title{font-size:1.25rem}.tna-template .tna-hgroup--s .tna-hgroup__title{font-size:1.125rem}.tna-button{padding:.25rem 1rem;display:inline-block;color:#fff;font-weight:700;text-decoration:none;background-color:#000}.tna-button:hover{background-color:#069}.tna-button--secondary{color:#000;background-color:#ff0}.tna-button--secondary:hover{color:#fff}.tna-card__inner{display:-ms-flexbox;display:flex;-ms-box-orient:vertical;-ms-flex-direction:column;flex-direction:column}.tna-card__heading{order:2}.tna-card__title{order:2}.tna-card__image-container{order:1}.tna-card__body{order:3}.tna-card__actions{margin-top:2rem;order:4}.tna-card--featured{position:relative;background-color:#ff0}.tna-card--featured .tna-card__inner{margin-left:50%;padding:2rem}.tna-card--featured .tna-card__heading{padding-bottom:2rem;border-bottom:2px #000 solid}.tna-card--featured .tna-card__image-container{position:absolute;inset:0 50% 0 0}.tna-card--featured .tna-card__image{width:100%;height:100%;object-fit:cover}.tna-footer{padding-top:3rem;padding-bottom:3rem;color:#fff;background-color:#26262a}.tna-footer__link{color:inherit}.tna-footer__link:hover{color:#f0a}.tna-footer__navigation{padding-bottom:3rem}.tna-footer__navigation-group-items{padding-left:0;list-style:none}.tna-footer__social{padding-bottom:4rem}.tna-footer__social.tna-container{align-items:flex-end}.tna-footer__social-item{text-align:center}.tna-footer__social-item-link{display:block}.tna-footer__social-item-link-image{display:block}.tna-footer__licence.tna-container{align-items:center}.tna-footer__licence-logo{display:block}.tna-footer__govuk-link{display:inline-block;color:inherit;fill:#fff}.tna-footer__govuk-link:hover{color:#f0a;fill:#f0a}.tna-footer__govuk-logotype-crown{margin:0 auto;display:block;fill:inherit}.tna-container{max-width:75.25rem;width:100%;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem;box-sizing:border-box;display:-ms-flexbox;display:flex;flex-wrap:wrap;justify-content:stretch;align-items:stretch}.tna-container--no-padding,.tna-container--no-padding-all{max-width:71.25rem}.tna-container--max{max-width:none}.tna-column{padding-right:1rem;padding-left:1rem;box-sizing:border-box}.tna-column--full{width:100%}.tna-column--container{display:-ms-flexbox;display:flex;flex-wrap:wrap;justify-content:stretch;align-items:stretch}.tna-column--flex-1{flex:1 0}.tna-column--flex-2{flex:2 0}.tna-column--flex-3{flex:3 0}.tna-container--no-padding,.tna-container--no-padding-all,.tna-container--no-padding-all>.tna-column,.tna-column--no-padding,.tna-column--container--no-padding-all,.tna-column--container--no-padding-all>.tna-column{padding-right:0;padding-left:0}.tna-column--width-1-12{width:8.3333333333%;flex:none}.tna-column--width-1-6{width:16.6666666667%;flex:none}.tna-column--width-1-4{width:25%;flex:none}.tna-column--width-1-3{width:33.3333333333%;flex:none}.tna-column--width-5-12{width:41.6666666667%;flex:none}.tna-column--width-1-2{width:50%;flex:none}.tna-column--width-7-12{width:58.3333333333%;flex:none}.tna-column--width-2-3{width:66.6666666667%;flex:none}.tna-column--width-3-4{width:75%;flex:none}.tna-column--width-5-6{width:83.3333333333%;flex:none}.tna-column--width-11-12{width:91.6666666667%;flex:none}@media(min-width: 769px)and (max-width: 1024px){.tna-column--full-medium{width:100%;flex:none}.tna-column--flex-1-medium{flex:1 0}.tna-column--flex-2-medium{flex:2 0}.tna-column--flex-3-medium{flex:3 0}.tna-column--width-1-6-medium{width:16.6666666667%;flex:none}.tna-column--width-1-3-medium{width:33.3333333333%;flex:none}.tna-column--width-1-2-medium{width:50%;flex:none}.tna-column--width-2-3-medium{width:66.6666666667%;flex:none}.tna-column--width-5-6-medium{width:83.3333333333%;flex:none}}@media(max-width: 768px){.tna-container{padding-right:1.125rem;padding-left:1.125rem}.tna-column{padding-right:.375rem;padding-left:.375rem}}@media(min-width: 481px)and (max-width: 768px){.tna-column--full-small{width:100%;flex:none}.tna-column--flex-1-small{flex:1 0}.tna-column--flex-2-small{flex:2 0}.tna-column--flex-3-small{flex:3 0}.tna-column--width-1-4-small{width:25%;flex:none}.tna-column--width-1-2-small{width:50%;flex:none}.tna-column--width-3-4-small{width:75%;flex:none}}@media(max-width: 480px){.tna-column--full-tiny{width:100%;flex:none}.tna-column--flex-1-tiny{width:auto;flex:1 0}.tna-column--flex-2-tiny{width:auto;flex:2 0}.tna-column--flex-3-tiny{width:auto;flex:3 0}.tna-column--width-1-2-tiny{width:50%;flex:none}}.tna-hero{min-height:min(20vw,300px);padding-top:5.25rem;padding-bottom:3.25rem;display:-ms-flexbox;display:flex;align-items:end;position:relative;background-color:#000}.tna-hero__image{width:100%;height:100%;position:absolute;inset:0;z-index:1;object-fit:cover}.tna-hero__image-details{position:absolute;right:1.25rem;bottom:1.25rem;z-index:3}.tna-hero__image-details-summary{width:2rem;height:2rem;position:relative;z-index:2;font-size:0;text-align:center;line-height:2rem;list-style:none;background-color:#fc0;border-radius:1rem;cursor:pointer}.tna-hero__image-details-summary-icon{font-size:1.25rem;font-style:normal;font-weight:700;text-transform:lowercase}.tna-hero__image-information{width:20rem;max-width:45vw;padding:.5rem 1rem;position:absolute;right:0;bottom:2.5rem;z-index:1;background-color:#fc0}.tna-hero__inner{position:relative;z-index:2}.tna-hero__content{padding-top:1.5rem;padding-bottom:1.5rem;background-color:#fff}.tna-hero__heading{margin-bottom:0}@media(max-width: 768px){.tna-hero{padding:0;display:block}.tna-hero__image{position:static}.tna-hero__image-details{bottom:auto;top:1.25rem}.tna-hero__image-information{top:2.5rem;bottom:auto}.tna-hero__content{color:#fff;background-color:inherit}}.tna-sensitive-image__details{position:relative}.tna-sensitive-image__details::after{width:100%;padding-bottom:calc(100%*var(--sensitive-image-height)/var(--sensitive-image-width));display:block;position:relative;z-index:-1;background-image:var(--sensitive-image);background-clip:padding-box;background-size:contain;filter:blur(20px) saturate(0);content:""}.tna-sensitive-image__show{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1;font-size:0;cursor:pointer}.tna-sensitive-image__show::after{padding:.5rem 2rem;font-size:1rem;background-color:#ff0;content:attr(data-action)}.tna-sensitive-image__show:hover::after{color:#fff;background-color:#000}.tna-sensitive-image__image{width:100%}.tna-sensitive-image__details[open]::after,.tna-sensitive-image__details[open] .tna-sensitive-image__show{display:none}/*# sourceMappingURL=all.css.map */

package/nationalarchives/all.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/nationalarchives/utilities/_typography.scss","../../src/nationalarchives/utilities/_global.scss","../../src/nationalarchives/components/button/_index.scss","../../src/nationalarchives/components/card/_index.scss","../../src/nationalarchives/components/footer/_index.scss","../../src/nationalarchives/components/grid/_index.scss","../../src/nationalarchives/variables/_grid.scss","../../src/nationalarchives/tools/_grid.scss","../../src/nationalarchives/components/sensitive-image/_index.scss"],"names":[],"mappings":"AACQ,sHCDR,cACE,gBACA,WACA,YAEA,kBACA,gBACA,iCAEA,+BACE,gBACE,0BACA,4BAKN,oBACE,SACA,UAEA,sBAEA,cAGF,qBAIE,eAEA,cAGF,aAEE,WDlCF,cACE,mCACA,eACA,kCACA,mCACA,kCACA,8BACA,cAGF,oBACE,eACA,gBAMF,iBACE,eAGF,gBACE,eAGF,gBACE,iBAGF,gBACE,mBAUA,mCACE,eAQF,kCACE,eAQF,kCACE,iBAQF,kCACE,mBAIJ,wBACE,yBE5EA,YACE,oBAEA,qBAEA,WACA,qBAEA,sBAEA,kBACE,sBAIJ,uBACE,WAEA,sBAEA,6BACE,WCrBJ,UACE,oBACA,aACA,wBACA,0BACA,sBAGF,mBACE,QAYF,iBACE,QAGF,gBACE,QAGF,mBACE,QC3BF,YACE,iBACA,oBAEA,WAEA,yBAGF,kBACE,cAEA,wBACE,WAIJ,wBACE,oBASF,oCACE,eAEA,gBASF,oBACE,oBAGF,yBACE,kBAMF,0BACE,cAGF,wBACE,qBAEA,cACA,UAEA,8BACE,WACA,UAIJ,kCACE,cACA,cAEA,aCpEF,eACE,UCPsB,SDQtB,WACA,kBACA,iBACA,mBACA,kBAEA,sBAEA,oBACA,aACA,eACA,wBACA,oBAEA,kCACE,eAGF,yCACE,mBACA,gBACA,eAEA,qDACE,gBACA,eAKN,YACE,mBACA,kBAEA,sBAEA,6BACE,WAUF,oBACE,SADF,oBACE,SADF,oBACE,SE9CE,wBACE,oBADF,uBACE,qBADF,uBACE,UADF,uBACE,qBADF,wBACE,qBADF,uBACE,UADF,wBACE,qBADF,uBACE,qBADF,uBACE,UADF,uBACE,qBADF,yBACE,qBFyDR,gDEzBA,+BACE,WAIA,2BACE,SADF,2BACE,SADF,2BACE,SAvCE,8BACE,qBADF,8BACE,qBADF,8BACE,UADF,8BACE,qBADF,8BACE,sBF6DR,yBETA,eACE,uBACA,sBAGF,YACE,sBACA,sBFMF,+CEeA,8BACE,WAIA,0BACE,SADF,0BACE,SADF,0BACE,SAvFE,6BACE,UADF,6BACE,UADF,6BACE,WFqER,yBE+BA,6BACE,WAIA,yBACE,WAEA,SAHF,yBACE,WAEA,SAHF,yBACE,WAEA,SA7GE,4BACE,WCFR,8BACE,kBAIA,qCACE,WACA,qFAIA,cAEA,kBACA,WAEA,wCACA,4BACA,wBAEA,8BAEA,WAIJ,2BACE,aACA,mBACA,uBAEA,kBACA,MACA,QACA,SACA,OACA,UAEA,YAEA,eAEA,kCACE,mBAEA,eAEA,sBAEA,0BAIA,wCACE,WAEA,sBAQN,4BACE,WAIA,0GAEE","file":"all.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/nationalarchives/utilities/_typography.scss","../../src/nationalarchives/utilities/_global.scss","../../src/nationalarchives/variables/_typography.scss","../../src/nationalarchives/tools/_typography.scss","../../src/nationalarchives/components/button/_index.scss","../../src/nationalarchives/components/card/_index.scss","../../src/nationalarchives/components/footer/_index.scss","../../src/nationalarchives/components/grid/_index.scss","../../src/nationalarchives/variables/_grid.scss","../../src/nationalarchives/tools/_grid.scss","../../src/nationalarchives/tools/_media.scss","../../src/nationalarchives/components/hero/_index.scss","../../src/nationalarchives/components/sensitive-image/_index.scss"],"names":[],"mappings":"AAIQ,sHACA,6CCHR,cACE,gBACA,WACA,YAEA,kBACA,gBACA,iCAEA,UCXkB,GDalB,+BACE,gBACE,0BACA,4BAKN,oBACE,SACA,UAEA,sBAEA,cAGF,qBAIE,eAEA,cAGF,aAEE,WAGF,QACE,uBDtCF,cACE,YENiB,uBFOjB,YENiB,IFOjB,kCACA,mCACA,kCACA,8BACA,cAEA,gBACE,gBAEA,2BACE,gBAKF,uBACE,8BAGF,sBACE,8BAIJ,kCG9BA,eHgCE,gBAGF,4CAEE,kBAEA,kEACE,WACA,gBAIJ,0DAEE,eAEA,gBAGF,2BACE,aACA,qBAEA,YEvDkB,gCFwDlB,YEvDkB,IFyDlB,sCACE,gBAGF,+BG/DF,eHiEI,cAGF,8BGpEF,eHsEI,gBAGF,8BGzEF,kBH2EI,gBAGF,8BG9EF,mBHgFI,gBAIJ,0BACE,mBAEA,qCACE,gBAGF,sCACE,SG5FJ,mBH+FI,YE3Fe,wBF4Ff,YE3Fe,IF4Ff,yBAOF,iCACE,SAEA,yDACE,cAQF,iDGpHJ,eH6HI,gDG7HJ,eHsII,gDGtIJ,kBH+II,gDG/IJ,mBCJF,YACE,oBAEA,qBAEA,WACA,gBACA,qBAEA,sBAEA,kBACE,sBAGF,uBACE,WAEA,sBAEA,6BACE,WClBJ,iBACE,oBACA,aACA,wBACA,0BACA,sBAGF,mBACE,QAMF,iBACE,QAMF,2BACE,QAMF,gBAGE,QAGF,mBACE,gBAEA,QAMF,oBACE,kBAEA,sBAEA,qCACE,gBACA,aAGF,uCACE,oBAEA,6BAGF,+CACE,kBACA,gBAGF,qCACE,WACA,YACA,iBCvEN,YACE,iBACA,oBAEA,WAEA,yBAEA,kBACE,cAEA,wBACE,WAIJ,wBACE,oBASF,oCACE,eAEA,gBASF,oBACE,oBAEA,kCACE,qBAIJ,yBACE,kBAGF,8BACE,cAGF,oCACE,cAIA,mCACE,mBAIJ,0BACE,cAGF,wBACE,qBAEA,cACA,UAEA,8BACE,WACA,UAIJ,kCACE,cACA,cAEA,aC/EJ,eACE,UCNwB,SDOxB,WACA,kBACA,iBACA,mBACA,kBAEA,sBAEA,oBACA,aACA,eACA,wBACA,oBAEA,0DAEE,mBAGF,oBACE,eAIJ,YACE,mBACA,kBAEA,sBAEA,kBACE,WAGF,uBACE,oBACA,aACA,eACA,wBACA,oBAIA,oBACE,SADF,oBACE,SADF,oBACE,SAKN,uNAME,gBACA,eEpDM,wBACE,oBACA,UAFF,uBACE,qBACA,UAFF,uBACE,UACA,UAFF,uBACE,qBACA,UAFF,wBACE,qBACA,UAFF,uBACE,UACA,UAFF,wBACE,qBACA,UAFF,uBACE,qBACA,UAFF,uBACE,UACA,UAFF,uBACE,qBACA,UAFF,yBACE,qBACA,UCSR,gDHsDE,yBACE,WACA,UAIA,2BACE,SADF,2BACE,SADF,2BACE,SExEA,8BACE,qBACA,UAFF,8BACE,qBACA,UAFF,8BACE,UACA,UAFF,8BACE,qBACA,UAFF,8BACE,qBACA,WC6CR,yBHwCA,eACE,uBACA,sBAGF,YACE,sBACA,sBG7EF,+CHmFE,wBACE,WACA,UAIA,0BACE,SADF,0BACE,SADF,0BACE,SE3GA,6BACE,UACA,UAFF,6BACE,UACA,UAFF,6BACE,UACA,WCqBR,yBHoGE,uBACE,WACA,UAIA,yBACE,WAEA,SAHF,yBACE,WAEA,SAHF,yBACE,WAEA,SEpIA,4BACE,UACA,WEXV,UACE,2BACA,oBACA,uBAEA,oBACA,aACA,gBAEA,kBAEA,sBAEA,iBACE,WACA,YAEA,kBACA,QACA,UAEA,iBAGF,yBACE,kBACA,cACA,eACA,UAGF,iCACE,WACA,YAEA,kBACA,UAEA,YACA,kBACA,iBACA,gBAEA,sBAEA,mBAEA,eAGF,sCACE,kBACA,kBACA,gBACA,yBAGF,6BACE,YACA,eACA,mBAEA,kBACA,QACA,cACA,UAEA,sBAGF,iBACE,kBACA,UAGF,mBACE,mBACA,sBAEA,sBAGF,mBACE,gBD3BF,yBCxDF,UA0FI,UAEA,cAEA,iBACE,gBAGF,yBACE,YACA,YASF,6BACE,WACA,YAMF,mBACE,WAEA,0BCpHJ,8BACE,kBAIA,qCACE,WACA,qFAIA,cAEA,kBACA,WAEA,wCACA,4BACA,wBAEA,8BAEA,WAIJ,2BACE,aACA,mBACA,uBAEA,kBACA,QACA,UAEA,YAEA,eAEA,kCACE,mBT1CJ,eS6CI,sBAEA,0BAIA,wCACE,WAEA,sBAQN,4BACE,WAIA,0GAEE","file":"all.css"}

package/nationalarchives/all.js

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.TNAFrontend=t():e.TNAFrontend=t()}(self,(()=>(()=>{"use strict";var e={554:(e,t,i)=>{function o(e){this.$module=e,this.$imageDetails=e&&e.querySelector(".tna-sensitive-image__details"),this.$image=e&&e.querySelector(".tna-sensitive-image__image"),this.imageIsVisible=!1}i.d(t,{default:()=>n}),o.prototype.init=function(){console.log(this),this.$module&&this.$imageDetails&&this.$image&&this.$imageDetails.addEventListener("toggle",this.handleImageDetailsToggle.bind(this))},o.prototype.handleImageDetailsToggle=function(e){this.$imageDetails.hasAttribute("open")&&this.$image.focus({preventScroll:!0,focusVisible:!0})};const n=o}},t={};function i(o){var n=t[o];if(void 0!==n)return n.exports;var r=t[o]={exports:{}};return e[o](r,r.exports,i),r.exports}i.d=(e,t)=>{for(var o in t)i.o(t,o)&&!i.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{i.r(o),i.d(o,{SensitiveImage:()=>e.default,initAll:()=>t});var e=i(554),t=function(t){var i=(void 0!==(t=void 0!==t?t:{}).scope?t.scope:document).querySelector('[data-module="tna-sensitive-image"]');new e.default(i).init()}})(),o})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.TNAFrontend=t():e.TNAFrontend=t()}(self,(()=>(()=>{"use strict";var e={554:(e,t,i)=>{function o(e){this.$module=e,this.$imageDetails=e&&e.querySelector(".tna-sensitive-image__details"),this.$image=e&&e.querySelector(".tna-sensitive-image__image"),this.imageIsVisible=!1}i.d(t,{default:()=>n}),o.prototype.init=function(){console.log(this),this.$module&&this.$imageDetails&&this.$image&&this.$imageDetails.addEventListener("toggle",this.handleImageDetailsToggle.bind(this))},o.prototype.handleImageDetailsToggle=function(){this.$imageDetails.hasAttribute("open")&&this.$image.focus({preventScroll:!0,focusVisible:!0})};const n=o}},t={};function i(o){var n=t[o];if(void 0!==n)return n.exports;var r=t[o]={exports:{}};return e[o](r,r.exports,i),r.exports}i.d=(e,t)=>{for(var o in t)i.o(t,o)&&!i.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{i.r(o),i.d(o,{SensitiveImage:()=>e.default,initAll:()=>t});var e=i(554),t=function(t){var i=(void 0!==(t=void 0!==t?t:{}).scope?t.scope:document).querySelector('[data-module="tna-sensitive-image"]');new e.default(i).init()}})(),o})()));
 //# sourceMappingURL=all.js.map

package/nationalarchives/all.js.map

@@ -1 +1 @@
-{"version":3,"file":"all.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,GAAIH,GACe,iBAAZC,QACdA,QAAqB,YAAID,IAEzBD,EAAkB,YAAIC,GACvB,CATD,CASGK,MAAM,I,wCCTT,SAASC,EAAeC,GACtBC,KAAKD,QAAUA,EACfC,KAAKC,cACHF,GAAWA,EAAQG,cAAc,iCACnCF,KAAKG,OAASJ,GAAWA,EAAQG,cAAc,+BAC/CF,KAAKI,gBAAiB,CACxB,C,uBAEAN,EAAeO,UAAUC,KAAO,WAC9BC,QAAQC,IAAIR,MACPA,KAAKD,SAAYC,KAAKC,eAAkBD,KAAKG,QAGlDH,KAAKC,cAAcQ,iBACjB,SACAT,KAAKU,yBAAyBC,KAAKX,MAEvC,EAEAF,EAAeO,UAAUK,yBAA2B,SAAUE,GACxDZ,KAAKC,cAAcY,aAAa,SAClCb,KAAKG,OAAOW,MAAM,CAAEC,eAAe,EAAMC,cAAc,GAE3D,EAEA,S,GCxBIC,EAA2B,CAAC,EAGhC,SAASC,EAAoBC,GAE5B,IAAIC,EAAeH,EAAyBE,GAC5C,QAAqBE,IAAjBD,EACH,OAAOA,EAAa3B,QAGrB,IAAIC,EAASuB,EAAyBE,GAAY,CAGjD1B,QAAS,CAAC,GAOX,OAHA6B,EAAoBH,GAAUzB,EAAQA,EAAOD,QAASyB,GAG/CxB,EAAOD,OACf,CCrBAyB,EAAoBK,EAAI,CAAC9B,EAAS+B,KACjC,IAAI,IAAIC,KAAOD,EACXN,EAAoBQ,EAAEF,EAAYC,KAASP,EAAoBQ,EAAEjC,EAASgC,IAC5EE,OAAOC,eAAenC,EAASgC,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDP,EAAoBQ,EAAI,CAACK,EAAKC,IAAUL,OAAOtB,UAAU4B,eAAeC,KAAKH,EAAKC,GCClFd,EAAoBiB,EAAK1C,IACH,oBAAX2C,QAA0BA,OAAOC,aAC1CV,OAAOC,eAAenC,EAAS2C,OAAOC,YAAa,CAAEC,MAAO,WAE7DX,OAAOC,eAAenC,EAAS,aAAc,CAAE6C,OAAO,GAAO,E,6FCHxDC,EAAU,SAACC,GAEf,IAEMC,QAFiC,KADvCD,OAA6B,IAAZA,EAA0BA,EAAU,CAAC,GACzBE,MAAwBF,EAAQE,MAAQC,UAEzCzC,cAC1B,uCAEF,IAAIJ,EAAAA,QAAe2C,GAAenC,MACpC,C","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./src/nationalarchives/components/sensitive-image/sensitive-image.mjs","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/all.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","function SensitiveImage($module) {\n  this.$module = $module;\n  this.$imageDetails =\n    $module && $module.querySelector(\".tna-sensitive-image__details\");\n  this.$image = $module && $module.querySelector(\".tna-sensitive-image__image\");\n  this.imageIsVisible = false;\n}\n\nSensitiveImage.prototype.init = function () {\n  console.log(this);\n  if (!this.$module || !this.$imageDetails || !this.$image) {\n    return;\n  }\n  this.$imageDetails.addEventListener(\n    \"toggle\",\n    this.handleImageDetailsToggle.bind(this)\n  );\n};\n\nSensitiveImage.prototype.handleImageDetailsToggle = function (e) {\n  if (this.$imageDetails.hasAttribute(\"open\")) {\n    this.$image.focus({ preventScroll: true, focusVisible: true });\n  }\n};\n\nexport default SensitiveImage;\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import SensitiveImage from \"./components/sensitive-image/sensitive-image.mjs\";\n\nconst initAll = (options) => {\n  options = typeof options !== \"undefined\" ? options : {};\n  const scope = typeof options.scope !== \"undefined\" ? options.scope : document;\n\n  const $toggleButton = scope.querySelector(\n    '[data-module=\"tna-sensitive-image\"]'\n  );\n  new SensitiveImage($toggleButton).init();\n};\n\nexport { initAll, SensitiveImage };\n"],"names":["root","factory","exports","module","define","amd","self","SensitiveImage","$module","this","$imageDetails","querySelector","$image","imageIsVisible","prototype","init","console","log","addEventListener","handleImageDetailsToggle","bind","e","hasAttribute","focus","preventScroll","focusVisible","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","hasOwnProperty","call","r","Symbol","toStringTag","value","initAll","options","$toggleButton","scope","document"],"sourceRoot":""}
+{"version":3,"file":"all.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,GAAIH,GACe,iBAAZC,QACdA,QAAqB,YAAID,IAEzBD,EAAkB,YAAIC,GACvB,CATD,CASGK,MAAM,I,wCCTT,SAASC,EAAeC,GACtBC,KAAKD,QAAUA,EACfC,KAAKC,cACHF,GAAWA,EAAQG,cAAc,iCACnCF,KAAKG,OAASJ,GAAWA,EAAQG,cAAc,+BAC/CF,KAAKI,gBAAiB,CACxB,C,uBAEAN,EAAeO,UAAUC,KAAO,WAC9BC,QAAQC,IAAIR,MACPA,KAAKD,SAAYC,KAAKC,eAAkBD,KAAKG,QAGlDH,KAAKC,cAAcQ,iBACjB,SACAT,KAAKU,yBAAyBC,KAAKX,MAEvC,EAEAF,EAAeO,UAAUK,yBAA2B,WAC9CV,KAAKC,cAAcW,aAAa,SAClCZ,KAAKG,OAAOU,MAAM,CAAEC,eAAe,EAAMC,cAAc,GAE3D,EAEA,S,GCxBIC,EAA2B,CAAC,EAGhC,SAASC,EAAoBC,GAE5B,IAAIC,EAAeH,EAAyBE,GAC5C,QAAqBE,IAAjBD,EACH,OAAOA,EAAa1B,QAGrB,IAAIC,EAASsB,EAAyBE,GAAY,CAGjDzB,QAAS,CAAC,GAOX,OAHA4B,EAAoBH,GAAUxB,EAAQA,EAAOD,QAASwB,GAG/CvB,EAAOD,OACf,CCrBAwB,EAAoBK,EAAI,CAAC7B,EAAS8B,KACjC,IAAI,IAAIC,KAAOD,EACXN,EAAoBQ,EAAEF,EAAYC,KAASP,EAAoBQ,EAAEhC,EAAS+B,IAC5EE,OAAOC,eAAelC,EAAS+B,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDP,EAAoBQ,EAAI,CAACK,EAAKC,IAAUL,OAAOrB,UAAU2B,eAAeC,KAAKH,EAAKC,GCClFd,EAAoBiB,EAAKzC,IACH,oBAAX0C,QAA0BA,OAAOC,aAC1CV,OAAOC,eAAelC,EAAS0C,OAAOC,YAAa,CAAEC,MAAO,WAE7DX,OAAOC,eAAelC,EAAS,aAAc,CAAE4C,OAAO,GAAO,E,6FCHxDC,EAAU,SAACC,GAEf,IAEMC,QAFiC,KADvCD,OAA6B,IAAZA,EAA0BA,EAAU,CAAC,GACzBE,MAAwBF,EAAQE,MAAQC,UAEzCxC,cAC1B,uCAEF,IAAIJ,EAAAA,QAAe0C,GAAelC,MACpC,C","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./src/nationalarchives/components/sensitive-image/sensitive-image.mjs","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/all.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","function SensitiveImage($module) {\n  this.$module = $module;\n  this.$imageDetails =\n    $module && $module.querySelector(\".tna-sensitive-image__details\");\n  this.$image = $module && $module.querySelector(\".tna-sensitive-image__image\");\n  this.imageIsVisible = false;\n}\n\nSensitiveImage.prototype.init = function () {\n  console.log(this);\n  if (!this.$module || !this.$imageDetails || !this.$image) {\n    return;\n  }\n  this.$imageDetails.addEventListener(\n    \"toggle\",\n    this.handleImageDetailsToggle.bind(this)\n  );\n};\n\nSensitiveImage.prototype.handleImageDetailsToggle = function () {\n  if (this.$imageDetails.hasAttribute(\"open\")) {\n    this.$image.focus({ preventScroll: true, focusVisible: true });\n  }\n};\n\nexport default SensitiveImage;\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import SensitiveImage from \"./components/sensitive-image/sensitive-image.mjs\";\n\nconst initAll = (options) => {\n  options = typeof options !== \"undefined\" ? options : {};\n  const scope = typeof options.scope !== \"undefined\" ? options.scope : document;\n\n  const $toggleButton = scope.querySelector(\n    '[data-module=\"tna-sensitive-image\"]'\n  );\n  new SensitiveImage($toggleButton).init();\n};\n\nexport { initAll, SensitiveImage };\n"],"names":["root","factory","exports","module","define","amd","self","SensitiveImage","$module","this","$imageDetails","querySelector","$image","imageIsVisible","prototype","init","console","log","addEventListener","handleImageDetailsToggle","bind","hasAttribute","focus","preventScroll","focusVisible","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","hasOwnProperty","call","r","Symbol","toStringTag","value","initAll","options","$toggleButton","scope","document"],"sourceRoot":""}

package/nationalarchives/all.scss

@@ -1,4 +1,5 @@
-@import "base";
+@use "tools/all" as tools;
+@use "variables/all" as variables;
 
-@import "utilities/all";
-@import "components/all";
+@use "utilities/all" as utilities;
+@use "components/all" as components;

package/nationalarchives/components/_all.scss

@@ -1,7 +1,6 @@
-@import "../base";
-
-@import "button/index";
-@import "card/index";
-@import "footer/index";
-@import "grid/index";
-@import "sensitive-image/index";
+@use "button/index" as button;
+@use "card/index" as card;
+@use "footer/index" as footer;
+@use "grid/index" as grid;
+@use "hero/index" as hero;
+@use "sensitive-image/index" as sensitive-image;

package/nationalarchives/components/breadcrumbs/_index.scss

@@ -0,0 +1,68 @@
+@use "../../variables/colour";
+@use "../../tools/media";
+
+.tna-breadcrumbs {
+  &__list {
+    padding: 0;
+
+    list-style: none;
+
+    display: -ms-flexbox;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  &__item {
+    display: -ms-flexbox;
+    display: flex;
+
+    + .tna-breadcrumbs__item {
+      &::before {
+        margin: 0 0.5rem;
+
+        display: inline-block;
+
+        content: "\203A";
+      }
+    }
+  }
+
+  &__link {
+    display: inline-block;
+
+    color: colour.$base-font-colour;
+
+    &:hover {
+      color: #f0a;
+    }
+  }
+
+  @include media.on-mobile {
+    &__item {
+      &,
+      + .tna-breadcrumbs__item {
+        &::before {
+          margin-left: 0;
+
+          display: none;
+        }
+      }
+
+      &:not(:nth-last-child(2)) {
+        display: none;
+      }
+
+      &:nth-last-child(2) {
+        .tna-breadcrumbs__link {
+          &::before {
+            // content: "\2190";
+            // content: "\21E6";
+            // content: "\21FD";
+            // content: "\2794";
+            content: "\2190\00a0"attr(data-prefix);
+          }
+        }
+      }
+    }
+  }
+}

package/nationalarchives/components/breadcrumbs/breadcrumbs.stories.js

@@ -0,0 +1,57 @@
+import Breadcrumbs from "./template.njk";
+import "./_index.scss";
+import macroOptions from "./macro-options.json";
+
+const argTypes = {
+  items: { control: "object" },
+  classes: { control: "text" },
+  attributes: { control: "object" },
+};
+
+Object.keys(argTypes).forEach((argType) => {
+  argTypes[argType].description = macroOptions.find(
+    (option) => option.name === argType
+  )?.description;
+});
+
+export default {
+  title: "Components/Breadcrumbs",
+  argTypes,
+};
+
+const Template = ({ items, classes, attributes }) => {
+  return Breadcrumbs({
+    params: {
+      items,
+      classes,
+      attributes,
+    },
+  });
+};
+
+export const Standard = Template.bind({});
+Standard.args = {
+  items: [
+    {
+      text: "Alpha",
+      href: "#/alpha",
+    },
+    {
+      text: "Beta",
+      href: "#/beta",
+    },
+    {
+      text: "Gamma",
+      href: "#/gamma",
+    },
+    {
+      text: "Delta",
+      href: "#/delta",
+    },
+    {
+      text: "Epsilon",
+      href: "#/epsilon",
+    },
+  ],
+  classes: "tna-breadcrumbs--demo",
+};

package/nationalarchives/components/breadcrumbs/fixtures.json

@@ -0,0 +1,26 @@
+{
+  "component": "breadcrumbs",
+  "fixtures": [
+    {
+      "name": "plain breadcrumbs",
+      "options": {
+        "items": [
+          {
+            "text": "Alpha",
+            "href": "#/alpha"
+          },
+          {
+            "text": "Beta",
+            "href": "#/beta"
+          },
+          {
+            "text": "Gamma",
+            "href": "#/gamma"
+          }
+        ]
+      },
+      "html": "<nav class=\"tna-breadcrumbs \">\n    <ol class=\"tna-breadcrumbs__list\"><li class=\"tna-breadcrumbs__item\">\n            <a href=\"#/alpha\" class=\"tna-breadcrumbs__link\" data-prefix=\"Back to\">\n                Alpha\n            </a>\n        </li><li class=\"tna-breadcrumbs__item\">\n            <a href=\"#/beta\" class=\"tna-breadcrumbs__link\" data-prefix=\"Back to\">\n                Beta\n            </a>\n        </li><li class=\"tna-breadcrumbs__item\">\n            <a href=\"#/gamma\" class=\"tna-breadcrumbs__link\" data-prefix=\"Back to\">\n                Gamma\n            </a>\n        </li></ol>\n</nav>",
+      "hidden": false
+    }
+  ]
+}

package/nationalarchives/components/breadcrumbs/macro-options.json

@@ -0,0 +1,40 @@
+[
+  {
+    "name": "items",
+    "type": "array",
+    "required": true,
+    "description": "",
+    "params": [
+      {
+        "name": "text",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "title",
+        "type": "string",
+        "required": false,
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the button."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the button."
+  }
+]

package/nationalarchives/components/breadcrumbs/macro.njk

@@ -0,0 +1,3 @@
+{% macro tnaBreadcrumbs(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

package/nationalarchives/components/breadcrumbs/template.njk

@@ -0,0 +1,13 @@
+{%- set breadcrumbClasses = [params.classes] if params.classes else [] -%}
+
+<nav class="tna-breadcrumbs {{ breadcrumbClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+    <ol class="tna-breadcrumbs__list">
+    {%- for item in params.items -%}
+        <li class="tna-breadcrumbs__item">
+            <a href="{{ item.href }}" class="tna-breadcrumbs__link" data-prefix="{{ params.prefix if params.prefix else 'Back to' }}" {%- if item.title %} title="{{ item.title }}"{% endif %}>
+                {{ item.text }}
+            </a>
+        </li>
+    {%- endfor -%}
+    </ol>
+</nav>

package/nationalarchives/components/button/_index.scss

@@ -1,20 +1,19 @@
-@include nationalarchives-exports("nationalarchives/components/button") {
-  .tna-button {
-    padding: 0.25rem 1rem;
+.tna-button {
+  padding: 0.25rem 1rem;
 
-    display: inline-block;
+  display: inline-block;
 
-    color: #fff;
-    text-decoration: none;
+  color: #fff;
+  font-weight: 700;
+  text-decoration: none;
 
-    background-color: #000;
+  background-color: #000;
 
-    &:hover {
-      background-color: #069;
-    }
+  &:hover {
+    background-color: #069;
   }
 
-  .tna-button--secondary {
+  &--secondary {
     color: #000;
 
     background-color: #ff0;

package/nationalarchives/components/button/button.stories.js

@@ -1,6 +1,5 @@
 import Button from "./template.njk";
-import "../../all.scss";
-import "./_button.scss";
+import "./_index.scss";
 import macroOptions from "./macro-options.json";
 
 const argTypes = {
@@ -9,7 +8,7 @@ const argTypes = {
   title: { control: "text" },
   secondary: { control: "boolean" },
   classes: { control: "text" },
-  attributes: { control: "text" },
+  attributes: { control: "object" },
 };
 
 Object.keys(argTypes).forEach((argType) => {

package/nationalarchives/components/card/_index.scss

@@ -1,5 +1,7 @@
-@include nationalarchives-exports("nationalarchives/components/card") {
-  .tna-card {
+@use "../../tools/typography" as typographyTools;
+
+.tna-card {
+  &__inner {
     display: -ms-flexbox;
     display: flex;
     -ms-box-orient: vertical;
@@ -7,31 +9,67 @@
     flex-direction: column;
   }
 
-  .tna-card__heading {
+  &__heading {
     order: 2;
   }
 
-  .tna-card__supertitle {
+  &__supertitle {
   }
 
-  .tna-card__title {
+  &__title {
+    order: 2;
   }
 
-  .tna-card__title-link {
+  &__title-link {
   }
 
-  .tna-card__image {
+  &__image-container {
     order: 1;
   }
 
-  .tna-card__body {
+  &__image {
+  }
+
+  &__body {
+    // margin-top: 2rem;
+
     order: 3;
   }
 
-  .tna-card__actions {
+  &__actions {
+    margin-top: 2rem;
+
     order: 4;
   }
 
-  .tna-card__action {
+  &__action {
+  }
+
+  &--featured {
+    position: relative;
+
+    background-color: #ff0;
+
+    .tna-card__inner {
+      margin-left: 50%;
+      padding: 2rem;
+    }
+
+    .tna-card__heading {
+      padding-bottom: 2rem;
+
+      border-bottom: 2px #000 solid;
+    }
+
+    .tna-card__image-container {
+      position: absolute;
+      inset: 0 50% 0 0;
+    }
+
+    .tna-card__image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
   }
 }

package/nationalarchives/components/card/card.stories.js

@@ -1,19 +1,18 @@
 import Card from "./template.njk";
-import "../../all.scss";
-import "./_card.scss";
+import "./_index.scss";
 import macroOptions from "./macro-options.json";
 
 const argTypes = {
-  supertitle: { control: "text" },
-  title: { control: "text" },
+  heading: { control: "object" },
   href: { control: "text" },
   image: { control: "object" },
   body: { control: "text" },
   text: { control: "text" },
   actions: { control: "object" },
+  featured: { control: "boolean" },
   htmlElement: { control: "text" },
   classes: { control: "text" },
-  attributes: { control: "text" },
+  attributes: { control: "object" },
 };
 
 Object.keys(argTypes).forEach((argType) => {
@@ -28,26 +27,26 @@ export default {
 };
 
 const Template = ({
-  supertitle,
-  title,
+  heading,
   href,
   image,
   body,
   text,
   actions,
+  featured,
   htmlElement,
   classes,
   attributes,
 }) => {
   return Card({
     params: {
-      supertitle,
-      title,
+      heading,
       href,
       image,
       body,
       text,
       actions,
+      featured,
       htmlElement,
       classes,
       attributes,
@@ -57,11 +56,42 @@ const Template = ({
 
 export const Standard = Template.bind({});
 Standard.args = {
-  supertitle: "Card supertitle",
-  title: "Card title",
+  heading: {
+    supertitle: "Card supertitle",
+    title: "Card title",
+    level: 3,
+    size: "m",
+    singleSentence: true,
+  },
+  href: "#",
+  image: {
+    src: "https://picsum.photos/id/29/640/360",
+    alt: "A placeholder image",
+  },
+  body: "<p>Card body</p>",
+  actions: [
+    {
+      text: "Card action",
+      href: "#",
+      title: "Go and do the action",
+    },
+  ],
+  htmlElement: "article",
+  classes: "tna-card--demo",
+};
+
+export const Featured = Template.bind({});
+Featured.args = {
+  heading: {
+    supertitle: "Card supertitle",
+    title: "Card title",
+    level: 3,
+    size: "m",
+    singleSentence: true,
+  },
   href: "#",
   image: {
-    src: "https://loremflickr.com/640/360",
+    src: "https://picsum.photos/id/24/640/360",
     alt: "A placeholder image",
   },
   body: "<p>Card body</p>",
@@ -72,6 +102,7 @@ Standard.args = {
       title: "Go and do the action",
     },
   ],
+  featured: true,
   htmlElement: "article",
   classes: "tna-card--demo",
 };