From 8415c0c327f8d912cdfec11c6d2cd632bf7713a0 Mon Sep 17 00:00:00 2001
From: Julie Muzina <julie.muzina@canonical.com>
Date: Tue, 13 Aug 2024 13:40:21 -0400
Subject: [PATCH] Add borderless CTA block variant (#5278)

* Add borderless CTA block variant

* Remove top padding from borderless CTA

* Update to 4.16.0
---
 package.json                                         |  2 +-
 releases.yml                                         |  6 ++++++
 scss/_patterns_cta.scss                              |  7 +++++++
 .../docs/examples/patterns/cta-block/borderless.html | 12 ++++++++++++
 .../docs/examples/patterns/cta-block/combined.html   | 11 +++++++++++
 .../docs/examples/patterns/cta-block/default.html    |  2 +-
 templates/docs/patterns/cta-block/index.md           |  8 ++++++++
 7 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 templates/docs/examples/patterns/cta-block/borderless.html
 create mode 100644 templates/docs/examples/patterns/cta-block/combined.html

diff --git a/package.json b/package.json
index 39a2f7ae1..89e6d7d86 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.15.0",
+  "version": "4.16.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
diff --git a/releases.yml b/releases.yml
index b2a787061..24d18d609 100644
--- a/releases.yml
+++ b/releases.yml
@@ -1,3 +1,9 @@
+- version: 4.16.0
+  features:
+    - component: CTA Block / Borderless
+      url: /docs/patterns/cta-block#borderless
+      status: New
+      notes: We've introduced a new borderless variant of the CTA block component.
 - version: 4.15.0
   features:
     - component: CTA Block
diff --git a/scss/_patterns_cta.scss b/scss/_patterns_cta.scss
index 4a098f65f..b5567bb48 100644
--- a/scss/_patterns_cta.scss
+++ b/scss/_patterns_cta.scss
@@ -4,6 +4,8 @@
     CTA Block:
       .p-cta-block:
         Main element of the CTA block.
+      "&.is-borderless":
+        Borderless variant, to be used to hide top border and padding.
 */
 
 @import 'settings';
@@ -16,5 +18,10 @@
     flex-wrap: wrap;
     padding-bottom: $spv--x-large;
     padding-top: $spv--small;
+
+    &.is-borderless {
+      border: none;
+      padding-top: 0;
+    }
   }
 }
diff --git a/templates/docs/examples/patterns/cta-block/borderless.html b/templates/docs/examples/patterns/cta-block/borderless.html
new file mode 100644
index 000000000..79fe38305
--- /dev/null
+++ b/templates/docs/examples/patterns/cta-block/borderless.html
@@ -0,0 +1,12 @@
+{% extends "_layouts/examples.html" %}
+
+{% block title %}CTA Block / Borderless{% endblock %}
+
+{% block standalone_css %}patterns_cta{% endblock %}
+
+{% block content %}
+<div class="p-cta-block is-borderless">
+  <a href="#" class="p-button--positive">Learn more</a>
+  <a href="#">Contact us ›</a>
+</div>
+{% endblock %}
diff --git a/templates/docs/examples/patterns/cta-block/combined.html b/templates/docs/examples/patterns/cta-block/combined.html
new file mode 100644
index 000000000..2300ac82b
--- /dev/null
+++ b/templates/docs/examples/patterns/cta-block/combined.html
@@ -0,0 +1,11 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}CTA Block / Combined{% endblock %}
+
+{% block standalone_css %}patterns_cta{% endblock %}
+
+{% block content %}
+{% with is_combined = true %}
+<section>{% include 'docs/examples/patterns/cta-block/default.html' %}</section>
+<section>{% include 'docs/examples/patterns/cta-block/borderless.html' %}</section>
+{% endwith %}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/cta-block/default.html b/templates/docs/examples/patterns/cta-block/default.html
index 4d9bb8cb4..e01cfd5b4 100644
--- a/templates/docs/examples/patterns/cta-block/default.html
+++ b/templates/docs/examples/patterns/cta-block/default.html
@@ -1,6 +1,6 @@
 {% extends "_layouts/examples.html" %}
 
-{% block title %}CTA Block{% endblock %}
+{% block title %}CTA Block / Default{% endblock %}
 
 {% block standalone_css %}patterns_cta{% endblock %}
 
diff --git a/templates/docs/patterns/cta-block/index.md b/templates/docs/patterns/cta-block/index.md
index 2861ca0cb..650e7bc6e 100644
--- a/templates/docs/patterns/cta-block/index.md
+++ b/templates/docs/patterns/cta-block/index.md
@@ -11,6 +11,14 @@ A CTA (call to action) block is a pattern that is used to encourage users to tak
 View example of the CTA block pattern
 </a></div>
 
+## Borderless
+
+The CTA block can be used without a border. This is useful when the CTA block is stacked beneath related content.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/cta-block/borderless" class="js-example">
+View example of the CTA block pattern with no border
+</a></div>
+
 ## Class reference
 
 {{ class_reference("cta-block") }}