adds option for changing the grid colspan for the article (#253)

Co-authored-by: Tobias <[email protected]>
ft-interactive · May 21, 2020 · 1f17ae7 · 1f17ae7
1 parent 151ce33
commit 1f17ae7
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/config/article.js b/config/article.js
@@ -52,6 +52,11 @@ export default (environment = 'development') => ({ // eslint-disable-line
   // meta data
   description: '',
 
+  oGridColspan: {
+    header: '12 S11 Scenter M9 L8 XL7',
+    body: '12 S11 Scenter M9 L8 XL7'
+  },
+
   /*
   TODO: Select Twitter card type -
         "summary" or "summary_large_image"

diff --git a/test/qa/qa.spec.js b/test/qa/qa.spec.js
@@ -106,6 +106,20 @@ describe('QA tests', () => {
       dataContentId.should.not.equal('');
     });
 
+    if('has a grid set for article header', () => {
+      const articleHeaderContainer = document.querySelector('.article-head.o-grid-container .o-grid-row div').getAttribute('data-o-grid-colspan');
+
+      should.exist(articleHeaderContainer);
+      articleHeaderContainer.should.not.equal('');
+    });
+
+    if('has a grid set for article body', () => {
+      const articleBodyContainer = document.querySelector('.article-body .o-grid-container .o-grid-row div').getAttribute('data-o-grid-colspan');
+
+      should.exist(articleBodyContainer);
+      articleBodyContainer.should.not.equal('');
+    });
+
     // @TODO Add Onward Journey test
     // @TODO Find way of testing that tracking code is installed
   });

diff --git a/views/layout.html b/views/layout.html
@@ -25,7 +25,7 @@
       <article class="article" itemscope itemtype="http://schema.org/Article">
         <div class="article-head o-grid-container">
           <div class="o-grid-row">
-            <header data-o-grid-colspan="12 S11 Scenter M9 L8 XL7">
+            <header data-o-grid-colspan="{{ oGridColspan.header }}">
               {% block article_head %}
               {% include "includes/article-head.html" %}
               {% endblock %}
@@ -36,7 +36,7 @@
 
           <div class="o-grid-container">
             <div class="o-grid-row">
-              <div data-o-grid-colspan="12 S11 Scenter M9 L8 XL7">
+              <div data-o-grid-colspan="{{ oGridColspan.body }}">
                 <div>
                   {% block article_body %}{% endblock %}
                 </div>