#400541: update social media follow icons (#136)

Ticket: 400541

Die ausgeblendeten social media icons werden im editor jetzt mit einer
geringeren Deckungskraft angezeigt, sodass diese visuell als
ausgeblendet erkannt werden können.

Außerdem habe ich den Twitterlink ersetzt sowie im Code die Klassen und
Variablen die noch mit twitter bezeichnet wurden durch x ersetzt.

Das führt dazu, dass wir ebenfalls einen Change im Mastertemplate machen
müssen. (Pull request folgt)

---------

Co-authored-by: kno <keri.nogarth@bsi-software.com>

CHANGELOG.md

@@ -12,6 +12,8 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 * add a new font-size option in headlines for mobile
 * large titles are now set depending on the normal font size of headlines
 * if the headlines have been extended, changes to the extension may be necessary
+* show deactivated social media follow icons in edit mode with less opacity
+* change twitter link to x link
 
 ## [1.4.7] - 11.10.2024
 * Prevent spacer from shrinking to 0px if no other element is present (#386885)

content-elements/base/social-media-follow/prototype/styles.scss

@@ -3,7 +3,7 @@
 @mixin styles($id: 'social-media-follow-2MlXWB', $icon-primary-color: $primary, $icon-secondary-color: $secondary, $icon-dark: $dark, $icon-light: $light) {
   .bsi-element-#{$id} {
     [data-bsi-remove-if] {
-      display: none !important;
+      opacity: 0.3;
     }
 
     .bsi-social-media-svg {

content-elements/base/social-media-follow/prototype/template.twig

@@ -1,4 +1,4 @@
-{% macro render(elementId = null, elementPartId = null, linkedinURL = null, xingURL = null, twitterURL = null, facebookURL = null, youtubeURL = null, instagramURL = null, kununuURL = null, whatsappURL = null, pinterestURL = null, snapchatURL = null, linkedinHidden = null, xingHidden = null, twitterHidden = null, facebookHidden = null, youtubeHidden = null, instagramHidden = null, kununuHidden = null, whatsappHidden = null, pinterestHidden = null, snapchatHidden = null, iconColor = null, iconHoverColor = null, iconSize = null) %}{% apply spaceless %}
+{% macro render(elementId = null, elementPartId = null, linkedinURL = null, xingURL = null, XURL = null, facebookURL = null, youtubeURL = null, instagramURL = null, kununuURL = null, whatsappURL = null, pinterestURL = null, snapchatURL = null, linkedinHidden = null, xingHidden = null, XHidden = null, facebookHidden = null, youtubeHidden = null, instagramHidden = null, kununuHidden = null, whatsappHidden = null, pinterestHidden = null, snapchatHidden = null, iconColor = null, iconHoverColor = null, iconSize = null) %}{% apply spaceless %}
     {% deprecated 'The usage of "element.render(...)" is deprecated, use "include ... with {...}" instead. For detailed information, visit: https://github.com/bsi-software/bsi-cx-design-master-template-web/blob/main/MIGRATION_GUIDE.md"' %}
     {% include './template.twig' %}
 {% endapply %}{% endmacro %}
@@ -9,7 +9,7 @@
 
     {% set followLinkedinURL = (linkedinURL ?: properties.followLinkedinURL) ?: "https://www.linkedin.com/" %}
     {% set followXingURL = (xingURL ?: properties.followXingURL) ?: "https://www.xing.com/" %}
-    {% set followTwitterURL = (twitterURL ?: properties.followTwitterURL) ?: "https://www.twitter.com/" %}
+    {% set followXURL = (XURL ?: properties.followXURL ?: properties.followTwitterURL) ?: "https://www.x.com/" %}
     {% set followFacebookURL = (facebookURL ?: properties.followFacebookURL) ?: "https://www.facebook.com/" %}
     {% set followYoutubeURL = (youtubeURL ?: properties.followYoutubeURL) ?: "https://www.youtube.com/" %}
     {% set followInstagramURL = (instagramURL ?: properties.followInstagramURL) ?: "https://www.instagram.com/" %}
@@ -21,7 +21,7 @@
 
     {% set followLinkedinHidden = (linkedinHidden ?: properties.followLinkedinHidden) ?: false %}
     {% set followXingHidden = (xingHidden ?: properties.followXingHidden) ?: false %}
-    {% set followTwitterHidden = (twitterHidden ?: properties.followTwitterHidden) ?: false %}
+    {% set followXHidden = (XHidden ?: properties.followXHidden ?: properties.followTwitterHidden) ?: false %}
     {% set followFacebookHidden = (facebookHidden ?: properties.followFacebookHidden) ?: false %}
     {% set followYoutubeHidden = (youtubeHidden ?: properties.followYoutubeHidden) ?: false %}
     {% set followInstagramHidden = (instagramHidden ?: properties.followInstagramHidden) ?: false %}
@@ -48,8 +48,8 @@
                 </svg>
             </a>
         </div>
-        <div data-bsi-social-follow="X (Twitter)" {% if followTwitterHidden == true %} data-bsi-remove-if="live" {% endif %} class="social-media-item p-2">
-            <a href="{{ followTwitterURL }}" title="X (Twitter)">
+        <div data-bsi-social-follow="X (Twitter)" {% if followXHidden == true %} data-bsi-remove-if="live" {% endif %} class="social-media-item p-2">
+            <a href="{{ followXURL }}" title="X (Twitter)">
                 <i class="bi bi-twitter-x"></i>
             </a>
         </div>

content-elements/base/social-media-share/prototype/styles.scss

@@ -3,7 +3,7 @@
 @mixin styles($id: 'social-media-share-u9ppdj', $icon-primary-color: $primary, $icon-secondary-color: $secondary, $icon-dark: $dark, $icon-light: $light, $icon-info: $info) {
   .bsi-element-#{$id} {
     [data-bsi-remove-if] {
-      display: none !important;
+      opacity: 0.3;
     }
 
     .btn {

content-elements/base/social-media-share/prototype/template.twig

@@ -28,8 +28,8 @@
                 </svg>
             </a>
         </div>
-        <div data-bsi-social-share="X (Twitter)" class="sm-twitter social-media-item share m-1">
-            <a href="https://twitter.com/intent/tweet?url=(url)&text=(description.short)" target="_blank" title="X (Twitter)" class="btn btn-outline-primary">
+        <div data-bsi-social-share="X (Twitter)" class="sm-x social-media-item share m-1">
+            <a href="https://x.com/intent/tweet?url=(url)&text=(description.short)" target="_blank" title="X (Twitter)" class="btn btn-outline-primary">
                 <i class="bi bi-twitter-x"></i>
             </a>
         </div>