Community-event-teaser

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