npm package: @mycujoo/mcls-components-card
Description: ## Card components
Latest version: 1.0.0-rc.11

# MCLS Components - Card

## Card components

Cards are a set of highly configurable components that are available to be used and passed to sliders, grids or columns.
Each card is meant to be better suited for a different purpose, design or event type.

### Match Card

This card is intended to be used for Match-type events where there is or will be a score.

MatchCard receives `data` object directly from the parent slider or grid.

It requires to be passed at least `dataPaths` object which maps the path from the event `data` object to the different fields that are displayed (team names, scores, logos, event start time, id, etc). Clicking on the card may be handled through a function passed as `onClick` or as a `<a>` HTML element. `href` value for the card is provided through `hrefBasePath`. This string needs to include `{id}` in it, where the card id will be 'injected' automatically into it. As an example `hrefPath="/events/{id}"`

The basic structure of the card consists of an optional thumbnail, a body and an optional action section which can be customized through `config` object.

Match Card relies on MCLS Events status and will display different visual behaviours based on the current status of the event. For example, live events show scores while upcoming events display event start time, and the default styles and label for the card action buttons is different for each event status. This can be overriden through config.

```tsx
import { MatchCard } from "@mycujoo/mcls-components-card";
import { Slider } from "@mycujoo/mcls-components-slider";

const dataPaths = {
  homeTeamLogo: 'metadata.home_team.logo',
  homeTeamName: 'metadata.home_team.name',
  homeTeamShortCode: 'metadata.home_team.abbreviation',
  homeTeamScore: 'metadata.home_team.score',
  awayTeamLogo: 'metadata.away_team.logo',
  awayTeamName: 'metadata.away_team.name',
  awayTeamShortCode: 'metadata.away_team.abbreviation',
  awayTeamScore: 'metadata.away_team.score',
  eventVenue: 'location.physical.venue',
  startTime: 'start_time',
  status: 'status',
  thumbnailUrl: 'thumbnail_url',
  viewers: 'viewers',
  leagueName: 'metadata.league_name',
  id: "id"
}

const card = <MatchCard
  dataPaths={dataPaths}
  onClick={handleCardClick}
  config={{
    size: 'm',
    borderRadius: '16px',
    thumbnail: {
      icon: true,
      viewers: true,
    },
    action: {
      buttonConfig: {
        position: 'left',
        text: 'Custom text',
        borderRadius: '4px',
        type: 'outlined',
      },
    },
    showSeparator: true,
    primaryColor: '#FFF',
    showTag: true,
  }}
/>

import { Slider } from '@mycujoo/mcls-components-slider';

// Example of slider usage
<Slider
    data={events}
    title={"My events"}
    config={sliderConfig}
    card={card}
    lang="en"
/>
```

### Simple Card

This card is intended to be used for all type of events. It's less specialised and will only display custom title, subtitle, background and right side of title short label (useful for any other possible properties like duration)

It requires to be passed at least `dataPaths` object which maps the path from the event `data` object to the different fields that are displayed (team names, scores, logos, event start time, id, etc). Clicking on the card may be handled through a function passed as `onClick` or as a `<a>` HTML element. `href` value for the card is provided through `hrefBasePath`. This string needs to include `{id}` in it, where the card id will be 'injected' automatically into it. As an example `hrefPath="/events/{id}"`.

```tsx
import { SimpleCard } from "@mycujoo/mcls-components-card";

const dataPaths = {
    title: 'title',
    titleRight: 'durationLabel',
    thumbnailUrl: 'cover.absoluteUrl',
    subtitle: 'description',
    id: 'id',
};

const card = <SimpleCard
  dataPaths={dataPaths}
  onClick={handleCardClick}
  config={{
    size: 'm',
    openInNewWindow: true,
    textColor: '#FAF',
    bgColor: '#300'
    borderRadius: '16px',
    thumbnail: {
      icon: true,
      viewers: true,
    },
    action: {
      buttonConfig: {
        position: 'left',
        text: 'Custom text',
        borderRadius: '4px',
        type: 'outlined',
      },
    },
    showSeparator: true,
    primaryColor: '#FFF',
    showTag: true,
  }}
/>

import { Slider } from '@mycujoo/mcls-components-slider';

// Example of slider usage
<Slider
    data={events}
    title={"My events"}
    config={sliderConfig}
    card={card}
    lang="en"
/>
```

#### Card Placeholder

Preload card component useful for showing loading card state.

```tsx
import { CardPlaceholder } from "@mycujoo/mcls-components-card";

<CardPlaceholder 
  size="m"
  height="100px"
  width="500px"
  bgColor="#000"
  border="1px solid #111"
  borderRadius="5px"
  boxShadow=""
  className="custom class names"
/>

```