WagerExpandableCard
Install
yarn add @ntds/cardImport
import { WagerExpandableCard } from '@ntds/card';Props
| Prop | Type | Default | Description |
|---|---|---|---|
id? | string | — | Used for the id for the card and internally as a prefix for the brand part, children part and the status part. Required id for internal accessibility mechanisms (aria-labelledby and aria-describedby) |
brand | LogoBrandKey | — | Select the brand logo to use. Usage: ```ts import { LogoBrandMap } from '@ntds/logo'; //... <WagerCard brand={LogoBrandMap.Lotto} // ... /> ``` |
subtitle? | ReactNode | — | Supplementary (to the logo) title, typically used to denote the day of the week for the game. For example "Joker Lørag." |
statusIsInteractive? | boolean | — | If set to true the status will not be hidden from assistive technologies Use this if you need to use button or input elements in the status part. This prevent touch VoiceOver to select text that should already be read out based on the ``accessibleLabel. Remember: The`accessibleLabel` should provide all the info of the card! |
noFadeOutDescription? | boolean | — | Don't fade out overflowing description (in `children) Useful for when you use custom status/decorator that doesn't have a white background. |
render? | (props) => ReactNode | — | Render-method for choosing witch tag to render EXAMPLE: ```tsx <Card render={() => <a href='' {...props} />} > Content can be passed as normal child </Card> ``` Note that `{...props}` will include `children` OTHER EXAMPLES: ```tsx <Card render={() => <p {...props} />} > Content can be passed as normal child </Card> ``` |
tw? | TwGroupKeys | — | Tailwind overrides |
children? | ReactNode | — | Can be any valid react node. The card does not apply any style to its contents. |
toggleButtonLabel | ReactNode | — | The label to be used on the button that opens/closes the card details. |
details | () => ReactNode | — | The details to render. Must be provided as a function to not run unnecessarily when not open. |