Promo

Error rendering component

Unknown plugin "module-resolver" specified in "base" at 0, attempted to resolve relative to "/home/circleci/wellcomecollection.org/common/views/components/Promo"

<!-- Default -->


<!-- Series Article -->


<!-- Gallery -->


<!-- Audio -->


<!-- Video -->


<!-- Comic -->


<!-- Standalone -->


<!-- Lead -->


<!-- Regular -->


<!-- With Chapters -->


<!-- Standalone With Chapters -->


// @flow

import {spacing, font} from '../../../utils/classnames';
import {striptags} from '../../../utils/striptags';
import {truncate} from '../../../utils/truncate';
import Icon from '../Icon/Icon';
import getIconForContentType from '../../../utils/get-icon-for-content-type';
import getSeriesTitle from '../../../utils/get-series-title';
import Image from '../Image/Image';
import type {Props as ImageProps} from '../Image/Image';
import type {ContentType} from '../../../model/content-type';
import type {Weight} from '../../../model/weight';
import type {EditorialSeries} from '../../../model/editorial-series';
import {Fragment} from 'react';
import ChapterIndicator from '../ChapterIndicator/ChapterIndicator';

function partOf(commissionedSeries, seriesTitle) {
  return (
    <span className={font({s: 'HNM5'})}>
      <span className={font({s: 'HNL5'})}>Part of</span>{' '}
      {commissionedSeries ? commissionedSeries.name : seriesTitle}
    </span>
  );
}

function contentTypeLabel(contentType, commissionedSeries) {
  return (
    <span className={`line-height-1 bg-yellow absolute promo__content-type ${font({s: 'HNM5'})} ${spacing({s: 1}, {padding: ['top', 'bottom', 'left', 'right']})}`}
      aria-hidden='true'>{commissionedSeries ? 'Digital Story' : contentType.charAt(0).toUpperCase() + contentType.slice(1)}</span>
  );
}

function headingText(title, contentType) {
  if (title) {
    return title;
  } else {
    return 'Coming soon…';
  }
}

type Props = {|
  url?: string,
  id?: string,
  contentType: ContentType,
  image?: ImageProps,
  series?: EditorialSeries[],
  positionInSeries?: number,
  weight?: Weight,
  description?: string,
  sizes?: string,
  headingLevel?: string,
  datePublished?: string,
  title?: string
|}

const Promo = ({
  url,
  id,
  contentType,
  image,
  series,
  positionInSeries,
  weight,
  description,
  sizes,
  headingLevel,
  datePublished,
  title
}: Props) => {
  const PromoTag = url ? 'a' : 'span';
  const HeadingTag = headingLevel || 'h2';
  const seriesTitle =  series && getSeriesTitle(series);
  const commissionedSeries = series && series.find(item => item.commissionedLength);
  const iconName = getIconForContentType(contentType);

  return (
    <PromoTag id={id}
      data-component='ArticlePromo'
      data-track-event={`${JSON.stringify({
        category: 'component',
        action: 'ArticlePromo:click'})
      }`}
      href={url}
      className={`promo promo--${contentType} ${!url ? 'promo--surrogate' : ''} ${weight === 'lead' ? 'promo--lead' : ''}`}>
      <div className={`promo__image-container ${spacing({s: 2}, {margin: ['bottom']})}`}>
        {image
          ? <Image
            width={image.width}
            contentUrl={image.contentUrl}
            lazyload={true}
            sizesQueries={sizes}
            clipPathClass={series && commissionedSeries && positionInSeries && url ? 'promo__clip-path--chapters-third' : ''}
            alt='' />
          : <div className='promo__image-surrogate'><div className='promo__image-surrogate-inner'></div></div>
        }

        {commissionedSeries && positionInSeries && url &&
          <ChapterIndicator
            position={positionInSeries}
            color={commissionedSeries.color}
            commissionedLength={commissionedSeries.commissionedLength} />
        }

        {contentType &&
          <Fragment>
            {contentTypeLabel(contentType, commissionedSeries)}
          </Fragment>
        }

        {iconName &&
          <div className={`promo__icon-container ${font({s: 'HNL6'})}`}>
            <Icon name={iconName} />
          </div>
        }
      </div>
      <div className={`promo__description`}>
        <div className='promo__heading'>
          <HeadingTag className={`promo__title ${spacing({s: 0}, {margin: ['top']})} ${font({s: 'WB5'})}`}>
            {headingText(title, contentType)}
          </HeadingTag>
        </div>

        {description &&
          <span className={`inline-block ${font({s: 'HNL4'})} ${spacing({s: 1}, {margin: ['bottom']})}`}>{truncate(striptags(description), 140)}</span>
        }

        {(commissionedSeries || seriesTitle) &&
          <span className={`block font-charcoal ${spacing({s: 1}, {margin: ['bottom']})} ${font({s: 'HNL6', l: 'HNL5'})}`}
            aria-hidden='true'>
            {partOf(commissionedSeries, seriesTitle)}
          </span>
        }
      </div>
    </PromoTag>
  );
};

