A Lexicon Dropdown using metal-dropdown

LexiconDropdown.js

import core from 'metal/src/core';
import MetalDropdown from 'metal-dropdown';
import Soy from 'metal-soy';

import templates from './LexiconDropdown.soy';

/**
 * Implementation of the Lexicon Dropdown.
 * @see  {@link http://liferay.github.io/lexicon/content/dropdowns/|Lexicon Definition}
 */
class LexiconDropdown extends MetalDropdown {
}

/**
 * State definition.
 * @type {!Object}
 * @static
 */
LexiconDropdown.STATE = {
	/**
	 * CSS class (or list of classes) for styling the icon's main container.
	 * @type {array}
	 */
	items: {
		validator: core.isArray
	}
};

Soy.register(LexiconDropdown, templates);

export default LexiconDropdown;

LexiconDropdown.soy

{namespace LexiconDropdown}

/**
 * This renders an icon element based on the lexicon icon definition
 * found at http://liferay.github.io/lexicon/content/dropdowns/
 *
 * @param? alignedPosition
 * @param? classMap
 * @param? elementClasses
 * @param? expanded
 * @param items
 * @param? position
 * @param? positionClassOnMenu
 */
{template .render}
	{let $dropdownTrigger kind="html"}
		{call .trigger data="all" /}
	{/let}

	{call Dropdown.render data="all"}
		{param header: $dropdownTrigger /}
		{param body kind="html"}
			{call .dropdownItems data="all"}
				{param items: $items /}
			{/call}
		{/param}
		{param alignedPosition: $alignedPosition /}
		{param classMap: $classMap /}
		{param elementClasses: $elementClasses ?: 'dropdown' /}
		{param expanded: $expanded /}
		{param position: $position /}
		{param positionClassOnMenu: $positionClassOnMenu /}
	{/call}
{/template}

/**
 *
 * @param? expanded
 * @param? triggerCssClass
 * @param? triggerElement
 * @param? triggerLabel
 */
{template .trigger}
	{let $triggerAttributes kind="attributes"}
		aria-expanded="{$expanded}"
		class="dropdown-toggle{$triggerCssClass ? ' ' + $triggerCssClass : ''}"
		data-onclick="toggle"
		href="javascript:;"
		type="button"
	{/let}

	{let $triggerContent kind="html"}
		{$triggerLabel}<span class="icon-caret-down"></span>
	{/let}

	{if $triggerElement == 'a'}
		<a {$triggerAttributes}>
			{$triggerContent}
		</a>
	{else}
		<button {$triggerAttributes}>
			{$triggerContent}
		</button>
	{/if}
{/template}

/**
 *
 * @param items
 */
{template .dropdownItems}
	{if $items}
		{foreach $item in $items}
			{delcall LexiconDropdown.Item variant="$item.type" data="all" }
				{param item: $item /}
			{/delcall}
		{/foreach}
	{/if}
{/template}

/**
 *
 * @param item
 */
{deltemplate LexiconDropdown.Item}
	<li class="{$item.active ? 'active' : ''}{$item.disabled ? 'disabled' : ''}{$item.cssClass ? ' ' + $item.cssClass : ''}">
		<a class="{$item.linkCssClass ?: ''}" href="{$item.href}">{$item.label}</a>
	</li>
{/deltemplate}

/**
 *
 * @param item
 */
{deltemplate LexiconDropdown.Item variant="'divider'"}
	<li class="divider{$item.cssClass ? ' ' + $item.cssClass : ''}" role="presentation"></li>
{/deltemplate}

/**
 *
 * @param item
 */
{deltemplate LexiconDropdown.Item variant="'header'"}
	<li class="dropdown-header{$item.cssClass ? ' ' + $item.cssClass : ''}" role="presentation">{$item.label}</li>
{/deltemplate}

/**
 *
 * @param item
 */
{deltemplate LexiconDropdown.Item variant="'scroller'"}
	<li>
		<ul class="inline-scroller">
			{call .dropdownItems data="all"}
				{param items: $item.items /}
			{/call}
		</ul>
	</li>
{/deltemplate}