Merge pull request #20 from bsi-software/features/lse/bugfix_1.1.1

Features/lse/bugfix 1.1.1

CHANGELOG.md

@@ -5,10 +5,25 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres
 to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+
+## [1.1.1] - 27.12.2022
+
+### New Features:
+* Header Image: add support for header images with different heights (allows to keep aspect ratio)
+* Table: this element is now allowed in more areas
+* Additional configurability for: smiley rating (spacer width), title elements (font-weight), social media follow (padding), news snippet (font weight, font family)
+
+### Bug Fixes:
+* Smiley Rating: fix full-width issue
+* CTA: fix border and italic style in Outlook
+* Event: reduction of the previously huge spacer width
+
+[1.1.1]: https://github.com/bsi-software/bsi-cx-design-standard-library-email/releases/tag/1.1.1
+
+
 ## [1.1.0] - 13.12.2022
 
 ### Breaking Changes:
-
 * CTA Button: We've added a new default implementation that is more robust among different clients. As a consequence, rounded corners in Outlook are no longer supported. If you intend to keep the previous implementation, set 'buttonLegacyVml: true' in the properties.js
 * Dark Footer Layout: the dark background color now spans over the entire width, which is the default use case for most brands.
 
@@ -19,7 +34,6 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 * Social Media Follow: the full list of social media elements is now customizable through the properties.
 
 ### Bug Fixes:
-
 * CTA Button: the Outlook implementation treats longer button texts better and the implementation is more robust.
 * Text: The text element properly passed the predefined styles (alignment, font-weight, font-size, text color) to the froala editor
 * Dark Footer: the implementation behaves now properly on mobile devices too.
@@ -28,6 +42,7 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 [1.1.0]: https://github.com/bsi-software/bsi-cx-design-standard-library-email/releases/tag/1.1.0
 
+
 ## [1.0.2] - 14.11.2022
 
 * Dependency updates
@@ -36,6 +51,7 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 [1.0.2]: https://github.com/bsi-software/bsi-cx-design-standard-library-email/releases/tag/1.0.2
 
+
 ## [1.0.1] - 04.11.2022
 
 * Bug fixes on various email clients
@@ -47,6 +63,7 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 [1.0.1]: https://github.com/bsi-software/bsi-cx-design-standard-library-email/releases/tag/1.0.1
 
+
 ## [1.0.0] - 19.08.2022
 
 ### Changed
@@ -58,6 +75,7 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 [1.0.0]: https://github.com/bsi-software/bsi-cx-design-standard-library-email/releases/tag/1.0.0
 
+
 ## [1.0.0-rc.3] - 25.07.2022
 
 ### Changed

content-elements/base/cta/prototype/template.twig

