feat(nav-bar-content): add guidance icon to getting started view (#2716)

- Added guidance icon to title in GettingStartedView
- Added GettingStartedView styles

src/DetailsView/components/getting-started-view.scss

@@ -7,3 +7,19 @@
     padding-left: 6px;
     padding-top: 1vh;
 }
+
+.getting-started-header {
+    @include text-style-title-m;
+    padding-top: 8px;
+    i {
+        font-size: 16px;
+    }
+}
+
+.getting-started-header-title {
+    margin-right: 8px;
+}
+
+.getting-started-title {
+    @include text-style-title-s;
+}

src/DetailsView/components/getting-started-view.tsx

@@ -3,17 +3,26 @@
 import { NamedFC } from 'common/react/named-fc';
 import * as styles from 'DetailsView/components/getting-started-view.scss';
 import * as React from 'react';
+import { ContentLink, ContentLinkDeps } from 'views/content/content-link';
+import { ContentPageComponent } from 'views/content/content-page';
+
+export type GettingStartedViewDeps = ContentLinkDeps;
 
 export interface GettingStartedViewProps {
+    deps: GettingStartedViewDeps;
     gettingStartedContent: JSX.Element;
     title: string;
+    guidance: ContentPageComponent;
 }
 
 export const GettingStartedView = NamedFC<GettingStartedViewProps>('GettingStartedView', props => {
     return (
         <div className={styles.gettingStartedView}>
-            <h1>{props.title}</h1>
-            <h2>Getting Started</h2>
+            <h1 className={styles.gettingStartedHeader}>
+                <span className={styles.gettingStartedHeaderTitle}>{props.title}</span>
+                <ContentLink deps={props.deps} reference={props.guidance} iconName="info" />
+            </h1>
+            <h2 className={styles.gettingStartedTitle}>Getting Started</h2>
             {props.gettingStartedContent}
         </div>
     );

src/DetailsView/components/reflow-assessment-view.tsx

@@ -16,10 +16,12 @@ import {
     gettingStartedSubview,
     PersistedTabInfo,
 } from '../../common/types/store-data/assessment-result-data';
-import { GettingStartedView } from './getting-started-view';
+import { GettingStartedView, GettingStartedViewDeps } from './getting-started-view';
 import { TargetChangeDialog, TargetChangeDialogDeps } from './target-change-dialog';
 
-export type ReflowAssessmentViewDeps = TargetChangeDialogDeps & RequirementViewDeps;
+export type ReflowAssessmentViewDeps = TargetChangeDialogDeps &
+    GettingStartedViewDeps &
+    RequirementViewDeps;
 
 export type ReflowAssessmentViewProps = {
     deps: ReflowAssessmentViewDeps;
@@ -42,8 +44,10 @@ export const ReflowAssessmentView = NamedFC<ReflowAssessmentViewProps>(
         const renderGettingStartedView = () => {
             return (
                 <GettingStartedView
+                    deps={props.deps}
                     gettingStartedContent={props.assessmentTestResult.definition.gettingStarted}
                     title={props.assessmentTestResult.definition.title}
+                    guidance={props.assessmentTestResult.definition.guidance}
                 />
             );
         };

src/tests/unit/tests/DetailsView/components/__snapshots__/getting-started-view.test.tsx.snap

@@ -4,10 +4,27 @@ exports[`GettingStartedViewTest renders with content from props 1`] = `
 <div
   className="gettingStartedView"
 >
-  <h1>
-    some title
+  <h1
+    className="gettingStartedHeader"
+  >
+    <span
+      className="gettingStartedHeaderTitle"
+    >
+      some title
+    </span>
+    <ContentLink
+      deps={Object {}}
+      iconName="info"
+      reference={
+        Object {
+          "pageTitle": "some page title",
+        }
+      }
+    />
   </h1>
-  <h2>
+  <h2
+    className="gettingStartedTitle"
+  >
     Getting Started
   </h2>
   <div>

src/tests/unit/tests/DetailsView/components/__snapshots__/reflow-assessment-view.test.tsx.snap

@@ -16,11 +16,17 @@ exports[`AssessmentViewTest render for gettting started 1`] = `
     }
   />
   <GettingStartedView
+    deps={Object {}}
     gettingStartedContent={
       <h1>
         Hello
       </h1>
     }
+    guidance={
+      Object {
+        "pageTitle": "some page title",
+      }
+    }
     title="some title"
   />
 </div>

src/tests/unit/tests/DetailsView/components/getting-started-view.test.tsx

@@ -2,16 +2,20 @@
 // Licensed under the MIT License.
 import {
     GettingStartedView,
+    GettingStartedViewDeps,
     GettingStartedViewProps,
 } from 'DetailsView/components/getting-started-view';
 import { shallow } from 'enzyme';
 import * as React from 'react';
+import { ContentPageComponent } from 'views/content/content-page';
 
 describe('GettingStartedViewTest', () => {
     it('renders with content from props', () => {
         const props: GettingStartedViewProps = {
+            deps: {} as GettingStartedViewDeps,
             gettingStartedContent: <div>test-getting-started-content</div>,
             title: 'some title',
+            guidance: { pageTitle: 'some page title' } as ContentPageComponent,
         };
 
         const rendered = shallow(<GettingStartedView {...props} />);

src/tests/unit/tests/DetailsView/components/reflow-assessment-view.test.tsx

@@ -52,6 +52,7 @@ describe('AssessmentViewTest', () => {
             definition: {
                 gettingStarted: <h1>Hello</h1>,
                 title: 'some title',
+                guidance: { pageTitle: 'some page title' },
             },
             getRequirementResult: getRequirementResultStub,
         } as AssessmentTestResult;