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

Feedback form 

<div class="rh-feedback-form" aria-label="Ge feedback information">
    <div>
        <p class="rh-feedback-form__header__title">Ge feedback</p>
    </div>
    <div class="rh-feedback-form__body">
        <form action="#">
            <p class="rh-form__text--muted">
                <span class="rh-form__text--required">*</span> = Obligatorisk uppgift</p>

            <div class="rh-form-group">
                <label for="feedback-form__message" class="rh-form__label rh-feedback-form__body__label rh-feedback-form__body__label-message">
        Meddelandet (det du skickar till Vårdgivarwebben blir en allmän handling)
        <span class="rh-form__label-text--required">*</span>
    </label>
                <textarea id="feedback-form__message" class="rh-form__control rh-form__textarea rh-feedback-form__body__message" placeholder="Fyll i ditt meddelande"></textarea>
            </div>

            <div class="rh-feedback-form__body__description">
                <p class="rh-feedback-form__body__description-text">När du skickar ett meddelande via ett formulär på en av Region Hallands webbplatser kan du välja om du vill ha svar på ditt meddelande. Om du vill ha svar behöver du lämna din e-postadress.</p>
                <p class="rh-feedback-form__body__description-text"><a href="#" class="rh-link rh-feedback-form__body__link-privacy" title="Förklara vart länken leder">Här kan du läsa mer om hur vi hanterar personuppgifter.</a>
                </p>
            </div>

            <div class="rh-form-group">
                <label for="feedback-form__email" class="rh-form__label rh-feedback-form__body__label rh-feedback-form__body__label-email">
        Din e-postadress
    </label>
                <input id="feedback-form__email" type="text" class="rh-form__control rh-feedback-form__body__input" placeholder="Fyll i din e-postadress" autocomplete="email">
            </div>

            <button class="rh-button rh-button--primary rh-feedback-form__body__button-send" aria-label="Text som förklarar funktionen om man lyssnar med talsyntes utan att se kontexten" role="button">Skicka in</button>

        </form>
    </div>
</div>
 
<div class="rh-feedback-form" aria-label="Ge feedback information">
    <div>
        <p class="rh-feedback-form__header__title">{{title}}</p>
    </div>
    <div class="rh-feedback-form__body">
        <form action="#">
            <p class="rh-form__text--muted">
                <span class="rh-form__text--required">*</span> =
                Obligatorisk uppgift</p>

            {{render '@form-control-textarea' message merge=true}}

            <div class="rh-feedback-form__body__description">
                <p class="rh-feedback-form__body__description-text">{{privacyDescription}}</p>
                <p class="rh-feedback-form__body__description-text">{{render '@link' linkToPrivacy merge=true}}
                </p>
            </div>

            {{render '@form-control-text' email merge=true}}
            {{render '@button--primary' btnSend merge=true}}

        </form>
    </div>
</div>
 
{
  "title": "Ge feedback",
  "privacyDescription": "När du skickar ett meddelande via ett formulär på en av Region Hallands webbplatser kan du välja om du vill ha svar på ditt meddelande. Om du vill ha svar behöver du lämna din e-postadress.",
  "message": {
    "labelData": {
      "text": "Meddelandet (det du skickar till Vårdgivarwebben blir en allmän handling)",
      "forControlId": "feedback-form__message",
      "extendClass": "rh-feedback-form__body__label rh-feedback-form__body__label-message",
      "requirement": {
        "text": "*"
      }
    },
    "controlData": {
      "controlId": "feedback-form__message",
      "placeholder": "Fyll i ditt meddelande",
      "extendClass": "rh-feedback-form__body__message"
    }
  },
  "linkToPrivacy": {
    "text": "Här kan du läsa mer om hur vi hanterar personuppgifter.",
    "title": "",
    "extendClass": "rh-feedback-form__body__link-privacy"
  },
  "email": {
    "labelData": {
      "text": "Din e-postadress",
      "forControlId": "feedback-form__email",
      "extendClass": "rh-feedback-form__body__label rh-feedback-form__body__label-email"
    },
    "controlData": {
      "controlId": "feedback-form__email",
      "placeholder": "Fyll i din e-postadress",
      "autocompleteType": "email",
      "extendClass": "rh-feedback-form__body__input"
    }
  },
  "btnSend": {
    "text": "Skicka in",
    "extendClass": "rh-feedback-form__body__button-send"
  }
}
  • Content: 
    /* Needed components
@import '../../Atoms/form-control-text/form-control-text';
@import '../../Atoms/form-control-textarea/form-control-textarea';
@import '../../Atoms/link/link';
@import '../../Atoms/button/button';
*/

