TASK: Add collapsible animation for inspector-group

package.json

@@ -20,7 +20,7 @@
   "dependencies": {},
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^5.1.0",
-    "@stencil/core": "^0.9.1",
+    "@stencil/core": "^0.9.11",
     "@stencil/dev-server": "latest",
     "@stencil/sass": "latest",
     "@stencil/utils": "latest",

src/components.d.ts

 /**
- * This is an autogenerated file created by the Stencil build process.
- * It contains typing information for all components that exist in this project
- * and imports for stencil collections that might be configured in your stencil.config.js file
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
  */
 
 import '@stencil/core';
@@ -13,9 +12,12 @@ declare global {
   }
   namespace JSXElements {}
 
+  interface HTMLElement {
+    componentOnReady?: () => Promise<this | null>;
+  }
+
   interface HTMLStencilElement extends HTMLElement {
     componentOnReady(): Promise<this>;
-    componentOnReady(done: (ele?: this) => void): void;
 
     forceUpdate(): void;
   }
@@ -188,6 +190,7 @@ declare global {
     interface NeosInspectorGroupHeader {
       'icon': string;
       'label': string;
+      'open': boolean;
     }
   }
 
@@ -212,6 +215,8 @@ declare global {
     export interface NeosInspectorGroupHeaderAttributes extends HTMLAttributes {
       'icon'?: string;
       'label'?: string;
+      'onNeosVisibilitySwitched'?: (event: CustomEvent<boolean>) => void;
+      'open'?: boolean;
     }
   }
 }
@@ -221,6 +226,7 @@ declare global {
 
   namespace StencilComponents {
     interface NeosInspectorGroup {
+      'closed': boolean;
       'icon': string;
       'label': string;
     }
@@ -245,6 +251,7 @@ declare global {
   }
   namespace JSXElements {
     export interface NeosInspectorGroupAttributes extends HTMLAttributes {
+      'closed'?: boolean;
       'icon'?: string;
       'label'?: string;
     }

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

-import {Component, Prop} from '@stencil/core';
+import {Component, Prop, Event, EventEmitter} from '@stencil/core';
 
 @Component({
   tag: 'neos-inspector-group-header',
@@ -6,16 +6,27 @@ import {Component, Prop} from '@stencil/core';
   shadow: true
 })
 export class InspectorGroupHeader {
+  @Event() neosVisibilitySwitched: EventEmitter<boolean>;
+
   @Prop() label: string;
   @Prop() icon: string;
+  @Prop() open: boolean = true;
+
+  neosVisibilitySwitchedHandlerHandler() {
+    this.neosVisibilitySwitched.emit(!this.open);
+  }
+
+  chevronIcon() {
+    return this.open ? 'chevron-up' : 'chevron-down';
+  }
 
   render() {
     return (<header>
       <neos-icon squared name={this.icon} type="solid"></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 squared theme="transparent" onClick={() => this.neosVisibilitySwitchedHandlerHandler()}>
+          <neos-icon name={this.chevronIcon()} type="solid"></neos-icon>
         </neos-button>
       </div>
     </header>);

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

-import {Component, Prop} from '@stencil/core';
+import {Component, Prop, State, Listen} from '@stencil/core';
+import classnames from 'classnames';
 
 @Component({
   tag: 'neos-inspector-group',
@@ -8,16 +9,34 @@ import {Component, Prop} from '@stencil/core';
 export class InspectorGroup {
   @Prop() label: string;
   @Prop() icon: string;
+  @Prop() closed: boolean = false;
+
+  @State() isOpen : boolean;
+
+  @Listen('neosVisibilitySwitched')
+  neosVisibilitySwitchedHandler(event: CustomEvent) {
+    this.isOpen = event.detail;
+  }
+
+  componentDidLoad() {
+    this.isOpen = !this.closed;
+  }
+
+  wrapperClassName() {
+    return classnames('content-wrapper', {'content-wrapper--open': this.isOpen});
+  }
 
   render() {
     return (<section role="group">
-      <neos-inspector-group-header icon={this.icon} label={this.label}></neos-inspector-group-header>
-      <div class="content">
-        <slot/>
+      <neos-inspector-group-header icon={this.icon} label={this.label} open={this.isOpen}></neos-inspector-group-header>
+      <div class={this.wrapperClassName()}>
+        <div class="content">
+          <slot/>
+        </div>
+        <footer>
+          <slot name="footer"/>
+        </footer>
       </div>
-      <footer>
-        <slot name="footer"/>
-      </footer>
     </section>);
   }
 }

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

@@ -6,6 +6,16 @@
   border-bottom: 1px solid neos-color($colors-dark, 'dark');
   margin-top: -1px;
 
+  .content-wrapper {
+    transition: max-height 600ms ease-in-out;
+    max-height: 0;
+    overflow: hidden;
+
+    &--open {
+      max-height: 1000px;
+    }
+  }
+
   .content {
     padding: $content-padding
   }

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

@@ -13,4 +13,13 @@
   .toggle {
     margin-left: auto;
   }
+
+  .content-wrapper {
+    overflow: hidden;
+    height: auto;
+
+    &--closed {
+      height: 0;
+    }
+  }
 }

src/index.html

@@ -19,6 +19,7 @@
     h2 {
       font-size: 18px;
       text-transform: lowercase;
+      opacity: .6;
     }
     section {
       border-top: 4px solid white;
@@ -234,6 +235,13 @@
         <neos-icon squared name="check-circle" type="solid" theme="success" slot="after"></neos-icon>
       </neos-form-input>
     </neos-inspector-group>
+    <neos-inspector-group icon="cogs" label="Ownership" closed>
+      <neos-form-input label="Author"></neos-form-input>
+      <neos-form-input label="Email"></neos-form-input>
+      <neos-form-input label="Phone"></neos-form-input>
+      <neos-form-input label="Creation date"></neos-form-input>
+      <neos-form-input label="Last modification date"></neos-form-input>
+    </neos-inspector-group>
   </section>
 </section>