Issue #2989541 by shaal, kjay, smaz, rachel_norfolk, finnsky, markconroy,...

Issue #2989541 by shaal, kjay, smaz, rachel_norfolk, finnsky, markconroy, Eli-T, JayKandari, redzeuf: Consider use of Tour module in Umami

core/profiles/demo_umami/demo_umami.info.yml

@@ -42,6 +42,7 @@ install:
   - responsive_image
   - content_moderation
   - workflows
+  - demo_umami_tour
 themes:
   - seven
   - umami

core/profiles/demo_umami/modules/demo_umami_tour/config/install/tour.tour.umami-front.yml

+langcode: en
+status: true
+dependencies:
+  module:
+    - node
+id: umami-front
+label: 'Front page'
+module: demo_umami_tour
+routes:
+  - route_name: view.frontpage.page_1
+tips:
+  welcome:
+    id: welcome
+    plugin: text
+    label: Welcome to the Umami Drupal demo
+    body: Drupal is a powerful open source content management system and this demo, based on a fictional food magazine called Umami, will introduce you to some of Drupal's concepts and features.
+    weight: 1
+  out-of-the-box:
+    id: out-of-the-box
+    plugin: text
+    label: Drupal's core capabilities
+    body: Drupal provides many of the features you need to start building powerful websites right out-of-the-box. The features presented in this demo are based entirely on Drupal 8's core functionality.
+    weight: 2
+  navigation:
+    id: navigation
+    plugin: text
+    label: Navigation
+    body: This is the main navigation menu for the Umami website. It is simple to create and administer menus and you can create as many menus as your site requires. For example, this site provides this main navigation as well as the user navigation displayed above.
+    weight: 3
+    location: left
+    attributes:
+      data-class: menu-main__link.is-active
+  umami-theme:
+    id: umami-theme
+    plugin: text
+    label: The Umami theme
+    body: This website uses the custom Umami theme to style its appearance. This theme has been created using CSS and by customizing Drupal's HTML templates that are built using the popular Twig templating system. Themes are also available for download and installation.
+    weight: 4
+    location: right
+    attributes:
+      data-class: block-type-banner-block .summary
+  managing-content:
+    id: managing-content
+    plugin: text
+    label: Managing content
+    body: This example website provides a collection of articles and recipes that demonstrate how content can easily be managed in a flexible and structured way.
+    weight: 5
+    location: right
+    attributes:
+      data-class: view-promoted-items--single .read-more__link
+  umami-front-views:
+    id: umami-front-content
+    plugin: text
+    label: Configuring content display
+    body:  Display modes can be configured to provide different presentations of content. These promoted articles and recipes use the display modes feature to format the images with different ratios.
+    weight: 6
+    location: left
+    attributes:
+      data-class: view-promoted-items--double .node:nth-child(1)
+  umami-views:
+    id: umami-views
+    plugin: text
+    label: Displaying content with Views
+    body: Drupal makes it simple to create lists of filtered content and control how the content is displayed using the Views feature. This latest recipes example uses a view to fetch the most recent four recipes, displays the view as a block that is positioned on the front page with the block system.
+    weight: 7
+    location: right
+    attributes:
+      data-class: view-frontpage .node:nth-child(1)
+  front-bookend:
+    id: front-bookend
+    plugin: text
+    label: Continue exploring Drupal
+    body: The front page tour is now over. Feel free to click around and continue exploring Drupal.
+    weight: 8

core/profiles/demo_umami/modules/demo_umami_tour/demo_umami_tour.info.yml

+name: 'Umami demo: Tour'
+type: module
+description: 'A guide to the Umami food magazine Drupal demo.'
+version: VERSION
+core: 8.x
+dependencies:
+  - node
+  - tour

core/profiles/demo_umami/themes/umami/css/components/tour/tour.theme.css

+.joyride-tip-guide .tour-tip-label {
+  margin-top: 0;
+}
+
+.joyride-tip-guide h2 {
+  margin: 10px 0;
+  color: #fff;
+  font-family: "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", "Lucida Sans", sans-serif;
+  font-size: 18px;
+  font-weight: bold;
+  line-height: 20px;
+}
+
+.joyride-tip-guide p {
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.joyride-tip-guide .button {
+  padding: 4px 1.5em;
+  font-size: 14px;
+  line-height: 17px;
+}
+
+.joyride-tip-guide a:hover,
+.joyride-tip-guide a:focus {
+  background-color: #efefef;
+  color: #000;
+}

core/profiles/demo_umami/themes/umami/umami.info.yml

@@ -12,6 +12,10 @@ libraries:
 libraries-override:
   classy/messages: false
 
+libraries-extend:
+  tour/tour-styling:
+    - umami/demo-umami-tour
+
 regions:
   pre_header: Pre-header
   header: Header

core/profiles/demo_umami/themes/umami/umami.libraries.yml

@@ -42,6 +42,8 @@ global:
       css/layout/layout.css: {}
   js:
     js/components/navigation/menu-main/menu-main.js: {}
+  dependencies:
+    - umami/demo-umami-tour
 
 messages:
   css:
@@ -96,3 +98,10 @@ view-mode-card-common-alt:
       css/components/content/card-common-alt/card-common-alt.css: {}
   dependencies:
     - umami/more-link
+
+demo-umami-tour:
+  css:
+   theme:
+      css/components/tour/tour.theme.css: {}
+  dependencies:
+    - seven/tour-styling