BETA Hej! Denna webbplats är under utveckling. Bidra gärna med feedback!
Stilguide
Bidra

Form control - Textarea: Default 

<div class="rh-form-group">
    <textarea id="textareaId" class="rh-form__control rh-form__textarea" placeholder="Default placeholder"></textarea>
</div>
 
<div class="rh-form-group">
    {{!-- Label for the control --}}
    {{#if labelData.text}}
    <label for="{{labelData.forControlId}}" class="rh-form__label {{#if labelData.extendClass}}{{labelData.extendClass}}{{/if}}">
        {{labelData.text}}
        {{!-- Extend text for requirement --}}
        {{#if labelData.requirement.text}}
        <span class="rh-form__label-text--required">{{labelData.requirement.text}}</span>
        {{/if}}
    </label>
    {{/if}}
    {{!-- Input text control --}}
    {{#if controlData}}
    <textarea id="{{controlData.controlId}}" class="rh-form__control rh-form__textarea{{#if controlData.extendClass}} {{controlData.extendClass}}{{/if}}"
    placeholder="{{controlData.placeholder}}"></textarea>
    {{/if}}
</div>
 
{
  "name": "form-control__textarea",
  "extendClass": "",
  "modifier": "",
  "labelData": {
    "text": "",
    "forControlId": "textareaId",
    "extendClass": "",
    "requirement": {
      "text": ""
    }
  },
  "controlData": {
    "controlId": "textareaId",
    "placeholder": "Default placeholder",
    "extendClass": ""
  }
}
  • Content: 
    /* Needed components
@import '../../Atoms/form-control-text/_form-control-text.scss';
*/

.rh-form__textarea {
    height: 9em;
    width: 100%;
    padding: 0.375em 0.75em;
    font-size: $FORM__TEXTAREA--FONT-SIZE;
    line-height: $FORM__TEXTAREA--LINE-HEIGHT;
    border: $FORM__TEXTAREA--BORDER;
    border-radius: $FORM__TEXTAREA--BORDER-RADIUS;
}
  • URL: /components/raw/form-control-textarea/_form-control-textarea.scss
  • Filesystem Path: components/Atoms/form-control-textarea/_form-control-textarea.scss
  • Size: 354 Bytes
  • Content: 
    {
    "name": "regionhalland/form-control-textarea",
    "description": "Atomen form-control-textarea",
    "type": "styleguide-atom",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/form-control-textarea/composer.json
  • Filesystem Path: components/Atoms/form-control-textarea/composer.json
  • Size: 315 Bytes
  • Content: 
    /* Atoms - Form control textarea */
$FORM__TEXTAREA--FONT-SIZE: $font-size--standard;
$FORM__TEXTAREA--BORDER: $border-thin--standard $grey-light;
$FORM__TEXTAREA--BORDER-RADIUS: $border-radius--standard;
$FORM__TEXTAREA--LINE-HEIGHT: $line-height--xl;
  • URL: /components/raw/form-control-textarea/form-control-textarea.settings.scss
  • Filesystem Path: components/Atoms/form-control-textarea/form-control-textarea.settings.scss
  • Size: 252 Bytes

Form control textarea

1.0.0.20200124 (2020-01-24)

  • Globala variabler används

Version 1.0.0.20191112

  • Readme tillagd
  • Status ändrad till “rework”

Planerad utveckling

  • Bryt isär till label-atom och textarea-atom. Det som syns idag flyttas till molekyl