WagerSelectionCard / Dev

Used for the id for the card and internally as a prefix for the brand part, children part and the status part.

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.

Decorate/wrap the card inside a given container.

Makes it easier to selectively wrap the card inside another for showing statuses or make the card expandable.

Typically used with the CardDecorator (imported from directly from @ntds/card)

<Card
  decorator={
    someCondition && (
      <CardDecorator type='warning'>
         Some stuff, no?
      </CardDecorator>
    )
  }
>
  This is the content of the card.
</Card>

Tailwind overrides

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.