From 4f8bb7fb514fe08717e12677391c97a894d9373c Mon Sep 17 00:00:00 2001
From: Zsolt <zla@umbraco.com>
Date: Wed, 25 Oct 2017 12:48:34 +0200
Subject: [PATCH 01/18] Adding new components to the help drawer

---
 .../components/umbdropdownblock.directive.js  |  78 ++++++++++++++
 .../umbdropdownblockitem.directive.js         |  81 ++++++++++++++
 .../components/umbprogresscircle.directive.js | 100 ++++++++++++++++++
 .../src/common/services/tour.service.js       |   9 +-
 src/Umbraco.Web.UI.Client/src/less/belle.less |   4 +-
 .../less/components/umb-dropdown-block.less   |  92 ++++++++++++++++
 .../less/components/umb-progress-circle.less  |  65 ++++++++++++
 .../common/drawers/help/help.controller.js    |  17 ++-
 .../src/views/common/drawers/help/help.html   |  13 ++-
 .../components/umb-dropdown-block-item.html   |  16 +++
 .../views/components/umb-dropdown-block.html  |  20 ++++
 .../views/components/umb-progress-circle.html |   9 ++
 .../default/StartupDashboardIntro.html        |  15 ---
 13 files changed, 500 insertions(+), 19 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdownblock.directive.js
 create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdownblockitem.directive.js
 create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js
 create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/umb-dropdown-block.less
 create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less
 create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown-block-item.html
 create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown-block.html
 create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdownblock.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdownblock.directive.js
new file mode 100644
index 0000000000..252c036342
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdownblock.directive.js
@@ -0,0 +1,78 @@
+/**
+@ngdoc directive
+@name umbraco.directives.directive:umbDropdownBlock
+@restrict E
+@scope
+
+@description
+Use this directive to render a dropdown object.
+
+<h3>Markup example</h3>
+<pre>
+    <div ng-controller="My.Controller as vm">
+
+        <umb-dropdown-block title="This is the title" circle="true" percentage="100">
+            // Content of dropdown
+        </umb-dropdown-block>
+
+    </div>
+</pre>
+
+<h3>Example with {@link umbraco.directives.directive:umbDropdownBlockItem umbDropdownBlockItem}</h3>
+<pre>
+    <div ng-controller="My.Controller as vm">
+
+        <umb-dropdown-block
+            ng-repeat="(key,value) in vm.items"
+            title="key"
+            circle="true" 
+            percentage="100">
+
+                <umb-dropdown-block-item
+                    on-start="vm.toggle()"
+                    tick="true"
+                    name="title"
+                    completed="true"
+                    ng-repeat="item in value">
+                </umb-dropdown-block-item>
+
+        </umb-dropdown-block>
+
+    </div>
+</pre>
+
+<h3>Use in combination with:</h3>
+<ul>
+    <li>{@link umbraco.directives.directive:umbDropdownBlockItem umbDropdownBlockItem}</li>
+</ul>
+
+@param {string} title (<code>attrbute</code>): Custom title text.
+@param {boolean} circle (<code>attrbute</code>): Decides, if the progress circle is displayed or not.
+@param {string} percentage (<code>attrbute</code>): A number which defines the progress circle.
+**/
+
+
+(function () {
+    'use strict';
+
+    function DropdownBlockDirective(tourService) {
+
+        var directive = {
+            restrict: 'E',
+            replace: true,
+            transclude: true,
+            templateUrl: 'views/components/umb-dropdown-block.html',
+            scope: {
+                circle: "=",
+                title: "=",
+                percentage: "@"
+            }
+        };
+
+        return directive;
+    
+    }
+
+    angular.module('umbraco.directives').directive('umbDropdownBlock', DropdownBlockDirective);
+
+})();
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdownblockitem.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdownblockitem.directive.js
new file mode 100644
index 0000000000..98041531de
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdownblockitem.directive.js
@@ -0,0 +1,81 @@
+/**
+@ngdoc directive
+@name umbraco.directives.directive:umbDropdownBlockItem
+@restrict E
+@scope
+
+@description
+Use this directive to render a list for the {@link umbraco.directives.directive:umbDropdownBlock umbDropdownBlock} directive. See documentation for {@link umbraco.directives.directive:umbDropdownBlock umbDropdownBlock} component.
+
+<h3>Markup example</h3>
+
+<pre>
+    <div ng-controller="My.Controller as vm">
+
+        <umb-dropdown-block
+            ng-repeat="(key,value) in vm.items"
+            title="key"
+            circle="true" 
+            percentage="100">
+
+                <umb-dropdown-block-item
+                    ng-repeat="item in value"                
+                    name="title"
+                    completed="true"
+                    tick="true"
+                    on-start="vm.toggle()">
+                </umb-dropdown-block-item>
+
+        </umb-dropdown-block>
+
+    </div>
+</pre>
+
+<h3>Use in combination with:</h3>
+<ul>
+    <li>{@link umbraco.directives.directive:umbDropdownBlock umbDropdownBlock}</li>
+</ul>
+
+@param {string} name (<code>attrbute</code>): Custom text.
+@param {callback} onStart (<code>attrbute</code>): Defines what happens when the row is clicked.
+@param {boolean} completed (<code>attrbute</code>): Decides, if the tick is gray or green.
+@param {boolean} tick (<code>attrbute</code>): Decides, if the tick is displayed or not.
+**/
+
+
+(function () {
+    'use strict';
+
+    function DropdownBlockItemDirective() {
+
+        function link(scope, el, attr, ctrl) {
+
+            scope.clickStart = function() {
+                if(scope.onStart) {
+                    scope.onStart();
+                }
+            };
+      
+        }
+
+        var directive = {
+            restrict: 'E',
+            replace: true,
+            transclude: true,
+            templateUrl: 'views/components/umb-dropdown-block-item.html',
+            scope: {
+                name: "@",
+                tick: "=",
+                onStart: "&",
+                completed: "@"
+            },
+            link: link
+        };
+
+        return directive;
+    
+    }
+
+    angular.module('umbraco.directives').directive('umbDropdownBlockItem', DropdownBlockItemDirective);
+
+})();
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js
new file mode 100644
index 0000000000..7e7cfd52e5
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js
@@ -0,0 +1,100 @@
+/**
+@ngdoc directive
+@name umbraco.directives.directive:umbProgressCircle
+@restrict E
+@scope
+
+@description
+Use this directive to render a circular progressbar.
+
+<h3>Markup example</h3>
+<pre>
+	<div ng-controller="My.Controller as vm">
+
+        <umb-progress-circle
+            percentage="80"
+            size="60"
+            font-size="m"
+            stroke-color="green">
+        </umb-progress-circle>
+
+	</div>
+</pre>
+
+
+@param {string} size (<code>attribute</code>): This parameter defines the width and the height of the circle in pixels.
+@param {string} percentage (<code>attribute</code>): Takes a number between 0 and 100 and applies it to the circle's highlight length.
+@param {string} strokeColor (<code>attribute</code>): the color of the highlight (green, purple, red, yellow). Green by default. 
+@param {string} fontSize (<code>attribute</code>): Defines the size of the number in the center (xs, s, m, l, xl)
+**/
+
+
+
+
+(function (){
+    'use strict';
+
+    function ProgressCircleDirective($http, $timeout) {
+
+        function link(scope, element, $filter) {
+            
+            function onInit() {
+
+
+                // centering text for all sizes
+                var text = element.find(".umb-tour__values");
+                
+                text.css({ "line-height": scope.size + "px" });
+                console.log("this is the size:", scope.size);
+                            
+                // making sure we get the right numbers
+                var percent = scope.percentage;
+
+                if (percent > 100) {
+                    percent = 100
+                }
+                else if (percent < 0) {
+                    percent = 0
+                }
+
+                // calculating the circle's highlight
+                var circle = element.find(".umb-tour__progress-circle");
+                var r = circle.attr('r');
+                var strokeDashArray = (r*Math.PI)*2;
+
+                // Full circle length
+                scope.strokeDashArray = strokeDashArray;
+
+                var strokeDashOffsetDifference = (percent/100)*strokeDashArray;
+                var strokeDashOffset = strokeDashArray - strokeDashOffsetDifference;
+
+                // Distance for the highlight dash's offset
+                scope.strokeDashOffset = strokeDashOffset;
+                var coloring = circle.attr('stroke');
+
+            }
+
+            onInit();
+        }
+
+
+        var directive = {
+            restrict: 'E',
+            replace: true,
+            templateUrl: 'views/components/umb-progress-circle.html',
+            scope: {
+                size: "@?",
+                percentage: "@",
+                strokeColor: "@",
+                fontSize: "@"
+            },
+            link: link
+
+        };
+
+        return directive;
+    }
+
+    angular.module('umbraco.directives').directive('umbProgressCircle', ProgressCircleDirective);
+
+})();
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
index de6ef7f93d..67f2b85417 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
@@ -314,6 +314,12 @@
             return groupedTours;
         }
 
+        function getCompletedTours() {
+            var completedTours = localStorageService.get(localStorageKey);
+            var aliases = _.pluck(completedTours, "alias");
+            return aliases;
+        }
+
         ///////////
 
         function setCompletedTours() {
@@ -370,7 +376,8 @@
             endTour: endTour,
             completeTour: completeTour,
             getAllTours: getAllTours,
-            getGroupedTours: getGroupedTours
+            getGroupedTours: getGroupedTours,
+            getCompletedTours: getCompletedTours
         };
 
         return service;
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index 8d7c32a026..e9e6c29e65 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -129,6 +129,8 @@
 @import "components/umb-checkmark.less";
 @import "components/umb-list.less";
 @import "components/umb-box.less";
