DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Item de estado

Datos

Bloque con listas de descripción o etiquetas, además de información del estado de las aportaciones realizadas. Generalmente utilizado en formularios.

Status-item

Por defecto

Recuerda que los items, por accesibilidad, deben estar rodeados de una etiqueta semántica, normalmente un <li>.

Título

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "default",
  "title": {
    "text": "Título"
  }
}) %}
<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> item del Título</span></button>
{% endcall  %}

Por defecto sólo items

término
definición
término
definición
término
definición

Correcto

Mostrar códigodel ejemplo: Por defecto sólo items

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "only-items",
  "items": [
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      }
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      }
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      }
    }
  ],
  "status": {
    "text": "Correcto",
    "icon": {
      "type": "success"
    }
  }
}) %}
<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> los datos de término y definición y el resto</span></button>
{% endcall  %}

Con título html

Autorización para la consulta de datos de las personas de la unidad familiar. (Documento condicionado)

Mostrar códigodel ejemplo: Con título html

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-title-html",
  "title": {
    "html": "Autorización para la consulta de datos de las personas de la unidad familiar. <span class='text-neutral-dark'>(Documento condicionado)</span>"
  }
}) %}
<button class='c-button c-button--transparent'>Aportar<span class='sr-only'> Autorización para la consulta de datos de las personas de la unidad familiar</span></button>
{% endcall  %}

Con pista

Personas de la unidad familiar

2 personas añadidas

Aportado

Mostrar códigodel ejemplo: Con pista

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-hint",
  "title": {
    "text": "Personas de la unidad familiar"
  },
  "hint": {
    "text": "2 personas añadidas"
  },
  "status": {
    "text": "Aportado",
    "icon": {
      "type": "success"
    }
  }
}) %}
<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> personas de la unidad familiar</span></button>
{% endcall  %}

Con pista html

Autorización para la consulta de datos de las personas de la unidad familiar

Descargar modelo

Mostrar códigodel ejemplo: Con pista html

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-hint-html",
  "title": {
    "text": "Autorización para la consulta de datos de las personas de la unidad familiar"
  },
  "hint": {
    "html": "<a href='#' class='c-link'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='inline-block self-center w-4 h-4 mr-sm no-underline' role='img' aria-hidden='true'><path d='M100.3 52.2a7.49 7.49 0 00-10.6 0L77.5 64.39V7.5a7.5 7.5 0 00-15 0v56.89L50.3 52.2a7.5 7.5 0 10-10.6 10.6l25 25a7.49 7.49 0 0010.6 0l25-25a7.49 7.49 0 000-10.6zM130 95a10 10 0 00-10 10v12.5a2.5 2.5 0 01-2.5 2.5h-95a2.5 2.5 0 01-2.5-2.5V105a10 10 0 00-20 0v15a20 20 0 0020 20h100a20 20 0 0020-20v-15a10 10 0 00-10-10z' fill='currentColor'/></svg>Descargar modelo</a>"
  }
}) %}
<button class='c-button c-button--transparent'>Aportar<span class='sr-only'> Autorización para la consulta de datos de las personas de la unidad familiar</span></button>
{% endcall  %}

Con estado simple

Datos adicionales del solicitante

Iniciado

Mostrar códigodel ejemplo: Con estado simple

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-status-simple",
  "title": {
    "text": "Datos adicionales del solicitante"
  },
  "status": {
    "text": "Iniciado"
  }
}) %}
<button class='c-button c-button--transparent'>Rellenar<span class='sr-only'> datos adicionales del solicitante</span></button>
{% endcall  %}

Con estado éxito

Datos adicionales del solicitante

Aportado

Mostrar códigodel ejemplo: Con estado éxito

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-status-success",
  "title": {
    "text": "Datos adicionales del solicitante"
  },
  "status": {
    "text": "Aportado",
    "icon": {
      "type": "success"
    }
  }
}) %}
<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>
{% endcall  %}

Con estado alerta

Datos adicionales del solicitante

Error:Es necesario aportar este documento para enviar el trámite

Incompleto

Mostrar códigodel ejemplo: Con estado alerta

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-status-alert",
  "title": {
    "text": "Datos adicionales del solicitante"
  },
  "errorMessage": {
    "text": "Es necesario aportar este documento para enviar el trámite",
    "classes": "my-sm text-alert-base"
  },
  "status": {
    "text": "Incompleto",
    "icon": {
      "type": "alert"
    },
    "classes": "text-alert-base"
  },
  "classes": "border-l-4 border-alert-base"
}) %}
<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>
{% endcall  %}

Con estado cargando

Datos adicionales del solicitante

Subiendo (20%)

Mostrar códigodel ejemplo: Con estado cargando

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-status-loading",
  "title": {
    "text": "Datos adicionales del solicitante"
  },
  "status": {
    "text": "Subiendo (20%)",
    "icon": {
      "type": "loading"
    }
  }
}) %}
<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>
{% endcall  %}

Con estado error

Datos adicionales del solicitante

Error:Se ha producido un error al subir el archivo

Error

Mostrar códigodel ejemplo: Con estado error

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-status-error",
  "title": {
    "text": "Datos adicionales del solicitante"
  },
  "errorMessage": {
    "text": "Se ha producido un error al subir el archivo",
    "classes": "my-sm text-alert-base"
  },
  "status": {
    "text": "Error",
    "icon": {
      "type": "error"
    },
    "classes": "text-alert-base"
  },
  "classes": "border-l-4 border-alert-base"
}) %}
<button class='c-button c-button--transparent'>Ver<span class='sr-only'> datos adicionales del solicitante</span></button>
{% endcall  %}

Con html en la definición

Acreditación
Mediante archivo adjunto Modelo de solicitud (PDF, 200Kb)

Completo

Mostrar códigodel ejemplo: Con html en la definición

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-html-in-definition",
  "items": [
    {
      "term": {
        "text": "Acreditación"
      },
      "definition": {
        "html": "Mediante archivo adjunto <a href='#' class='c-link inline-block'>Modelo de solicitud (PDF, 200Kb)</a>"
      }
    }
  ],
  "status": {
    "text": "Completo",
    "icon": {
      "type": "success"
    }
  }
}) %}
<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> acreditación</span></button>
{% endcall  %}

Incompleto

Nombre
Ana
Apellidos
Pérez Escribano
Número de identificación
72882918B

Incompleto

Mostrar códigodel ejemplo: Incompleto

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "incompleto-status-item",
  "items": [
    {
      "term": {
        "text": "Nombre"
      },
      "definition": {
        "text": "Ana"
      }
    },
    {
      "term": {
        "text": "Apellidos"
      },
      "definition": {
        "text": "Pérez Escribano"
      }
    },
    {
      "term": {
        "text": "Número de identificación"
      },
      "definition": {
        "text": "72882918B"
      }
    }
  ],
  "status": {
    "text": "Incompleto",
    "icon": {
      "type": "alert"
    }
  },
  "classes": "border-l-4 border-alert-base"
}) %}
<button class='c-button c-button--transparent'>Rellenar<span class='sr-only'> datos adicionales del solicitante</span></button>
{% endcall  %}