ExpansionPanel

Description

Expansion panels are containers that can be connected to a larger surface, such as a content block or card, or can live within a list. They contain information and actions that are not essential to exist at the highest level of the user interface of an application. ExpansionPanels require ExpansionTrigger and ExpansionContent sub-component to be used. The ExpansionIcon indicator may optionally be used.

See live demos on storybook

Storybook ExpansionPanel 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-expansion-panel @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

Expansion Panel has been implemented in an unopinionated way that allows you to have greater flexibility in it's use. Nearly any tag or component can be used as an expansion panel.

The Expansion Panel is composed of 4 components:

• ExpansionPanel
  • The root component within which all related components will be placed
• ExpansionTrigger
  • This will define the clickable area
• ExpansionContent
  • The content to be displayed or hidden.
• ExpansionIcon
  • An optional customizable icon which will indicate the open or closed state for the given ExpansionContent

To enable each pair of ExpansionTrigger and ExpansionContent components to work together you will need to provide an expansionId. This can be any valid string or number.

Expansion Panel Props

| Name | Type | Default | Required | Description | | --------- | ------- | ------- | -------- | ------------------------------------- | | accordion | boolean | false | false | Only one panel will be open at a time |

Expansion Panel Render Props

| Name | Type | Default | Required | Description | | -------- | --------------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------- | | children | React.ReactNode | null | false | Content to be rendered. Expected to be ExpansionTrigger or ExpansionContent, though any other valid components or markup may be used. |

Expansion Panel Events

| Name | Default | Required | Params | Description | | ---------- | --------- | -------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | onContract | undefined | false | | Fired when a trigger is clicked and the content is contracted. Note, in the case of an accordion, this will only fire for the panel that was clicked. Returns expansionId | | onExpand | undefined | false | | Fired when a trigger is clicked and the content is expanded. Note, in the case of an accordion, this will only fire for the panel that was clicked. Returns expansionId |

Expansion Content Props

| Name | Type | Default | Required | Description | | ----------- | ------------------------------------------ | --------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | className | string | undefined | false | The css class name to be passed through to the component markup. | | defaultOpen | boolean | false | false | The content will display in the open (visible) state by default. If the ExpansionPanel is set to accordion, only the first item will be visible if more than one ExpansionContent is marked as open by default. | | expansionId | string|number | null | true | The unique id of the expansion panel, this must match the expansionId of the ExpansionTrigger and ExpansionIcon. | | maxHeight | string | undefined | false | Optionally override the automatically calculated content height. Must be specified in px. | | open | boolean | undefined | false | For explicit control of the open state. | | style | object | null | false | Passthrough style object. | | tag | string|React.ElementType|React.Component | 'div' | false | The root content HtmlElement. Expects a block element that can receive a height (spans will not work). If set to null, no HtmlElement will be inserted and the class and style properties will be added to the first child (this is for backwards compatibility.) |

Expansion Content Render Props

| Name | Type | Default | Required | Description | | -------- | --------------- | ------- | -------- | ------------------------------------------------------------------- | | children | React.ReactNode | null | true | Content to be rendered inside the banner. Accepts any valid markup. |

Expansion Content Breaking Changes

| Description | | --------------------------------------------------------------------------------------------------------------------- | | ExpansionContent: ExpansionContent now renders a div around the content. The may be overridden with the tag prop. |

Expansion Icon Props

| Name | Type | Default | Required | Description | | ----------- | ----------------------- | ------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | className | string | undefined | false | The css class name to be passed through to the component markup. | | expanded | boolean | undefined | false | For explicit control of the icon's toggle state. | | expansionId | string|number | null | true | The unique id of the expansion panel, this must match the expansionId of the ExpansionTrigger and ExpansionIcon. | | lessIcon | string|React.ReactNode | 'expand_less' | false | Accepts the name of any valid material icon (see Icon component documentation for a list of valid icons). It will be toggled with moreIcon. | | moreIcon | string|React.ReactNode | 'expand_more' | false | Accepts the name of any valid material icon (see Icon component documentation for a list of valid icons). It will be toggled with lessIcon. |

Expansion Trigger Props

| Name | Type | Default | Required | Description | | ----------- | ------------------------------------------ | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | className | string | undefined | false | The css class name to be passed through to the component markup. | | disabled | boolean | null | false | Prevent the trigger from being activated. | | expansionId | string|number | null | true | The unique id of the expansion panel, this must match the expansionId of the ExpansionTrigger and ExpansionIcon. | | tag | string|React.ElementType|React.Component | 'div' | false | The trigger container element. If set to null, no HtmlElement will be inserted and the css class will be added to the first child (this is for backwards compatibility.) |

Expansion Trigger Render Props

| Name | Type | Default | Required | Description | | -------- | --------------- | ------- | -------- | ------------------------------------------------------------------- | | children | React.ReactNode | null | false | Most typically a Button, IconButton or similar clickable component. |

Expansion Trigger Events

| Name | Default | Required | Params | Description | | ---------- | ------- | -------- | ------ | ----------------------------------------------------------------------------------------- | | onClick | null | false | | Will be fired when the trigger is clicked. Returns the expansionId and open state. | | onContract | null | false | | Will be fired when the content panel is contracted. Returns expansionId and open state. | | onExpand | null | false | | Will be fired when the content panel is expanded. Returns expansionId and open state. |