@vtex/styleguide
Version:
> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))
424 lines (397 loc) • 13.5 kB
Markdown
#### Collapsibles are containers that allows an toggling the display of an initially hidden content. Its main objective is to hide from view detailed information that might not be necessarily.
### 👍 Dos
- Do make your header as complex as you want, but avoid nesting interactive elements.
- Do nest collapsibles if needed, but avoid too many levels.
### 👎 Don'ts
- Don't hide information that you consider critical for the user in that given moment. For the same reason, it doesn't make sense to initialize a collapsible in the expanded state.
- Avoid using the right-aligned variation with widths larger than around 600px or if affordance might be at stake.
- Avoid using the muted variation if affordance is not well secured.
"Read-more-like" example
```js
const Input = require('../Input').default
initialState = { isOpen: false }
;<div className="w-50">
<div className="mb3">
<Input label="Name" />
</div>
<div className="mb3">
<Input label="Email" prefix={<span>@</span>} />
</div>
<div className="mb5 mt5">
<Collapsible
header={
<span className="c-action-primary hover-c-action-primary fw5">
Advanced settings
</span>
}
onClick={e => setState({ isOpen: e.target.isOpen })}
isOpen={state.isOpen}>
<div className="mt4">
<div className="mb3">
<Input label="Surname" />
</div>
<div className="mb3">
<Input label="Nickname" />
</div>
</div>
</Collapsible>
</div>
</div>
```
Custom Caret Color Example
```js
initialState = { isOpen1: false, isOpen2: false, isOpen3: false }
;<div>
<div className="mb5">
<Collapsible
header={<span>Here goes your base header</span>}
onClick={e => setState({ isOpen1: e.target.isOpen })}
isOpen={state.isOpen1}
caretColor="base">
<div className="mt4">Here goes your content</div>
</Collapsible>
</div>
<div className="mb5">
<Collapsible
header={<span>Here goes your primary header</span>}
onClick={e => setState({ isOpen2: e.target.isOpen })}
isOpen={state.isOpen2}
caretColor="primary">
<div className="mt4">Here goes your content</div>
</Collapsible>
</div>
<Collapsible
header={<span>Here goes your muted header</span>}
onClick={e => setState({ isOpen3: e.target.isOpen })}
isOpen={state.isOpen3}
caretColor="muted">
<div className="mt4">Here goes your content</div>
</Collapsible>
</div>
```
Navigation bar example
```js
const PageBlock = require('../PageBlock').default
initialState = { isOpen1: false, isOpen2: false, isOpen3: false }
;<div>
<div className="w5">
<div className="mt5">
<Collapsible
header={
<div className="c-on-base hover-c-emphasis">
<span>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M7 8H1C0.4 8 0 8.4 0 9V15C0 15.6 0.4 16 1 16H7C7.6 16 8 15.6 8 15V9C8 8.4 7.6 8 7 8Z"
fill="currentColor"
/>
<path
d="M11 4H2V6H10V14H12V5C12 4.4 11.6 4 11 4Z"
fill="currentColor"
/>
<path
d="M15 0H6V2H14V10H16V1C16 0.4 15.6 0 15 0Z"
fill="currentColor"
/>
</svg>
</span>
<span className="ml5 fw5">Catalog</span>
</div>
}
align="right"
onClick={e => setState({ isOpen1: e.target.isOpen })}
isOpen={state.isOpen1}
caretColor="muted">
<div className="ml6 mt4">
<a href="#" className="mt3 c-muted-1 link db hover-c-link">
Products and SKUs
</a>
<a href="#" className="mt3 c-muted-1 link db hover-c-link">
Categories
</a>
<a href="#" className="mt3 c-muted-1 link db hover-c-link">
Brands
</a>
<a href="#" className="mt3 c-muted-1 link db hover-c-link">
Import and export
</a>
<a href="#" className="mt3 c-muted-1 link db hover-c-link">
Reports
</a>
</div>
</Collapsible>
</div>
<div className="mt5">
<Collapsible
header={
<div className="c-on-base hover-c-emphasis">
<span>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16 5V3C16 2.4 15.6 2 15 2H1C0.4 2 0 2.4 0 3V5H16Z"
fill="currentColor"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0 7V13C0 13.6 0.4 14 1 14H15C15.6 14 16 13.6 16 13V7H0ZM6 11H2V10H6V11ZM12 11H14V10H12V11Z"
fill="currentColor"
/>
</svg>
</span>
<span className="ml5 fw5">Payments</span>
</div>
}
align="right"
onClick={e => setState({ isOpen2: e.target.isOpen })}
isOpen={state.isOpen2}
caretColor="muted">
<div className="ml6 mt4">
<a href="#" className="mt3 c-muted-1 link db hover-c-link">
Transactions
</a>
<a href="#" className="mt3 c-muted-1 link db hover-c-link">
Bank conciliation
</a>
<a href="#" className="mt3 c-muted-1 link db hover-c-link">
Gift card
</a>
<a href="#" className="mt3 c-muted-1 link db hover-c-link">
Settings
</a>
</div>
</Collapsible>
</div>
<div className="mt5">
<Collapsible
header={
<div className="c-on-base hover-c-emphasis">
<span>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16 12H5.8C5.5 11.2 4.8 10.5 4 10.2V1C4 0.4 3.6 0 3 0H0V2H2V10.2C0.8 10.6 0 11.7 0 13C0 14.7 1.3 16 3 16C4.3 16 5.4 15.2 5.8 14H16V12Z"
fill="currentColor"
/>
<path
d="M7 10H14C14.6 10 15 9.6 15 9V4C15 3.4 14.6 3 14 3H7C6.4 3 6 3.4 6 4V9C6 9.6 6.4 10 7 10Z"
fill="currentColor"
/>
</svg>
</span>
<span className="ml5 fw5">Inventory & shipping</span>
</div>
}
align="right"
onClick={e => setState({ isOpen3: e.target.isOpen })}
isOpen={state.isOpen3}
caretColor="muted">
<div className="ml6 mt4">
<a href="#" className="mt3 c-muted-1 link db hover-c-link">
Dashboard
</a>
<a href="#" className="mt3 c-muted-1 link db hover-c-link">
Shipping
</a>
<a href="#" className="mt3 c-muted-1 link db hover-c-link">
Inventory
</a>
<a href="#" className="mt3 c-muted-1 link db hover-c-link">
Pickup points
</a>
<a href="#" className="mt3 c-muted-1 link db hover-c-link">
Settings
</a>
</div>
</Collapsible>
</div>
</div>
</div>
```
FAQ accordion example
```js
const PageBlock = require('../PageBlock').default
const Box = require('../Box').default
initialState = { openQuestion: null }
function toggleAccordion(questionNbr) {
return e =>
setState({
openQuestion: state.openQuestion !== questionNbr ? questionNbr : null,
})
}
;<div>
<div className="bg-muted-5 pa8">
<div className="w-100">
<Box>
<Collapsible
header={
<div className="pv6 hover-c-on-action-secondary">
What is a sub-acquirer?
</div>
}
onClick={toggleAccordion(1)}
isOpen={state.openQuestion === 1}>
<div className="bg-muted-5 pa6">
<p className="ma0">
A <strong>sub-acquirer</strong> is a company that processes
payments and transmits the generated data to the other players
involved in the payment flow. Its role is similar to that of an
acquirer, but it doesn't completely replace it. Thus, it can be
understood as a kind of intermediary player between acquirer and
store.
</p>
</div>
</Collapsible>
<hr className="ma0 bb bb-0 b--black-10" />
<Collapsible
header={
<div className="pv6 hover-c-on-action-secondary">
What is the connector?
</div>
}
onClick={toggleAccordion(2)}
isOpen={state.openQuestion === 2}>
<div className="bg-muted-5 pa6">
<p className="ma0">
Connectors are communication protocols that your store needs to
use to enable data transmission between itself and acquirers,
sub-acquirers, or gateways.
</p>
<p className="mt7 mb0">
For example, for your web site to offer a particular payment
method to your customers, you need to enable the connector that
will communicate with the gateway responsible for the processing.
</p>
</div>
</Collapsible>
<hr className="ma0 bb bb-0 b--black-10" />
<Collapsible
header={
<div className="pv6 hover-c-on-action-secondary">
What is the PCI SSC?
</div>
}
onClick={toggleAccordion(3)}
isOpen={state.openQuestion === 3}>
<div className="bg-muted-5 pa6">
<p>
PCI Security Standards Council is a global forum open to
continuous development, enhancement, storage, dissemination and
implementation of data protection security standards.
</p>
<p>
It was founded by American Express, Discover Financial Services,
JCB International, MasterCard and Visa Inc.
</p>
</div>
</Collapsible>
<hr className="ma0 bb bb-0 b--black-10" />
<Collapsible
header={
<div className="pv6 hover-c-on-action-secondary">
What is a transaction?
</div>
}
onClick={toggleAccordion(4)}
isOpen={state.openQuestion === 4}>
<div className="bg-muted-5 pa6">
<p>
The movement that money makes when exchanged for a product or
service is what we call <strong>transaction</strong>. Thus,
payment is only one step in a process that involves an intense
flow of information exchange between several parties: gateways,
sub-acquirers and/or acquirers, brands and issuing banks.
</p>
<p>
In a VTEX store, a transaction starts every time a user chooses a
payment condition and closes their order. From there, the purchase
data is sent for the validation of each of the members involved in
this process. You can track each step of the transaction flow on
the Payments. With this module, you accurately visualize the
status of a payment through each status.
</p>
</div>
</Collapsible>
</Box>
</div>
</div>
</div>
```
Example of popup menus inside the Collapsible
```js
const Select = require('../EXPERIMENTAL_Select/index.js').default
initialState = { isOpenNotHidden: false, isOpenHidden: false }
const options = [
{
value: 'first-option',
label: 'First Option',
},
{
value: 'second-option',
label: 'Second Option',
},
]
;<div className="w-50">
<div className="pb3">
<Collapsible
header={
<span className="c-action-primary hover-c-action-primary fw5">
Collapsible with overflow hidden enabled
</span>
}
onClick={e => setState({ isOpenHidden: e.target.isOpen })}
isOpen={state.isOpenHidden}>
<div className="mt4">
<div className="mb3">
<Select
label="Label"
options={options}
multi={false}
onChange={values => {
console.log(
`[Select] Selected: ${JSON.stringify(values, null, 2)}`
)
}}
/>
</div>
</div>
</Collapsible>
</div>
<Collapsible
header={
<span className="c-action-primary hover-c-action-primary fw5">
Collapsible with overflow hidden disabled
</span>
}
isOverflowHidden={false}
onClick={e => setState({ isOpenNotHidden: e.target.isOpen })}
isOpen={state.isOpenNotHidden}>
<div className="mt4">
<div className="mb3">
<Select
label="Label"
options={options}
multi={false}
onChange={values => {
console.log(`[Select] Selected: ${JSON.stringify(values, null, 2)}`)
}}
/>
</div>
</div>
</Collapsible>
</div>
```