Skip to content

Commit 1c4fbdc

Browse files
deinideini
authored
feat(docs): getting started page (#125)
1 parent 0892c7c commit 1c4fbdc

File tree

8 files changed

+99
-11
lines changed

8 files changed

+99
-11
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div align="center">
22
<a href="https://bigcommerce.design/bigdesign">
3-
<img alt="BigDesign" src="https://bigcommerce.github.io/big-design/logo.svg" width="546">
3+
<img alt="BigDesign" src="https://bigcommerce.github.io/big-design/logo-with-text.svg" width="546">
44
</a>
55
</div>
66

‎packages/docs/components/CodeSnippet/CodeSnippet.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { CodeEditorThemeContext } from '../StoryWrapper/StoryWrapper';
88

99
interface EditorProps {
1010
language?: string;
11+
showControls?: boolean;
1112
}
1213

1314
function formatCode(code: string) {
@@ -38,13 +39,13 @@ function getCode(children: React.ReactNode) {
3839
}
3940

4041
export const CodeSnippet: React.FC<EditorProps> = props => {
41-
const { children, language } = props;
42+
const { children, language, showControls } = props;
4243
const { editorTheme } = useContext(CodeEditorThemeContext);
4344
const code = getCode(children);
4445

4546
return (
4647
<Box border="box" marginBottom="xxLarge">
47-
<SnippetControls copyToClipboard={() => clipboardCopy(code)} helperText="Code example" />
48+
{showControls && <SnippetControls copyToClipboard={() => clipboardCopy(code)} helperText="Code example" />}
4849

4950
{/* react-live Editor types are wrong, PR submitted */}
5051
{/*
@@ -56,4 +57,5 @@ export const CodeSnippet: React.FC<EditorProps> = props => {
5657

5758
CodeSnippet.defaultProps = {
5859
language: 'jsx',
60+
showControls: true,
5961
};

‎packages/docs/components/SideNav/SideNav.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,12 @@ import { SideNavLink } from './SideNavLink';
55
export const SideNav: React.FC = () => {
66
return (
77
<StyledFlex flexDirection="column" padding="medium" paddingBottom="xxxLarge" backgroundColor="white">
8-
<img src="/static/logo.svg" alt="BigDesign Logo" />
8+
<img src="/static/logo-with-text.svg" alt="BigDesign Logo" />
99

1010
<SideNavGroup title="Foundation">
11-
<SideNavLink href="/">Getting Started</SideNavLink>
11+
<SideNavLink href="/GettingStarted/GettingStartedPage" as="/">
12+
Getting Started
13+
</SideNavLink>
1214
<SideNavLink href="/Colors/ColorsPage" as="/colors">
1315
Colors
1416
</SideNavLink>

‎packages/docs/next.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ module.exports = {
88
return config;
99
},
1010
exportPathMap: () => ({
11-
'/': { page: '/' },
11+
'/': { page: '/GettingStarted/GettingStartedPage' },
1212
'/badge': { page: '/Badge/BadgePage' },
1313
'/box': { page: '/Box/BoxPage' },
1414
'/button': { page: '/Button/ButtonPage' },

‎packages/docs/pages/GettingStarted/GettingStartedPage.tsx

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { Flex, H1, H2, Link, Text } from '@bigcommerce/big-design';
2+
import React from 'react';
3+
4+
import { Code, CodeSnippet, List } from '../../components';
5+
6+
export default () => (
7+
<Flex flexDirection="column">
8+
<figure style={{ textAlign: 'center' }}>
9+
<img src="/static/logo.svg" alt="BigDesign Logo" style={{ width: 200 }} />
10+
</figure>
11+
12+
<Flex.Item alignSelf="center">
13+
<H1>BigDesign Component Playground</H1>
14+
</Flex.Item>
15+
16+
<Text>
17+
Our design language system and React component library was built to enable designers and developers to build
18+
experiences that seamlessly integrate with the BigCommerce product ecosystem.
19+
</Text>
20+
21+
<H2>Getting Started</H2>
22+
23+
<Text>Add BigDesign and styled-components to your project:</Text>
24+
<CodeSnippet showControls={false} language="bash">
25+
npm install @bigcommerce/big-design styled-components
26+
</CodeSnippet>
27+
28+
<Text>
29+
Import the <Code>GlobalStyles</Code> component and use it once in your app. This will set a few styles globally,
30+
including a base font family,{' '}
31+
<Link href="https://fonts.google.com/specimen/Source+Sans+Pro" target="_blank">
32+
Source Sans Pro
33+
</Link>{' '}
34+
and{' '}
35+
<Link href="https://github.com/necolas/normalize.css/" target="_blank">
36+
normalize.css
37+
</Link>
38+
. We recommend placing it close to your root component. Then import any component, such as <Code>Button</Code>, to
39+
use it anywhere in your app.
40+
</Text>
41+
42+
<CodeSnippet>
43+
{`
44+
import { Button, GlobalStyles } from '@bigcommerce/big-design';
45+
46+
// ...
47+
48+
<App>
49+
<GlobalStyles />
50+
<Button>Click me</Button>
51+
</App>
52+
`}
53+
</CodeSnippet>
54+
55+
<H2 marginBottom="none">Helpful Resources</H2>
56+
<List>
57+
<List.Item>
58+
<Link href="https://bigcommerce.design/components" target="_blank">
59+
Design Guidelines
60+
</Link>
61+
</List.Item>
62+
<List.Item>
63+
<Link href="https://github.com/bigcommerce/big-design" target="_blank">
64+
Components GitHub Repo
65+
</Link>
66+
</List.Item>
67+
<List.Item>
68+
<Link href="https://github.com/bigcommerce-labs/sample-plab-app" target="_blank">
69+
Sample App
70+
</Link>
71+
</List.Item>
72+
<List.Item>
73+
<Link href="#">BigDesign Dev Blog Demo</Link>
74+
</List.Item>
75+
<List.Item>
76+
<Link href="https://support.bigcommerce.com/s/group/0F91B000000bnqoSAA/bigdesign-beta" target="_blank">
77+
Community Beta Group
78+
</Link>
79+
</List.Item>
80+
<List.Item>
81+
<Link href="https://developer.bigcommerce.com" target="_blank">
82+
Dev Center
83+
</Link>
84+
</List.Item>
85+
</List>
86+
</Flex>
87+
);

‎packages/docs/pages/index.tsx

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎packages/docs/static/logo-with-text.svg

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)