blob: 1094a3a43e9faabcc78598d1a2d7e3500dc7f355 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
# Matchbox
[Component Demo](https://sparkpost.github.io/matchbox/)
## Usage
### 1. Installation
In your react project, run:
```bash
npm install @sparkpost/matchbox --save
```
Or, if you prefer yarn:
```bash
yarn add @sparkpost/matchbox
```
### 2. Include Styles
There are multiple ways to use Matchbox's styles. If you want to import everything as css use:
```css
@import '@sparkpost/matchbox/styles.css'
```
If you want to pull in the Sass and global reset separately, you can use:
```css
@import '~@sparkpost/matchbox/src/config.scss';
@import '~@sparkpost/matchbox/src/global.scss';
```
`config` does not output any CSS, and only holds functions and mixins, while `global` includes a baseline styles reset.
### 3. Use the React components
In-depth usage docs coming in the future. For now, reference [storybook](https://sparkpost.github.io/matchbox/).
```js
import React from ‘react’;
import { Panel } from '@sparkpost/matchbox';
const YourComponent = () => (
<Panel accent title='Hey!'>
<Panel.Section>
Section Content
</Panel.Section>
</Panel>
);
```
## Build
```bash
# Runs the rollup build
npm run build
```
## Local Development
[React Storybook](https://github.com/storybooks/storybook) is included for local development.
```bash
# Runs storybook locally
npm run storybook
# Deploys to gh-pages
npm run deploy-storybook
```
|
