feat: firstMile Overview and Install Dependencies content page (#4006)

ChitlangeSahas · web-flow · commit 44d37cd5a9d6 · 2022-03-04T11:07:22.000-07:00
diff --git a/src/homepageExperience/components/HomepageExperience.scss b/src/homepageExperience/components/HomepageExperience.scss
@@ -1,11 +1,15 @@
+@import '@influxdata/clockface/dist/variables.scss';
+
 $pool-fill: #00a3ff;
 
 .homepage-container {
   color: $cf-grey-95;
   display: flex;
   height: 100%;
-  justify-content: space-between;
   width: 100%;
+
+  padding-top: 71px;
+  padding-right: 85px;
 }
 
 .homepage-container--subway {
@@ -17,14 +21,31 @@ $pool-fill: #00a3ff;
 .homepage-container--main {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   width: 70%;
+  flex: 1;
+
+  padding-bottom: 64px;
 }
 
 .homepage-container--main-wrapper {
+  h1 {
+    margin-top: 0;
+    font-weight: normal;
+  }
+
+  p {
+    font-size: $cf-text-base-1;
+  }
+
+  &.overviewSection {
+    margin-top: auto;
+  }
+}
+
+.homepage-container-footer {
   display: flex;
-  justify-content: center;
-  width: 100%;
+  justify-content: flex-end;
+  margin-top: auto;
 }
 
 // Subway CSS
@@ -91,3 +112,36 @@ $pool-fill: #00a3ff;
 .showBorderColor .subway-navigation-step-icon-container {
   border-color: $pool-fill;
 }
+
+.subway-navigation-title {
+  display: flex;
+  align-items: center;
+}
+
+.subway-navigation-title-icon {
+  margin-right: 14px;
+}
+
+.subway-navigation-title-text {
+  h3 {
+    margin: 0;
+    font-weight: normal;
+  }
+  h6 {
+    margin: 0;
+    font-weight: normal;
+  }
+}
+
+.subway-navigation-time-to-complete {
+  display: flex;
+  align-items: center;
+  margin-top: 25px;
+  margin-bottom: 34px;
+
+  h5 {
+    margin: 0;
+    margin-left: 8px;
+    font-weight: normal;
+  }
+}
diff --git a/src/homepageExperience/components/HomepageIcons.tsx b/src/homepageExperience/components/HomepageIcons.tsx
@@ -109,3 +109,63 @@ export const AlertIcon = (
     <path d="M1.66674 12.3335V8.3335C1.66674 6.91901 2.22864 5.56245 3.22883 4.56226C4.22903 3.56207 5.58558 3.00016 7.00007 3.00016C8.41456 3.00016 9.77111 3.56207 10.7713 4.56226C11.7715 5.56245 12.3334 6.91901 12.3334 8.3335V12.3335H13.0001V13.6668H1.00007V12.3335H1.66674ZM3.00007 12.3335H11.0001V8.3335C11.0001 7.27263 10.5786 6.25521 9.8285 5.50507C9.07835 4.75492 8.06094 4.3335 7.00007 4.3335C5.9392 4.3335 4.92179 4.75492 4.17164 5.50507C3.4215 6.25521 3.00007 7.27263 3.00007 8.3335V12.3335ZM6.3334 0.333496H7.66674V2.3335H6.3334V0.333496ZM12.1854 2.2055L13.1281 3.14816L11.7147 4.56216L10.7714 3.6195L12.1854 2.2055ZM0.87207 3.14816L1.81474 2.2055L3.22874 3.61883L2.28674 4.56283L0.87207 3.14816ZM3.66674 8.3335C3.66674 7.44944 4.01793 6.60159 4.64305 5.97647C5.26817 5.35135 6.11601 5.00016 7.00007 5.00016V6.3335C6.46964 6.3335 5.96093 6.54421 5.58586 6.91928C5.21078 7.29436 5.00007 7.80306 5.00007 8.3335H3.66674Z" />
   </svg>
 )
+
+export const ClockIcon = (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M17.6181 5.968L19.0711 4.515L20.4851 5.929L19.0321 7.382C20.4678 9.17917 21.161 11.4579 20.9691 13.7501C20.7773 16.0424 19.7151 18.1742 18.0005 19.7077C16.286 21.2412 14.0494 22.0601 11.75 21.9961C9.45067 21.9321 7.26307 20.9901 5.63653 19.3635C4.00999 17.737 3.06799 15.5494 3.00398 13.25C2.93997 10.9506 3.75881 8.71402 5.29234 6.99951C6.82587 5.285 8.95767 4.22275 11.2499 4.03092C13.5422 3.83909 15.8209 4.53223 17.6181 5.968ZM12.0001 20C12.9193 20 13.8296 19.8189 14.6788 19.4672C15.5281 19.1154 16.2998 18.5998 16.9498 17.9497C17.5998 17.2997 18.1154 16.5281 18.4672 15.6788C18.819 14.8295 19.0001 13.9193 19.0001 13C19.0001 12.0807 18.819 11.1705 18.4672 10.3212C18.1154 9.47194 17.5998 8.70026 16.9498 8.05025C16.2998 7.40024 15.5281 6.88463 14.6788 6.53284C13.8296 6.18106 12.9193 6 12.0001 6C10.1435 6 8.36307 6.7375 7.05031 8.05025C5.73756 9.36301 5.00006 11.1435 5.00006 13C5.00006 14.8565 5.73756 16.637 7.05031 17.9497C8.36307 19.2625 10.1435 20 12.0001 20ZM11.0001 8H13.0001V14H11.0001V8ZM8.00006 1H16.0001V3H8.00006V1Z"
+      fill="#F1F1F3"
+    />
+  </svg>
+)
+
+// Language icons
+
+export const PythonIcon = (
+  <svg
+    width="53"
+    height="53"
+    viewBox="0 0 53 53"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M25.9923 0.533447C23.8419 0.533447 21.8179 0.723447 19.9837 1.04011C14.7342 1.99011 13.7222 3.89011 13.7222 7.50011V12.2501H26.3085V13.8334H13.7854H9.1051C5.43673 13.8968 2.27433 16.0501 1.26237 20.1668C0.123906 24.9168 0.0606585 27.8301 1.26237 32.7701C2.14784 36.4434 4.23502 39.0401 7.90339 39.0401H12.2042V33.4034C12.2042 29.2868 15.8094 25.6768 20.047 25.6768H32.6333C36.1119 25.6768 38.8948 22.8268 38.8948 19.4068V7.50011C38.8948 4.14345 35.9854 1.61011 32.6333 1.04011C30.4196 0.723447 28.206 0.533447 25.9923 0.533447ZM19.2248 4.33345C20.553 4.33345 21.5649 5.41011 21.5649 6.67678C21.5649 7.94345 20.4897 9.02011 19.2248 9.02011C17.8966 9.02011 16.8846 7.94345 16.8846 6.67678C16.8846 5.41011 17.8966 4.33345 19.2248 4.33345Z"
+      fill="url(#paint0_linear_539_26)"
+    />
+    <path
+      d="M40.3496 13.77V19.28C40.3496 23.5234 36.6812 27.1334 32.5069 27.1334H20.0471C16.6317 27.1334 13.7855 30.0467 13.7855 33.4034V45.2467C13.7855 48.6034 16.6949 50.5667 20.0471 51.5167C24.0317 52.6567 27.8265 52.91 32.5701 51.5167C35.7325 50.63 38.8317 48.7934 38.8317 45.2467V40.4967H26.2454V39.04H38.7684H45.03C48.6983 39.04 50.0265 36.57 51.2915 32.77C52.6197 28.9067 52.5565 25.17 51.2915 20.1667C50.3428 16.5567 48.6351 13.8334 45.03 13.8334L40.3496 13.77ZM33.3291 43.6634C34.6573 43.6634 35.6693 44.74 35.6693 46.0067C35.6693 47.2734 34.5941 48.35 33.3291 48.35C32.0009 48.35 30.9889 47.2734 30.9889 46.0067C30.9889 44.74 32.0009 43.6634 33.3291 43.6634Z"
+      fill="url(#paint1_linear_539_26)"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear_539_26"
+        x1="-0.890558"
+        y1="1.83899"
+        x2="27.991"
+        y2="26.4139"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#5A9FD4" />
+        <stop offset="1" stopColor="#306998" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_539_26"
+        x1="38.722"
+        y1="41.5968"
+        x2="28.4082"
+        y2="27.1652"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#FFD43B" />
+        <stop offset="1" stopColor="#FFE873" />
+      </linearGradient>
+    </defs>
+  </svg>
+)
diff --git a/src/homepageExperience/components/Navigation.tsx b/src/homepageExperience/components/Navigation.tsx
@@ -1,11 +1,13 @@
 import React, {PureComponent} from 'react'
 import {
   AlertIcon,
+  ClockIcon,
   ExecuteQueryIcon,
   FinishIcon,
   InitializeClientIcon,
   InstallDependenciesIcon,
   OverviewIcon,
+  PythonIcon,
   TokenIcon,
   WriteDataIcon,
 } from 'src/homepageExperience/components/HomepageIcons'
@@ -59,8 +61,17 @@ export class Navigation extends PureComponent<OwnProps> {
     return (
       <div className="subway-navigation-container">
         <div className="subway-navigation-flex-wrapper">
-          <h2>Setting Up</h2>
-          <h3>5 minutes</h3>
+          <div className="subway-navigation-title">
+            <span className="subway-navigation-title-icon">{PythonIcon}</span>
+            <div className="subway-navigation-title-text">
+              <h3>Setting Up</h3>
+              <h6>Python</h6>
+            </div>
+          </div>
+          <div className="subway-navigation-time-to-complete">
+            {ClockIcon}
+            <h5> 5 minutes</h5>
+          </div>
           {steps.map((value, index) => (
             <Step
               stepIsActive={index === this.props.currentStep - 1}
diff --git a/src/homepageExperience/components/steps/InstallDependencies.tsx b/src/homepageExperience/components/steps/InstallDependencies.tsx
@@ -1,7 +1,18 @@
 import React, {PureComponent} from 'react'
+import CodeSnippet from 'src/shared/components/CodeSnippet'
 
 export class InstallDependencies extends PureComponent {
   render() {
-    return <h1>Install Dependencies</h1>
+    return (
+      <>
+        <h1>Install Dependencies</h1>
+        <p>
+          First, you need to install the{' '}
+          <code style={{color: '#B7B8FF'}}>influxdb-client</code> module. Run
+          the command below in your terminal.
+        </p>
+        <CodeSnippet text="pip3 install influxdb-client" onCopy={null} />
+      </>
+    )
   }
 }
diff --git a/src/homepageExperience/components/steps/Overview.tsx b/src/homepageExperience/components/steps/Overview.tsx
@@ -2,6 +2,31 @@ import React, {PureComponent} from 'react'
 
 export class Overview extends PureComponent {
   render() {
-    return <h1>Overview</h1>
+    return (
+      <div>
+        <h1>Hello, Time-Series World!</h1>
+        <article>
+          <p>Welcome and thanks for checking out InfluxData!</p>
+
+          <p>
+            In the next 5 minutes, you will set up InfluxData on your machine
+            and write and execute some basic queries.
+          </p>
+
+          <p>
+            If you ever stray away from this set up process, worry not! You can
+            always refer to the “Help & Support” item in the side navigation
+            menu to return here.
+          </p>
+
+          <p>Without further ado, let’s get started.</p>
+
+          <p style={{marginTop: '150px'}}>
+            Want to just look at code? Check out the code snippets involved in
+            this guide on <a href="https://github.com/influxdata/ui">Github</a>.
+          </p>
+        </article>
+      </div>
+    )
   }
 }
diff --git a/src/homepageExperience/containers/HomepageContainer.tsx b/src/homepageExperience/containers/HomepageContainer.tsx
@@ -1,10 +1,11 @@
 import React, {PureComponent} from 'react'
 
-import {Button} from '@influxdata/clockface'
+import {Button, ComponentColor, ComponentSize} from '@influxdata/clockface'
 
 import {InstallDependencies} from 'src/homepageExperience/components/steps/InstallDependencies'
 import {Overview} from 'src/homepageExperience/components/steps/Overview'
 import {Navigation} from 'src/homepageExperience/components/Navigation'
+import classnames from 'classnames'
 
 interface State {
   currentStep: number
@@ -19,6 +20,10 @@ export default class HomepageContainer extends PureComponent<null, State> {
     this.setState({currentStep: this.state.currentStep + 1})
   }
 
+  handlePreviousClick = () => {
+    this.setState({currentStep: this.state.currentStep - 1})
+  }
+
   renderStep = () => {
     switch (this.state.currentStep) {
       case 1: {
@@ -41,12 +46,30 @@ export default class HomepageContainer extends PureComponent<null, State> {
             <Navigation currentStep={this.state.currentStep} />
           </div>
         </aside>
-        <main className="homepage-container--main">
-          <div className="homepage-container--main-wrapper">
+        <div className="homepage-container--main">
+          <div
+            className={classnames('homepage-container--main-wrapper', {
+              overviewSection: this.state.currentStep === 1,
+            })}
+          >
             {this.renderStep()}
           </div>
-          <Button onClick={this.handleNextClick} text="Next" />
-        </main>
+
+          <div className="homepage-container-footer">
+            <Button
+              onClick={this.handlePreviousClick}
+              text="Previous"
+              size={ComponentSize.Large}
+              color={ComponentColor.Tertiary}
+            />
+            <Button
+              onClick={this.handleNextClick}
+              text="Next"
+              size={ComponentSize.Large}
+              color={ComponentColor.Primary}
+            />
+          </div>
+        </div>
       </div>
     )
   }
