@lightspeed/cirrus-alert

Alert

A cirrus themed Alert Component.

Installation

1. Since we use peer dependencies to minimize library duplication, ensure you have the following dependencies loaded within your project

yarn add @lightspeed/cirrus-tokens emotion@9 react-emotion@9 styled-system@3 polished@2

2. Install the component library

yarn add @lightspeed/cirrus-alert

3. Hook the <ThemeProvider> and the theme in your app.

// 1. Import the theme provider from emotion-theming
//    This is needed to forward all our tokens to the components
import { ThemeProvider } from 'emotion-theming';

// 2. Import the base theme from cirrus-tokens
//    There's nothing magical about this file. it's literally
//    a plain old javascript object with keys and values that
//    map to the tokens/design-system
import cirrusTheme from '@lightspeed/cirrus-tokens/theme/default';

/* Within your root app component */
class App extends React.Component {
  render() {
    return (
      {/* 
        3. Wrap the children with ThemeProvider and pass in
        the cirrus theme into the theme prop.
      */}
      <ThemeProvider theme={cirrusTheme}>
        {/* Whatever children */ }
      </ThemeProvider>
    );
  }
}

4. Import Alert and use right away!

React Component

Component props

Prop	Type	Description
type	info, warning, danger, or success	default is info
title	string
onClose	fn()	custom fn(event) passed the event object
noCloseBtn	boolean
children (required)	any	The content of the alert

Example

import React from 'react';
import Alert from '@lightspeed/cirrus-alert';

const MyComponent = () =>
  <div>
    <Alert type="info" title="My Title">Alert content</Alert>
  </div>;

export default MyComponent;