From 0442fdde8b63bb82e03513e0c5069661651d87fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xurxo=20Adri=C3=A1n?=
 <41774881+xentenza@users.noreply.github.com>
Date: Mon, 6 May 2024 13:05:04 +0200
Subject: [PATCH] Highlighted key number (#715)

- new Key number variant
- two versions: with or without link
---
 .../key-number/key-number-hn-link.twig        | 23 +++++++++++++++++++
 .../molecules/key-number/key-number-hn.twig   | 23 +++++++++++++++++++
 .../molecules/key-number/key-number.yml       |  4 ++++
 .../key-number-group/key-number-group-hn.twig |  7 ++++++
 .../key-number-group/key-number-group.yml     |  3 +++
 5 files changed, 60 insertions(+)
 create mode 100644 assets/components/molecules/key-number/key-number-hn-link.twig
 create mode 100644 assets/components/molecules/key-number/key-number-hn.twig
 create mode 100644 assets/components/organisms/key-number-group/key-number-group-hn.twig

diff --git a/assets/components/molecules/key-number/key-number-hn-link.twig b/assets/components/molecules/key-number/key-number-hn-link.twig
new file mode 100644
index 000000000..fb78b3271
--- /dev/null
+++ b/assets/components/molecules/key-number/key-number-hn-link.twig
@@ -0,0 +1,23 @@
+{% set icon = icon|default("https://via.placeholder.com/") %}
+<a class="card link-trapeze-horizontal" href="#">
+  <div class="card border-0 bg-white m-0 h-100">
+    <div class="card-header border-0">
+      <div class="row">
+        <div class="col-md-6">
+          <p class="h4">près de 18'000</p>
+        </div>
+        <div class="col-md-6 text-right">
+          <img src="images/styleguide/key-numbers/students.png" class="d-block m-auto" alt="Pictogramme avec deux personnages" />
+        </div>
+      </div>
+    </div>
+    <div class="card-body pt-0">
+      <div class="row">
+        <div class="col-md-12">
+          <hr />
+          <p>étudiant·es, collaborateurs et collaboratrices font de l'EPFL une petite ville trépidante et dynamique</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</a>
diff --git a/assets/components/molecules/key-number/key-number-hn.twig b/assets/components/molecules/key-number/key-number-hn.twig
new file mode 100644
index 000000000..ad8a82a14
--- /dev/null
+++ b/assets/components/molecules/key-number/key-number-hn.twig
@@ -0,0 +1,23 @@
+{% set icon = icon|default("https://via.placeholder.com/") %}
+<div class="card">
+  <div class="card border-0 bg-white m-0 h-100">
+    <div class="card-header border-0">
+      <div class="row">
+        <div class="col-md-6">
+          <p class="h4">près de 18'000</p>
+        </div>
+        <div class="col-md-6 text-right">
+          <img src="images/styleguide/key-numbers/students.png" class="d-block m-auto" alt="Pictogramme avec deux personnages" />
+        </div>
+      </div>
+    </div>
+    <div class="card-body pt-0">
+      <div class="row">
+        <div class="col-md-12">
+          <hr />
+          <p>étudiant·es, collaborateurs et collaboratrices font de l'EPFL une petite ville trépidante et dynamique</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/assets/components/molecules/key-number/key-number.yml b/assets/components/molecules/key-number/key-number.yml
index e7f6b018e..00431fb73 100644
--- a/assets/components/molecules/key-number/key-number.yml
+++ b/assets/components/molecules/key-number/key-number.yml
@@ -5,3 +5,7 @@ variants:
   - name: large
     title: Large
     wrapper: 'bg-gray-100'
+  - name: hn
+    title: Highlighted number
+  - name: hn-link
+    title: Highlighted number with link
diff --git a/assets/components/organisms/key-number-group/key-number-group-hn.twig b/assets/components/organisms/key-number-group/key-number-group-hn.twig
new file mode 100644
index 000000000..391445fc0
--- /dev/null
+++ b/assets/components/organisms/key-number-group/key-number-group-hn.twig
@@ -0,0 +1,7 @@
+<div class="container">
+  <div class="card-deck">
+    {% include '@molecules/key-number/key-number-hn-link.twig' %}
+    {% include '@molecules/key-number/key-number-hn-link.twig' %}
+    {% include '@molecules/key-number/key-number-hn.twig' %}
+  </div>
+</div>
diff --git a/assets/components/organisms/key-number-group/key-number-group.yml b/assets/components/organisms/key-number-group/key-number-group.yml
index 81d3e874c..9fe573a45 100644
--- a/assets/components/organisms/key-number-group/key-number-group.yml
+++ b/assets/components/organisms/key-number-group/key-number-group.yml
@@ -1,3 +1,6 @@
 title: Key number group
 name: key-number-group
 wrapper: bg-gray-100
+variants:
+  - name: hn
+    title: Highlighted number