npm package: @lightspeed/cirrus
Description: Cirrus, all inclusive
Author: Lightspeed
Latest version: 7.5.0
Deprecated: Package no longer supported, use @lightspeed/flame instead.

# Cirrus components

A package containing all Cirrus React components.

Refer to [main README](https://github.com/lightspeedretail/cirrus/blob/master/README.md#getting-started) for usage.

## Building Cirrus for production

Both steps are self contained in their own command.

To build, run the following command:

```
yarn build
```

This will do the followng in order:

- automatically flush the `dist` folder
- generate icons/flags into their respective component folder
- transpile any files within the `src` folder
- copy straggler files based on a pre-defined whitelist (e.g: json files)

Please note, that during the transpilation phase, the `story.js` file and whatever files contained within a folder named `examples` will be ignored.

You may notice that there are empty folders that get outputted into the `dist` folder. These will get auto ignored during the publish phase.

## Publishing Cirrus

First, make sure you've went through the [release workflow](https://github.com/lightspeedretail/cirrus/blob/master/.github/CONTRIBUTING.md#release-workflow), skip step 3 (`npm publish`)

Then, to publish, run the following command:

```
yarn release
```

This will build and publish the recently built components.

If you didn't properly bump the version, npm will throw an error. So no need to worry of squashing a previously published version.

## Styled System Props

| Component Name     | styled-system props                                                                                                                        |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
| Alert              | [space](https://github.com/jxnblk/styled-system/blob/master/docs/api.md#space)                                                             |
| Bone               | [space](https://github.com/jxnblk/styled-system/blob/master/docs/api.md#space)                                                             |
|                    | [width](https://github.com/jxnblk/styled-system/blob/master/docs/api.md#width)                                                             |
|                    | [bgColor](https://github.com/jxnblk/styled-system/blob/master/docs/api.md#color)                                                           |
| Button             | [space](https://github.com/jxnblk/styled-system/blob/master/docs/api.md#space)                                                             |
| Card               | [colors](https://github.com/jxnblk/styled-system/blob/master/docs/api.md#color)                                                            |
| CardSection        | [space](https://github.com/jxnblk/styled-system/blob/master/docs/api.md#space)                                                             |
| Box                | [space](https://github.com/jxnblk/styled-system/blob/master/docs/api.md#space)                                                             |
|                    | [width](https://github.com/jxnblk/styled-system/blob/master/docs/api.md#width)                                                             |
|                    | [fontSize](https://github.com/jxnblk/styled-system/blob/master/docs/api.md#fontsize)                                                       |
|                    | [colors](https://github.com/jxnblk/styled-system/blob/master/docs/api.md#color)                                                            |
| Flex (extends Box) | [flex, flexWrap, flexDirection, alignItems, justifyContent](https://github.com/jxnblk/styled-system/blob/master/docs/api.md#flexbox)       |
| Divider            | [space](https://github.com/jxnblk/styled-system/blob/master/docs/api.md#space)                                                             |
| Group              | [flex, justifyContent](https://github.com/jxnblk/styled-system/blob/master/docs/api.md#flexbox)                                            |
| GroupItem          | [flex](https://github.com/jxnblk/styled-system/blob/master/docs/api.md#flexbox)                                                            |
|                    | [width](https://github.com/jxnblk/styled-system/blob/master/docs/api.md#width)                                                             |
| GroupAddon         | [width](https://github.com/jxnblk/styled-system/blob/master/docs/api.md#width)                                                             |
| Logo               | [width](https://github.com/jxnblk/styled-system/blob/master/docs/api.md#width)                                                             |
| Text               | [fontSize](https://github.com/jxnblk/styled-system/blob/master/docs/api.md#fontsize)                                                       |
|                    | [space](https://github.com/jxnblk/styled-system/blob/master/docs/api.md#space)                                                             |
|                    | [fontFamily, textAlign, fontWeight, letterSpacing, lineHeight](https://github.com/jxnblk/styled-system/blob/master/docs/api.md#typography) |
|                    | textTransform (custom property that takes any `text-transform` values)                                                                     |
|                    | [fontSize](https://github.com/jxnblk/styled-system/blob/master/docs/api.md#fontsize)                                                       |
|                    | [textColor](https://github.com/jxnblk/styled-system/blob/master/docs/api.md#color)                                                         |
|                    | [fontSize](https://github.com/jxnblk/styled-system/blob/master/docs/api.md#fontsize)                                                       |