WagerSelectionCard
Install
yarn add @ntds/cardImport
import { WagerSelectionCard } 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. |
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> ``` |
decorator? | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | ((card: ReactNode) => Element) | — | 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`) ```tsx <Card decorator={ someCondition && ( <CardDecorator type='warning'> Some stuff, no? </CardDecorator> ) } > This is the content of the card. </Card> ``` |
tw? | TwGroupKeys | — | Tailwind overrides |
children? | ReactNode | — | Can be any valid react node. The card does not apply any style to its contents. |