diff --git a/Lombiq.Walkthroughs.Test.UI/Extensions/TestCaseUITestContextExtensions.cs b/Lombiq.Walkthroughs.Test.UI/Extensions/TestCaseUITestContextExtensions.cs
index e93aaae..b61eb8f 100644
--- a/Lombiq.Walkthroughs.Test.UI/Extensions/TestCaseUITestContextExtensions.cs
+++ b/Lombiq.Walkthroughs.Test.UI/Extensions/TestCaseUITestContextExtensions.cs
@@ -207,21 +207,49 @@ await context.FillInCodeMirrorEditorWithRetriesAsync(
// Flow Part
AssertStep("Flow Part", "This was our intro to the Media Library.");
+ await context.ClickReliablyOnByLinkTextAsync("Content");
+ AssertStep("Flow Part", "Now click on the \"Content Items\" button.");
+ await context.ClickReliablyOnByLinkTextAsync("Content Items");
+ AssertStep("Flow Part", "We'll create a new Page content item.");
+ await context.ClickReliablyOnAsync(By.XPath("//button[normalize-space() = 'New']"));
+ AssertStep("Flow Part", "Click on \"Page\" to create a new page.");
+ await context.ClickReliablyOnByLinkTextAsync("Page");
+ AssertStep("Flow Part", "You can give it a title, just like");
+ await context.FillContentItemTitleAsync("Sample page");
+ await ClickOnNextButtonAsync();
+ await AssertStepAndClickNextAsync("Flow Part", "Surely you know the drill");
+ await AssertStepAndClickNextAsync("Flow Part", "The page has a part called \"Flow Part\".");
+ AssertStep("Flow Part", "You will see the different widgets here");
+ await context.ClickReliablyOnAsync(By.XPath("//button[@title='Add Widget']"));
+ AssertStep("Flow Part", "Let's add a blockquote, for example!");
+ await context.ClickReliablyOnByLinkTextAsync("Blockquote");
+ await AssertStepAndClickNextAsync("Flow Part", "Now you added the blockquote to your page.");
+ AssertStep("Flow Part", "Click on the dropdown to edit it!");
+ await context.ClickReliablyOnAsync(By.ClassName("shepherd-target"));
+ AssertStep("Flow Part", "Can you think of a good quote?");
+ await context.FillInWithRetriesAsync(By.Id("FlowPart-0_Blockquote_Quote_Text"), "Sample blockquote");
+ await ClickOnNextButtonAsync();
+ AssertStep("Flow Part", "We are ready, let's publish the page!");
+ await context.ClickPublishAsync();
+ AssertStep("Viewing the page", "The page is published!");
+ await context.ClickReliablyOnByLinkTextAsync("View");
+ context.SwitchToLastWindow();
+ await AssertStepAndClickNextAsync("Viewing the page", "Here is you published page with the blockquote.");
+
+ // Layout widgets
+ AssertStep("Adding widgets to the layout", "The fun with widgets doesn't stop here!");
+ await context.ClickReliablyOnAsync(By.ClassName("navbar-brand"));
return;
- await AssertStepAndClickNextAsync("Flow Part", "");
- await AssertStepAndClickNextAsync("Flow Part", "");
- await AssertStepAndClickNextAsync("Flow Part", "");
- await AssertStepAndClickNextAsync("Flow Part", "");
- await AssertStepAndClickNextAsync("Flow Part", "");
- await AssertStepAndClickNextAsync("Flow Part", "");
- await AssertStepAndClickNextAsync("Flow Part", "");
- await AssertStepAndClickNextAsync("Flow Part", "");
- await AssertStepAndClickNextAsync("Flow Part", "");
- await AssertStepAndClickNextAsync("Flow Part", "");
- await AssertStepAndClickNextAsync("Flow Part", "");
- await AssertStepAndClickNextAsync("Flow Part", "");
- await AssertStepAndClickNextAsync("", "");
- await AssertStepAndClickNextAsync("", "");
+ await AssertStepAndClickNextAsync("Adding widgets to the layout", "");
+ await AssertStepAndClickNextAsync("Adding widgets to the layout", "");
+ await AssertStepAndClickNextAsync("Adding widgets to the layout", "");
+ await AssertStepAndClickNextAsync("Adding widgets to the layout", "");
+ await AssertStepAndClickNextAsync("Adding widgets to the layout", "");
+ await AssertStepAndClickNextAsync("Adding widgets to the layout", "");
+ await AssertStepAndClickNextAsync("Adding widgets to the layout", "");
+ await AssertStepAndClickNextAsync("Adding widgets to the layout", "");
+ await AssertStepAndClickNextAsync("Adding widgets to the layout", "");
+ await AssertStepAndClickNextAsync("Adding widgets to the layout", "");
await AssertStepAndClickNextAsync("", "");
await AssertStepAndClickNextAsync("", "");
await AssertStepAndClickNextAsync("", "");
diff --git a/Lombiq.Walkthroughs/Assets/Scripts/walkthroughs.js b/Lombiq.Walkthroughs/Assets/Scripts/walkthroughs.js
index 1cdb5ae..7997ef5 100644
--- a/Lombiq.Walkthroughs/Assets/Scripts/walkthroughs.js
+++ b/Lombiq.Walkthroughs/Assets/Scripts/walkthroughs.js
@@ -1776,7 +1776,7 @@ jQuery(($) => {
},
{
title: 'Flow Part',
- text: 'Click on the "New" button.',
+ text: 'We\'ll create a new Page content item. Click on the "New" button.',
attachTo: { element: '#new-dropdown', on: 'top' },
buttons: [
{
@@ -1807,7 +1807,7 @@ jQuery(($) => {
},
{
title: 'Flow Part',
- text: 'You can give it a title, just like for a blog post or for an article.',
+ text: 'You can give it a title, just like for a blog post or an article. It\'s the same thing, really.',
attachTo: { element: '#TitlePart_Title', on: 'top' },
buttons: [
{
@@ -1829,7 +1829,7 @@ jQuery(($) => {
},
{
title: 'Flow Part',
- text: 'You can give it an URL, but you can leave it empty to auto-generate it!',
+ text: 'Surely you know the drill with Permalink by now!',
attachTo: { element: '#AutoroutePart_Path', on: 'top' },
buttons: [
backButton,
@@ -1844,11 +1844,13 @@ jQuery(($) => {
},
{
title: 'Flow Part',
- text: 'The page has a part called "Flow part", this allows you to add different ' +
- 'widgets to your page. If you want a simple "page", with only HTML content, it\'s ' +
- 'better to create an article. However if you want something more complex, and perhaps ' +
- 'you created your own widget and you want to add that, then it\'s better to use a page.',
- attachTo: { element: 'button[title="Add Widget"]', on: 'top' },
+ text: `The page has a part called "Flow Part". It allows you to add different
+ widgets to your page, building complex layouts that are displayed in a responsive way, so
+ they look good on all screen sizes (hence the name "flow").
+ If you want a simple page, with only some simpler HTML content, it's better to create an
+ article. However if you want something more involved, and perhaps you created your own
+ widget and you want to add that, then it's better to use a Flow Part.`,
+ attachTo: { element: 'button[title="Add Widget"]', on: 'left' },
canClickTarget: false,
buttons: [
backButton,
@@ -1863,11 +1865,13 @@ jQuery(($) => {
},
{
title: 'Flow Part',
- text: 'You will see the different widgets here that you can add. Blockquote, Image, Paragraph ' +
- 'and Raw Html is self explanatory. Container is just a container for widgets, ' +
- 'so you can divide them up more. If you created another widget, or turned on a feature ' +
- 'that adds a widget, it should also appear here. Click on the "+" icon.',
- attachTo: { element: 'button[title="Add Widget"]', on: 'top' },
+ text: `
You will see the different widgets here that you can add. Blockquote, Image, Paragraph,
+ and Raw Html are all just what their names suggest. Container is a container for widgets,
+ so you can build some multi-level structure.
+ These widgets came with the Blog recipe, but modules can add new ones too, and you can
+ create your own widget types as well!
+ Enough of theory, let's click on the "+" icon!`,
+ attachTo: { element: 'button[title="Add Widget"]', on: 'left' },
buttons: [
backButton,
],
@@ -1881,7 +1885,7 @@ jQuery(($) => {
},
{
title: 'Flow Part',
- text: 'Let\'s add a blockquote, for example!',
+ text: 'Let\'s add a blockquote, for example! Can you guess what it\'ll contain? :)',
attachTo: { element: 'a[data-widget-type="Blockquote"]', on: 'top' },
buttons: [
backButton,
@@ -1896,7 +1900,7 @@ jQuery(($) => {
},
{
title: 'Flow Part',
- text: 'Now you added the blockquote to your page.',
+ text: 'Now you added the blockquote to your page. This is a quotable moment!',
buttons: [
backButton,
nextButton,
@@ -1931,7 +1935,8 @@ jQuery(($) => {
},
{
title: 'Flow Part',
- text: 'You can write here the text you want.',
+ text: `Can you think of a good quote? My favorite is "Don't believe everything you read on the
+ internet." by Abraham Lincoln.`,
attachTo: {
element: '#FlowPart-0_Blockquote_Quote_Text',
on: 'top',
@@ -1968,7 +1973,7 @@ jQuery(($) => {
},
{
title: 'Viewing the page',
- text: 'The page is published. Click on the "View" button to see it.',
+ text: 'The page is published! Click on the "View" button to see it.',
attachTo: { element: '.btn.btn-sm.btn-success.view', on: 'top' },
buttons: [
{
@@ -2013,7 +2018,8 @@ jQuery(($) => {
},
{
title: 'Adding widgets to the layout',
- text: 'You can also add widgets to the layout itself. Go to homepage by clicking here.',
+ text: `The fun with widgets doesn't stop here! You can also add them to the layout itself. Go
+ to homepage by clicking here.`,
attachTo: { element: '.navbar-brand', on: 'bottom' },
buttons: [
backButton,
@@ -3793,17 +3799,18 @@ jQuery(($) => {
steps: [
{
title: 'Select walkthrough!',
- text: '
Welcome! The ' +
- 'Lombiq.Walkthroughs module is active. This module includes various walkthroughs that ' +
- 'provide hands-on tutorials guided by interactive tooltips.
' +
- 'Do you prefer tutorial videos or deep-diving into the code instead? Check out ' +
- '' +
- 'Dojo Course 3!
' +
- 'You can pause a walkthrough at any time. Just bookmark the page and you can open it later ' +
- 'to continue where you left off.
' +
- 'You can get back here by canceling the current walkthrough and pressing the below button ' +
- 'on the homepage. Please only use the walkthroughs\' built-in navigation!
' +
- '
Please select a walkthrough to start:
',
+ text: `Welcome! The
+ Lombiq.Walkthroughs module is active. This module includes various walkthroughs that
+ provide hands-on tutorials guided by interactive tooltips.
+ Do you prefer tutorial videos or deep-diving into the code instead? Check out
+
+ Dojo Course 3!
+ You can pause a walkthrough at any time. Just bookmark the page and you can open it later to
+ continue where you left off.
+ You can get back here by canceling the current walkthrough and pressing the below button on
+ the homepage. Please only use the walkthroughs' built-in navigation!
+
Please select a walkthrough to start:
`,
+
buttons: [
{
text: 'Orchard Core Admin Walkthrough',