CI-342 Remove topper mapping logic (#59)

* Move logic determining which topper to apply

The logic determining which topper to apply to an article has been moved
from `o-topper` and into it's own library, `n-map-content-to-topper`.

We've done this so we can use the `mapContentToTopper` helper on the
server-side in `next-article`. Also, it moves us closer to having
`o-topper` less tied to Customer Products content.

* Update support status to `maintained`

Now that the App and FT.com will be using this component, we can update
the status from `experimental` to `maintained`.

* Bump version of `n-map-content-to-topper`

The new version of `n-map-content-to-topper` makes it available on
Bower, see https://github.com/Financial-Times/n-map-content-to-topper/releases/tag/v1.1.0.

* add n-map-content-to-topper as bower dep

* Use Bower package name

via Jake:

> This needs to be written using the bower package name which is not
namespaced. When it gets published to npm, Origami uses a tool to
convert the imports into their npm equivalent.

* Remove image credit from failing demos

To unblock the release, we are temporarily removing the image credit
from the news package demo. This decision was made after a conversation
between myself, @GlynnPhillips and @notlee.

We're temporarily removing rather than fixing because in attempting to
fix it, the problem spiralled out of control. We think there is a bigger
discussion to be had about `o-toppers` and it's something Content
Innovation would like to look at after the new live blogs has launched.

* Update package.json

No longer needed because it's added by the Origami Component Converter

Co-authored-by: Jake Champion <[email protected]>
Co-authored-by: chee <[email protected]>

bower.json

@@ -10,6 +10,7 @@
     "o-grid": "^5.0.0",
     "o-colors": "^5.0.0",
     "o-icons": "^6.0.0",
-    "o-spacing": "^2.0.0"
+    "o-spacing": "^2.0.0",
+    "n-map-content-to-topper": "^1.1.0"
   }
 }

demos/src/news-package.mustache

@@ -18,6 +18,5 @@
 
 			<img alt="" class="o-topper__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/a25832ea-0053-11e8-9650-9c0ad2d7c5b5?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=800">
 		</picture>
-		<figcaption class="o-topper__image-credit">© Tolga Akmen/FT</figcaption>
 	</figure>
 </div>

demos/src/pa11y.mustache

@@ -100,7 +100,6 @@
 
 			<img alt="" class="o-topper__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/a25832ea-0053-11e8-9650-9c0ad2d7c5b5?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=800">
 		</picture>
-		<figcaption class="o-topper__image-credit">© Tolga Akmen/FT</figcaption>
 	</figure>
 </div>
 <div class="o-topper o-topper--branded o-topper--has-headshot o-topper--opinion o-topper--color-sky">

main.js

@@ -1,3 +1,3 @@
-import mapContentToTopper from './src/js/map-content-to-topper.js';
+import mapContentToTopper from 'n-map-content-to-topper';
 
 export { mapContentToTopper };

origami.json

@@ -12,7 +12,7 @@
 		"email": "[email protected]",
 		"slack": "financialtimes/ft-origami"
 	},
-	"supportStatus": "experimental",
+	"supportStatus": "maintained",
 	"browserFeatures": {
 		"required": [],
 		"optional": []

readme.md

@@ -1,17 +1,14 @@
 # o-topper
 
-This component is for displaying header sections at the top of articles
+This component is used for styling the topper sections of an article.
 
 - [Markup](#markup)
 - [Sass](#sass)
+- [JavaScript](#javascript)
 - [Migration Guide](#migration)
 - [Contact](#contact)
 - [Licence](#licence)
 
-## Usage Warning
-
-**Use of this component is not recommended outside FT.com / app.ft.com**. The [Javascript helper which currently extracts themes, colors, and other topper display data](/js/map-content-to-topper.js) is deeply tied to the FT.com content store and includes hardcoded UUIDs and business logic. In future this will be moved into another layer of the FT.com stack, and the new configuration used to control topper display and functionality will be documented, at which stage this topper will be more suitable for wider use.
-
 ## Markup
 
 The basic markup structure for a topper will look something like this:
@@ -147,30 +144,20 @@ To include o-topper styles granularly specify which elements, themes, and colour
 ));
 ```
 
-## Javascript
+## JavaScript
+
+### Mapping Content to Topper
+
+This component exports a JavaScript helper from [`n-map-content-to-topper`](https://github.com/Financial-Times/n-map-content-to-topper). Use this helper to select the correct topper for an article given a JSON-formatteed FT article and flags.
 
-This component includes a Javascript helper, which should be used to select the correct topper themes and colors, as well as other topper-overriden data, given a particular JSON-formatted FT article (such as from the Content API).
+**Note:** This helper is deeply tied to the FT.com content store, and includes hardcoded UUIDs and business logic.
 
 ```js
 import { mapContentToTopper } from 'o-topper';
 
-const topper = mapContentToTopper(ftArticle);
+const topper = mapContentToTopper(ftArticle, flags);
 ```
 
-## Topper data
-
-Data returned by the topper helper should be used in the product's templates. Other keys may be returned but should not be relied on as documented behaviour.
-
-| Key               | Usage                                                                                  |
-|-------------------|----------------------------------------------------------------------------------------|
-| `headline`        | Should be used in place of the standard article headline                               |
-| `standfirst`      | Should be used in place of the standard article standfirst                             |
-| `modifiers`       | Should be included as `o-topper--[modifier]` classes on the `o-topper` wrapper element |
-| `backgroundColor` | Should be included as an `o-topper--color-[color]` class on the wrapper element        |
-| `themeImageRatio` | Used to differentiate `split` and `full-bleed` topper images                           |
-| `includesImage`   | Use to disable main article image to prevent duplicate images when topper includes one |
-| `largeHeadline`   | Indicates whether to use `o-topper__headline--large` on `o-topper__headline`           |
-
 ## Migration
 
 State | Major Version | Last Minor Release | Migration guide |