Pipeline

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/pipeline

NPM

npm install @leafygreen-ui/pipeline

Example

<Pipeline size="xsmall" className="my-pipeline">
  <Stage>$match</Stage>
  <Stage>$addFields</Stage>
  <Stage>$limit</Stage>
</Pipeline>

Properties

| Prop | Type | Description | Default | | ----------- | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | className | string | Adds a className to the class attribute. | '' | | children | node | The content that will render inside of the component. If any nodes other than Stage components are passed in as children, the Pipeline component will automatically wrap them with Stage components. | undefined | | size | 'xsmall', 'small', 'normal', 'large' | Sets the size variant of the Pipeline. | 'xsmall' | | darkMode | boolean | Determines if the component renders in dark theme | false | | ... | native div attributes | Any other props will be spread on the root div element | |

All other props will be spread onto the root element.

Stage

Properties

| Prop | Type | Description | Default | | ----------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | className | string | Adds a className to the class attribute. | '' | | children | node | The content that will render inside of the component. | undefined | | threshold | number | number[] | Either a single number or an array of numbers which indicate at what percentage of the target's visibility, the observer's callback should be executed. | 0.8 | | ... | native li attributes | Any other props will be spread on the root li element | |

The Pipeline component will decorate the child Stage components with the size and darkMode prop that it is supplied with.