eip-particle-components v0.3.4
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)
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