Merge remote-tracking branch 'origin/integration/impact-report-page' …

…into staging

tbx/impact_reports/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class ImpactReportsConfig(AppConfig):
+    name = "tbx.impact_reports"
+    label = "impact_reports"

tbx/impact_reports/blocks.py

@@ -0,0 +1,113 @@
+from tbx.core.blocks import StoryBlock
+from wagtail.blocks import (
+    CharBlock,
+    ChoiceBlock,
+    ListBlock,
+    RichTextBlock,
+    StructBlock,
+)
+from wagtail.images.blocks import ImageChooserBlock
+
+
+class ImpactReportHeadingBlock(StructBlock):
+    image = ImageChooserBlock(required=False)
+    short_heading = CharBlock(
+        required=False, help_text="Used for the Table of Contents"
+    )
+    heading = CharBlock(required=False)
+
+    class Meta:
+        icon = "title"
+        template = (
+            "patterns/molecules/streamfield/blocks/impact_report_heading_block.html"
+        )
+
+
+class ParagraphWithQuoteBlock(StructBlock):
+    text = RichTextBlock()
+    quote = RichTextBlock(features=["bold", "italic", "link", "document-link"])
+    attribution = CharBlock(required=False)
+    quote_alignment = ChoiceBlock(
+        choices=[
+            ("left", "Left"),
+            ("right", "Right"),
+        ],
+        default="right",
+    )
+
+    class Meta:
+        icon = "pilcrow"
+        template = (
+            "patterns/molecules/streamfield/blocks/paragraph_with_quote_block.html"
+        )
+
+
+class ParagraphWithImageBlock(StructBlock):
+    text = RichTextBlock()
+    image = ImageChooserBlock(required=False)
+    image_alignment = ChoiceBlock(
+        choices=[
+            ("left", "Left"),
+            ("right", "Right"),
+        ],
+        default="right",
+    )
+
+    class Meta:
+        icon = "pilcrow"
+        template = (
+            "patterns/molecules/streamfield/blocks/paragraph_with_image_block.html"
+        )
+
+
+class ThreeColumnImageGridItemBlock(StructBlock):
+    image = ImageChooserBlock()
+    text = CharBlock()
+
+    class Meta:
+        icon = "image"
+
+
+class ThreeColumnImageGridBlock(StructBlock):
+    items = ListBlock(ThreeColumnImageGridItemBlock(), min_num=3, max_num=3)
+
+    class Meta:
+        icon = "image"
+        template = (
+            "patterns/molecules/streamfield/blocks/three_column_image_grid_block.html"
+        )
+
+
+class DiagonalImageGridBlock(StructBlock):
+    images = ListBlock(ImageChooserBlock(), min_num=3, max_num=3)
+
+    class Meta:
+        icon = "image"
+        template = (
+            "patterns/molecules/streamfield/blocks/diagonal_image_grid_block.html"
+        )
+
+
+class TwoColumnTextGridItemBlock(StructBlock):
+    image = ImageChooserBlock()
+    heading = CharBlock()
+    text = CharBlock()
+
+
+class TwoColumnTextGridBlock(StructBlock):
+    items = ListBlock(TwoColumnTextGridItemBlock())
+
+    class Meta:
+        icon = "grip"
+        template = (
+            "patterns/molecules/streamfield/blocks/two_column_text_grid_block.html"
+        )
+
+
+class ImpactReportStoryBlock(StoryBlock):
+    impact_report_heading = ImpactReportHeadingBlock(group="Impact Report")
+    paragraph_with_quote = ParagraphWithQuoteBlock(group="Impact Report")
+    paragraph_with_image = ParagraphWithImageBlock(group="Impact Report")
+    three_column_image_grid = ThreeColumnImageGridBlock(group="Impact Report")
+    diagonal_image_grid = DiagonalImageGridBlock(group="Impact Report")
+    two_column_text_grid = TwoColumnTextGridBlock(group="Impact Report")

tbx/impact_reports/migrations/0001_initial.py

