Commit 854f778a authored by Dominique Feyer's avatar Dominique Feyer
Browse files

TASK: Better hover handling on dropdown component

parent 52175e81

src/components.d.ts

+41 −0
Original line number Diff line number Diff line
@@ -110,6 +110,47 @@ declare global { 
}





declare global {



  namespace StencilComponents {

    interface NeosDropdownHeader {

      'hovered': boolean;

      'label': string;

      'open': boolean;

      'placeholder': string;

      'selectedLabel': string;

    }

  }



  interface HTMLNeosDropdownHeaderElement extends StencilComponents.NeosDropdownHeader, HTMLStencilElement {}



  var HTMLNeosDropdownHeaderElement: {

    prototype: HTMLNeosDropdownHeaderElement;

    new (): HTMLNeosDropdownHeaderElement;

  };

  interface HTMLElementTagNameMap {

    'neos-dropdown-header': HTMLNeosDropdownHeaderElement;

  }

  interface ElementTagNameMap {

    'neos-dropdown-header': HTMLNeosDropdownHeaderElement;

  }

  namespace JSX {

    interface IntrinsicElements {

      'neos-dropdown-header': JSXElements.NeosDropdownHeaderAttributes;

    }

  }

  namespace JSXElements {

    export interface NeosDropdownHeaderAttributes extends HTMLAttributes {

      'hovered'?: boolean;

      'label'?: string;

      'open'?: boolean;

      'placeholder'?: string;

      'selectedLabel'?: string;

    }

  }

}





declare global {



  namespace StencilComponents {

src/components/dropdown-header/dropdown-header.tsx

0 → 100644
+39 −0
Original line number Diff line number Diff line 
import {Component, Prop} from '@stencil/core';



@Component({

  tag: 'neos-dropdown-header',

  styleUrl: 'styles/dropdown-header.dark.scss',

  shadow: true

})

export class Dropdown {



  @Prop() label: string;

  @Prop() selectedLabel: string;

  @Prop() placeholder: string = 'Select a value...';

  @Prop() open: boolean = false;

  @Prop() hovered: boolean = false;



  chevronIcon() {

    return this.open ? 'chevron-up' : 'chevron-down';

  }



  chevronTheme() {

    return this.hovered ? 'brand' : 'transparent';

  }



  render() {

    return (

      <a href="#" class="dropdown">

        <div class="icon">

          <neos-icon name="file"/>

        </div>

        <div class="selected-label">{this.label}</div>

        <div class="toggle">

          <neos-button squared theme={this.chevronTheme()}>

            <neos-icon name={this.chevronIcon()} type="solid"></neos-icon>

          </neos-button>

        </div>

      </a>

    );

  }

}

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

0 → 100644
+30 −0
Original line number Diff line number Diff line 
@import "./dropdown-header";

@import "./dropdown-header.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 {

    display: flex;

    color: inherit;

    background-color: $background-dark-color;

    border: 0;

    outline: 1px solid neos-color($colors-dark, 'darker');

    box-sizing: content-box;

    padding: 0 0 0 $content-padding;

    text-decoration: none;

    height: $grid-unit;

  }



  .icon {

    margin-right: .65em;

  }



  .toggle {

    margin-left: auto;

  }

}

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

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

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

0 → 100644
+15 −0
Original line number Diff line number Diff line 
@import "./dropdown-header.vars";



:host {

  @include font-smoothing();



  .dropdown {

    flex: 1;

    border: 0;

    box-sizing: border-box;

    height: $grid-unit;

    line-height: $grid-unit;

  }



  transition: all ease-in 80ms;

}