From 88735c3a106fcd3a0dbd2d32fd947372b2fa7e14 Mon Sep 17 00:00:00 2001
From: MansoorBashaBellary <mbellary@chewy.com>
Date: Sat, 20 Apr 2019 15:09:10 -0400
Subject: [PATCH] feat(storiesNav): adding classNames to stories nav elements

- adding classNames to stories nav elements
- updating LogoLink to support html elements

This PR is a replacement for the deep theming PR:

https://github.com/storybooks/storybook/pull/6098
---
 .../__snapshots__/storyshots.test.js.snap     | 366 +++++++++---------
 lib/ui/src/components/sidebar/Sidebar.js      |   4 +-
 .../src/components/sidebar/SidebarHeading.js  |   6 +-
 lib/ui/src/components/sidebar/SidebarItem.js  |  16 +-
 .../src/components/sidebar/SidebarStories.js  |   8 +
 5 files changed, 207 insertions(+), 193 deletions(-)

diff --git a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
index 6ca123c579d0..ffa866e05a30 100644
--- a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
+++ b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
@@ -8366,7 +8366,7 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
 }
 
 <nav
-  class="container emotion-78"
+  class="container sidebar-container emotion-78"
 >
   <div
     class="emotion-77"
@@ -8392,7 +8392,7 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
             class="simplebar-content"
           >
             <div
-              class="emotion-7"
+              class="sidebar-header emotion-7"
             >
               <div
                 class="emotion-2"
@@ -8472,13 +8472,13 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
               class="emotion-76"
             >
               <div
-                class="emotion-11"
+                class="sidebar-item emotion-11"
               >
                 <span
-                  class="emotion-8"
+                  class="sidebar-expander emotion-8"
                 />
                 <svg
-                  class="emotion-10"
+                  class="sidebar-svg-icon emotion-10"
                   viewBox="0 0 1024 1024"
                 >
                   <path
@@ -8491,13 +8491,13 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
                 </span>
               </div>
               <div
-                class="emotion-11"
+                class="sidebar-item emotion-11"
               >
                 <span
-                  class="emotion-8"
+                  class="sidebar-expander emotion-8"
                 />
                 <svg
-                  class="emotion-10"
+                  class="sidebar-svg-icon emotion-10"
                   viewBox="0 0 1024 1024"
                 >
                   <path
@@ -8513,10 +8513,10 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
                 class="emotion-19"
               >
                 <span
-                  class="emotion-8"
+                  class="sidebar-expander emotion-8"
                 />
                 <svg
-                  class="emotion-10"
+                  class="sidebar-svg-icon emotion-10"
                   viewBox="0 0 1024 1024"
                 >
                   <path
@@ -8532,10 +8532,10 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
                 class="emotion-19"
               >
                 <span
-                  class="emotion-8"
+                  class="sidebar-expander emotion-8"
                 />
                 <svg
-                  class="emotion-10"
+                  class="sidebar-svg-icon emotion-10"
                   viewBox="0 0 1024 1024"
                 >
                   <path
@@ -8551,10 +8551,10 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
                 class="emotion-27"
               >
                 <span
-                  class="emotion-8"
+                  class="sidebar-expander emotion-8"
                 />
                 <svg
-                  class="emotion-10"
+                  class="sidebar-svg-icon emotion-10"
                   viewBox="0 0 1024 1024"
                 >
                   <path
@@ -8570,10 +8570,10 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
                 class="emotion-31"
               >
                 <span
-                  class="emotion-8"
+                  class="sidebar-expander emotion-8"
                 />
                 <svg
-                  class="emotion-10"
+                  class="sidebar-svg-icon emotion-10"
                   viewBox="0 0 1024 1024"
                 >
                   <path
@@ -8589,10 +8589,10 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
                 class="emotion-31"
               >
                 <span
-                  class="emotion-8"
+                  class="sidebar-expander emotion-8"
                 />
                 <svg
-                  class="emotion-10"
+                  class="sidebar-svg-icon emotion-10"
                   viewBox="0 0 1024 1024"
                 >
                   <path
