# Ejemplo de código de Item de estado. DESY. Sistema de diseño del Gobierno de Aragón.

## Componentes Índice de páginas

Componentes

# 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

Mostrar parámetros

## Parámetros Nunjucks del componente: "Status-item"

```yaml
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 [#](#por-defecto)

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

Mostrar códigodel ejemplo: Por defecto

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% 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  %}
```

##### HTML

```html
<!-- status-item -->
<div id="default">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
    <div class="lg:w-2/3">
      <p class="my-sm">Título</p>
    </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
        <button class='c-button c-button--transparent'>Modificar<span class='sr-only'> item del Título</span></button>
      </div>
    </div>
  </div>
</div>
<!-- /status-item -->
```

### Por defecto sólo items [#](#por-defecto-slo-items)

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

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% 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  %}
```

##### HTML

```html
<!-- status-item -->
<div id="only-items">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
    <div class="lg:w-2/3">
      <dl>
        <div class="flex lg-flex-wrap">
          <dt class="w-1/2 my-sm">
            término
          </dt>
          <dd class="w-1/2 my-sm font-semibold">
            definición
          </dd>
        </div>
        <div class="flex lg-flex-wrap">
          <dt class="w-1/2 my-sm">
            término
          </dt>
          <dd class="w-1/2 my-sm font-semibold">
            definición
          </dd>
        </div>
        <div class="flex lg-flex-wrap">
          <dt class="w-1/2 my-sm">
            término
          </dt>
          <dd class="w-1/2 my-sm font-semibold">
            definición
          </dd>
        </div>
      </dl>
    </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
        <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>
      </div>
      <div class="mb-base lg:mb-0 ml-base py-sm">
        <!-- status -->
        <div>
          <p class="inline-flex items-center">
            <span class="inline-block font-bold uppercase">
              Correcto
            </span>
            <span class="inline-block ml-sm">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-success-dark" aria-hidden="true" focusable="false">
                <path d="M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z" fill="currentColor" />
              </svg>
            </span>
          </p>
        </div>
        <!-- /status -->
      </div>
    </div>
  </div>
</div>
<!-- /status-item -->
```

### Con título html [#](#con-ttulo-html)

Mostrar códigodel ejemplo: Con título html

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% 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  %}
```

##### HTML

```html
<!-- status-item -->
<div id="with-title-html">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
    <div class="lg:w-2/3">
      <p class="my-sm">Autorización para la consulta de datos de las personas de la unidad familiar. <span class="text-neutral-dark">(Documento condicionado)</span></p>
    </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
        <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>
      </div>
    </div>
  </div>
</div>
<!-- /status-item -->
```

### Con pista [#](#con-pista)

Mostrar códigodel ejemplo: Con pista

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% 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  %}
```

##### HTML

```html
<!-- status-item -->
<div id="with-hint">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
    <div class="lg:w-2/3">
      <p class="my-sm">Personas de la unidad familiar</p>
      <!-- hint -->
      <p id="with-hint-hint" class="block text-neutral-dark">2 personas añadidas</p>
      <!-- /hint -->
    </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
        <button class='c-button c-button--transparent'>Modificar<span class='sr-only'> personas de la unidad familiar</span></button>
      </div>
      <div class="mb-base lg:mb-0 ml-base py-sm">
        <!-- status -->
        <div>
          <p class="inline-flex items-center">
            <span class="inline-block font-bold uppercase">
              Aportado
            </span>
            <span class="inline-block ml-sm">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-success-dark" aria-hidden="true" focusable="false">
                <path d="M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z" fill="currentColor" />
              </svg>
            </span>
          </p>
        </div>
        <!-- /status -->
      </div>
    </div>
  </div>
</div>
<!-- /status-item -->
```

### Con pista html [#](#con-pista-html)

Mostrar códigodel ejemplo: Con pista html

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% 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  %}
```

##### HTML

```html
<!-- status-item -->
<div id="with-hint-html">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
    <div class="lg:w-2/3">
      <p class="my-sm">Autorización para la consulta de datos de las personas de la unidad familiar</p>
      <!-- hint -->
      <p id="with-hint-html-hint" class="block text-neutral-dark"><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></p>
      <!-- /hint -->
    </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
        <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>
      </div>
    </div>
  </div>
</div>
<!-- /status-item -->
```

### Con estado simple [#](#con-estado-simple)

Mostrar códigodel ejemplo: Con estado simple

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% 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  %}
```

##### HTML

```html
<!-- status-item -->
<div id="with-status-simple">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
    <div class="lg:w-2/3">
      <p class="my-sm">Datos adicionales del solicitante</p>
    </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
        <button class='c-button c-button--transparent'>Rellenar<span class='sr-only'> datos adicionales del solicitante</span></button>
      </div>
      <div class="mb-base lg:mb-0 ml-base py-sm">
        <!-- status -->
        <div>
          <p class="inline-flex items-center">
            <span class="inline-block font-bold uppercase">
              Iniciado
            </span>
            <span class="inline-block ml-sm">
            </span>
          </p>
        </div>
        <!-- /status -->
      </div>
    </div>
  </div>
