WagerExpandableCard / Dev

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)

Select the brand logo to use.

Usage:

import { LogoBrandMap } from '@ntds/logo';

//...

<WagerCard
  brand={LogoBrandMap.Lotto}
  // ...
/>

Supplementary (to the logo) title, typically used to denote the day of the week for the game. For example "Joker Lørag."

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: TheaccessibleLabel should provide all the info of the card!

Don't fade out overflowing description (in `children)

Useful for when you use custom status/decorator that doesn't have a white background.

Tailwind overrides

The label to be used on the button that opens/closes the card details.

The details to render.

Must be provided as a function to not run unnecessarily when not open.

Render-method for choosing witch tag to render

EXAMPLE:

<Card
 render={() => <a href='' {...props} />}
>
  Content can be passed as normal child
</Card>

Note that {...props} will include children

OTHER EXAMPLES:

<Card
 render={() => <p {...props} />}
>
  Content can be passed as normal child
</Card>

Can be any valid react node. The card does not apply any style to its contents.