Drop '@trendmicro/react-anchor' dependency

trendmicro-frontend · Jan 19, 2018 · 8a70ea8 · 8a70ea8
1 parent 365fe21
commit 8a70ea8
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 55 deletions.
diff --git a/README.md b/README.md
@@ -104,7 +104,6 @@ active | boolean | false | Highlight the navigation item as active.
 disabled | boolean | false | Disable the navigation item, making it unselectable.
 expanded | boolean | false | Whether the navigation item is expanded or collapsed.
 eventKey | any | _(required)_ | Value passed to the `onSelect` handler, useful for identifying the selected navigation item.
-href | string | | HTML `href` attribute corresponding to `a.href`.
 onClick | function(event) | | Callback fired when the navigation item is clicked.
 onSelect | function(eventKey, event) | | Callback fired when a navigation item is selected.
 

diff --git a/examples/Styled/StyledSideNav.jsx b/examples/Styled/StyledSideNav.jsx
@@ -28,41 +28,41 @@ const StyledNav = styled(Nav)`
         [class*="sidenav-subnav--"] {
             > [class*="sidenav-subnavitem--"],
             > [class*="sidenav-subnavitem--"]:hover {
-                > a {
+                > [class*="navitem--"] {
                     color: #222;
                 }
             }
             > [class*="sidenav-subnavitem--"]:hover {
-                > a {
+                > [class*="navitem--"] {
                     background-color: #eee;
                 }
             }
             > [class*="sidenav-subnavitem--"][class*="selected--"] {
-                > a {
+                > [class*="navitem--"] {
                     color: #db3d44;
                 }
-                > a::before {
+                > [class*="navitem--"]::before {
                     border-left: 2px solid #db3d44;
                 }
             }
         }
     }
 
     && > [class*="sidenav-navitem--"] {
-        > a {
+        > [class*="navitem--"] {
             background-color: inherit;
             color: #222;
         }
     }
     && > [class*="sidenav-navitem--"]:hover {
-        > a {
+        > [class*="navitem--"] {
             background-color: #eee;
         }
     }
     && > [class*="sidenav-navitem--"],
     && > [class*="sidenav-navitem--"]:hover {
-        > a {
-            [class*="sidenav-nav-icon--"] {
+        > [class*="navitem--"] {
+            [class*="navicon--"] {
                 &, > * {
                     color: #666;
                 }
@@ -77,9 +77,9 @@ const StyledNav = styled(Nav)`
 
     && > [class*="sidenav-navitem--"][class*="highlighted--"],
     && > [class*="sidenav-navitem--"][class*="highlighted--"]:hover {
-        > a {
-            [class*="sidenav-nav-icon--"],
-            [class*="sidenav-nav-text--"] {
+        > [class*="navitem--"] {
+            [class*="navicon--"],
+            [class*="navtext--"] {
                 &, > * {
                     color: #db3d44;
                 }

diff --git a/src/NavItem.jsx b/src/NavItem.jsx
@@ -1,4 +1,4 @@
-import Anchor from '@trendmicro/react-anchor';
+/* eslint jsx-a11y/click-events-have-key-events: 0 */
 import chainedFunction from 'chained-function';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -33,9 +33,6 @@ class NavItem extends PureComponent {
         // Value passed to the `onSelect` handler, useful for identifying the selected navigation item.
         eventKey: PropTypes.any,
 
-        // HTML `href` attribute corresponding to `a.href`.
-        href: PropTypes.string,
-
         // Callback fired when the navigation item is clicked.
         onClick: PropTypes.func,
 
@@ -71,14 +68,11 @@ class NavItem extends PureComponent {
 
     handleSelect = (event) => {
         const {
-            href, disabled, onSelect, eventKey
+            disabled, onSelect, eventKey
         } = this.props;
 
-        if (!href || disabled) {
-            event.preventDefault();
-        }
-
         if (disabled) {
+            event.preventDefault();
             return;
         }
 
@@ -126,8 +120,9 @@ class NavItem extends PureComponent {
                     })}
                     style={style}
                 >
-                    <Anchor
+                    <div
                         {...props}
+                        className={styles.navitem}
                         disabled={disabled}
                         role="menuitem"
                         tabIndex="-1"
@@ -136,13 +131,13 @@ class NavItem extends PureComponent {
                             this.handleSelect
                         )}
                     >
-                        <div className={styles.sidenavNavIcon}>
+                        <div className={styles.navicon}>
                             {navIcon && navIcon.props ? navIcon.props.children : null}
                         </div>
-                        <div className={styles.sidenavNavText}>
+                        <div className={styles.navtext}>
                             {navText && navText.props ? navText.props.children : null}
                         </div>
-                    </Anchor>
+                    </div>
                 </Component>
             );
         }
@@ -191,8 +186,9 @@ class NavItem extends PureComponent {
                 })}
                 style={style}
             >
-                <Anchor
+                <div
                     {...props}
+                    className={styles.navitem}
                     disabled={disabled}
                     role="menuitem"
                     tabIndex="-1"
@@ -201,14 +197,14 @@ class NavItem extends PureComponent {
                         (navItems.length === 0) ? this.handleSelect : noop
                     )}
                 >
