FR: Volvo Trucks Magazine Filter Tags

[shirin27]

Description

As a content author, I want to implement article topic category tags so that I can enhance content organization and improve user engagement and SEO optimization.

Acceptance Criteria

User AC:

• Only one filtering option can be selected at a time.
• Once filtering options are selected on the Magazine home page, the page shall dynamically update to show the relevant articles based on tags, keeping the user on the same page.
• Filter tags shall be displayed as pill-shaped buttons, as seen in below Figma designs.
• New filters displayed for the magazine:
  • All Topics
  • Volvo Trucks Magazine
  • Design
  • Product Feature
  • Q & A
  • Electromobility
  • Autonomous Solutions
  • Driver Training
  • Safety
  • Driver Productivity
  • Fuel Efficiency
  • Connectivity
  • Sustainability
  • Innovation
  • Driver
  • Product
  • All Truck Series
  • VNL
  • VNR
  • VNX
  • VHD
  • VAH
  • VNR Electric

Editor AC:

• Content authors should have the ability to add or remove new filter tag categories.
• Content authors should have the ability to tag an article with any of the topic categories.
• Content authors should be able to determine whether selecting a new filter tag will open the category content in a new browser tab or keep the user on the current page.
• This block showing the topic tags associated with an article will be developed to be used in the #560 - Template: Magazine Article.

Non-functional AC:

• One article can have up to 5 categories tags.
• Filter tags shall behave as buttons, when the user selects on a tag it shall bring them to whatever page is linked.
• Filter tags shall be compatible on white, black, and grey backgrounds.
• "All Topics" dropdown displays filtering options in alphabetical order on the search bar.

Out of scope

• The search functionality of these tags is taken up in ticket https://github.com/hlxsites/vg-volvotrucks-us/issues/532

Attachment / link to Figma

Desktop/Tablet: https://www.figma.com/file/c2jG1bOcvle2bCmZqgptyS/Magazine-C%26T?type=design&node-id=1593%3A22222&mode=dev

Mobile: https://www.figma.com/file/c2jG1bOcvle2bCmZqgptyS/Magazine-C%26T?type=design&node-id=1601%3A24042&mode=dev

Related Ticket: https://github.com/hlxsites/vg-volvotrucks-us/issues/532

[mollyaljenkins]

Blocked as this will require searcheng efforts to be planned.