export default Promo;
/* Default */
{
  "contentType": "article",
  "image": {
    "type": "picture",
    "contentUrl": "https://placehold.it/1600x900",
    "width": 1600,
    "height": 900
  },
  "title": "Animating the body",
  "url": "/articles/animating-the-body",
  "description": "<p>We recently held a weekend of hands-on creative activities and thoughtful conversations exploring how we communicate through posture, gesture and facial expression. One of these activities included re-animating a film from Wellcome’s archive of moving images, featuring a range of body language. Dan Brown from Mash Cinema tells us more.  When I was asked to develop a [&hellip;]</p>\n"
}

/* Series Article */
{
  "contentType": "series",
  "image": {
    "type": "picture",
    "contentUrl": "https://placehold.it/1600x900",
    "width": 1600,
    "height": 900
  },
  "title": "Animating the body",
  "url": "/articles/animating-the-body",
  "description": "<p>We recently held a weekend of hands-on creative activities and thoughtful conversations exploring how we communicate through posture, gesture and facial expression. One of these activities included re-animating a film from Wellcome’s archive of moving images, featuring a range of body language. Dan Brown from Mash Cinema tells us more.  When I was asked to develop a [&hellip;]</p>\n",
  "headline": "Animating the body",
  "thumbnail": {
    "type": "picture",
    "contentUrl": "https://placehold.it/1600x900",
    "width": 1600,
    "height": 900
  },
  "datePublished": {},
  "series": [
    {
      "url": "/series/electricity",
      "name": "Electricity",
      "commissionedLength": 5,
      "color": "purple",
      "items": [
        {},
        {},
        {}
      ]
    }
  ],
  "positionInSeries": 3,
  "modifiers": [
    "series"
  ]
}

/* Gallery */
{
  "contentType": "gallery",
  "image": {
    "type": "picture",
    "contentUrl": "https://placehold.it/1600x900",
    "width": 1600,
    "height": 900
  },
  "title": "Animating the body",
  "url": "/articles/animating-the-body",
  "description": "<p>We recently held a weekend of hands-on creative activities and thoughtful conversations exploring how we communicate through posture, gesture and facial expression. One of these activities included re-animating a film from Wellcome’s archive of moving images, featuring a range of body language. Dan Brown from Mash Cinema tells us more.  When I was asked to develop a [&hellip;]</p>\n",
  "headline": "Animating the body",
  "thumbnail": {
    "type": "picture",
    "contentUrl": "https://placehold.it/1600x900",
    "width": 1600,
    "height": 900
  },
  "datePublished": {},
  "series": [
    {
      "url": "events-2",
      "name": "Events",
      "description": null,
      "commissionedLength": null,
      "color": null
    },
    {
      "url": "youth-programme-more",
      "name": "Youth Programme",
      "description": null,
      "commissionedLength": null,
      "color": null
    }
  ],
  "positionInSeries": null,
  "modifiers": [
    "underlined"
  ]
}

/* Audio */
{
  "contentType": "audio",
  "image": {
    "type": "picture",
    "contentUrl": "https://placehold.it/1600x900",
    "width": 1600,
    "height": 900
  },
  "title": "Animating the body",
  "url": "/articles/animating-the-body",
  "description": "<p>We recently held a weekend of hands-on creative activities and thoughtful conversations exploring how we communicate through posture, gesture and facial expression. One of these activities included re-animating a film from Wellcome’s archive of moving images, featuring a range of body language. Dan Brown from Mash Cinema tells us more.  When I was asked to develop a [&hellip;]</p>\n",
  "headline": "Animating the body",
  "thumbnail": {
    "type": "picture",
    "contentUrl": "https://placehold.it/1600x900",
    "width": 1600,
    "height": 900
  },
  "datePublished": {},
  "series": [
    {
      "url": "events-2",
      "name": "Events",
      "description": null,
      "commissionedLength": null,
      "color": null
    },
    {
      "url": "youth-programme-more",
      "name": "Youth Programme",
      "description": null,
      "commissionedLength": null,
      "color": null
    }
  ],
  "positionInSeries": null,
  "modifiers": [
    "underlined"
  ],
  "length": "01:35"
}

