DESY

Sistema de Diseño del Gobierno de Aragón.

Índice de apartados de esta página

Item de estado

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

Mostrar parámetros

Parámetros del componente

              params:
- name: id
  type: string
  required: true
  description: The id of the item.
- name: title
  type: object
  required: false
  description: This is the title
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text to use within the title. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML to use within the title. If `html` is provided, the `text` argument will be ignored.
  - name: classes
    type: string
    required: false
    description: Classes to add to the item title.
- name: hint
  type: object
  required: false
  description: Options for the hint component.
  isComponent: true
- name: errorMessage
  type: object
  required: false
  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
- name: errorId
  type: string
  required: false
  description: Custom ID to add to the `aria-errormessage` attribute, used to provide additional descriptive information for screenreader users.
- name: describedBy
  type: string
  required: false
  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
- name: items
  type: array
  required: false
  description: Description list items
  params:
  - name: term
    type: object
    required: true
    description: term in dt.
    - name: text
      type: string
      required: true
      description: If `html` is set, this is not required. Text to use within each dt item. If `html` is provided, the `text` argument will be ignored.
    - name: html
      type: string
      required: true
      description: If `text` is set, this is not required. HTML to use within each dt item. If `html` is provided, the `text` argument will be ignored.
    - name: classes
      type: string
      required: false
      description: Classes to add to the dt.
    - name: attributes
      type: object
      required: false
      description: HTML attributes (for example data attributes) to add to the dt.
  - name: definition
    type: object
    required: true
    description: definition in dd.
    - name: text
      type: string
      required: true
      description: If `html` is set, this is not required. Text to use within each dd item. If `html` is provided, the `text` argument will be ignored.
    - name: html
      type: string
      required: true
      description: If `text` is set, this is not required. HTML to use within each dd item. If `html` is provided, the `text` argument will be ignored.
    - name: classes
      type: string
      required: false
      description: Classes to add to the dd.
    - name: attributes
      type: object
      required: false
      description: HTML attributes (for example data attributes) to add to the dd.
  - name: classes
    type: string
    required: false
    description: Classes to add to a div container that contain the dt/dd pair.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to a div container that contain the dt/dd pair.
- name: status
  type: object
  required: false
  description: Options for the status component.
- name: classes
  type: string
  required: false
  description: Classes to add to the status container div tag.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the container div tag.
- name: caller
  type: nunjucks-block
  required: false
  description: Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire item component in a `call` block.

Por defecto

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

Estado

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": "Estado",
    "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  %}