@@ -0,0 +1,53 @@
+# Generated by Django 3.2.16 on 2022-12-15 11:20
+
+from django.db import migrations, models
+import django.db.models.deletion
+import modelcluster.fields
+import tbx.core.blocks
+import wagtail.blocks
+import wagtail.embeds.blocks
+import wagtail.fields
+import wagtail.images.blocks
+import wagtailmarkdown.blocks
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        ('people', '0031_auto_20220422_1515'),
+        ('wagtailcore', '0078_referenceindex'),
+        ('images', '0003_alter_customimage_file_hash'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='ImpactReportPage',
+            fields=[
+                ('page_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='wagtailcore.page')),
+                ('strapline', models.CharField(max_length=255)),
+                ('introduction_title', models.CharField(default='Introduction', max_length=255)),
+                ('introduction', wagtail.fields.RichTextField(blank=True)),
+                ('body', wagtail.fields.StreamField([('h2', wagtail.blocks.CharBlock(form_classname='title', icon='title', template='patterns/molecules/streamfield/blocks/heading2_block.html')), ('h3', wagtail.blocks.CharBlock(form_classname='title', icon='title', template='patterns/molecules/streamfield/blocks/heading3_block.html')), ('h4', wagtail.blocks.CharBlock(form_classname='title', icon='title', template='patterns/molecules/streamfield/blocks/heading4_block.html')), ('intro', wagtail.blocks.RichTextBlock(icon='pilcrow', template='patterns/molecules/streamfield/blocks/intro_block.html')), ('paragraph', wagtail.blocks.RichTextBlock(icon='pilcrow', template='patterns/molecules/streamfield/blocks/paragraph_block.html')), ('aligned_image', wagtail.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('alignment', tbx.core.blocks.ImageFormatChoiceBlock()), ('caption', wagtail.blocks.CharBlock()), ('attribution', wagtail.blocks.CharBlock(required=False))], label='Aligned image', template='patterns/molecules/streamfield/blocks/aligned_image_block.html')), ('wide_image', wagtail.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock())], label='Wide image', template='patterns/molecules/streamfield/blocks/wide_image_block.html')), ('bustout', wagtail.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('text', wagtail.blocks.RichTextBlock())], template='patterns/molecules/streamfield/blocks/bustout_block.html')), ('pullquote', wagtail.blocks.StructBlock([('quote', wagtail.blocks.CharBlock(form_classname='quote title')), ('attribution', wagtail.blocks.CharBlock())], template='patterns/molecules/streamfield/blocks/pullquote_block.html')), ('raw_html', wagtail.blocks.RawHTMLBlock(icon='code', label='Raw HTML', template='patterns/molecules/streamfield/blocks/raw_html_block.html')), ('embed', wagtail.embeds.blocks.EmbedBlock(icon='code', template='patterns/molecules/streamfield/blocks/embed_block.html')), ('markdown', wagtailmarkdown.blocks.MarkdownBlock(icon='code', template='patterns/molecules/streamfield/blocks/markdown_block.html')), ('story_embed', tbx.core.blocks.ExternalStoryEmbedBlock(icon='code', template='patterns/molecules/streamfield/blocks/external_story_block.html')), ('impact_report_heading', wagtail.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock(required=False)), ('short_heading', wagtail.blocks.CharBlock(help_text='Used for the Table of Contents', required=False)), ('heading', wagtail.blocks.CharBlock(required=False))], group='Impact Report')), ('paragraph_with_quote', wagtail.blocks.StructBlock([('text', wagtail.blocks.RichTextBlock()), ('quote', wagtail.blocks.RichTextBlock(features=['bold', 'italic', 'link', 'document-link'])), ('attribution', wagtail.blocks.CharBlock(required=False)), ('quote_alignment', wagtail.blocks.ChoiceBlock(choices=[('left', 'Left'), ('right', 'Right')]))], group='Impact Report')), ('paragraph_with_image', wagtail.blocks.StructBlock([('text', wagtail.blocks.RichTextBlock()), ('image', wagtail.images.blocks.ImageChooserBlock(required=False)), ('image_alignment', wagtail.blocks.ChoiceBlock(choices=[('left', 'Left'), ('right', 'Right')]))], group='Impact Report')), ('three_column_image_grid', wagtail.blocks.StructBlock([('items', wagtail.blocks.ListBlock(wagtail.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('text', wagtail.blocks.CharBlock())]), max_num=3, min_num=3))], group='Impact Report')), ('diagonal_image_grid', wagtail.blocks.StructBlock([('images', wagtail.blocks.ListBlock(wagtail.images.blocks.ImageChooserBlock(), max_num=3, min_num=3))], group='Impact Report')), ('two_column_text_grid', wagtail.blocks.StructBlock([('items', wagtail.blocks.ListBlock(wagtail.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('heading', wagtail.blocks.CharBlock()), ('text', wagtail.blocks.CharBlock())])))], group='Impact Report'))], use_json_field=True)),
+                ('hero_image', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='images.customimage')),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('wagtailcore.page',),
+        ),
+        migrations.CreateModel(
+            name='ImpactReportAuthor',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('sort_order', models.IntegerField(blank=True, editable=False, null=True)),
+                ('author', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='+', to='people.author')),
+                ('page', modelcluster.fields.ParentalKey(on_delete=django.db.models.deletion.CASCADE, related_name='authors', to='impact_reports.impactreportpage')),
+            ],
+            options={
+                'ordering': ['sort_order'],
+                'abstract': False,
+            },
+        ),
+    ]

