MC-3473: Create widget on frontend and apply width

- Added widget to apply same width on button groups buttons if enabled

Author: Hwashiang Yu

app/code/Magento/PageBuilder/view/frontend/layout/default.xml

@@ -55,6 +55,11 @@
                                 </item>
                             </item>
                         </item>
+                        <item name="buttons" xsi:type="array">
+                            <item name="default" xsi:type="array">
+                                <item name="component" xsi:type="string">Magento_PageBuilder/js/content-type/buttons/appearance/inline/widget</item>
+                            </item>
+                        </item>
                     </argument>
                 </arguments>
             </block>

app/code/Magento/PageBuilder/view/frontend/web/js/content-type/buttons/appearance/inline/widget.js

@@ -0,0 +1,37 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+define([
+    'jquery'
+], function ($) {
+    'use strict';
+
+    /**
+     * Equalize the width of a list of button-item components
+     *
+     * @param {JQuerySerializeArrayElement} buttonList
+     */
+    var equalizeButtonWidth = function (buttonList) {
+        var buttonMinWidth = 0;
+
+        buttonList.each(function () {
+            var buttonWidth = this.querySelector('[data-element="link"]').offsetWidth;
+
+            if (buttonWidth > buttonMinWidth) {
+                buttonMinWidth = buttonWidth;
+            }
+        });
+        buttonList.each(function () {
+            this.querySelector('[data-element="link"]').style.width = buttonMinWidth + 'px';
+        });
+    };
+
+    return function (config, element) {
+        var $element = $(element);
+
+        if ($element.attr('data-same-width') === '1') {
+            equalizeButtonWidth($element.children());
+        }
+    };
+});