Group

Group component bundles other components.

Installation

First, make sure you have been through the Getting Started steps of adding Cirrus in your application.

If using Yarn:

yarn add @lightspeed/cirrus-group

Or using npm:

npm i -S @lightspeed/cirrus-group

Usage

Import required styles in your .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

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

<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>