@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/community-home-page-slice

2 months ago

2 months ago

2 months ago

4 months ago

4 months ago

4 months ago

4 months ago

9 months ago

9 months ago

10 months ago

11 months ago

11 months ago

10 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

9 months ago

8 months ago

10 months ago

10 months ago

9 months ago

10 months ago

10 months ago

7 months ago

10 months ago

10 months ago

7 months ago

10 months ago

10 months ago

10 months ago

11 months ago

8 months ago

9 months ago

10 months ago

10 months ago

9 months ago

8 months ago

8 months ago

8 months ago

8 months ago

11 months ago

10 months ago

11 months ago

10 months ago

9 months ago

9 months ago

9 months ago

10 months ago

11 months ago

11 months ago

9 months ago

9 months ago

8 months ago

8 months ago

9 months ago

8 months ago

8 months ago

7 months ago

10 months ago

10 months ago

10 months ago

9 months ago

10 months ago

10 months ago

12 months ago

12 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

11 months ago

11 months 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

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year 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

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

1 year ago

2 years ago

1 year ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

2 years ago

2 years ago

1 year ago

2 years ago

1 year ago

1 year ago

2 years 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

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