Skip to content

Useful resources

Status

Resource Status
TNA Frontend Build status
TNA Frontend Jinja Build status
Docker images Build status
Flask application template Build status
Django application template Build status
FastAPI application template Build status

Relationships

tna-frontend
Source of truth for HTML, CSS and JavaScript of components and layouts
design-system
Design-centric advice on how to design TNA services and applications using components, patterns and layouts
Describes
how to use
engineering-handbook
Technical advice on how to develop TNA services and applications
tna-frontend-jinja
Jinja2 templates (HTML) for use in applications
Defines
UI application
Consumes
(npm)
govuk-prototype-kit
External prototyping tool maintained by GDS
References
HTML prototype
Service prototype
Consumes
(npm)
Consumes
(npm)
Defines
Documents
how to make
Visual designs
Figma
Defines
Component designs
Figma
Defines
Docker images
Base Python images
Built using
Built using
tna-frontend-docs
Documentation for TNA Frontend
Documents
flask-application-template
Skeleton TNA Flask application template
django-application-template
Skeleton TNA Django application template
Consumes
(Docker)
Consumes
(Docker)
API application
Services
fastapi-application-template
Skeleton TNA FastAPI application template
Consumes
(Docker)
Built using
Documents
how to make
Documents
how to make
Consumes
(PyPI)
Consumes
(PyPI)
Consumes
(PyPI)

Process for new components and styles

graph TD;
    Figma --> Stakeholders;
    Stakeholders --> Decision{Signed off?};
    Decision --> |Yes| tna-frontend
    Decision --> |No| Figma
    tna-frontend --> Tests{Standards met?};
    Tests --> |Yes| npm["Publish TNA Frontend to npm"]
    Tests --> |No| tna-frontend
    npm --> prototype["Use in prototypes"];
    npm --> tna-frontend-jinja;
    tna-frontend-jinja --> Update["Update Jinja templates"];
    Update --> JinjaTests{Templates match?};
    JinjaTests --> |Yes| PyPI["Publish TNA Frontend Jinja to PyPI"]
    JinjaTests --> |No| Update
    npm --> |"Styles (CSS and JavaScript)"|Application["Use in application"];
    PyPI --> |"Jinja templates (HTML)"|Application["Use in application"];