diff --git a/app/_assets/stylesheets/sidebar.less b/app/_assets/stylesheets/sidebar.less index 213c5a9fcd23..920dac3408d9 100644 --- a/app/_assets/stylesheets/sidebar.less +++ b/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; + } +} \ No newline at end of file diff --git a/app/_includes/plugins/sidebar.html b/app/_includes/plugins/sidebar.html index 628046205247..860050bccf08 100644 --- a/app/_includes/plugins/sidebar.html +++ b/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" %} +
-- {% endif %} - {% endif %} -{% endunless %} - - {% unless page.extn_publisher == "kong-inc" %} {% if page.techpartner %}- 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? Get started in under 5 minutes. -
-
diff --git a/spec/templates/plugin_with_versions_spec.rb b/spec/templates/plugin_with_versions_spec.rb index 9cbd06cec56e..55edb49afb49 100644 --- a/spec/templates/plugin_with_versions_spec.rb +++ b/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