TASK: Add basic toolbar with separator support and secondary zone

src/components.d.ts

@@ -176,6 +176,51 @@ declare global {
 }
 
 
+declare global {
+
+  namespace StencilComponents {
+    interface NeosInspectorGroup {
+      'active': boolean;
+      'disabled': boolean;
+      'focused': boolean;
+      'size': string;
+      'squared': boolean;
+      'theme': string;
+      'type': string;
+    }
+  }
+
+  interface HTMLNeosInspectorGroupElement extends StencilComponents.NeosInspectorGroup, HTMLStencilElement {}
+
+  var HTMLNeosInspectorGroupElement: {
+    prototype: HTMLNeosInspectorGroupElement;
+    new (): HTMLNeosInspectorGroupElement;
+  };
+  interface HTMLElementTagNameMap {
+    'neos-inspector-group': HTMLNeosInspectorGroupElement;
+  }
+  interface ElementTagNameMap {
+    'neos-inspector-group': HTMLNeosInspectorGroupElement;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      'neos-inspector-group': JSXElements.NeosInspectorGroupAttributes;
+    }
+  }
+  namespace JSXElements {
+    export interface NeosInspectorGroupAttributes extends HTMLAttributes {
+      'active'?: boolean;
+      'disabled'?: boolean;
+      'focused'?: boolean;
+      'size'?: string;
+      'squared'?: boolean;
+      'theme'?: string;
+      'type'?: string;
+    }
+  }
+}
+
+
 declare global {
 
   namespace StencilComponents {
@@ -208,6 +253,72 @@ declare global {
   }
 }
 
+
+declare global {
+
+  namespace StencilComponents {
+    interface NeosToolbarSeparator {
+      'theme': string;
+    }
+  }
+
+  interface HTMLNeosToolbarSeparatorElement extends StencilComponents.NeosToolbarSeparator, HTMLStencilElement {}
+
+  var HTMLNeosToolbarSeparatorElement: {
+    prototype: HTMLNeosToolbarSeparatorElement;
+    new (): HTMLNeosToolbarSeparatorElement;
+  };
+  interface HTMLElementTagNameMap {
+    'neos-toolbar-separator': HTMLNeosToolbarSeparatorElement;
+  }
+  interface ElementTagNameMap {
+    'neos-toolbar-separator': HTMLNeosToolbarSeparatorElement;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      'neos-toolbar-separator': JSXElements.NeosToolbarSeparatorAttributes;
+    }
+  }
+  namespace JSXElements {
+    export interface NeosToolbarSeparatorAttributes extends HTMLAttributes {
+      'theme'?: string;
+    }
+  }
+}
+
+
+declare global {
+
+  namespace StencilComponents {
+    interface NeosToolbar {
+      'theme': string;
+    }
+  }
+
+  interface HTMLNeosToolbarElement extends StencilComponents.NeosToolbar, HTMLStencilElement {}
+
+  var HTMLNeosToolbarElement: {
+    prototype: HTMLNeosToolbarElement;
+    new (): HTMLNeosToolbarElement;
+  };
+  interface HTMLElementTagNameMap {
+    'neos-toolbar': HTMLNeosToolbarElement;
+  }
+  interface ElementTagNameMap {
+    'neos-toolbar': HTMLNeosToolbarElement;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      'neos-toolbar': JSXElements.NeosToolbarAttributes;
+    }
+  }
+  namespace JSXElements {
+    export interface NeosToolbarAttributes extends HTMLAttributes {
+      'theme'?: string;
+    }
+  }
+}
+
 declare global { namespace JSX { interface StencilJSX {} } }
 
 export declare function defineCustomElements(window: any): void;
\ No newline at end of file

src/components/button/styles/button.dark.scss

@@ -18,7 +18,7 @@
 
     &:focus:enabled,
     &:hover:enabled {
-      background-color: neos-color($colors-dark, 'neutral', 'shade');
+      background-color: neos-color($colors-dark, 'primary', 'shade');
     }
 
     &.t-clean {
@@ -49,7 +49,12 @@
     }
 
     &.t-transparent {
+      background-color: transparent;
 
+      &:focus:enabled,
+      &:hover:enabled {
+        background-color: neos-color($colors-dark, 'primary', 'shade');
+      }
     }
 
     &.t-warn {

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

+import {Component, Prop} from '@stencil/core';
+import classnames from 'classnames';
+
+@Component({
+  tag: 'neos-inspector-group',
+  styleUrl: 'styles/inspector-group.dark.scss',
+  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});
+  }
+
+  render() {
+    return (<button class={this.className()} disabled={this.disabled} type={this.type}>
+      <slot/>
+    </button>);
+  }
+}

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

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

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

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

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

+@import "./inspector-group.vars";
+
+:host {
+  @include font-smoothing();
+
+  display: block;
+}

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

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

src/components/toolbar-separator/styles/toolbar-separator.dark.scss

