TASK: Add minimalistic dropdown

src/components.d.ts

@@ -110,12 +110,51 @@ declare global {
 }
 
 
+declare global {
+
+  namespace StencilComponents {
+    interface NeosDropdownItem {
+      'icon': string;
+      'iconType': string;
+      'label': string;
+    }
+  }
+
+  interface HTMLNeosDropdownItemElement extends StencilComponents.NeosDropdownItem, HTMLStencilElement {}
+
+  var HTMLNeosDropdownItemElement: {
+    prototype: HTMLNeosDropdownItemElement;
+    new (): HTMLNeosDropdownItemElement;
+  };
+  interface HTMLElementTagNameMap {
+    'neos-dropdown-item': HTMLNeosDropdownItemElement;
+  }
+  interface ElementTagNameMap {
+    'neos-dropdown-item': HTMLNeosDropdownItemElement;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      'neos-dropdown-item': JSXElements.NeosDropdownItemAttributes;
+    }
+  }
+  namespace JSXElements {
+    export interface NeosDropdownItemAttributes extends HTMLAttributes {
+      'icon'?: string;
+      'iconType'?: string;
+      'label'?: string;
+      'onNeosItemSelected'?: (event: CustomEvent<string>) => void;
+    }
+  }
+}
+
+
 declare global {
 
   namespace StencilComponents {
     interface NeosDropdown {
       'label': string;
-      'theme': string;
+      'placeholder': string;
+      'selectedLabel': string;
     }
   }
 
@@ -139,7 +178,8 @@ declare global {
   namespace JSXElements {
     export interface NeosDropdownAttributes extends HTMLAttributes {
       'label'?: string;
-      'theme'?: string;
+      'placeholder'?: string;
+      'selectedLabel'?: string;
     }
   }
 }

src/components/dropdown-item/dropdown-item.tsx

+import {Component, Prop, Event} from '@stencil/core';
+
+@Component({
+  tag: 'neos-dropdown-item',
+  styleUrl: 'styles/dropdown-item.dark.scss',
+  shadow: true
+})
+export class DropdownItem {
+  @Event() neosItemSelected: EventEmitter<string>;
+
+  @Prop() label: string;
+  @Prop() icon: string;
+  @Prop() iconType: string = 'solid';
+
+  neosItemSelectedHandler() {
+    this.neosItemSelected.emit(this.label);
+  }
+
+  render() {
+    return (
+      <a href="#" class="dropdown-item" onClick={() => this.neosItemSelectedHandler()}>
+        { this.icon ? <div class="icon">
+          <neos-icon name={this.icon} type={this.iconType}/>
+        </div> : null }
+        <div class="selected-label">{this.label}</div>
+      </a>
+    );
+  }
+}

src/components/dropdown-item/styles/dropdown-item.dark.scss

+@import "./dropdown-item";
+@import "./dropdown-item.dark.vars";
+
+:host {
+  color: $text-dark-color-value;
+  font-family: $font-family-dark-base;
+  font-weight: 400;
+  font-size: $font-size-dark-base;
+  line-height: 1.1;
+}
+
+.dropdown-item {
+  display: flex;
+  background-color: $background-dark-color;
+  border: 0;
+  outline: 1px solid neos-color($colors-dark, 'darker');
+  box-sizing: content-box;
+  color: inherit;
+  padding: 0 0 0 $content-padding;
+  text-decoration: none;
+
+  &:hover {
+    background-color: neos-color($colors-dark, 'primary');
+  }
+}
+
+.icon {
+  margin-right: .65em;
+}
+
+.toggle {
+  margin-left: auto;
+}
+
+.selected-value {
+
+}

src/components/dropdown-item/styles/dropdown-item.dark.vars.scss

+@import "../../../themes/neos.globals.dark";
+

src/components/dropdown-item/styles/dropdown-item.scss

+@import "./dropdown-item.vars";
+
+:host {
+  @include font-smoothing();
+
+  display: block;
+}
+
+.dropdown-item {
+  flex: 1;
+  border: 0;
+  box-sizing: border-box;
+  height: $grid-unit;
+  line-height: $grid-unit;
+
+  transition: all ease-in 50ms;
+}

src/components/dropdown-item/styles/dropdown-item.vars.scss

+@import "../../../themes/neos.globals";

src/components/dropdown/dropdown.tsx

+import {Component, Prop, State, Listen} from '@stencil/core';
+import classnames from 'classnames';
+
+@Component({
+  tag: 'neos-dropdown',
+  styleUrl: 'styles/dropdown.dark.scss',
+  shadow: true
+})
+export class Dropdown {
+
+  @Prop() label: string;
+  @Prop() selectedLabel: string;
+  @Prop() placeholder: string = 'Select a value...';
+
+  @State() isOpen: boolean = false;
+  @State() activeLabel: string;
+
+  @Listen('neosItemSelected')
+  neosItemSelectedHandler(event: CustomEvent) {
+    this.activeLabel = event.detail;
+    this.isOpen = false;
+  }
+
+  componentWillLoad() {
+    this.activeLabel = this.selectedLabel;
+  }
+
+  toggle() {
+    this.isOpen = !this.isOpen;
+  }
+
+  wrapperClassName() {
+    return classnames('dropdown-wrapper', {'dropdown-wrapper--open': this.isOpen});
+  }
+
+  render() {
+    return (
+      <div>
+        <neos-form-input-label label={this.label}>
+          <slot name="metadata"/>
+        </neos-form-input-label>
+        <div class={this.wrapperClassName()}>
+          <a href="#" class="dropdown" onClick={() => this.toggle()}>
+            <div class="icon">
+              <neos-icon name="file"/>
+            </div>
+            <div class="selected-label">{this.activeLabel ? this.activeLabel : this.placeholder}</div>
+            <div class="toggle">
+              <neos-button squared theme="transparent">
+                <neos-icon name="chevron-down" type="solid"></neos-icon>
+              </neos-button>
+            </div>
+          </a>
+          <div class="dropdown-list">
+            <slot />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/components/dropdown/styles/dropdown.dark.scss

+@import "./dropdown";
+@import "./dropdown.dark.vars";
+
+:host {
+  color: $text-dark-color-value;
+  font-family: $font-family-dark-base;
+  font-weight: 400;
+  font-size: $font-size-dark-base;
+  line-height: 1.1;
+}
+
+.dropdown-wrapper {
+  position: relative;
+
+  &--open {
+    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+    .dropdown-list {
+      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+      max-height: 350px;
+    }
+  }
+}
+
+.dropdown {
+  display: flex;
+  background-color: $background-dark-color;
+  border: 0;
+  outline: 1px solid neos-color($colors-dark, 'darker');
+  box-sizing: content-box;
+  color: inherit;
+  padding: 0 0 0 $content-padding;
+  margin: $content-margin-medium 0 $content-margin-small;
+  text-decoration: none;
+}
+
+.dropdown-list {
+  position: absolute;
+  top: 44px;
+  left: 0;
+  right: 0;
+  z-index: 10;
+
+  transition: max-height 200ms ease-in-out;
+  max-height: 0;
+  overflow: hidden;
+}
+
+.icon {
+  margin-right: .65em;
+}
+
+.toggle {
+  margin-left: auto;
+}
+
+.selected-value {
+
+}

src/components/dropdown/styles/dropdown.dark.vars.scss

+@import "../../../themes/neos.globals.dark";
+

src/components/dropdown/styles/dropdown.scss

+@import "./dropdown.vars";
+
+:host {
+  @include font-smoothing();
+
+  display: block;
+}
+
+.dropdown {
+  flex: 1;
+  border: 0;
+  box-sizing: border-box;
+  height: $grid-unit;
+  line-height: $grid-unit;
+
+  transition: all ease-in 80ms;
+}

src/components/dropdown/styles/dropdown.vars.scss

+@import "../../../themes/neos.globals";

src/index.html

@@ -53,6 +53,20 @@
   <neos-form-input label="URI Path Segment" value="nice-title-to-master-your-seo-skills" placeholder="Help editor to fill me..."></neos-form-input>
 </section>
 
+<section>
+  <header>
+    <h1>neos-form-dropdown</h1>
+  </header>
+  <neos-dropdown label="Type" icon="file" selected-label="Page">
+    <neos-dropdown-item label="Home" icon="home"></neos-dropdown-item>
+    <neos-dropdown-item label="Category" icon="file"></neos-dropdown-item>
+    <neos-dropdown-item label="Contact"></neos-dropdown-item>
+    <neos-dropdown-item label="Generic Page" icon="file"></neos-dropdown-item>
+    <neos-dropdown-item label="News" icon="rss"></neos-dropdown-item>
+    <neos-dropdown-item label="Product" icon="clipboard-list"></neos-dropdown-item>
+  </neos-dropdown>
+</section>
+
 <section>
   <header>
     <h1>neos-badge</h1>