UI components

[nilsml]

This epic represents all the components that needs to be created.

Acceptance criteria

1. All components are using the brand theme
2. Components are running in isolation within StoryBook
3. Components are being mapped to corresponding content types in Sanity

Below is the list as per 1/2-21, but separate user stories will be made for each one.

List of components

• Top banner (image/video display - alternate crop display/carousel) - NEW overlay with content & links REF IEA
  • Template 1/option 1. Superhero
  • Template 2/option 2. Hero
  • Template 3/option 3. Workhorse
• Rich text component
• Lists (Option for 'swipe' display on mobile as today) Currently we have 3 displayed on desktop… Consider scroll on desktop? REF Ikea and apple?
  • News link. Build as ‘child of’ with additional option for tags display.
  • Link. Build either by ‘child of’ or by ‘editor select’ (fixed – see front page current topics)
  • Newsroom – Needs to be redesigned and re-thought through with better use of tagging.
  • Calendar. Build either by ‘child of’ or by ‘editor select’ (fixed) Needs redesign
  • Stories. Build as ‘child of’ with additional option for tags to filter. Should this be solved with tags in newsroom instead?
  • Simple list. by ‘editor select’ (fixed). Just link titles and arrow.
• Buttons
  • Need to define where to link to (internal/external)
  • Button title if needed
  • Option to add anchor point
  • Differentiate look on download buttons?
  • Other links/hyperlinks?/download/add to calendar/buttons design)
• SVG container (housing icons/illustrations)
• Video
• Carousel – Image only? Option for links
• Accordion – Combines with other components to expand content (image/text/icon) REF equinor.com
• Anchor (no design)
  • Provides a specific URL to the point on the page (eg: https://www.equinor.com/en/how-and-why.html#health-safety-security)
  • Provides point for a button to link to on a page -in page navigation (ref IEA)
• Big numbers (including count up? Currently have, but maybe not needed) New design treatment? Define a font size variant.
• Table (inc REMIT)
• Iframe holder
• RSS feeds
• Image (full width at various crops/within column/above-next to/16-9/1-1/circle framed)
• Stock holder (feed to show OSE /NYSE)
• NEW – Tile based component? How to multi link if there are several pages to reference?
• NEW - Promotion container (one line + button/image + intro + button) More tile-based REF Ørsted?
• FOOTER / ROOT
  • Content
  • Redesign
  • Combine with SOME links?

Back to top button In page navigation? - user can jump to certain anchor points on a page.

Animation elements

• Animation on button/arrows (morgendagens)
• Animation on menu reveal when user scrolls down and either stops/scrolls up (morgendagens/servicenow)
• Animation on menu tabs?
• Animation on menu button for mobile/satellite template.

Complete list of components can be found at here.

[nilsml]

We haven't really created user stories for most of the components. We have this epic listing them up, but right now the components are only somewhat mentioned in the News Article epic and of course in Figma. Would it be valuable to have a more "formal" definition of the components in the form of user stories as well?

[NickHaggerty1]

Closiing this. Any future UI components will be created as separate issues FYI @meols @nilsml