/* Video */
{
  "contentType": "video",
  "image": {
    "type": "picture",
    "contentUrl": "https://placehold.it/1600x900",
    "width": 1600,
    "height": 900
  },
  "title": "Animating the body",
  "url": "/articles/animating-the-body",
  "description": "<p>We recently held a weekend of hands-on creative activities and thoughtful conversations exploring how we communicate through posture, gesture and facial expression. One of these activities included re-animating a film from Wellcome’s archive of moving images, featuring a range of body language. Dan Brown from Mash Cinema tells us more.  When I was asked to develop a [&hellip;]</p>\n",
  "headline": "Animating the body",
  "thumbnail": {
    "type": "picture",
    "contentUrl": "https://placehold.it/1600x900",
    "width": 1600,
    "height": 900
  },
  "datePublished": {},
  "series": [
    {
      "url": "events-2",
      "name": "Events",
      "description": null,
      "commissionedLength": null,
      "color": null
    },
    {
      "url": "youth-programme-more",
      "name": "Youth Programme",
      "description": null,
      "commissionedLength": null,
      "color": null
    }
  ],
  "positionInSeries": null,
  "modifiers": [
    "underlined"
  ],
  "length": "01:35"
}

/* Comic */
{
  "contentType": "comic",
  "image": {
    "type": "picture",
    "contentUrl": "https://placehold.it/1600x900",
    "width": 1600,
    "height": 900
  },
  "title": "Animating the body",
  "url": "/articles/animating-the-body",
  "description": "<p>We recently held a weekend of hands-on creative activities and thoughtful conversations exploring how we communicate through posture, gesture and facial expression. One of these activities included re-animating a film from Wellcome’s archive of moving images, featuring a range of body language. Dan Brown from Mash Cinema tells us more.  When I was asked to develop a [&hellip;]</p>\n",
  "headline": "Animating the body",
  "thumbnail": {
    "type": "picture",
    "contentUrl": "https://placehold.it/1600x900",
    "width": 1600,
    "height": 900
  },
  "datePublished": {},
  "series": [
    {
      "url": "/series/electricity",
      "name": "Body Squabbles",
      "commissionedLength": 5,
      "color": "purple",
      "items": [
        {},
        {},
        {}
      ]
    }
  ],
  "positionInSeries": null
}

/* Standalone */
{
  "contentType": "article",
  "image": {
    "type": "picture",
    "contentUrl": "https://placehold.it/1600x900",
    "width": 1600,
    "height": 900
  },
  "title": "Animating the body",
  "url": "/articles/animating-the-body",
  "description": "<p>We recently held a weekend of hands-on creative activities and thoughtful conversations exploring how we communicate through posture, gesture and facial expression. One of these activities included re-animating a film from Wellcome’s archive of moving images, featuring a range of body language. Dan Brown from Mash Cinema tells us more.  When I was asked to develop a [&hellip;]</p>\n",
  "headline": "Animating the body",
  "thumbnail": {
    "type": "picture",
    "contentUrl": "https://placehold.it/1600x900",
    "width": 1600,
    "height": 900
  },
  "datePublished": {},
  "series": [
    {
      "url": "events-2",
      "name": "Events",
      "description": null,
      "commissionedLength": null,
      "color": null
    },
    {
      "url": "youth-programme-more",
      "name": "Youth Programme",
      "description": null,
      "commissionedLength": null,
      "color": null
    }
  ],
  "positionInSeries": null,
  "modifiers": [
    "standalone"
  ]
}

/* Lead */
{
  "contentType": "article",
  "image": {
    "type": "picture",
    "contentUrl": "https://placehold.it/1600x900",
    "width": 1600,
    "height": 900
  },
  "title": "Animating the body",
  "url": "/articles/animating-the-body",
  "description": "<p>We recently held a weekend of hands-on creative activities and thoughtful conversations exploring how we communicate through posture, gesture and facial expression. One of these activities included re-animating a film from Wellcome’s archive of moving images, featuring a range of body language. Dan Brown from Mash Cinema tells us more.  When I was asked to develop a [&hellip;]</p>\n",
  "headline": "Animating the body",
  "thumbnail": {
    "type": "picture",
    "contentUrl": "https://placehold.it/1600x900",
    "width": 1600,
    "height": 900
  },
  "datePublished": {},
  "series": [
    {
      "url": "events-2",
      "name": "Events",
      "description": null,
      "commissionedLength": null,
      "color": null
    },
    {
      "url": "youth-programme-more",
      "name": "Youth Programme",
      "description": null,
      "commissionedLength": null,
      "color": null
    }
  ],
  "positionInSeries": null,
  "weight": "lead"
}

