Commit 5e5b75b5 authored by Dominique Feyer's avatar Dominique Feyer
Browse files

TASK: Add before/after slot in neos-form-input

parent de9f952d

src/components.d.ts

+2 −0
Original line number Diff line number Diff line
@@ -149,6 +149,7 @@ declare global { 
    interface NeosIcon {

      'name': string;

      'squared': boolean;

      'theme': string;

      'type': string;

    }

  }
@@ -174,6 +175,7 @@ declare global { 
    export interface NeosIconAttributes extends HTMLAttributes {

      'name'?: string;

      'squared'?: boolean;

      'theme'?: string;

      'type'?: string;

    }

  }

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

+2 −0
Original line number Diff line number Diff line
@@ -32,7 +32,9 @@ export class FormInput { 
          </div>

        </div>

        <div class="input">

          <slot name="before"/>

          {this.renderInput()}

          <slot name="after"/>

        </div>

      </label>

    );

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

+19 −2
Original line number Diff line number Diff line
@@ -8,11 +8,29 @@ 
  font-size: $font-size-dark-base;

  line-height: 1.1;

  margin-bottom: $content-dark-margin;

}



::slotted(neos-icon:first-child) {

  margin-right: 4px;

}



::slotted(neos-icon:last-child) {

  margin-left: 4px;

}



::slotted(neos-button:first-child) {

  margin-right: 4px;

}



::slotted(neos-button:last-child) {

  margin-left: 4px;

}



input {

  background-color: $background-dark-color;

  border: 0;

    outline: 1px solid neos-color($colors-dark, 'neutral');

  outline: 1px solid neos-color($colors-dark, 'darker');

  box-sizing: content-box;

  color: inherit;



  padding: 0 $content-padding;
@@ -43,4 +61,3 @@ 
.metadata {

  margin-left: auto;

}
 
}

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

+6 −0
Original line number Diff line number Diff line
@@ -4,8 +4,10 @@ 
  @include font-smoothing();



  display: block;

}



input {

  flex: 1;

  width: 100%;

  border: 0;

  box-sizing: border-box;
@@ -14,4 +16,8 @@ 


  transition: all ease-in 100ms;

}



.input {

  display: flex;

  align-items: center;

}

src/components/icon/icon.tsx

+8 −6
Original line number Diff line number Diff line 
import {Component, Prop} from '@stencil/core';

import classnames from 'classnames';



@Component({

  tag: 'neos-icon',
@@ -9,21 +10,22 @@ export class Icon { 


  @Prop() name: string;

  @Prop() type: string = 'regular';

  @Prop() theme: string = 'regular';

  @Prop() squared: boolean = false;



  className() {

    return 'fa' + this.type.charAt(0) + ' ' + 'fa-' + this.name;

    return classnames('t-' + this.theme, {'l-squared': this.squared});

  }



  icon() {

    return <i class={this.className()}></i>;

  iconClassName() {

    return 'fa' + this.type.charAt(0) + ' ' + 'fa-' + this.name;

  }



  squaredIcon() {

    return <div class="l-squared">{this.icon()}</div>

  icon() {

    return <i class={this.iconClassName()}></i>;

  }



  render() {

    return this.squared ? this.squaredIcon() : this.icon();

    return <div class={this.className()}>{this.icon()}</div>;

  }

}