Spillover - FR: Article Hero

[shirin27]

Description

As a business owner, I want to be able to display content in a hero to my page so that its design is more dynamic so that users can more easily see the image, reading time, title, author, topic category filters, and creation date.

Acceptance Criteria

User AC:

• The article title uses H1 page heading text size. On desktop/tables, the article title is positioned to the left and centered with respect to the image. On mobile, the article title is positioned under the image and directly under the line of author, creation date, and reading time, and text is aligned along the left margin.
• On all viewports, the author's name is positioned directly above the title, aligned to the left using normal body text size (16px).
• On all viewports, the article's creation date is positioned directly above the title, aligned to the center using normal body text size (16px).
• On all viewports, the article's reading time is positioned directly above the title, aligned to the right using normal body text size (16px).
• On all viewports, the article's author name, creation date, and reading time are all aligned horizontally.
• On all viewports, the article's topic filter tags are positioned directly below the title, displaying up to 5 categories, aligned to the left and centered with the title text.

Editor AC:

• There is a new "Article Hero" block available for editors to add to any page.
• If the author misses any of the data, the data completed will be displayed responsively form left to right following the colors in the design. This means, first item will be in black font and the second and third grey.
• As an editor, I can choose up to 5 category topic tags to display for each article hero.
  • These filter tags will be taken up in issue #561
• As an editor, I have the ability to edit the title, date, author, and reading time on the article (page metadata)
• As an editor, the article display name can be different than the metadata title tag needed for SEO purposes.

Non-functional AC:

• The new hero block is configured to display an image with rounded corners. Image size/aspect ratio: Desktop 813:698 px (1.16:1) Tablet 680:510px (4:3) Mobile 343:245px (7:5).
• Block colors will be on transparent background and will need to be compatible with light or dark screen mode.

Attachment / link to Figma

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

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

Open question:

• [x] Do we always have the filters displayed in all viewports or not? If not, how does the design look like? Answer - yes, new designs should provide all visuals for displaying the filter tags.
• [x] What are the dimensions of the image on desktop?
  • From C&T - image size/aspect ratio: Desktop 813:698 px (1.16:1) Tablet 680:510px (4:3) Mobile 343:245px (7:5). This component is a modified version of Single Media of Text Block 2 FYI.

Related Tickets:

562

[williebender]

@ZoeBeykirch @BeckyMedlin

From C&T, image size/aspect ratio:

Desktop 813:698 px (1.16:1) Tablet 680:510px (4:3) Mobile 343:245px (7:5)

This component is a modified version of Single Media of Text Block 2 FYI.

[girishdigrajkar]

Validated and able to get the correct results except below : @jonatan-lledo-netcentric

1. Creation date in figma has month in format of MMM e.g. Jan. Whereas, implemented is complete month name. e.g. January Figma has reading time with no space in between e.g. 10min read whereas, implemented is with a space e.g. 11 min read

   2. Intermittent issue: iPad 10 I.e. iOS ver 17 + Chrome has rectangular buttons - This issue is intermittently reproducible with Browser stack on iPhone too

2. Author no tags >> It shows empty button

   4. Author more than 5 tags : e.g. 7 tags; It displays all the 7 tags as buttons however, since its author controlled to 5 so this point is author controlled. - No action needed

3. Kindly add this block in sidekick library later

   6. Unable to locate ‘All topics’ bar in any of Magazine related tickets @mollyaljenkins : Please check.

[girishdigrajkar]

Post confirmation from dev as fixed, below is summary of retesting: 1 - As expected; Inline to figma design 2 - not observed now 3- Working as expected now; no empty tag button displayed when have 0 tags 4- expected behaviour as dev comments

Defect could be closed