Merge pull request #1626 from alphagov/extend-width-container-mixin

Allow creating custom width containers and using them with template
alphagov · Nov 4, 2019 · 38d73f5 · 38d73f5
2 parents 679dca2 + 8b8415d
commit 38d73f5
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,7 +4,34 @@
 
 ### New features
 
-#### Allow attributes to be set on `<body>` of template
+#### Create custom width container classes
+
+You can now create custom page width container classes using the `govuk-width-container` mixin. You do this by passing in the required maximum width of the container.
+
+For example:
+
+```scss
+.app-width-container--wide {
+  @include govuk-width-container(1200px);
+}
+```
+
+You can use the generated classes to set the width of:
+- template container
+- header container
+- footer container
+
+It was already possible to set the page app width with the `$govuk-page-width` variable. This new feature is useful when creating additional custom page width classes.
+
+- [Pull request #1626: Allow creating custom width containers and using them with template](https://github.com/alphagov/govuk-frontend/pull/1626).
+
+#### Set custom container classes on template
+
+You can now set classes on `.govuk-width-container` in the template with `containerClasses`. This is useful if you want to set a custom width class on the template container.
+
+- [Pull request #1626: Allow creating custom width containers and using them with template](https://github.com/alphagov/govuk-frontend/pull/1626).
+
+#### Set attributes on the `<body>` of template
 
 You can now set attributes in the `<body>` element of page template.
 

diff --git a/app/assets/scss/partials/_app.scss b/app/assets/scss/partials/_app.scss
@@ -2,6 +2,10 @@
   background-color: $govuk-body-background-colour;
 }
 
+.app-width-container--wide {
+  @include govuk-width-container(1200px);
+}
+
 .app-iframe-in-component-preview {
   margin: 15px 0;
 }

diff --git a/app/views/examples/template-custom/index.njk b/app/views/examples/template-custom/index.njk
@@ -13,6 +13,7 @@
 {% set assetPath = '' %}
 {% set themeColor = 'blue' %}
 {% set bodyClasses = 'app-body-class' %}
+{% set containerClasses = "app-width-container--wide" %}
 
 {% block pageTitle %}GOV.UK - Le meilleur endroit pour trouver des services gouvernementaux et de l'information{% endblock %}
 
@@ -54,6 +55,7 @@
   <!-- block:header -->
   {{ govukHeader({
     serviceName: "Nom du service",
+    containerClasses: "app-width-container--wide",
     navigation: [
       {
         href: '#1',
@@ -104,6 +106,7 @@
 {% block footer %}
   <!-- block:footer -->
   {{ govukFooter({
+    containerClasses: "app-width-container--wide",
     "meta": {
       "items": [
         {

diff --git a/src/govuk/objects/_width-container.scss b/src/govuk/objects/_width-container.scss
@@ -2,9 +2,27 @@
 @import "../tools/all";
 @import "../helpers/all";
 
-@mixin govuk-width-container {
-  // Limit the width of the container to the page width
-  max-width: $govuk-page-width;
+////
+/// @group objects
+////
+
+/// Width container mixin
+///
+/// Used to create page width and custom width container classes.
+///
+/// @param {String} $width [$govuk-page-width] - Width in pixels
+///
+/// @example scss - Creating a 1200px wide container class
+///  .app-width-container--wide {
+///    @include govuk-width-container(1200px);
+///  }
+///
+/// @access public
+
+@mixin govuk-width-container($width: $govuk-page-width) {
+
+  // By default, limit the width of the container to the page width
+  max-width: $width;
 
   // On mobile, add half width gutters
   margin: 0 $govuk-gutter-half;
@@ -38,7 +56,7 @@
 
   // As soon as the viewport is greater than the width of the page plus the
   // gutters, just centre the content instead of adding gutters.
-  @include govuk-media-query($and: "(min-width: #{($govuk-page-width + $govuk-gutter * 2)})") {
+  @include govuk-media-query($and: "(min-width: #{($width + $govuk-gutter * 2)})") {
     margin: 0 auto;
 
     // Since a safe area may have previously been set above,
@@ -49,7 +67,7 @@
   }
 
   @include govuk-if-ie8 {
-    width: $govuk-page-width;
+    width: $width;
     // Since media queries are not supported in IE8,
     // we need to duplicate this margin that centers the page.
     margin: 0 auto;

diff --git a/src/govuk/objects/width-container.test.js b/src/govuk/objects/width-container.test.js
@@ -0,0 +1,48 @@
+/* eslint-env jest */
+
+const outdent = require('outdent')
+
+const { renderSass } = require('../../../lib/jest-helpers')
+
+const sassConfig = {
+  outputStyle: 'nested'
+}
+
+describe('@mixin govuk-width-container', () => {
+  it('allows different widths to be specified using $width', async () => {
+    const sass = `
+      @import "objects/width-container";
+
+      .app-width-container--wide {
+        @include govuk-width-container(1200px);
+      }
+    `
+    const results = await renderSass({ data: sass, ...sassConfig })
+
+    expect(results.css
+      .toString()
+      .trim())
+      .toContain(outdent`
+      .app-width-container--wide {
+        max-width: 1200px;
+        margin: 0 15px; }
+        @supports (margin: max(calc(0px))) {
+          .app-width-container--wide {
+            margin-right: max(15px, calc(15px + env(safe-area-inset-right)));
+            margin-left: max(15px, calc(15px + env(safe-area-inset-left))); } }
+        @media (min-width: 40.0625em) {
+          .app-width-container--wide {
+            margin: 0 30px; }
+            @supports (margin: max(calc(0px))) {
+              .app-width-container--wide {
+                margin-right: max(30px, calc(15px + env(safe-area-inset-right)));
+                margin-left: max(30px, calc(15px + env(safe-area-inset-left))); } } }
+        @media (min-width: 1260px) {
+          .app-width-container--wide {
+            margin: 0 auto; }
+            @supports (margin: max(calc(0px))) {
+              .app-width-container--wide {
+                margin: 0 auto; } } }
+      `)
+  })
+})
diff --git a/src/govuk/template.njk b/src/govuk/template.njk
@@ -43,7 +43,7 @@
     {% endblock %}
 
     {% block main %}
-      <div class="govuk-width-container">
+      <div class="govuk-width-container {{ containerClasses }}">
         {% block beforeContent %}{% endblock %}
         <main class="govuk-main-wrapper {{ mainClasses }}" id="main-content" role="main"{% if mainLang %} lang="{{ mainLang }}"{% endif %}>
           {% block content %}{% endblock %}