Commit 6c220e38 authored by Dominique Feyer's avatar Dominique Feyer
Browse files

TASK: Add metadata support in neos-form-input

parent 5bfb5044

src/components.d.ts

+4 −0
Original line number Diff line number Diff line
@@ -106,8 +106,10 @@ declare global { 


  namespace StencilComponents {

    interface NeosFormInput {

      'disabled': boolean;

      'label': string;

      'placeholder': string;

      'type': string;

      'value': string;

    }

  }
@@ -131,8 +133,10 @@ declare global { 
  }

  namespace JSXElements {

    export interface NeosFormInputAttributes extends HTMLAttributes {

      'disabled'?: boolean;

      'label'?: string;

      'placeholder'?: string;

      'type'?: string;

      'value'?: string;

    }

  }

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

+11 −1
Original line number Diff line number Diff line
@@ -10,11 +10,14 @@ export class FormInput { 
  @Prop() placeholder: string;

  @Prop() value: string;

  @Prop() label: string;

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

  @Prop() disabled: boolean = false;



  renderInput() {

    return (<input

      placeholder={this.placeholder}

      type="text"

      type={this.type}

      disabled={this.disabled}

      value={this.value}

    />)

  }
@@ -22,8 +25,15 @@ export class FormInput { 
  renderInputWithLabel() {

    return (

      <label>

        <div class="label">

          <neos-label label={this.label}></neos-label>

          <div class="metadata">

            <slot name="metadata" />

          </div>

        </div>

        <div class="input">

          {this.renderInput()}

        </div>

      </label>

    );

  }

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

+17 −3
Original line number Diff line number Diff line
@@ -18,15 +18,29 @@ 
    padding: 0 $content-padding;

    margin: $content-margin-medium 0;



    &:focus,

    &:hover {

    &:focus:enabled,

    &:hover:enabled {

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

    }



    &:focus {

    &:focus:enabled {

      background-color: neos-color($colors-dark, 'brightest');

      color: neos-color($colors-dark, 'brightest', 'contrast');

      outline: 2px solid neos-color($colors-dark, 'brightest');

    }



    &[disabled] {

      cursor: not-allowed;

      opacity: .85;

    }

  }



  .label {

    display: flex;

    align-items: center;

  }



  .metadata {

    margin-left: auto;

  }

}

src/index.html

+7 −2
Original line number Diff line number Diff line
@@ -215,8 +215,13 @@ 
      <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-form-input label="Title" value="My good blog post">

        <neos-badge slot="metadata">required</neos-badge>

      </neos-form-input>

      <neos-form-input label="URI Path Segement" disabled value="my-good-blog-post">

        <neos-badge slot="metadata">readonly</neos-badge>

        <neos-badge slot="metadata">computed</neos-badge>

      </neos-form-input>

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