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

TASK: Add minimalistic dropdown

parent 56241564
Pipeline #2026 failed with stage
in 59 seconds
......@@ -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;
}
}
}
......
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>
);
}
}
@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 {
}
@import "../../../themes/neos.globals.dark";
@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;
}
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>
);
}
}
@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 {
}
@import "../../../themes/neos.globals.dark";
@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;
}
@import "../../../themes/neos.globals";
......@@ -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>
......
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