#ClimateEmergency

Collapsible React-only

Open in Storybook Open in Figma

A Collapsible is a user interface element that expands when clicked on. It allows to hide content that is not immediately relevant to the user.
Collapsibles in George exist in a variety of different forms. Their default can be either collapsed - hence the name - or expanded.

Rules For Developers
  • The state of a collapsible (expanded/collapsed) should be stored to display/hide the content when the user returns to that part of the application the page.

Basic Collapsible

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Content preview

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

In a FunctionCard

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

CollapsibleHeader

CollapsibleHeader automatically wraps its children in .g-faded paragraph when they are a string. Any other type gets rendered as-is, this is useful e.g. for headings.

Rules For Developers
  • Wrap complex children in <Paragraph faded /> to align the visuals

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Centered

CollapsibleHeader can be rendered in a centered state. In this case there are no children and only the button is shown, centered.

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.