Skip to content
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
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

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" />

## Usage

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

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

## Sandbox

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"

@@ -49,7 +49,7 @@ const IndexPage: React.FC<{}> = (): React.ReactElement => {
solving our customers’ problems. It is open source and contributions are welcome.
<Box marginTop="space80" marginBottom="space80">
<Box display="inline" marginRight="space40">
<Box display="inline-block" marginRight="space40">
@@ -63,7 +63,7 @@ const IndexPage: React.FC<{}> = (): React.ReactElement => {
Get Started
<Box display="inline" marginRight="space40">
<Box display="inline-block" marginRight="space40">
@@ -156,11 +156,16 @@ const IndexPage: React.FC<{}> = (): React.ReactElement => {
<Terminal size={24} />
<Heading as="h2" headingStyle="headingStyle20">
Component API
Code Sandbox
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.
<Button as="a" href="" variant="secondary">
Code Sandbox

1 comment on commit b589641


This comment has been minimized.

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