feat(docs): getting started page (#125)

Author: deini

README.md

@@ -1,6 +1,6 @@
 <div align="center">
   <a href="https://bigcommerce.design/bigdesign">
-    <img alt="BigDesign" src="https://bigcommerce.github.io/big-design/logo.svg" width="546">
+    <img alt="BigDesign" src="https://bigcommerce.github.io/big-design/logo-with-text.svg" width="546">
   </a>
 </div>
 

packages/docs/components/CodeSnippet/CodeSnippet.tsx

@@ -8,6 +8,7 @@ import { CodeEditorThemeContext } from '../StoryWrapper/StoryWrapper';
 
 interface EditorProps {
   language?: string;
+  showControls?: boolean;
 }
 
 function formatCode(code: string) {
@@ -38,13 +39,13 @@ function getCode(children: React.ReactNode) {
 }
 
 export const CodeSnippet: React.FC<EditorProps> = props => {
-  const { children, language } = props;
+  const { children, language, showControls } = props;
   const { editorTheme } = useContext(CodeEditorThemeContext);
   const code = getCode(children);
 
   return (
     <Box border="box" marginBottom="xxLarge">
-      <SnippetControls copyToClipboard={() => clipboardCopy(code)} helperText="Code example" />
+      {showControls && <SnippetControls copyToClipboard={() => clipboardCopy(code)} helperText="Code example" />}
 
       {/* react-live Editor types are wrong, PR submitted */}
       {/* 
@@ -56,4 +57,5 @@ export const CodeSnippet: React.FC<EditorProps> = props => {
 
 CodeSnippet.defaultProps = {
   language: 'jsx',
+  showControls: true,
 };

packages/docs/components/SideNav/SideNav.tsx

@@ -5,10 +5,12 @@ import { SideNavLink } from './SideNavLink';
 export const SideNav: React.FC = () => {
   return (
     <StyledFlex flexDirection="column" padding="medium" paddingBottom="xxxLarge" backgroundColor="white">
-      <img src="/static/logo.svg" alt="BigDesign Logo" />
+      <img src="/static/logo-with-text.svg" alt="BigDesign Logo" />
 
       <SideNavGroup title="Foundation">
-        <SideNavLink href="/">Getting Started</SideNavLink>
+        <SideNavLink href="/GettingStarted/GettingStartedPage" as="/">
+          Getting Started
+        </SideNavLink>
         <SideNavLink href="/Colors/ColorsPage" as="/colors">
           Colors
         </SideNavLink>

packages/docs/next.config.js

@@ -8,7 +8,7 @@ module.exports = {
     return config;
   },
   exportPathMap: () => ({
-    '/': { page: '/' },
+    '/': { page: '/GettingStarted/GettingStartedPage' },
     '/badge': { page: '/Badge/BadgePage' },
     '/box': { page: '/Box/BoxPage' },
     '/button': { page: '/Button/ButtonPage' },

packages/docs/pages/GettingStarted/GettingStartedPage.tsx

@@ -0,0 +1,87 @@
+import { Flex, H1, H2, Link, Text } from '@bigcommerce/big-design';
+import React from 'react';
+
+import { Code, CodeSnippet, List } from '../../components';
+
+export default () => (
+  <Flex flexDirection="column">
+    <figure style={{ textAlign: 'center' }}>
+      <img src="/static/logo.svg" alt="BigDesign Logo" style={{ width: 200 }} />
+    </figure>
+
+    <Flex.Item alignSelf="center">
+      <H1>BigDesign Component Playground</H1>
+    </Flex.Item>
+
+    <Text>
+      Our design language system and React component library was built to enable designers and developers to build
+      experiences that seamlessly integrate with the BigCommerce product ecosystem.
+    </Text>
+
+    <H2>Getting Started</H2>
+
+    <Text>Add BigDesign and styled-components to your project:</Text>
+    <CodeSnippet showControls={false} language="bash">
+      npm install @bigcommerce/big-design styled-components
+    </CodeSnippet>
+
+    <Text>
+      Import the <Code>GlobalStyles</Code> component and use it once in your app. This will set a few styles globally,
+      including a base font family,{' '}
+      <Link href="https://fonts.google.com/specimen/Source+Sans+Pro" target="_blank">
+        Source Sans Pro
+      </Link>{' '}
+      and{' '}
+      <Link href="https://github.com/necolas/normalize.css/" target="_blank">
+        normalize.css
+      </Link>
+      . We recommend placing it close to your root component. Then import any component, such as <Code>Button</Code>, to
+      use it anywhere in your app.
+    </Text>
+
+    <CodeSnippet>
+      {`
+        import { Button, GlobalStyles } from '@bigcommerce/big-design';
+
+        // ...
+
+        <App>
+          <GlobalStyles />
+          <Button>Click me</Button>
+        </App>
+      `}
+    </CodeSnippet>
+
+    <H2 marginBottom="none">Helpful Resources</H2>
+    <List>
+      <List.Item>
+        <Link href="https://bigcommerce.design/components" target="_blank">
+          Design Guidelines
+        </Link>
+      </List.Item>
+      <List.Item>
+        <Link href="https://github.com/bigcommerce/big-design" target="_blank">
+          Components GitHub Repo
+        </Link>
+      </List.Item>
+      <List.Item>
+        <Link href="https://github.com/bigcommerce-labs/sample-plab-app" target="_blank">
+          Sample App
+        </Link>
+      </List.Item>
+      <List.Item>
+        <Link href="#">BigDesign Dev Blog Demo</Link>
+      </List.Item>
+      <List.Item>
+        <Link href="https://support.bigcommerce.com/s/group/0F91B000000bnqoSAA/bigdesign-beta" target="_blank">
+          Community Beta Group
+        </Link>
+      </List.Item>
+      <List.Item>
+        <Link href="https://developer.bigcommerce.com" target="_blank">
+          Dev Center
+        </Link>
+      </List.Item>
+    </List>
+  </Flex>
+);