Commit 69eda425 authored by Dominique Feyer's avatar Dominique Feyer
Browse files

TASK: Add minimalistic dropdown

parent 56241564

src/components.d.ts

+42 −2
Original line number Diff line number Diff line
@@ -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

0 → 100644
+29 −0
Original line number Diff line number Diff line 
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

0 → 100644
+37 −0
Original line number Diff line number Diff line 
@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

0 → 100644
+2 −0
Original line number Diff line number Diff line 
@import "../../../themes/neos.globals.dark";

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

0 → 100644
+17 −0
Original line number Diff line number Diff line 
@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;

}