From cdb012caecb6ccfe853abd71e7eb5e480898b933 Mon Sep 17 00:00:00 2001
From: Thijs Kinkhorst <thijs@kinkhorst.com>
Date: Wed, 20 Sep 2023 12:21:26 +0200
Subject: [PATCH] Option to add ribbon to engineblock pages indication which
 environment you're working on

When left empty, nothing is shown.

The approach may look a bit unwieldy, but this is done so that envirnment
specific config can be passed to CSS. This is making it a pure CSS solution
that also would work in installs that have a CSP that disables inline styles,
that's why we have to enumerate the available colors since you cannot use
`attr()` with anything other than `content:`.
---
 app/config/config.yml                         |  2 ++
 app/config/parameters.yml.dist                |  2 ++
 theme/base/stylesheets/components.scss        |  1 +
 theme/base/stylesheets/components/ribbon.scss | 30 +++++++++++++++++++
 theme/base/stylesheets/error-page.scss        |  1 +
 theme/base/stylesheets/material.scss          |  1 +
 .../layouts/scripts/default.html.twig         |  2 +-
 7 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 theme/base/stylesheets/components/ribbon.scss

diff --git a/app/config/config.yml b/app/config/config.yml
index 52970b293c..00dc0aefb4 100644
--- a/app/config/config.yml
+++ b/app/config/config.yml
@@ -77,6 +77,8 @@ twig:
         defaultTitle: "%view_default_title%"
         defaultHeader: "%view_default_header%"
         defaultLogo: "%view_default_logo%"
+        envName: "%env_name%"
+        envRibbonColor: "%env_ribbon_color%"
 
 doctrine:
     dbal:
diff --git a/app/config/parameters.yml.dist b/app/config/parameters.yml.dist
index 9d26d4e926..8647e55ab3 100644
--- a/app/config/parameters.yml.dist
+++ b/app/config/parameters.yml.dist
@@ -155,6 +155,8 @@ parameters:
     view_default_logo: /images/logo.png
     view_default_logo_width: 96
     view_default_logo_height: 96
+    env_name: ""
+    env_ribbon_color: ""
 
     ui_return_to_sp_link: false
 
diff --git a/theme/base/stylesheets/components.scss b/theme/base/stylesheets/components.scss
index 227f32607e..f22af36c1c 100644
--- a/theme/base/stylesheets/components.scss
+++ b/theme/base/stylesheets/components.scss
@@ -3,3 +3,4 @@
 @import 'components/spinner';
 @import 'components/success';
 @import 'components/warning';
+@import 'components/ribbon';
diff --git a/theme/base/stylesheets/components/ribbon.scss b/theme/base/stylesheets/components/ribbon.scss
new file mode 100644
index 0000000000..6440b32af5
--- /dev/null
+++ b/theme/base/stylesheets/components/ribbon.scss
@@ -0,0 +1,30 @@
+body::after {
+    position: fixed;
+    width: 109px;
+    height: 28px;
+    top: 15px;
+    right: -25px;
+    text-align: center;
+    font-size: 16px;
+    font-family: sans-serif;
+    text-transform: uppercase;
+    font-weight: bold;
+    color: white;
+    line-height: 30px;
+    transform: rotate(45deg);
+    content: attr(data-envname);
+}
+
+body[data-ribboncolor="red"]::after {
+    background-color: crimson;
+}
+body[data-ribboncolor="orange"]::after {
+    background-color: orange;
+}
+body[data-ribboncolor="pink"]::after {
+    background-color: hotpink;
+}
+body[data-ribboncolor="beige"]::after {
+    background-color: khaki;
+}
+
diff --git a/theme/base/stylesheets/error-page.scss b/theme/base/stylesheets/error-page.scss
index 89cdfd2d33..f74e5d11ac 100644
--- a/theme/base/stylesheets/error-page.scss
+++ b/theme/base/stylesheets/error-page.scss
@@ -10,5 +10,6 @@
 @import "components/old-not-converted/error-page/feedback-info";
 @import "components/old-not-converted/error-page/footer";
 @import "components/old-not-converted/error-page/horizontal-rule";
+@import "components/ribbon";
 @import 'pages/error-page';
 
diff --git a/theme/base/stylesheets/material.scss b/theme/base/stylesheets/material.scss
index fd49e23710..e658e298dc 100644
--- a/theme/base/stylesheets/material.scss
+++ b/theme/base/stylesheets/material.scss
@@ -1,2 +1,3 @@
 @import "helpers.scss";
+@import "components/ribbon";
 @import "pages/notConverted";
diff --git a/theme/base/templates/layouts/scripts/default.html.twig b/theme/base/templates/layouts/scripts/default.html.twig
index d83663ae96..2a19a1aa9d 100644
--- a/theme/base/templates/layouts/scripts/default.html.twig
+++ b/theme/base/templates/layouts/scripts/default.html.twig
@@ -17,7 +17,7 @@
         <link href="/stylesheets/application.css?v={{ assetsVersion }}" rel="stylesheet">
     {% endspaceless %}{% endblock %}
 </head>
-<body>
+<body{% if envName is defined and envName %} data-envname="{{ envName }}" data-ribboncolor="{{ envRibbonColor }}"{% endif %}>
 {% block nojs %}{% endblock %}
 {% block background %}{% endblock %}