Matchbox

Matchbox is an open source React component library, built for SparkPost's UI.

Links:

• Component Demo
• Sass Documentation

---

Usage

1. Installation

In your React project, use npm to install matchbox:

npm install @sparkpost/matchbox --save

2. Include Styles

 // Import matchbox's styles
 @import '~@sparkpost/matchbox/styles.scss';
 // Optionally include config.scss for sass functions and mixins
 @import '~@sparkpost/matchbox/src/styles/config.scss';

3. Use the React components

In-depth usage docs coming in the future. For now, reference storybook.

import React from ‘react’;
import { Panel } from '@sparkpost/matchbox';

const YourComponent = () => (
 <Panel accent title='Hey!'>
  <Panel.Section>
    Section Content
  </Panel.Section>
 </Panel>
);

Storybook Development

React Storybook is included for local development.

# Runs storybook at localhost:9001
npm run start:storybook

Publishing

# First merge your PR into master
# Move into the package you want to publish
cd packages/matchbox

# Bump version number
npm version x.x.x

# Commit the release
git add .
git commit -m "Publish @sparkpost/matchbox x.x.x"
git push

# Run the build and publish to NPM with your 2fa code
npm run build
npm publish --otp=xxxxxx