Price & Costing reformat

[steveduffin]

A reformat of price and costing is underway to match new designs which offer readability improvements.

We are taking a phased approach:

1. CSS Changes to c-price to highlight offers and make strikes more visible. (Complete)

2. c-costing - Moving the strikethrough from the end of the prefix text to the left / top depending on size

3. Put a restriction on the suffix text to ensure it wraps at a "sensible" size and aligns to the bottom of the price point until it breaks onto multiple lines, at which point it should align top and flow down.

Status

1. Released - see https://github.com/sky-uk/toolkit/pull/361
2. Released as an override in Sky's react library, needs to be brought into CSS toolkit
3. Not started

Expected Behaviour

Prices and costing need to conform to our new designs

Current Behaviour

(Ignore orange offer highlight)

Current look and feel:

Desired:

Attempted Fixes

Phases 2 and 3 require breaking changes as they rely on a change of both style and markup. Suggest that this becomes the first candidate for our experimental branch https://github.com/sky-uk/toolkit/issues/359

Context

Groundwork laid by designers in digital trading. Should roll out to any consumers of Sky's Costing or Price UI patterns.

[joe-bell]

@steveduffin what's the latest on this?

[steveduffin]

All the changes are currently encapsulated in our shared react Library but as far as I’m aware have yet to hit production. Id say once they have proven themselves as a stable pattern, that styling is moved to toolkit

[steveduffin]

Would have to be candidate for 3.0 as they rely on significantly different markup

[joe-bell]

Sweet!

[steveduffin]

We should reconsider whether costing should even be a toolkit thing