NFR: Refactoring Buttons for Helix 5 Upgrade

[mollyaljenkins]

Context/Description

Currently some buttons on the Volvo Trucks sites are hardcoded. Following the Helix 5 upgrade buttons will be effected because the upgrade will allow for configuration and behaviour of the buttons to be customized.

Blocks with hardcoded buttons will need to be updated. Button variations will need to be defined in a clear and standardized way.

Acceptance Criteria

Editor AC:

• Placing a link on it's own paragraph will create a button
• Variations will be selected via using Italic, or Bolding
• Button styling is dictated by the emphasis of the text in the Word document
• To use the marketing button a variant of the block needs to be turned on
  • The name of this variant needs to be defined
• The standard button will become the tertiary button

Out of scope

No response

Note

Some blocks can maintain hardcoded buttons (using tertiary button only)

• Content card
• ...
• Each block will have a regression test that will happen on level of Sidekick library and some select pages
  • Select pages:
  • All new VNL product page
  • Homepage

Button Options

Button block collection from AEM: (https://www.aem.live/developer/block-collection/buttons)

Current hardcode buttons to be replaced https://docs.google.com/spreadsheets/d/13yqPktBPlojezO7enJjKG0n0rXxggl3SMutwEk_pe9o/edit?usp=sharing

Attachment / link to Figma

No response

[amglebihan]

I updated the decorateButtons function that is handling how classes are added to buttons, and removed the hardcoded code that was in the JS of some blocks to determine the buttons' classes in some cases. Content editors are now able to choose the button variant that they want to use when creating content:

• Primary button: add a link with Bold emphasis
• Secondary button: add a link with Italic emphasis
• Tertiary button: add a link with no emphasis
• Marketing/cta button: add a link with Bold and Italic emphasis

When this ticket is merged, some content editing will be needed to give the buttons the correct styling.

[cogniSyb]

Kamino cloned this issue to hlxsites/vg-macktrucks-com