MC-6270: Add docs for content type components

WIP code sample

Author: bdenham

docs/create-basic-content-type/step-2-add-templates.md

@@ -154,7 +154,7 @@ The `css` attribute applies CSS classes entered by users on the form to a templa
 
 ### class
 
- Just as with any other html template, you can add your own classes to your template elements. However, you should **always add the `pagebuilder-content-type` as the first class in the top node in your `preview.html` template** as shown for the Quote. Page Builder uses the `pagebuilder-content-type` class to visual indicators and mouseover effects to the Admin preview template, such as correctly positioning the options menu. Defining custom LESS/CSS classes for your content type is discussed in [Step 5: Add styles](step-5-add-styles.md).
+ Just as with any other html template, you can add your own classes to your template elements. However, you should **always add the `pagebuilder-content-type` as the first class in the top node in your `preview.html` template** as shown for the Quote. Page Builder uses the `pagebuilder-content-type` class to add visual indicators and mouseover effects to the Admin preview template, such as correctly positioning the options menu. Defining custom LESS/CSS classes for your content type is discussed in [Step 5: Add styles](step-5-add-styles.md).
 
 ### liveEdit
 

docs/create-basic-content-type/step-3-add-components.md

@@ -7,9 +7,19 @@ The development of this tutorial is currently **IN PROGRESS**.
 
 Components are the JavaScript files that define the behaviors of your content type when they appear on the stage in the Admin UI (using the `preview.js` component) and in the storefront (using the `master.js` component). As such, they are complementary to the templates you added previously in Step 2, acting as the view models to the template's views. 
 
-## Configuration
+These component files are completely optional. Among the reasons for adding your own component is to customize the options menu in the Admin preview. That's what we will do for our Quote content type.
 
-In your configuration file, reference your JavaScript component (`preview.js`) as shown here within the `type` element:
+## Add component directories
+
+The directory structure for your Quote components should look like this (`view/adminhtml/web/js/content-type/example-quote/`):
+
+![Create config file](../images/step3-add-component.png)
+
+  
+
+## Component configuration
+
+In your configuration file, reference your Admin `preview_component` (`preview.js`) as shown here:
 
 ```xml
 <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
@@ -29,15 +39,61 @@ The following table describes each component-related attribute from the Quote co
 | Attribute           | Description                                                  |
 | ------------------- | ------------------------------------------------------------ |
 | `component`         | There are two component types to choose from: `content-type` and `content-type-collection`. Use `Magento_PageBuilder/js/content-type` for static content types that do not have children (like our Quote). Use `Magento_PageBuilder/js/content-type-collection` for content types that can contain children (container content types). |
-| `preview_component` | Optional. The `preview.js` file provides rendering logic to the Admin preview template. If your content type does not require any changes to the standard option menu (shown on mouseover) for a content type or other user-interactivity in the Admin, you can omit this attribute from the the `type` element. When you omit this attribute, Page Builder will use `Magento_PageBuilder/js/content-type/preview` by default. |
-| `master_component`  | Optional. The `master.js` file provides rendering logic to the master format storefront template. As with the `preview_component`, if your content type does not require any specific user-interactivity or other behavior when it's displayed in the storefront, you can simply omit this attribute from the the `type` element. When you omit this attribute, Page Builder will use `Magento_PageBuilder/js/content-type/master` by default. In |
+| `preview_component` | Optional. The `preview.js` file provides rendering logic to the Admin preview template. If your content type does not require any changes to the standard option menu (shown on mouseover) for a content type or other user-interactivity in the Admin, you can omit this attribute from the the `type` element. When you omit the attribute, Page Builder will use `Magento_PageBuilder/js/content-type/preview` by default. |
+| `master_component`  | Optional. The `master.js` file provides rendering logic to the master format storefront template. As with the `preview_component`, if your content type does not require any specific user-interactivity or other behavior when it's displayed in the storefront, you can simply omit this attribute from the the `type` element. When you omit the attribute, Page Builder will use `Magento_PageBuilder/js/content-type/master` by default. <br /><br />In the Quote configuration, the `master_component` attribute is only included for discussion. It simply points to the Page Builder default `master.js` component that would be used the attribute was omitted. |
 
-## Location
+## Create preview.js component
 
-Add them to your module here (`view/adminhtml/web/js/content-type/example-quote/`):
 
-![Create config file](../images/step3-add-component.png)
 
-## Create preview component
+```js
+define([
+    'Magento_PageBuilder/js/content-type/preview',
+], function (PreviewBase) {
+    'use strict';
+    var $super;
+
+    function Preview(parent, config, stageId) {
+        PreviewBase.call(this, parent, config, stageId);
+    }
+    Preview.prototype = Object.create(PreviewBase.prototype);
+    $super = PreviewBase.prototype;
+
+    Preview.prototype.retrieveOptions = function retrieveOptions() {
+        var options = $super.retrieveOptions.call(this, arguments);
+        console.log(options);
+
+        // Remove menu options
+        // delete options.move;
+        // delete options.duplicate;
+        // delete options.edit;
+        // delete options.remove;
+
+        // options.edit.preview.config.icon = "<i class='icon-pagebuilder-copy'></i>";
+        // options.edit.config.icon = "<i class='icon-pagebuilder-copy'></i>";
+        // options.edit.icon._latestValue = "<i class='icon-pagebuilder-copy'></i>";
+
+        // Change option menu icons
+        // options.edit.icon = "<i class='icon-pagebuilder-copy'></i>";
+
+        // Change option menu label
+       // options.title.preview.config.label = "title.preview.config.label"; // works
+        // options.title.title = "title.title"; // doesn't work
+
+        // Change tooltips
+        options.move.title = "Drag";
+        options.duplicate.title = "Copy";
+        options.remove.title = "Delete";
+        options.edit.title = "Open Editor";
+
+        return options;
+    };
+    //
+    // Preview.prototype.isContainer = function () {
+    //     return false;
+    // };
+
+    return Preview;
+});
+```
 
-The remainder of this topic is in progress.