@@ -8608,10 +8608,10 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
                 class="emotion-31"
               >
                 <span
-                  class="emotion-8"
+                  class="sidebar-expander emotion-8"
                 />
                 <svg
-                  class="emotion-10"
+                  class="sidebar-svg-icon emotion-10"
                   viewBox="0 0 1024 1024"
                 >
                   <path
@@ -8627,10 +8627,10 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
                 class="emotion-19"
               >
                 <span
-                  class="emotion-8"
+                  class="sidebar-expander emotion-8"
                 />
                 <svg
-                  class="emotion-10"
+                  class="sidebar-svg-icon emotion-10"
                   viewBox="0 0 1024 1024"
                 >
                   <path
@@ -8646,10 +8646,10 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
                 class="emotion-19"
               >
                 <span
-                  class="emotion-8"
+                  class="sidebar-expander emotion-8"
                 />
                 <svg
-                  class="emotion-10"
+                  class="sidebar-svg-icon emotion-10"
                   viewBox="0 0 1024 1024"
                 >
                   <path
@@ -8665,10 +8665,10 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
                 class="emotion-19"
               >
                 <span
-                  class="emotion-8"
+                  class="sidebar-expander emotion-8"
                 />
                 <svg
-                  class="emotion-10"
+                  class="sidebar-svg-icon emotion-10"
                   viewBox="0 0 1024 1024"
                 >
                   <path
@@ -8684,10 +8684,10 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
                 class="emotion-27"
               >
                 <span
-                  class="emotion-8"
+                  class="sidebar-expander emotion-8"
                 />
                 <svg
-                  class="emotion-10"
+                  class="sidebar-svg-icon emotion-10"
                   viewBox="0 0 1024 1024"
                 >
                   <path
@@ -8703,10 +8703,10 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
                 class="emotion-27"
               >
                 <span
-                  class="emotion-8"
+                  class="sidebar-expander emotion-8"
                 />
                 <svg
-                  class="emotion-10"
+                  class="sidebar-svg-icon emotion-10"
                   viewBox="0 0 1024 1024"
                 >
                   <path
@@ -8722,10 +8722,10 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
                 class="emotion-27"
               >
                 <span
-                  class="emotion-8"
+                  class="sidebar-expander emotion-8"
                 />
                 <svg
-                  class="emotion-10"
+                  class="sidebar-svg-icon emotion-10"
                   viewBox="0 0 1024 1024"
                 >
                   <path
@@ -8741,10 +8741,10 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
                 class="emotion-31"
               >
                 <span
-                  class="emotion-8"
+                  class="sidebar-expander emotion-8"
                 />
                 <svg
-                  class="emotion-10"
+                  class="sidebar-svg-icon emotion-10"
                   viewBox="0 0 1024 1024"
                 >
                   <path
@@ -8757,13 +8757,13 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
                 </span>
               </div>
               <div
-                class="emotion-11"
+                class="sidebar-item emotion-11"
               >
                 <span
-                  class="emotion-8"
+                  class="sidebar-expander emotion-8"
                 />
                 <svg
-                  class="emotion-10"
+                  class="sidebar-svg-icon emotion-10"
                   viewBox="0 0 1024 1024"
                 >
                   <path
@@ -8776,13 +8776,13 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
                 </span>
               </div>
               <div
-                class="emotion-11"
+                class="sidebar-item emotion-11"
               >
                 <span
-                  class="emotion-8"
+                  class="sidebar-expander emotion-8"
                 />
                 <svg
-                  class="emotion-10"
+                  class="sidebar-svg-icon emotion-10"
                   viewBox="0 0 1024 1024"
                 >
                   <path
@@ -9798,7 +9798,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
 }
 
 <nav
-  class="container emotion-49"
+  class="container sidebar-container emotion-49"
 >
   <div
     class="emotion-48"
@@ -9824,7 +9824,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
             class="simplebar-content"
           >
             <div
-              class="emotion-7"
+              class="sidebar-header emotion-7"
             >
               <div
                 class="emotion-2"
@@ -9944,7 +9944,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
                 class="emotion-32"
               >
                 <div