+@import "components/umb-progress-circle.less";
+@import "components/umb-dropdown-block.less";
 
 @import "components/buttons/umb-button.less";
 @import "components/buttons/umb-button-group.less";
@@ -170,4 +172,4 @@
 @import "typeahead.less";
 @import "hacks.less";
 
-@import "healthcheck.less";
+@import "healthcheck.less";
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-dropdown-block.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-dropdown-block.less
new file mode 100644
index 0000000000..1ea8ac8642
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-dropdown-block.less
@@ -0,0 +1,92 @@
+.umb-tour__progress-circle-container {
+    width: 50px;
+    height: 50px;
+    float: right;
+    margin: 5px;
+}
+
+.umb-tour__dropdown-title {
+    font-size: 18px;
+    font-weight: 700;
+    color: @gray-2;
+}
+
+.umb-tour__dropdown-contaiener {
+    background-color: @white;
+    width: 340px;
+    border-radius: 3px;
+    margin-bottom: 10px; 
+}
+
+.umb-tour__dropdown-contaiener summary{
+    line-height: 60px;
+}
+
+.umb-tour__dropdown-contaiener summary:focus{
+    outline: none;
+}
+
+.umb-tour__dropdown-contaiener summary::-webkit-details-marker {
+    color: @gray-2;
+    margin: 0 20px 0 30px; 
+}
+
+.umb-tour__dropdown-contaiener summary::-moz-list-bullet {
+    color: @gray-2;
+    margin: 0 20px 0 30px; 
+}
+
+.umb-tour__dropdown-list {
+    border-top: solid @gray-10 1px;
+    width: 340px;
+    padding: 10px 0;
+}
+
+.umb-tour__start {
+    float: right;
+}
+
+.umb-tour__row {
+    padding: 0 20px;
+    line-height: 40px;
+}
+
+.umb-tour__row:hover {
+    background-color: @gray-10;
+}
+
+.umb-tour__tick-circle {
+    width: 26px;
+    height: 26px;
+    margin: 7px 20px 0 0;
+    border-radius: 50%;
+    float: left;
+}
+
+.umb-tour__row-title-container {
+    display: flex;
+    justify-content: space-between;
+}
+
+.umb-tour__row-title {
+    font-size: 16px;
+    color: @gray-4;
+}
+
+.umb-tour__row-button {
+    visibility: hidden;
+}
+
+.umb-tour__row:hover .umb-tour__row-button {
+    visibility: visible;
+}
+
+.umb-tour__tick {
+    fill: #FFFFFF;
+}
+
+.umb-tour__tick-canvas {
+    height: 16px;
+    width: 16px;
+    margin: 5px;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less
new file mode 100644
index 0000000000..37c422b0c5
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less
@@ -0,0 +1,65 @@
+.umb-tour__progress {
+    position: absolute;
+    -webkit-transform: rotate(-90deg);
+    -moz-transform: rotate(-90deg);
+    -o-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+}
+
+.umb-tour__progress-container {
+    position: relative;
+}
+
+// circle highlight on progressbar
+.umb-tour__progress-circle {
+    stroke: @green;
+}
+
+.umb-tour__progress-circle--green {
+    stroke: @green;
+}
+
+.umb-tour__progress-circle--red {
+    stroke: @red;
+}
+
+.umb-tour__progress-circle--yellow {
+    stroke: @yellow;
+}
+
+.umb-tour__progress-circle--purple {
+    stroke: @purple;
+}
+
+// circle progressbar bg
+.umb-tour__progress-circle-bg {
+    stroke: @gray-8;
+}
+
+// the text in the center
+.umb-tour__values {
+    font-size: 16px;
+    font-weight: 700;
+    text-align: center;
+}
+
+.umb-tour__values--xs{
+    font-size: 12px;
+}
+
+.umb-tour__values--s{
+    font-size: 14px;
+}
+
+.umb-tour__values--m{
+    font-size: 16px;
+}
+
+.umb-tour__values--l{
+    font-size: 18px;
+}
+
+.umb-tour__values--xl{
+    font-size: 20px;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.controller.js
index ec5ea13639..896f5ba9b6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.controller.js
@@ -1,7 +1,7 @@
 (function () {
     "use strict";
 
-    function HelpDrawerController($scope, $routeParams, $timeout, dashboardResource, localizationService, userService, eventsService, helpService, appState) {
+    function HelpDrawerController($scope, $routeParams, $timeout, dashboardResource, localizationService, userService, eventsService, helpService, appState, tourService, $filter) {
 
         var vm = this;
         var evts = [];
@@ -15,6 +15,21 @@
 
         vm.closeDrawer = closeDrawer;
 
+        vm.startTour = startTour;
+        
+        vm.tours = tourService.getGroupedTours();
+    
+        function startTour(tour) {
+            tourService.startTour(tour);
+        }
+
+
+        // Finding out, how many tours are completed for the progress circle
+        var completedLength = tourService.getCompletedTours().length;
+        var tourLength = tourService.getAllTours().length;
+
+        $scope.tourPercentage = (completedLength/tourLength)*100 
+
         function oninit() {
 
             // load custom help dashboard
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
index 35deec56ca..b882c54f29 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
@@ -4,9 +4,20 @@
         title="{{ vm.title }}"
         description="{{ vm.subtitle }}">
     </umb-drawer-header>
-    
+
     <umb-drawer-content>
 
+        <!-- Tours -->
+        <umb-dropdown-block ng-repeat="(key,value) in vm.tours" title="key" circle="true" percentage="{{ tourPercentage }}">
+            <umb-dropdown-block-item
+                on-start="vm.startTour(tour)"
+                tick="true"
+                name="{{ tour.name }}"
+                completed="{{ tour.completed }}"
+                ng-repeat="tour in value">
+            </umb-dropdown-block-item>
+        </umb-dropdown-block>
+
         <!-- Show in custom help dashboard -->
         <div style="margin-bottom: 20px;" ng-if="vm.customDashboard.length > 0">
             <div ng-repeat="tab in vm.customDashboard">
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown-block-item.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown-block-item.html
new file mode 100644
index 0000000000..cb1a994966
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown-block-item.html
@@ -0,0 +1,16 @@
+<div>
+    <div class="umb-tour__row" ng-click="onStart()">
+
+        <div ng-if="tick == true">
+            <div class="umb-tour__tick-circle">
+                <umb-checkmark ng-if="completed === 'true'" checked="true"></umb-checkmark>
+                <umb-checkmark ng-if="completed !== 'true'" checked="false"></umb-checkmark>
+            </div>
+        </div>
+
+        <div class="umb-tour__row-title-container"> 
+            <span class="umb-tour__row-title">{{ name }}</span>
+            <umb-button class="umb-tour__row-button" size="xs" button-style="link" type="button" label="start"></umb-button> 
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown-block.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown-block.html
new file mode 100644
index 0000000000..243c8e164c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown-block.html
@@ -0,0 +1,20 @@
+<div>
+    <div>
+        <details class="umb-tour__dropdown-contaiener">
+            <summary>
+                <span class="umb-tour__dropdown-title">{{ title }}</span>
+                <div class="umb-tour__progress-circle-container" ng-if="circle == true">
+                    <umb-progress-circle
+                        percentage="{{ percentage }}"
+                        size="50"
+                        font-size=""
+                        stroke-color="">
+                    </umb-progress-circle>
+                </div>
+            </summary>
+            <div class="umb-tour__dropdown-list" ng-transclude>
+
+            </div>
+        </details>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html
new file mode 100644
index 0000000000..94bc839f7d
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html
@@ -0,0 +1,9 @@
+<div>
+    <div class="umb-tour__progress-container" style="width: {{ size }}px; width: {{ size }}px;">                    
+        <svg class="umb-tour__progress" viewBox="0 0 100 100">
+            <circle class="umb-tour__progress-circle-bg" cx="50" cy="50" r="48" fill="none" stroke-width="4"/>
+            <circle class="umb-tour__progress-circle umb-tour__progress-circle--{{ strokeColor }}" cx="50" cy="50" r="48" fill="none" stroke-width="4" stroke-dasharray="{{ strokeDashArray }}" stroke-dashoffset="{{ strokeDashOffset }}" />
+        </svg>
+        <div class="umb-tour__values umb-tour__values--{{ fontSize }}"> {{ percentage }}%</div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/dashboard/default/StartupDashboardIntro.html b/src/Umbraco.Web.UI.Client/src/views/dashboard/default/StartupDashboardIntro.html
index 8f7b7a420f..b2222d07c4 100644
--- a/src/Umbraco.Web.UI.Client/src/views/dashboard/default/StartupDashboardIntro.html
+++ b/src/Umbraco.Web.UI.Client/src/views/dashboard/default/StartupDashboardIntro.html
@@ -1,21 +1,6 @@
 <div class="umb-dashboard-grid" ng-controller="Umbraco.Dashboard.StartUpDynamicContentController as vm">
 
     <umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
-    
-    <!-- Tours -->
-    <div>
-        <div ng-repeat="(key,value) in vm.tours">
-            <h5>
-                <span ng-if="key !== 'undefined'">{{key}}</span>                    
-                <span ng-if="key === 'undefined'">Other</span>
-            </h5>
-            <div ng-repeat="tour in value">
-                {{ tour.name }}
-                <div ng-if="tour.completed">Completed</div>
-                <button ng-click="vm.startTour(tour)">Start</button>
-            </div>
-        </div>
-    </div>
 
     <div class="row clearfix" ng-if="vm.dashboard">
         <!-- Sections -->

From d98db5e6bc4774d07f1f6bedbad1083e75baf7c7 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 26 Oct 2017 11:39:49 +0200
Subject: [PATCH 02/18] updates to tour layout in drawer

---
 .../src/common/services/tour.service.js       | 14 ++++
 src/Umbraco.Web.UI.Client/src/less/belle.less |  1 +
 .../components/application/umb-drawer.less    |  3 +-
 .../less/components/buttons/umb-button.less   |  5 ++
 .../src/less/components/umb-number-badge.less | 40 ++++++++++
 .../common/drawers/help/help.controller.js    | 45 ++++++++---
 .../src/views/common/drawers/help/help.html   | 79 +++++++++++++------
 .../views/components/umb-progress-circle.html |  6 +-
 8 files changed, 152 insertions(+), 41 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/umb-number-badge.less

diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
index aad11af94a..01c780b22b 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
@@ -192,6 +192,13 @@
                         content: "<p>The <b>Content section</b> contains the content of the website. Content is displayed as <b>nodes</b> in the content tree.</p><p>In this tour we will learn how to create our <b>Home</b> page for our website.</p>",
                         type: "intro"
                     },
+                    {
+                        element: "#applications [data-element='section-content']",
+                        title: "Navigate to the content sections",
+                        content: "In the <b>Content section</b> we will find the content of our website.",
+                        event: "click",
+                        backdropOpacity: 0.6
+                    },
                     {
                         element: "[data-element='tree-root']",
                         title: "Open context menu",
@@ -279,6 +286,13 @@
                         content: "<p>Our three main components to a page is done: <b>Document type, Template, and Content</b> - it is now time to see the result.</p><p>In this tour we will learn how to see our published website.</p>",
                         type: "intro"
                     },
+                    {
+                        element: "#applications [data-element='section-content']",
+                        title: "Navigate to the content sections",
+                        content: "In the <b>Content section</b> we will find the content of our website.",
+                        event: "click",
+                        backdropOpacity: 0.6
+                    },
                     {
                         element: "#tree [data-element='tree-item-Home']",
                         title: "Open the Home page",
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index e9e6c29e65..320590098d 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -129,6 +129,7 @@
 @import "components/umb-checkmark.less";
 @import "components/umb-list.less";
 @import "components/umb-box.less";
+@import "components/umb-number-badge.less";
 @import "components/umb-progress-circle.less";
 @import "components/umb-dropdown-block.less";
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less
index 46c75486ef..5d44ed5de4 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less
@@ -149,7 +149,8 @@
     border-bottom: 1px solid @gray-9;
 }
 
-.umb-help-list-item > a {
+.umb-help-list-item > a,
+.umb-help-list-item__content {
     display: flex;
     align-items: center;
     padding: 10px 20px;
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
index c161d8d62d..da0d79a999 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
@@ -99,6 +99,11 @@
 }
 
 /* Sizes */
+.umb-button--xxs {
+    padding: 3px 12px;
+    font-size: 13px;
+}
+
 .umb-button--xs {
     padding: 5px 16px;
     font-size: 14px;
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-number-badge.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-number-badge.less
new file mode 100644
index 0000000000..d35abff550
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-number-badge.less
@@ -0,0 +1,40 @@
+.umb-number-badge {
+    border: 1px solid @gray-6;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: @black;
+    font-size: 15px;
+}
+
+.umb-number-badge--xs {
+    width: 20px;
+    height: 20px;
+    font-size: 13px;
+}
+
+.umb-number-badge--s {
+    width: 25px;
+    height: 25px;
+}
+
+.umb-number-badge--m {
+    width: 30px;
+    height: 30px;
+}
+
+.umb-number-badge--l {
+    width: 40px;
+    height: 40px;
+    font-size: 18px;
+}
+
+.umb-number-badge--xl {
+    width: 50px;
+    height: 50px;
+    font-size: 20px;
+}
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.controller.js
index 896f5ba9b6..dd3766685f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.controller.js
@@ -12,26 +12,22 @@
         vm.tree = $routeParams.tree;
         vm.sectionName = "";
         vm.customDashboard = null;
+        vm.tours = [];
 
         vm.closeDrawer = closeDrawer;
-
         vm.startTour = startTour;
-        
-        vm.tours = tourService.getGroupedTours();
-    
+        vm.getTourGroupCompletedPercentage = getTourGroupCompletedPercentage;
+        vm.showTourButton = showTourButton;
+            
         function startTour(tour) {
             tourService.startTour(tour);
+            closeDrawer();
         }
 
-
-        // Finding out, how many tours are completed for the progress circle
-        var completedLength = tourService.getCompletedTours().length;
-        var tourLength = tourService.getAllTours().length;
-
-        $scope.tourPercentage = (completedLength/tourLength)*100 
-
         function oninit() {
 
+            vm.tours = tourService.getGroupedTours();
+
             // load custom help dashboard
             dashboardResource.getDashboard("user-help").then(function (dashboard) {
                 vm.customDashboard = dashboard;
@@ -56,6 +52,8 @@
 
             });
 
+            getTourGroupCompletedPercentage();
+
         }
 
         function closeDrawer() {
@@ -116,6 +114,31 @@
             });
         }
 
+        function showTourButton(index, tourGroup) {
+            if(index !== 0) {
+                var prevTour = tourGroup[index - 1];
+                if(prevTour.completed) {
+                    return true;
+                }
+            } else {
+                return true;
+            }
+        }
+
+        function getTourGroupCompletedPercentage() {
+            // Finding out, how many tours are completed for the progress circle
+            angular.forEach(vm.tours, function(group){
+                var completedTours = 0;
+                angular.forEach(group, function(tour){
+                    if(tour.completed) {
+                        completedTours++;
+                    }
+                });
+                group.completedPercentage = Math.round((completedTours/group.length)*100);
+            });
+
+        }
+
         oninit();
            
         $scope.$on('$destroy', function () {
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
index b882c54f29..272c740a24 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
@@ -8,15 +8,39 @@
     <umb-drawer-content>
 
         <!-- Tours -->
-        <umb-dropdown-block ng-repeat="(key,value) in vm.tours" title="key" circle="true" percentage="{{ tourPercentage }}">
-            <umb-dropdown-block-item
-                on-start="vm.startTour(tour)"
-                tick="true"
-                name="{{ tour.name }}"
-                completed="{{ tour.completed }}"
-                ng-repeat="tour in value">
-            </umb-dropdown-block-item>
-        </umb-dropdown-block>
+
+        <div style="margin-bottom: 20px;">
+            <h5 style="margin-bottom: 10px; margin-top: 0;">Tours</h5>
+            
+            <div ng-repeat="(key,value) in vm.tours" style="margin-bottom: 5px;">
+
+                <div class="umb-help-list">
+
+                    <a href="" class="umb-help-list-item flex items-center justify-between" style="padding: 5px 20px;" ng-click="value.open = !value.open">
+                        <h5><i style="margin-right: 2px;" ng-class="{'icon-navigation-right': !value.open, 'icon-navigation-down': value.open}"></i>{{key}}</h5>
+                        <umb-progress-circle
+                            percentage="{{value.completedPercentage}}"
+                            size="40"
+                            font-size="xs"
+                            stroke-color="">
+                        </umb-progress-circle>
+                    </a>
+
+                    <div ng-if="value.open">
+                        <div class="umb-help-list-item" ng-repeat="tour in value">
+                            <div class="umb-help-list-item__content">
+                                <div style="margin-right: 6px;" ng-if="!tour.completed" class="umb-number-badge umb-number-badge--xs">{{ $index + 1 }}</div>
+                                <umb-checkmark ng-if="tour.completed" size="xs" checked="tour.completed" style="margin-right: 6px;"></umb-checkmark>
+                                <span ng-class="{'strike': tour.completed}">{{ tour.name }}</span>
+                                <umb-button ng-if="tour.completed || vm.showTourButton($index, value)" size="xxs" type="button" label="start" style="margin-left: auto;" action="vm.startTour(tour)"></umb-button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
 
         <!-- Show in custom help dashboard -->
         <div style="margin-bottom: 20px;" ng-if="vm.customDashboard.length > 0">
@@ -49,7 +73,7 @@
         </div>
 
         <!--  Umbraco tv content -->
-        <div>
+        <div style="margin-bottom: 20px;">
             <h5 style="margin-bottom: 10px; margin-top: 0;" ng-if="vm.videos.length > 0">Videos</h5>
             <ul class="umb-help-list">
                 <li class="umb-help-list-item" ng-repeat="video in vm.videos track by $index">
@@ -62,26 +86,29 @@
             </ul>
         </div>
 
+        <!--  Links -->
+        <div>
+            <a class="umb-help-badge" style="margin-bottom: 5px;" target="_blank" href="http://umbraco.tv?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
+                <i class="umb-help-badge__icon icon-tv-old"></i>
+                <div class="umb-help-badge__title">Visit umbraco.tv</div>
+                <small>
+                    <localize key="help_theBestUmbracoVideoTutorials">The best Umbraco video tutorials</localize>
+                </small>
+            </a>
+
+            <a class="umb-help-badge" style="margin-bottom: 5px;" target="_blank" href="http://our.umbraco.org?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=our">
+                <i class="umb-help-badge__icon icon-favorite"></i>
+                <div class="umb-help-badge__title">Visit our.umbraco.org</div>
+                <small>
+                    <localize key="defaultdialogs_theFriendliestCommunity">The friendliest community</localize>
+                </small>
+            </a>
+        </div>
+
     </umb-drawer-content>
 
     <umb-drawer-footer>
 
-        <a class="umb-help-badge" style="margin-bottom: 5px;" target="_blank" href="http://umbraco.tv?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
-            <i class="umb-help-badge__icon icon-tv-old"></i>
-            <div class="umb-help-badge__title">Visit umbraco.tv</div>
-            <small>
-                <localize key="help_theBestUmbracoVideoTutorials">The best Umbraco video tutorials</localize>
-            </small>
-        </a>
-
-        <a class="umb-help-badge" style="margin-bottom: 5px;" target="_blank" href="http://our.umbraco.org?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=our">
-            <i class="umb-help-badge__icon icon-favorite"></i>
-            <div class="umb-help-badge__title">Visit our.umbraco.org</div>
-            <small>
-                <localize key="defaultdialogs_theFriendliestCommunity">The friendliest community</localize>
-            </small>
-        </a>
-
         <div class="flex justify-end">
             <umb-button
                 type="button"
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html
index 94bc839f7d..3facbf3009 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html
@@ -1,8 +1,8 @@
 <div>
-    <div class="umb-tour__progress-container" style="width: {{ size }}px; width: {{ size }}px;">                    
+    <div class="umb-tour__progress-container" ng-style="{'width': size, 'height': size }">                    
         <svg class="umb-tour__progress" viewBox="0 0 100 100">
-            <circle class="umb-tour__progress-circle-bg" cx="50" cy="50" r="48" fill="none" stroke-width="4"/>
-            <circle class="umb-tour__progress-circle umb-tour__progress-circle--{{ strokeColor }}" cx="50" cy="50" r="48" fill="none" stroke-width="4" stroke-dasharray="{{ strokeDashArray }}" stroke-dashoffset="{{ strokeDashOffset }}" />
+            <circle class="umb-tour__progress-circle-bg" cx="50" cy="50" r="47" fill="none" stroke-width="6"/>
+            <circle class="umb-tour__progress-circle umb-tour__progress-circle--{{ strokeColor }}" cx="50" cy="50" r="47" fill="none" stroke-width="6" stroke-dasharray="{{ strokeDashArray }}" stroke-dashoffset="{{ strokeDashOffset }}" />
         </svg>
         <div class="umb-tour__values umb-tour__values--{{ fontSize }}"> {{ percentage }}%</div>
     </div>

From a0a3b7e9c942a0b39126b0ed9fc914d5205708bc Mon Sep 17 00:00:00 2001
From: Zsolt <zla@umbraco.com>
Date: Thu, 26 Oct 2017 12:02:46 +0200
Subject: [PATCH 03/18] Changing the css of umbProgressCircle

---
 .../components/umbprogresscircle.directive.js |  4 +--
 .../less/components/umb-progress-circle.less  | 34 +++++++++----------
 .../views/components/umb-progress-circle.html | 10 +++---
 3 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js
index 7e7cfd52e5..8cc7300401 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js
@@ -42,7 +42,7 @@ Use this directive to render a circular progressbar.
 
 
                 // centering text for all sizes
-                var text = element.find(".umb-tour__values");
+                var text = element.find(".umb-progress-circle__percentage");
                 
                 text.css({ "line-height": scope.size + "px" });
                 console.log("this is the size:", scope.size);
@@ -58,7 +58,7 @@ Use this directive to render a circular progressbar.
                 }
 
                 // calculating the circle's highlight
-                var circle = element.find(".umb-tour__progress-circle");
+                var circle = element.find(".umb-progress-circle__highlight");
                 var r = circle.attr('r');
                 var strokeDashArray = (r*Math.PI)*2;
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less
index 37c422b0c5..f9d9b134fe 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less
@@ -1,4 +1,8 @@
-.umb-tour__progress {
+.umb-progress-circle__container {
+    position: relative;
+}
+
+.umb-progress-circle__view-box {
     position: absolute;
     -webkit-transform: rotate(-90deg);
     -moz-transform: rotate(-90deg);
@@ -7,59 +11,55 @@
     transform: rotate(-90deg);
 }
 
-.umb-tour__progress-container {
-    position: relative;
-}
-
 // circle highlight on progressbar
-.umb-tour__progress-circle {
+.umb-progress-circle__highlight {
     stroke: @green;
 }
 
-.umb-tour__progress-circle--green {
+.umb-progress-circle__highlight--green {
     stroke: @green;
 }
 
-.umb-tour__progress-circle--red {
+.umb-progress-circle__highlight--red {
     stroke: @red;
 }
 
-.umb-tour__progress-circle--yellow {
+.umb-progress-circle__highlight--yellow {
     stroke: @yellow;
 }
 
-.umb-tour__progress-circle--purple {
+.umb-progress-circle__highlight--purple {
     stroke: @purple;
 }
 
 // circle progressbar bg
-.umb-tour__progress-circle-bg {
+.umb-progress-circle__bg {
     stroke: @gray-8;
 }
 
 // the text in the center
-.umb-tour__values {
+.umb-progress-circle__percentage {
     font-size: 16px;
     font-weight: 700;
     text-align: center;
 }
 
-.umb-tour__values--xs{
+.umb-progress-circle__percentage--xs{
     font-size: 12px;
 }
 
-.umb-tour__values--s{
+.umb-progress-circle__percentage--s{
     font-size: 14px;
 }
 
-.umb-tour__values--m{
+.umb-progress-circle__percentage--m{
     font-size: 16px;
 }
 
-.umb-tour__values--l{
+.umb-progress-circle__percentage--l{
     font-size: 18px;
 }
 
-.umb-tour__values--xl{
+.umb-progress-circle__percentage--xl{
     font-size: 20px;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html
index 3facbf3009..74aaf52599 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html
@@ -1,9 +1,9 @@
 <div>
-    <div class="umb-tour__progress-container" ng-style="{'width': size, 'height': size }">                    
-        <svg class="umb-tour__progress" viewBox="0 0 100 100">
-            <circle class="umb-tour__progress-circle-bg" cx="50" cy="50" r="47" fill="none" stroke-width="6"/>
-            <circle class="umb-tour__progress-circle umb-tour__progress-circle--{{ strokeColor }}" cx="50" cy="50" r="47" fill="none" stroke-width="6" stroke-dasharray="{{ strokeDashArray }}" stroke-dashoffset="{{ strokeDashOffset }}" />
+    <div class="umb-progress-circle__container" ng-style="{'width': size, 'height': size }">                    
+        <svg class="umb-progress-circle__view-box" viewBox="0 0 100 100">
+            <circle class="umb-progress-circle__bg" cx="50" cy="50" r="47" fill="none" stroke-width="6"/>
+            <circle class="umb-progress-circle__highlight umb-progress-circle__highlight--{{ strokeColor }}" cx="50" cy="50" r="47" fill="none" stroke-width="6" stroke-dasharray="{{ strokeDashArray }}" stroke-dashoffset="{{ strokeDashOffset }}" />
         </svg>
-        <div class="umb-tour__values umb-tour__values--{{ fontSize }}"> {{ percentage }}%</div>
+        <div class="umb-progress-circle__percentage umb-progress-circle__percentage--{{ fontSize }}"> {{ percentage }}%</div>
     </div>
 </div>
\ No newline at end of file

From b7c3fb7f30f50a4ea0acafadb231bcabf7598f89 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 26 Oct 2017 12:49:36 +0200
Subject: [PATCH 04/18] set text position in progress circle with css instead
 of js

---
 .../components/umbprogresscircle.directive.js      |  7 +++----
 .../src/less/components/umb-progress-circle.less   |  5 ++++-
 .../src/views/components/umb-progress-circle.html  | 14 ++++++--------
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js
index 8cc7300401..00c704fe23 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js
@@ -40,12 +40,11 @@ Use this directive to render a circular progressbar.
             
             function onInit() {
 
-
                 // centering text for all sizes
-                var text = element.find(".umb-progress-circle__percentage");
+                //var text = element.find(".umb-progress-circle__percentage");
                 
-                text.css({ "line-height": scope.size + "px" });
-                console.log("this is the size:", scope.size);
+                //text.css({ "line-height": scope.size + "px" });
+                //console.log("this is the size:", scope.size);
                             
                 // making sure we get the right numbers
                 var percent = scope.percentage;
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less
index f9d9b134fe..ef799ca77e 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less
@@ -1,5 +1,8 @@
-.umb-progress-circle__container {
+.umb-progress-circle {
     position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .umb-progress-circle__view-box {
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html
index 74aaf52599..bc690dc843 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html
@@ -1,9 +1,7 @@
-<div>
-    <div class="umb-progress-circle__container" ng-style="{'width': size, 'height': size }">                    
-        <svg class="umb-progress-circle__view-box" viewBox="0 0 100 100">
-            <circle class="umb-progress-circle__bg" cx="50" cy="50" r="47" fill="none" stroke-width="6"/>
-            <circle class="umb-progress-circle__highlight umb-progress-circle__highlight--{{ strokeColor }}" cx="50" cy="50" r="47" fill="none" stroke-width="6" stroke-dasharray="{{ strokeDashArray }}" stroke-dashoffset="{{ strokeDashOffset }}" />
-        </svg>
-        <div class="umb-progress-circle__percentage umb-progress-circle__percentage--{{ fontSize }}"> {{ percentage }}%</div>
-    </div>
+<div class="umb-progress-circle" ng-style="{'width': size, 'height': size }">                    
+    <svg class="umb-progress-circle__view-box" viewBox="0 0 100 100">
+        <circle class="umb-progress-circle__bg" cx="50" cy="50" r="47" fill="none" stroke-width="6"/>
+        <circle class="umb-progress-circle__highlight umb-progress-circle__highlight--{{ strokeColor }}" cx="50" cy="50" r="47" fill="none" stroke-width="6" stroke-dasharray="{{ strokeDashArray }}" stroke-dashoffset="{{ strokeDashOffset }}" />
+    </svg>
+    <div class="umb-progress-circle__percentage umb-progress-circle__percentage--{{ fontSize }}"> {{ percentage }}%</div>
 </div>
\ No newline at end of file

From 6aac216763adcde4035b25f842b058a42b5c305d Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 26 Oct 2017 12:50:46 +0200
Subject: [PATCH 05/18] update tour list when one is completed

---
 .../src/views/common/drawers/help/help.controller.js      | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.controller.js
index dd3766685f..45ac88f3a5 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.controller.js
@@ -136,10 +136,12 @@
                 });
                 group.completedPercentage = Math.round((completedTours/group.length)*100);
             });
-
         }
 
-        oninit();
+        evts.push(eventsService.on("appState.tour.complete", function () {
+            vm.tours = tourService.getGroupedTours();
+            getTourGroupCompletedPercentage();
+        }));
            
         $scope.$on('$destroy', function () {
             for (var e in evts) {
@@ -147,6 +149,8 @@
             }
         });
 
+        oninit();
+
     }
 
     angular.module("umbraco").controller("Umbraco.Drawers.Help", HelpDrawerController);

From 86d8eae984d0de6a9c0b32efd86fecfc23fce498 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 26 Oct 2017 12:53:23 +0200
Subject: [PATCH 06/18] remove unused code

---
 .../directives/components/umbprogresscircle.directive.js    | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js
index 00c704fe23..22e6b9dd77 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js
@@ -39,12 +39,6 @@ Use this directive to render a circular progressbar.
         function link(scope, element, $filter) {
             
             function onInit() {
-
-                // centering text for all sizes
-                //var text = element.find(".umb-progress-circle__percentage");
-                
-                //text.css({ "line-height": scope.size + "px" });
-                //console.log("this is the size:", scope.size);
                             
                 // making sure we get the right numbers
                 var percent = scope.percentage;

From 87c311d6e7ff39000b167a6400c0589a0753a1c3 Mon Sep 17 00:00:00 2001
From: Zsolt <zla@umbraco.com>
Date: Thu, 26 Oct 2017 12:58:36 +0200
Subject: [PATCH 07/18] Fixing the hover on the groups

---
 .../src/less/components/application/umb-drawer.less           | 4 ++++
 .../src/views/common/drawers/help/help.html                   | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less
index 5d44ed5de4..0fae291e72 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less
@@ -187,4 +187,8 @@
     font-size: 14px;
     color: @gray-6;
     margin-left: auto;
+}
+
+.umb-help-list-item:hover .umb-help-list-item__group-title {
+    text-decoration: underline;
 }
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
index 272c740a24..b6a73dfcdf 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
@@ -16,8 +16,8 @@
 
                 <div class="umb-help-list">
 
-                    <a href="" class="umb-help-list-item flex items-center justify-between" style="padding: 5px 20px;" ng-click="value.open = !value.open">
-                        <h5><i style="margin-right: 2px;" ng-class="{'icon-navigation-right': !value.open, 'icon-navigation-down': value.open}"></i>{{key}}</h5>
+                    <a href="" class="umb-help-list-item flex items-center justify-between" style="padding: 5px 20px;text-decoration: none;" ng-click="value.open = !value.open">
+                        <h5 class="umb-help-list-item__group-title"><i style="margin-right: 2px;text-decoration: none;" ng-class="{'icon-navigation-right': !value.open, 'icon-navigation-down': value.open}"></i>{{key}}</h5>
                         <umb-progress-circle
                             percentage="{{value.completedPercentage}}"
                             size="40"

From 90482528262c8e90c57754f39280fe7732fc8497 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 26 Oct 2017 14:20:11 +0200
Subject: [PATCH 08/18] make start tour button green

---
 .../src/views/common/drawers/help/help.html                    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
index b6a73dfcdf..ab041c4d57 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
@@ -32,7 +32,8 @@
                                 <div style="margin-right: 6px;" ng-if="!tour.completed" class="umb-number-badge umb-number-badge--xs">{{ $index + 1 }}</div>
                                 <umb-checkmark ng-if="tour.completed" size="xs" checked="tour.completed" style="margin-right: 6px;"></umb-checkmark>
                                 <span ng-class="{'strike': tour.completed}">{{ tour.name }}</span>
-                                <umb-button ng-if="tour.completed || vm.showTourButton($index, value)" size="xxs" type="button" label="start" style="margin-left: auto;" action="vm.startTour(tour)"></umb-button>
+                                <umb-button ng-if="!tour.completed && vm.showTourButton($index, value)" button-style="primary" size="xxs" type="button" label="Start" style="margin-left: auto;" action="vm.startTour(tour)"></umb-button>                                
+                                <umb-button ng-if="tour.completed" size="xxs" type="button" label="Rerun" style="margin-left: auto;" action="vm.startTour(tour)"></umb-button>
                             </div>
                         </div>
                     </div>

From ae8cfb2b23a9e9250469766eddf0d76a1b606684 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 26 Oct 2017 15:35:46 +0200
Subject: [PATCH 09/18] add getCurrentTour to tour.service

---
 .../src/common/services/tour.service.js                | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
index 01c780b22b..d345af4128 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
@@ -4,6 +4,7 @@
     function tourService(eventsService, localStorageService) {
 
         var localStorageKey = "umbTours";
+        var currentTour = null;
 
         var tours = [
             {
@@ -401,15 +402,23 @@
 
         function startTour(tour) {
             eventsService.emit("appState.tour.start", tour);
+            currentTour = tour;
         }
 
         function endTour() {
+            currentTour = null;
             eventsService.emit("appState.tour.end");
+            currentTour = null;
         }
 
         function completeTour(tour) {
             saveInLocalStorage(tour);
             eventsService.emit("appState.tour.complete", tour);
+            currentTour = null;
+        }
+
+        function getCurrentTour() {
+            return currentTour;
         }
         
         function getAllTours() {
@@ -489,6 +498,7 @@
             startTour: startTour,
             endTour: endTour,
             completeTour: completeTour,
+            getCurrentTour: getCurrentTour,
             getAllTours: getAllTours,
             getGroupedTours: getGroupedTours,
             getTourByAlias: getTourByAlias,

From 507517c1ad6ac44839af95931bd6e425326999ff Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 26 Oct 2017 15:36:18 +0200
Subject: [PATCH 10/18] add data-elements to help drawer

---
 .../src/views/common/drawers/help/help.html   | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
index ab041c4d57..75ad97db83 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
@@ -8,8 +8,8 @@
     <umb-drawer-content>
 
         <!-- Tours -->
+        <div data-element="help-tours" style="margin-bottom: 20px;">
 
-        <div style="margin-bottom: 20px;">
             <h5 style="margin-bottom: 10px; margin-top: 0;">Tours</h5>
             
             <div ng-repeat="(key,value) in vm.tours" style="margin-bottom: 5px;">
@@ -27,7 +27,7 @@
                     </a>
 
                     <div ng-if="value.open">
-                        <div class="umb-help-list-item" ng-repeat="tour in value">
+                        <div data-element="tour-{{tour.alias}}" class="umb-help-list-item" ng-repeat="tour in value">
                             <div class="umb-help-list-item__content">
                                 <div style="margin-right: 6px;" ng-if="!tour.completed" class="umb-number-badge umb-number-badge--xs">{{ $index + 1 }}</div>
                                 <umb-checkmark ng-if="tour.completed" size="xs" checked="tour.completed" style="margin-right: 6px;"></umb-checkmark>
@@ -44,7 +44,7 @@
 
 
         <!-- Show in custom help dashboard -->
-        <div style="margin-bottom: 20px;" ng-if="vm.customDashboard.length > 0">
+        <div data-element="help-custom-dashboard" style="margin-bottom: 20px;" ng-if="vm.customDashboard.length > 0">
             <div ng-repeat="tab in vm.customDashboard">
                 <div ng-repeat="property in tab.properties">
                     <div>
@@ -56,11 +56,11 @@
         </div>
 
         <!--  Help Content -->
-        <div style="margin-bottom: 20px;" ng-if="vm.topics.length > 0">
+        <div data-element="help-articles" style="margin-bottom: 20px;" ng-if="vm.topics.length > 0">
             <h5 style="margin-bottom: 10px; margin-top: 0;">Articles</h5>
             <ul class="umb-help-list">
                 <li class="umb-help-list-item" ng-repeat="topic in vm.topics track by $index">
-                    <a target="_blank" ng-href="{{topic.url}}?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
+                    <a data-element="help-article-{{topic.name}}" target="_blank" ng-href="{{topic.url}}?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
                         <span>
                             <span class="umb-help-list-item__title">
                                 <span class="bold">{{topic.name}}</span>
@@ -74,11 +74,11 @@
         </div>
 
         <!--  Umbraco tv content -->
-        <div style="margin-bottom: 20px;">
+        <div data-element="help-videos" style="margin-bottom: 20px;">
             <h5 style="margin-bottom: 10px; margin-top: 0;" ng-if="vm.videos.length > 0">Videos</h5>
             <ul class="umb-help-list">
                 <li class="umb-help-list-item" ng-repeat="video in vm.videos track by $index">
-                    <a target="_blank" ng-href="{{video.link}}?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
+                    <a data-element="help-article-{{video.title}}" target="_blank" ng-href="{{video.link}}?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
                         <i class="umb-help-list-item__icon icon-tv-old"></i>
                         <span class="umb-help-list-item__title">{{video.title}}</span>
                         <i class="umb-help-list-item__open-icon icon-out"></i>
@@ -88,8 +88,8 @@
         </div>
 
         <!--  Links -->
-        <div>
-            <a class="umb-help-badge" style="margin-bottom: 5px;" target="_blank" href="http://umbraco.tv?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
+        <div data-element="help-links">
+            <a data-element="help-link-umbraco-tv" class="umb-help-badge" style="margin-bottom: 5px;" target="_blank" href="http://umbraco.tv?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
                 <i class="umb-help-badge__icon icon-tv-old"></i>
                 <div class="umb-help-badge__title">Visit umbraco.tv</div>
                 <small>
@@ -97,7 +97,7 @@
                 </small>
             </a>
 
-            <a class="umb-help-badge" style="margin-bottom: 5px;" target="_blank" href="http://our.umbraco.org?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=our">
+            <a data-element="help-link-our-umbraco" class="umb-help-badge" style="margin-bottom: 5px;" target="_blank" href="http://our.umbraco.org?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=our">
                 <i class="umb-help-badge__icon icon-favorite"></i>
                 <div class="umb-help-badge__title">Visit our.umbraco.org</div>
                 <small>
@@ -112,6 +112,7 @@
 
         <div class="flex justify-end">
             <umb-button
+                alias="close"
                 type="button"
                 button-style="link"
                 label="Close"

From f687b34c141e46bde15ad9825a709bab84c1759a Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 26 Oct 2017 15:36:45 +0200
Subject: [PATCH 11/18] add data elements to editor content

---
 .../src/views/components/editor/umb-editor-container.html       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-container.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-container.html
index 44ced2e100..119713651e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-container.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-container.html
@@ -1,4 +1,4 @@
- <div class="umb-editor-container umb-panel-body umb-scrollable row-fluid" ng-class="{'-stop-scrolling': numberOfOverlays > 0}">
+ <div data-element="editor-content" class="umb-editor-container umb-panel-body umb-scrollable row-fluid" ng-class="{'-stop-scrolling': numberOfOverlays > 0}">
      <umb-overlay-backdrop></umb-overlay-backdrop>
      <div class="umb-pane">
         <div ng-transclude></div>

From 55d4e4072acd92e1e26fb2834ac5183bf3707127 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 26 Oct 2017 15:39:56 +0200
Subject: [PATCH 12/18] add steps for dashboard and tours

---
 .../src/common/services/tour.service.js              | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
index d345af4128..1e25703377 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
@@ -24,12 +24,19 @@
                         content: "These are the <b>Sections</b> and allows you to navigate the different areas of Umbraco.",
                         backdropOpacity: 0.6
                     },
+                    
                     {
                         element: "#tree",
                         elementPreventClick: true,
                         title: "The Tree",
                         content: "This is the <b>Tree</b> and will contain all the content of your website."
                     },
+                    {
+                        element: "[data-element='editor-content']",
+                        elementPreventClick: true,
+                        title: "Dashboards",
+                        content: "A dashboard is the main view you are presented with when entering a section within the backoffice, and can be used to show valuable information to the users of the system."
+                    },
                     {
                         element: "[data-element='global-search-field']",
                         title: "Search",
@@ -67,6 +74,11 @@
                         title: "Help",
                         content: "<p>In the help drawer you will find articles and videos related to the section you are using.</p><p>This is also where you will find the next tour on how to get started with Umbraco.</p>",
                         backdropOpacity: 0.6
+                    },
+                    {
+                        element: "[data-element='drawer'] [data-element='help-tours']",
+                        title: "Tours",
+                        content: "To continue your journey on getting started with Umbraco, you can find more tours right here."
                     }
                 ]
             },

From 493d71dba928f9545cc93e07793e40cbd0cc8dc1 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 26 Oct 2017 15:41:43 +0200
Subject: [PATCH 13/18] open matching tour group if a tour is running

---
 .../common/drawers/help/help.controller.js    | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.controller.js
index 45ac88f3a5..b4773cdaad 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.controller.js
@@ -53,6 +53,13 @@
             });
 
             getTourGroupCompletedPercentage();
+            
+            // check if a tour is running - if it is open the matching group
+            var currentTour = tourService.getCurrentTour();
+
+            if (currentTour) {
+                openTourGroup(currentTour.alias);
+            }
 
         }
 
@@ -125,6 +132,16 @@
             }
         }
 
+        function openTourGroup(tourAlias) {
+            angular.forEach(vm.tours, function (group) {
+                angular.forEach(group, function (tour) {
+                    if (tour.alias === tourAlias) {
+                        group.open = true;
+                    }
+                });
+            });
+        }
+
         function getTourGroupCompletedPercentage() {
             // Finding out, how many tours are completed for the progress circle
             angular.forEach(vm.tours, function(group){
@@ -138,8 +155,9 @@
             });
         }
 
-        evts.push(eventsService.on("appState.tour.complete", function () {
+        evts.push(eventsService.on("appState.tour.complete", function (event, tour) {
             vm.tours = tourService.getGroupedTours();
+            openTourGroup(tour.alias);
             getTourGroupCompletedPercentage();
         }));
            

From 7a9b392f69406e95266ca737b12b95af32993227 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 26 Oct 2017 15:57:00 +0200
Subject: [PATCH 14/18] add validation to document type tab name

---
 .../src/common/services/tour.service.js       |  5 ++--
 .../tabname/tabname.controller.js             | 24 +++++++++++++++
 .../tabname/tabname.html                      | 30 +++++++++++++++++++
 .../views/components/umb-groups-builder.html  |  3 +-
 4 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/tabname/tabname.controller.js
 create mode 100644 src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/tabname/tabname.html

diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
index 1e25703377..9dea7d74a8 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
@@ -130,9 +130,10 @@
                         event: "click"
                     },
                     {
-                        element: "[data-element='group-name']",
+                        element: "[data-element='group-name-field']",
                         title: "Enter a name",
-                        content: "Enter <code>Content</code> in the tab name."
+                        content: "Enter <code>Content</code> in the tab name.",
+                        view: "tabName"
                     },
                     {
                         element: "[data-element='property-add']",
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/tabname/tabname.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/tabname/tabname.controller.js
new file mode 100644
index 0000000000..04081065e6
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/tabname/tabname.controller.js
@@ -0,0 +1,24 @@
+(function () {
+    "use strict";
+
+    function TabNameController($scope) {
+        
+        var vm = this;
+        var element = angular.element($scope.model.currentStep.element);
+
+        vm.error = false;
+        
+        vm.initNextStep = initNextStep;
+
+        function initNextStep() {
+            if(element.val() === 'Content') {
+                $scope.model.nextStep();
+            } else {
+                vm.error = true;
+            }
+        }
+
+    }
+
+    angular.module("umbraco").controller("Umbraco.Tours.UmbIntroCreateDocType.TabNameController", TabNameController);
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/tabname/tabname.html b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/tabname/tabname.html
new file mode 100644
index 0000000000..fff4f9e554
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/tabname/tabname.html
@@ -0,0 +1,30 @@
+<div ng-controller="Umbraco.Tours.UmbIntroCreateDocType.TabNameController as vm">
+
+    <umb-tour-step>
+            
+        <umb-tour-step-header
+            title="model.currentStep.title">
+        </umb-tour-step-header>
+        
+        <umb-tour-step-content
+            content="model.currentStep.content">
+            <div ng-if="vm.error" class="color-red" style="margin-top: 5px;">Please enter <b>Content</b> in the field</div>
+        </umb-tour-step-content>
+
+        <umb-tour-step-footer class="flex justify-between items-center">
+
+            <umb-tour-step-counter
+                current-step="model.currentStepIndex + 1"
+                total-steps="model.steps.length">
+            </umb-tour-step-counter>
+
+            <div>
+                <umb-button size="xs" button-style="link" type="button" action="model.endTour()" label="End tour"></umb-button>
+                <umb-button size="xs" button-style="success" type="button" action="vm.initNextStep()" label="Next"></umb-button>
+            </div>
+
+        </umb-tour-step-footer>
+
+    </umb-tour-step>
+
+</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
index edfaa838b0..bb252e8a65 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
@@ -66,7 +66,8 @@
                     <ng-form name="groupNameForm" data-element="group-name">
                         <div class="umb-group-builder__group-title control-group -no-margin" ng-class="{'-active':tab.tabState=='active', '-inherited': tab.inherited}">
                             <i class="umb-group-builder__group-title-icon icon-navigation" ng-if="sortingMode && !tab.inherited"></i>
-                            <input class="umb-group-builder__group-title-input"
+                            <input data-element="group-name-field"
+                                   class="umb-group-builder__group-title-input"
                                    type="text"
                                    localize="placeholder"
                                    placeholder="@placeholders_entername"

From ae10f3d21f72a84fca3e8b8f9aad7f11f77a6e93 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 26 Oct 2017 20:10:22 +0200
Subject: [PATCH 15/18] calculate progress circle font size instead of manually
 setting it + align colors

---
 .../components/umbprogresscircle.directive.js | 25 +++++-------
 .../less/components/umb-progress-circle.less  | 40 ++++++-------------
 .../src/views/common/drawers/help/help.html   |  4 +-
 .../views/components/umb-progress-circle.html |  6 +--
 4 files changed, 26 insertions(+), 49 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js
index 22e6b9dd77..ad79cb2e3b 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js
@@ -9,28 +9,22 @@ Use this directive to render a circular progressbar.
 
 <h3>Markup example</h3>
 <pre>
-	<div ng-controller="My.Controller as vm">
-
+    <div>
+    
         <umb-progress-circle
             percentage="80"
             size="60"
-            font-size="m"
-            stroke-color="green">
+            color="secondary">
         </umb-progress-circle>
 
 	</div>
 </pre>
 
-
 @param {string} size (<code>attribute</code>): This parameter defines the width and the height of the circle in pixels.
 @param {string} percentage (<code>attribute</code>): Takes a number between 0 and 100 and applies it to the circle's highlight length.
-@param {string} strokeColor (<code>attribute</code>): the color of the highlight (green, purple, red, yellow). Green by default. 
-@param {string} fontSize (<code>attribute</code>): Defines the size of the number in the center (xs, s, m, l, xl)
+@param {string} color (<code>attribute</code>): the color of the highlight (primary, secondary, success, warning, danger). Success by default. 
 **/
 
-
-
-
 (function (){
     'use strict';
 
@@ -44,10 +38,10 @@ Use this directive to render a circular progressbar.
                 var percent = scope.percentage;
 
                 if (percent > 100) {
-                    percent = 100
+                    percent = 100;
                 }
                 else if (percent < 0) {
-                    percent = 0
+                    percent = 0;
                 }
 
                 // calculating the circle's highlight
@@ -63,7 +57,9 @@ Use this directive to render a circular progressbar.
 
                 // Distance for the highlight dash's offset
                 scope.strokeDashOffset = strokeDashOffset;
-                var coloring = circle.attr('stroke');
+
+                // set font size
+                scope.percentageSize = (scope.size * 0.3) + "px";
 
             }
 
@@ -78,8 +74,7 @@ Use this directive to render a circular progressbar.
             scope: {
                 size: "@?",
                 percentage: "@",
-                strokeColor: "@",
-                fontSize: "@"
+                color: "@"
             },
             link: link
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less
index ef799ca77e..e7c669054e 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less
@@ -19,20 +19,24 @@
     stroke: @green;
 }
 
-.umb-progress-circle__highlight--green {
+.umb-progress-circle__highlight--primary {
+    stroke: @turquoise;
+}
+
+.umb-progress-circle__highlight--secondary {
+    stroke: @purple;
+}
+
+.umb-progress-circle__highlight--success {
     stroke: @green;
 }
 
-.umb-progress-circle__highlight--red {
-    stroke: @red;
-}
-
-.umb-progress-circle__highlight--yellow {
+.umb-progress-circle__highlight--warning {
     stroke: @yellow;
 }
 
-.umb-progress-circle__highlight--purple {
-    stroke: @purple;
+.umb-progress-circle__highlight--danger {
+    stroke: @red;
 }
 
 // circle progressbar bg
@@ -46,23 +50,3 @@
     font-weight: 700;
     text-align: center;
 }
-
-.umb-progress-circle__percentage--xs{
-    font-size: 12px;
-}
-
-.umb-progress-circle__percentage--s{
-    font-size: 14px;
-}
-
-.umb-progress-circle__percentage--m{
-    font-size: 16px;
-}
-
-.umb-progress-circle__percentage--l{
-    font-size: 18px;
-}
-
-.umb-progress-circle__percentage--xl{
-    font-size: 20px;
-}
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
index 75ad97db83..b26486af73 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
@@ -20,9 +20,7 @@
                         <h5 class="umb-help-list-item__group-title"><i style="margin-right: 2px;text-decoration: none;" ng-class="{'icon-navigation-right': !value.open, 'icon-navigation-down': value.open}"></i>{{key}}</h5>
                         <umb-progress-circle
                             percentage="{{value.completedPercentage}}"
-                            size="40"
-                            font-size="xs"
-                            stroke-color="">
+                            size="40">
                         </umb-progress-circle>
                     </a>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html
index bc690dc843..9c23d2e89c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html
@@ -1,7 +1,7 @@
-<div class="umb-progress-circle" ng-style="{'width': size, 'height': size }">                    
+<div class="umb-progress-circle" ng-style="{'width': size, 'height': size }">
     <svg class="umb-progress-circle__view-box" viewBox="0 0 100 100">
         <circle class="umb-progress-circle__bg" cx="50" cy="50" r="47" fill="none" stroke-width="6"/>
-        <circle class="umb-progress-circle__highlight umb-progress-circle__highlight--{{ strokeColor }}" cx="50" cy="50" r="47" fill="none" stroke-width="6" stroke-dasharray="{{ strokeDashArray }}" stroke-dashoffset="{{ strokeDashOffset }}" />
+        <circle class="umb-progress-circle__highlight umb-progress-circle__highlight--{{ color }}" cx="50" cy="50" r="47" fill="none" stroke-width="6" stroke-dasharray="{{ strokeDashArray }}" stroke-dashoffset="{{ strokeDashOffset }}" />
     </svg>
-    <div class="umb-progress-circle__percentage umb-progress-circle__percentage--{{ fontSize }}"> {{ percentage }}%</div>
+    <div ng-style="{'font-size': percentageSize}" class="umb-progress-circle__percentage">{{ percentage }}%</div>
 </div>
\ No newline at end of file

From 2e611c20d48ca26289a32f22c2f607fa81a5cfc3 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 26 Oct 2017 20:35:04 +0200
Subject: [PATCH 16/18] fix text positioning in Firefox

---
 .../src/less/components/umb-progress-circle.less             | 5 +----
 .../src/views/components/umb-progress-circle.html            | 2 +-
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less
index e7c669054e..348d7bb5db 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less
@@ -1,8 +1,5 @@
 .umb-progress-circle {
     position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
 }
 
 .umb-progress-circle__view-box {
@@ -47,6 +44,6 @@
 // the text in the center
 .umb-progress-circle__percentage {
     font-size: 16px;
-    font-weight: 700;
+    font-weight: bold;
     text-align: center;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html
index 9c23d2e89c..3864042e9f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html
@@ -1,4 +1,4 @@
-<div class="umb-progress-circle" ng-style="{'width': size, 'height': size }">
+<div class="umb-progress-circle" ng-style="{'width': size, 'height': size, 'line-height': size + 'px' }">
     <svg class="umb-progress-circle__view-box" viewBox="0 0 100 100">
         <circle class="umb-progress-circle__bg" cx="50" cy="50" r="47" fill="none" stroke-width="6"/>
         <circle class="umb-progress-circle__highlight umb-progress-circle__highlight--{{ color }}" cx="50" cy="50" r="47" fill="none" stroke-width="6" stroke-dasharray="{{ strokeDashArray }}" stroke-dashoffset="{{ strokeDashOffset }}" />

From 92d52bf99be3bec9ae8da2390b00e1cadab7bbdd Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 26 Oct 2017 21:14:22 +0200
Subject: [PATCH 17/18] clean up list + remove unused files

---
 .../components/umbdropdownblock.directive.js  | 78 ----------------
 .../umbdropdownblockitem.directive.js         | 81 ----------------
 src/Umbraco.Web.UI.Client/src/less/belle.less |  1 -
 .../less/components/buttons/umb-button.less   |  2 +-
 .../less/components/umb-dropdown-block.less   | 92 -------------------
 .../src/views/common/drawers/help/help.html   | 18 ++--
 .../components/umb-dropdown-block-item.html   | 16 ----
 .../views/components/umb-dropdown-block.html  | 20 ----
 8 files changed, 12 insertions(+), 296 deletions(-)
 delete mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdownblock.directive.js
 delete mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdownblockitem.directive.js
 delete mode 100644 src/Umbraco.Web.UI.Client/src/less/components/umb-dropdown-block.less
 delete mode 100644 src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown-block-item.html
 delete mode 100644 src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown-block.html

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdownblock.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdownblock.directive.js
deleted file mode 100644
index 252c036342..0000000000
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdownblock.directive.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
-@ngdoc directive
-@name umbraco.directives.directive:umbDropdownBlock
-@restrict E
-@scope
-
-@description
-Use this directive to render a dropdown object.
-
-<h3>Markup example</h3>
-<pre>
-    <div ng-controller="My.Controller as vm">
-
-        <umb-dropdown-block title="This is the title" circle="true" percentage="100">
-            // Content of dropdown
-        </umb-dropdown-block>
-
-    </div>
-</pre>
-
-<h3>Example with {@link umbraco.directives.directive:umbDropdownBlockItem umbDropdownBlockItem}</h3>
-<pre>
-    <div ng-controller="My.Controller as vm">
-
-        <umb-dropdown-block
-            ng-repeat="(key,value) in vm.items"
-            title="key"
-            circle="true" 
-            percentage="100">
-
-                <umb-dropdown-block-item
-                    on-start="vm.toggle()"
-                    tick="true"
-                    name="title"
-                    completed="true"
-                    ng-repeat="item in value">
-                </umb-dropdown-block-item>
-
-        </umb-dropdown-block>
-
-    </div>
-</pre>
-
-<h3>Use in combination with:</h3>
-<ul>
-    <li>{@link umbraco.directives.directive:umbDropdownBlockItem umbDropdownBlockItem}</li>
-</ul>
-
-@param {string} title (<code>attrbute</code>): Custom title text.
-@param {boolean} circle (<code>attrbute</code>): Decides, if the progress circle is displayed or not.
-@param {string} percentage (<code>attrbute</code>): A number which defines the progress circle.
-**/
-
-
-(function () {
-    'use strict';
-
-    function DropdownBlockDirective(tourService) {
-
-        var directive = {
-            restrict: 'E',
-            replace: true,
-            transclude: true,
-            templateUrl: 'views/components/umb-dropdown-block.html',
-            scope: {
-                circle: "=",
-                title: "=",
-                percentage: "@"
-            }
-        };
-
-        return directive;
-    
-    }
-
-    angular.module('umbraco.directives').directive('umbDropdownBlock', DropdownBlockDirective);
-
-})();
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdownblockitem.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdownblockitem.directive.js
deleted file mode 100644
index 98041531de..0000000000
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdownblockitem.directive.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
-@ngdoc directive
-@name umbraco.directives.directive:umbDropdownBlockItem
-@restrict E
-@scope
-
-@description
-Use this directive to render a list for the {@link umbraco.directives.directive:umbDropdownBlock umbDropdownBlock} directive. See documentation for {@link umbraco.directives.directive:umbDropdownBlock umbDropdownBlock} component.
-
-<h3>Markup example</h3>
-
-<pre>
-    <div ng-controller="My.Controller as vm">
-
-        <umb-dropdown-block
-            ng-repeat="(key,value) in vm.items"
-            title="key"
-            circle="true" 
-            percentage="100">
-
-                <umb-dropdown-block-item
-                    ng-repeat="item in value"                
-                    name="title"
-                    completed="true"
-                    tick="true"
-                    on-start="vm.toggle()">
-                </umb-dropdown-block-item>
-
-        </umb-dropdown-block>
-
-    </div>
-</pre>
-
-<h3>Use in combination with:</h3>
-<ul>
-    <li>{@link umbraco.directives.directive:umbDropdownBlock umbDropdownBlock}</li>
-</ul>
-
-@param {string} name (<code>attrbute</code>): Custom text.
-@param {callback} onStart (<code>attrbute</code>): Defines what happens when the row is clicked.
-@param {boolean} completed (<code>attrbute</code>): Decides, if the tick is gray or green.
-@param {boolean} tick (<code>attrbute</code>): Decides, if the tick is displayed or not.
-**/
-
-
-(function () {
-    'use strict';
-
-    function DropdownBlockItemDirective() {
-
-        function link(scope, el, attr, ctrl) {
-
-            scope.clickStart = function() {
-                if(scope.onStart) {
-                    scope.onStart();
-                }
-            };
-      
-        }
-
-        var directive = {
-            restrict: 'E',
-            replace: true,
-            transclude: true,
-            templateUrl: 'views/components/umb-dropdown-block-item.html',
-            scope: {
-                name: "@",
-                tick: "=",
-                onStart: "&",
-                completed: "@"
-            },
-            link: link
-        };
-
-        return directive;
-    
-    }
-
-    angular.module('umbraco.directives').directive('umbDropdownBlockItem', DropdownBlockItemDirective);
-
-})();
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index 320590098d..6232522611 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -131,7 +131,6 @@
 @import "components/umb-box.less";
 @import "components/umb-number-badge.less";
 @import "components/umb-progress-circle.less";
-@import "components/umb-dropdown-block.less";
 
 @import "components/buttons/umb-button.less";
 @import "components/buttons/umb-button-group.less";
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
index da0d79a999..ab8b6b0671 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
@@ -100,7 +100,7 @@
 
 /* Sizes */
 .umb-button--xxs {
-    padding: 3px 12px;
+    padding: 2px 10px;
     font-size: 13px;
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-dropdown-block.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-dropdown-block.less
deleted file mode 100644
index 1ea8ac8642..0000000000
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-dropdown-block.less
+++ /dev/null
@@ -1,92 +0,0 @@
-.umb-tour__progress-circle-container {
-    width: 50px;
-    height: 50px;
-    float: right;
-    margin: 5px;
-}
-
-.umb-tour__dropdown-title {
-    font-size: 18px;
-    font-weight: 700;
-    color: @gray-2;
-}
-
-.umb-tour__dropdown-contaiener {
-    background-color: @white;
-    width: 340px;
-    border-radius: 3px;
-    margin-bottom: 10px; 
-}
-
-.umb-tour__dropdown-contaiener summary{
-    line-height: 60px;
-}
-
-.umb-tour__dropdown-contaiener summary:focus{
-    outline: none;
-}
-
-.umb-tour__dropdown-contaiener summary::-webkit-details-marker {
-    color: @gray-2;
-    margin: 0 20px 0 30px; 
-}
-
-.umb-tour__dropdown-contaiener summary::-moz-list-bullet {
-    color: @gray-2;
-    margin: 0 20px 0 30px; 
-}
-
-.umb-tour__dropdown-list {
-    border-top: solid @gray-10 1px;
-    width: 340px;
-    padding: 10px 0;
-}
-
-.umb-tour__start {
-    float: right;
-}
-
-.umb-tour__row {
-    padding: 0 20px;
-    line-height: 40px;
-}
-
-.umb-tour__row:hover {
-    background-color: @gray-10;
-}
-
-.umb-tour__tick-circle {
-    width: 26px;
-    height: 26px;
-    margin: 7px 20px 0 0;
-    border-radius: 50%;
-    float: left;
-}
-
-.umb-tour__row-title-container {
-    display: flex;
-    justify-content: space-between;
-}
-
-.umb-tour__row-title {
-    font-size: 16px;
-    color: @gray-4;
-}
-
-.umb-tour__row-button {
-    visibility: hidden;
-}
-
-.umb-tour__row:hover .umb-tour__row-button {
-    visibility: visible;
-}
-
-.umb-tour__tick {
-    fill: #FFFFFF;
-}
-
-.umb-tour__tick-canvas {
-    height: 16px;
-    width: 16px;
-    margin: 5px;
-}
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
index b26486af73..3a6376e1dd 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
@@ -16,7 +16,7 @@
 
                 <div class="umb-help-list">
 
-                    <a href="" class="umb-help-list-item flex items-center justify-between" style="padding: 5px 20px;text-decoration: none;" ng-click="value.open = !value.open">
+                    <a href="" class="umb-help-list-item__content flex items-center justify-between" style="text-decoration: none;" ng-click="value.open = !value.open">
                         <h5 class="umb-help-list-item__group-title"><i style="margin-right: 2px;text-decoration: none;" ng-class="{'icon-navigation-right': !value.open, 'icon-navigation-down': value.open}"></i>{{key}}</h5>
                         <umb-progress-circle
                             percentage="{{value.completedPercentage}}"
@@ -26,12 +26,16 @@
 
                     <div ng-if="value.open">
                         <div data-element="tour-{{tour.alias}}" class="umb-help-list-item" ng-repeat="tour in value">
-                            <div class="umb-help-list-item__content">
-                                <div style="margin-right: 6px;" ng-if="!tour.completed" class="umb-number-badge umb-number-badge--xs">{{ $index + 1 }}</div>
-                                <umb-checkmark ng-if="tour.completed" size="xs" checked="tour.completed" style="margin-right: 6px;"></umb-checkmark>
-                                <span ng-class="{'strike': tour.completed}">{{ tour.name }}</span>
-                                <umb-button ng-if="!tour.completed && vm.showTourButton($index, value)" button-style="primary" size="xxs" type="button" label="Start" style="margin-left: auto;" action="vm.startTour(tour)"></umb-button>                                
-                                <umb-button ng-if="tour.completed" size="xxs" type="button" label="Rerun" style="margin-left: auto;" action="vm.startTour(tour)"></umb-button>
+                            <div class="umb-help-list-item__content justify-between">
+                                <div class="flex items-center">
+                                    <div ng-if="!tour.completed" class="umb-number-badge umb-number-badge--xs umb-help-list-item__icon">{{ $index + 1 }}</div>
+                                    <umb-checkmark ng-if="tour.completed" size="xs" checked="tour.completed" class="umb-help-list-item__icon"></umb-checkmark>
+                                    <span ng-class="{'strike': tour.completed}" class="umb-help-list-item__title">{{ tour.name }}</span>
+                                </div>
+                                <div>
+                                    <umb-button ng-if="!tour.completed && vm.showTourButton($index, value)" button-style="primary" size="xxs" type="button" label="Start" action="vm.startTour(tour)"></umb-button>                                
+                                    <umb-button ng-if="tour.completed" size="xxs" type="button" label="Rerun" action="vm.startTour(tour)"></umb-button>
+                                </div>
                             </div>
                         </div>
                     </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown-block-item.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown-block-item.html
deleted file mode 100644
index cb1a994966..0000000000
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown-block-item.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<div>
-    <div class="umb-tour__row" ng-click="onStart()">
-
-        <div ng-if="tick == true">
-            <div class="umb-tour__tick-circle">
-                <umb-checkmark ng-if="completed === 'true'" checked="true"></umb-checkmark>
-                <umb-checkmark ng-if="completed !== 'true'" checked="false"></umb-checkmark>
-            </div>
-        </div>
-
-        <div class="umb-tour__row-title-container"> 
-            <span class="umb-tour__row-title">{{ name }}</span>
-            <umb-button class="umb-tour__row-button" size="xs" button-style="link" type="button" label="start"></umb-button> 
-        </div>
-    </div>
-</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown-block.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown-block.html
deleted file mode 100644
index 243c8e164c..0000000000
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown-block.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<div>
-    <div>
-        <details class="umb-tour__dropdown-contaiener">
-            <summary>
-                <span class="umb-tour__dropdown-title">{{ title }}</span>
-                <div class="umb-tour__progress-circle-container" ng-if="circle == true">
-                    <umb-progress-circle
-                        percentage="{{ percentage }}"
-                        size="50"
-                        font-size=""
-                        stroke-color="">
-                    </umb-progress-circle>
-                </div>
-            </summary>
-            <div class="umb-tour__dropdown-list" ng-transclude>
-
-            </div>
-        </details>
-    </div>
-</div>
\ No newline at end of file

From 00a42879453c1f55fbec2cdbe189dcb20916a6b1 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 26 Oct 2017 21:24:16 +0200
Subject: [PATCH 18/18] add back class

---
 .../src/views/common/drawers/help/help.html                     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
index 3a6376e1dd..cefbe3d89e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
@@ -16,7 +16,7 @@
 
                 <div class="umb-help-list">
 
-                    <a href="" class="umb-help-list-item__content flex items-center justify-between" style="text-decoration: none;" ng-click="value.open = !value.open">
+                    <a href="" class="umb-help-list-item umb-help-list-item__content flex items-center justify-between" style="text-decoration: none;" ng-click="value.open = !value.open">
                         <h5 class="umb-help-list-item__group-title"><i style="margin-right: 2px;text-decoration: none;" ng-class="{'icon-navigation-right': !value.open, 'icon-navigation-down': value.open}"></i>{{key}}</h5>
                         <umb-progress-circle
                             percentage="{{value.completedPercentage}}"