feat(docs): add FAQ page (#1227)

* Adding simple FAQ

* Fixing typo

* Updates for per review

Author: hughreeling

docs/src/components/Sidebar/Sidebar.tsx

@@ -273,6 +273,13 @@ class Sidebar extends React.Component<any, any> {
         to: '/quick-start',
         styles: menuItemStyles,
       },
+      {
+        key: 'faq',
+        content: 'FAQ',
+        as: NavLink,
+        to: '/faq',
+        styles: menuItemStyles,
+      },
       {
         key: 'accessiblity',
         content: 'Accessibility',

docs/src/routes.tsx

@@ -7,6 +7,8 @@ import DocsRoot from './components/DocsRoot'
 
 import Accessibility from './views/Accessibility'
 import ColorPalette from './views/ColorPalette'
+
+import FAQ from './views/FAQ'
 import ShorthandProps from './views/ShorthandProps'
 import Introduction from './views/Introduction'
 import PageNotFound from './views/PageNotFound'
@@ -97,6 +99,7 @@ const Router = () => (
             component={require('./prototypes/alerts/index').default}
           />,
         ]}
+        <DocsLayout exact path="/faq" component={FAQ} />
         <DocsLayout exact path="/accessibility" component={Accessibility} />
         <DocsLayout exact path="/accessibility-behaviors" component={AccessibilityBehaviors} />
         <DocsLayout exact path="/focus-zone" component={FocusZone} />

docs/src/views/Accessibility.tsx

@@ -428,7 +428,7 @@ export default () => (
     </ul>
 
     <GuidesNavigationFooter
-      previous={{ name: 'Quick Start', url: 'quick-start' }}
+      previous={{ name: 'FAQ', url: 'faq' }}
       next={{ name: 'Theming', url: 'theming' }}
     />
   </DocPage>

docs/src/views/FAQ.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react'
+import DocPage from '../components/DocPage/DocPage'
+import GuidesNavigationFooter from '../components/GuidesNavigationFooter'
+import CodeSnippet from '../components/CodeSnippet'
+import { link } from '../utils/helpers'
+
+import { Header } from '@stardust-ui/react'
+
+const Category = props => <Header as="h2" {...props} />
+const Question = props => <Header as="h3" {...props} />
+const Answer = props => <p>{props.content}</p>
+
+export default () => (
+  <DocPage title="FAQ">
+    <Category content="General" />
+    <Question content="Does Stardust support mobile?" />
+    <Answer content="No. Scope is limited to Web / Desktop at present." />
+
+    <Question content="How can @mixins be used in the Stardust's styles" />
+    <Answer
+      content="
+      As the styles in Stardust are defined using CSS in JS, mixins can be defined as simple
+      functions that can be reused on multiple places.
+      "
+    />
+
+    <Question content="How to use Links and React-Router" />
+    <Answer
+      content={
+        <p>
+          We recommend to render links from react router as Buttons as below:
+          <CodeSnippet
+            value={`
+      <>
+          import { Link } from 'react-router-dom'
+          
+          <Button
+            as={Link}
+            content={previous.name}
+            icon="arrow left"
+            iconPosition="before"
+            primary
+            to={previous.url}
+          />
+      </>
+      `}
+          />
+        </p>
+      }
+    />
+
+    <Category content="Teams Specific" />
+    <Question content="How to add Icons to Stardust" />
+    <Answer
+      content={
+        <p>
+          Generally Teams should be using SVG icons only. If you need FontAwesome or other icons,
+          process for adding them is described in{' '}
+          {link(
+            'Issue 585',
+            'https://github.com/stardust-ui/react/pull/585',
+            true, // if 'true', opens in a new tab
+          )}
+        </p>
+      }
+    />
+    <GuidesNavigationFooter
+      previous={{ name: 'Quick Start', url: 'quick-start' }}
+      next={{ name: 'Accessibility', url: 'accessibility' }}
+    />
+  </DocPage>
+)

docs/src/views/QuickStart.tsx

@@ -53,6 +53,6 @@ export default () => (
       `}
     />
 
-    <GuidesNavigationFooter next={{ name: 'Accessibility', url: 'accessibility' }} />
+    <GuidesNavigationFooter next={{ name: 'FAQ', url: 'faq' }} />
   </DocPage>
 )