[MCL-15] Teaser Created: 11/Dec/23  Updated: 31/Jan/24

Status: Open
Project: Magnolia Component Library
Component/s: Core Content
Affects Version/s: None
Fix Version/s: None

Type: Story Priority: Neutral
Reporter: Raymond Tran Assignee: Unassigned
Resolution: Unresolved Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Template:
Acceptance criteria:
Acceptance Criteria
[ ]* Component is called "Teaser"
[ ]* Supports all OOTB Bootstrap style variants None (default) and Rounded
[ ]* Supports all OOTB Bootstrap button style variants including Primary, Secondary, Success, Danger, Warning, Info, Light, Dark and Link.
[ ]* Supports OOTB Boostrap button outline styling
[ ]* Links to internal or external content page
[ ]* Shows animation when the Button is depressed
[ ]* Content supports left, right and centre justification
[ ]* Button is represented in the markup using an <a> tag.
[ ]* If the Button label is empty, it shows "Find out more"
[ ]* If Heading is empty, it shows the Navigation title from the linked page properties
[ ]* If Image is empty and "Hide Teaser Image" is not checked, it shows the Teaser image from the linked page properties
[ ]* If Description is empty and "Hide Description text" is not chcked, it shows the Description text from the linked page properties
[ ]* For all other fields, if the content is empty for the relevant element it is not rendered.
[ ]* Images obey focal point / area selected for each breakpoint in the DAM asset
Documentation Acceptance Criteria
[ ]* Contains Title, Description and Examples
[ ]* Contains FTL and YAML code
Content Author Acceptance Criteria
[ ]* Component can be added to any page template in Column area of a Row component only.
[ ]* The Button link and label can be specified in the dialog
[ ]* Heading is mandatory if the linked page is external (as we can't get Navigation title)
[ ]* The button styles can be configured entirely within the dialog as per MCL-7
[ ]* Style variant (None, Rounded) can be configured in the Dialog
[ ]* "Hide Teaser Image" checkbox prevents the image from being rendered
[ ]* "Hide Description" checkbox prevents the description text from being rendered
[ ]* Class and CSS can be overridden in the dialog
Accessibility Acceptance Criteria
[ ]* Buttons can be navigated through, selected and depressed using the keyboard.
[ ]* The button markup should contain role="button" attribute to indicate that the link is a button.

 Description   

User Story:

As a content author,
I want to create a promotional teaser page component
So that I can promote content pages both within and external to my website

Description:

Exists in BTK already as Card component

Bootstrap documentation:

https://getbootstrap.com/docs/5.3/components/card/


Generated at Mon Feb 12 04:48:42 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.