@navinc/base-react-components
Version:
Nav's Pattern Library
51 lines (40 loc) • 1.56 kB
Markdown
Wrapper to make things look like a card. Any children elements will exist inside the `<Body>` of the card and should style themselves.
#### Props:
Required:
- `buttonCopy`: string
- `children`: element(s), any children components for the `<Body>`
- `labelCopy`: string
- `titleCopy`: string
Optional:
- `kebabMenuItems`: array, if null then it will default to showing just the 'Hide' menu item. If an empty array it will hide the kebab menu. If you have an item with the label 'Hide' in your array then it will use the Card's built in function to hide the card along with what ever function you pass. See some examples below.
- `onBack`: function, will show the back button if exists
- `onDismiss`: function
- `onNext`: function, will show the footer if this or `onBack` exist
- `onToggleKebab`: function
- `onUndo`: function
##### kebabMenuItems
- `null`: (default) will show kebab with only the hide item.
- `[]`: an empty array will hide the kebab menu.
- Custom with 'Hide'
```
[
{
label: 'Hide',
icon: 'https://dxkdvuv3hanyu.cloudfront.net/design-assets/icons/hide.svg',
onClick: () => {} // Note: this will run both this onClick function along with the built in togglehideCard function
},
{
label: 'Do Something',
icon: 'https://dxkdvuv3hanyu.cloudfront.net/design-assets/icons/hide.svg',
onClick: () => {} // Your function
}
]
```
- Custom without 'Hide'
```
[{
label: 'Do Something',
icon: 'https://dxkdvuv3hanyu.cloudfront.net/design-assets/icons/hide.svg',
onClick: () => {} // Your function
}]
```