adding #26

public/components.html

@@ -603,8 +603,17 @@
                     Sidebar
                 </h2>
                 <div class="content">
-<code>&#x3C;div class=&#x22;progress&#x22;&#x3E;
-    &#x3C;div class=&#x22;progress__inner&#x22; style=&#x22;width: 20%;&#x22;&#x3E;&#x3C;/div&#x3E;
+<code>&#x3C;div class=&#x22;sidebar&#x22;&#x3E;
+    &#x3C;div class=&#x22;sidebar__inner&#x22;&#x3E;
+        &#x3C;div class=&#x22;sidebar__body&#x22;&#x3E;
+
+        &#x3C;/div&#x3E;
+        &#x3C;div class=&#x22;sidebar__footer&#x22;&#x3E;
+            &#x3C;button type=&#x22;button&#x22; class=&#x22;button m-bottom-0&#x22;&#x3E;
+                Close
+            &#x3C;/button&#x3E;
+        &#x3C;/div&#x3E;
+    &#x3C;/div&#x3E;
 &#x3C;/div&#x3E;
 </code>
                 </div>
@@ -638,8 +647,31 @@
                     Sidebar + Bar
                 </h2>
                 <div class="content">
-<code>&#x3C;div class=&#x22;progress&#x22;&#x3E;
-    &#x3C;div class=&#x22;progress__inner&#x22; style=&#x22;width: 20%;&#x22;&#x3E;&#x3C;/div&#x3E;
+<code>&#x3C;div class=&#x22;sidebar&#x22;&#x3E;
+    &#x3C;div class=&#x22;sidebar__inner&#x22;&#x3E;
+
+        &#x3C;div class=&#x22;bar&#x22;&#x3E;
+            &#x3C;div class=&#x22;bar__main&#x22;&#x3E;
+                Sidebar
+            &#x3C;/div&#x3E;
+            &#x3C;div class=&#x22;bar__end&#x22;&#x3E;
+                &#x3C;button class=&#x22;button button--transparent&#x22; type=&#x22;button&#x22;&#x3E;
+                    &#x3C;svg class=&#x22;icon fill-text-contrast&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
+                        &#x3C;use xlink:href=&#x22;/symbol-defs.svg#icon-close&#x22;&#x3E;&#x3C;/use&#x3E;
+                    &#x3C;/svg&#x3E;
+                &#x3C;/button&#x3E;
+            &#x3C;/div&#x3E;
+        &#x3C;/div&#x3E;
+        
+        &#x3C;div class=&#x22;sidebar__body&#x22;&#x3E;
+
+        &#x3C;/div&#x3E;
+        &#x3C;div class=&#x22;sidebar__footer&#x22;&#x3E;
+            &#x3C;button type=&#x22;button&#x22; class=&#x22;button m-bottom-0&#x22;&#x3E;
+                Close
+            &#x3C;/button&#x3E;
+        &#x3C;/div&#x3E;
+    &#x3C;/div&#x3E;
 &#x3C;/div&#x3E;
 </code>
                 </div>