WagerInstaCard / Dev

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

A url to the graphic to use in the card

In the InstaGame-api response, this maps to the "thumbnail" (small)

Example: //static.everymatrix.com/cms2/base/_casino/C/C74BE5B90FE808E911594DA512CA549E.jpg

Used to override the default accessible label or to deactivate it

undefined (default) = The card will use aria-labelledby and use the id prop to point to the brand, children and status part. NOTE! id must be set! false = Deactivate the label, every part of the card is no available for screen readers string = Maps to aria-label to top element of the card. You must provide the complete representation of the card.

IMPORTANT: Strive to represent the visual contents of the card in the same order they appear visually.

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."

Status for the wager. For example price, prize and "klar til sjekk." If text is provided. The card will dictate the formatting and placement.

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.

By setting this prop true, the card will deactivate the default hover-effects and and shadows.

The hover-effect is activated default for convenience since 90%+ of the usage is with an button or an anchor.

Whether or not to show hover-effect.

Has no effect when flat is set to true.

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.