From 3bcd96385151ad02b9e07fec938265d288b576c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yannik=20R=C3=B6del?= <hey@yannik.info>
Date: Thu, 1 Dec 2022 07:42:23 +0100
Subject: [PATCH] Introduce block and inline callout components

This is a nicer way of showing current updates.
---
 includes/layouts/base/main.njk                  |  6 ++++++
 .../angestoepselt/computer-beantragen/index.md  |  3 +--
 .../angestoepselt/computer-beantragen/privat.md |  1 +
 sites/angestoepselt/index.md                    |  5 ++++-
 styles/components/_actions.scss                 |  7 ++++++-
 styles/components/_banner.scss                  | 17 +++++++++++++++++
 6 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/includes/layouts/base/main.njk b/includes/layouts/base/main.njk
index d317d41..61488d5 100644
--- a/includes/layouts/base/main.njk
+++ b/includes/layouts/base/main.njk
@@ -66,6 +66,12 @@
 			</nav>
 		</header>
 
+		{% if callout %}
+			<div class='page-callout'>
+				{{ callout }}
+			</div>
+		{% endif %}
+
 		<main id="content" {% if contentClass %} class="{{ contentClass }}"{% endif %}>
 			{% block content %}
 				{{ content | safe }}
diff --git a/sites/angestoepselt/computer-beantragen/index.md b/sites/angestoepselt/computer-beantragen/index.md
index 63e5897..67c475c 100644
--- a/sites/angestoepselt/computer-beantragen/index.md
+++ b/sites/angestoepselt/computer-beantragen/index.md
@@ -4,6 +4,7 @@ useForms: true
 eleventyNavigation:
   key: Computer beantragen
   order: 50
+callout: "Hinweis: Wir bekommen gerade sehr viele Anfragen und können daher keine neuen Laptops ausgeben!"
 ---
 
 # Computer beantragen
@@ -11,8 +12,6 @@ eleventyNavigation:
 Damit wir dir einen Computer geben können, musst du uns einige Fragen beantworten.
 Danach können wir den Antrag prüfen und uns bei dir melden.
 
-_Hinweis: Wir bekommen gerade sehr viele Anfragen und können daher keine neuen Laptops ausgeben!_
-
 
 Für wen brauchst du den Computer?
 
diff --git a/sites/angestoepselt/computer-beantragen/privat.md b/sites/angestoepselt/computer-beantragen/privat.md
index 2b6c6fc..ae04d26 100644
--- a/sites/angestoepselt/computer-beantragen/privat.md
+++ b/sites/angestoepselt/computer-beantragen/privat.md
@@ -1,6 +1,7 @@
 ---
 layout: layouts/page.njk
 useForms: true
+callout: "Hinweis: Wir bekommen gerade sehr viele Anfragen und können daher keine neuen Laptops ausgeben!"
 ---
 
 # Privat einen Computer beantragen
diff --git a/sites/angestoepselt/index.md b/sites/angestoepselt/index.md
index 26f9663..70874b7 100644
--- a/sites/angestoepselt/index.md
+++ b/sites/angestoepselt/index.md
@@ -22,7 +22,10 @@ Wir schaffen Zugang in die digitale Welt
   </div>
 
   <a href="/computer-beantragen">
-    <h3>Computer bekommen</h3>
+    <div>
+      <h3>Computer bekommen</h3>
+      <em class="inline-callout">Aktuell keine Laptops</em>
+    </div>
     <svg class="action-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 219 175">
       <linearGradient id="emphasis-gradient-sun" class="emphasis-gradient">
         <stop offset="0%" />
diff --git a/styles/components/_actions.scss b/styles/components/_actions.scss
index 96637a9..41a5971 100644
--- a/styles/components/_actions.scss
+++ b/styles/components/_actions.scss
@@ -39,11 +39,16 @@
 		@include colors.card-shadow;
 		transition: motion.$subtle background-color, motion.$subtle transform;
 
-		> h3 {
+		> h3,
+		> div > h3 {
 			margin: 0;
 			text-transform: uppercase;
 		}
 
+		> div > .inline-callout {
+			margin-top: layout.$normal-gap;
+		}
+
 		> svg {
 			align-self: center;
 			margin-bottom: layout.$normal-gap;
diff --git a/styles/components/_banner.scss b/styles/components/_banner.scss
index 0583100..fa583ca 100644
--- a/styles/components/_banner.scss
+++ b/styles/components/_banner.scss
@@ -81,3 +81,20 @@
 		}
 	}
 }
+
+%callout {
+	background-color: colors.$yellow-300;
+	color: colors.$blue-800;
+}
+
+.page-callout {
+	@extend %callout;
+	padding: layout.$normal-gap;
+}
+
+.inline-callout {
+	@extend %callout;
+	display: inline-block;
+	font-style: normal;
+	padding: layout.$small-gap layout.$normal-gap;
+}