Skip to content
Permalink
Browse files

feat: update getting started (#162)

* feat: update getting started

* chore: add to the homepage
  • Loading branch information
SiTaggart committed Nov 1, 2019
1 parent 4e033e6 commit b589641d95c98b9cdc244836c2c5736393876a95
@@ -30,13 +30,13 @@ Currently, every package is standalone in the paste project. While this means y
#### External dependencies
```shell
yarn add @emotion/core @emotion/styled styled-system@4.1.0 react-uid
yarn add react react-dom @emotion/core @emotion/styled styled-system @styled-system/theme-get react-uid
```

#### System packages

```shell
yarn add @twilio-paste/theme @twilio-paste/design-tokens @twilio-paste/theme-tokens @twilio-paste/box @twilio-paste/icons @twilio-paste/spinner @twilio-paste/text @twilio-paste/button @twilio-paste/anchor @twilio-paste/absolute @twilio-paste/screen-reader-only @twilio-paste/media-object
yarn add @twilio-paste/types @twilio-paste/design-tokens @twilio-paste/theme-tokens @twilio-paste/theme @twilio-paste/icons @twilio-paste/core
```


@@ -48,7 +48,6 @@ Be gentle :P - this was recorded in one take on zoom.
<source src={QuickstartVideo} type="video/mp4" />
</video>


## Usage

```jsx
@@ -72,6 +71,16 @@ import {Box} from '@twilio-paste/box';

Our tokens are readily available on our components and typescript typings are provided.

## Sandbox

<iframe
src="https://codesandbox.io/embed/paste-starter-kit-rj7yy?fontsize=14"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="Paste Starter Kit"
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
></iframe>
</content>

</contentwrapper>
@@ -49,7 +49,7 @@ const IndexPage: React.FC<{}> = (): React.ReactElement => {
solving our customers’ problems. It is open source and contributions are welcome.
</P>
<Box marginTop="space80" marginBottom="space80">
<Box display="inline" marginRight="space40">
<Box display="inline-block" marginRight="space40">
<Button
as="a"
href="/getting-started/"
@@ -63,7 +63,7 @@ const IndexPage: React.FC<{}> = (): React.ReactElement => {
Get Started
</Button>
</Box>
<Box display="inline" marginRight="space40">
<Box display="inline-block" marginRight="space40">
<Button
as="a"
href="/components/"
@@ -156,11 +156,16 @@ const IndexPage: React.FC<{}> = (): React.ReactElement => {
<Terminal size={24} />
</IconCircle>
<Heading as="h2" headingStyle="headingStyle20">
Component API
Code Sandbox
</Heading>
<P>
Each <SiteLink to="/components">Paste component</SiteLink> is thoroughly documented with a list of props
and descriptions of how they should be used.
We&rsquo;ve loaded a Code Sandbox with the latest components from Paste Core for you to get a feel for
working with Paste.
</P>
<P>
<Button as="a" href="https://codesandbox.io/s/paste-starter-kit-rj7yy" variant="secondary">
Code Sandbox
</Button>
</P>
</Box>
</Grid>

1 comment on commit b589641

@now

This comment has been minimized.

Please sign in to comment.
You can’t perform that action at this time.