Updates on highlighting items in sidebar nav (#54)

* Updates on highlighting items in sidebar nav * Cleanup
mapp-digital · Jan 29, 2020 · 19c1533 · 19c1533
1 parent 7b611bd
commit 19c1533
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/sidebar/sidebar.less b/src/sidebar/sidebar.less
@@ -35,7 +35,7 @@
             cursor: pointer;
 
             &:hover {
-                color: @gray-darkest;
+                color: @primary-color-variant;
             }
         }
 
@@ -59,4 +59,4 @@
             word-break: keep-all;
         }
     }
-}
+}
diff --git a/src/tree/node.tsx b/src/tree/node.tsx
@@ -17,6 +17,7 @@ interface Props {
 const EXPANDED_CLASS = 'expanded';
 const COLLAPSED_CLASS = 'collapsed';
 const NO_CHILD_CLASS = 'no-child';
+const LEAF_CLASS = 'leaf';
 const HIGHLIGHTED_CLASS = 'highlighted';
 const LEVEL_CLASS_PREFIX = 'level-';
 
@@ -35,10 +36,11 @@ class Node extends React.Component<Props, {}> {
                 role="listitem"
                 onClick={this.handleClick}
                 data-qa={`node-${this.props.node.id}`}
-                className={`node ${this.getHightlightedCLass()} ${LEVEL_CLASS_PREFIX + this.getLevel()}`}
+                className={`node ${this.getHightlightedCLass()} ${this.getLeafClass()} ${LEVEL_CLASS_PREFIX +
+                    this.getLevel()}`}
             >
                 <div className="node-content">
-                    <span className={this.getClasses()} data-qa={`node--icon-${this.props.node.id}`} />
+                    <span className={`node-icon ${this.getClasses()}`} data-qa={`node--icon-${this.props.node.id}`} />
                     <span className="node-label">{this.props.node.label}</span>
                     {this.isChildrenVisible() && <ul className="nodes">{this.getChildNodes()}</ul>}
                 </div>
@@ -50,6 +52,10 @@ class Node extends React.Component<Props, {}> {
         return this.isHighlighted() ? HIGHLIGHTED_CLASS : '';
     }
 
+    private getLeafClass() {
+        return !this.props.node.children ? LEAF_CLASS : '';
+    }
+
     private getChildNodes() {
         return this.props.node.children!.map((node) => (
             <Node node={node} key={node.id} level={this.getNextLevel()} onNodeClick={this.props.onNodeClick} />

diff --git a/src/tree/tree.less b/src/tree/tree.less
@@ -2,10 +2,6 @@
     .level-1 {
         padding-top: 5px;
         padding-bottom: 5px;
-
-        &.highlighted > .node-content > .node-label {
-            color: @gray-darkest;
-        }
     }
 
     .nodes {
@@ -21,14 +17,30 @@
         cursor: pointer;
 
         &:hover {
-            .node-label {
+            .node-label, .node-icon {
                 color: @primary-color;
             }
         }
 
         &.highlighted {
-            color: @primary-color;
             font-weight: bold;
+
+            .node-content {
+                .node-label {
+                    color: @gray-darkest;
+                }
+                .node-icon {
+                    color: @primary-color-darker;
+                }
+            }
+
+            &.leaf {
+                .node-content {
+                    .node-label, .node-icon {
+                        color: @primary-color-darker;
+                    }
+                }
+            }
         }
     }