Aeroporto di Bologna - Design System

Input text field: License Plate Negative 

<label for="license-plate-field" class="is-negative" aria-label="">

    Targa

    <div class="input-license-plate">
        <input id="license-plate-field" type="text" class="input-license-plate" placeholder="" value="" aria-describedby="license-plate-note">
    </div>

    <div class="c-field__note " id="license-plate-note">
        <p class="u-color-text-100">La targa deve rispettare lo <button type="button" class="c-button c-button--as-link js-fr-dialogmodal-open" aria-controls="dialog-license-plate-info"><strong>standard europeo</strong></button> (es. AA000AA)</p>
        <p>La targa non rispetta il formato richiesto.</p>
    </div>

</label>

<div class="c-dialog js-fr-dialogmodal " id="dialog-license-plate-info">
    <div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="dialog-license-plate-info-title">
        <div role="document">

            <p class="c-dialog__title" id="dialog-license-plate-info-title" aria-hidden="true">
                La targa deve rispettare lo standard europeo
            </p>

            <p><strong>La targa deve rispettare lo standard europeo</strong></p>
            <p>Il formato standard per le targhe automobilistiche europee include una striscia blu sul lato sinistro che mostra il simbolo dell'UE (un cerchio di 12 stelle) e il codice del paese dello stato membro. Il resto della targa presenta una serie di caratteri unici per ogni autoveicolo, con questi standard:</p>
            <ul class='c-list--bulleted u-mt-space-8'>
                <li>lunghezza minima 5</li>
                <li>lunghezza massima 10</li>
                <li>numeri 0-9</li>
                <li>lettere A-Z</li>
            </ul>

            <button type="button" class="c-dialog__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
                <svg class="c-icon c-icon--32">
                    <use xlink:href="#ic_close_black_24px"></use>
                </svg> </button>
        </div>
    </div>
</div>
 
<label 
  for="{{ label_id }}" 
  class="{{ label_class }}" 
  aria-label="{{ screen-reader-text }}"
  >

  {{{ label_message }}} {{#if atom-input.required}}<span class="required-marker" aria-hidden="true">*</span>{{/if}}
  {{#if label_has_tooltip}} <span class="c-tooltip--24h" data-js-tooltip-label="Espandi per sapere di più"
    data-js-tooltip-icon="ic_error_orange_24px" data-js-bubble-class-position="c-tooltip__bubble--up">
    <p data-toggletip><strong>Attenzione</strong>non è possibile acquistare con meno di 24 ore di anticipo dall'orario di
      inizio della sosta.</p>
  </span>{{/if}}

  <div class="input-license-plate">
    <input 
      id="{{ atom-input.id }}" 
      type="{{ atom-input.type }}"
      class="{{ atom-input.class }}"
      placeholder="{{ atom-input.placeholder }}" 
      value="{{ atom-input.value }}"
  
      {{#if atom-input.hasNote}}
        aria-describedby="{{ atom-input.describedby }}" 
      {{/if}}
  
      {{#if atom-input.isInvalid}}
        aria-invalid=”true”
      {{/if}}
  
      {{#if atom-input.isReadonly}}
        readonly
      {{/if}}
  
      {{#if atom-input.isDisabled}}
        disabled
      {{/if}}
  
      {{#if atom-input.jsEvent }}
        {{{ atom-input.jsEvent }}}
      {{/if}}
  
      {{#if atom-input.maxLength }}
        maxlength="{{ atom-input.maxLength }}"
      {{/if}}
  
      {{#if atom-input.multiple }}
        multiple
      {{/if}}
  
      {{#if atom-input.name }}
        name="{{ atom-input.name }}"
      {{/if}}
      
      {{#if atom-input.autocomplete}}
        autocomplete="{{ atom-input.autocomplete }}"
      {{/if}}
    >
  </div>
  
  {{#if atom-input.hasNote}}
  <div class="c-field__note {{ note_class }}" id="{{ note_id }}">
    {{{ note_message }}}
  </div>
  {{/if}}

</label>

{{#notEqualTo has-dialog-license-plate-info false }}
{{ render "@dialog--dialog-license-plate-info" }}
{{/notEqualTo}}
 
{
  "name": "license-plate",
  "label_id": "license-plate-field",
  "label_message": "Targa",
  "label_class": "is-negative",
  "atom-input": {
    "id": "license-plate-field",
    "type": "text",
    "class": "input-license-plate",
    "placeholder": "",
    "required": false,
    "hasNote": true,
    "describedby": "license-plate-note"
  },
  "note_id": "license-plate-note",
  "note_message": "<p class=\"u-color-text-100\">La targa deve rispettare lo <button type=\"button\" class=\"c-button c-button--as-link js-fr-dialogmodal-open\" aria-controls=\"dialog-license-plate-info\"><strong>standard europeo</strong></button> (es. AA000AA)</p><p>La targa non rispetta il formato richiesto.</p>",
  "note_class": ""
}

No notes defined.