/* Regular */
{
  "contentType": "article",
  "image": {
    "type": "picture",
    "contentUrl": "https://placehold.it/1600x900",
    "width": 1600,
    "height": 900
  },
  "title": "Animating the body",
  "url": "/articles/animating-the-body",
  "description": "<p>We recently held a weekend of hands-on creative activities and thoughtful conversations exploring how we communicate through posture, gesture and facial expression. One of these activities included re-animating a film from Wellcome’s archive of moving images, featuring a range of body language. Dan Brown from Mash Cinema tells us more.  When I was asked to develop a [&hellip;]</p>\n",
  "headline": "Animating the body",
  "thumbnail": {
    "type": "picture",
    "contentUrl": "https://placehold.it/1600x900",
    "width": 1600,
    "height": 900
  },
  "datePublished": {},
  "series": [
    {
      "url": "events-2",
      "name": "Events",
      "description": null,
      "commissionedLength": null,
      "color": null
    },
    {
      "url": "youth-programme-more",
      "name": "Youth Programme",
      "description": null,
      "commissionedLength": null,
      "color": null
    }
  ],
  "positionInSeries": null,
  "weight": "regular"
}

/* With Chapters */
{
  "contentType": "article",
  "image": {
    "type": "picture",
    "contentUrl": "https://placehold.it/1600x900",
    "width": 1600,
    "height": 900
  },
  "title": "Animating the body",
  "url": "/articles/animating-the-body",
  "description": "<p>We recently held a weekend of hands-on creative activities and thoughtful conversations exploring how we communicate through posture, gesture and facial expression. One of these activities included re-animating a film from Wellcome’s archive of moving images, featuring a range of body language. Dan Brown from Mash Cinema tells us more.  When I was asked to develop a [&hellip;]</p>\n",
  "headline": "Animating the body",
  "thumbnail": {
    "type": "picture",
    "contentUrl": "https://placehold.it/1600x900",
    "width": 1600,
    "height": 900
  },
  "datePublished": {},
  "series": [
    {
      "url": "/series/electricity",
      "name": "Electricity",
      "commissionedLength": 5,
      "color": "purple",
      "items": [
        {},
        {},
        {}
      ]
    }
  ],
  "positionInSeries": 3,
  "weight": "lead"
}

/* Standalone With Chapters */
{
  "contentType": "article",
  "image": {
    "type": "picture",
    "contentUrl": "https://placehold.it/1600x900",
    "width": 1600,
    "height": 900
  },
  "title": "Animating the body",
  "url": "/articles/animating-the-body",
  "description": "<p>We recently held a weekend of hands-on creative activities and thoughtful conversations exploring how we communicate through posture, gesture and facial expression. One of these activities included re-animating a film from Wellcome’s archive of moving images, featuring a range of body language. Dan Brown from Mash Cinema tells us more.  When I was asked to develop a [&hellip;]</p>\n",
  "headline": "Animating the body",
  "thumbnail": {
    "type": "picture",
    "contentUrl": "https://placehold.it/1600x900",
    "width": 1600,
    "height": 900
  },
  "datePublished": {},
  "series": [
    {
      "url": "/series/electricity",
      "name": "Electricity",
      "commissionedLength": 5,
      "color": "purple",
      "items": [
        {},
        {},
        {}
      ]
    }
  ],
  "positionInSeries": 3,
  "weight": "lead",
  "modifiers": [
    "standalone"
  ]
}

Promos

What's their purpose, what they aren't, and what they have the potential to become.

A promo is how content types from our domain promote themselves across our sites, and externally, based on a combination of content, promotional, and contextual data.

The purpose of a promo is to surface content that might be relevant to you, or your current context within our site, and allow you to decide whether you'd like to explore that content further whether it be through interest or curiosity.

It's more obvious purpose is to give you a link to that content 🚀.

An example of a promo using contextual, content, and promotional data

Using the above example:

  • The "5" is contextual as this promo is in a list of ordered articles
  • The series title is directly linked to the content of the article
  • The text below the image has been created by editors to promote the article. It is not actually part of the article's body.

What they aren't

Promos are not adverts, nor functional components.

An image and text letting visitors know that there is a special menu at the Wellcome Kitchen

The above is not a promo, but rather an ad for a special menu at Wellcome Collection's kitchen

{`An

The above is not a promo either, but rather an enticing newsletter signup component

Potentialities

We would like to look at the difference between pull and push promos. i.e. content that we surface and allow you to choose from vs content we have deemed to be of special interest and thus promote more emphatically.

Currently we only have image promos, we'd like to explore using more specialised promos for image galleries, videos, audio etc.