Merge branch 'master' into pgonzal/upgrade-to-rush-5

apps/fabric-website/src/pages/GetStarted/GetStartedPage.tsx

@@ -49,52 +49,46 @@ export class GetStartedPage extends React.Component<any, any> {
               <div className={css('ms-Grid-col ms-lg4', styles.feature)}>
                 <div className={styles.featureImage}>
                   <img
-                    src={
-                      'https://static2.sharepointonline.com/files/fabric/fabric-website/images/get-started-styles.svg'
-                    }
+                    src={'https://static2.sharepointonline.com/files/fabric/fabric-website/images/get-started-styles.svg'}
                     alt="Illustration of Typography and color swatches."
                   />
                 </div>
                 <a className={styles.title} href={'#/styles'}>
                   Styles
                 </a>
                 <div className={styles.description}>
-                  Fabric gives you access to Segoe, Microsoft&rsquo;s official typeface, along with the color palette,
-                  type ramp, icons, and responsive grid for Office 365.
+                  Fabric gives you access to Segoe, Microsoft&rsquo;s official typeface, along with the color palette, type ramp, icons, and
+                  responsive grid for Office 365.
                 </div>
               </div>
               <div className={css('ms-Grid-col ms-lg4', styles.feature)}>
                 <div className={styles.featureImage}>
                   <img
-                    src={
-                      'https://static2.sharepointonline.com/files/fabric/fabric-website/images/get-started-icons.svg'
-                    }
+                    src={'https://static2.sharepointonline.com/files/fabric/fabric-website/images/get-started-icons.svg'}
                     alt="Illustration of Icons"
                   />
                 </div>
                 <a className={styles.title} href={'#/styles/icons'}>
                   Icons
                 </a>
                 <div className={styles.description}>
-                  Fabric includes Office&rsquo;s official product icons. Fabric also provides a suite of product and
-                  document symbols, so you can use the same metaphors we use.
+                  Fabric includes Office&rsquo;s official product icons. Fabric also provides a suite of product and document symbols, so
+                  you can use the same metaphors we use.
                 </div>
               </div>
               <div className={css('ms-Grid-col ms-lg4', styles.feature)}>
                 <div className={styles.featureImage}>
                   <img
-                    src={
-                      'https://static2.sharepointonline.com/files/fabric/fabric-website/images/get-started-components.svg'
-                    }
+                    src={'https://static2.sharepointonline.com/files/fabric/fabric-website/images/get-started-components.svg'}
                     alt="Illustration of Components"
                   />
                 </div>
                 <a className={styles.title} href={'#/components'}>
                   Components
                 </a>
                 <div className={styles.description}>
-                  Components are the building blocks of your UI. Fabric has a variety of components, including
-                  navigation, commands, containers, and content.
+                  Components are the building blocks of your UI. Fabric has a variety of components, including navigation, commands,
+                  containers, and content.
                 </div>
               </div>
             </div>
@@ -104,8 +98,8 @@ export class GetStartedPage extends React.Component<any, any> {
               Design Toolkit
             </a>
             <span className={styles.descriptionLarge}>
-              The Fabric design toolkit is built with Adobe XD and provides controls and layout templates that enable
-              you to create seamless, beautiful Office experiences.
+              The Fabric design toolkit is built with Adobe XD and provides controls and layout templates that enable you to create
+              seamless, beautiful Office experiences.
             </span>
           </div>
         </div>
@@ -131,9 +125,7 @@ export class GetStartedPage extends React.Component<any, any> {
                 <div className={diagramStyles.graphics}>
                   <img
                     className={diagramStyles.componentImage}
-                    src={
-                      'https://static2.sharepointonline.com/files/fabric/fabric-website/images/diagram-components-many.svg'
-                    }
+                    src={'https://static2.sharepointonline.com/files/fabric/fabric-website/images/diagram-components-many.svg'}
                     width="175"
                     height="90"
                     alt="Illustrated Diagram of many components"
@@ -146,9 +138,7 @@ export class GetStartedPage extends React.Component<any, any> {
                 </div>
                 <div className={diagramStyles.content}>
                   <span className={diagramStyles.headline}>Fabric React</span>
-                  <span className={diagramStyles.description}>
-                    Robust, up-to-date components built with the React framework
-                  </span>
+                  <span className={diagramStyles.description}>Robust, up-to-date components built with the React framework</span>
                   <a className={styles.getStartedLink} href="#/components">
                     See components
                   </a>
@@ -158,9 +148,7 @@ export class GetStartedPage extends React.Component<any, any> {
                 <div className={diagramStyles.graphics}>
                   <img
                     className={diagramStyles.componentImage}
-                    src={
-                      'https://static2.sharepointonline.com/files/fabric/fabric-website/images/diagram-components-few.svg'
-                    }
+                    src={'https://static2.sharepointonline.com/files/fabric/fabric-website/images/diagram-components-few.svg'}
                     width="175"
                     height="90"
                     alt="Illustrated Diagram of few components"
@@ -173,9 +161,7 @@ export class GetStartedPage extends React.Component<any, any> {
                 </div>
                 <div className={diagramStyles.content}>
                   <span className={diagramStyles.headline}>AngularJS</span>
-                  <span className={diagramStyles.description}>
-                    Community-driven project to build components for Angular-based apps
-                  </span>
+                  <span className={diagramStyles.description}>Community-driven project to build components for Angular-based apps</span>
                   <a className={styles.getStartedLink} href="#/angular-js">
                     Learn more
                   </a>
@@ -195,7 +181,8 @@ export class GetStartedPage extends React.Component<any, any> {
             and{' '}
             <a className={styles.getStartedLink} href="http://gulpjs.com/">
               gulp
-            </a>.
+            </a>
+            .
           </p>
 
           <ol className={styles.steps}>
@@ -207,9 +194,9 @@ export class GetStartedPage extends React.Component<any, any> {
             </li>
             <li>
               <p>
-                The library includes commonjs entry points under the lib folder. To use a control (like DefaultButton),
-                import it along with React and use it in your render method. Note that wrapping your application in the
-                Fabric component is required to support RTL, keyboard focus, and other features.
+                The library includes commonjs entry points under the lib folder. To use a control (like DefaultButton), import it along with
+                React and use it in your render method. Note that wrapping your application in the Fabric component is required to support
+                RTL, keyboard focus, and other features.
               </p>
               <CodeBlock language="javascript" isLightTheme={true}>
                 {`import * as React from 'react';
@@ -242,13 +229,14 @@ ReactDOM.render(<MyPage />, document.body.firstChild);`}
                 For more information about using components, check out the{' '}
                 <a className={styles.getStartedLink} href="#/components">
                   components page
-                </a>.
+                </a>
+                .
               </p>
             </li>
             <li>
               <p>
-                If you are using Fabric React components that have icons, you can make all icons available by calling
-                the <code>initializeIcons</code> function from the <code>@uifabric/icons</code> package.
+                If you are using Fabric React components that have icons, you can make all icons available by calling the{' '}
+                <code>initializeIcons</code> function from the <code>@uifabric/icons</code> package.
               </p>
               <CodeBlock language="javascript" isLightTheme={true}>
                 {`import { initializeIcons } from '@uifabric/icons';
@@ -260,50 +248,44 @@ initializeIcons();
 initializeIcons('https://my.cdn.com/path/to/icons/');`}
               </CodeBlock>
               <p>
-                This will make ALL icons in the collection available, but will download them on demand when referenced
-                using the{' '}
+                This will make ALL icons in the collection available, but will download them on demand when referenced using the{' '}
                 <a className={styles.getStartedLink} href="#/components/Icon">
                   Icon component
-                </a>.
+                </a>
+                .
               </p>
             </li>
           </ol>
 
           <h3>Other ways to get Fabric React</h3>
           <p>
             For advanced scenarios or alternatives to NPM see the{' '}
-            <a
-              className={styles.getStartedLink}
-              href="https://github.com/OfficeDev/office-ui-fabric-react/wiki/Advanced-Usage"
-            >
+            <a className={styles.getStartedLink} href="https://github.com/OfficeDev/office-ui-fabric-react/wiki/Advanced-Usage">
               advanced documentation in the Fabric React repository
-            </a>.
+            </a>
+            .
           </p>
 
           <h3>Need a component Fabric React doesn&rsquo;t have?</h3>
           <p>
-            First, check the <a
-              className={styles.getStartedLink}
-              href="https://github.com/OfficeDev/office-ui-fabric-react/issues"
-            >
+            First, check the
+            <a className={styles.getStartedLink} href="https://github.com/OfficeDev/office-ui-fabric-react/issues">
               Fabric React issue queue
             </a>{' '}
-            or <a className={styles.getStartedLink} href="https://github.com/OfficeDev/office-ui-fabric-react/projects">
+            or
+            <a className={styles.getStartedLink} href="https://github.com/OfficeDev/office-ui-fabric-react/projects">
               projects
-            </a> to see if your component has already been requested or is being worked on. If you don't see an existing
-            issue or project for the component you're looking for, please <a
-              className={styles.getStartedLink}
-              href="https://github.com/OfficeDev/office-ui-fabric-react/issues"
-            >
+            </a>
+             to see if your component has already been requested or is being worked on. If you don't see an existing issue or project for
+            the component you're looking for, please
+            <a className={styles.getStartedLink} href="https://github.com/OfficeDev/office-ui-fabric-react/issues">
               file an issue in the repo
-            </a>, and we'll respond if it's being built or on our radar.
+            </a>
+            , and we'll respond if it's being built or on our radar.
           </p>
 
           <h2 id="core">Get started with Fabric Core</h2>
-          <p>
-            With one reference to our CDN, you can access Fabric&rsquo;s fonts, icons, type styles, colors, grid, and
-            more.
-          </p>
+          <p>With one reference to our CDN, you can access Fabric&rsquo;s fonts, icons, type styles, colors, grid, and more.</p>
 
           <ol className={styles.steps}>
             <li>
@@ -317,8 +299,7 @@ initializeIcons('https://my.cdn.com/path/to/icons/');`}
             <li>
               <p>
                 Reference core Fabric styles. Add the <code>ms-Fabric</code> class to a containing element, such as{' '}
-                <code>&lt;body&gt;</code>, to set the font-family for all Fabric typography classes used within that
-                element.
+                <code>&lt;body&gt;</code>, to set the font-family for all Fabric typography classes used within that element.
               </p>
               <CodeBlock language="html" isLightTheme={true}>
                 {`<body class="ms-Fabric">
@@ -329,14 +310,16 @@ initializeIcons('https://my.cdn.com/path/to/icons/');`}
                 To reference all the assets available in Fabric Core, see the{' '}
                 <a className={styles.getStartedLink} href="#/styles">
                   styles page
-                </a>. To use components, see{' '}
+                </a>
+                . To use components, see{' '}
                 <a className={styles.getStartedLink} href="#/get-started#react">
                   Fabric React
                 </a>{' '}
                 or{' '}
                 <a className={styles.getStartedLink} href="#/angular-js">
                   ngOfficeUIFabric
-                </a>.
+                </a>
+                .
               </p>
             </li>
           </ol>
@@ -348,37 +331,32 @@ initializeIcons('https://my.cdn.com/path/to/icons/');`}
               download a copy of Fabric for your project
             </a>{' '}
             or{' '}
-            <a
-              className={styles.getStartedLink}
-              href="https://github.com/OfficeDev/office-ui-fabric-react/wiki#using-fabric-react"
-            >
+            <a className={styles.getStartedLink} href="https://github.com/OfficeDev/office-ui-fabric-react/wiki#using-fabric-react">
               add it through a package manager
-            </a>. You can also{' '}
-            <a
-              className={styles.getStartedLink}
-              href="https://github.com/OfficeDev/office-ui-fabric-react/wiki#building-the-repo"
-            >
+            </a>
+            . You can also{' '}
+            <a className={styles.getStartedLink} href="https://github.com/OfficeDev/office-ui-fabric-react/wiki#building-the-repo">
               build your own copy from the source code
-            </a>.
+            </a>
+            .
           </p>
 
           <h3>Need an icon or feature Fabric Core doesn&rsquo;t have?</h3>
           <p>
-            First, check the <a
-              className={styles.getStartedLink}
-              href="https://github.com/OfficeDev/office-ui-fabric-react/issues"
-            >
+            First, check the
+            <a className={styles.getStartedLink} href="https://github.com/OfficeDev/office-ui-fabric-react/issues">
               Fabric React issue queue
             </a>{' '}
-            or <a className={styles.getStartedLink} href="https://github.com/OfficeDev/office-ui-fabric-react/projects">
+            or
+            <a className={styles.getStartedLink} href="https://github.com/OfficeDev/office-ui-fabric-react/projects">
               projects
-            </a> to see if your component has already been requested or is being worked on. If you don't see an existing
-            issue or project for the component you're looking for, please <a
-              className={styles.getStartedLink}
-              href="https://github.com/OfficeDev/office-ui-fabric-react/issues"
-            >
+            </a>
+             to see if your component has already been requested or is being worked on. If you don't see an existing issue or project for
+            the component you're looking for, please
+            <a className={styles.getStartedLink} href="https://github.com/OfficeDev/office-ui-fabric-react/issues">
               file an issue in the repo
-            </a>, and we'll respond if it's being built or on our radar.
+            </a>
+            , and we'll respond if it's being built or on our radar.
           </p>
 
           <p className={styles.trademark}>
@@ -388,7 +366,8 @@ initializeIcons('https://my.cdn.com/path/to/icons/');`}
               href="https://static2.sharepointonline.com/files/fabric/assets/microsoft_fabric_assets_license_agreement_10262017.pdf"
             >
               assets license agreement
-            </a>.
+            </a>
+            .
           </p>
         </div>
       </div>