Group

Description

Group is a component to group items with padding using css flexbox.

See live demos on storybook

Storybook Group Demos

Install bundle from npm-e

npm i @element-public/react-components @element-public/themes

Optional: install the component individually

npm i @element-public/react-group @element-public/themes

Open ~/.npmrc in an editor and add the following line to enable the @element-public scope:

@element-public:registry=https://npm.platforms.engineering

Troubleshooting

See below if you have never installed a package from Bayer's npm-enterprise or run into the following error:

npm ERR! code E401
npm ERR! Unable to authenticate, your authentication token seems to be invalid.
npm ERR! To correct this please trying logging in again with:
npm ERR!     npm login

Setup an access token

See the devtools npm-e guide to learn how to create an access token if this is the first time you are using a npm-e package at Bayer or you do not have a line that starts with the following in your ~/.npmrc file:

//npm.platforms.engineering/:_authToken=

Notes

Group allows users to organize multiple components and treat them as a single unit. Doing so ensures that the components will be arranged in a certain way, with uniform spacing between them, and be treated as a single item.

Usage

Groups are typically used to combine smaller components. A common use case for Group is to create a Group of Textfields. An example of this could be in creating a fixed, evenly spaced form where a user is to fill in data in several inputs (ie. first name, last name, job title).

Group Props

| Name | Type | Default | Required | Description | | -------------- | ------- | ------------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | direction | string | 'horizontal' | false | The grouping direction.Accepted Values: horizontal, vertical, horizontal-reverse, vertical-reverse | | fullWidth | boolean | false | false | Sets the Group width to be 100%. | | gap | string | 'standard' | false | How much spacing between items. Dense is 8p, standard is 16px and airy is 24px.Accepted Values: dense, standard, airy, none | | primaryAlign | string | 'start' | false | Alignment along the primary axis. 'For horizontal grouping this means the x-axis positioning, for vertical, this means the y-axis positioning.Equivalent to flexbox 'justify-content.Accepted Values: start, end, center, space-evenly, space-between, space-around | | secondaryAlign | string | 'baseline' | false | Alignment along the secondary axis. For horizontal grouping this means the y-axis positioning, for vertical, this means the x-axis positioning.Equivalent to flexbox 'align-items.Accepted Values: start, end, center, stretch, baseline |

Group Deprecated Props

| Name | Type | Default | Required | Deprecated | Description | | ------- | ------ | --------- | -------- | ---------------------------------------- | ------------------------------------------------------------------------------- | | padding | string | undefined | false | Renamed for improved clarity. See gap. | How much spacing between items. Dense is 8p, standard is 16px and airy is 24px. |

Group Render Props

| Name | Type | Default | Required | Description | | -------- | --------------- | ------- | -------- | ----------------------------------------------------------------------- | | children | React.ReactNode | null | false | Children to be rendered. Expects multiple components of a similar type. |