diff --git a/docs/assets/images/learning/playground-addon-test.png b/docs/assets/images/learning/playground-addon-test.png new file mode 100644 index 0000000..779ff2f Binary files /dev/null and b/docs/assets/images/learning/playground-addon-test.png differ diff --git a/docs/pages/learning/playground.mdx b/docs/pages/learning/playground.mdx index 638249b..436f9a7 100644 --- a/docs/pages/learning/playground.mdx +++ b/docs/pages/learning/playground.mdx @@ -30,15 +30,15 @@ The **Module Preview** shows how the module responds to the combinations that ha The overview tab shows the details of the module displayed. -- **Module URL +- **Module URL** -- **Setup.JSON URL used for the module rendering +- **Setup.JSON URL** used for the module settings and rendering -- **Viewport - adjustable settings to render the module based on changing viewports +- **Viewport** render the module based on changing viewports -- **Template - render the module in various positions within a page +- **Template** preview the module as it will appear in different positions within a page -- **Context - the context of the module currently rendered. The context can be changed, by Editing the Module Payload +- **Context** the context of the module currently rendered. The context can be changed, by Editing the Module Payload #### Module Payload @@ -48,19 +48,7 @@ The Module Payload can be edited, to adjust the module context and details, in o ![Playground Addon Overview - Module Payload](@/assets/images/learning/playground-module-payload.png) -#### Template - -Select a page template to review the module as it will appear within a web page. - -![Playground Addon Overview - Template](@/assets/images/learning/playground-sample-page.png) - -#### Viewport - -Select the viewport of the module preview. - -![Playground Addon Overview - Viewport](@/assets/images/learning/playground-mobile-viewport.png) - -### Settings +#### Settings The Settings tab allows configuring the module, using the available configuration available for the modules. For example, if a module allows adjusting the filters within the module, those settings can be set within the Settings tab, to test the module based on changing configurations. @@ -80,14 +68,14 @@ In the I18n tab, the module labels can be set to update and preview the module c ### Test -The Test Tab can be used to render the module just as it will appear on a live airTRFX page. +The Test tab enables users to preview how an airModule will appear under different rendering conditions such as Tenant Code, Site-edition, Slug, and Theme ID. -This includes any page of a valid tenant, site edition, page slug, and defined theme. - -The user can either manually enter test scenarios, or upload a JSON file, to populate pre-set scenarios. +The user can either manually enter test scenarios on the UI, or upload a JSON file with a bulk of preset scenarios, a template file can be found for download within the Test Tab. *The test scenarios parameters are case sensitive* +![Playground Test Tab](@/assets/images/learning/playground-addon-test.png) + ### Logs This tab can be used to troubleshoot and get visibility over the API calls used to load data.