From 6ea5374d35be9899e9d78e421fa9f83917b1d635 Mon Sep 17 00:00:00 2001
From: aripddev <dev@aripd.com>
Date: Mon, 13 Sep 2021 23:47:29 +0300
Subject: [PATCH 1/3] Update 04-cookbook.md

Added another example for progress
---
 docs-src/tutorials/04-cookbook.md | 34 +++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/docs-src/tutorials/04-cookbook.md b/docs-src/tutorials/04-cookbook.md
index ead7c2e87..698e72ca3 100644
--- a/docs-src/tutorials/04-cookbook.md
+++ b/docs-src/tutorials/04-cookbook.md
@@ -63,3 +63,37 @@ when: {
   }
 }
 ```
+
+Below is another example for anyone wants to place progress in footer. Added `shepherd-progress` className and some scss.
+
+```javascript
+when: {
+  show() {
+    const currentStepElement = shepherd.currentStep.el;
+    const footer = currentStepElement.querySelector('.shepherd-footer');
+    const progress = document.createElement('span');
+    progress.className = 'shepherd-progress';
+    progress.innerText = `${shepherd.steps.indexOf(shepherd.currentStep) + 1} of ${shepherd.steps.length}`;
+    footer.insertBefore(progress, currentStepElement.querySelector('.shepherd-button:last-child'));
+  }
+}
+```
+
+```scss
+.shepherd-footer {
+    border-bottom-left-radius:5px;
+    border-bottom-right-radius:5px;
+    padding:0 .75rem .75rem;
+    display:flex;
+    justify-content:space-between;
+    align-items: center;
+
+    .shepherd-button:last-child {
+        margin-right:0
+    }
+    
+    .shepherd-progress {
+        font-size: .8rem;
+    }
+}
+```

From 449690db602acff0ca676e9dcae5b4cb4eff7e69 Mon Sep 17 00:00:00 2001
From: Robert Wagner <rwwagner90@gmail.com>
Date: Tue, 14 Sep 2021 11:59:03 -0400
Subject: [PATCH 2/3] Update 04-cookbook.md

---
 docs-src/tutorials/04-cookbook.md | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/docs-src/tutorials/04-cookbook.md b/docs-src/tutorials/04-cookbook.md
index 698e72ca3..7144773db 100644
--- a/docs-src/tutorials/04-cookbook.md
+++ b/docs-src/tutorials/04-cookbook.md
@@ -64,7 +64,7 @@ when: {
 }
 ```
 
-Below is another example for anyone wants to place progress in footer. Added `shepherd-progress` className and some scss.
+Another example, for anyone who wants to add progress indicators to the footer. Add `shepherd-progress` className and some scss.
 
 ```javascript
 when: {
@@ -81,19 +81,19 @@ when: {
 
 ```scss
 .shepherd-footer {
-    border-bottom-left-radius:5px;
-    border-bottom-right-radius:5px;
-    padding:0 .75rem .75rem;
-    display:flex;
-    justify-content:space-between;
-    align-items: center;
-
-    .shepherd-button:last-child {
-        margin-right:0
-    }
+  align-items: center;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 .75rem .75rem;
+  
+  .shepherd-button:last-child {
+    margin-right: 0;
+  }
     
-    .shepherd-progress {
-        font-size: .8rem;
-    }
+  .shepherd-progress {
+    font-size: .8rem;
+  }
 }
 ```

From 6255ce14bdb25e218946f65082ecfa0a14d995f5 Mon Sep 17 00:00:00 2001
From: Robert Wagner <rwwagner90@gmail.com>
Date: Tue, 14 Sep 2021 11:59:51 -0400
Subject: [PATCH 3/3] Update 04-cookbook.md

---
 docs-src/tutorials/04-cookbook.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs-src/tutorials/04-cookbook.md b/docs-src/tutorials/04-cookbook.md
index 7144773db..af9990003 100644
--- a/docs-src/tutorials/04-cookbook.md
+++ b/docs-src/tutorials/04-cookbook.md
@@ -64,7 +64,7 @@ when: {
 }
 ```
 
-Another example, for anyone who wants to add progress indicators to the footer. Add `shepherd-progress` className and some scss.
+Another example, for anyone who wants to add progress indicators to the footer. Add the `shepherd-progress` className and some extra styles.
 
 ```javascript
 when: {