@@ -25,7 +25,8 @@
     {% endif %}   
     {% set ctaFullWidth = (fullWidth ?: properties.buttonFullWidth) ?: false %} {# if you set this to true, your buttons will span the full width #}
     {% set ctaFullWidthStyle = ctaFullWidth == true ? 'width="100%"' : '' %}
-    {% set borderCss = borderAndBackgroundSame ? "" : "border: #{borderSize}px solid #{ctaBorderColor};" %}
+    {% set borderCss = borderAndBackgroundSame ? "" : "border: #{ctaBorderSize}px solid #{ctaBorderColor};" %}
+    {% set borderCssOutlook = borderAndBackgroundSame ? "" : "mso-border-alt: #{ctaBorderSize}px solid #{ctaBorderColor};" %}
     {% set ctaLegacyVmlMode = (legacyVml ?: properties.buttonLegacyVml) ?: false %} {# if you set this to true, your buttons will have rounded corners in Outlook as well. The button will have a fixed width though instad of fitting its size to the actual content #}
 
     <div data-bsi-element="{{ ctaElementId }}">
@@ -64,16 +65,16 @@
                     <td>
                         <table align="{{ ctaAlignment }}" class="bsi-cta-wrapper" role="presentation" border="0" cellspacing="0" cellpadding="0" {{ ctaFullWidthStyle | raw }}>
                             <tr>
-                                <td align="center" class="bsi-cta-wrapper" style="border-radius: {{ ctaBorderRadius }}px; background-color: {{ ctaBackgroundColor }}; {{ borderCss }}" data-bsi-element-part="{{ ctaElementPartId }}"  {{ ctaFullWidthStyle | raw }}>
+                                <td align="center" class="bsi-cta-wrapper" style="{{ borderCssOutlook }} border-radius: {{ ctaBorderRadius }}px; background-color: {{ ctaBackgroundColor }}; " {{ ctaFullWidthStyle | raw }}>
                                     <!--[if mso]><div style="mso-line-height-rule: exactly; line-height: {{ctaVerticalPadding}}px; height: {{ctaVerticalPadding}}px; font-size: {{ctaVerticalPadding}}px">&nbsp;</div><![endif]-->
                                     {% if ctaFullWidth != true %}
-                                        <!--[if mso]><i style="letter-spacing: {{ ctaHorizontalPadding }}px;mso-font-width:-100%;">&nbsp;</i><![endif]-->
+                                        <!--[if mso]><b style="letter-spacing: {{ ctaHorizontalPadding }}px;mso-font-width:-100%;">&nbsp;</b><![endif]-->
                                     {% endif %}
 
-                                    <a href="https://example.org/" target="_blank" class="bsi-cta" style="mso-line-height-rule: exactly; font-size: {{ ctaFontSize }}px; line-height: {{ ctaFontSize }}px; font-family: {{ ctaFontFamily }}; color: {{ ctaTextColor }}; font-weight: {{ ctaFontWeight }}; text-decoration: none; border-radius: {{ ctaBorderRadius }}px; padding: {{ ctaVerticalPadding }}px {{ ctaHorizontalPadding }}px; display: inline-block; text-align:center; word-break: keep-all;  mso-padding-alt: 0; text-underline-color: {{ ctaBackgroundColor }};" {{ ctaFullWidthStyle | raw }}>{{ bsi_cx_lorem(2)}}</a>
+                                    <a href="https://example.org/" target="_blank" data-bsi-element-part="{{ ctaElementPartId }}" class="bsi-cta" style="mso-line-height-rule: exactly; font-size: {{ ctaFontSize }}px; line-height: {{ ctaFontSize }}px; font-family: {{ ctaFontFamily }}; color: {{ ctaTextColor }}; font-weight: {{ ctaFontWeight }}; text-decoration: none; {{ borderCss }} mso-border-alt: none; border-radius: {{ ctaBorderRadius }}px; padding: {{ ctaVerticalPadding }}px {{ ctaHorizontalPadding }}px; display: inline-block; text-align:center; word-break: keep-all;  mso-padding-alt: 0; text-underline-color: {{ ctaBackgroundColor }};" {{ ctaFullWidthStyle | raw }}>{{ bsi_cx_lorem(2)}}</a>
 
                                     {% if ctaFullWidth != true %}
-                                        <!--[if mso]><i style="letter-spacing: {{ ctaHorizontalPadding }}px;mso-font-width:-100%;">&nbsp;</i><![endif]-->
+                                        <!--[if mso]><b style="letter-spacing: {{ ctaHorizontalPadding }}px;mso-font-width:-100%;">&nbsp;</b><![endif]-->
                                     {% endif %}
                                     <!--[if mso]><div style="mso-line-height-rule: exactly; line-height: {{ctaVerticalPadding}}px; height: {{ctaVerticalPadding}}px; font-size: {{ctaVerticalPadding}}px">&nbsp;</div><![endif]-->
                                 </td>

content-elements/base/divider/prototype/template.twig

@@ -6,7 +6,7 @@
 {% apply spaceless %}
     {% set dividerElementId = elementId ?: 'divider-LQi2yS' %}
     {% set dividerColor = (color ?: properties.dividerColor) ?: '#e6e6e6' %}
-    {% set dividerHeight = (height ?: properties.dividerHeight) ?: 1 %}
+    {% set dividerHeight = (height ?: properties.dividerHeight) ?: 2 %}
     {% set dividerMarginBottom = (marginBottom ?: properties.baseMarginBottom) ?: 12 %}
 
     <div data-bsi-element="{{ dividerElementId }}">

content-elements/base/event/prototype/template.twig

@@ -33,7 +33,7 @@
                                 </tr>
                             </table>
                         </td>
-                        <td style="width:150px;" width="150" class="bsi-event-spacer">&nbsp;</td>
+                        <td style="width: 50px;" width="50" class="bsi-event-spacer">&nbsp;</td>
                         <td align="center" valign="top">
                             <table cellpadding="0" cellspacing="0" border="0" align="left">
                                 <tr>

content-elements/base/header-img/prototype/template.twig

@@ -7,7 +7,9 @@
     {% set headerImgElementId = elementId ?: 'header-img-cftPW6' %}
     {% set headerImgPartId = imagePartId ?: 'header-img-part-CrwKWp' %}
     {% set headerImgSrc = imageSrc ?: bsi_cx_asset('../../../../static/image_660x320.png') %}
-    {% set headerImgHeight = (headerHeight ?: properties.headerHeight) ?: 320 %}
+    {% set headerImgHeight = headerHeight ?: properties.headerHeight %}
+    {% set headerImgHeightAttribute = headerImgHeight > 0 ? "height=\"#{headerImgHeight}\"" : "" %}
+    {% set headerImgHeightStyle = headerImgHeight > 0 ? "height: #{headerImgHeight}px;" : "" %}
     {% set headerImgWidth = (headerWidth ?: properties.headerWidth) ?: 660 %}
     {% set headerImgBorderRadius = (borderRadius ?: properties.imageBorderRadius) ?: 0 %} {# Progressive enhancement: not supported by Outlook #}
     {% set headerImgMarginBottom = (marginBottom ?: properties.baseMarginBottom) ?: 12 %}
@@ -18,7 +20,7 @@
         <tr>
         <td style="width: 100%;" valign="middle">
         <![endif]-->    
-        <img data-bsi-element-part="{{ headerImgPartId }}" src="{{ headerImgSrc }}" width="{{ headerImgWidth }}" height="{{ headerImgHeight }}" alt="Header image" style="margin-top :0; margin-bottom: {{ headerImgMarginBottom }}px; display: block; width: {{ headerImgWidth }}px; max-width: 100%; height: {{ headerImgHeight }}px; border-radius: {{ headerImgBorderRadius }}px;" />
+        <img data-bsi-element-part="{{ headerImgPartId }}" src="{{ headerImgSrc }}" width="{{ headerImgWidth }}" {{headerImgHeightAttribute | raw}} alt="Header image" style="margin-top :0; margin-bottom: {{ headerImgMarginBottom }}px; display: block; width: {{ headerImgWidth }}px; max-width: 100%; {{headerImgHeightStyle}} border-radius: {{ headerImgBorderRadius }}px;" />
         <!--[if mso]>
         </td>
         </tr>

content-elements/base/index.js

@@ -3,14 +3,14 @@ const contentElements = [
   require('./text'),
   require('./cta'),
   require('./highlighted-content'),
+  require('./table'),
   require('./spacer'),
   require('./divider')
 ];
 
 const colOneElements = [
   ...contentElements,
   require('./image'),
-  require('./table'),
   require('./news-snippet'),
   require('./smiley-rating'),
   require('./event')

content-elements/base/news-snippet/prototype/template.twig

@@ -8,7 +8,9 @@
     {% set newsSnippetElementPartId = elementPartId ?: 'news-snippet-part-gqB9Yz' %}
     {% set newsSnippetImageSrc = imageSrc ?: bsi_cx_asset('../../../../static/image.png') %}
     {% set newsSnippetTextColor = (textColor ?: properties.baseTextColor) ?: '#000000' %}
-    {% set newsSnippetFontFamily = (fontFamily ?: properties.baseFontFamily) ?: 'Open Sans, Segoe UI, Apple SD Gothic Neo, Lucida Grande, Lucida Sans Unicode, sans‑serif' %}
+    {% set newsSnippetFontFamilyTitle = (fontFamilyTitle ?: properties.titleFontFamily) ?: 'Calibri, Carlito, PT Sans, Trebuchet MS, sans‑serif, Tahoma, Verdana, Trebuchet MS' %}
+    {% set newsSnippetFontFamilyText = (fontFamilyText ?: properties.baseFontFamily) ?: 'Open Sans, Segoe UI, Apple SD Gothic Neo, Lucida Grande, Lucida Sans Unicode, sans‑serif' %}
+    {% set newsSnippetFontWeight = (fontWeight ?: properties.fontWeightNewsText ) ?: 'bold' %}
     {% set newsSnippetFontSizeTitle = (fontSizeTitle ?: properties.fontSizeNewsTitle) ?: 28 %}
     {% set newsSnippetFontSizeHeadline = (fontSizeHeadline ?: properties.fontSizeNewsHeadline) ?: 14 %}
     {% set newsSnippetFontSizeText = (fontSizeText ?: properties.fontSizeNewsText) ?: 14 %}
@@ -24,9 +26,9 @@
                     <td style="width: {{ newsSnippetWidthLeft }}px; text-align: center; padding-right: 20px;" valign="middle">
             <![endif]-->
             <div class="bsi-column bsi-ce-box-sizing-fix bsi-col-wide bsi-pbottom" style="width: 100%; max-width: {{ newsSnippetWidthLeft }}px; display: inline-block; vertical-align: top; padding-right: 20px;">
-                <h2 data-bsi-property="title" class="bsi-dm-text-color" style="font-family: {{ newsSnippetFontFamily }}; color: {{ newsSnippetTextColor }}; font-size: {{ newsSnippetFontSizeTitle }}px; line-height: {{ newsSnippetFontSizeTitle + 4 }}px; text-align: left; margin-top: 0;">{{ bsi_cx_lorem(3) }}</h2>
-                <p data-bsi-property="headline" class="bsi-dm-text-color" style="font-family: {{ newsSnippetFontFamily }}; color: {{ newsSnippetTextColor }}; font-size: {{ newsSnippetFontSizeHeadline }}px; line-height: {{ newsSnippetFontSizeHeadline + 4 }}px; font-weight: bold; text-align: left; margin-top: 0;">{{ bsi_cx_lorem(9) }}</p>
-                <p data-bsi-property="text" class="bsi-dm-text-color" style="font-family: {{ newsSnippetFontFamily }}; color: {{ newsSnippetTextColor }}; font-size: {{ newsSnippetFontSizeText }}px; line-height: {{ newsSnippetFontSizeText + 4 }}px; text-align: left; margin-top: 0;">{{ bsi_cx_lorem(40) }}</p>
+                <h2 data-bsi-property="title" class="bsi-dm-text-color" style="font-family: {{ newsSnippetFontFamilyTitle }}; color: {{ newsSnippetTextColor }}; font-size: {{ newsSnippetFontSizeTitle }}px; font-weight: {{ newsSnippetFontWeight }}; line-height: {{ newsSnippetFontSizeTitle + 4 }}px; text-align: left; margin-top: 0;">{{ bsi_cx_lorem(3) }}</h2>
+                <p data-bsi-property="headline" class="bsi-dm-text-color" style="font-family: {{ newsSnippetFontFamilyText }}; color: {{ newsSnippetTextColor }}; font-size: {{ newsSnippetFontSizeHeadline }}px; font-weight: bold; line-height: {{ newsSnippetFontSizeHeadline + 4 }}px; text-align: left; margin-top: 0;">{{ bsi_cx_lorem(9) }}</p>
+                <p data-bsi-property="text" class="bsi-dm-text-color" style="font-family: {{ newsSnippetFontFamilyText }}; color: {{ newsSnippetTextColor }}; font-size: {{ newsSnippetFontSizeText }}px; font-weight: normal; line-height: {{ newsSnippetFontSizeText + 4 }}px; text-align: left; margin-top: 0;">{{ bsi_cx_lorem(40) }}</p>
             </div>
             <!--[if mso]>
             </td>

content-elements/base/smiley-rating/prototype/template.twig

@@ -16,47 +16,42 @@
     {% set smileyRatingImage4Src = image4Src ?: bsi_cx_asset('../../../../static/smiley-4.png') %}
     {% set smileyRatingImage5Src = image5Src ?: bsi_cx_asset('../../../../static/smiley-5.png') %}
     {% set smileyRatingMarginBottom = (marginBottom ?: properties.baseMarginBottom) ?: 12 %}
+    {% set smileyRatingSpacerWidth = (spacerWidth ?: properties.smileyRatingSpacerWidth) ?: 14 %}
 
-    <table data-bsi-element="{{ smileyRatingElementId }}" width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="margin-bottom: {{ smileyRatingMarginBottom }}px;">
-        <tr>
-            <td valign="top" align="center">
-                <table class="bsi-smiley-rating" width="364" style="width: 364px;" border="0" cellspacing="0" cellpadding="0" align="center">
-                    <tr>
-                        <td data-bsi-dropzone="{{ smileyRatingDropzone1Id }}" align="center" valign="top">
-                            {% block smiley_rating_dropzone_one %}
-                                {% include '../../img-10/template.twig' with {source: smileyRatingImage1Src} only %}
-                            {% endblock %}
-                        </td>
-                        <td width="16" style="width:16px;font-size: 1px; line-height: 1px;">&nbsp;</td>
-                        <td data-bsi-dropzone="{{ smileyRatingDropzone2Id }}" align="left" valign="top">
-                            {% block smiley_rating_dropzone_two %}
-                                {% include '../../img-10/template.twig' with {source: smileyRatingImage2Src} only %}
-                            {% endblock %}
-                        </td>
-                        <td width="16" style="width:16px;font-size: 1px; line-height: 1px;">&nbsp;</td>
-                        <td data-bsi-dropzone="{{ smileyRatingDropzone3Id }}" align="left" valign="top">
-                            {% block smiley_rating_dropzone_three %}
-                                {% include '../../img-10/template.twig' with {source: smileyRatingImage3Src} only %}
-                            {% endblock %}
-                        </td>
-                        <td width="16" style="width:16px;font-size: 1px; line-height: 1px;">&nbsp;</td>
-                        <td data-bsi-dropzone="{{ smileyRatingDropzone4Id }}" align="left" valign="top">
-                            {% block smiley_rating_dropzone_four %}
-                                {% include '../../img-10/template.twig' with {source: smileyRatingImage4Src} only %}
-                            {% endblock %}
-                        </td>
-                        <td width="16" style="width:16px;font-size: 1px; line-height: 1px;">&nbsp;</td>
-                        <td data-bsi-dropzone="{{ smileyRatingDropzone5Id }}" align="left" valign="top">
-                            {% block smiley_rating_dropzone_five %}
-                                {% include '../../img-10/template.twig' with {source: smileyRatingImage5Src} only %}
-                            {% endblock %}
-                        </td>
-                    </tr>
-                </table>
+    <table data-bsi-element="{{ smileyRatingElementId }}" align="center" border="0" cellspacing="0" cellpadding="0" style="margin: 0 auto;">
+        <tr valign="top">
+            <td data-bsi-dropzone="{{ smileyRatingDropzone1Id }}" align="center" valign="top">
+                {% block smiley_rating_dropzone_one %}
+                    {% include '../../img-10/template.twig' with {source: smileyRatingImage1Src} only %}
+                {% endblock %}
+            </td>
+            <td width="{{ smileyRatingSpacerWidth }}" style="width: {{ smileyRatingSpacerWidth }}px;font-size: 1px; line-height: 1px;">&nbsp;</td>
+            <td data-bsi-dropzone="{{ smileyRatingDropzone2Id }}" align="left" valign="top">
+                {% block smiley_rating_dropzone_two %}
+                    {% include '../../img-10/template.twig' with {source: smileyRatingImage2Src} only %}
+                {% endblock %}
+            </td>
+            <td width="{{ smileyRatingSpacerWidth }}" style="width: {{ smileyRatingSpacerWidth }}px;font-size: 1px; line-height: 1px;">&nbsp;</td>
+            <td data-bsi-dropzone="{{ smileyRatingDropzone3Id }}" align="left" valign="top">
+                {% block smiley_rating_dropzone_three %}
+                    {% include '../../img-10/template.twig' with {source: smileyRatingImage3Src} only %}
+                {% endblock %}
+            </td>
+            <td width="{{ smileyRatingSpacerWidth }}" style="width: {{ smileyRatingSpacerWidth }}px;font-size: 1px; line-height: 1px;">&nbsp;</td>
+            <td data-bsi-dropzone="{{ smileyRatingDropzone4Id }}" align="left" valign="top">
+                {% block smiley_rating_dropzone_four %}
+                    {% include '../../img-10/template.twig' with {source: smileyRatingImage4Src} only %}
+                {% endblock %}
             </td>
+            <td width="{{ smileyRatingSpacerWidth }}" style="width: {{ smileyRatingSpacerWidth }}px;font-size: 1px; line-height: 1px;">&nbsp;</td>
+            <td data-bsi-dropzone="{{ smileyRatingDropzone5Id }}" align="left" valign="top">
+                {% block smiley_rating_dropzone_five %}
+                    {% include '../../img-10/template.twig' with {source: smileyRatingImage5Src} only %}
+                {% endblock %}
+            </td>
+        </tr>
+        <tr>
+            <td height="{{ smileyRatingMarginBottom }}" style="height: {{ smileyRatingMarginBottom }}px;">&nbsp;</td>
         </tr>
-        <!--[if mso]>
-        <tr height="{{ smileyRatingMarginBottom }}" style="height:{{ smileyRatingMarginBottom }}px;">&nbsp;</tr>
-        <![endif]-->
     </table>
 {% endapply %}