Merge pull request #376 from torchbox/content-prep

All changes from the website evolution around splitting the website into divisions

Author: SharmaineLim

.github/workflows/gh-pages.yml

@@ -47,7 +47,7 @@ jobs:
       - name: Build site (_site directory name is used for Jekyll compatiblity)
         run: mkdocs build --config-file ./mkdocs.yml --site-dir ./_site
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
+        uses: actions/upload-pages-artifact@v3
 
   deploy:
     needs: build

docs/custom-features/divisions.md

@@ -0,0 +1,24 @@
+# Divisions
+
+The site's target audience can be grouped into divisions; e.g. the charity division, the public sector division, and the Wagtail division. All content going forward can be associated to one of these divisions.
+
+The idea is that if you're a charity organisation, you can find content that's specific and relevant for you because the relevant content will all be in one place.
+
+This feature allows content to be associated to a specific `DivisionPage`, which allows us to display the same theme, logo and navigation for any content related to a division. (Because of this, a page should only have one associated division.)
+
+## Options
+
+The available options are dependent on the `DivisionPage`s that have been created.
+
+## Division configuration
+
+The `tbx.core.utils.models.DivisionMixin` provides a mechanism for associating a specific division with a page. It offers the following functionality:
+
+- `division` field: Adds a ForeignKey field to associate a specific division with a page.
+- `final_division`: A cached property that determines the appropriate division to associate to a page. It first checks if the page has a `division` specified. If not, it traverses the page's ancestors to find the first page that either has a `division` specified or is a `DivisionPage`, defaulting to `None`.
+
+---
+
+???+ note
+
+    Please ensure that the Editors' guide is updated accordingly whenever any changes are made to this feature. A private link, for Torchbox employees only, can be found at https://intranet.torchbox.com/torchbox-com-project-docs.

docs/custom-features/theme.md

@@ -6,11 +6,11 @@ The Theme feature enables the customization of page styles through the applicati
 
 The available color themes are defined using the `tbx.core.utils.models.ColourTheme` enumeration. Each theme option consists of a CSS class name and a human-readable label. The following themes are available:
 
-- `ColourTheme.NONE`: No specific theme applied. When the theme is set to "None", this means we don't add a `theme-****` class to the page, and the default theme (_Coral_, at the time of writing these docs) is applied.
+- `ColourTheme.NONE`: No specific theme applied. When the theme is set to "None", this means we don't add a `theme-****` class to the page, and the default theme (_Coral_, at the time of writing these docs) is applied (unless the page inherits a theme).
 - `ColourTheme.CORAL`: Applies a `theme-coral` class to the page.
+- `ColourTheme.NEBULINE`: Applies a `theme-nebuline` class to the page.
 - `ColourTheme.LAGOON`: Applies a `theme-lagoon` class to the page.
-- `ColourTheme.BANANA`: Applies a `theme-banana` class to the page.
-- `ColourTheme.EARTH`: Applies a `theme-earth` class to the page.
+- `ColourTheme.GREEN`: Applies a `theme-green` class to the page.
 
 ???+ tip
 

docs/front-end/breakpoints.md

