Foehn Design System

Dates: Danger 

<div class="has-danger vd-form-group-danger">
    <fieldset aria-describedby="passeportIssuedErrorMessage
    passeportIssuedHelpText">
        <legend>Quelle est la date d&#39;émission de votre passeport ?</legend>

        <div id="passeportIssuedErrorMessage" class="form-control-feedback text-danger mb-1"><span class="sr-only">Erreur: </span>La date d&#39;émission de votre passeport doit être dans le passé</div>

        <small id="passeportIssuedHelpText" class="form-text text-secondary">Par exemple, 23 7 1979</small>
        <div class="vd-form-flex">
            <div class="vd-form-flex__item vd-form-flex__item--2-char-width">
                <div class="form-group">
                    <label for="inputDatesDay">Jour</label>

                    <input class="form-control is-invalid" type="number" id="inputDatesDay" name="testInput" value="" required aria-required="true" pattern="[0-9]*" min="1" max="31" size="2">
                </div>
            </div>
            <div class="vd-form-flex__item vd-form-flex__item--2-char-width">
                <div class="form-group">
                    <label for="inputDatesMonth">Mois</label>

                    <input class="form-control is-invalid" type="number" id="inputDatesMonth" name="testInput" value="" required aria-required="true" pattern="[0-9]*" min="1" max="12" size="2">
                </div>
            </div>
            <div class="vd-form-flex__item vd-form-flex__item--4-char-width">
                <div class="form-group">
                    <label for="inputDatesYear">Année</label>

                    <input class="form-control is-invalid" type="number" id="inputDatesYear" name="testInput" value="" required aria-required="true" pattern="[0-9]*" min="1950" max="2017" size="4">
                </div>
            </div>
        </div>

    </fieldset>

</div>
 
{%- if validation -%}
<div class="has-{{ validation.class }}
  {%- if validation.class === 'danger' %} vd-form-group-{{ validation.class }}
  {%- endif -%}
  ">
{%- endif -%}

  <fieldset
  {%- if helpText or validation.text %} aria-describedby="
    {%- if validation.text %}{{ id }}ErrorMessage{% endif %}
    {% if helpText %}{{ id }}HelpText{% endif -%}
  "
  {% endif -%}
  >
    <legend
    {%- if legendModifier %} class="{{ legendModifier }}"{% endif %}>
      {{- legend -}}
    </legend>

    {% if validation.text %}
    <div id="{{ id }}ErrorMessage" class="form-control-feedback text-danger mb-1">
      {%- if validation.class == "danger" -%}<span class="sr-only">Erreur: </span>{%- endif -%}
      {{- validation.text -}}
    </div>
    {% endif %}

    {%- if helpText %}
    <small id="{{ id }}HelpText" class="form-text text-secondary">{{ helpText }}</small>
    {% endif -%}

    <div class="vd-form-flex">
      <div class="vd-form-flex__item vd-form-flex__item--2-char-width">
        {%- render '@input--number', inputDay , true -%}
      </div>
      <div class="vd-form-flex__item vd-form-flex__item--2-char-width">
        {%- render '@input--number', inputMonth , true -%}
      </div>
      <div class="vd-form-flex__item vd-form-flex__item--4-char-width">
        {%- render '@input--number', inputYear , true -%}
      </div>
    </div>

  </fieldset>

{% if validation %}
</div>
{% endif %}
 
{
  "id": "passeportIssued",
  "legend": "Quelle est la date d'émission de votre passeport ?",
  "helpText": "Par exemple, 23 7 1979",
  "inputDay": {
    "id": "inputDatesDay",
    "label": "Jour",
    "max": "31",
    "size": "2",
    "class": "form-control is-invalid"
  },
  "inputMonth": {
    "id": "inputDatesMonth",
    "label": "Mois",
    "max": "12",
    "size": "2",
    "class": "form-control is-invalid"
  },
  "inputYear": {
    "id": "inputDatesYear",
    "label": "Année",
    "min": "1950",
    "max": "2017",
    "size": "4",
    "class": "form-control is-invalid"
  },
  "validation": {
    "class": "danger",
    "text": "La date d'émission de votre passeport doit être dans le passé"
  }
}
  • Content: 
    @charset 'UTF-8';

.vd-form-flex {
  display: flex;
  flex-wrap: wrap;

  input[type="number"] {
    /* stylelint-disable */
    -moz-appearance: textfield; /* [1] */

    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      -webkit-appearance: none; /* [2] */
      margin: 0; /* [2] */ /* [3] */
    }
    /* stylelint-enable */
  }
}

/**
 * Set the width of a div containing an `<input>` with x chars (based on the
 * width of an M).
 */
.vd-form-flex__item {
  flex: 0 0 auto;
  margin-right: $spacer;

  &--2-char-width {
    flex-basis: ($font-size-base * 1.9) + ($input-btn-padding-x * 2);
  }

  &--3-char-width {
    flex-basis: ($font-size-base * 2.7) + ($input-btn-padding-x * 2);
  }

  &--4-char-width {
    flex-basis: ($font-size-base * 3.6) + ($input-btn-padding-x * 2);
  }
}
  • URL: /components/raw/dates/_form-flex.scss
  • Filesystem Path: src/components/02-molecules/form/dates/_form-flex.scss
  • Size: 812 Bytes

Inspired from gov.uk dates.