Skip to content

Commit

Permalink
fix(navview): use span instead of link to avoid nested links (#97)
Browse files Browse the repository at this point in the history
  • Loading branch information
@arturmiz
arturmiz authored Jan 18, 2020
1 parent 1e2c947 commit ef5384e
Show file tree
Hide file tree
Showing 5 changed files with 23 additions and 22 deletions.
12 changes: 4 additions & 8 deletions __tests__/__snapshots__/navview.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,10 @@ exports[`NavView generates correct structure renders correctly 1`] = `
</div>
<ul class="vnt-navview__items">
<li class="vnt-navview__item-header">Nav item header</li>
<li class="vnt-navview__item vnt-navview__item--active">
<a href="#" class="vnt-navview__item-link"><span class="vnt-icon vnt-navview__item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M14-15a.969.969,0,0,1,.391.078,1.016,1.016,0,0,1,.316.215,1.016,1.016,0,0,1,.215.316A.969.969,0,0,1,15-14V-1H2.789L1-2.8V-14a.969.969,0,0,1,.078-.391,1.016,1.016,0,0,1,.215-.316,1.016,1.016,0,0,1,.316-.215A.969.969,0,0,1,2-15ZM4-9h8v-5H4Zm6,4H5v3H6V-4H7v2h3Zm4-9H13v6H3v-6H2V-3.211L3.2-2H4V-6h7v4h3Z" transform="translate(-1 15)"></path></svg></span> <span class="vnt-navview__item-label">Link 1</span></a>
<li class="vnt-navview__item vnt-navview__item--active"><span class="vnt-navview__item-link"><span class="vnt-icon vnt-navview__item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M14-15a.969.969,0,0,1,.391.078,1.016,1.016,0,0,1,.316.215,1.016,1.016,0,0,1,.215.316A.969.969,0,0,1,15-14V-1H2.789L1-2.8V-14a.969.969,0,0,1,.078-.391,1.016,1.016,0,0,1,.215-.316,1.016,1.016,0,0,1,.316-.215A.969.969,0,0,1,2-15ZM4-9h8v-5H4Zm6,4H5v3H6V-4H7v2h3Zm4-9H13v6H3v-6H2V-3.211L3.2-2H4V-6h7v4h3Z" transform="translate(-1 15)"></path></svg></span> <span class="vnt-navview__item-label">Link 1</span></span>
</li>
<li class="vnt-navview__item-separator"></li>
<li class="vnt-navview__item">
<a href="#" class="vnt-navview__item-link"><span class="vnt-icon vnt-navview__item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 16"><path d="M10.391-6.6a6.693,6.693,0,0,1,1.918,1.027,6.785,6.785,0,0,1,1.453,1.527,6.964,6.964,0,0,1,.918,1.9A7.2,7.2,0,0,1,15,0H14a6.127,6.127,0,0,0-.457-2.379,5.824,5.824,0,0,0-1.262-1.9,5.824,5.824,0,0,0-1.9-1.262A6.127,6.127,0,0,0,8-6a6.089,6.089,0,0,0-1.609.211,6.029,6.029,0,0,0-1.441.6,5.85,5.85,0,0,0-1.211.93,5.85,5.85,0,0,0-.93,1.211,6.029,6.029,0,0,0-.6,1.441A6.089,6.089,0,0,0,2,0H1a7.031,7.031,0,0,1,.328-2.152,6.963,6.963,0,0,1,.93-1.887A6.865,6.865,0,0,1,3.715-5.555a7.09,7.09,0,0,1,1.91-1.039,4.913,4.913,0,0,1-1.094-.8,4.964,4.964,0,0,1-.824-1.043A5.121,5.121,0,0,1,3.184-9.66,4.922,4.922,0,0,1,3-11a4.889,4.889,0,0,1,.391-1.949,5.03,5.03,0,0,1,1.07-1.59,5.03,5.03,0,0,1,1.59-1.07A4.889,4.889,0,0,1,8-16a4.889,4.889,0,0,1,1.949.391,5.03,5.03,0,0,1,1.59,1.07,5.03,5.03,0,0,1,1.07,1.59A4.89,4.89,0,0,1,13-11a4.88,4.88,0,0,1-.184,1.336,5.066,5.066,0,0,1-.523,1.219,5.172,5.172,0,0,1-.82,1.043A4.837,4.837,0,0,1,10.391-6.6ZM4-11a3.851,3.851,0,0,0,.316,1.555,4.081,4.081,0,0,0,.859,1.27,4.081,4.081,0,0,0,1.27.859A3.851,3.851,0,0,0,8-7a3.851,3.851,0,0,0,1.555-.316,4.081,4.081,0,0,0,1.27-.859,4.081,4.081,0,0,0,.859-1.27A3.851,3.851,0,0,0,12-11a3.851,3.851,0,0,0-.316-1.555,4.081,4.081,0,0,0-.859-1.27,4.081,4.081,0,0,0-1.27-.859A3.851,3.851,0,0,0,8-15a3.851,3.851,0,0,0-1.555.316,4.081,4.081,0,0,0-1.27.859,4.081,4.081,0,0,0-.859,1.27A3.851,3.851,0,0,0,4-11Z" transform="translate(-1 16)"></path></svg></span> <span class="vnt-navview__item-label">Link 2</span></a>
<li class="vnt-navview__item"><span class="vnt-navview__item-link"><span class="vnt-icon vnt-navview__item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 16"><path d="M10.391-6.6a6.693,6.693,0,0,1,1.918,1.027,6.785,6.785,0,0,1,1.453,1.527,6.964,6.964,0,0,1,.918,1.9A7.2,7.2,0,0,1,15,0H14a6.127,6.127,0,0,0-.457-2.379,5.824,5.824,0,0,0-1.262-1.9,5.824,5.824,0,0,0-1.9-1.262A6.127,6.127,0,0,0,8-6a6.089,6.089,0,0,0-1.609.211,6.029,6.029,0,0,0-1.441.6,5.85,5.85,0,0,0-1.211.93,5.85,5.85,0,0,0-.93,1.211,6.029,6.029,0,0,0-.6,1.441A6.089,6.089,0,0,0,2,0H1a7.031,7.031,0,0,1,.328-2.152,6.963,6.963,0,0,1,.93-1.887A6.865,6.865,0,0,1,3.715-5.555a7.09,7.09,0,0,1,1.91-1.039,4.913,4.913,0,0,1-1.094-.8,4.964,4.964,0,0,1-.824-1.043A5.121,5.121,0,0,1,3.184-9.66,4.922,4.922,0,0,1,3-11a4.889,4.889,0,0,1,.391-1.949,5.03,5.03,0,0,1,1.07-1.59,5.03,5.03,0,0,1,1.59-1.07A4.889,4.889,0,0,1,8-16a4.889,4.889,0,0,1,1.949.391,5.03,5.03,0,0,1,1.59,1.07,5.03,5.03,0,0,1,1.07,1.59A4.89,4.89,0,0,1,13-11a4.88,4.88,0,0,1-.184,1.336,5.066,5.066,0,0,1-.523,1.219,5.172,5.172,0,0,1-.82,1.043A4.837,4.837,0,0,1,10.391-6.6ZM4-11a3.851,3.851,0,0,0,.316,1.555,4.081,4.081,0,0,0,.859,1.27,4.081,4.081,0,0,0,1.27.859A3.851,3.851,0,0,0,8-7a3.851,3.851,0,0,0,1.555-.316,4.081,4.081,0,0,0,1.27-.859,4.081,4.081,0,0,0,.859-1.27A3.851,3.851,0,0,0,12-11a3.851,3.851,0,0,0-.316-1.555,4.081,4.081,0,0,0-.859-1.27,4.081,4.081,0,0,0-1.27-.859A3.851,3.851,0,0,0,8-15a3.851,3.851,0,0,0-1.555.316,4.081,4.081,0,0,0-1.27.859,4.081,4.081,0,0,0-.859,1.27A3.851,3.851,0,0,0,4-11Z" transform="translate(-1 16)"></path></svg></span> <span class="vnt-navview__item-label">Link 2</span></span>
</li>
</ul>
</div>
Expand Down Expand Up @@ -70,11 +68,9 @@ exports[`NavView when using custom pane footer renders correctly 1`] = `
<ul class="vnt-navview__items"></ul>
</div>
<ul class="vnt-navview__pane-footer">
<li class="vnt-navview__item">
<a href="#" class="vnt-navview__item-link"><span class="vnt-icon vnt-navview__item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 16"><path d="M10.391-6.6a6.693,6.693,0,0,1,1.918,1.027,6.785,6.785,0,0,1,1.453,1.527,6.964,6.964,0,0,1,.918,1.9A7.2,7.2,0,0,1,15,0H14a6.127,6.127,0,0,0-.457-2.379,5.824,5.824,0,0,0-1.262-1.9,5.824,5.824,0,0,0-1.9-1.262A6.127,6.127,0,0,0,8-6a6.089,6.089,0,0,0-1.609.211,6.029,6.029,0,0,0-1.441.6,5.85,5.85,0,0,0-1.211.93,5.85,5.85,0,0,0-.93,1.211,6.029,6.029,0,0,0-.6,1.441A6.089,6.089,0,0,0,2,0H1a7.031,7.031,0,0,1,.328-2.152,6.963,6.963,0,0,1,.93-1.887A6.865,6.865,0,0,1,3.715-5.555a7.09,7.09,0,0,1,1.91-1.039,4.913,4.913,0,0,1-1.094-.8,4.964,4.964,0,0,1-.824-1.043A5.121,5.121,0,0,1,3.184-9.66,4.922,4.922,0,0,1,3-11a4.889,4.889,0,0,1,.391-1.949,5.03,5.03,0,0,1,1.07-1.59,5.03,5.03,0,0,1,1.59-1.07A4.889,4.889,0,0,1,8-16a4.889,4.889,0,0,1,1.949.391,5.03,5.03,0,0,1,1.59,1.07,5.03,5.03,0,0,1,1.07,1.59A4.89,4.89,0,0,1,13-11a4.88,4.88,0,0,1-.184,1.336,5.066,5.066,0,0,1-.523,1.219,5.172,5.172,0,0,1-.82,1.043A4.837,4.837,0,0,1,10.391-6.6ZM4-11a3.851,3.851,0,0,0,.316,1.555,4.081,4.081,0,0,0,.859,1.27,4.081,4.081,0,0,0,1.27.859A3.851,3.851,0,0,0,8-7a3.851,3.851,0,0,0,1.555-.316,4.081,4.081,0,0,0,1.27-.859,4.081,4.081,0,0,0,.859-1.27A3.851,3.851,0,0,0,12-11a3.851,3.851,0,0,0-.316-1.555,4.081,4.081,0,0,0-.859-1.27,4.081,4.081,0,0,0-1.27-.859A3.851,3.851,0,0,0,8-15a3.851,3.851,0,0,0-1.555.316,4.081,4.081,0,0,0-1.27.859,4.081,4.081,0,0,0-.859,1.27A3.851,3.851,0,0,0,4-11Z" transform="translate(-1 16)"></path></svg></span> <span class="vnt-navview__item-label">Account</span></a>
<li class="vnt-navview__item"><span class="vnt-navview__item-link"><span class="vnt-icon vnt-navview__item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 16"><path d="M10.391-6.6a6.693,6.693,0,0,1,1.918,1.027,6.785,6.785,0,0,1,1.453,1.527,6.964,6.964,0,0,1,.918,1.9A7.2,7.2,0,0,1,15,0H14a6.127,6.127,0,0,0-.457-2.379,5.824,5.824,0,0,0-1.262-1.9,5.824,5.824,0,0,0-1.9-1.262A6.127,6.127,0,0,0,8-6a6.089,6.089,0,0,0-1.609.211,6.029,6.029,0,0,0-1.441.6,5.85,5.85,0,0,0-1.211.93,5.85,5.85,0,0,0-.93,1.211,6.029,6.029,0,0,0-.6,1.441A6.089,6.089,0,0,0,2,0H1a7.031,7.031,0,0,1,.328-2.152,6.963,6.963,0,0,1,.93-1.887A6.865,6.865,0,0,1,3.715-5.555a7.09,7.09,0,0,1,1.91-1.039,4.913,4.913,0,0,1-1.094-.8,4.964,4.964,0,0,1-.824-1.043A5.121,5.121,0,0,1,3.184-9.66,4.922,4.922,0,0,1,3-11a4.889,4.889,0,0,1,.391-1.949,5.03,5.03,0,0,1,1.07-1.59,5.03,5.03,0,0,1,1.59-1.07A4.889,4.889,0,0,1,8-16a4.889,4.889,0,0,1,1.949.391,5.03,5.03,0,0,1,1.59,1.07,5.03,5.03,0,0,1,1.07,1.59A4.89,4.89,0,0,1,13-11a4.88,4.88,0,0,1-.184,1.336,5.066,5.066,0,0,1-.523,1.219,5.172,5.172,0,0,1-.82,1.043A4.837,4.837,0,0,1,10.391-6.6ZM4-11a3.851,3.851,0,0,0,.316,1.555,4.081,4.081,0,0,0,.859,1.27,4.081,4.081,0,0,0,1.27.859A3.851,3.851,0,0,0,8-7a3.851,3.851,0,0,0,1.555-.316,4.081,4.081,0,0,0,1.27-.859,4.081,4.081,0,0,0,.859-1.27A3.851,3.851,0,0,0,12-11a3.851,3.851,0,0,0-.316-1.555,4.081,4.081,0,0,0-.859-1.27,4.081,4.081,0,0,0-1.27-.859A3.851,3.851,0,0,0,8-15a3.851,3.851,0,0,0-1.555.316,4.081,4.081,0,0,0-1.27.859,4.081,4.081,0,0,0-.859,1.27A3.851,3.851,0,0,0,4-11Z" transform="translate(-1 16)"></path></svg></span> <span class="vnt-navview__item-label">Account</span></span>
</li>
<li class="vnt-navview__item">
<a href="#" class="vnt-navview__item-link"><span class="vnt-icon vnt-navview__item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M13.93-8.281q0,.07,0,.141t0,.141q0,.07,0,.141t0,.141l2.023,1.258L14.711-3.469,12.391-4q-.187.2-.391.391l.531,2.32L9.539-.047,8.281-2.07q-.07,0-.141,0T8-2.062q-.07,0-.141,0t-.141,0L6.461-.047,3.469-1.289,4-3.609Q3.8-3.8,3.609-4l-2.32.531L.047-6.461,2.07-7.719q0-.07,0-.141t0-.141q0-.07,0-.141t0-.141L.047-9.539l1.242-2.992L3.609-12q.187-.2.391-.391l-.531-2.32,2.992-1.242L7.719-13.93q.07,0,.141,0t.141,0q.07,0,.141,0t.141,0l1.258-2.023,2.992,1.242L12-12.391q.2.188.391.391l2.32-.531,1.242,2.992Zm-.914,1.016q.016-.187.031-.371t.016-.371q0-.18-.016-.367t-.031-.367l1.844-1.148-.672-1.625-2.117.492a6.788,6.788,0,0,0-.5-.547q-.254-.25-.551-.5l.492-2.117-1.625-.672L8.734-13.016l-.367-.031Q8.18-13.062,8-13.062t-.371.016l-.371.031L6.109-14.859l-1.625.672.492,2.117a6.788,6.788,0,0,0-.547.5q-.25.254-.5.551l-2.117-.492L1.141-9.891,2.984-8.734q-.016.188-.031.371t-.016.371q0,.18.016.367t.031.367L1.141-6.109l.672,1.625L3.93-4.977a6.788,6.788,0,0,0,.5.547q.254.25.551.5L4.484-1.812l1.625.672L7.266-2.984l.367.031q.188.016.367.016t.371-.016l.371-.031L9.891-1.141l1.625-.672L11.023-3.93a6.788,6.788,0,0,0,.547-.5q.25-.254.5-.551l2.117.492.672-1.625ZM8-10.937a2.863,2.863,0,0,1,1.145.23,2.964,2.964,0,0,1,.934.629,2.964,2.964,0,0,1,.629.934A2.863,2.863,0,0,1,10.938-8a2.863,2.863,0,0,1-.23,1.145,2.964,2.964,0,0,1-.629.934,2.964,2.964,0,0,1-.934.629A2.863,2.863,0,0,1,8-5.062a2.863,2.863,0,0,1-1.145-.23,2.964,2.964,0,0,1-.934-.629,2.964,2.964,0,0,1-.629-.934A2.863,2.863,0,0,1,5.063-8a2.863,2.863,0,0,1,.23-1.145,2.964,2.964,0,0,1,.629-.934,2.964,2.964,0,0,1,.934-.629A2.863,2.863,0,0,1,8-10.937Zm0,5a2.027,2.027,0,0,0,.8-.16,2.066,2.066,0,0,0,.656-.441A2.066,2.066,0,0,0,9.9-7.2a2.027,2.027,0,0,0,.16-.8,2.027,2.027,0,0,0-.16-.8,2.066,2.066,0,0,0-.441-.656A2.066,2.066,0,0,0,8.8-9.9a2.027,2.027,0,0,0-.8-.16,2.027,2.027,0,0,0-.8.16,2.066,2.066,0,0,0-.656.441A2.066,2.066,0,0,0,6.1-8.8a2.027,2.027,0,0,0-.16.8,2.027,2.027,0,0,0,.16.8,2.066,2.066,0,0,0,.441.656A2.066,2.066,0,0,0,7.2-6.1,2.027,2.027,0,0,0,8-5.937Z" transform="translate(-0.047 15.953)"></path></svg></span> <span class="vnt-navview__item-label">Settings</span></a>
<li class="vnt-navview__item"><span class="vnt-navview__item-link"><span class="vnt-icon vnt-navview__item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M13.93-8.281q0,.07,0,.141t0,.141q0,.07,0,.141t0,.141l2.023,1.258L14.711-3.469,12.391-4q-.187.2-.391.391l.531,2.32L9.539-.047,8.281-2.07q-.07,0-.141,0T8-2.062q-.07,0-.141,0t-.141,0L6.461-.047,3.469-1.289,4-3.609Q3.8-3.8,3.609-4l-2.32.531L.047-6.461,2.07-7.719q0-.07,0-.141t0-.141q0-.07,0-.141t0-.141L.047-9.539l1.242-2.992L3.609-12q.187-.2.391-.391l-.531-2.32,2.992-1.242L7.719-13.93q.07,0,.141,0t.141,0q.07,0,.141,0t.141,0l1.258-2.023,2.992,1.242L12-12.391q.2.188.391.391l2.32-.531,1.242,2.992Zm-.914,1.016q.016-.187.031-.371t.016-.371q0-.18-.016-.367t-.031-.367l1.844-1.148-.672-1.625-2.117.492a6.788,6.788,0,0,0-.5-.547q-.254-.25-.551-.5l.492-2.117-1.625-.672L8.734-13.016l-.367-.031Q8.18-13.062,8-13.062t-.371.016l-.371.031L6.109-14.859l-1.625.672.492,2.117a6.788,6.788,0,0,0-.547.5q-.25.254-.5.551l-2.117-.492L1.141-9.891,2.984-8.734q-.016.188-.031.371t-.016.371q0,.18.016.367t.031.367L1.141-6.109l.672,1.625L3.93-4.977a6.788,6.788,0,0,0,.5.547q.254.25.551.5L4.484-1.812l1.625.672L7.266-2.984l.367.031q.188.016.367.016t.371-.016l.371-.031L9.891-1.141l1.625-.672L11.023-3.93a6.788,6.788,0,0,0,.547-.5q.25-.254.5-.551l2.117.492.672-1.625ZM8-10.937a2.863,2.863,0,0,1,1.145.23,2.964,2.964,0,0,1,.934.629,2.964,2.964,0,0,1,.629.934A2.863,2.863,0,0,1,10.938-8a2.863,2.863,0,0,1-.23,1.145,2.964,2.964,0,0,1-.629.934,2.964,2.964,0,0,1-.934.629A2.863,2.863,0,0,1,8-5.062a2.863,2.863,0,0,1-1.145-.23,2.964,2.964,0,0,1-.934-.629,2.964,2.964,0,0,1-.629-.934A2.863,2.863,0,0,1,5.063-8a2.863,2.863,0,0,1,.23-1.145,2.964,2.964,0,0,1,.629-.934,2.964,2.964,0,0,1,.934-.629A2.863,2.863,0,0,1,8-10.937Zm0,5a2.027,2.027,0,0,0,.8-.16,2.066,2.066,0,0,0,.656-.441A2.066,2.066,0,0,0,9.9-7.2a2.027,2.027,0,0,0,.16-.8,2.027,2.027,0,0,0-.16-.8,2.066,2.066,0,0,0-.441-.656A2.066,2.066,0,0,0,8.8-9.9a2.027,2.027,0,0,0-.8-.16,2.027,2.027,0,0,0-.8.16,2.066,2.066,0,0,0-.656.441A2.066,2.066,0,0,0,6.1-8.8a2.027,2.027,0,0,0-.16.8,2.027,2.027,0,0,0,.16.8,2.066,2.066,0,0,0,.441.656A2.066,2.066,0,0,0,7.2-6.1,2.027,2.027,0,0,0,8-5.937Z" transform="translate(-0.047 15.953)"></path></svg></span> <span class="vnt-navview__item-label">Settings</span></span>
</li>
</ul>
</aside>
Expand Down
6 changes: 2 additions & 4 deletions __tests__/__snapshots__/navviewItem.test.js.snap
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`NavviewItem by default renders correctly 1`] = `
<li class="vnt-navview__item">
<a href="#" class="vnt-navview__item-link"><span class="vnt-icon vnt-navview__item-icon"><!----></span> <span class="vnt-navview__item-label"></span></a>
<li class="vnt-navview__item"><span class="vnt-navview__item-link"><span class="vnt-icon vnt-navview__item-icon"><!----></span> <span class="vnt-navview__item-label"></span></span>
</li>
`;

