chirp-ui-components v1.2.9

Chirp UI Component Library

This is a shared UI Component library for the front end, used in applications such as: Chirp main website and Developer Hub.

How to use?

Update submodules:

git submodule update --init --recursive

Start storybook development server for local development

yarn storybook

Link submodule to your project

Before linking dependency, make sure that dependency version match the one specified in package.json

//From chirp-ui-components
yarn prepublishOnly //to build npm dependency
npm link  //to link dependency to npm

//From the client project
npm link chirp-ui-components

How to consume?

import React from 'react';
import { Card, Header, Paragraph } from 'chirp-ui-components';

const MyComponent = () => (
  <div>
    <Card orangeDark>
      <Header>Hi from a header</Header>
      <Paragraph>And this is a paragraph</Paragraph>
    </Card>
  </div>
);

Fonts

if you would like the fonts to be the same as Chirp's then you need to have Calibre and MarkPro Fonts installed and required as follows:

// replace "../assets/fonts" with the link to your fonts

@font-face {
  font-family: 'Calibre';
  src: url('../assets/fonts/CalibreLight.woff') format('woff');
  font-weight: 300;
}
@font-face {
  font-family: 'Calibre';
  src: url('../assets/fonts/CalibreRegular.woff') format('woff');
  font-weight: 400;
}
@font-face {
  font-family: 'Calibre';
  src: url('../assets/fonts/Calibre-Medium.woff') format('woff');
  font-weight: 500;
}
@font-face {
  font-family: 'MarkPro';
  src: url('../assets/fonts/MarkPro-Medium.woff') format('woff');
  font-weight: 400;
}
@font-face {
  font-family: 'MarkPro';
  src: url('../assets/fonts/MarkPro-Bold.woff') format('woff');
  font-weight: 500;
}