From fabecbb63225b68515c2a140c103f541ced64dd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andrey=20Maz=C3=A9pas?= <andreymazepas@gmail.com>
Date: Thu, 17 Dec 2020 22:53:52 -0300
Subject: [PATCH 1/3] Added status bar

---
 style.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/style.css b/style.css
index be77ea1..19b0d89 100644
--- a/style.css
+++ b/style.css
@@ -255,6 +255,20 @@ button::-moz-focus-inner {
   background-position: top 3px left 4px;
 }
 
+.status-bar {
+  margin: 0px 1px;
+  display: flex;
+  gap: 1px;
+}
+
+.status-bar-field {
+  box-shadow: inset -1px -1px  #dfdfdf, 
+    inset 1px 1px #808080;
+  flex-grow: 1;
+  padding: 2px 3px;
+  margin: 0;
+}
+
 .window-body {
   margin: var(--element-spacing);
 }

From d6c672af8891c02571ac2e95a6257241888a110c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andrey=20Maz=C3=A9pas?= <andreymazepas@gmail.com>
Date: Thu, 17 Dec 2020 22:53:58 -0300
Subject: [PATCH 2/3] Status Bar documentation

---
 docs/index.html.ejs | 42 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/docs/index.html.ejs b/docs/index.html.ejs
index 127359c..160c126 100644
--- a/docs/index.html.ejs
+++ b/docs/index.html.ejs
@@ -635,6 +635,48 @@
       </div>
     </section>
 
+    <section class="component">
+      <h4 id="status-bar">Status Bar</h4>
+      <div>
+        <blockquote>
+          A status bar is a special area within a window, typically the bottom, that displays information
+          about the current state of what is being viewed in the window or any other contextual information, such as keyboard
+          state.
+
+          <footer>
+            &mdash; Microsoft Windows User Experience p. 146
+          </footer>
+        </blockquote>
+
+        <p>
+          You can render a status bar with the <code>status-bar</code> class, 
+          and <code>status-bar-field</code> for every child text element.
+        </p>
+
+        <%- example(`
+        <div class="window" style="width: 320px">
+          <div class="title-bar">
+            <div class="title-bar-text">A Window With A Status Bar</div>
+          </div>
+          <div class="window-body">
+        <p> There are just so many possibilities:</p>
+        <ul>
+            <li>A Task Manager</li>
+            <li>A Notepad</li>
+            <li>Or even a File Explorer!</li>
+        </ul>
+          </div>
+          <div class="status-bar">
+            <p class="status-bar-field">Press F1 for help</p>
+            <p class="status-bar-field">Slide 1</p>
+            <p class="status-bar-field">CPU Usage: 14%</p>
+          </div>
+        </div>
+      `) %>
+
+       
+    </section>
+
     <section class="component">
       <h3 id="tree-view">TreeView</h3>
       <div>

From b659e4a99197da981891912624e8ccce3bcef9d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andrey=20Maz=C3=A9pas?= <andreymazepas@gmail.com>
Date: Sun, 20 Dec 2020 17:25:08 -0300
Subject: [PATCH 3/3] Adding Status Bar entry to the TreeView

---
 docs/index.html.ejs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/index.html.ejs b/docs/index.html.ejs
index 160c126..d41c8ae 100644
--- a/docs/index.html.ejs
+++ b/docs/index.html.ejs
@@ -37,6 +37,7 @@
             <ul>
               <li><a href="#title-bar">Title Bar</a></li>
               <li><a href="#window-contents">Window contents</a></li>
+              <li><a href="#status-bar">Status Bar</a></li>
             </ul>
           </li>
           <li><a href="#tree-view">TreeView</a></li>