@lightspeed/cirrus-group

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
addon content vertical alignment	`.cr-group-addon__content--{top
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>