@nationalarchives/frontend 0.1.5-prerelease → 0.1.6-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,14 @@
     "/nationalarchives/assets"
   ],
   "sass": [
-    "/nationalarchives/_prototype-kit.scss"
-  ]
+    "/nationalarchives/all.scss"
+  ],
+  "stylesheets": [
+    "/nationalarchives/all.css"
+  ],
+  "templates": {
+    "name": "National Archives homepage",
+    "path": "/nationalarchives/templates/homepage.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 h1,.tna-template h2,.tna-template h3,.tna-template h4,.tna-template h5,.tna-template h6,.tna-template p,.tna-template ul,.tna-template ol{margin:0 0 2rem}.tna-template h1:last-child,.tna-template h2:last-child,.tna-template h3:last-child,.tna-template h4:last-child,.tna-template h5:last-child,.tna-template h6:last-child,.tna-template p:last-child,.tna-template ul:last-child,.tna-template ol:last-child{margin-bottom:0}.tna-template a:hover,.tna-template a:link:hover{text-decoration-thickness:3px}.tna-template a:active,.tna-template a:link:active{text-decoration-thickness:4px}.tna-template ul,.tna-ul,.tna-template ol,.tna-ol{padding-left:2rem}.tna-template ul li::marker,.tna-ul li::marker,.tna-template ol li::marker,.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__body{font-size:1rem;line-height:1.6}.tna-heading{margin-bottom:2rem;font-family:supria-sans-condensed,monospace;font-weight:600}.tna-heading--xl{font-size:4rem}.tna-heading--l{font-size:2rem}.tna-heading--m{font-size:1.25rem}.tna-heading--s{font-size:1.125rem}.tna-hgroup__supertitle{font-size:0.875rem;font-family:"Roboto Mono",monospace;font-weight:500;text-transform:uppercase}.tna-hgroup .tna-hgroup__supertitle{margin:0}.tna-hgroup__title .tna-hgroup__supertitle{display:block}.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.25rem}.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{margin-top:2rem;order:3}.tna-card__actions{margin-top:2rem;order:4}.tna-card--featured{padding-left:50%;position:relative;background-color:#ff0}.tna-card--featured .tna-card__inner{padding:2rem}.tna-card--featured .tna-card__heading{padding-bottom:2rem;border-bottom:2px #000 solid}.tna-card--featured .tna-card__image-container{display:flex;align-items:center;justify-content:center;position:absolute;top:0;right:50%;bottom:0;left: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.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%;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-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 */

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/components/sensitive-image/_index.scss"],"names":[],"mappings":"AAIQ,sHACA,6CCHR,cACE,gBACA,WACA,YAEA,kBACA,gBACA,iCAEA,UCXe,GDaf,+BACE,gBACE,0BACA,4BAKN,oBACE,SACA,UAEA,sBAEA,cAGF,qBAIE,eAEA,cAGF,aAEE,WAGF,QACE,uBDtCF,cACE,YENe,uBFOf,YENe,IFOf,kCACA,mCACA,kCACA,8BACA,cAEA,wJASE,gBAEA,2PACE,gBAOA,iDACE,8BAGF,mDACE,8BAgDR,kDAIE,kBAEA,8FACE,WACA,gBAIJ,0DAEE,eAEA,gBAGF,oBGvGE,eHyGA,gBAGF,aACE,mBAEA,YE9GkB,gCF+GlB,YE9GkB,IFiHpB,iBGnHE,eHuHF,gBGvHE,eH2HF,gBG3HE,kBH+HF,gBG/HE,mBHsIF,wBGtIE,mBHwIA,YEpIiB,wBFqIjB,YEpIiB,IFqIjB,yBAEA,oCACE,SAKF,2CACE,cAQF,mCG3JA,eHoKA,kCGpKA,eH6KA,kCG7KA,kBHsLA,kCGtLA,mBCJF,YACE,oBAEA,qBAEA,WACA,gBACA,qBAEA,sBAEA,kBACE,sBAIJ,uBACE,WAEA,sBAEA,6BACE,WCjBJ,iBACE,oBACA,aACA,wBACA,0BACA,sBAGF,mBACE,QAMF,iBACE,QAMF,2BACE,QAMF,gBACE,gBAEA,QAGF,mBACE,gBAEA,QAMF,oBACE,iBAEA,kBAEA,sBAEA,qCACE,aAGF,uCACE,oBAEA,6BAGF,+CACE,aACA,mBACA,uBAEA,kBACA,MACA,UACA,SACA,OAGF,qCACE,WACA,YACA,iBCjFJ,YACE,iBACA,oBAEA,WAEA,yBAGF,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,aChFF,eACE,UCNwB,SDOxB,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,SE5CI,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,UFsDV,gDACE,yBACE,WACA,UAIA,2BACE,SADF,2BACE,SADF,2BACE,SEhEE,8BACE,qBACA,UAFF,8BACE,qBACA,UAFF,8BACE,UACA,UAFF,8BACE,qBACA,UAFF,8BACE,qBACA,WF2EV,yBACE,eACE,uBACA,sBAGF,YACE,sBACA,sBAoBJ,+CACE,wBACE,WACA,UAIA,0BACE,SADF,0BACE,SADF,0BACE,SEjHE,6BACE,UACA,UAFF,6BACE,UACA,UAFF,6BACE,UACA,WF4HV,yBACE,uBACE,WACA,UAIA,yBACE,WAEA,SAHF,yBACE,WAEA,SAHF,yBACE,WAEA,SExIE,4BACE,UACA,WCLV,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,mBP/CF,eOkDE,sBAEA,0BAIA,wCACE,WAEA,sBAQN,4BACE,WAIA,0GAEE","file":"all.css"}

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,5 @@
-@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 "sensitive-image/index" as sensitive-image;

package/nationalarchives/components/button/_index.scss

@@ -1,26 +1,25 @@
-@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 {
-    color: #000;
+.tna-button--secondary {
+  color: #000;
 
-    background-color: #ff0;
+  background-color: #ff0;
 
-    &:hover {
-      color: #fff;
-    }
+  &:hover {
+    color: #fff;
   }
 }

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 = {

package/nationalarchives/components/card/_index.scss

@@ -1,37 +1,84 @@
-@include nationalarchives-exports("nationalarchives/components/card") {
-  .tna-card {
-    display: -ms-flexbox;
-    display: flex;
-    -ms-box-orient: vertical;
-    -ms-flex-direction: column;
-    flex-direction: column;
-  }
+@use "../../tools/typography" as typographyTools;
 
-  .tna-card__heading {
-    order: 2;
-  }
+.tna-card {
+}
 
-  .tna-card__supertitle {
-  }
+.tna-card__inner {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-box-orient: vertical;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
 
-  .tna-card__title {
-  }
+.tna-card__heading {
+  order: 2;
+}
 
-  .tna-card__title-link {
-  }
+.tna-card__supertitle {
+}
 
-  .tna-card__image {
-    order: 1;
+.tna-card__title {
+  order: 2;
+}
+
+.tna-card__title-link {
+}
+
+.tna-card__image-container {
+  order: 1;
+}
+
+.tna-card__image {
+}
+
+.tna-card__body {
+  margin-top: 2rem;
+
+  order: 3;
+}
+
+.tna-card__actions {
+  margin-top: 2rem;
+
+  order: 4;
+}
+
+.tna-card__action {
+}
+
+.tna-card--featured {
+  padding-left: 50%;
+
+  position: relative;
+
+  background-color: #ff0;
+
+  .tna-card__inner {
+    padding: 2rem;
   }
 
-  .tna-card__body {
-    order: 3;
+  .tna-card__heading {
+    padding-bottom: 2rem;
+
+    border-bottom: 2px #000 solid;
   }
 
-  .tna-card__actions {
-    order: 4;
+  .tna-card__image-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    position: absolute;
+    top: 0;
+    right: 50%;
+    bottom: 0;
+    left: 0;
   }
 
-  .tna-card__action {
+  .tna-card__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
   }
 }

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

@@ -1,16 +1,15 @@
 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" },
@@ -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,8 +56,39 @@ 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://loremflickr.com/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",
@@ -72,6 +102,7 @@ Standard.args = {
       title: "Go and do the action",
     },
   ],
+  featured: true,
   htmlElement: "article",
   classes: "tna-card--demo",
 };

package/nationalarchives/components/card/fixtures.json

@@ -2,15 +2,117 @@
   "component": "card",
   "fixtures": [
     {
-      "name": "TEMP TEST",
+      "name": "basic card",
       "options": {
-        "supertitle": "Card supertitle",
-        "title": "Card title",
+        "heading": {
+          "title": "Card title",
+          "level": 3
+        },
+        "body": "<p>Card body</p>"
+      },
+      "html": "<div class=\"tna-card \">\n    <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
+      "hidden": false
+    },
+    {
+      "name": "with supertitle",
+      "options": {
+        "heading": {
+          "supertitle": "Card supertitle",
+          "title": "Card title",
+          "level": 3
+        },
+        "body": "<p>Card body</p>"
+      },
+      "html": "<div class=\"tna-card \">\n    <div class=\"tna-card__inner\"><hgroup class=\"tna-card__heading tna-hgroup tna-hgroup--m\">\n                <p class=\"tna-card__supertitle tna-hgroup__supertitle\">Card supertitle</p>\n                <h3 class=\"tna-card__title tna-hgroup__title\">Card title</h3>\n            </hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
+      "hidden": false
+    },
+    {
+      "name": "with single sentence supertitle",
+      "options": {
+        "heading": {
+          "supertitle": "Card supertitle",
+          "title": "Card title",
+          "level": 3,
+          "singleSentence": true
+        },
+        "body": "<p>Card body</p>"
+      },
+      "html": "<div class=\"tna-card \">\n    <div class=\"tna-card__inner\"><hgroup class=\"tna-card__heading tna-hgroup tna-hgroup--m\">\n                <h3 class=\"tna-card__title tna-hgroup__title\">\n                    <span class=\"tna-card__supertitle tna-hgroup__supertitle\">Card supertitle</span>Card title</h3>\n            </hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
+      "hidden": false
+    },
+    {
+      "name": "heading size",
+      "options": {
+        "heading": {
+          "title": "Card title",
+          "level": 3,
+          "size": "m"
+        },
+        "body": "<p>Card body</p>"
+      },
+      "html": "<div class=\"tna-card \">\n    <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
+      "hidden": false
+    },
+    {
+      "name": "heading level",
+      "options": {
+        "heading": {
+          "title": "Card title",
+          "level": 1
+        },
+        "body": "<p>Card body</p>"
+      },
+      "html": "<div class=\"tna-card \">\n    <div class=\"tna-card__inner\"><h1 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h1><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
+      "hidden": false
+    },
+    {
+      "name": "with link",
+      "options": {
+        "heading": {
+          "title": "Card title",
+          "level": 3
+        },
         "href": "#",
+        "body": "<p>Card body</p>"
+      },
+      "html": "<div class=\"tna-card \">\n    <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\"><a href=\"#\" class=\"tna-card__title-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
+      "hidden": false
+    },
+    {
+      "name": "with text",
+      "options": {
+        "heading": {
+          "title": "Card title",
+          "level": 3
+        },
+        "text": "Card body"
+      },
+      "html": "<div class=\"tna-card \">\n    <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
+      "hidden": false
+    },
+    {
+      "name": "with image",
+      "options": {
+        "heading": {
+          "title": "Card title",
+          "level": 3
+        },
         "image": {
           "src": "https://loremflickr.com/640/360",
           "alt": "A placeholder image"
         },
+        "body": "<p>Card body</p>"
+      },
+      "html": "<div class=\"tna-card \">\n    <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__image-container\">\n            <img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" class=\"tna-card__image\" />\n        </div><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
+      "hidden": false
+    },
+    {
+      "name": "with actions",
+      "options": {
+        "heading": {
+          "title": "Card title",
+          "level": 3
+        },
         "body": "<p>Card body</p>",
         "actions": [
           {
@@ -18,11 +120,37 @@
             "href": "#",
             "title": "Go and do the action"
           }
-        ],
-        "htmlElement": "article",
-        "classes": "tna-card--demo"
+        ]
+      },
+      "html": "<div class=\"tna-card \">\n    <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action tna-button\"title=\"Go and do the action\">Card action</a></div></div>\n</div>",
+      "hidden": false
+    },
+    {
+      "name": "with classes",
+      "options": {
+        "heading": {
+          "title": "Card title",
+          "level": 3
+        },
+        "body": "<p>Card body</p>",
+        "classes": "card__test-class"
+      },
+      "html": "<div class=\"tna-card card__test-class\">\n    <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
+      "hidden": false
+    },
+    {
+      "name": "with attributes",
+      "options": {
+        "heading": {
+          "title": "Card title",
+          "level": 3
+        },
+        "body": "<p>Card body</p>",
+        "attributes": {
+          "data-testattribute": "foobar"
+        }
       },
-      "html": "<article class=\"tna-card tna-card--demo\">\n    <hgroup class=\"tna-card__heading tna-hgroup\"><p class=\"tna-card__supertitle tna-hgroup__supertitle\">Card supertitle</p><h1 class=\"tna-card__title tna-hgroup__title\"><a href=\"#\" class=\"tna-card__title-link\">Card title</a></h1>\n    </hgroup><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" class=\"tna-card__image\" /><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action tna-button\"title=\"Go and do the action\">Card action</a></div></article>",
+      "html": "<div class=\"tna-card \" data-testattribute=\"foobar\">\n    <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
       "hidden": false
     }
   ]

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

@@ -1,15 +1,41 @@
 [
   {
-    "name": "supertitle",
-    "type": "string",
-    "required": false,
-    "description": ""
-  },
-  {
-    "name": "title",
-    "type": "string",
+    "name": "heading",
+    "type": "object",
     "required": true,
-    "description": ""
+    "description": "",
+    "params": [
+      {
+        "name": "supertitle",
+        "type": "string",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "title",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "level",
+        "type": "number",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "size",
+        "type": "text",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "singleSentence",
+        "type": "boolean",
+        "required": false,
+        "description": ""
+      }
+    ]
   },
   {
     "name": "href",
@@ -52,7 +78,7 @@
   {
     "name": "actions",
     "type": "array",
-    "required": true,
+    "required": false,
     "description": "",
     "params": [
       {
@@ -75,6 +101,12 @@
       }
     ]
   },
+  {
+    "name": "featured",
+    "type": "boolean",
+    "required": false,
+    "description": ""
+  },
   {
     "name": "htmlElement",
     "type": "string",