-                  class="emotion-15"
+                  class="sidebar-subheading emotion-15"
                   type="section"
                 >
                   Root 1
@@ -9955,14 +9955,14 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
                   title="Child A2"
                 >
                   <div
-                    class="emotion-19"
+                    class="sidebar-item emotion-19"
                     id="1-12"
                   >
                     <span
-                      class="emotion-16"
+                      class="sidebar-expander emotion-16"
                     />
                     <svg
-                      class="emotion-18"
+                      class="sidebar-svg-icon emotion-18"
                       viewBox="0 0 1024 1024"
                     >
                       <path
@@ -9985,14 +9985,14 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
                     title="GrandChild A1.1"
                   >
                     <div
-                      class="emotion-24"
+                      class="sidebar-item selected emotion-24"
                       id="1-12-121"
                     >
                       <span
-                        class="emotion-21"
+                        class="sidebar-expander emotion-21"
                       />
                       <svg
-                        class="emotion-23"
+                        class="sidebar-svg-icon emotion-23"
                         viewBox="0 0 1024 1024"
                       >
                         <path
@@ -10012,14 +10012,14 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
                     title="GrandChild A1.2"
                   >
                     <div
-                      class="emotion-29"
+                      class="sidebar-item emotion-29"
                       id="1-12-122"
                     >
                       <span
-                        class="emotion-21"
+                        class="sidebar-expander emotion-21"
                       />
                       <svg
-                        class="emotion-28"
+                        class="sidebar-svg-icon emotion-28"
                         viewBox="0 0 1024 1024"
                       >
                         <path
@@ -10038,7 +10038,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
                 class="emotion-32"
               >
                 <div
-                  class="emotion-15"
+                  class="sidebar-subheading emotion-15"
                   type="section"
                 >
                   Root 3
@@ -10049,14 +10049,14 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
                   title="Child A2"
                 >
                   <div
-                    class="emotion-19"
+                    class="sidebar-item emotion-19"
                     id="3-32"
                   >
                     <span
-                      class="emotion-34"
+                      class="sidebar-expander emotion-34"
                     />
                     <svg
-                      class="emotion-18"
+                      class="sidebar-svg-icon emotion-18"
                       viewBox="0 0 1024 1024"
                     >
                       <path
@@ -10074,7 +10074,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
                 class="emotion-32"
               >
                 <div
-                  class="emotion-15"
+                  class="sidebar-subheading emotion-15"
                   type="section"
                 >
                   Others
@@ -10085,14 +10085,14 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
                   title="Group 1"
                 >
                   <div
-                    class="emotion-19"
+                    class="sidebar-item emotion-19"
                     id="2"
                   >
                     <span
-                      class="emotion-34"
+                      class="sidebar-expander emotion-34"
                     />
                     <svg
-                      class="emotion-43"
+                      class="sidebar-svg-icon emotion-43"
                       viewBox="0 0 1024 1024"
                     >
                       <path
@@ -12521,13 +12521,13 @@ exports[`Storyshots UI|Sidebar/SidebarItem component 1`] = `
   style="width:240px;margin:1rem;border:1px dotted #ccc"
 >
   <div
-    class="emotion-3"
+    class="sidebar-item emotion-3"
   >
     <span
-      class="emotion-0"
+      class="sidebar-expander emotion-0"
     />
     <svg
-      class="emotion-2"
+      class="sidebar-svg-icon emotion-2"
       viewBox="0 0 1024 1024"
     >
       <path
@@ -12673,13 +12673,13 @@ exports[`Storyshots UI|Sidebar/SidebarItem componentExpanded 1`] = `
   style="width:240px;margin:1rem;border:1px dotted #ccc"
 >
   <div
-    class="emotion-3"
+    class="sidebar-item emotion-3"
   >
     <span
-      class="emotion-0"
+      class="sidebar-expander emotion-0"
     />
     <svg
-      class="emotion-2"
+      class="sidebar-svg-icon emotion-2"
       viewBox="0 0 1024 1024"
     >
       <path
