Widget: Change text when expanding variations (Z#23141075) (#3852)

* Add text change to variation toggle
* Add svg caret
* Fix svg and css
* update caret-svg, add fill-link-color and animation
* Use computed property for link text
* Rename variable according to code review
* Improve texts

---------

Co-authored-by: Richard Schreiber <schreiber@rami.io>

src/pretix/static/pretixpresale/js/widget/widget.js

@@ -53,7 +53,8 @@ var strings = {
     'voucher_code': django.pgettext('widget', 'Voucher code'),
     'close': django.pgettext('widget', 'Close'),
     'continue': django.pgettext('widget', 'Continue'),
-    'variations': django.pgettext('widget', 'See variations'),
+    'variations': django.pgettext('widget', 'Show variants'),
+    'hide_variations': django.pgettext('widget', 'Hide variants'),
     'back_to_list': django.pgettext('widget', 'Choose a different event'),
     'back_to_dates': django.pgettext('widget', 'Choose a different date'),
     'back': django.pgettext('widget', 'Back'),
@@ -503,7 +504,7 @@ Vue.component('item', {
         // Availability
         + '<div class="pretix-widget-item-availability-col">'
         + '<a v-if="show_toggle" :href="\'#\' + item.id + \'-variants\'" @click.prevent.stop="expand" role="button" tabindex="0"'
-        + '   v-bind:aria-expanded="expanded ? \'true\': \'false\'" v-bind:aria-controls="item.id + \'-variants\'">'+ strings.variations + '</a>'
+        + '   v-bind:aria-expanded="expanded ? \'true\': \'false\'" v-bind:aria-controls="item.id + \'-variants\'">{{ variationsToggleLabel }}</a>'
         + '<availbox v-if="!item.has_variations" :item="item"></availbox>'
         + '</div>'
 
@@ -600,6 +601,9 @@ Vue.component('item', {
                 return this.$root.currency + " " + floatformat(this.item.min_price, 2);
             }
         },
+        variationsToggleLabel: function () {
+            return this.expanded ? strings.hide_variations : strings.variations;
+        },
     }
 });
 Vue.component('category', {

src/pretix/static/pretixpresale/scss/widget.scss

@@ -429,6 +429,18 @@
 
   .pretix-widget-item-availability-col {
     text-align: center;
+
+    a::before {
+      content: "";
+      display: inline-block;
+      width: $font-size-base;
+      height: $font-size-base;
+      background: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' xml:space='preserve'%3E%3Cpath fill='#{url-friendly-colour($link-color)}' d='M6.395 4.151a.268.268 0 0 0-.177.077l-.386.386a.259.259 0 0 0-.077.177c.002.067.029.13.077.179l3.033 3.031-3.033 3.032a.255.255 0 0 0-.077.177.253.253 0 0 0 .077.178l.386.385a.268.268 0 0 0 .177.077.27.27 0 0 0 .178-.077l3.595-3.595a.259.259 0 0 0 .077-.177.255.255 0 0 0-.077-.176L6.573 4.228a.257.257 0 0 0-.178-.077Z'/%3E%3C/svg%3E");
+      transition: transform .5s;
+    }
+    a[aria-expanded=true]::before {
+      transform: rotate(90deg);
+    }
   }
 
   .pretix-widget-availability-gone {