@vtex/disclosure

``` yarn add @vtex/disclosure ```

Usage no npm install needed!

<script type="module">
  import vtexDisclosure from 'https://cdn.skypack.dev/@vtex/disclosure';
</script>

README

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