Group

Often, you may find yourself grouping (or wrapping) certain Modules. Lucid provides a <Group> Component to be used in such scenarios. Consider several grouped <Button> Modules:

<Group>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
  <Button>Button 3</Button>
</Group>

Styles can be provided to the Wrapper Component from child Modules, so long as all children are the same Module:

const styles = {
  backgroundColor: 'blue',
  color: 'white',
  padding: '10px',

  group: {
    position: 'relative',
    marginBottom: '20px'
  }
}

const Button = (props) => (
  <Module styles={styles}>{props.children}</Module>
);

export default Button;

You can utilise the usual features of Lucid on the Group Component:

<Group large>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
  <Button>Button 3</Button>
</Group>

const styles = {
  backgroundColor: 'blue',
  color: 'white',
  padding: '1em',
  fontSize: '1em',

  group: ({ state }) => ({
    position: 'relative',
    fontSize: state.large ? '1.4em' : '1em',
    marginBottom: state.large ? '40px' : '20px'
  })
}

const Button = (props) => (
  <Module styles={styles}>{props.children}</Module>
);

export default Button;

...or alternatively:

const styles = ({ context }) => ({
  backgroundColor: 'blue',
  color: 'white',
  padding: '10px',
  fontSize: '1em',

  group: {
    position: 'relative',
    fontSize: context.group.large ? '1.4em' : '1em',
    marginBottom: context.group.large ? '40px' : '20px'
  }
});

...