From 5fcf41146e356b27e4b9639d87217ad2d4b53988 Mon Sep 17 00:00:00 2001
From: Juan Garay <31663056+JuanGaray93@users.noreply.github.com>
Date: Sun, 17 May 2020 16:15:53 -0300
Subject: [PATCH] Add title-bar restore icon (#83)

---
 docs/index.html.ejs | 19 +++++++++++++++----
 icon/restore.svg    | 10 ++++++++++
 style.css           |  6 ++++++
 3 files changed, 31 insertions(+), 4 deletions(-)
 create mode 100644 icon/restore.svg

diff --git a/docs/index.html.ejs b/docs/index.html.ejs
index bcc8872..96bd805 100644
--- a/docs/index.html.ejs
+++ b/docs/index.html.ejs
@@ -532,9 +532,9 @@
         <p>
           We make use of <code>aria-label</code> to render the Close button, to let
           assistive technologies know the intent of this button. You may also use
-          "Minimize" and "Maximize" like so:
+          "Minimize", "Maximize", "Restore" and "Help" like so:
         </p>
-
+        
         <%- example(`
           <div class="title-bar">
             <div class="title-bar-text">A Title Bar</div>
@@ -545,7 +545,18 @@
             </div>
           </div>
 
-          <br>
+          <br />
+
+          <div class="title-bar">
+            <div class="title-bar-text">A Maximized Title Bar</div>
+            <div class="title-bar-controls">
+              <button aria-label="Minimize"></button>
+              <button aria-label="Restore"></button>
+              <button aria-label="Close"></button>
+            </div>
+          </div>
+
+          <br />
 
           <div class="title-bar">
             <div class="title-bar-text">A Helpful Bar</div>
@@ -553,7 +564,7 @@
               <button aria-label="Help"></button>
               <button aria-label="Close"></button>
             </div>
-          </div>
+          </div>          
         `) %>
 		<p>
           You can make a title bar "inactive" by adding <code>inactive</code> class,
diff --git a/icon/restore.svg b/icon/restore.svg
new file mode 100644
index 0000000..9d17f27
--- /dev/null
+++ b/icon/restore.svg
@@ -0,0 +1,10 @@
+<svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" width="6" height="2" fill="black"/>
+<rect x="7" y="2" width="1" height="4" fill="black"/>
+<rect x="2" y="2" width="1" height="1" fill="black"/>
+<rect x="6" y="5" width="1" height="1" fill="black"/>
+<rect y="3" width="6" height="2" fill="black"/>
+<rect x="5" y="5" width="1" height="4" fill="black"/>
+<rect y="5" width="1" height="4" fill="black"/>
+<rect x="1" y="8" width="4" height="1" fill="black"/>
+</svg>
diff --git a/style.css b/style.css
index 0efb4dc..cd0adbd 100644
--- a/style.css
+++ b/style.css
@@ -231,6 +231,12 @@ button::-moz-focus-inner {
   background-position: top 2px left 3px;
 }
 
+.title-bar-controls button[aria-label="Restore"] {
+  background-image: svg-load("./icon/restore.svg");
+  background-repeat: no-repeat;
+  background-position: top 2px left 3px;
+}
+
 .title-bar-controls button[aria-label="Help"] {
   background-image: svg-load("./icon/help.svg");
   background-repeat: no-repeat;