Create Topic Card link list for Product Homepages

[smithellis]

Create more informative and useful topic blocks that provide quick access to common needs.

Figma here.

[smithellis]

Started work here: https://github.com/smithellis/kitsune/tree/module-topic-list

[smithellis]

Questions:
When the container height is taller, should the View All link be at the bottom of the box, or at the bottom of the links?

[smithellis]

Also, should I force "squareness" on these? Or keep square but add space OR keep square but grow fonts?

[cajinajr]

@smithellis - I think having the "View All" link lined up at the bottom across modules/boxes would look better, BUT in my experience, it's always a pain in the you-know-what to code it that way. My instinct is to have it placed at the bottom of the list of links for now until we identify any (potential) issues with doing it that way.

I'm not 100% clear on your second question, but I would keep the font size and spacing between boxes consistent. If we made anything variable, I'd make the width of each box variable up until a set max-width based on Wide/Ultra-wide screen sizes.

[smithellis]

Ah - yes, my second question was whether I should force these boxes to be square boxes, or if I can allow them to have longer widths. So I think you answered me.

[cajinajr]

@smithellis - Went through the existing SUMO UI Design Library to assign some icons to the new taxonomy topics. I found suitable icons for everything except "Accessibility." I went ahead and made a new one for that according to standard examples I found on other sites.

I've exported SVGs for each icon and uploaded them to the CX Google Drive (path: Design > SUMO Icons > Taxonomy Icons). Below is a screenshot of each icon with its corresponding Tier 1 topic.

[cajinajr]

@smithellis - Adding a few more screenshots to document what we discussed last week:

• We'll add a divider between the three example articles in the new Topic Card in order to distinguish the "View All _ Articles" link.

• The "View All _ Articles" link should be positioned at the bottom of the topic card regardless of the height of the card.
• If the title of an article is long, and thus increases the height of the Topic Card, the other cards in the same row should match with the same height.

• If necessary, the width of the Topic Cards should expand to accommodate wide or ultra-wide content areas. Font sizes and the horizontal margin between cards should remain the same.

[smithellis]

My latest iteration. Ignore the wrong icons - I just hastily put some in there so I could see them; they are controlled in the admin, thus will be whatever they are set to on prod.

[cajinajr]

Lookin' good! Is it possible to dynamically calculate how many articles are within a topic so that number can be displayed in the "View All" text? One more thing I don't think we nailed down was how we were determining which three articles were displayed in the preview list. My initial idea was to reference page view data (over a long enough time frame to avoid it possibly changing too often) to pick the three most visited articles. However, we could also work with the Content team to manually pick "keystone" articles and use those instead.

[smithellis]

mozilla/kitsune#6408

Right now this is "three articles" but we do/should create another PR to alter after follow up with Content Team.

[emilghittasv]

Since this work has been backed out from stage (mozilla/kitsune#6466 & mozilla/kitsune#6465) I'm going to move this ticket back inside the in progress column.