@lightspeed/cirrus-divider

5.0.0-beta.1 • Public • Published

Divider

Divider component is used to separate html sections by creating a dividing line.

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
  1. Install the component library
yarn add @lightspeed/cirrus-divider
  1. 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>
    );
  }
}
  1. Import divider and use right away!

React Component

Props

Prop Type Description Default
children React.ReactNode The content to display inside the text -
variant string dotted or solid solid
color string Override the color of the divider gray-100
pt string set the top padding of the divider -
pb string set the bottom padding of the divider -

Example

import React from 'react';
import Divider from '@lightspeed/cirrus-divider';

const MyComponent = () => (
  <div>
    <Divider>My Divider</Divider>
  </div>
);

export default MyComponent;

Readme

Keywords

none

Package Sidebar

Install

npm i @lightspeed/cirrus-divider

Weekly Downloads

16

Version

5.0.0-beta.1

License

MIT

Unpacked Size

23.4 kB

Total Files

13

Last publish

Collaborators

  • kurt.bergeron
  • lightspeedhq
  • ls-guillaume-lambert
  • ls-frederic-bouchard
  • anomen