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.

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

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.

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