</div>
<!-- /status-item -->
```

### Con estado éxito [#](#con-estado-xito)

Mostrar códigodel ejemplo: Con estado éxito

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% 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  %}
```

##### HTML

```html
<!-- status-item -->
<div id="with-status-success">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
    <div class="lg:w-2/3">
      <p class="my-sm">Datos adicionales del solicitante</p>
    </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
        <button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>
      </div>
      <div class="mb-base lg:mb-0 ml-base py-sm">
        <!-- status -->
        <div>
          <p class="inline-flex items-center">
            <span class="inline-block font-bold uppercase">
              Aportado
            </span>
            <span class="inline-block ml-sm">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-success-dark" aria-hidden="true" focusable="false">
                <path d="M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z" fill="currentColor" />
              </svg>
            </span>
          </p>
        </div>
        <!-- /status -->
      </div>
    </div>
  </div>
</div>
<!-- /status-item -->
```

### Con estado alerta [#](#con-estado-alerta)

Mostrar códigodel ejemplo: Con estado alerta

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% 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  %}
```

##### HTML

```html
<!-- status-item -->
<div id="with-status-alert" class="border-l-4 border-alert-base">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
    <div class="lg:w-2/3">
      <p class="my-sm">Datos adicionales del solicitante</p>
      <!-- error-message -->
      <p id="with-status-alert-error" class="block font-semibold text-alert-base my-sm text-alert-base">
        <span class="sr-only">Error:</span>Es necesario aportar este documento para enviar el trámite
      </p>
      <!-- /error-message -->
    </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
        <button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>
      </div>
      <div class="mb-base lg:mb-0 ml-base py-sm">
        <!-- status -->
        <div class="text-alert-base">
          <p class="inline-flex items-center">
            <span class="inline-block font-bold uppercase">
              Incompleto
            </span>
            <span class="inline-block ml-sm">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-alert-base" aria-hidden="true" focusable="false">
                <path d="M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor" />
              </svg>
            </span>
          </p>
        </div>
        <!-- /status -->
      </div>
    </div>
  </div>
</div>
<!-- /status-item -->
```

### Con estado cargando [#](#con-estado-cargando)

Mostrar códigodel ejemplo: Con estado cargando

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% 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  %}
```

##### HTML

```html
<!-- status-item -->
<div id="with-status-loading">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
    <div class="lg:w-2/3">
      <p class="my-sm">Datos adicionales del solicitante</p>
    </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
        <button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>
      </div>
      <div class="mb-base lg:mb-0 ml-base py-sm">
        <!-- status -->
        <div>
          <p class="inline-flex items-center">
            <span class="inline-block font-bold uppercase">
              Subiendo (20%)
            </span>
            <span class="inline-block ml-sm">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" focusable="false">
                <path d="M71.15 2.3a7.7 7.7 0 100 15.4A52.3 52.3 0 1118.85 70a62.29 62.29 0 014.7-23.16l5.76 4a7.55 7.55 0 004.25 1.31 7.41 7.41 0 004.09-1.22 7.51 7.51 0 003.28-7.68L37 22.45a7.52 7.52 0 00-8.66-6l-21 3.65a7.5 7.5 0 00-3 13.57l6.21 4.27A77.78 77.78 0 003.45 70a67.7 67.7 0 1067.7-67.7z" fill="currentColor" />
                <path d="M91.15 92.5a7.45 7.45 0 01-3.35-.79l-20-10A7.51 7.51 0 0163.65 75V42.5a7.5 7.5 0 0115 0v27.87l15.86 7.92a7.5 7.5 0 01-3.36 14.21z" fill="currentColor" />
              </svg>
            </span>
          </p>
        </div>
        <!-- /status -->
      </div>
    </div>
  </div>
</div>
<!-- /status-item -->
```

### Con estado error [#](#con-estado-error)

