@nationalarchives/frontend 0.1.3-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)
@@ -22,170 +22,3 @@ npm install
 # Start Storybook
 npm start
 ```
-
-### Updating
-
-```sh
-# Upgrade all Storybook packages
-npx sb upgrade
-```
-
-### Release
-
-```sh
-# Update version in package.json
-npm install
-# Commit and push to main
-git tag v0.1.0
-git push origin --tags
-# Create a new release on GitHub: https://github.com/nationalarchives/tna-frontend/releases/new
-```
-
-## Needs
-
-TNA needs a frontend toolkit that is:
-
-- standardised - a single source of truth for all TNA that follows all our coding standards (currently non-existent)
-- version controlled - as well as [semantically versioned](https://semver.org/) with a [changelog](https://keepachangelog.com/en/1.0.0/)
-- open - all source code should be [open and available to anyone](https://www.gov.uk/service-manual/service-standard/point-12-make-new-source-code-open)
-- accessible - all components meet WCAG 2.1 AA standards
-- progressively enhanced - all components should still be operable without JavaScript, CSS or both
-- importable into projects (via a service such as [NPM](https://www.npmjs.com/search?q=nationalarchives)) - to make dependency management as simple as possible
-- agnostic - the implementation for the markup of the components can be replicated in any required technology (because we have Python, PHP and Java applications throughout the organisation)
-- testable - both from an internal perspective as well as providing scenarios and expected results for language implimentations to be able to validate against
-- lean - minimal reliance on other languages and dependencies to ensure good extendability and speed of development and deployment
-- automatically published - leveraging CI/CD, creating a new release version should be as simple as possible
-
-It would also be nice to have a toolkit that is:
-
-- extendable - rather than providing a static snapshot of the toolkit, we should always be able to extend it for any given application
-- documentable - not just from a technical perspective but also from a user-centred design perspective with best practices of when and how to use each component (this might be a separate project where we can [share information such as user research](https://www.gov.uk/service-manual/service-standard/point-13-use-common-standards-components-patterns))
-- prototype-able - by using Nunjucks, we could easily create a toolkit that integrated with the [GOV.UK Prototype Kit](https://prototype-kit.service.gov.uk/docs/) which means we could very easily create high fidelity prototypes to test with, ultimately helping with user research
-
-## Current solutions
-
-There is already a solution in [nationalarchives/tdr-components](https://github.com/nationalarchives/tdr-components) which is specific to TDR and extends the GOV.UK components and styles. We need to create a more generic set of components that are suitable for every TNA service, while still extending the GOV.UK components and styles but with a more TNA-branded look and feel.
-
-We also have [nationalarchives/tna-frontend-design-toolkit](https://github.com/nationalarchives/tna-frontend-design-toolkit) which aims to provide similar functionality but isn't as featureful as we need and isn't published to NPM which means it has to be [copied into the projects that require it](https://github.com/nationalarchives/ds-wagtail/tree/develop/sass/tna-toolkit).
-
-## Proposed solution
-
-This repository should hold all the JavaScript and SCSS source files required for all the frontend styles along with tests and expected markup.
-
-### Output
-
-The source files will be compiled down to a NodeJS package and deployed to [NPM](https://www.npmjs.com/). The package will contain:
-
-- All the JavaScript and SCSS source files which can be imported into a projects source code and compiled by the project (which will allow for tree shaking and application-specific modifications)
-- An AMD/UMD/IIFE (TBD) ES5 JavaScript file which can be included with a normal `<script>` element
-- A single CSS file containing all the styles which can be included with a normal `<style>` element
-- The Nunjucks templates for each component that might be required in other projects such as prototyping tools (other implementations can be made such as [Jinja templates](https://github.com/nationalarchives/tna-frontend-jinja))
-
-### Component resources
-
-Each component in this repository should contain:
-
-- Nunjucks template - only used to display the component within the examples page and aid development
-- SCSS - which could either be imported as a standalone styles declaration or as part of the compiled output
-- JavaScript (ESNext) - if there is any progressive enhancement required on the component
-- Options/properties - a list of the configurable properties of the component and their types
-- Test scenarios - a variety of configurations and their expected outputs that can be used by either this repository or other implementations of the components (e.g. Jinja)
-
-### Technologies
-
-- SCSS (used by GDS, is the de facto standard CSS preprocessor, already using in ETNA)
-- Webpack - compilation of JavaScript and CSS (used by numerous TNA projects already)
-- Babel - will allow us to use ESNext or possibly even TypeScript (although this could go against the lean requirement)
-- Storybook - allow viewing and testing of components (we have already used this elsewhere in TNA)
-
-### Relationship to other resources
-
-#### System context
-
-```mermaid
-C4Context
-    Person(dev, "Developer", "TNA developer")
-    System_Ext(github, "GitHub", "Repositories for source files")
-    System_Ext(npm, "NPMJS", "Hosts NodeJS packages")
-    System_Ext(pypi, "PyPi", "Hosts Python packages")
-    Container(app, "Application", "Example application")
-    System_Ext(pypi, "PyPi", "Hosts Python packages")
-
-    Rel(dev, github, "commits to", "git")
-    UpdateRelStyle(dev, github, $offsetX="-30", $offsetY="-30")
-    Rel(github, npm, "publishes to", "npm")
-    Rel(github, pypi, "publishes to", "pip")
-    Rel(app, npm, "consumes", "npm")
-    Rel(app, pypi, "consumes", "pip")
-
-    UpdateLayoutConfig($c4ShapeInRow="2")
-```
-
-#### Component diagram
-
-```mermaid
-C4Context
-    Person(dev, "Developer", "TNA developer")
-
-    %% Boundary(developer_machine, "Developer machine", "boundary") {
-    %%     System(docker, "Docker")
-    %% }
-
-    Boundary(github, "GitHub", "boundary") {
-        Boundary(github_jinja, "Jinja templates", "repository") {
-            Container(github_jinja_source, "Jinja templates")
-        }
-
-        Boundary(github_frontend, "Frontend styles", "repository") {
-            Container(github_frontend_source, "Frontend styles", "git repository")
-        }
-
-        Boundary(github_application, "Application", "repository") {
-            Container(github_application_source, "Application source code")
-            Component(github_application_image, "Application docker image", "GitHub image registry")
-        }
-    }
-
-    Boundary(npm, "NPMJS", "boundary") {
-        Component(npm_package, "Frontend styles")
-    }
-
-    Enterprise_Boundary(aws, "TNA AWS", "boundary") {
-        Container(app, "Application")
-    }
-
-    Boundary(pypi, "PyPi", "boundary") {
-        Component(pypi_package, "Jinja templates")
-    }
-
-    Rel(dev, github_frontend_source, "commits to")
-    UpdateRelStyle(dev, github_frontend_source, $offsetX="-80", $offsetY="-80")
-    Rel(github_frontend_source, npm_package, "publishes", "GitHub action")
-    UpdateRelStyle(github_frontend_source, npm_package, $offsetX="-40", $offsetY="-40")
-
-    Rel(dev, github_jinja_source, "commits to")
-    UpdateRelStyle(dev, github_jinja_source, $offsetX="-15", $offsetY="-80")
-    Rel(github_jinja_source, github_frontend_source, "consumes")
-    UpdateRelStyle(github_jinja_source, github_frontend_source, $offsetX="-40", $offsetY="-15")
-    Rel(github_jinja_source, pypi_package, "publishes", "GitHub action")
-    UpdateRelStyle(github_jinja_source, pypi_package, $offsetX="-110", $offsetY="-310")
-
-    Rel(dev, github_application_source, "commits to")
-    UpdateRelStyle(dev, github_application_source, $offsetX="-105", $offsetY="-250")
-    Rel(github_application_source, github_application_image, "creates", "GitHub action")
-    UpdateRelStyle(github_application_source, github_application_image, $offsetX="-90", $offsetY="-20")
-
-    Rel(github_application_image, npm_package, "consumes", "GitHub action")
-    UpdateRelStyle(github_application_image, npm_package, $offsetX="-50", $offsetY="-10")
-    Rel(github_application_image, pypi_package, "consumes", "GitHub action")
-    UpdateRelStyle(github_application_image, pypi_package, $offsetX="-120", $offsetY="-10")
-
-    %% Rel(dev, docker, "uses")
-    %% Rel(docker, npm_package, "consumes")
-    %% Rel(docker, pypi_package, "consumes")
-
-    Rel(app, github_application_image, "consumes")
-    UpdateRelStyle(app, github_application_image, $offsetX="-70", $offsetY="-10")
-
-    UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="2")
-```

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-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-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}/*# 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/grid/_index.scss","../../src/nationalarchives/variables/_grid.scss","../../src/nationalarchives/utilities/_grid.scss","../../src/nationalarchives/components/card/_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,yBEvEA,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,WCVR,UACE,oBACA,aACA,wBACA,0BACA,sBAGF,mBACE,QAYF,iBACE,QAGF,gBACE,QAGF,mBACE","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,9 +1,5 @@
-// This gives us all the helpers and SASS
-// goodness from GovUK (thank you!)
-@import "base";
+@use "tools/all" as tools;
+@use "variables/all" as variables;
 
-@import "variables/all";
-
-@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";
-
-// Utilities
-@import "grid/index";
-
-// Components
-@import "card/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",
 };