TASK: Add compact mode for neos-input

This allow to use neos-input inside a dropdown

readme.md

@@ -19,4 +19,6 @@ and run:
 ```bash
 npm install
 npm start
-```
\ No newline at end of file
+```
+
+Check the live version [here](https://neos.go.ttree.space/neos-ui-kit/)
\ No newline at end of file

src/components.d.ts

@@ -79,9 +79,17 @@ export namespace Components {
   }
 
   interface NeosFormInputWrapper {
+    /**
+    * Hide label and remove margin around the input
+    */
+    'compact': boolean;
     'label': string;
   }
   interface NeosFormInputWrapperAttributes extends StencilHTMLAttributes {
+    /**
+    * Hide label and remove margin around the input
+    */
+    'compact'?: boolean;
     'label'?: string;
   }
 
@@ -107,6 +115,10 @@ export namespace Components {
     */
     'clearOnEdit': boolean;
     /**
+    * Hide label and remove margin around the input
+    */
+    'compact': boolean;
+    /**
     * If true, the user cannot interact with the input. Defaults to `false`.
     */
     'disabled': boolean;
@@ -202,6 +214,10 @@ export namespace Components {
     */
     'clearOnEdit': boolean;
     /**
+    * Hide label and remove margin around the input
+    */
+    'compact'?: boolean;
+    /**
     * If true, the user cannot interact with the input. Defaults to `false`.
     */
     'disabled'?: boolean;

src/components/button/button.tsx

@@ -21,7 +21,8 @@ export class Button {
 
   render() {
     return (<button class={this.className()} disabled={this.disabled} type={this.type}>
-      <slot name="icon" /> <slot/>
+      <slot name="icon" />
+      <slot/>
     </button>);
   }
 }

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

@@ -13,7 +13,7 @@
     font-weight: 400;
     font-size: $font-size-dark-base;
     line-height: 1.1;
-    
+
     background-color: neos-color($colors-dark, 'neutral');
     border: 0;
     color: neos-color($colors-dark, 'neutral', 'contrast');
@@ -71,6 +71,15 @@
       }
     }
 
+    &.t-danger {
+      background-color: neos-color($colors-dark, 'danger');
+
+      &:focus:enabled,
+      &:hover:enabled {
+        background-color: neos-color($colors-dark, 'danger', 'shade');
+      }
+    }
+
     &.l-squared {
       display: flex;
       align-items: center;

src/components/form-input-wrapper/form-input-wrapper.tsx

@@ -9,15 +9,32 @@ export class FormInputWrapper {
 
   @Prop() label: string;
 
-  render() {
+  /**
+   * Hide label and remove margin around the input
+   */
+  @Prop() compact = false;
+
+  renderHeader() {
     return (
-      <div class="label-wrapper">
+      <div class="header">
         <div class="label">
           <neos-label label={this.label}></neos-label>
         </div>
         <div class="metadata">
           <slot name="metadata"/>
         </div>
+      </div>
+    );
+  }
+
+  wrapperClassName() {
+    return this.compact === false ? 'label-wrapper' : 'label-wrapper label-wrapper--compact'
+  }
+
+  render() {
+    return (
+      <div class={this.wrapperClassName()}>
+        {this.compact === false ? this.renderHeader() : null}
         <div class="content">
           <slot name="before"/>
           <slot/>

src/components/form-input-wrapper/styles/form-input-wrapper.dark.scss

@@ -8,11 +8,20 @@
   font-weight: 400;
   font-size: $font-size-dark-base;
   line-height: 1.1;
-  margin-bottom: $content-dark-margin;
+
+  .header {
+    font-size: $font-size-dark-base;
+  }
 
   .label-wrapper {
     flex: 1;
     flex-wrap: wrap;
+    margin-bottom: $content-dark-margin;
+
+    &--compact {
+      margin-top: -8px;
+      margin-bottom: 2px;
+    }
   }
 
   .metadata {

src/components/form-input-wrapper/styles/form-input-wrapper.scss

@@ -8,4 +8,14 @@
     align-items: flex-end;
   }
 
+  .header {
+    display: flex;
+    align-items: flex-end;
+    width: 100%;
+  }
+
+  .metadata {
+    margin-left: auto;
+  }
+
 }

src/components/form-input/form-input.tsx

@@ -159,6 +159,11 @@ export class FormInput {
    */
   @Prop() type = 'text';
 
+  /**
+   * Hide label and remove margin around the input
+   */
+  @Prop() compact = false;
+
 
   @Prop({mutable: true}) value = '';
 
@@ -249,7 +254,7 @@ export class FormInput {
   render() {
     return (
       <label>
-        <neos-form-input-wrapper label={this.label}>
+        <neos-form-input-wrapper label={this.label} compact={this.compact}>
           <slot name="metadata" slot="metadata"/>
           <slot name="before" slot="before"/>
           <input

src/components/form-input/styles/form-input.scss

@@ -17,6 +17,10 @@
     transition: all ease-in 180ms;
   }
 
+  label {
+    margin: 0;
+  }
+
   .input {
     display: flex;
     align-items: center;

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

@@ -4,13 +4,13 @@
 :host {
   color: $text-dark-color-value;
   font-family: $font-family-dark-base;
-  font-weight: 400;
+  font-weight: 600;
   font-size: $font-size-dark-base;
 
   margin-right: $content-margin-medium;
 
   .t-bold {
     font-size: $font-size-dark-large;
-    font-weight: 600;
+    font-weight: 700;
   }
 }

src/index.html

@@ -6,7 +6,8 @@
   <title>Stencil Component Starter</title>
   <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
   <link rel="stylesheet" href="build/neos.css"/>
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
+        integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
   <script src="build/neos.js"></script>
   <style>
     h1, h2 {
@@ -16,15 +17,18 @@
       font-size: 24px;
       text-transform: uppercase;
     }
+
     h2 {
       font-size: 18px;
       text-transform: lowercase;
       opacity: .6;
     }
+
     section[role=presentation] {
       border-top: 4px solid white;
       margin-bottom: 40px;
     }
+
     section[role=presentation] section[role=presentation] {
       border-top: 0;
       margin-bottom: 20px;
@@ -38,18 +42,24 @@
       color: black;
       text-align: center;
     }
+
+    .block {
+      margin-bottom: 8px;
+    }
   </style>
 </head>
 <body style="background-color: #222222; padding: 2rem;">
 
-<p class="disclaimer"><a href="https://gitlab.ttree.ch/neos/neos-ui-kit/">This project</a> is experimental and not an official Neos CMS project</p>
+<p class="disclaimer"><a href="https://gitlab.ttree.ch/neos/neos-ui-kit/">This project</a> is experimental and not an
+  official Neos CMS project</p>
 <section role="presentation">
   <header>
     <h1>neos-form-input</h1>
   </header>
   <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>
+  <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 role="presentation">
   <header>
@@ -59,14 +69,29 @@
     <header>
       <h2>default</h2>
     </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>
+    <div class="block">
+      <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>
+    </div>
+    <div class="block">
+      <neos-dropdown label="Type" icon="file" selected-label="Page">
+        <neos-form-input label="URI Path Segement" compact value="Page">
+          <neos-icon squared theme="neutral" name="filter" type="solid" slot="before"></neos-icon>
+        </neos-form-input>
+        <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>
+    </div>
   </section>
 </section>
 
@@ -82,14 +107,41 @@
     <neos-badge>France</neos-badge>
     <neos-badge>Germany</neos-badge>
   </section>
+  <section>
     <header>
       <h2>with icons</h2>
     </header>
-    <neos-badge><neos-icon name="frown"></neos-icon> Switzerland</neos-badge>
-    <neos-badge><neos-icon name="frown"></neos-icon> France</neos-badge>
-    <neos-badge><neos-icon name="frown"></neos-icon> Germany</neos-badge>
+    <div class="block">
+    <neos-badge>
+      <neos-icon name="frown"></neos-icon>
+      Switzerland
+    </neos-badge>
+    <neos-badge>
+      <neos-icon name="frown"></neos-icon>
+      France
+    </neos-badge>
+    <neos-badge>
+      <neos-icon name="frown"></neos-icon>
+      Germany
+    </neos-badge>
+    </div>
+    <div class="block">
+    <neos-badge>
+      Switzerland
+      <neos-icon name="frown"></neos-icon>
+    </neos-badge>
+    <neos-badge>
+      France
+      <neos-icon name="frown"></neos-icon>
+    </neos-badge>
+    <neos-badge>
+      Germany
+      <neos-icon name="frown"></neos-icon>
+    </neos-badge>
+    </div>
   </section>
 </section>
+</section>
 
 <section role="presentation">
   <header>
@@ -109,26 +161,28 @@
     <header>
       <h2>with icon</h2>
     </header>
-    <neos-button>
-      <neos-icon name="folder" slot="icon"></neos-icon>
-      Confirm
-    </neos-button>
-    <neos-button theme="clean">
-      <neos-icon name="check-circle" slot="icon"></neos-icon>
-      Publish
-    </neos-button>
-    <neos-button theme="brand">
-      <neos-icon name="heart" slot="icon"></neos-icon>
-      Did you love Neos?
-    </neos-button>
-    <neos-button theme="warn">
-      <neos-icon name="folder" slot="icon"></neos-icon>
-      Delete
-    </neos-button>
-    <neos-button theme="warn" disabled>
-      <neos-icon name="frown" slot="icon"></neos-icon>
-      Delete
-    </neos-button>
+    <div class="block">
+      <neos-button>
+        <neos-icon name="folder" slot="icon"></neos-icon>
+        Confirm
+      </neos-button>
+      <neos-button theme="clean">
+        <neos-icon name="check-circle" slot="icon"></neos-icon>
+        Publish
+      </neos-button>
+      <neos-button theme="brand">
+        <neos-icon name="heart" slot="icon"></neos-icon>
+        Did you love Neos?
+      </neos-button>
+      <neos-button theme="warn">
+        <neos-icon name="folder" slot="icon"></neos-icon>
+        Delete
+      </neos-button>
+      <neos-button theme="warn" disabled>
+        <neos-icon name="frown" slot="icon"></neos-icon>
+        Delete
+      </neos-button>
+    </div>
   </section>
   <section role="presentation">
     <header>
@@ -274,7 +328,8 @@
       </neos-dropdown>
     </neos-inspector-group>
     <neos-inspector-group icon="cogs" label="SEO">
-      <neos-form-input label="Descritption" placeholder="A short and meanigful description of the document"></neos-form-input>
+      <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-form-input label="Email" value="hello@neos.io">
         <neos-icon squared name="at" type="solid" theme="neutral" slot="before"></neos-icon>