@financial-times/community-event-asset v0.1.11

Community-event-asset

Storybook: https://symmetrical-winner-6cdae48b.pages.github.io/

Description

• This is a package which contains UI components, as well as functions that can be used to do functionalities related to event assets
• It exports EventAssetCard component for rendering
• It also exports those functions/models: initEventAssetCardTracking, getEventAssetsToPromote, and EventAssetCardProps

Note

• The initEventAssetCardTracking is using a reference of oTracking passed in the function. The package is tested and compatible with version 4.5.0.

Installation

npm install @financial-times/community-event-asset

Usage

• Example of how to use EventAssetCard.

It accepts properties defined in EventAssetCardProps model in the current package.

import { h, render } from "@financial-times/x-engine";
import { EventAssetCard } from "@financial-times/community-event-asset";

<EventAssetCard
  eventId="00000000-0000-0000-0000-000000000001"
  eventTitle="Event title"
  eventSubtitle="Event subtitle"
  targetUrl="https://ft.com"
  purchaseUntilDate={new Date("2021-09-04T12:00:00.000Z")}
  imgUrl="https://image-url"
  seriesTitle="FTWeekend Festival"
  componentPosition="10"
/>;

To include EventAssetCard scss:

@import "@financial-times/community-event-asset/main";

@include eventAssetCard();

• Example of how to use getEventAssetsToPromote.

import {
  getEventAssetsToPromote,
  EventAssetCardProps,
} from "@financial-times/community-event-asset";

// The below variable is map containing annotation id, a uuid value, along with its numeric weight. This map will be used to compare events. Consumer of this package is responsible to compose this map based on the usage context
const annotationsWeightingsMap = {
  "00000000-0000-0000-0000-111111111111": 3,
  "00000000-0000-0000-0000-222222222222": 2,
};

const numberOfEventAssetsToPickForPromotion = 3;
const eventAssetsToPromote = getEventAssetsToPromote(
  annotationsWeightingsMap,
  numberOfEventAssetsToPickForPromotion
);

// Now you can use use any of eventAssetsToPromote element as argument to EventAssetCard
<EventAssetCard {..eventAssset1}>

Development

Setting up your local environment

• Simply clone this repo, cd into the directory and run:

npm install

Sync live events

You need to have a valid content API key to access live events at https://api.ft.com

export CONTENT_API_KEY={PROD_CONTENT_API_KEY}

npm run sync-live-events