From c84baca51cc03622e59aed5600d0bc64254e69ba Mon Sep 17 00:00:00 2001
From: Mark H <70579116+mark-dr@users.noreply.github.com>
Date: Mon, 12 Jul 2021 09:47:27 +0100
Subject: [PATCH] Add upgrade CTA mixin

---
 _includes/upgrade-cta.html |  9 +++++++++
 _scss/_upgrade-cta.scss    | 18 ++++++++++++++++++
 css/style.scss             |  1 +
 test.md                    | 11 +++++++++++
 4 files changed, 39 insertions(+)
 create mode 100644 _includes/upgrade-cta.html
 create mode 100644 _scss/_upgrade-cta.scss

diff --git a/_includes/upgrade-cta.html b/_includes/upgrade-cta.html
new file mode 100644
index 0000000000..55bb9d382d
--- /dev/null
+++ b/_includes/upgrade-cta.html
@@ -0,0 +1,9 @@
+<div class="docker-upgrade-cta" role="alert">
+  <div class="docker-upgrade-cta__heading">This feature requires a Pro or Team plan.</div>
+
+  {{ include.body | markdownify }}
+
+  <a class="btn btn-primary" role="button" href="{{include.target-url}}">
+    Upgrade my plan
+  </a>
+</div>
diff --git a/_scss/_upgrade-cta.scss b/_scss/_upgrade-cta.scss
new file mode 100644
index 0000000000..d098397f05
--- /dev/null
+++ b/_scss/_upgrade-cta.scss
@@ -0,0 +1,18 @@
+.docker-upgrade-cta {
+  background-color: $orange-10;
+
+  padding: 16px 25px;
+  margin: 0 0 20px;
+
+  border-radius: 4px;
+  border: 1px solid $orange-20;
+
+  .docker-upgrade-cta__heading {
+    font-weight: bold;
+    font-size: 16px;
+
+    font-family: $headings;
+
+    margin-top: 0;
+  }
+}
diff --git a/css/style.scss b/css/style.scss
index 48070beebb..9d6fbdf274 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -18,3 +18,4 @@
 @import "overrides";
 @import "mobile";
 @import "notes";
+@import "upgrade-cta";
diff --git a/test.md b/test.md
index 37d661bba1..9abf9168e1 100644
--- a/test.md
+++ b/test.md
@@ -659,6 +659,17 @@ It will render like this  with a colored sidebar and icon:
 
 ![warning admonition example](/images/warning-admonition-example.png)
 
+## Upgrade CTA
+
+Use the `upgrade-cta.html` include to render a CTA asking the user to upgrade their plan. There are two parameters:
+
+- `target-url`: This will typically be something like https://www.docker.com/pricing, possibly with a utm code.
+- `body`: This forms the body of the CTA. It accepts Markdown. To use multi-line bodies, use named captures as explained in [the Jekyll docs](https://jekyllrb.com/docs/includes/#passing-parameter-variables-to-includes).
+
+```
+{% include upgrade-cta.html body="Upgrade to gain access to this feature" target-url="https://www.example.com/" %}
+```
+
 ## Code blocks
 
 Rouge provides lots of different code block "hints". If you leave off the hint,