@@ -13,7 +13,9 @@ $breakpoints: (
   'x-large' '(min-width: 1280px)',
   // secondary breakpoints - use sparingly
   'small' '(min-width: 410px)',
-  'xx-large' '(min-width: 1800px)'
+  'menu' '(min-width: 800px)',
+  'xx-large' '(min-width: 1440px)',
+  'xxx-large' '(min-width: 1800px)'
 );
 ```
 

docs/front-end/fonts.md

@@ -2,7 +2,7 @@
 
 The site uses 'Outfit' as the main font and 'sans-serif' as the fallback font.
 
-Outfit is avaible from [Google Fonts](https://fonts.google.com/specimen/Outfit) and is a variable font. This means that the font can be loaded as a single file and the weight and style can be adjusted using CSS. Any weight between 300 and 600 can be used.
+Outfit is avaible from [Google Fonts](https://fonts.google.com/specimen/Outfit) and is a variable font. This means that the font can be loaded as a single file and the weight and style can be adjusted using CSS. Any weight between 200 and 600 can be used.
 
 We originally limited the number of font variants for reasons of sustainability, although the fact that this is a variable font means that extra weights could be added if required without impacting carbon emissions.
 
@@ -12,7 +12,7 @@ The font is loaded using the following CSS in `sass/base/_fonts.scss`:
 @font-face {
   font-family: 'Outfit';
   font-style: normal;
-  font-weight: 300 600;
+  font-weight: 200 600;
   font-display: swap;
   src: url(../fonts/outfit-variable-font.woff2) format('woff2-variations');
 }

docs/front-end/grid.md

@@ -36,7 +36,7 @@ Any alignment or spacing rules for a component should be added using BEM syntax
     grid-column: 2 / span 4;
 
     @include media-query(large) {
-      grid-column: 4 / span 9;
+      grid-column: 2 / span 9;
     }
   }
 }

docs/front-end/motif-headings.md

@@ -8,13 +8,13 @@ The CSS to set the mode is an html class of either `.mode-dark` or `.mode-light`
 
 An editor has an option to select a theme on each page. Selecting a theme on a page will change it for that page, and all child pages, unless another selection is made further down the page tree.
 
-There are currently 4 themes in use: coral, lagoon, banana and earth. The CSS to set the theme is an html class of either `.theme-coral`, `.theme-lagoon`, `.theme-banana` or `.theme-earth`.
+There are currently 4 themes in use: coral, nebuline, lagoon and green. The CSS to set the theme is an html class of either `.theme-coral`, `.theme-nebuline`, `.theme-lagoon` or `.theme-green`.
 
 ???+ note
 
-    If you are adding a new theme, check the colour contrast for all the new accent colours added, used in the drop-caps (remember to check both dark mode and light mode). They need to pass colour contrast as if the entire drop-cap was filled with that colour.
+    If you are adding a new theme, check the colour contrast for all the new accent colours added, used in the heading motifs (remember to check both dark mode and light mode). They need to pass colour contrast as if the entire heading was filled with that colour.
 
-    The drop-caps svgs use a semi-transparent version of the accent colours, and the contrast of the resulting colour also needs to be checked. The [colour contrast checker](https://chromewebstore.google.com/detail/colour-contrast-checker/nmmjeclfkgjdomacpcflgdkgpphpmnfe?hl=en-GB&utm_source=ext_sidebar) is a useful chrome extension to assist with this.
+    The motifs svgs use a semi-transparent version of the accent colours, and the contrast of the resulting colour also needs to be checked. The [colour contrast checker](https://chromewebstore.google.com/detail/colour-contrast-checker/nmmjeclfkgjdomacpcflgdkgpphpmnfe?hl=en-GB&utm_source=ext_sidebar) is a useful chrome extension to assist with this.
 
 ## Defaults
 

docs/front-end/themes_and_modes.md

@@ -4,6 +4,6 @@ Most CSS classes used in this build are designed to fit with a particular compon
 
 Some, such as the `listing` component are designed to be a base with variations across a number of variant components - this is made clear by the component naming: `listing--image.html`, `listing--simple.html` etc.
 
-However, we have some utility classes which are designed for re-use, along with the option to to use Tailwind utility classes. Classes that are designed for re-use include `button`, `heading--[xyz]`, `link`, `supporting`, `.body` and `icon--listing-arrow`.
+However, we have some utility classes which are designed for re-use, along with the option to to use Tailwind utility classes. Classes that are designed for re-use include `button`, `heading--[xyz]`, `text--[xyz]`, `link`, and `icon--listing-arrow`.
 
 The same tailwind utility classes that are avialable in `wagtail-kit` are available in this build. `tailwind.config.js` includes the custom spacing for the build, allowing us to use classes such as `mb-spacerMini` where it wouldn't be practical to create a new scss component just for a one-off spacing adjustment.

docs/front-end/utility-classes.md

@@ -73,18 +73,18 @@ nav:
       - front-end/tooling.md
       - front-end/placeholder-images.md
       - front-end/utility-classes.md
-      - front-end/motif-headings.md
       - 'Markdown block and codehilite': 'front-end/markdown-codehilite.md'
       - front-end/impact-report.md
       - front-end/lite-youtube.md
       - front-end/facebook-app-id.md
       - front-end/incident-form.md
   - 'Navigation': 'navigation.md'
   - 'Custom features':
+      - 'Contact': 'custom-features/contact.md'
+      - 'Division': 'custom-features/divisions.md'
       - 'Migration-friendly StreamFields': 'custom-features/migration-friendly-streamfields.md'
-      - 'Theme': 'custom-features/theme.md'
       - 'Modes': 'custom-features/modes.md'
-      - 'Contact': 'custom-features/contact.md'
+      - 'Theme': 'custom-features/theme.md'
   - 'Continuous integration': 'continuous-integration.md'
   - 'Anonymised data': 'anonymised-data.md'
   - 'Data import': 'data-import.md'

mkdocs.yml

@@ -69,6 +69,7 @@
   },
   "dependencies": {
     "js-cookie": "^3.0.5",
-    "lite-youtube-embed": "^0.3.2"
+    "lite-youtube-embed": "^0.3.2",
+    "swiper": "^11.2.1"
   }
 }

package-lock.json

@@ -60,6 +60,8 @@ mkdocs-material = "^9.5.41"
 pymdown-extensions = "^10.11.2"
 
 # Testing
+factory-boy = "^3.3.0"
+faker = "^33.3.0"
 wagtail-factories = "^4.2.1"
 
 

package.json

@@ -22,6 +22,7 @@ module.exports = {
             transparent: 'transparent',
             background: 'var(--color--background)',
             heading: 'var(--color--heading)',
+            themePrimary: 'var(--color--theme-primary)',
         },
         screens: {
             sm: '410px',
@@ -38,7 +39,9 @@ module.exports = {
                 spacerMini: '15px',
                 spacerMiniPlus: '20px',
                 spacerSmall: '30px',
+                spacerSmallPlus: '40px',
                 spacerMedium: '60px',
+                spacerMediumPlus: '100px',
                 spacerLarge: '120px',
                 spacer: '160px',
                 spacerHalf: '80px',

poetry.lock

@@ -0,0 +1,42 @@
+# Generated by Django 4.2.16 on 2024-12-09 08:08
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("blog", "0026_add_earth_colour_theme"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="blogindexpage",
+            name="theme",
+            field=models.CharField(
+                blank=True,
+                choices=[
+                    ("", "None"),
+                    ("theme-coral", "Coral"),
+                    ("theme-nebuline", "Nebuline"),
+                    ("theme-lagoon", "Lagoon"),
+                    ("theme-green", "Green"),
+                ],
+                max_length=25,
+            ),
+        ),
+        migrations.AlterField(
+            model_name="blogpage",
+            name="theme",
+            field=models.CharField(
+                blank=True,
+                choices=[
+                    ("", "None"),
+                    ("theme-coral", "Coral"),
+                    ("theme-nebuline", "Nebuline"),
+                    ("theme-lagoon", "Lagoon"),
+                    ("theme-green", "Green"),
+                ],
+                max_length=25,
+            ),
+        ),
+    ]

pyproject.toml

@@ -0,0 +1,57 @@
+# Generated by Django 5.1.4 on 2025-01-28 09:34
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("blog", "0027_update_theme_colour_choices"),
+        ("divisions", "0002_divisionmixin_and_navigationsetmixin"),
+        ("navigation", "0007_divisionmixin_and_navigationsetmixin"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="blogindexpage",
+            name="division",
+            field=models.ForeignKey(
+                blank=True,
+                null=True,
+                on_delete=django.db.models.deletion.SET_NULL,
+                to="divisions.divisionpage",
+            ),
+        ),
+        migrations.AddField(
+            model_name="blogindexpage",
+            name="override_navigation_set",
+            field=models.ForeignKey(
+                blank=True,
+                null=True,
+                on_delete=django.db.models.deletion.SET_NULL,
+                related_name="+",
+                to="navigation.navigationset",
+            ),
+        ),
+        migrations.AddField(
+            model_name="blogpage",
+            name="division",
+            field=models.ForeignKey(
+                blank=True,
+                null=True,
+                on_delete=django.db.models.deletion.SET_NULL,
+                to="divisions.divisionpage",
+            ),
+        ),
+        migrations.AddField(
+            model_name="blogpage",
+            name="override_navigation_set",
+            field=models.ForeignKey(
+                blank=True,
+                null=True,
+                on_delete=django.db.models.deletion.SET_NULL,
+                related_name="+",
+                to="navigation.navigationset",
+            ),
+        ),
+    ]