+@import "./toolbar-separator";
+@import "./toolbar-separator.dark.vars";
+
+:host {
+  margin: $content-margin-small;
+  height: calc(100% - #{$content-margin-small * 2});
+
+  border-left: $hairlines-width solid neos-color($colors-dark, 'bright');
+}

src/components/toolbar-separator/styles/toolbar-separator.dark.vars.scss

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

src/components/toolbar-separator/styles/toolbar-separator.scss

+@import "./toolbar-separator.vars";
+
+:host {
+  height: 40px;
+  margin: 0;
+  padding: 0;
+}

src/components/toolbar-separator/styles/toolbar-separator.vars.scss

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

src/components/toolbar-separator/toolbar-separator.tsx

+import {Component, Prop} from '@stencil/core';
+import classnames from 'classnames';
+
+@Component({
+  tag: 'neos-toolbar-separator',
+  styleUrl: 'styles/toolbar-separator.dark.scss',
+  shadow: true
+})
+export class ToolbarSeparator {
+  @Prop() theme: string = 'regular';
+
+  className() {
+    return classnames('wrapper', 't-' + this.theme);
+  }
+
+  render() {
+    return (<div class={this.className()}>
+      <slot/>
+    </div>);
+  }
+}

src/components/toolbar/styles/toolbar.dark.scss

+@import "./toolbar";
+@import "./toolbar.dark.vars";
+
+:host {
+  width: 100%;
+
+  .t-regular {
+    background-color: neos-color($colors-dark, 'neutral');
+  }
+
+  .t-dark {
+    background-color: neos-color($colors-dark, 'darker');
+  }
+}

src/components/toolbar/styles/toolbar.dark.vars.scss

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

src/components/toolbar/styles/toolbar.scss

+@import "./toolbar.vars";
+
+:host {
+  @include font-smoothing();
+
+  .wrapper {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+
+    height: $grid-unit;
+  }
+
+  .zone {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+
+    ~ .zone {
+      margin-left: auto;
+    }
+  }
+}

src/components/toolbar/styles/toolbar.vars.scss

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

src/components/toolbar/toolbar.tsx

+import {Component, Prop} from '@stencil/core';
+import classnames from 'classnames';
+
+@Component({
+  tag: 'neos-toolbar',
+  styleUrl: 'styles/toolbar.dark.scss',
+  shadow: true
+})
+export class Toolbar {
+  @Prop() theme: string = 'regular';
+
+  wrapperClassName() {
+    return classnames('wrapper', 't-' + this.theme);
+  }
+
+  render() {
+    return (<div class={this.wrapperClassName()}>
+      <div class="zone"><slot/></div>
+      <div class="zone"><slot name="secondary"/></div>
+    </div>);
+  }
+}

src/index.html

@@ -142,5 +142,69 @@
   </section>
 </section>
 
+<section>
+  <header>
+    <h1>neos-toolbar</h1>
+  </header>
+  <section>
+    <header>
+      <h2>default</h2>
+    </header>
+    <neos-toolbar theme="regular">
+      <neos-button squared theme="transparent" disabled slot="secondary">
+        <neos-icon name="save" type="solid" disabled></neos-icon>
+      </neos-button>
+      <neos-button squared theme="transparent" slot="secondary">
+        <neos-icon name="times-circle" type="solid" disabled></neos-icon>
+      </neos-button>
+      <neos-button squared theme="transparent">
+        <neos-icon name="edit" type="solid"></neos-icon>
+      </neos-button>
+      <neos-button squared theme="transparent">
+        <neos-icon name="copy" type="solid"></neos-icon>
+      </neos-button>
+      <neos-button squared theme="transparent">
+        <neos-icon name="cut" type="solid"></neos-icon>
+      </neos-button>
+      <neos-button squared theme="transparent">
+        <neos-icon name="paste" type="solid" disabled></neos-icon>
+      </neos-button>
+      <neos-toolbar-separator></neos-toolbar-separator>
+      <neos-button squared theme="transparent">
+        <neos-icon name="eraser" type="solid" disabled></neos-icon>
+      </neos-button>
+    </neos-toolbar>
+  </section>
+  <section>
+    <header>
+      <h2>with dark theme</h2>
+    </header>
+    <neos-toolbar theme="dark">
+      <neos-button squared theme="transparent" disabled slot="secondary">
+        <neos-icon name="save" type="solid" disabled></neos-icon>
+      </neos-button>
+      <neos-button squared theme="transparent" slot="secondary">
+        <neos-icon name="times-circle" type="solid" disabled></neos-icon>
+      </neos-button>
+      <neos-button squared theme="transparent">
+        <neos-icon name="edit" type="solid"></neos-icon>
+      </neos-button>
+      <neos-button squared theme="transparent">
+        <neos-icon name="copy" type="solid"></neos-icon>
+      </neos-button>
+      <neos-button squared theme="transparent">
+        <neos-icon name="cut" type="solid"></neos-icon>
+      </neos-button>
+      <neos-button squared theme="transparent">
+        <neos-icon name="paste" type="solid" disabled></neos-icon>
+      </neos-button>
+      <neos-toolbar-separator></neos-toolbar-separator>
+      <neos-button squared theme="transparent">
+        <neos-icon name="eraser" type="solid" disabled></neos-icon>
+      </neos-button>
+    </neos-toolbar>
+  </section>
+</section>
+
 </body>
 </html>