MC-5710: Beta docs tutorial

Add intro images to tutorial

Author: bdenham

README.md

@@ -40,7 +40,7 @@ We offer one method for installing PageBuilder:
 * [Step 3: Add components](docs/create-basic-content-type/step-3-add-components.md)
 * [Step 4: Add form editor](docs/create-basic-content-type/step-4-add-form-editor.md)
 * [Step 5: Add layout](docs/create-basic-content-type/step-5-add-layout.md)
-* [Step 6: Add styles and icons](docs/create-basic-content-type/step-6-add-styles-icons.md)
+* [Step 6: Add styles](docs/create-basic-content-type/step-6-add-styles.md)
 * [Step 7: Add frontend widget](docs/create-basic-content-type/step-7-add-frontend-widget.md)
 * [What's next](docs/create-basic-content-type/whats-next.md)
 

docs/configurations/content-type-configuration.md

@@ -16,6 +16,7 @@ Use the content type and group configuration to add new content types, extend ex
 | `appearances`       | Appearance configuration.                                                                                                                   |
 | `is_visible`        | Determines menu visibility for the component. System components should not be visible in the menu. Default value is true.                   |
 | `additional_data`   | Allows to specify additional data for component, see [additional configurations](additional-configurations.md) for more information. |
+{:style="table-layout:auto"}
 
 | Attribute           | Description                                                                                                                                 |
 | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -26,6 +27,7 @@ Use the content type and group configuration to add new content types, extend ex
 | `master_component`  | Contains master format rendering logic that is generic for all appearances. Content component is optional.                                  |
 | `form`              | UI component form used for editing the content type.                                                                                         |
 | `group`             | Existing menu group that contains this content type.                                                                                        |
+{:style="table-layout:auto"}
 
 ### Examples
 
@@ -155,6 +157,7 @@ The following is an example of a content type configuration in `view/adminhtml/p
 | `form`              | UI component form used for editing the content type                                                                                         |
 | `group`             | Existing menu group that contains this content type.                                                                                        |
 | `is_hideable`       | Boolean that enables content types to be shown and hidden. Default is true. Set to false to prevent hiding of content type.                 |
+{:style="table-layout:auto"}
 
 ### `form`
 
@@ -175,11 +178,13 @@ Parent policies will overwrite any child policies that are set.
 | Element             | Description                                                                            |
 | ------------------- | -------------------------------------------------------------------------------------- |
 | `parent`            | The name of the parent content type that is allowed or denied.                         |
+{:style="table-layout:auto"}
 
 | Attribute           | Description                                                                            |
 | ------------------- | -------------------------------------------------------------------------------------- |
 | `default_policy`    | Allows or denies all content types to be parents unless specified as a parent element. |
-  
+{:style="table-layout:auto"}
+
 **Example:**
 ``` xml
 <parents default_policy="deny">
@@ -195,11 +200,13 @@ The `children` element specifies which content types can accept this type as a p
 | Element             | Description                                                                            |
 | ------------------- | -------------------------------------------------------------------------------------- |
 | `child`             | The name of the child content type that is allowed or denied                           |
+{:style="table-layout:auto"}
 
 | Attribute           | Description                                                                            |
 | ------------------- | -------------------------------------------------------------------------------------- |
 | `default_policy`    | Allows or denies all content types to be children unless specified as a child element. |
-  
+{:style="table-layout:auto"}
+
 **Example:**
 ``` xml
 <children default_policy="allow">
@@ -217,12 +224,14 @@ It controls the templates, how data is read from the master format, and how to a
 | ------------------- | -------------------------------------------------------------------------------------- |
 | `appearance`        | The name of the appearance. Every content type requires one default appearance.        |
 | `data_mapping`      | Specifies how data is read from, saved to, and converted to and from the master format |
+{:style="table-layout:auto"}
 
 | Attribute           | Description                                                                            |
 | ------------------- | -------------------------------------------------------------------------------------- |
 | `preview_template`  | Template used to display the element in the preview                                    |
 | `render_template`   | Template used to render the content type to the master format                          |
 | `reader`            | Reads data for the content type from the master format                                 |
+{:style="table-layout:auto"}
 
 The default reader is `Magento_PageBuilder/js/component/format/read/configurable`.
 It reads data based on the configuration specified in `data_mapping`.
@@ -252,6 +261,7 @@ Set the `default` attribute to "true" in an `appearance` node to set the default
 | `css`              | Specifies whether element has classes and in which variable they should be read                       |
 | `html`             | Specifies whether element has html content and in which variable they should be read                  |
 | `tag`              | Allows you to read the tag name of the element and map it back to the master format.                  |
+{:style="table-layout:auto"}
 
 **Example:**
 ``` xml
@@ -317,6 +327,7 @@ The name attribute in the element tags gets converted to a `data-element` attrib
 | `preview_converter`   | Converts the value for the preview. Used for cases where the conversion logic is different between the two views.     |
 | `persistence_mode`    | Used for read/write properties.                                                                                       |
 | `reader`              | Reader used for parsing attributes and properties out of the DOM. Should not be used with read-only persistence_mode. |
+{:style="table-layout:auto"}
 
 You may optionally set a `reader` value in configuration, otherwise `Magento_PageBuilder/js/property/style-property-reader` will be used for properties, and `Magento_PageBuilder/js/property/attribute-reader` will be used for attributes. Both default readers accept `source` as a parameter, and will return that value.
 
@@ -492,5 +503,6 @@ define([], function () {
 | Property                 | Description                                                                                                                         | Example        |
 | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------------- |
 |`fieldsToIgnoreOnRemove`| array containing field names to ignore when evaluating whether an element has been configured. The default value is an empty array. | `["tab_name"]` |
+{:style="table-layout:auto"}
 
 <!-- {% endraw %} -->

docs/configurations/panel-configurations.md

@@ -14,6 +14,7 @@ These groups are defined in the Page Builder `group.xml` file and can be extende
 | `elements`    | Elements    | 10        | Groups common text and input elements                  |
 | `media`       | Media       | 20        | Groups visual and interactive elements                 |
 | `add_content` | Add Content | 30        | Groups dynamic storefront elements                     |
+{:style="table-layout:auto"}
 
 ## Overview
 

docs/create-basic-content-type/overview.md

@@ -1,4 +1,6 @@
 <!-- {% raw %} -->
+{: .bs-callout .bs-callout-warning }
+The development of this tutorial is currently **IN PROGRESS**, **INCOMPLETE**, and potentially **INCORRECT**. The expected completion time is Nov. 27.
 
 # Overview
 

docs/create-basic-content-type/step-1-add-configuration.md

@@ -1,19 +1,25 @@
 <!-- {% raw %} -->
+{: .bs-callout .bs-callout-warning }
+The development of this tutorial is currently **IN PROGRESS**, **INCOMPLETE**, and potentially **INCORRECT**. The expected completion time is Nov. 27.
 
 # Step 1: Add configuration
 
-Creating a configuration file is the first step to defining a new content type. It defines the properties and files that control the appearances and behaviors of a content type.
+The configuration file gives your content type its existence. It's where you set the name, display label, and references to the other files that define the appearance and behavior of your content type.
 
 {: .bs-callout .bs-callout-info }
-This topic describes only a subset of configuration elements, enough to establish a fundamental understanding of the configuration file's role within a content type. For more details, refer to [Main configurations](../configurations/content-type-configuration.md) and [Additional configurations](../configurations/additional-configurations.md).
+Only a subset of configuration elements are described here (enough to understand the configuration file's role within a content type). For more details, refer to [Main configurations](../configurations/content-type-configuration.md) and [Additional configurations](../configurations/additional-configurations.md).
 
-## Create a configuration file
+## Location
 
-Create a new configuration (XML) file in the following directory structure of your module: `view/adminhtml/pagebuilder/content_type/my-content-type.xml`. 
+Add your configuration file here (`view/adminhtml/pagebuilder/content_type/`):
 
-![Create config file](../images/create-config-file.png)
+![Create config file](../images/step1-add-config-file.png)
 
-This config file should contain the following minimal requirements, described in the tables that follow:
+The file name should reflect the name of your content type, using underscores to separate multi-word names as needed. 
+
+## Example
+
+The following configuration shows the minimal requirements for defining a content type, described in the tables that follow.
 
 ``` xml
 <?xml version="1.0"?>
@@ -63,6 +69,7 @@ The `<type>` node defines the key properties of your content type. The attribute
 | icon              | Optional. PNG or SVG image displayed in the Page Builder panel alongside the label. |
 | is_hideable       | Optional. Default `true`. Include it only when you want to set it to `false` to prevent the end-user from hiding your  content type on demand, using a button (eye icon) in the options menu. A setting of false will remove the hide button from the options menu. |
 | translate         | Identifies the attribute you want Magento to translate. Here, the `label` value is set for translation. |
+{:style="table-layout:auto"}
 
 ## The `appearance` node
 
@@ -77,6 +84,7 @@ The `<appearance>` attributes are described as follows:
 | preview_template | `preview.html` - the HTML template for rendering the preview appearance of a content type within the Admin. |
 | render_template  | `master.html` - the HTML template for rendering the storefront appearance of a content type for customers. |
 | reader           | Reads data for the content type from the master format       |
+{:style="table-layout:auto"}
 
 All content types must have at least one `<appearance>` defined within the `<appearances>` collection.
 

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

@@ -1,9 +1,17 @@
 <!-- {% raw %} -->
+{: .bs-callout .bs-callout-warning }
+The development of this tutorial is currently **IN PROGRESS**, **INCOMPLETE**, and potentially **INCORRECT**. The expected completion time is Nov. 27.
 
 # Step 2: Add templates
 
 Page Builder templates are HTML files that define the appearance of content types within both the Admin UI (using the preview.html) and the storefront UI (using the master.html). Content types cannot be rendered without these templates, so let's create the ones already specified in the `<appearance>` element of our configuration file.
 
+## Location
+
+Add your HTML templates here (`view/adminhtml/web/template/content-type/<content-type-name>/default/`):
+
+![Create config file](../images/step2-add-templates.png)
+
 ``` xml
 <appearance name="default"
             default="true"

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

@@ -1,9 +1,17 @@
 <!-- {% raw %} -->
+{: .bs-callout .bs-callout-warning }
+The development of this tutorial is currently **IN PROGRESS**, **INCOMPLETE**, and potentially **INCORRECT**. The expected completion time is Nov. 27.
 
 # Step 3: Add components
 
 Components are JavaScript files that define the behavior of your content type within the Admin UI stage (using preview.js) and the storefront UI (using master.js).
 
+## Location
+
+Add your preview component here (`view/adminhtml/web/js/content-type/<content-type-name>/`):
+
+![Create config file](../images/step3-add-component.png)
+
 1. Add a preview.js file to ...
 
 <!-- {% endraw %} -->

docs/create-basic-content-type/step-4-add-form-editor.md

@@ -1,6 +1,14 @@
 <!-- {% raw %} -->
+{: .bs-callout .bs-callout-warning }
+The development of this tutorial is currently **IN PROGRESS**, **INCOMPLETE**, and potentially **INCORRECT**. The expected completion time is Nov. 27.
 
-# Step 4: Add form editor
+# Step 4: Add form
 
 
+## Location
+
+Add your form UI component here (`view/adminhtml/web/js/content-type/<content-type-name>/`):
+
+![Create config file](../images/step4-add-form-editor.png)
+
 <!-- {% endraw %} -->

docs/create-basic-content-type/step-5-add-layout.md

@@ -1,6 +1,16 @@
 <!-- {% raw %} -->
+{: .bs-callout .bs-callout-warning }
+The development of this tutorial is currently **IN PROGRESS**, **INCOMPLETE**, and potentially **INCORRECT**. The expected completion time is Nov. 27.
 
 # Step 5: Add layout
 
 
+## Location
+
+Add your form layout here (`view/adminhtml/layout/`):
+
+![Create config file](../images/step5-add-layout.png)
+
+
+
 <!-- {% endraw %} -->