chore: Move the plugins CTA into sidebar (#7630)

* move the plugins CTA into sidebar

* update spec

* fix plugin name slug

* fix nesting

app/_assets/stylesheets/sidebar.less

@@ -228,3 +228,31 @@
     }
   }
 }
+
+.sidebar-button {
+  flex-shrink: 0;
+  height: auto;
+  padding: 8px 16px;
+  border: 1px solid #1155cb;
+  background: none;
+  box-sizing: border-box;
+  border-radius: 4px;
+  font-family: Roboto;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 22px;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
+  color: #1155cb;
+  display: block;
+  width: 100%;
+  text-align: center;
+}
+
+.sidebar-button#konnect-cta {
+  margin-top: 20px;
+  &:hover {
+    background-color: #1155cb;
+    border-color: #fff;
+    color: #fff;
+  }
+}

app/_includes/plugins/sidebar.html

@@ -13,5 +13,13 @@
     {% for item in include.sidenav.nav_items %}
       {% include_cached sidebar/item.html item=item id=forloop.index %}
     {% endfor %}
+    {% if page.extn_publisher == "kong-inc" %}
+      <li>
+        <a id="konnect-cta" href="https://konghq.com/products/kong-konnect/register?utm_medium=referral&utm_source=docs&utm_campaign=gateway-konnect&utm_content={{ page.extn_slug }}" class="sidebar-button" target="_blank">
+          Try it in {{site.konnect_short_name}}
+        </a>
+      </li>
+    {% endif %}
   </ul>
+
 </aside>

app/_layouts/extension.html

@@ -13,19 +13,6 @@
 </blockquote>
 {% endunless %}
 
-{% unless page.free %}
-  {% if page.extn_publisher == "kong-inc" %}
-    {% if page.paid or page.premium %}
-      <blockquote class="note" role="alert">
-        <p>
-          Did you know that you can try this plugin without talking to anyone for just {% if page.paid %}{{ site.pricing.konnect.paid_plugin }}{% else %}{{ site.pricing.konnect.premium_plugin }}{% endif %}/month with Kong Konnect? <a href="https://konghq.com/products/kong-konnect/register?utm_medium=referral&utm_source=docs&utm_campaign=gateway-konnect&utm_content={{ extn_slug }}">Get started in under 5 minutes</a>.
-        </p>
-      </blockquote>
-    {% endif %}
-  {% endif %}
-{% endunless %}
-
-
 {% unless page.extn_publisher == "kong-inc" %}
     {% if page.techpartner %}
       <blockquote class="partner-plugin no-icon">

spec/templates/plugin_with_versions_spec.rb

@@ -54,10 +54,8 @@
       expect(nested_how_tos).to have_css('.sidebar-item', text: 'Nested Tutorial Nav title with Min and Max')
     end
 
-    context 'plugins that are `paid` or `premium`' do
-      it 'renders a banner for using the plugins in Konnect' do
-        expect(html).to have_css('blockquote', text: 'Did you know that you can try this plugin without talking to anyone')
-      end
+    it 'renders a Konnect CTA button' do
+      expect(html).to have_css('.sidebar-button', text: 'Try it in Konnect')
     end
   end
 end