Add VSCode Button to Header (#4707)

* Add VSCode Button to Header * Use New VSCode button design * Use Link component
iterative · Jul 20, 2023 · 63d83ef · 63d83ef
1 parent f863717
commit 63d83ef
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 15 deletions.
diff --git a/src/components/Home/LandingHero/index.tsx b/src/components/Home/LandingHero/index.tsx
@@ -15,6 +15,10 @@ const logUseCasesEvent = () => {
   logEvent('Button', { Item: 'how-it-works' })
 }
 
+const logVSCodeEvent = () => {
+  logEvent('Button', { Item: 'vscode-dvc-ext' })
+}
+
 const HeroButtons = () => (
   <div className={styles.buttonsContainer}>
     <ShowOnly on="mobile">
@@ -28,11 +32,25 @@ const HeroButtons = () => (
     <ShowOnly on="desktop">
       <DownloadButton />
     </ShowOnly>
+    <TwoRowsButtonLink
+      mode="vscode"
+      className={styles.actionButton}
+      title="DVC For VS Code"
+      description="Get VS Code Extension"
+      icon={
+        <img
+          className={styles.actionButtonIcon}
+          src="/img/vscode-alt-icon.svg"
+          alt="Get VS Code Extension"
+        />
+      }
+      onClick={logVSCodeEvent}
+      href="https://marketplace.visualstudio.com/items?itemName=Iterative.dvc"
+    />
     <TwoRowsButtonLink
       mode="outline"
       className={cn(
         styles.actionButton,
-        styles.watchVideo,
         'btn-with-focus',
         'btn-with-focus--white'
       )}

diff --git a/src/components/Home/LandingHero/styles.module.css b/src/components/Home/LandingHero/styles.module.css
@@ -35,13 +35,12 @@
 .actionButton {
   min-width: 186px;
   text-decoration: none;
+  margin-left: 15px;
 
-  &.actionButton {
-    @media screen(xsMax) {
-      min-height: 60px;
-      margin: 0;
-      margin-bottom: 12px;
-    }
+  @media screen(xsMax) {
+    min-height: 60px;
+    margin: 0;
+    margin-bottom: 12px;
   }
 }
 
@@ -68,10 +67,6 @@
   height: 20px;
 }
 
-.watchVideo {
-  margin-left: 15px;
-}
-
 .commands {
   display: flex;
   flex: 1 1 auto;

diff --git a/src/components/TwoRowsButton/link.tsx b/src/components/TwoRowsButton/link.tsx
@@ -2,16 +2,17 @@ import React from 'react'
 import cn from 'classnames'
 
 import * as styles from './styles.module.css'
+import Link from '@dvcorg/gatsby-theme-iterative/src/components/Link'
 
 type ITwoRowsButtonLinkProps = {
-  mode: 'azure' | 'purple' | 'outline'
+  mode: 'azure' | 'purple' | 'outline' | 'vscode'
   className?: string
   title: string
   description: string
   icon?: React.ReactNode
   children?: React.ReactNode
   active?: boolean
-  href?: string
+  href: string
 } & React.ButtonHTMLAttributes<HTMLAnchorElement>
 
 const TwoRowsButtonLink: React.FC<ITwoRowsButtonLinkProps> = ({
@@ -25,7 +26,7 @@ const TwoRowsButtonLink: React.FC<ITwoRowsButtonLinkProps> = ({
   href,
   ...props
 }) => (
-  <a
+  <Link
     href={href}
     className={cn(
       styles.button,
@@ -42,7 +43,7 @@ const TwoRowsButtonLink: React.FC<ITwoRowsButtonLinkProps> = ({
       <span className={styles.description}>{description}</span>
     </span>
     {children}
-  </a>
+  </Link>
 )
 
 export default TwoRowsButtonLink
diff --git a/src/components/TwoRowsButton/styles.module.css b/src/components/TwoRowsButton/styles.module.css
@@ -57,6 +57,18 @@
       background-color: var(--color-light-blue-hover);
     }
   }
+
+  &.vscode {
+    background-color: #007acc;
+    border-color: #007acc;
+    color: #fff;
+
+    &.active,
+    &:hover {
+      background-color: #0065a9;
+      border-color: #0065a9;
+    }
+  }
 }
 
 .icon {

diff --git a/static/img/vscode-alt-icon.svg b/static/img/vscode-alt-icon.svg