Metadata-Version: 2.4
Name: wagtail-nhsuk-frontend
Version: 2.1.0
Summary: NHSUK Frontend Styles for Wagtail
Home-page: https://github.com/nhsuk/wagtail-nhsuk-frontend
Author: Horatio Bennett
Author-email: <horatio.bennett2@nhs.net>
Description-Content-Type: text/markdown
License-File: LICENSE
Requires-Dist: Wagtail>=6.3
Provides-Extra: testing
Requires-Dist: beautifulsoup4==4.12.3; extra == "testing"
Requires-Dist: Django>=4.2; extra == "testing"
Requires-Dist: pytest==9.0.3; extra == "testing"
Requires-Dist: pytest-django==4.8.0; extra == "testing"
Provides-Extra: linting
Requires-Dist: flake8<7.0.0,>=5.0.4; extra == "linting"
Dynamic: author
Dynamic: author-email
Dynamic: description
Dynamic: description-content-type
Dynamic: home-page
Dynamic: license-file
Dynamic: provides-extra
Dynamic: requires-dist
Dynamic: summary

# Wagtail NHS.UK frontend

A wagtail implementation of the [NHS frontend v10.4.2](https://github.com/nhsuk/nhsuk-frontend) standard components.

## Installation

Install the pypi package
```
pip install wagtail-nhsuk-frontend
```

Add to your `INSTALLED_APPS` in wagtail settings
```python
INSTALLED_APPS = [
  ...

  'wagtailnhsukfrontend',

  ...
]
```

Use blocks in your streamfields
```python
from wagtail.admin.panels import FieldPanel
from wagtail.models import Page
from wagtail.fields import StreamField

from wagtailnhsukfrontend.blocks import ActionLinkBlock, WarningCalloutBlock

class HomePage(Page):
  body = StreamField([
      # Include any of the blocks you want to use.
      ('action_link', ActionLinkBlock()),
      ('callout', WarningCalloutBlock()),
  ], use_json_field=True)

  content_panels = Page.content_panels + [
      FieldPanel('body'),
  ]
```

Use templatetags
```django
{% load nhsukfrontend_tags %}

<html>
...
<body>
  {% breadcrumb %}
</body>
</html>
```

Use template includes
```django
{% include 'wagtailnhsukfrontend/header.html' with show_search=True %}
```

See the [component documentation](./docs/components/) for a list of components you can use.

Include the CSS in your base template
```html
  <link rel="stylesheet" type="text/css" href="{% static 'wagtailnhsukfrontend/css/nhsuk-frontend-10.4.2.min.css' %}">
```

Include the Javascript in your base template
```html
  <script type="text/javascript" src="{% static 'wagtailnhsukfrontend/js/nhsuk-frontend-10.4.2.min.js' %}" defer></script>
```
## Upgrading

If you are upgrading from v0 to v1, see the [changelog](./CHANGELOG.md).

This CSS and JS is taken directly from the [nhsuk-frontend library](https://github.com/nhsuk/nhsuk-frontend/releases/tag/v5.1.0) and provided in this package for convenience.

If you have a more complicated frontend build such as compiling your own custom styles, you might want to [install from npm](https://github.com/nhsuk/nhsuk-frontend/blob/master/docs/installation/installing-with-npm.md) instead.

## Contributing

See the [contributing documentation](./docs/contributing.md) to run the application locally and contribute changes.

## Further reading

See more [documentation](./docs/)