tbx/impact_reports/migrations/0002_alter_impactreportpage_hero_image.py

@@ -0,0 +1,20 @@
+# Generated by Django 3.2.16 on 2022-12-15 13:56
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('images', '0003_alter_customimage_file_hash'),
+        ('impact_reports', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='impactreportpage',
+            name='hero_image',
+            field=models.ForeignKey(blank=True, help_text='This is for the illustration only. Use an image with dimensions of 571x700', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='images.customimage'),
+        ),
+    ]

tbx/impact_reports/models.py

@@ -0,0 +1,97 @@
+from django.db import models
+from django.utils.text import slugify
+
+from modelcluster.fields import ParentalKey
+from wagtail.admin.panels import FieldPanel, InlinePanel, MultiFieldPanel
+from wagtail.fields import RichTextField, StreamField
+from wagtail.models import Orderable, Page
+from wagtail.search import index
+
+from .blocks import ImpactReportStoryBlock
+
+
+class ImpactReportAuthor(Orderable):
+    page = ParentalKey("impact_reports.ImpactReportPage", related_name="authors")
+    author = models.ForeignKey(
+        "people.Author",
+        on_delete=models.CASCADE,
+        related_name="+",
+    )
+
+    panels = [
+        FieldPanel("author"),
+    ]
+
+
+class ImpactReportPage(Page):
+    template = "patterns/pages/impact_reports/impact_report_page.html"
+
+    strapline = models.CharField(max_length=255)
+
+    hero_image = models.ForeignKey(
+        "images.CustomImage",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="This is for the illustration only. Use an image with dimensions of 571x700",
+    )
+
+    introduction_title = models.CharField(max_length=255, default="Introduction")
+    introduction = RichTextField(blank=True)
+
+    body = StreamField(ImpactReportStoryBlock(), use_json_field=True)
+
+    content_panels = [
+        MultiFieldPanel(
+            [
+                FieldPanel("title", classname="title"),
+                FieldPanel("strapline"),
+                FieldPanel("hero_image"),
+            ],
+            heading="Hero",
+        ),
+        MultiFieldPanel(
+            [
+                FieldPanel("introduction_title"),
+                FieldPanel("introduction"),
+                InlinePanel("authors", label="Author", min_num=1),
+            ],
+            heading="Introduction",
+        ),
+        FieldPanel("body"),
+    ]
+
+    search_fields = Page.search_fields + [
+        index.SearchField("introduction"),
+        index.SearchField("body"),
+    ]
+
+    @property
+    def headings(self):
+        """
+        Gets all of the impact report headers' short headings and their slugs,
+        including the Introduction.
+
+        This is used to create a table-of-contents like section at the top of
+        the page where viewers can jump to the top of each impact report heading
+        and Introduction.
+        """
+
+        headings = [
+            {
+                "short_heading": self.introduction_title,
+                "slug": slugify(self.introduction_title),
+            },
+        ]
+
+        for block in self.body:
+            if block.block_type == "impact_report_heading":
+                headings.append(
+                    {
+                        "short_heading": block.value["short_heading"],
+                        "slug": slugify(block.value["short_heading"]),
+                    }
+                )
+
+        return headings

tbx/project_styleguide/templates/patterns/molecules/author/author.html

@@ -37,13 +37,15 @@
                     <span class="u-sr-only">,</span>
                 {% endif %}
             </span>
-            <div class="author__tags">
-                <span class="u-sr-only">Related post categories:</span>
-                {% for tag in item.related_services.all %}
-                    {% include "patterns/atoms/tag/tag.html" with item=tag small=True tag_link_base=tag_link_base %}
-                    <span class="u-sr-only">,</span>
-                {% endfor %}
-            </div>
+            {% if tag_link_base %}
+                <div class="author__tags">
+                    <span class="u-sr-only">Related post categories:</span>
+                    {% for tag in item.related_services.all %}
+                        {% include "patterns/atoms/tag/tag.html" with item=tag small=True tag_link_base=tag_link_base %}
+                        <span class="u-sr-only">,</span>
+                    {% endfor %}
+                </div>
+            {% endif %}
         </div>
     </div>
 </div>