.rh-feedback-form {
    /* Box-modell/beteende */
    width: $feedback-form--width;
    min-width: $feedback-form--min-width;
    max-width: $feedback-form--max-width;

    &__header {
        &__title {
            /* Typografi */
            font-size: $feedback-form__header__title--font-size;
            font-weight: bold;
        }
    }

    &__body {
        /* Box-modell/beteende */
        padding: $feedback-form__body--padding;
        margin: $feedback-form__body--margin;

        /* Visuellt */
        border-radius: $feedback-form__body--border-radius;
        background-color: $feedback-form__body--background-color;

        &__label {
            /* Typografi */
            font-size: $feedback-form__body__label--font-size; // 15px

            &-message {
                /* Box-modell/beteende */
                margin: 1em 0 0.3125em 0;

                /* Typografi */
                line-height: $line-height--xl;
            }

            &-email {
                /* Typografi */
                font-weight: bold;
            }
        }

        &__message {
            /* Box-modell/beteende */
            resize: none;
        }

        &__description {
            /* Box-modell/beteende */
            margin: $feedback-form__body__description--margin;

            &-text {
                /* Box-modell/beteende */
                margin-bottom: 1.5em;
            }
        }

        &__link-privacy {

            /* Typografi */
            @if $feedback-form__color-link--normal {
                color: $feedback-form__color-link--normal;
            }

            &:hover {
                text-decoration: none;
            }
        }

        &__input {
            /* Box-modell/beteende */
            height: 3.215em;
        }
    }
}

.rh-feedback-form__body__button-send {

    /* Box-modell/beteende */
    @if $feedback-form__body__button-send--margin {
        margin: $feedback-form__body__button-send--margin;
    }

    @if $feedback-form__body__button-send--padding {
        padding: $feedback-form__body__button-send--padding;
    }

    @if $feedback-form__body__button-send--height {
        height: $feedback-form__body__button-send--height;
    }

    /* Visuellt */
    @if $feedback-form__body__button-send--background-color {
        background-color: $feedback-form__body__button-send--background-color;
    }

    /* Blandat/övrigt */
    @if $feedback-form__body__button-send--cursor {
        cursor: $feedback-form__body__button-send--cursor;
    }
}
  • URL: /components/raw/feedback-form/_feedback-form.scss
  • Filesystem Path: components/Molecules/feedback-form/_feedback-form.scss
  • Size: 2.8 KB
  • Content: 
    {
    "name": "regionhalland/feedback-form",
    "description": "Feedback form",
    "type": "styleguide-molecule",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/feedback-form/composer.json
  • Filesystem Path: components/Molecules/feedback-form/composer.json
  • Size: 295 Bytes
  • Content: 
    /* Molecules - Feddback form */
$feedback-form__color-link--normal: false; // Using for customization - Ex: #004890

// Placeholder
$feedback-form--width: 100%;
$feedback-form--min-width: 18em; // 20em - 320px - iPhone 5/SE
$feedback-form--max-width: 40em; // 640px - Design

// Font-size
$feedback-form__header__title--font-size: $font-size--xl;
$feedback-form__body__label--font-size: $font-size--medium;

// Other
$feedback-form__body--margin: 0.4em 0 0 0;
$feedback-form__body--padding: 1.5625em 0.875em 1.875em 0.875em;
$feedback-form__body--border-radius: $border-radius--standard; // 4px
$feedback-form__body--background-color: $grey-lightest;

$feedback-form__body__description--margin: 0 0 2.2em 0;

$feedback-form__body__button-send--height: false;
$feedback-form__body__button-send--height-large: false;
$feedback-form__body__button-send--margin: false;
$feedback-form__body__button-send--padding: false;
$feedback-form__body__button-send--background-color: false;
$feedback-form__body__button-send--cursor: false;
  • URL: /components/raw/feedback-form/feedback-form.settings.scss
  • Filesystem Path: components/Molecules/feedback-form/feedback-form.settings.scss
  • Size: 1 KB

Form - feedback

Planerade förändringar

  • Flytta till en organism eftersom atomerna som den inkluderar skall flyttas till molekyler. OBS! Detta hindrar inte att komponenten används idag.

Versioner

  • 1.0.0.20200130 Globala variabler används.
  • 1.0.0.20191121 Flyttat till gitrepo
  • 1.0.0.20191113 Readme skapad.