Storybook: https://jubilant-umbrella-dd461ca9.pages.github.io
Description
- This is a package which contains the UI component for an event.
- The community-event-teaser provides those elements for rendering
EventTeaser
, EventTopicCardItem
, and EventPromo
- The community-event-teaser also provides export of two util functions:
liveEventToEventTeaserProps
, and initTeaserTracking
Note
- The
initTeaserTracking
is using a reference of oTracking passed in the function. The package is tested and compatible with versions from 4.0.0
to 4.4.0
.
Installation
npm install @financial-times/community-event-teaser
Usage
-
Example of how to use the <EventTeaser/>
import { h, render } from '@financial-times/x-engine';
import { EventTeaser } from "@financial-times/community-event-teaser";
const container = document.querySelector('.some-container-element');
render((
<EventTeaser
imgUrl={"https://ftweekend.live.ft.com/some-cool-image-png"}
title={"FTWeekend Festival"}
standfirst={"Some short description of the event"}
eventUrl={"https://ftweekend.live.ft.com"}
lazyLoadImage={"some__lazy-loading-classname"}
location={"Kenwood House Gardens & Online"}
scheduledStartTime={new Date("2021-09-04T12:00:00.000Z")}
showImage={true}
showBrand={true}
showStandfirst={true}
/>), container)
-
Example of how to use the EventTopicCardItem
import { h, render } from '@financial-times/x-engine';
import { EventTopicCardItem } from "@financial-times/community-event-teaser";
const container = document.querySelector('.some-container-element');
render((
<EventTopicCardItem
title={"FTWeekend Festival"}
eventUrl={"https://ftweekend.live.ft.com"}
location={"Kenwood House Gardens & Online"}
scheduledStartTime={new Date("2021-09-04T12:00:00.000Z")}
/>), container)
Development
Setting up your local environment
- Simply clone this repo, cd into the directory and run:
npm install