MC-2413: Fix Slider Issues

 - update frontend code to use true/false instead of 0/1 for attribute values
 - update master format documentation

Author: Cari Spruiell

app/code/Magento/PageBuilder/docs/master-format.md

@@ -487,8 +487,8 @@ Attributes
 ## Slider
 
 ```
-<div class="pagebuilder-slider" data-role="slider" data-appearance="default" data-autoplay="0"
-     data-autoplay-speed="4000" data-fade="0" data-show-arrows="0" data-show-dots="1" style="...">
+<div class="pagebuilder-slider" data-role="slider" data-appearance="default" data-autoplay="false"
+     data-autoplay-speed="4000" data-fade="false" data-show-arrows="false" data-show-dots="true" style="...">
 ```
 
 Attributes

app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_slider_form.xml

@@ -79,7 +79,7 @@
         <field name="autoplay" sortOrder="1" formElement="checkbox">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
-                    <item name="default" xsi:type="number">0</item>
+                    <item name="default" xsi:type="string">false</item>
                 </item>
             </argument>
             <settings>
@@ -118,7 +118,7 @@
         <field name="fade" sortOrder="20" formElement="checkbox">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
-                    <item name="default" xsi:type="number">0</item>
+                    <item name="default" xsi:type="string">false</item>
                 </item>
             </argument>
             <settings>
@@ -140,7 +140,7 @@
         <field name="is_infinite" sortOrder="30" formElement="checkbox">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
-                    <item name="default" xsi:type="number">0</item>
+                    <item name="default" xsi:type="string">false</item>
                 </item>
             </argument>
             <settings>
@@ -162,7 +162,7 @@
         <field name="show_arrows" sortOrder="40" formElement="checkbox">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
-                    <item name="default" xsi:type="number">0</item>
+                    <item name="default" xsi:type="string">false</item>
                 </item>
             </argument>
             <settings>
@@ -184,7 +184,7 @@
         <field name="show_dots" sortOrder="50" formElement="checkbox">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
-                    <item name="default" xsi:type="number">1</item>
+                    <item name="default" xsi:type="string">true</item>
                 </item>
             </argument>
             <settings>

app/code/Magento/PageBuilder/view/frontend/web/js/content-type/slider/appearance/default/widget.js

@@ -21,12 +21,12 @@ define([
         }
 
         $element.slick({
-            autoplay: $element.data('autoplay') === 1,
+            autoplay: $element.data('autoplay'),
             autoplaySpeed: $element.data('autoplay-speed') || 0,
-            fade: $element.data('fade') === 1,
-            infinite: $element.data('is-infinite') === 1,
-            arrows: $element.data('show-arrows') === 1,
-            dots: $element.data('show-dots') === 1
+            fade: $element.data('fade'),
+            infinite: $element.data('is-infinite'),
+            arrows: $element.data('show-arrows'),
+            dots: $element.data('show-dots')
         });
     };
 });

dev/tests/js/jasmine/tests/app/code/Magento/PageBuilder/view/frontend/web/js/content-type/slider/appearance/default/widget.test.js

@@ -26,12 +26,12 @@ define([
 
             spyOn($.fn, 'slick');
 
-            el.setAttribute('data-autoplay', 1);
+            el.setAttribute('data-autoplay', "true");
             el.setAttribute('data-autoplay-speed', 500);
-            el.setAttribute('data-fade', 1);
-            el.setAttribute('data-is-infinite', 1);
-            el.setAttribute('data-show-arrows', 1);
-            el.setAttribute('data-show-dots', 1);
+            el.setAttribute('data-fade', "true");
+            el.setAttribute('data-is-infinite', "true");
+            el.setAttribute('data-show-arrows', "true");
+            el.setAttribute('data-show-dots', "true");
 
             sliderWidgetInitializer(undefined, el);