Navigation bar

src/__test__/__snapshots__/Dropdown.test.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Dropdown renders correctly 1`] = `
+.c2 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: calc(8px / 2);
+}
+
+.c2 svg {
+  stroke: #FFF;
+  width: calc(3 * 8px);
+  height: calc(3 * 8px);
+}
+
+.c3 {
+  font-family: 'Fira Sans Condensed';
+  font-size: 16px;
+  height: 16px;
+  vertical-align: top;
+  width: 16px;
+  float: right;
+}
+
 .c0 {
   display: inline-block;
   position: relative;
@@ -63,22 +86,7 @@ exports[`Dropdown renders correctly 1`] = `
   background: #0B65CB;
 }
 
-.c1:after {
-  border-left: calc(8px / 1.5) solid transparent;
-  border-right: calc(8px / 1.5) solid transparent;
-  border-top: calc(8px / 1.5) solid #E7E7E7;
-  content: '';
-  height: 0;
-  position: absolute;
-  right: calc(8px * 2);
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-  width: 0;
-}
-
-.c2 {
+.c4 {
   background-color: white;
   border-color: #AAA;
   border-style: solid;
@@ -96,7 +104,7 @@ exports[`Dropdown renders correctly 1`] = `
   z-index: 9;
 }
 
-.c3 {
+.c5 {
   cursor: pointer;
   font-family: 'Fira Sans Condensed';
   font-size: 16px;
@@ -105,7 +113,7 @@ exports[`Dropdown renders correctly 1`] = `
   word-break: break-word;
 }
 
-.c3:hover {
+.c5:hover {
   background-color: #F1F1F1;
 }
 
@@ -125,19 +133,40 @@ exports[`Dropdown renders correctly 1`] = `
         Hello test
       </span>
     </span>
+    <span
+      className="c2 c3"
+      color={[Function]}
+      role="img"
+      size={3}
+    >
+      <svg
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <polyline
+          points="6 9 12 15 18 9"
+        />
+      </svg>
+    </span>
   </button>
   <ul
-    className="c2"
+    className="c4"
   >
     <li
-      className="c3"
+      className="c5"
       onClick={[Function]}
+      onMouseDown={[Function]}
     >
       item 1
     </li>
     <li
-      className="c3"
+      className="c5"
       onClick={[Function]}
+      onMouseDown={[Function]}
     >
       item 2
     </li>