Mostrar códigodel ejemplo: Con estado error

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% 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  %}
```

##### HTML

```html
<!-- status-item -->
<div id="with-status-error" class="border-l-4 border-alert-base">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
    <div class="lg:w-2/3">
      <p class="my-sm">Datos adicionales del solicitante</p>
      <!-- error-message -->
      <p id="with-status-error-error" class="block font-semibold text-alert-base my-sm text-alert-base">
        <span class="sr-only">Error:</span>Se ha producido un error al subir el archivo
      </p>
      <!-- /error-message -->
    </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
        <button class='c-button c-button--transparent'>Ver<span class='sr-only'> datos adicionales del solicitante</span></button>
      </div>
      <div class="mb-base lg:mb-0 ml-base py-sm">
        <!-- status -->
        <div class="text-alert-base">
          <p class="inline-flex items-center">
            <span class="inline-block font-bold uppercase">
              Error
            </span>
            <span class="inline-block ml-sm">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-alert-base" aria-hidden="true" focusable="false">
                <path d="M70 75a7.5 7.5 0 007.5-7.5v-25a7.5 7.5 0 00-15 0v25A7.5 7.5 0 0070 75zM60 92.5a10 10 0 1020 0 10 10 0 10-20 0z" fill="currentColor" />
                <path d="M139.78 101.83L135 82.6a7.51 7.51 0 00-9.1-5.45l-19.22 4.8a7.5 7.5 0 00-2 13.71l6.11 3.66A55.31 55.31 0 0170 120.19a50.47 50.47 0 01-47.16-33.06 7.503 7.503 0 00-14.09 5.16A65.52 65.52 0 0070 135.19 71.27 71.27 0 00123.57 107l5.07 3a7.5 7.5 0 0011.14-8.25zM14.13 62.85l19.22-4.8a7.5 7.5 0 002.05-13.71L29.76 41A56.18 56.18 0 0170 19.81a50.47 50.47 0 0147.16 33.06 7.51 7.51 0 007 4.92 7.61 7.61 0 002.59-.46 7.51 7.51 0 004.46-9.62A65.52 65.52 0 0070 4.81 71.53 71.53 0 0016.83 33.2l-5.47-3.28A7.5 7.5 0 00.22 38.17L5 57.4a7.51 7.51 0 007.27 5.68 7.65 7.65 0 001.86-.23z" fill="currentColor" />
              </svg>
            </span>
          </p>
        </div>
        <!-- /status -->
      </div>
    </div>
  </div>
</div>
<!-- /status-item -->
```

### Con html en la definición [#](#con-html-en-la-definicin)

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

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% 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  %}
```

##### HTML

```html
<!-- status-item -->
<div id="with-html-in-definition">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
    <div class="lg:w-2/3">
      <dl>
        <div class="flex lg-flex-wrap">
          <dt class="w-1/2 my-sm">
            Acreditación
          </dt>
          <dd class="w-1/2 my-sm font-semibold">
            Mediante archivo adjunto <a href="#" class="c-link inline-block">Modelo de solicitud (PDF, 200Kb)</a>
          </dd>
        </div>
      </dl>
    </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
        <button class='c-button c-button--transparent'>Modificar<span class='sr-only'> acreditación</span></button>
      </div>
      <div class="mb-base lg:mb-0 ml-base py-sm">
        <!-- status -->
        <div>
          <p class="inline-flex items-center">
            <span class="inline-block font-bold uppercase">
              Completo
            </span>
            <span class="inline-block ml-sm">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-success-dark" aria-hidden="true" focusable="false">
                <path d="M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z" fill="currentColor" />
              </svg>
            </span>
          </p>
        </div>
        <!-- /status -->
      </div>
    </div>
  </div>
</div>
<!-- /status-item -->
```

### Incompleto [#](#incompleto)

Mostrar códigodel ejemplo: Incompleto

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% 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  %}
```

##### HTML

```html
<!-- status-item -->
<div id="incompleto-status-item" class="border-l-4 border-alert-base">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
    <div class="lg:w-2/3">
      <dl>
        <div class="flex lg-flex-wrap">
          <dt class="w-1/2 my-sm">
            Nombre
          </dt>
          <dd class="w-1/2 my-sm font-semibold">
            Ana
          </dd>
        </div>
        <div class="flex lg-flex-wrap">
          <dt class="w-1/2 my-sm">
            Apellidos
          </dt>
          <dd class="w-1/2 my-sm font-semibold">
            Pérez Escribano
          </dd>
        </div>
        <div class="flex lg-flex-wrap">
          <dt class="w-1/2 my-sm">
            Número de identificación
          </dt>
          <dd class="w-1/2 my-sm font-semibold">
            72882918B
          </dd>
        </div>
      </dl>
    </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
        <button class='c-button c-button--transparent'>Rellenar<span class='sr-only'> datos adicionales del solicitante</span></button>
      </div>
      <div class="mb-base lg:mb-0 ml-base py-sm">
        <!-- status -->
        <div>
          <p class="inline-flex items-center">
            <span class="inline-block font-bold uppercase">
              Incompleto
            </span>
            <span class="inline-block ml-sm">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-alert-base" aria-hidden="true" focusable="false">
                <path d="M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor" />
              </svg>
            </span>
          </p>
        </div>
        <!-- /status -->
      </div>
    </div>
  </div>
</div>
<!-- /status-item -->
```