TASK: Add inspector group

src/components.d.ts

@@ -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;
     }
   }
 }

src/components/inspector-group-header/inspector-group-header.tsx

+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>);
+  }
+}

src/components/inspector-group-header/styles/inspector-group-header.dark.scss

+@import "./inspector-group-header";
+@import "./inspector-group-header.dark.vars";
+
+:host {
+
+}

src/components/inspector-group-header/styles/inspector-group-header.dark.vars.scss

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

src/components/inspector-group-header/styles/inspector-group-header.scss

+@import "./inspector-group-header.vars";
+
+:host {
+  @include font-smoothing();
+
+  display: block;
+
+  header {
+    display: flex;
+    align-items: center;
+  }
+
+  .toggle {
+    margin-left: auto;
+  }
+}

src/components/inspector-group-header/styles/inspector-group-header.vars.scss

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

src/components/inspector-group/inspector-group.tsx

 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>);
   }
 }

src/components/inspector-group/styles/inspector-group.dark.scss

@@ -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
+  }
 }

src/components/inspector-group/styles/inspector-group.scss

@@ -4,4 +4,13 @@
   @include font-smoothing();
 
   display: block;
+
+  header {
+    display: flex;
+    align-items: center;
+  }
+
+  .toggle {
+    margin-left: auto;
+  }
 }

src/components/label/label.tsx

 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>;
   }
 }

src/components/label/styles/label.dark.scss

@@ -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;
+  }
 }

src/index.html

@@ -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>

src/themes/neos.theme.default.dark.scss

@@ -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

src/themes/neos.theme.default.scss

@@ -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;