tbx/project_styleguide/templates/patterns/molecules/hero/report_hero.html

@@ -0,0 +1,32 @@
+{% load wagtailcore_tags wagtailimages_tags static %}
+
+{% if page.hero_image %}
+    {% image page.hero_image fill-571x700 as hero_image %}
+{% endif %}
+<div class="report-hero" {% if page.hero_image %}style="background-image:url({{ hero_image.url }})"{% endif %}>
+    <div class="report-hero__container">
+        <div class="report-hero__content">
+            <h1 class="report-hero__title">{{ title|richtext }}</h1>
+        </div>
+        <nav class="in-page-nav in-page-nav--report" aria-label="In page navigation" data-in-page-nav>
+            <div class="in-page-nav__inner">
+                <div class="in-page-nav__header">
+                    <a href="#" title="Back to top" class="in-page-nav__back-to-top">
+                        <svg viewBox="0 0 130.37 156.35" aria-hidden="true" fill="var(--color--header-icon-color, #fd5765)" class="in-page-nav__logo"><path d="M129.64 82.82c-.2-1.59-2.3-1.96-3.08-.57-4.72 8.4-11.32 15.63-15.95 17.77l.03-.94C109.85 40.98 67.87 9.53 53.1.26c-1.39-.87-3.08.63-2.36 2.11 9.67 20.07 6.11 39.15-10.19 57.56-3.05 3.45-6.46 7.82-9.36 12.24v-.01s-3.48 5.06-6.84 12.09l-.16-.19c-6.73-10.16-8.2-22.44-8.47-29.08-.06-1.59-2.07-2.25-3-.95C8.53 59.86 1.31 71.61.24 84.57c-2.58 31.23 15.9 63.11 47.72 71.64 1.46.39 2.56-1.25 1.75-2.52-2.81-4.41-4.49-10.59-4.49-18.62 0-18.53 19.97-46.64 19.97-46.64s19.97 28.11 19.97 46.64c0 8.09-1.71 14.29-4.55 18.71-.81 1.26.27 2.9 1.73 2.52 30.86-7.96 45.44-36.5 47.64-53.99.78-7.79.24-14.95-.34-19.49z"></path></svg>
+                        <span class="in-page-nav__title">
+                            {{ title|richtext }}
+                        </span>
+                    </a>
+                </div>
+                <ul class="in-page-nav__container">
+                    {% for heading in page.headings %}
+                        <li class="in-page-nav__item">
+                            <a class="in-page-nav__link" href="#{{ heading.slug }}">{{ heading.short_heading }}</a>
+                        </li>
+                    {% endfor %}
+                </ul>
+            </div>
+        </nav>
+    </div>
+    <div class="sentinel" data-sticky-nav aria-hidden="true"></div>
+</div>

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/diagonal_image_grid_block.html

@@ -0,0 +1,8 @@
+{% load wagtailimages_tags %}
+
+<b>Diagonal image grid block</b>
+{% for img in value.images %}
+    <div>
+        {% image img fill-300x300 %}
+    </div>
+{% endfor %}

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/diagonal_image_grid_block.yaml

@@ -0,0 +1,11 @@
+context:
+  value:
+    images:
+      - true
+      - true
+      - true
+
+tags:
+  image:
+    img fill-300x300:
+      raw: '<img src="https://placekitten.com/300/300">'

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/impact_report_heading_block.html

@@ -0,0 +1,14 @@
+{% load wagtailcore_tags wagtailimages_tags static %}
+
+<div class="report-section">
+    {% image value.image fill-1792x597 class="report-section__image" %}
+
+    <div class="report-section__container">
+        <div>
+            <p class="report-section__short-heading" id="{{ value.short_heading|slugify }}" data-service-section>
+                {{ value.short_heading }}
+            </p>
+        </div>
+        <h2 class="report-section__heading">{{ value.heading|richtext }}</h2>
+    </div>
+</div>

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/impact_report_heading_block.yaml

@@ -0,0 +1,10 @@
+context:
+  value:
+    short_heading: The business
+    heading: Doing business <span>right</span>
+    image: true
+
+tags:
+  image:
+    value.image fill-1792x597 class="report-section__image":
+      raw: '<img src="https://placekitten.com/1792/597" class="report-section__image">'