Commit ab5222da authored by Dominique Feyer's avatar Dominique Feyer

TASK: Add inspector group

parent a012aa93
......@@ -176,17 +176,47 @@ declare global {
}
declare global {
namespace StencilComponents {
interface NeosInspectorGroupHeader {
'icon': string;
'label': string;
}
}
interface HTMLNeosInspectorGroupHeaderElement extends StencilComponents.NeosInspectorGroupHeader, HTMLStencilElement {}
var HTMLNeosInspectorGroupHeaderElement: {
prototype: HTMLNeosInspectorGroupHeaderElement;
new (): HTMLNeosInspectorGroupHeaderElement;
};
interface HTMLElementTagNameMap {
'neos-inspector-group-header': HTMLNeosInspectorGroupHeaderElement;
}
interface ElementTagNameMap {
'neos-inspector-group-header': HTMLNeosInspectorGroupHeaderElement;
}
namespace JSX {
interface IntrinsicElements {
'neos-inspector-group-header': JSXElements.NeosInspectorGroupHeaderAttributes;
}
}
namespace JSXElements {
export interface NeosInspectorGroupHeaderAttributes extends HTMLAttributes {
'icon'?: string;
'label'?: string;
}
}
}
declare global {
namespace StencilComponents {
interface NeosInspectorGroup {
'active': boolean;
'disabled': boolean;
'focused': boolean;
'size': string;
'squared': boolean;
'theme': string;
'type': string;
'icon': string;
'label': string;
}
}
......@@ -209,13 +239,8 @@ declare global {
}
namespace JSXElements {
export interface NeosInspectorGroupAttributes extends HTMLAttributes {
'active'?: boolean;
'disabled'?: boolean;
'focused'?: boolean;
'size'?: string;
'squared'?: boolean;
'theme'?: string;
'type'?: string;
'icon'?: string;
'label'?: string;
}
}
}
......@@ -226,6 +251,7 @@ declare global {
namespace StencilComponents {
interface NeosLabel {
'label': string;
'theme': string;
}
}
......@@ -249,6 +275,7 @@ declare global {
namespace JSXElements {
export interface NeosLabelAttributes extends HTMLAttributes {
'label'?: string;
'theme'?: string;
}
}
}
......
import {Component, Prop} from '@stencil/core';
@Component({
tag: 'neos-inspector-group-header',
styleUrl: 'styles/inspector-group-header.dark.scss',
shadow: true
})
export class InspectorGroupHeader {
@Prop() label: string;
@Prop() icon: string;
render() {
return (<header>
<neos-icon squared name={this.icon}></neos-icon>
<neos-label theme="bold" label={this.label}></neos-label>
<div class="toggle">
<neos-button squared theme="transparent">
<neos-icon name="chevron-up" type="solid"></neos-icon>
</neos-button>
</div>
</header>);
}
}
@import "./inspector-group-header";
@import "./inspector-group-header.dark.vars";
:host {
}
@import "./inspector-group-header.vars";
:host {
@include font-smoothing();
display: block;
header {
display: flex;
align-items: center;
}
.toggle {
margin-left: auto;
}
}
import {Component, Prop} from '@stencil/core';
import classnames from 'classnames';
@Component({
tag: 'neos-inspector-group',
......@@ -7,21 +6,18 @@ import classnames from 'classnames';
shadow: true
})
export class InspectorGroup {
@Prop() theme: string;
@Prop() size: string = 'regular';
@Prop() focused: boolean = false;
@Prop() disabled: boolean = false;
@Prop() squared: boolean = false;
@Prop() active: boolean = false;
@Prop() type: string = 'inspector-group';
className() {
return classnames('t-' + this.theme, {'l-squared': this.squared});
}
@Prop() label: string;
@Prop() icon: string;
render() {
return (<button class={this.className()} disabled={this.disabled} type={this.type}>
<slot/>
</button>);
return (<section>
<neos-inspector-group-header icon={this.icon} label={this.label}></neos-inspector-group-header>
<div class="content">
<slot/>
</div>
<footer>
<slot name="footer"/>
</footer>
</section>);
}
}
......@@ -2,5 +2,11 @@
@import "./inspector-group.dark.vars";
:host {
border-top: 1px solid neos-color($colors-dark, 'dark');
border-bottom: 1px solid neos-color($colors-dark, 'dark');
margin-top: -1px;
.content {
padding: $content-padding
}
}
......@@ -4,4 +4,13 @@
@include font-smoothing();
display: block;
header {
display: flex;
align-items: center;
}
.toggle {
margin-left: auto;
}
}
import {Component, Prop} from '@stencil/core';
import classnames from 'classnames';
@Component({
tag: 'neos-label',
......@@ -7,9 +8,14 @@ import {Component, Prop} from '@stencil/core';
})
export class Label {
@Prop() theme: string = 'regular';
@Prop() label: string;
className() {
return classnames('t-' + this.theme);
}
render() {
return this.label;
return <div class={this.className()}>{this.label}</div>;
}
}
......@@ -8,4 +8,9 @@
font-size: $font-size-dark-base;
margin-right: $content-margin-medium;
.t-bold {
font-size: $font-size-dark-large;
font-weight: 600;
}
}
......@@ -36,9 +36,9 @@
<header>
<h1>neos-form-input</h1>
</header>
<neos-form-input label="Fill a small bit of personal informations"></neos-form-input>
<neos-form-input label="Fill a small bit of personal informations" placeholder="Help editor to fill me..."></neos-form-input>
<neos-form-input label="Fill a small bit of personal informations" value="Your input value" placeholder="Help editor to fill me..."></neos-form-input>
<neos-form-input label="Title" value="Nice title to master your SEO Skill"></neos-form-input>
<neos-form-input label="Canonical title" placeholder="Help editor to fill me..."></neos-form-input>
<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>
......@@ -206,5 +206,24 @@
</section>
</section>
<section>
<header>
<h1>neos-inspector-group</h1>
</header>
<section>
<header>
<h2>default</h2>
</header>
<neos-inspector-group icon="file" label="Document">
<neos-form-input label="Title"></neos-form-input>
<neos-form-input label="URI Path Segement"></neos-form-input>
</neos-inspector-group>
<neos-inspector-group icon="file" label="SEO">
<neos-form-input label="Descritption" placeholder="A short and meanigful description of the document"></neos-form-input>
<neos-form-input label="Keywords"></neos-form-input>
</neos-inspector-group>
</section>
</section>
</body>
</html>
......@@ -12,6 +12,7 @@ $content-dark-margin: $content-margin !default;
$content-dark-padding: $content-padding !default;
$font-family-dark-base: "Roboto", "Helvetica Neue", sans-serif !default;
$font-size-dark-base: $font-size-base !default;
$font-size-dark-large: $font-size-large !default;
// Default Foreground and Background Colors values
// Allows users to override an foreground / background colors
......
......@@ -141,6 +141,7 @@ $content-padding-medium: 12px 16px !default;
$content-padding-small: 4px 6px !default;
$content-padding-smaller: 2px 4px !default;
$font-family-base: "Open Sans", Helvetica, serif;
$font-size-large: 16px !default;
$font-size-base: 14px !default;
$font-size-small: 12px !default;
......
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