npm package: @lightspeed/cirrus-group
Description: Cirrus Group Component
Author: Lightspeed
Latest version: 8.0.8

# Group

Group component bundles other components.

## Installation

First, make sure you have been through the [Getting Started](https://github.com/lightspeedretail/cirrus#getting-started) steps of adding Cirrus in your application.

If using [Yarn](https://yarnpkg.com/):

```sh
yarn add @lightspeed/cirrus-group
```

Or using [npm](https://www.npmjs.com/):

```sh
npm i -S @lightspeed/cirrus-group
```

## Usage

Import required styles in your `.scss`:

```scss
@import '@lightspeed/cirrus-group/Group.scss';
```

### React Component

#### `<Group>`

| Prop         | Type                                | Description                                                |
| ------------ | ----------------------------------- | ---------------------------------------------------------- |
| `className`  | `string`                            | Custom className to add in addition to the default ones    |
| `children *` | `React.node`                        | The content of the group                                   |
| `type`       | `oneOf(['horizontal', 'vertical'])` | Group type (default: 'horizontal')                         |
| `noSpacing`  | `boolean`                           | Removes the default spacing between items (default: false) |
| `block`      | `boolean`                           | Children scales to parent width (default: false)           |
| `inputBlock` | `boolean`                           | Children inputs scales to parent width (default: false)    |

#### `<GroupAddon>`

| Prop            | Type                                 | Description                                                   |
| --------------- | ------------------------------------ | ------------------------------------------------------------- |
| `children *`    | `React.node`                         | The content of the group addon                                |
| `className`     | `string`                             | Custom className to add in addition to the default ones       |
| `align`         | `oneOf(['left', 'center', 'right'])` | Aligns the text rendered element (default: left)              |
| `verticalAlign` | `oneOf(['top', 'middle', 'bottom'])` | Vertically aligns the text rendered element (default: middle) |

#### Example

```js
import React from 'react';
import Group, { GroupAddon } from '@lightspeed/cirrus-group';
import Button from '@lightspeed/cirrus-button';

const MyComponent = () => (
  <div>
    <Group>
      <Button>first button</Button>
      <Button>second button</Button>
      <Button>third button</Button>
      <GroupAddon>addon</GroupAddon>
    </Group>
  </div>
);

export default MyComponent;
```

### CSS Component

#### Component classes

| Type                             | Class                                           |
| -------------------------------- | ----------------------------------------------- |
| base                             | `.cr-group`                                     |
| no spacing                       | `.cr-group--no-spacing`                         |
| block                            | `.cr-group--block`                              |
| vertical                         | `.cr-group--vertical`                           |
| item                             | `.cr-group__item`                               |
| addon                            | `.cr-group__item--addon`                        |
| addon content                    | `.cr-group-addon__content`                      |
| addon content alignment          | `.cr-group-addon__content--{left|center|right}` |
| addon content vertical alignment | `.cr-group-addon__content--{top|middle|bottom}` |
| input blocks                     | `.cr-group__item--input-block`                  |

### Component HTML

```html
<div class="cr-group cr-group--vertical cr-group--no-spacing">
  <div class="cr-group__item">
    <button type="button" class="cr-button">first button</button>
  </div>
  <div class="cr-group__item">
    <button type="button" class="cr-button">second button</button>
  </div>
  <div class="cr-group__item">
    <button type="button" class="cr-button">third button</button>
  </div>
  <div class="cr-group__item cr-group__item--addon">
    <div class="cr-group-addon__content cr-group-addon__content--left  cr-group-addon__content--center">
      Footer text
    </div>
  </div>
</div>
```