-                    <div className={styles.sidenavNavIcon}>
+                    <div className={styles.navicon}>
                         {navIcon && navIcon.props ? navIcon.props.children : null}
                     </div>
-                    <div className={styles.sidenavNavText}>
+                    <div className={styles.navtext}>
                         {navText && navText.props ? navText.props.children : null}
                     </div>
-                </Anchor>
-                {others}
+                    {others}
+                </div>
                 {(navItems.length > 0) &&
                     <div
                         {...props}

diff --git a/src/sidenav-expanded.styl b/src/sidenav-expanded.styl
@@ -2,13 +2,13 @@
     min-width: 240px;
 
     .sidenav-nav > .sidenav-navitem {
-        .sidenav-nav-icon + .sidenav-nav-text {
+        .navicon + .navtext {
             display: inline-block;
         }
     }
 
     .sidenav-nav > .sidenav-navitem {
-        &.expandable > a {
+        &.expandable > .navitem {
             cursor: pointer;
         }
     }
@@ -60,11 +60,11 @@
             z-index: -1;
         }
 
-        &.selected > a {
+        &.selected > .navitem {
             color: #fff;
         }
 
-        &.selected > a::before {
+        &.selected > .navitem::before {
             content: " ";
             width: 2px;
             height: 20px;
@@ -74,12 +74,12 @@
             border-left: 2px #ffffff solid;
         }
 
-        &:hover > a {
+        &:hover > .navitem {
             background: transparent;
             color: #fff;
         }
 
-        > a {
+        > .navitem {
             color: #f9dcdd;
             padding: 0 14px 0 20px;
             line-height: 28px;

diff --git a/src/sidenav-navitem.styl b/src/sidenav-navitem.styl
@@ -2,46 +2,46 @@
     clear: both;
     position: relative;
 
-    &.highlighted > a {
+    &.highlighted > .navitem {
         cursor: default;
     }
 
-    &:hover > a::after {
+    &:hover > .navitem::after {
         background: #fff;
         opacity: .15;
     }
 
-    &.highlighted > a::after,
-    &:hover.highlighted > a::after {
+    &.highlighted > .navitem::after,
+    &:hover.highlighted > .navitem::after {
         background: #000;
         opacity: .2;
     }
 
-    &.highlighted.expanded > a::after,
-    &:hover.highlighted.expanded > a::after {
+    &.highlighted.expanded > .navitem::after,
+    &:hover.highlighted.expanded > .navitem::after {
         background: #000;
         opacity: .25;
     }
 
-    &.highlighted.selected.expanded > a::after,
-    &:hover.highlighted.selected.expanded > a::after {
+    &.highlighted.selected.expanded > .navitem::after,
+    &:hover.highlighted.selected.expanded > .navitem::after {
         background: #000;
         opacity: .2;
     }
 
-    &:hover > a .sidenav-nav-icon,
-    &.highlighted > a .sidenav-nav-icon {
+    &:hover > .navitem .navicon,
+    &.highlighted > .navitem .navicon {
         opacity: 1;
     }
 
-    &:hover > a .sidenav-nav-icon,
-    &:hover > a .sidenav-nav-text,
-    &.highlighted > a .sidenav-nav-icon,
-    &.highlighted > a .sidenav-nav-text {
+    &:hover > .navitem .navicon,
+    &:hover > .navitem .navtext,
+    &.highlighted > .navitem .navicon,
+    &.highlighted > .navitem .navtext {
         color: #fff;
     }
 
-    > a {
+    > .navitem {
         position: relative;
         display: block;
         line-height: 50px;
@@ -50,6 +50,11 @@
         text-decoration: none;
         color: #fff;
         font-size: 14px;
+        cursor: pointer;
+
+        &:focus {
+            outline: 0;
+        }
 
         // Background layer
         &::after {
@@ -65,7 +70,7 @@
         }
     }
 
-    > a .sidenav-nav-icon {
+    > .navitem .navicon {
         display: block;
         float: left;
         width: 64px;
@@ -84,7 +89,7 @@
             color: #f9dcdd;
         }
     }
-    > a .sidenav-nav-icon + .sidenav-nav-text {
+    > .navitem .navicon + .navtext {
         display: none;
     }
 }
diff --git a/src/sidenav-subnavitem.styl b/src/sidenav-subnavitem.styl
@@ -15,19 +15,24 @@
         margin-bottom: 8px;
     }
 
-    &.selected > a {
+    &.selected > .navitem {
         color: #db3d44;
         font-weight: bold;
         background: none;
         cursor: default;
     }
 
-    > a {
+    > .navitem {
         display: block;
         text-decoration: none;
         color: #222;
         font-size: 13px;
         line-height: 30px;
         padding: 0 24px;
+        cursor: pointer;
+
+        &:focus {
+            outline: 0;
+        }
     }
 }