Disclosure

yarn add @vtex/disclosure

Usage

Rendering one disclosure:

<DisclosureLayout>
  <DisclosureTrigger>Trigger</DisclosureTrigger>
  <DisclosureContent>Content</DisclosureContent>
</DisclosureLayout>

Rendering multiple disclosures:

<DisclosureLayoutGroup>
  <DisclosureLayout>
    <DisclosureTrigger>Trigger 1</DisclosureTrigger>
    <DisclosureContent>Content 1</DisclosureContent>
  </DisclosureLayout>
  <DisclosureLayout>
    <DisclosureTrigger>Trigger 2</DisclosureTrigger>
    <DisclosureContent>Content 2</DisclosureContent>
  </DisclosureLayout>
  <DisclosureLayout>
    <DisclosureTrigger>Trigger 3</DisclosureTrigger>
    <DisclosureContent>Content 3</DisclosureContent>
  </DisclosureLayout>

  <DisclosureTriggerGroup>Trigger Group</DisclosureTriggerGroup>
</DisclosureLayoutGroup>

Run the project's Storybook for a full list of examples with yarn storybook.

API

DisclosureTrigger

Prop Name	Type	Description	Default value
show	ReactNode	This prop will be rendered when prompt to show the content	undefined
hide	ReactNode	This prop will be rendered when prompt to hide the content	undefined
as	any	Use this to render a different HTML tag	button
htmlProps	HTMLProps	Use this to pass any props to the HTML element	undefined
children	ReactNode	This prop will be rendered if no show or hide is set	undefined

DisclosureContent

Prop Name	Type	Description	Default value
as	any	Use this to render a different HTML tag	button
htmlProps	HTMLProps	Use this to pass any props to the wrapping HTML element	undefined
children	ReactNode	This prop is the content of the disclosure	undefined

DisclosureLayout

Prop Name	Type	Description	Default value
initialVisibility	enum	visible to have it's content initially open, or hidden to be hidden.	hidden
animated	boolean or number	To perform animations, you must set this to true. It'll enable additional data-* attributes on it's content which you can use as selectors in CSS. It will also ensure that the element will only get hidden when the transition has ended.	false

DisclosureLayoutGroup

Prop Name	Type	Description	Default value
maxVisible	enum	Possible values one it will render only one DisclosureLayout content per group, or many multiple DisclosureLayout's content can be rendered.	one

DisclosureTriggerGroup

Prop Name	Type	Description	Default value
show	ReactNode	This prop will be rendered when prompt to show the content	undefined
hide	ReactNode	This prop will be rendered when prompt to hide the content	undefined
as	any	Use this to render a different HTML tag	button
htmlProps	HTMLProps	Use this to pass any props to the HTML element	undefined
children	ReactNode	This prop will be rendered if no show or hide is set	undefined

DisclosureStateIndicator

Prop Name	Type	Description	Default value
show	ReactNode	This prop will be rendered when prompt to show the content	undefined
hide	ReactNode	This prop will be rendered when prompt to hide the content	undefined