Content Guidance dynamic images

[PtitBen]

Discovery of an option to dynamically generate the main guidance images for each component, perhaps utilising some sort of tooltip interaction. This could make updating somewhat more automated and less time consuming.

If it is deemed too complex for this first iteration we can revert to using the existing images. These should also be assessed and adusted if necessary for exclusion zones to ensure an appropriate experience on both light and dark modes in the docs.

[andij]

Having done some research on those 'Product Tour' experiences when first using a web app.

I've found this library: https://lusift.vercel.app/

CodyHouse have this: https://codyhouse.co/ds/components/info/product-tour (but it's paid for) and this: https://github.com/codyhouse/product-tour/tree/master (but it's old)

[RobTobias123]

I've added component/images folders to accordion, alert and card and populated them with a copy of the existing images (latest optimised webps) used in the current version. This will help us assess what needs adjusting (exclusion zones, any instances of old style illustrations etc) as we populate the content and provide a fallback alternative for the dynamic concept should we need it. (Can be removed if we go dynamic for launch).

[RobTobias123]

PR: https://github.com/centrica-engineering/nucleus-docs/pull/262

[PtitBen]

Dynamic annotation for components and code:

Anatomy for code and component:

• code-anatomy: annotate code

• component-anatomy: annotate components visually

And (what seems to be a more complex solution): (weirdly not working on smaller viewports, maybe just a kink that can be sorted out)

Speccer

[andij]

For the initial release we have agreed to reuse the existing Content Guidance annotated screenshot and supporting table.

Removing the heading row and replacing with a heading (level 4) 'Key'.