From fdba0961db5f461a7ab9918ed9f86ce0d9561e0d Mon Sep 17 00:00:00 2001
From: jaredcbaum <61951482+jaredcbaum@users.noreply.github.com>
Date: Tue, 14 Dec 2021 16:16:35 -0600
Subject: [PATCH] Feat/custom navbar cta (#2135)

* chore(): Add navbar cta schema

* chore(navbar): Add Custom NavbarItem

* chore(): Update config for cta navbar item
---
 docusaurus-theme-classic/src/index.js |  8 +++++-
 docusaurus.config.js                  |  6 +++++
 src/styles/components/_navbar.scss    | 36 +++++++++++++++++++++++++++
 src/theme/NavbarItem/NavbarCta.tsx    | 21 ++++++++++++++++
 src/theme/NavbarItem/index.tsx        |  2 ++
 5 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 src/theme/NavbarItem/NavbarCta.tsx

diff --git a/docusaurus-theme-classic/src/index.js b/docusaurus-theme-classic/src/index.js
index ad73fe4a9c3..e3f86456b4a 100644
--- a/docusaurus-theme-classic/src/index.js
+++ b/docusaurus-theme-classic/src/index.js
@@ -10,6 +10,12 @@ let { ThemeConfigSchema } = require(path.resolve(
   '../../node_modules/@docusaurus/theme-classic/lib/validateThemeConfig.js'
 ));
 
+const NavbarCtaSchema = Joi.object({
+  type: Joi.string().equal('cta').required(),
+  position: Joi.string().default('left'),
+  text: Joi.string().required(),
+  href: Joi.string().required(),
+});
 const NavbarIconLinkSchema = Joi.object({
   type: Joi.string().equal('iconLink').required(),
   position: Joi.string().default('left'),
@@ -29,7 +35,7 @@ const NavbarSeparatorSchema = Joi.object({
 
 ThemeConfigSchema = ThemeConfigSchema.concat(
   Joi.object({
-    navbar: { items: Joi.array().items(NavbarIconLinkSchema).items(NavbarSeparatorSchema) },
+    navbar: { items: Joi.array().items(NavbarIconLinkSchema).items(NavbarSeparatorSchema).items(NavbarCtaSchema) },
   })
 );
 
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 01c0f2e6de7..0d0f77a90b1 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -61,6 +61,12 @@ module.exports = {
           label: 'Native',
           position: 'left',
         },
+        {
+          type: 'cta',
+          position: 'left',
+          text: 'Ionic v6.0.0 Upgrade Guide',
+          href: `${BASE_URL}/intro/upgrading-to-ionic-6`,
+        },
         {
           type: 'docsVersionDropdown',
           position: 'right',
diff --git a/src/styles/components/_navbar.scss b/src/styles/components/_navbar.scss
index 05481250faf..b8386d9e780 100644
--- a/src/styles/components/_navbar.scss
+++ b/src/styles/components/_navbar.scss
@@ -51,6 +51,42 @@ html[data-theme='dark'] {
           }
         }
       }
+
+      .cta {
+        display: flex;
+        align-items: center;
+
+        padding: 0.375rem 0.625rem;
+
+        background: linear-gradient(90deg, #495fff 0%, #18c6ff 114.68%);
+
+        color: #fff;
+
+        border-radius: 200px;
+
+        white-space: nowrap;
+
+        font-weight: 600;
+        font-size: 0.75rem;
+        line-height: 100%;
+
+        transition: opacity 0.2s ease-out;
+
+        margin-inline-start: 0.5rem;
+
+        @media (max-width: 1400px) {
+          display: none;
+        }
+
+        &:hover,
+        &:active {
+          opacity: 0.8;
+        }
+
+        svg {
+          margin-inline-start: 0.125rem;
+        }
+      }
     }
 
     &__items--right {
diff --git a/src/theme/NavbarItem/NavbarCta.tsx b/src/theme/NavbarItem/NavbarCta.tsx
new file mode 100644
index 00000000000..a8bc57e03c9
--- /dev/null
+++ b/src/theme/NavbarItem/NavbarCta.tsx
@@ -0,0 +1,21 @@
+import clsx from 'clsx';
+import React from 'react';
+
+export default function NavbarCta({ text, ...props }) {
+  return (
+    <a {...props} className={clsx(props.className, 'cta')}>
+      {text}
+      <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512" width="12" height="12">
+        <title>Arrow Forward</title>
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="48"
+          d="M268 112l144 144-144 144M392 256H100"
+        />
+      </svg>
+    </a>
+  );
+}
diff --git a/src/theme/NavbarItem/index.tsx b/src/theme/NavbarItem/index.tsx
index ee6db95d45d..4a61f2e22e6 100644
--- a/src/theme/NavbarItem/index.tsx
+++ b/src/theme/NavbarItem/index.tsx
@@ -2,10 +2,12 @@ import OriginalNavbarItem from '@theme-original/NavbarItem';
 import React from 'react';
 import NavbarIconLink from '@theme/NavbarItem/NavbarIconLink';
 import NavbarSeparator from '@theme/NavbarItem/NavbarSeparator';
+import NavbarCta from '@theme/NavbarItem/NavbarCta';
 
 const CustomNavbarItemComponents = {
   iconLink: () => NavbarIconLink,
   separator: () => NavbarSeparator,
+  cta: () => NavbarCta,
 } as const;
 
 export default function NavbarItem({ type, ...props }) {