[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, Description:Exists in BTK already as Card component Bootstrap documentation: https://getbootstrap.com/docs/5.3/components/card/ |