@financial-times/community-event-teaser NPM

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

@financial-times/community-event-client @financial-times/community-event-common date-fns date-fns-tz

@everything-registry/sub-chunk-323 @financial-times/n-magnet @financial-times/community-home-page-slice

9 months ago

9 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

12 months ago

11 months ago

12 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago