Commit e0cfebdd authored by Robert Knight's avatar Robert Knight

Render submenu item icons on the right as per mocks

parent 1dfc3b91
...@@ -43,6 +43,20 @@ function MenuItem({ ...@@ -43,6 +43,20 @@ function MenuItem({
'menu-item__label--submenu': isSubmenuItem, 'menu-item__label--submenu': isSubmenuItem,
}); });
const leftIconSpace = icon !== undefined || isSubmenuItem;
const rightIconSpace = icon !== undefined && isSubmenuItem;
let renderedIcon = null;
if (icon) {
renderedIcon = iconIsUrl ? (
<img className={iconClass} alt={iconAlt} src={icon} />
) : (
<SvgIcon name={icon} className="menu-item__icon" />
);
}
const leftIcon = isSubmenuItem ? null : renderedIcon;
const rightIcon = isSubmenuItem ? renderedIcon : null;
return ( return (
<div <div
aria-checked={isSelected} aria-checked={isSelected}
...@@ -55,15 +69,8 @@ function MenuItem({ ...@@ -55,15 +69,8 @@ function MenuItem({
role="menuitem" role="menuitem"
{...(onClick && onActivate('menuitem', onClick))} {...(onClick && onActivate('menuitem', onClick))}
> >
{icon !== undefined && ( {leftIconSpace && (
<div className="menu-item__icon-container"> <div className="menu-item__icon-container">{leftIcon}</div>
{icon &&
(iconIsUrl ? (
<img className={iconClass} alt={iconAlt} src={icon} />
) : (
<SvgIcon name={icon} className="menu-item__icon" />
))}
</div>
)} )}
{href && ( {href && (
<a <a
...@@ -76,6 +83,9 @@ function MenuItem({ ...@@ -76,6 +83,9 @@ function MenuItem({
</a> </a>
)} )}
{!href && <span className={labelClass}>{label}</span>} {!href && <span className={labelClass}>{label}</span>}
{rightIconSpace && (
<div className="menu-item__icon-container">{rightIcon}</div>
)}
{typeof isSubmenuVisible === 'boolean' && ( {typeof isSubmenuVisible === 'boolean' && (
<div <div
className="menu-item__toggle" className="menu-item__toggle"
......
...@@ -42,6 +42,19 @@ describe('MenuItem', () => { ...@@ -42,6 +42,19 @@ describe('MenuItem', () => {
assert.isTrue(wrapper.exists('SvgIcon[name="an-svg-icon"]')); assert.isTrue(wrapper.exists('SvgIcon[name="an-svg-icon"]'));
}); });
it('renders a blank space for an icon if `icon` is `null`', () => {
const wrapper = createMenuItem({ icon: null });
const iconSpace = wrapper.find('.menu-item__icon-container');
assert.equal(iconSpace.length, 1);
assert.equal(iconSpace.children().length, 0);
});
it('does not render a space for an icon if `icon` is missing', () => {
const wrapper = createMenuItem();
const iconSpace = wrapper.find('.menu-item__icon-container');
assert.equal(iconSpace.length, 0);
});
it('shows the submenu indicator if `isSubmenuVisible` is a boolean', () => { it('shows the submenu indicator if `isSubmenuVisible` is a boolean', () => {
const wrapper = createMenuItem({ isSubmenuVisible: true }); const wrapper = createMenuItem({ isSubmenuVisible: true });
assert.isTrue(wrapper.exists('SvgIcon[name="collapse-menu"]')); assert.isTrue(wrapper.exists('SvgIcon[name="collapse-menu"]'));
...@@ -61,4 +74,28 @@ describe('MenuItem', () => { ...@@ -61,4 +74,28 @@ describe('MenuItem', () => {
wrapper.find('.menu-item__toggle').simulate('click'); wrapper.find('.menu-item__toggle').simulate('click');
assert.called(onToggleSubmenu); assert.called(onToggleSubmenu);
}); });
it('renders top-level menu item icons on the left', () => {
const wrapper = createMenuItem({ icon: 'an-svg-icon' });
const iconSpaces = wrapper.find('.menu-item__icon-container');
// There should be only one icon space, on the left.
assert.equal(iconSpaces.length, 1);
assert.equal(iconSpaces.at(0).children().length, 1);
});
it('renders submenu item icons on the right', () => {
const wrapper = createMenuItem({
icon: 'an-svg-icon',
isSubmenuItem: true,
});
const iconSpaces = wrapper.find('.menu-item__icon-container');
assert.equal(iconSpaces.length, 2);
// There should be a space for the parent item's icon.
assert.equal(iconSpaces.at(0).children().length, 0);
// The actual icon for the submenu should be shown on the right.
assert.equal(iconSpaces.at(1).children().length, 1);
});
}); });
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment