Update Install guide

docs/docs/api/qawolf/repl.mdx

@@ -8,7 +8,7 @@ import ArgumentRepl from '../components/qawolf/ArgumentRepl';
 import Argument from '../components/Argument';
 import Syntax from '../components/Syntax';
 
-<Syntax code="repl([context={}])" />
+<Syntax code="repl([context])" />
 
 Pause a running test or script and open the [interactive REPL](../../use_the_repl).
 

docs/docs/components/BrowserTabs.js

@@ -1,51 +1,49 @@
-import React from "react";
-import Tabs from "@theme/Tabs";
+import React from 'react';
+import Tabs from '@theme/Tabs';
 
 const imageStyle = {
-  height: "20px",
-  marginRight: "8px"
+  height: '20px',
+  marginRight: '8px',
 };
 const tabStyle = {
-  alignItems: "center",
-  display: "flex",
-  justifyContent: "center"
+  alignItems: 'center',
+  display: 'flex',
+  justifyContent: 'center',
 };
 
 const BROWSERS = [
   {
-    label: "Chromium",
-    src: "https://storage.googleapis.com/docs.qawolf.com/logos/chrome.png",
-    value: "chromium"
+    label: 'Chromium',
+    src: 'https://storage.googleapis.com/docs.qawolf.com/logos/chrome.png',
+    value: 'chromium',
   },
   {
-    label: "Firefox",
-    src: "https://storage.googleapis.com/docs.qawolf.com/logos/firefox.png",
-    value: "firefox"
+    label: 'Firefox',
+    src: 'https://storage.googleapis.com/docs.qawolf.com/logos/firefox.png',
+    value: 'firefox',
   },
   {
-    label: "WebKit",
-    src: "https://storage.googleapis.com/docs.qawolf.com/logos/safari.png",
-    value: "webkit"
+    label: 'WebKit',
+    src: 'https://storage.googleapis.com/docs.qawolf.com/logos/safari.png',
+    value: 'webkit',
   },
   {
-    label: "All browsers",
-    src: "https://storage.googleapis.com/docs.qawolf.com/logos/select_all.png",
-    value: "all"
-  }
+    label: 'All browsers',
+    src: 'https://storage.googleapis.com/docs.qawolf.com/logos/select_all.png',
+    value: 'all',
+  },
 ];
 
-function BrowserTabs({ children, skipAll }) {
-  const browsers = skipAll ? BROWSERS.slice(0, 3) : BROWSERS;
-
-  const values = browsers.map(browser => {
+function BrowserTabs({ children }) {
+  const values = BROWSERS.map(browser => {
     return {
       label: (
         <div style={tabStyle}>
-          <img src={browser.src} style={imageStyle} />
+          <img alt={browser.label} src={browser.src} style={imageStyle} />
           {browser.label}
         </div>
       ),
-      value: browser.value
+      value: browser.value,
     };
   });
 

docs/docs/components/CiTabs.js

@@ -1,59 +1,59 @@
-import React from "react";
-import Tabs from "@theme/Tabs";
+import React from 'react';
+import Tabs from '@theme/Tabs';
 
 const imageStyle = {
-  height: "20px",
-  marginRight: "8px"
+  height: '20px',
+  marginRight: '8px',
 };
 const tabStyle = {
-  alignItems: "center",
-  display: "flex",
-  justifyContent: "center"
+  alignItems: 'center',
+  display: 'flex',
+  justifyContent: 'center',
 };
 
 const CI_PROVIDERS = [
   {
-    label: "Azure",
-    src: "https://storage.googleapis.com/docs.qawolf.com/logos/azure.png",
-    value: "azure"
+    label: 'Azure',
+    src: 'https://storage.googleapis.com/docs.qawolf.com/logos/azure.png',
+    value: 'azure',
   },
   {
-    label: "Bitbucket",
-    src: "https://storage.googleapis.com/docs.qawolf.com/logos/bitbucket.png",
-    value: "bitbucket"
+    label: 'Bitbucket',
+    src: 'https://storage.googleapis.com/docs.qawolf.com/logos/bitbucket.png',
+    value: 'bitbucket',
   },
   {
-    label: "CircleCI",
-    src: "https://storage.googleapis.com/docs.qawolf.com/logos/circle_ci.png",
-    value: "circleci"
+    label: 'CircleCI',
+    src: 'https://storage.googleapis.com/docs.qawolf.com/logos/circle_ci.png',
+    value: 'circleci',
   },
   {
-    label: "GitHub",
-    src: "https://storage.googleapis.com/docs.qawolf.com/logos/github.png",
-    value: "github"
+    label: 'GitHub',
+    src: 'https://storage.googleapis.com/docs.qawolf.com/logos/github.png',
+    value: 'github',
   },
   {
-    label: "GitLab",
-    src: "https://storage.googleapis.com/docs.qawolf.com/logos/gitlab.png",
-    value: "gitlab"
+    label: 'GitLab',
+    src: 'https://storage.googleapis.com/docs.qawolf.com/logos/gitlab.png',
+    value: 'gitlab',
   },
   {
-    label: "Jenkins",
-    src: "https://storage.googleapis.com/docs.qawolf.com/logos/jenkins.png",
-    value: "jenkins"
-  }
+    label: 'Jenkins',
+    src: 'https://storage.googleapis.com/docs.qawolf.com/logos/jenkins.png',
+    value: 'jenkins',
+  },
 ];
 
 function CiTabs({ children }) {
   const values = CI_PROVIDERS.map(provider => {
     return {
       label: (
         <div style={tabStyle}>
-          <img src={provider.src} style={imageStyle} />
+          <img alt={provider.label} src={provider.src} style={imageStyle} />
           {provider.label}
         </div>
       ),
-      value: provider.value
+      value: provider.value,
     };
   });
 

docs/docs/components/PackageManagerTabs.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import Tabs from '@theme/Tabs';
+
+const imageStyle = {
+  height: '24px',
+};
+const tabStyle = {
+  alignItems: 'center',
+  display: 'flex',
+  justifyContent: 'center',
+};
+
+const PACKAGE_MANAGERS = [
+  {
+    label: 'npm',
+    src: 'https://storage.googleapis.com/docs.qawolf.com/logos/npm.png',
+    value: 'npm',
+  },
+  {
+    label: 'Yarn',
+    src: 'https://storage.googleapis.com/docs.qawolf.com/logos/yarn.png',
+    value: 'yarn',
+  },
+];
+
+function PackageManagerTabs({ children }) {
+  const values = PACKAGE_MANAGERS.map(provider => {
+    return {
+      label: (
+        <div style={tabStyle}>
+          <img alt={provider.label} src={provider.src} style={imageStyle} />
+        </div>
+      ),
+      value: provider.value,
+    };
+  });
+
+  return (
+    <Tabs block defaultValue="npm" values={values}>
+      {children}
+    </Tabs>
+  );
+}
+
+export default PackageManagerTabs;

docs/docs/install.md → docs/docs/install.mdx

@@ -3,12 +3,15 @@ id: install
 title: 💻 Install
 ---
 
+import TabItem from "@theme/TabItem";
+import PackageManagerTabs from './components/PackageManagerTabs'
+
 In this guide we explain how to set up your environment and install QA Wolf.
 
 ## TL;DR
 
 - Make sure you have a [basic understanding of the command line](#understand-the-command-line)
-- [Install Node.js and `npm`](#install-nodejs-and-npm) if you haven't already
+- [Install Node.js and `npm`](#install-nodejs-and-npm) (or [Yarn](#optional-use-yarn)) if you haven't already
 - Install QA Wolf as a dev dependency of your project:
 
 ```bash
@@ -35,6 +38,18 @@ node -v
 npm -v
 ```
 
+## Optional: Use Yarn
+
+You can also install QA Wolf with [Yarn](https://yarnpkg.com) instead of `npm`. If you are just getting started, we recommend using [Node.js and `npm`](#install-nodejs-and-npm).
+
+Follow [these instructions](https://yarnpkg.com/getting-started/install) to install Yarn.
+
+To confirm that Yarn was installed, run the following command in the CLI:
+
+```bash
+yarn --version
+```
+
 ## Optional: Install Git
 
 [Git](https://git-scm.com/) is a version control system for tracking changes in source code during software development. While not explicitly necessary to run QA Wolf, Git simplifies the process of adding your browser tests to a shared code base. It is also required to run your tests in CI.
@@ -58,7 +73,10 @@ Now that your setup is complete, let's get started with QA Wolf!
 
 QA Wolf is installed as a [dev dependency](https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file) in your project. Dev dependencies are packages that are only needed for local development and testing.
 
-To install QA Wolf, either create a new [Node.js](https://nodejs.org/en/) project or change directories into an existing one. To create a new project, run the following in the command line (optionally changing the project name):
+To install QA Wolf, either create a new project or change directories into an existing one. To create a new project, run the following in the command line (optionally changing the project name):
+
+<PackageManagerTabs>
+<TabItem value='npm'>
 
 ```bash
 mkdir my-awesome-project
@@ -72,6 +90,25 @@ Once you're in your project directory, run the following to install `qawolf` as
 npm install --save-dev qawolf
 ```
 
+</TabItem>
+<TabItem value='yarn'>
+
+```bash
+mkdir my-awesome-project
+cd my-awesome-project
+yarn init
+```
+
+Once you're in your project directory, run the following to install `qawolf` as a dev dependency:
+
+```bash
+yarn add --dev qawolf
+```
+
+</TabItem>
+</PackageManagerTabs>
+
+
 After the installation is complete, run the following to make sure QA Wolf was installed successfully:
 
 ```bash