Add PaidForContent TopMeta to Article Body in AMP

[vlbee]

What does this change?

Adds PaidForTopMeta Component with teal header band and sponser logo to AMP Article Body.

Also extracts tone tag helper functions into tag-utils in lib

Why?

⚡️ AMP completion

Implementation notes:

• Styling on the body (font, colors, submeta) will be a separate PR
• The TSLint rule for does not recognize <amp-img> tags as valid inner image tags for anchors and was throwing an error. I have disabled this locally.

return (
        <div>
            <div className={paidForLogoLabelStyle}>Paid for by</div>
            {/* tslint:disable-next-line: react-a11y-anchors */}
            <a
                href={logo.link}
                data-sponsor={sponsorName.toLowerCase()}
                rel="nofollow"
            >
                <amp-img
                    src={logo.src}
                    width="280px"
                    height="180px"
                    alt={sponsorName}
                />
            </a>
        </div>
    );

Screenshots

[PRBuilds]

PRbuilds results:

LightHouse Reporting
1556109331.report.html

--automated message

[nicl]

Think this is good. I've left a few comments. But otherwise, it might be worth merging this and then working on the rest? This will make it easier to review later PRs as they'll be smaller and you are less likely to have a merge conflict later. But equally, if you think stuff is still in flux keeping it all in a single PR makes sense!

[nicl]

This is my fault for using Opinion everywhere 🤦‍♂️ but perhaps we should use the actual tone values here (i.e. exactly what the tags contain) - 'comment', 'advertisement-features', '...' ? The benefit is that developers will find it easier to understand the connection between DCR and CAPI/Frontend modelling.

[nicl]

The is prefix is probably also worth dropping as types tend to be nouns rather than predicates if that makes sense.

[vlbee]

Fixed this to match CAPI

[nicl]

Minor, but we tend to use absolute import paths - @frontend/...

We should probably find a way to lint this though! As I think everyone does this.

[vlbee]

Sounds good. Will change all as way easier to read as a dev too! Perhaps there is a linter plugin already written?

Looks like there is a TSlint rule that already exists for no-relative-imports that I'll look into: microsoft/tslint-microsoft-contrib#435

[nicl]

thanks - sounds great! :)