Merge pull request #154 from nhsuk/changelog-0.4.0

v0.4.0

CHANGELOG.md

@@ -1,5 +1,16 @@
 # CHANGELOG
 
+## v0.4.0
+
+- Upgrade to the nhsuk frontend library v3 (breaking changes)
+  - Removed emergency alert component
+  - Removed feedback banner component
+- Allow sub-blocks inside Details, Expander and CareCard blocks (breaking change)
+- Add summary list component
+- Allow templatetags to be used without a `page` context
+- Add icons to blocks for nicer streamfield UI
+- Add search_action and search_field_name params to header for custom search endpoints
+
 ## v0.3.0
 
 - New components

README.md

@@ -1,6 +1,6 @@
 # Wagtail NHS.UK frontend
 
-A wagtail implementation of the [NHS frontend v2.1.0](https://github.com/nhsuk/nhsuk-frontend) standard components.
+A wagtail implementation of the [NHS frontend v3.0.2](https://github.com/nhsuk/nhsuk-frontend) standard components.
 
 ## Installation
 
@@ -66,7 +66,7 @@ Include the CSS in your base template
 
 Include the Javascript in your base template
 ```html
-  <script type="text/javascript" src="{% static 'wagtailnhsukfrontend/js/nhsuk-2.1.0.min.js' %}" defer></script>
+  <script type="text/javascript" src="{% static 'wagtailnhsukfrontend/js/nhsuk-3.0.2.min.js' %}" defer></script>
 ```
 
 ## Contributing 

docs/components/README.md

@@ -36,7 +36,6 @@ example: [Header (via settings)](./header.md#wagtail-site-settings)
 - [Details](./details.md)
 - [Do List](./do.md)
 - [Don't List](./dont.md)
-- [Emergency Alert](./emergency_alert.md)
 - [Expander & Expander Group](./expander.md)
 - [Favicons](./favicons.md)
 - [Feedback banner](./feedback_banner.md)

docs/components/care_card.md

@@ -14,6 +14,38 @@ class MyPage(Page):
   ])
 ```
 
+By default, the care card block can contain the following sub-blocks:
+
+* [RichTextBlock](https://docs.wagtail.io/en/v2.7/topics/streamfield.html#richtextblock)
+* [ActionLinkBlock](./action_link.md)
+* [DetailsBlock](./details.md)
+* [InsetTextBlock](./inset_text.md)
+* [ImageBlock](./image.md)
+* [GreyPanelBlock](./grey_panel.md)
+* [WarningCalloutBlock](./warning_callout.md)
+* [SummaryListBlock](./summary_list.md)
+
+To add extra sub-blocks, you must extend the `CareCardBlock` class.
+```py
+class CustomCareCardBody(CareCardBlock.BodyStreamBlock):
+
+  # Add a custom block
+  extra = MyExtraBlock()
+
+
+class CustomCareCardBlock(CareCardBlock):
+
+  body = CustomCareCardBody(required=True)
+
+
+class MyPage(Page):
+  body = StreamField([
+      ...
+      ('care_card', CustomCareCardBlock()),
+      ...
+  ])
+```
+
 ## Reference
 
 [Service Manual](https://beta.nhs.uk/service-manual/styles-components-patterns/care-cards)  

docs/components/details.md

@@ -14,6 +14,37 @@ class MyPage(Page):
   ])
 ```
 
+By default, the details block can contain the following sub-blocks:
+
+* [RichTextBlock](https://docs.wagtail.io/en/v2.7/topics/streamfield.html#richtextblock)
+* [ActionLinkBlock](./action_link.md)
+* [InsetTextBlock](./inset_text.md)
+* [ImageBlock](./image.md)
+* [PanelBlock](./panel.md)
+* [WarningCalloutBlock](./warning_callout.md)
+* [SummaryListBlock](./summary_list.md)
+
+To add extra sub-blocks, you must extend the `DetailsBlock` class.
+```py
+class CustomDetailsBody(DetailsBlock.BodyStreamBlock):
+
+  # Add a custom block
+  extra = MyExtraBlock()
+
+
+class CustomDetailsBlock(DetailsBlock):
+
+  body = CustomDetailsBody(required=True)
+
+
+class MyPage(Page):
+  body = StreamField([
+      ...
+      ('details', CustomDetailsBlock()),
+      ...
+  ])
+```
+
 ## Reference
 
 [Service Manual](https://beta.nhs.uk/service-manual/styles-components-patterns/details)  

docs/components/expander.md

@@ -14,6 +14,37 @@ class MyPage(Page):
   ])
 ```
 
+By default, the expander block can contain the following sub-blocks:
+
+* [RichTextBlock](https://docs.wagtail.io/en/v2.7/topics/streamfield.html#richtextblock)
+* [ActionLinkBlock](./action_link.md)
+* [InsetTextBlock](./inset_text.md)
+* [ImageBlock](./image.md)
+* [GreyPanelBlock](./grey_panel.md)
+* [WarningCalloutBlock](./warning_callout.md)
+* [SummaryListBlock](./summary_list.md)
+
+To add extra sub-blocks, you must extend the `ExpanderBlock` class.
+```py
+class CustomExpanderBody(ExpanderBlock.BodyStreamBlock):
+
+  # Add a custom block
+  extra = MyExtraBlock()
+
+
+class CustomExpanderBlock(ExpanderBlock):
+
+  body = CustomExpanderBody(required=True)
+
+
+class MyPage(Page):
+  body = StreamField([
+      ...
+      ('expander', CustomExpanderBlock()),
+      ...
+  ])
+```
+
 # Expander Group
 
 An expander group should be used when multiple expanders are required in a list.

docs/components/header.md

@@ -34,6 +34,12 @@ To include the header in your template, use the `header` templatetag.
 </body>
 ```
 
+If search is going to be used, the search endpoint will probably need to be configured.
+
+```
+  {% header search_action="/s/" search_field_name="q" %}
+```
+
 ## Direct use of templates
 
 ```django
@@ -53,6 +59,8 @@ There are some options that can be passed to the header:
 | `logo_aria` | Aria label for the NHS logo | `"NHS Homepage"` |
 | `transactional` | Set to `True` to display a smaller header, suitable for a transactional service | `False` |
 | `show_search` | Set to `True` to show the search bar | `False` |
+| `search_action` | Value to use as the search <form> `action` attribute | `/search/` |
+| `search_field_name` | Value to use as the search <input> `name` attribute | `search-input` |
 | `primary_links` | An array of dicts containing navigation items | `None` |
 | `primary_links[].label` | Navigation item label | `None` |
 | `primary_links[].url` | Navigation item url | `None` |
@@ -65,6 +73,15 @@ There are some options that can be passed to the header:
 {% include 'wagtailnhsukfrontend/header.html' with show_search=True %}
 ```
 
+#### Header with custom search endpoint
+
+```django
+{% include 'wagtailnhsukfrontend/header.html' with show_search=True search_action="/s/" search_field_name="q"  %}
+```
+
+Performing a search with these settings will result in the user navigating to `/s/?q=search-term` instead of the
+default `/search/?search-input=search-term`
+
 #### Header with navigation
 
 Assuming `navigation` is added to the context somehow, for example with a

docs/components/summary_list.md

@@ -0,0 +1,21 @@
+# Summary List
+
+```py
+from wagtail.core.models import Page
+from wagtail.core.fields import StreamField
+
+from wagtailnhsukfrontend.blocks import SummaryListBlock
+
+class MyPage(Page):
+  body = StreamField([
+      ...
+      ('summary_list', SummaryListBlock()),
+      ...
+  ])
+```
+
+## Reference
+
+[Service Manual](https://beta.nhs.uk/service-manual/styles-components-patterns/summary-list)  
+[Frontend Library](https://github.com/nhsuk/nhsuk-frontend/tree/master/packages/components/summary-list)
+

setup.py

@@ -19,7 +19,7 @@ class CompileCSSCommand(build):
     def run(self):
         filepath_base = 'wagtailnhsukfrontend/static/wagtailnhsukfrontend/css/'
         filenames = [
-            'nhsuk-2.1.0.min.css',
+            'nhsuk-3.0.2.min.css',
             'fixes.css',
         ]
 
@@ -35,7 +35,7 @@ def run(self):
         'build': CompileCSSCommand,
     },
     name="wagtail-nhsuk-frontend",
-    version="0.3.0",
+    version="0.4.0",
     description="NHSUK Frontend Styles for Wagtail",
     author="Mike Monteith",
     author_email="<[email protected]>",

testapp/home/migrations/0009_summary_list_block.py

@@ -0,0 +1,23 @@
+# Generated by Django 2.1.9 on 2019-11-06 09:54
+
+from django.db import migrations
+import wagtail.core.blocks
+import wagtail.core.blocks.field_block
+import wagtail.core.fields
+import wagtail.images.blocks
+import wagtailnhsukfrontend.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0008_hubspage'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='homepage',
+            name='body',
+            field=wagtail.core.fields.StreamField([('action_link', wagtail.core.blocks.StructBlock([('text', wagtail.core.blocks.CharBlock(label='Link text', required=True)), ('external_url', wagtail.core.blocks.URLBlock(label='URL', required=True)), ('new_window', wagtail.core.blocks.BooleanBlock(label='Open in new window', required=False))])), ('care_card', wagtail.core.blocks.StructBlock([('type', wagtail.core.blocks.ChoiceBlock(choices=[('primary', 'Non-urgent'), ('urgent', 'Urgent'), ('immediate', 'Immediate')])), ('heading_level', wagtail.core.blocks.IntegerBlock(default=3, help_text='The heading level affects users with screen readers. Default=3, Min=2, Max=4.', max_value=4, min_value=2, required=True)), ('title', wagtail.core.blocks.CharBlock(required=True)), ('body', wagtail.core.blocks.RichTextBlock(required=True))])), ('details', wagtail.core.blocks.StructBlock([('title', wagtail.core.blocks.CharBlock(required=True)), ('body', wagtail.core.blocks.RichTextBlock(required=True))])), ('do_list', wagtail.core.blocks.StructBlock([('heading_level', wagtail.core.blocks.IntegerBlock(default=3, help_text='The heading level affects users with screen readers. Default=3, Min=2, Max=4.', max_value=4, min_value=2, required=True)), ('do', wagtail.core.blocks.ListBlock(wagtail.core.blocks.field_block.RichTextBlock))])), ('dont_list', wagtail.core.blocks.StructBlock([('heading_level', wagtail.core.blocks.IntegerBlock(default=3, help_text='The heading level affects users with screen readers. Default=3, Min=2, Max=4.', max_value=4, min_value=2, required=True)), ('dont', wagtail.core.blocks.ListBlock(wagtail.core.blocks.field_block.RichTextBlock))])), ('expander', wagtail.core.blocks.StructBlock([('title', wagtail.core.blocks.CharBlock(required=True)), ('body', wagtail.core.blocks.RichTextBlock(required=True))])), ('expander_group', wagtail.core.blocks.StructBlock([('expanders', wagtail.core.blocks.ListBlock(wagtailnhsukfrontend.blocks.ExpanderBlock))])), ('inset_text', wagtail.core.blocks.StructBlock([('body', wagtail.core.blocks.RichTextBlock(required=True))])), ('image', wagtail.core.blocks.StructBlock([('content_image', wagtail.images.blocks.ImageChooserBlock(required=True)), ('alt_text', wagtail.core.blocks.CharBlock(help_text='Only leave this blank if the image is decorative.', required=False)), ('caption', wagtail.core.blocks.CharBlock(required=False))])), ('panel', wagtail.core.blocks.StructBlock([('label', wagtail.core.blocks.CharBlock(required=False)), ('heading_level', wagtail.core.blocks.IntegerBlock(default=3, help_text='The heading level affects users with screen readers. Ignore this if there is no label. Default=3, Min=2, Max=4.', max_value=4, min_value=2)), ('body', wagtail.core.blocks.RichTextBlock(required=True))])), ('panel_list', wagtail.core.blocks.StructBlock([('panels', wagtail.core.blocks.ListBlock(wagtail.core.blocks.StructBlock([('left_panel', wagtail.core.blocks.StructBlock([('label', wagtail.core.blocks.CharBlock(required=False)), ('heading_level', wagtail.core.blocks.IntegerBlock(default=3, help_text='The heading level affects users with screen readers. Ignore this if there is no label. Default=3, Min=2, Max=4.', max_value=4, min_value=2)), ('body', wagtail.core.blocks.RichTextBlock(required=True))])), ('right_panel', wagtail.core.blocks.StructBlock([('label', wagtail.core.blocks.CharBlock(required=False)), ('heading_level', wagtail.core.blocks.IntegerBlock(default=3, help_text='The heading level affects users with screen readers. Ignore this if there is no label. Default=3, Min=2, Max=4.', max_value=4, min_value=2)), ('body', wagtail.core.blocks.RichTextBlock(required=True))]))])))])), ('grey_panel', wagtail.core.blocks.StructBlock([('label', wagtail.core.blocks.CharBlock(label='heading', required=False)), ('heading_level', wagtail.core.blocks.IntegerBlock(default=3, help_text='The heading level affects users with screen readers. Ignore this if there is no heading. Default=3, Min=2, Max=4.', max_value=4, min_value=2)), ('body', wagtail.core.blocks.RichTextBlock(required=True))])), ('warning_callout', wagtail.core.blocks.StructBlock([('title', wagtail.core.blocks.CharBlock(default='Important', required=True)), ('heading_level', wagtail.core.blocks.IntegerBlock(default=3, help_text='The heading level affects users with screen readers. Default=3, Min=2, Max=4.', max_value=4, min_value=2, required=True)), ('body', wagtail.core.blocks.RichTextBlock(required=True))])), ('summary_list', wagtail.core.blocks.StructBlock([('rows', wagtail.core.blocks.ListBlock(wagtailnhsukfrontend.blocks.SummaryListRowBlock)), ('no_border', wagtail.core.blocks.BooleanBlock(default=False, required=False))]))]),
+        ),
+    ]