From c66eae74cdd68b4580d3d627829e6061ee9b4753 Mon Sep 17 00:00:00 2001
From: Rostislav Wolny <rosta@mailpoet.com>
Date: Tue, 7 Jul 2020 13:18:50 +0200
Subject: [PATCH] Enforce heading font size in mobile forms

[MAILPOET-3024]
---
 assets/css/src/components-public/_public.scss |  6 ++++++
 lib/Form/Block/Heading.php                    |  5 +----
 tests/unit/Form/Block/HeadingTest.php         | 18 +++++++++---------
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/assets/css/src/components-public/_public.scss b/assets/css/src/components-public/_public.scss
index 5da429cc5b..4729d04bfc 100644
--- a/assets/css/src/components-public/_public.scss
+++ b/assets/css/src/components-public/_public.scss
@@ -408,3 +408,9 @@ div.mailpoet_form_slide_in.active {
 .mailpoet-has-background-color {
   padding: 20px 30px;
 }
+
+.mailpoet-heading {
+  @include breakpoint-max-width($form-break-small-width - 1) {
+    font-size: 18px !important;
+  }
+}
diff --git a/lib/Form/Block/Heading.php b/lib/Form/Block/Heading.php
index 51c06b3d2d..3ef8c21bb2 100644
--- a/lib/Form/Block/Heading.php
+++ b/lib/Form/Block/Heading.php
@@ -49,7 +49,7 @@ class Heading {
   }
 
   private function renderClass(array $block): string {
-    $classes = [];
+    $classes = ['mailpoet-heading'];
     if (isset($block['params']['class_name'])) {
       $classes[] = $block['params']['class_name'];
     }
@@ -58,9 +58,6 @@ class Heading {
       $classes[] = 'mailpoet-has-background-color';
     }
 
-    if (empty($classes)) {
-      return '';
-    }
     return 'class="'
       . join(' ', $classes)
       . '"';
diff --git a/tests/unit/Form/Block/HeadingTest.php b/tests/unit/Form/Block/HeadingTest.php
index c1a684584b..a4ae0a5901 100644
--- a/tests/unit/Form/Block/HeadingTest.php
+++ b/tests/unit/Form/Block/HeadingTest.php
@@ -24,7 +24,7 @@ class HeadingTest extends \MailPoetUnitTest {
         'content' => 'Header',
       ],
     ]);
-    expect($html)->equals('<h2>Header</h2>');
+    expect($html)->equals('<h2 class="mailpoet-heading">Header</h2>');
   }
 
   public function testItShouldRenderLevel() {
@@ -34,7 +34,7 @@ class HeadingTest extends \MailPoetUnitTest {
         'level' => 1,
       ],
     ]);
-    expect($html)->equals('<h1>Header</h1>');
+    expect($html)->equals('<h1 class="mailpoet-heading">Header</h1>');
   }
 
   public function testItShouldRenderClass() {
@@ -45,7 +45,7 @@ class HeadingTest extends \MailPoetUnitTest {
         'class_name' => 'class1 class2',
       ],
     ]);
-    expect($html)->equals('<h1 class="class1 class2">Header</h1>');
+    expect($html)->equals('<h1 class="mailpoet-heading class1 class2">Header</h1>');
   }
 
   public function testItShouldRenderAnchor() {
@@ -56,7 +56,7 @@ class HeadingTest extends \MailPoetUnitTest {
         'anchor' => 'anchor',
       ],
     ]);
-    expect($html)->equals('<h1 id="anchor">Header</h1>');
+    expect($html)->equals('<h1 class="mailpoet-heading" id="anchor">Header</h1>');
   }
 
   public function testItShouldRenderAlign() {
@@ -67,7 +67,7 @@ class HeadingTest extends \MailPoetUnitTest {
         'align' => 'right',
       ],
     ]);
-    expect($html)->equals('<h1 style="text-align: right">Header</h1>');
+    expect($html)->equals('<h1 class="mailpoet-heading" style="text-align: right">Header</h1>');
   }
 
   public function testItShouldRenderTextColour() {
@@ -78,7 +78,7 @@ class HeadingTest extends \MailPoetUnitTest {
         'text_color' => 'red',
       ],
     ]);
-    expect($html)->equals('<h1 style="color: red">Header</h1>');
+    expect($html)->equals('<h1 class="mailpoet-heading" style="color: red">Header</h1>');
   }
 
   public function testItShouldRenderBackgroundColor() {
@@ -89,7 +89,7 @@ class HeadingTest extends \MailPoetUnitTest {
       ],
     ]);
     expect($html)->contains('style="background-color: red');
-    expect($html)->contains('class="mailpoet-has-background-color"');
+    expect($html)->contains('class="mailpoet-heading mailpoet-has-background-color"');
   }
 
   public function testItShouldRenderFontSize() {
@@ -99,7 +99,7 @@ class HeadingTest extends \MailPoetUnitTest {
         'font_size' => '33',
       ],
     ]);
-    expect($html)->equals('<h2 style="font-size: 33px">Header</h2>');
+    expect($html)->equals('<h2 class="mailpoet-heading" style="font-size: 33px">Header</h2>');
   }
 
   public function testItShouldRenderLineHeight() {
@@ -109,6 +109,6 @@ class HeadingTest extends \MailPoetUnitTest {
         'line_height' => '2.3',
       ],
     ]);
-    expect($html)->equals('<h2 style="line-height: 2.3">Header</h2>');
+    expect($html)->equals('<h2 class="mailpoet-heading" style="line-height: 2.3">Header</h2>');
   }
 }