Europa Component Library

Status

Documentation • Demo

EMA status

{#
  - "variant" (string): can be empty, 'info', 'authorized', 'refused' (default: '')
  - "status" (string): copyright text (default: '')
  - "description" (string): description text (default: '')
  - "extra_classes" (string): extra CSS classes to be added
  - "extra_attributes" (array): extra attributes classes (optional, format: [{ 'name': 'name_of_the_attribute', 'value': 'value_of_the_attribute'}])
#}

{# Internal properties #}

{% set _status = status|default('') %}
{% set _description = description|default('') %}
{% set _icon = 'info' %}
{% set _css_class = 'ema-status' %}
{% set _extra_attributes = '' %}
{% set _icon_path = icon_path|default('../../framework/images/icons/ema-icons.svg') %}

{# Internal properties #}

{% set _css_class = 'ema-status' %}
{% set _extra_attributes = '' %}

{# Internal logic - Process properties #}

{% if variant is defined and variant is not empty %}
  {% set _css_class = _css_class ~ ' ' ~ 'ema-status--' ~ variant %}
  {% if variant == 'authorised' %}
    {% set _icon = 'select' %}
  {% elseif (variant == 'refused') or (variant == 'withdrawn') or (variant == 'suspended') %}
    {% set _icon = 'close' %}
  {% endif %}

{% endif %}

{% if extra_classes is defined and extra_classes is not empty %}
  {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
{% endif %}

{% if extra_attributes is defined and extra_attributes is not empty %}
  {% for attr in extra_attributes %}
    {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~ '"' %}
  {% endfor %}
{% endif %}

{# Print result #}

<div class="{{ _css_class }}" {{ _extra_attributes }}">
  <svg class="ema-icon ema-icon--xl ecl-u-fs-xxl ecl-u-mr-xs ema-status-icon" {{ _extra_attributes }}>
    <use xlink:href="{{ _icon_path }}#ema-icon-set_{{ _icon }}" />
  </svg>
  <span>
    <div class="ema-status-title">{{ status }}</div>
    <div class="ema-status-desc">{{ description }}</div>
  </span>
</div>
 
/* Info */
{
  "variant": "info",
  "status": "Current status",
  "description": "European Commission final decision"
}


/* Authorised */
{
  "variant": "authorised",
  "status": "Authorised",
  "description": "This medicine is authorised for use in the European Union"
}


/* Refused */
{
  "variant": "refused",
  "status": "Refused",
  "description": "This medicine was refused for use in the European Union"
}


/* Withdrawn */
{
  "variant": "withdrawn",
  "status": "Withdrawn",
  "description": "This medicine is now withdrawn from use in the European Union"
}


/* Suspended */
{
  "variant": "suspended",
  "status": "Suspended",
  "description": "This medicine is currently suspended from use in the European Union"
}


/* Patient safety */
{
  "variant": "patient-safety",
  "status": "Patient safety",
  "description": "Patient safety information"
}


<!-- Info -->
<div class="ema-status ema-status--info" ">
  <svg class="ema-icon ema-icon--xl ecl-u-fs-xxl ecl-u-mr-xs ema-status-icon " >
    <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_info " />
  </svg>
  <span>
    <div class="ema-status-title ">Current status</div>
    <div class="ema-status-desc ">European Commission final decision</div>
  </span>
</div>


<!-- Authorised -->
<div class="ema-status ema-status--authorised" ">
  <svg class="ema-icon ema-icon--xl ecl-u-fs-xxl ecl-u-mr-xs ema-status-icon " >
    <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_select " />
  </svg>
  <span>
    <div class="ema-status-title ">Authorised</div>
    <div class="ema-status-desc ">This medicine is authorised for use in the European Union</div>
  </span>
</div>


<!-- Refused -->
<div class="ema-status ema-status--refused" ">
  <svg class="ema-icon ema-icon--xl ecl-u-fs-xxl ecl-u-mr-xs ema-status-icon " >
    <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_close " />
  </svg>
  <span>
    <div class="ema-status-title ">Refused</div>
    <div class="ema-status-desc ">This medicine was refused for use in the European Union</div>
  </span>
</div>


<!-- Withdrawn -->
<div class="ema-status ema-status--withdrawn" ">
  <svg class="ema-icon ema-icon--xl ecl-u-fs-xxl ecl-u-mr-xs ema-status-icon " >
    <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_close " />
  </svg>
  <span>
    <div class="ema-status-title ">Withdrawn</div>
    <div class="ema-status-desc ">This medicine is now withdrawn from use in the European Union</div>
  </span>
</div>


<!-- Suspended -->
<div class="ema-status ema-status--suspended" ">
  <svg class="ema-icon ema-icon--xl ecl-u-fs-xxl ecl-u-mr-xs ema-status-icon " >
    <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_close " />
  </svg>
  <span>
    <div class="ema-status-title ">Suspended</div>
    <div class="ema-status-desc ">This medicine is currently suspended from use in the European Union</div>
  </span>
</div>


<!-- Patient safety -->
<div class="ema-status ema-status--patient-safety" ">
  <svg class="ema-icon ema-icon--xl ecl-u-fs-xxl ecl-u-mr-xs ema-status-icon " >
    <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_info " />
  </svg>
  <span>
    <div class="ema-status-title ">Patient safety</div>
    <div class="ema-status-desc ">Patient safety information</div>
  </span>
</div>
  • Content: 
    /**
 * Status component
 */

.ema-status {
  color: #fff;
  display: flex;
  font-size: map-get($ecl-font-size, 'm');
  margin: 0;
  padding: map-get($ecl-spacing, 'm') map-get($ecl-spacing, 'xs');
}

.ema-status-icon {
  flex-shrink: 0;
}

.ema-status--info,
.ema-status--patient-safety {
  background-color: map-get($ema-colors, 'epar-grey');
}
.ema-status--authorised {
  background-color: map-get($ema-colors, 'epar-green');
}
.ema-status--refused,
.ema-status--withdrawn,
.ema-status--suspended {
  background-color: map-get($ema-colors, 'epar-red');
}

.ema-status-title {
  text-transform: uppercase;
}

.ema-status-desc {
  font-size: map-get($ecl-font-size, 's');
  margin-top: map-get($ecl-spacing, 'xxxs');
}
  • URL: /components/raw/ema-status/ema-status.scss
  • Filesystem Path: framework/components/ema-status/ema-status.scss
  • Size: 720 Bytes
  • Handle: @ec-europa/ema-status
  • Tags: molecule
  • Preview:
  • Filesystem Path: framework/components/ema-status/ema-status.twig