A set of React components to use in Telegraph particles.

To install:

npm i eip-particle-components -S

To import:

import { Particle, ParticleTitle, Popup, Toggle, Promo } from 'eip-particle-components';

TODO:

propTypes / defaultProps

Components

Particle

This component is a breakout-box style bordered box with bottom gutter around your react component. It includes optional title, subtitle and Promo. Pass your component as the App prop for it to be wrapped in this box.

Props:

particleTitleText (string)
particleSubtitleText (string)
particleComponent (component)
promoComponent (component)

ParticleTitle

This component is styled text for a particle title and subtitle

Props:

particleTitleText (string)
particleSubtitleText (string)
noMargin (boolean)

Promo

This is a Promo component. If in doubt use SveltePromo instead. The 'preset' value uses a bulitin preset that replaces all the other props. The only valid preset value at time of writing is 'coronavirus' which results in:

promoTitle = `Coronavirus Live Tracker`;
promoSubtitle = `Search figures for your local area, track the UK's vaccine rollout, and see rate of infection by country`;
promoCTA = `View now`;
promoLink = `https://www.telegraph.co.uk/news/coronavirus-uk-cases-deaths-world-map-live/?icid=editorial_editorial_inarticlelink_inarticle_CoronavirusEmbed`;

Props:

preset (string)
promoTitle (string)
promoSubtitle (string)
promoCTA (string)
promoLink (url string)

SveltePromo

This is a Promo component. It is slimmer and doesn't have a CTA button The 'preset' value uses a bulitin preset that replaces all the other props. The only valid preset value at time of writing is 'coronavirus' which results in:

promoTitle = `See live coronavirus data`;
promoSubtitle = `Search figures for your local area, track the UK's vaccine rollout, and see rate of infection`;
promoLink = `https://www.telegraph.co.uk/news/coronavirus-uk-cases-deaths-world-map-live/?icid=editorial_editorial_inarticlelink_inarticle_CoronavirusEmbed`;

Props:

preset (string)
promoTitle (string)
promoSubtitle (string)
promoLink (url string)

Popup

This is a popup (hover effect) component. Specify x + y coordinates relative to whichever parent of this component has a position: relative style set.

Props:

x (number)
y (number)
content (component / element)

Toggle

This is a toggle box

Props:

buttons (array of button objects)
    [
        {
            property (string),
            text (string)
        }
    ]
defaultValue (string of button.property value)
clickFunction (function)