@@ -12819,13 +12819,13 @@ exports[`Storyshots UI|Sidebar/SidebarItem group 1`] = `
   style="width:240px;margin:1rem;border:1px dotted #ccc"
 >
   <div
-    class="emotion-3"
+    class="sidebar-item emotion-3"
   >
     <span
-      class="emotion-0"
+      class="sidebar-expander emotion-0"
     />
     <svg
-      class="emotion-2"
+      class="sidebar-svg-icon emotion-2"
       viewBox="0 0 1024 1024"
     >
       <path
@@ -13053,13 +13053,13 @@ exports[`Storyshots UI|Sidebar/SidebarItem loading 1`] = `
   style="width:240px;margin:1rem;border:1px dotted #ccc"
 >
   <div
-    class="emotion-3"
+    class="sidebar-item emotion-3"
   >
     <span
-      class="emotion-0"
+      class="sidebar-expander emotion-0"
     />
     <svg
-      class="emotion-2"
+      class="sidebar-svg-icon emotion-2"
       viewBox="0 0 1024 1024"
     >
       <path
@@ -13488,13 +13488,13 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
 >
   <div>
     <div
-      class="emotion-3"
+      class="sidebar-item emotion-3"
     >
       <span
-        class="emotion-0"
+        class="sidebar-expander emotion-0"
       />
       <svg
-        class="emotion-2"
+        class="sidebar-svg-icon emotion-2"
         viewBox="0 0 1024 1024"
       >
         <path
@@ -13507,13 +13507,13 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
       </span>
     </div>
     <div
-      class="emotion-3"
+      class="sidebar-item emotion-3"
     >
       <span
-        class="emotion-4"
+        class="sidebar-expander emotion-4"
       />
       <svg
-        class="emotion-2"
+        class="sidebar-svg-icon emotion-2"
         viewBox="0 0 1024 1024"
       >
         <path
@@ -13526,13 +13526,13 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
       </span>
     </div>
     <div
-      class="emotion-11"
+      class="sidebar-item emotion-11"
     >
       <span
-        class="emotion-4"
+        class="sidebar-expander emotion-4"
       />
       <svg
-        class="emotion-2"
+        class="sidebar-svg-icon emotion-2"
         viewBox="0 0 1024 1024"
       >
         <path
@@ -13545,13 +13545,13 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
       </span>
     </div>
     <div
-      class="emotion-15"
+      class="sidebar-item emotion-15"
     >
       <span
-        class="emotion-4"
+        class="sidebar-expander emotion-4"
       />
       <svg
-        class="emotion-14"
+        class="sidebar-svg-icon emotion-14"
         viewBox="0 0 1024 1024"
       >
         <path
@@ -13564,13 +13564,13 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
       </span>
     </div>
     <div
-      class="emotion-19"
+      class="sidebar-item emotion-19"
     >
       <span
-        class="emotion-16"
+        class="sidebar-expander emotion-16"
       />
       <svg
-        class="emotion-18"
+        class="sidebar-svg-icon emotion-18"
         viewBox="0 0 1024 1024"
       >
         <path
@@ -13713,13 +13713,13 @@ exports[`Storyshots UI|Sidebar/SidebarItem story 1`] = `
   style="width:240px;margin:1rem;border:1px dotted #ccc"
 >
   <div
-    class="emotion-3"
+    class="sidebar-item emotion-3"
   >
     <span
-      class="emotion-0"
+      class="sidebar-expander emotion-0"
     />
     <svg
-      class="emotion-2"
+      class="sidebar-svg-icon emotion-2"
       viewBox="0 0 1024 1024"
     >
       <path
@@ -13857,13 +13857,13 @@ exports[`Storyshots UI|Sidebar/SidebarItem storySelected 1`] = `
   style="width:240px;margin:1rem;border:1px dotted #ccc"
 >
   <div
-    class="emotion-3"
+    class="sidebar-item selected emotion-3"
   >
     <span
-      class="emotion-0"
+      class="sidebar-expander emotion-0"
     />
     <svg
-      class="emotion-2"
+      class="sidebar-expander emotion-0"
       viewBox="0 0 1024 1024"
     >
       <path
@@ -14003,13 +14003,13 @@ exports[`Storyshots UI|Sidebar/SidebarItem with long name 1`] = `
   style="width:240px;margin:1rem;border:1px dotted #ccc"
 >
   <div
-    class="emotion-3"
+    class="sidebar-item emotion-3"
   >
     <span
-      class="emotion-0"
+      class="sidebar-expander emotion-0"
     />
     <svg
-      class="emotion-2"
+      class="sidebar-svg-icon emotion-2"
       viewBox="0 0 1024 1024"
     >
       <path
@@ -15477,13 +15477,13 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
     class="emotion-68"
   >
     <div
-      class="emotion-3"
+      class="sidebar-item emotion-3"
     >
       <span
-        class="emotion-0"
+        class="sidebar-expander emotion-0"
       />
       <svg
-        class="emotion-2"
+        class="sidebar-svg-icon emotion-2"
         viewBox="0 0 1024 1024"
       >
         <path
@@ -15496,13 +15496,13 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
       </span>
     </div>
     <div
-      class="emotion-3"
+      class="sidebar-item emotion-3"
     >
       <span
-        class="emotion-0"
+        class="sidebar-expander emotion-0"
       />
       <svg
-        class="emotion-2"
+        class="sidebar-svg-icon emotion-2"
         viewBox="0 0 1024 1024"
       >
         <path
@@ -15515,13 +15515,13 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
       </span>
     </div>
     <div
-      class="emotion-11"
+      class="sidebar-item emotion-11"
     >
       <span
-        class="emotion-0"
+        class="sidebar-expander emotion-0"
       />
       <svg
-        class="emotion-2"
+        class="sidebar-svg-icon emotion-2"
         viewBox="0 0 1024 1024"
       >
         <path
@@ -15534,13 +15534,13 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
       </span>
     </div>
     <div
-      class="emotion-11"
+      class="sidebar-item emotion-11"
     >
       <span
-        class="emotion-0"
+        class="sidebar-expander emotion-0"
       />
       <svg
-        class="emotion-2"
+        class="sidebar-svg-icon emotion-2"
         viewBox="0 0 1024 1024"
       >
         <path
@@ -15553,13 +15553,13 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
       </span>
     </div>
     <div
-      class="emotion-19"
+      class="sidebar-item emotion-19"
     >
       <span
-        class="emotion-0"
+        class="sidebar-expander emotion-0"
       />
       <svg
-        class="emotion-2"
+        class="sidebar-svg-icon emotion-2"
         viewBox="0 0 1024 1024"
       >
         <path
@@ -15572,13 +15572,13 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
       </span>
     </div>
     <div
-      class="emotion-23"
+      class="sidebar-item emotion-23"
     >
       <span
-        class="emotion-0"
+        class="sidebar-expander emotion-0"
       />
       <svg
-        class="emotion-2"
+        class="sidebar-svg-icon emotion-2"
         viewBox="0 0 1024 1024"
       >
         <path
@@ -15591,13 +15591,13 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
       </span>
     </div>
     <div
-      class="emotion-23"
+      class="sidebar-item emotion-23"
     >
       <span
-        class="emotion-0"
+        class="sidebar-expander emotion-0"
       />
       <svg
-        class="emotion-2"
+        class="sidebar-svg-icon emotion-2"
         viewBox="0 0 1024 1024"
       >
         <path
@@ -15610,13 +15610,13 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
       </span>
     </div>
     <div
-      class="emotion-23"
+      class="sidebar-item emotion-23"
     >
       <span
-        class="emotion-0"
+        class="sidebar-expander emotion-0"
       />
       <svg
-        class="emotion-2"
+        class="sidebar-svg-icon emotion-2"
         viewBox="0 0 1024 1024"
       >
         <path
@@ -15629,13 +15629,13 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
       </span>
     </div>
     <div
-      class="emotion-11"
+      class="sidebar-item emotion-11"
     >
       <span
-        class="emotion-0"
+        class="sidebar-expander emotion-0"
       />
       <svg
-        class="emotion-2"
+        class="sidebar-svg-icon emotion-2"
         viewBox="0 0 1024 1024"
       >
         <path
@@ -15648,13 +15648,13 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
       </span>
     </div>
     <div
-      class="emotion-11"
+      class="sidebar-item emotion-11"
     >
       <span
-        class="emotion-0"
+        class="sidebar-expander emotion-0"
       />
       <svg
-        class="emotion-2"
+        class="sidebar-svg-icon emotion-2"
         viewBox="0 0 1024 1024"
       >
         <path
@@ -15667,13 +15667,13 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
       </span>
     </div>
     <div
-      class="emotion-11"
+      class="sidebar-item emotion-11"
     >
       <span
-        class="emotion-0"
+        class="sidebar-expander emotion-0"
       />
       <svg
-        class="emotion-2"
+        class="sidebar-svg-icon emotion-2"
         viewBox="0 0 1024 1024"
       >
         <path
@@ -15686,13 +15686,13 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
       </span>
     </div>
     <div
-      class="emotion-19"
+      class="sidebar-item emotion-19"
     >
       <span
-        class="emotion-0"
+        class="sidebar-expander emotion-0"
       />
       <svg
-        class="emotion-2"
+        class="sidebar-svg-icon emotion-2"
         viewBox="0 0 1024 1024"
       >
         <path
@@ -15705,13 +15705,13 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
       </span>
     </div>
     <div
-      class="emotion-19"
+      class="sidebar-item emotion-19"
     >
       <span
-        class="emotion-0"
+        class="sidebar-expander emotion-0"
       />
       <svg
-        class="emotion-2"
+        class="sidebar-svg-icon emotion-2"
         viewBox="0 0 1024 1024"
       >
         <path
@@ -15724,13 +15724,13 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
       </span>
     </div>
     <div
-      class="emotion-19"
+      class="sidebar-item emotion-19"
     >
       <span
-        class="emotion-0"
+        class="sidebar-expander emotion-0"
       />
       <svg
-        class="emotion-2"
+        class="sidebar-svg-icon emotion-2"
         viewBox="0 0 1024 1024"
       >
         <path
@@ -15743,13 +15743,13 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
       </span>
     </div>
     <div
-      class="emotion-23"
+      class="sidebar-item emotion-23"
     >
       <span
-        class="emotion-0"
+        class="sidebar-expander emotion-0"
       />
       <svg
-        class="emotion-2"
+        class="sidebar-svg-icon emotion-2"
         viewBox="0 0 1024 1024"
       >
         <path
@@ -15762,13 +15762,13 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
       </span>
     </div>
     <div
-      class="emotion-3"
+      class="sidebar-item emotion-3"
     >
       <span
-        class="emotion-0"
+        class="sidebar-expander emotion-0"
       />
       <svg
-        class="emotion-2"
+        class="sidebar-svg-icon emotion-2"
         viewBox="0 0 1024 1024"
       >
         <path
@@ -15781,13 +15781,13 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
       </span>
     </div>
     <div
-      class="emotion-3"
+      class="sidebar-item emotion-3"
     >
       <span
-        class="emotion-0"
+        class="sidebar-expander emotion-0"
       />
       <svg
-        class="emotion-2"
+        class="sidebar-svg-icon emotion-2"
         viewBox="0 0 1024 1024"
       >
         <path
@@ -16584,14 +16584,14 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
         title="Parent A"
       >
         <div
-          class="emotion-10"
+          class="sidebar-item emotion-10"
           id="1"
         >
           <span
-            class="emotion-7"
+            class="sidebar-expander emotion-7"
           />
           <svg
-            class="emotion-9"
+            class="sidebar-svg-icon emotion-9"
             viewBox="0 0 1024 1024"
           >
             <path
@@ -16614,14 +16614,14 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
           title="Child A1"
         >
           <div
-            class="emotion-15"
+            class="sidebar-item emotion-15"
             id="1-11"
           >
             <span
-              class="emotion-12"
+              class="sidebar-expander emotion-12"
             />
             <svg
-              class="emotion-14"
+              class="sidebar-svg-icon emotion-14"
               viewBox="0 0 1024 1024"
             >
               <path
@@ -16640,14 +16640,14 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
           title="Child A2"
         >
           <div
-            class="emotion-15"
+            class="sidebar-item emotion-15"
             id="1-12"
           >
             <span
-              class="emotion-7"
+              class="sidebar-expander emotion-7"
             />
             <svg
-              class="emotion-19"
+              class="sidebar-svg-icon emotion-19"
               viewBox="0 0 1024 1024"
             >
               <path
@@ -16670,14 +16670,14 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
             title="GrandChild A1.1"
           >
             <div
-              class="emotion-25"
+              class="sidebar-item selected emotion-25"
               id="1-12-121"
             >
               <span
-                class="emotion-12"
+                class="sidebar-expander emotion-12"
               />
               <svg
-                class="emotion-24"
+                class="sidebar-svg-icon emotion-24"
                 viewBox="0 0 1024 1024"
               >
                 <path
@@ -16697,14 +16697,14 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
             title="GrandChild A1.2"
           >
             <div
-              class="emotion-30"
+              class="sidebar-item emotion-30"
               id="1-12-122"
             >
               <span
-                class="emotion-12"
+                class="sidebar-expander emotion-12"
               />
               <svg
-                class="emotion-14"
+                class="sidebar-svg-icon emotion-14"
                 viewBox="0 0 1024 1024"
               >
                 <path
@@ -16725,14 +16725,14 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
         title="Parent B"
       >
         <div
-          class="emotion-10"
+          class="sidebar-item emotion-10"
           id="2"
         >
           <span
-            class="emotion-34"
+            class="sidebar-expander emotion-34"
           />
           <svg
-            class="emotion-19"
+            class="sidebar-svg-icon emotion-19"
             viewBox="0 0 1024 1024"
           >
             <path
@@ -17496,7 +17496,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
       class="emotion-24"
     >
       <div
-        class="emotion-7"
+        class="sidebar-subheading emotion-7"
         type="section"
       >
         Root 1
@@ -17507,14 +17507,14 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
         title="Child A2"
       >
         <div
-          class="emotion-11"
+          class="sidebar-item emotion-11"
           id="1-12"
         >
           <span
-            class="emotion-8"
+            class="sidebar-expander emotion-8"
           />
           <svg
-            class="emotion-10"
+            class="sidebar-svg-icon emotion-10"
             viewBox="0 0 1024 1024"
           >
             <path
@@ -17537,14 +17537,14 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
           title="GrandChild A1.1"
         >
           <div
-            class="emotion-16"
+            class="sidebar-item selected emotion-16"
             id="1-12-121"
           >
             <span
-              class="emotion-13"
+              class="sidebar-expander emotion-13"
             />
             <svg
-              class="emotion-15"
+              class="sidebar-svg-icon emotion-15"
               viewBox="0 0 1024 1024"
             >
               <path
@@ -17564,14 +17564,14 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
           title="GrandChild A1.2"
         >
           <div
-            class="emotion-21"
+            class="sidebar-item emotion-21"
             id="1-12-122"
           >
             <span
-              class="emotion-13"
+              class="sidebar-expander emotion-13"
             />
             <svg
-              class="emotion-20"
+              class="sidebar-svg-icon emotion-20"
               viewBox="0 0 1024 1024"
             >
               <path
@@ -17590,7 +17590,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
       class="emotion-24"
     >
       <div
-        class="emotion-7"
+        class="sidebar-subheading emotion-7"
         type="section"
       >
         Root 3
@@ -17601,14 +17601,14 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
         title="Child A2"
       >
         <div
-          class="emotion-11"
+          class="sidebar-item emotion-11"
           id="3-32"
         >
           <span
-            class="emotion-26"
+            class="sidebar-expander emotion-26"
           />
           <svg
-            class="emotion-10"
+            class="sidebar-svg-icon emotion-10"
             viewBox="0 0 1024 1024"
           >
             <path
@@ -17626,7 +17626,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
       class="emotion-24"
     >
       <div
-        class="emotion-7"
+        class="sidebar-subheading emotion-7"
         type="section"
       >
         Others
@@ -17637,14 +17637,14 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
         title="Group 1"
       >
         <div
-          class="emotion-11"
+          class="sidebar-item emotion-11"
           id="2"
         >
           <span
-            class="emotion-26"
+            class="sidebar-expander emotion-26"
           />
           <svg
-            class="emotion-35"
+            class="sidebar-svg-icon emotion-35"
             viewBox="0 0 1024 1024"
           >
             <path
diff --git a/lib/ui/src/components/sidebar/Sidebar.js b/lib/ui/src/components/sidebar/Sidebar.js
index 6d3bdd76e2ba..49a1459432aa 100644
--- a/lib/ui/src/components/sidebar/Sidebar.js
+++ b/lib/ui/src/components/sidebar/Sidebar.js
@@ -31,9 +31,9 @@ const CustomScrollArea = styled(ScrollArea)({
 });
 
 const Sidebar = ({ storyId, stories, menu, menuHighlighted, loading }) => (
-  <Container className="container">
+  <Container className="container sidebar-container">
     <CustomScrollArea vertical>
-      <Heading menuHighlighted={menuHighlighted} menu={menu} />
+      <Heading className="sidebar-header" menuHighlighted={menuHighlighted} menu={menu} />
       <Stories stories={stories} storyId={storyId} loading={loading} />
     </CustomScrollArea>
   </Container>
diff --git a/lib/ui/src/components/sidebar/SidebarHeading.js b/lib/ui/src/components/sidebar/SidebarHeading.js
index c6304457cd4a..150eab4b4ac6 100644
--- a/lib/ui/src/components/sidebar/SidebarHeading.js
+++ b/lib/ui/src/components/sidebar/SidebarHeading.js
@@ -85,11 +85,7 @@ const Brand = withTheme(({ theme: { brand: { title = 'Storybook', url = './', im
     return title;
   }
   if (image === null && url) {
-    return (
-      <LogoLink href={url} target={targetValue}>
-        {title}
-      </LogoLink>
-    );
+    return <LogoLink href={url} target={targetValue} dangerouslySetInnerHTML={{ __html: title }} />;
   }
   if (image && url === null) {
     return <Img src={image} alt={title} />;
diff --git a/lib/ui/src/components/sidebar/SidebarItem.js b/lib/ui/src/components/sidebar/SidebarItem.js
index 72526968f4b3..6384ba727142 100644
--- a/lib/ui/src/components/sidebar/SidebarItem.js
+++ b/lib/ui/src/components/sidebar/SidebarItem.js
@@ -111,9 +111,19 @@ export default function SidebarItem({
   }
 
   return (
-    <Item isSelected={isSelected} depth={depth} loading={loading} {...props}>
-      <Expander isExpandable={!isLeaf} isExpanded={isExpanded ? true : undefined} />
-      <Icon icon={iconName} isSelected={isSelected} />
+    <Item
+      isSelected={isSelected}
+      depth={depth}
+      loading={loading}
+      {...props}
+      className={isSelected ? 'sidebar-item selected' : 'sidebar-item'}
+    >
+      <Expander
+        className="sidebar-expander"
+        isExpandable={!isLeaf}
+        isExpanded={isExpanded ? true : undefined}
+      />
+      <Icon className="sidebar-svg-icon" icon={iconName} isSelected={isSelected} />
       <span>{name}</span>
     </Item>
   );
diff --git a/lib/ui/src/components/sidebar/SidebarStories.js b/lib/ui/src/components/sidebar/SidebarStories.js
index 5c8df56129a0..51d1787580b1 100644
--- a/lib/ui/src/components/sidebar/SidebarStories.js
+++ b/lib/ui/src/components/sidebar/SidebarStories.js
@@ -18,6 +18,14 @@ const Subheading = styled(SidebarSubheading)({
   margin: '0 20px',
 });
 
+Subheading.propTypes = {
+  className: PropTypes.string,
+};
+
+Subheading.defaultProps = {
+  className: 'sidebar-subheading',
+};
+
 const Section = styled.section({
   '& + section': {
     marginTop: 20,