exports[`NavviewItem when icon is set renders correctly 1`] = `
<li class="vnt-navview__item">
<a href="#" class="vnt-navview__item-link"><span class="vnt-icon vnt-navview__item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M13.93-8.281q0,.07,0,.141t0,.141q0,.07,0,.141t0,.141l2.023,1.258L14.711-3.469,12.391-4q-.187.2-.391.391l.531,2.32L9.539-.047,8.281-2.07q-.07,0-.141,0T8-2.062q-.07,0-.141,0t-.141,0L6.461-.047,3.469-1.289,4-3.609Q3.8-3.8,3.609-4l-2.32.531L.047-6.461,2.07-7.719q0-.07,0-.141t0-.141q0-.07,0-.141t0-.141L.047-9.539l1.242-2.992L3.609-12q.187-.2.391-.391l-.531-2.32,2.992-1.242L7.719-13.93q.07,0,.141,0t.141,0q.07,0,.141,0t.141,0l1.258-2.023,2.992,1.242L12-12.391q.2.188.391.391l2.32-.531,1.242,2.992Zm-.914,1.016q.016-.187.031-.371t.016-.371q0-.18-.016-.367t-.031-.367l1.844-1.148-.672-1.625-2.117.492a6.788,6.788,0,0,0-.5-.547q-.254-.25-.551-.5l.492-2.117-1.625-.672L8.734-13.016l-.367-.031Q8.18-13.062,8-13.062t-.371.016l-.371.031L6.109-14.859l-1.625.672.492,2.117a6.788,6.788,0,0,0-.547.5q-.25.254-.5.551l-2.117-.492L1.141-9.891,2.984-8.734q-.016.188-.031.371t-.016.371q0,.18.016.367t.031.367L1.141-6.109l.672,1.625L3.93-4.977a6.788,6.788,0,0,0,.5.547q.254.25.551.5L4.484-1.812l1.625.672L7.266-2.984l.367.031q.188.016.367.016t.371-.016l.371-.031L9.891-1.141l1.625-.672L11.023-3.93a6.788,6.788,0,0,0,.547-.5q.25-.254.5-.551l2.117.492.672-1.625ZM8-10.937a2.863,2.863,0,0,1,1.145.23,2.964,2.964,0,0,1,.934.629,2.964,2.964,0,0,1,.629.934A2.863,2.863,0,0,1,10.938-8a2.863,2.863,0,0,1-.23,1.145,2.964,2.964,0,0,1-.629.934,2.964,2.964,0,0,1-.934.629A2.863,2.863,0,0,1,8-5.062a2.863,2.863,0,0,1-1.145-.23,2.964,2.964,0,0,1-.934-.629,2.964,2.964,0,0,1-.629-.934A2.863,2.863,0,0,1,5.063-8a2.863,2.863,0,0,1,.23-1.145,2.964,2.964,0,0,1,.629-.934,2.964,2.964,0,0,1,.934-.629A2.863,2.863,0,0,1,8-10.937Zm0,5a2.027,2.027,0,0,0,.8-.16,2.066,2.066,0,0,0,.656-.441A2.066,2.066,0,0,0,9.9-7.2a2.027,2.027,0,0,0,.16-.8,2.027,2.027,0,0,0-.16-.8,2.066,2.066,0,0,0-.441-.656A2.066,2.066,0,0,0,8.8-9.9a2.027,2.027,0,0,0-.8-.16,2.027,2.027,0,0,0-.8.16,2.066,2.066,0,0,0-.656.441A2.066,2.066,0,0,0,6.1-8.8a2.027,2.027,0,0,0-.16.8,2.027,2.027,0,0,0,.16.8,2.066,2.066,0,0,0,.441.656A2.066,2.066,0,0,0,7.2-6.1,2.027,2.027,0,0,0,8-5.937Z" transform="translate(-0.047 15.953)"></path></svg></span> <span class="vnt-navview__item-label">Settings</span></a>
<li class="vnt-navview__item"><span class="vnt-navview__item-link"><span class="vnt-icon vnt-navview__item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M13.93-8.281q0,.07,0,.141t0,.141q0,.07,0,.141t0,.141l2.023,1.258L14.711-3.469,12.391-4q-.187.2-.391.391l.531,2.32L9.539-.047,8.281-2.07q-.07,0-.141,0T8-2.062q-.07,0-.141,0t-.141,0L6.461-.047,3.469-1.289,4-3.609Q3.8-3.8,3.609-4l-2.32.531L.047-6.461,2.07-7.719q0-.07,0-.141t0-.141q0-.07,0-.141t0-.141L.047-9.539l1.242-2.992L3.609-12q.187-.2.391-.391l-.531-2.32,2.992-1.242L7.719-13.93q.07,0,.141,0t.141,0q.07,0,.141,0t.141,0l1.258-2.023,2.992,1.242L12-12.391q.2.188.391.391l2.32-.531,1.242,2.992Zm-.914,1.016q.016-.187.031-.371t.016-.371q0-.18-.016-.367t-.031-.367l1.844-1.148-.672-1.625-2.117.492a6.788,6.788,0,0,0-.5-.547q-.254-.25-.551-.5l.492-2.117-1.625-.672L8.734-13.016l-.367-.031Q8.18-13.062,8-13.062t-.371.016l-.371.031L6.109-14.859l-1.625.672.492,2.117a6.788,6.788,0,0,0-.547.5q-.25.254-.5.551l-2.117-.492L1.141-9.891,2.984-8.734q-.016.188-.031.371t-.016.371q0,.18.016.367t.031.367L1.141-6.109l.672,1.625L3.93-4.977a6.788,6.788,0,0,0,.5.547q.254.25.551.5L4.484-1.812l1.625.672L7.266-2.984l.367.031q.188.016.367.016t.371-.016l.371-.031L9.891-1.141l1.625-.672L11.023-3.93a6.788,6.788,0,0,0,.547-.5q.25-.254.5-.551l2.117.492.672-1.625ZM8-10.937a2.863,2.863,0,0,1,1.145.23,2.964,2.964,0,0,1,.934.629,2.964,2.964,0,0,1,.629.934A2.863,2.863,0,0,1,10.938-8a2.863,2.863,0,0,1-.23,1.145,2.964,2.964,0,0,1-.629.934,2.964,2.964,0,0,1-.934.629A2.863,2.863,0,0,1,8-5.062a2.863,2.863,0,0,1-1.145-.23,2.964,2.964,0,0,1-.934-.629,2.964,2.964,0,0,1-.629-.934A2.863,2.863,0,0,1,5.063-8a2.863,2.863,0,0,1,.23-1.145,2.964,2.964,0,0,1,.629-.934,2.964,2.964,0,0,1,.934-.629A2.863,2.863,0,0,1,8-10.937Zm0,5a2.027,2.027,0,0,0,.8-.16,2.066,2.066,0,0,0,.656-.441A2.066,2.066,0,0,0,9.9-7.2a2.027,2.027,0,0,0,.16-.8,2.027,2.027,0,0,0-.16-.8,2.066,2.066,0,0,0-.441-.656A2.066,2.066,0,0,0,8.8-9.9a2.027,2.027,0,0,0-.8-.16,2.027,2.027,0,0,0-.8.16,2.066,2.066,0,0,0-.656.441A2.066,2.066,0,0,0,6.1-8.8a2.027,2.027,0,0,0-.16.8,2.027,2.027,0,0,0,.16.8,2.066,2.066,0,0,0,.441.656A2.066,2.066,0,0,0,7.2-6.1,2.027,2.027,0,0,0,8-5.937Z" transform="translate(-0.047 15.953)"></path></svg></span> <span class="vnt-navview__item-label">Settings</span></span>
</li>
`;
6 changes: 4 additions & 2 deletions __tests__/navviewItem.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import VntNavviewItem from '@/components/navview/MenuItem.vue';
describe('NavviewItem', () => {
let wrapper;

const linkSelector = '.vnt-navview__item-link';

describe('by default', () => {

beforeAll(() => {
Expand All @@ -28,7 +30,7 @@ describe('NavviewItem', () => {

test('when clicked, no error is thrown', () => {
expect(() => {
wrapper.find('a').trigger('click');
wrapper.find(linkSelector).trigger('click');
}).not.toThrow();
});

Expand Down Expand Up @@ -67,7 +69,7 @@ describe('NavviewItem', () => {
});

test('when clicked, click handler is invoked', () => {
wrapper.find('a').trigger('click');
wrapper.find(linkSelector).trigger('click');
expect(mockClick).toHaveBeenCalled();
});

Expand Down
17 changes: 10 additions & 7 deletions src/components/navview/MenuItem.vue
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
<template>
<li class="vnt-navview__item"
:class="{'vnt-navview__item--active': active}">
<a href="#"
class="vnt-navview__item-link"
@click="handleClick">
<span class="vnt-navview__item-link"
@click="handleClick">
<vnt-icon :name="icon"
class="vnt-navview__item-icon" />
<span class="vnt-navview__item-label">
<slot></slot>
</span>
</a>
</span>
</li>
</template>

Expand Down Expand Up @@ -42,9 +41,8 @@ export default {
handleClick(event) {
if (typeof this.click === 'function') {
this.click();
event.preventDefault();
}
event.preventDefault();
}
}
};
Expand All @@ -69,9 +67,14 @@ export default {
.vnt-navview__item-link {
width: 100%;
color: #000100;
text-decoration: none;
display: flex;
align-items: center;
cursor: pointer;
a {
color: #000100;
text-decoration: none;
}
}
.vnt-navview__item-icon {
Expand Down
Loading

0 comments on commit ef5384e

Please sign in to comment.