feat(thought-leadership): add sidebar filtering and results

[amol-anand]

Issue

Fixes #198

Description

Updated Thought Leadership category logic

Design Specs

If applicable, add the direct link to the design specs of the component/feature that's part of this PR.

• Figma Link - https://www.figma.com/file/dFJwrp6VkUMSirF2KMLRMx/Thought-leadership-library?type=design&node-id=787-25468&mode=design&t=pRNHGuEjJwkvu9Sy-0

Test URLs

• Before (Changes from main): https://main--merative2--hlxsites.hlx.page/thought-leadership
• After (Changes from this PR): https://743-sidebar--merative2--hlxsites.hlx.page/thought-leadership
• After (Changes from this PR): https://743-sidebar--merative2--hlxsites.hlx.page/blog

[aem-code-sync[bot]]

Hello, I'm Franklin Bot and I will run some test suites that validate the page speed. In case there are problems, just click the checkbox below to rerun the respective action.

• [ ] Re-run PSI Checks

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/blog
/thought-leadership

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/blog
/thought-leadership

[proeung]

Adding myself as an assignee to this PR so that I can address any additional changes based on code review and design QA from the team.

[sharathmrft]

@sahmad-merative Below noted some issues/observations on Test Link https://743-sidebar--merative2--hlxsites.hlx.page/thought-leadership

1.Pages are not opening under solutions List 2.Not all the filters are available under Audience, content type, Topics as per the design 3.If we click on the Thought Leadership link on home page its opening blog page 4.Herobanner and the coresponding product logo needs to added to each solutions page 5.Left side Highlighter should be shown for all the solutions as like showing forThought ledaership  6.Filters are clickable in white space also it should be clickable on Filters text only in tab and mobile.

screen shot for 6th issues is attached here.

cc @proeung @Shalini-SB

[keith-kaplan]

Seeing some of this latest work. Can we please confirm going forward for the content-type values we are pulling in "asset type field" vs the page type? It looks it's using page type right now

[proeung]

Seeing some of this latest work. Can we please confirm going forward for the content-type values we are pulling in "asset type field" vs the page type? It looks it's using page type right now

@keith-kaplan Thanks for the review! Based on your comment, it sounds to me like we should be using the values coming from the assettype metadata field for the "Content Type" filtering within the sidebar area of the Thought Leadership page, if that's the case then I think we should add this to the Blog pages as well so that Blog is listed because the value is null/0.

[keith-kaplan]

Seeing some of this latest work. Can we please confirm going forward for the content-type values we are pulling in "asset type field" vs the page type? It looks it's using page type right now

@keith-kaplan Thanks for the review! Based on your comment, it sounds to me like we should be using the values coming from the assettype metadata field for the "Content Type" filtering within the sidebar area of the Thought Leadership page, if that's the case then I think we should add this to the Blog pages as well so that Blog is listed because the value is null/0.

Yes, I can take care of that.

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/blog
/thought-leadership

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/blog
/thought-leadership

[proeung]

Thought Leadership Landing Update

• I pushed up a few commits to Amol's PR to finish up the rest of the work for the sidebar filtering and results. (see - https://github.com/hlxsites/merative2/pull/286#commits-pushed-bdb4e3f). This PR is ready for Code (@sahmad-merative ) and QA (browser testing @sharathmrft and design QA @sachinmesh). Please list your finding in the PR comments.
• Moved all of the TL's solutions to /thought-leadership instead of /thought-leadership/solutions (see link)
• Updated the value filtering to align with our current category taxonomy (see attached)
• Added the hero banner to each solution (eg. https://743-sidebar--merative2--hlxsites.hlx.page/thought-leadership/health-insights). @keith-kaplan We'll need to notify Caroline to create copy for the intro text.
• @sachinmesh Can you export the icon for each solution (see attached), so that we can move them into the /icons directory in Sharepoint.
• Right now, we only have results for health-insights and marketscan. Once all of the content is tagged, we'll need to re-index the query index JSON file to fetch the latest content.

[sachinmesh]

Hi @proeung Sharing all the product icons in svg format. Desktop and tablet using same icon size 45 x 45px. Mobile icon size 35 x 35 px.

Product icons - svg.zip

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/blog
/thought-leadership

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/blog
/thought-leadership

[proeung]

@keith-kaplan Just pushed up a commit to render the display-title if it exists and fallback to title (see - comment). https://github.com/hlxsites/merative2/pull/286/commits/bd2f3bf1239519f6c6e7d53895f0de9ae4591f6f

@sachinmesh I added the icons that you've exported to SharePoint (eg. https://743-sidebar--merative2--hlxsites.hlx.page/thought-leadership/marketscan). Can you do a full round of Design QA and list any issues that you found? These changes will be reflected on both Blog and TL since they shared the same styles.

---

@sharathmrft See my response to your questions

1. Pages are not opening under solutions List

Right now, we only have results for health-insights and marketscan. Once all of the content is tagged, we'll need to re-index the query index JSON file to fetch the latest content. This is a content-related issue.

2. Not all the filters are available under Audience, content type, Topics as per the design

This is a content-related issue and will be resolved by the Content Directors.

3.If we click on the Thought Leadership link on home page its opening blog page

This is fixed.

4. Herobanner and the coresponding product logo needs to added to each solutions page

Hero banner has been added to Sharepoint docs (see. health-insights and marketscan)

5. Left side Highlighter should be shown for all the solutions as like showing forThought leadership

This is fixed.

6. Filters are clickable in white space also it should be clickable on Filters text only in tab and mobile.

This is fixed in the latest commit.

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/blog
/thought-leadership

[sachinmesh]

Hi Team, Some observations

1. Thought leadership font should be Alliance No.1 - 21px medium and not regular

2. Selected tick mark in filter is too big.

   

3. Caret looks squeezed towards left aligned. Should be centre aligned inside the 24x24px container.

   

4. After applying the first filter, layout is shrinking including hero banner image.

   

5. In tablet, Filters with selected number display is going into 2nd line.

   

6. Forward caret in filters looks wrong in dimension. Its getting cut at bottom.

   

7. When there no filters applied, but should not display any number.

   

@proeung @sahmad-merative @helms-charity @keith-kaplan

[sharathmrft]

@proeung Retested the fixed issues those are fine but few more I found as below

1.Time to Read in min is not appearing on each card at the bottom previously it was appearing. Screenshot for the issue is as below

2.If user clicks on some filters (check the checkbox) cursor shifts bit up -Screen Recording is attached below TL2.pptx

3.Filter text along with no of selected filters appearing in tab and mobile is wrong -screen shot attached below ' 4.If user Reset all the filters it should not show as "Filters(0)" it should be " Filters" only. refer the screenshot below

5.Reported below issue before under regression bug list Refer-MERATIVE-748

@sahmad-merative @keith-kaplan @Shalini-SB

[sharathmrft]

@proeung Observations on Blog page - https://743-sidebar--merative2--hlxsites.hlx.page/blog

1."Health Plans" under Audience filter and "Life sciences" are appearing twice- refer the screen shot below

2.Categories are not in Alphabetical order refer the screen shot below

3."Cookie preferences" link is not working at the footer in tab and mobile in Blog and Though Leadership page as well.

@sahmad-merative @Shalini-SB @keith-kaplan

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/blog
/thought-leadership

[proeung]

@sachinmesh @sharathmrft Just just pushed up a commit (https://github.com/hlxsites/merative2/pull/286/commits/c156f242b8ab1f2d62dbe65f251c9599bf990d72 | https://github.com/hlxsites/merative2/pull/286/commits/872a4e18301da114dc8b8fd1d69737347463112e) that should address all of the style issues that you both noted above. Can you re-test using the deploy preview links above?

Also, some of the comments are content entry related and a couple are things I don't think are launch blockers for the first phase of the Thought Leadership work. See my response below. @keith-kaplan Let me know what you think as well, since I'd like to wrap up with QA soon so that we can merge the changes in this PR down to the feature branch.

Selected tick mark in filter is too big.

The current check mark size is pulled from the native checkbox. Adjusting the size based on what you have in the design means that we need to create another element that mimics the checkbox field. Let's regroup on this in a JIRA ticket and we can evaluate the investment. This is not a blocker for the TL launch for end of July.

1.Time to Read in min is not appearing on each card at the bottom previously it was appearing. Screenshot for the issue is as below

Time to Read is used for Blog Type only

2.If user clicks on some filters (check the checkbox) cursor shifts bit up -Screen Recording is attached below TL2.pptx

Not a launch blocker and follow up enhancement can be tracked in JIRA. Let's create an improvement ticket for this page shift.

5.Reported below issue before under regression bug list Refer-MERATIVE-748

This issue is not related to the SOW defined in this PR. The fix will be addressed separately in another PR.

1."Health Plans" under Audience filter and "Life sciences" are appearing twice- refer the screen shot below

Content related issue. We need content authors to be tagging blog posts with the same string value/format.

2.Categories are not in Alphabetical order refer the screen shot below

Content related - We just need to sort the order in the query index spreadsheet.

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/blog
/thought-leadership

[sharathmrft]

@proeung

I have verified fixed issues its working fine.in all the device and I verified in different Browsers as well it looks good to me.

@sahmad-merative @Shalini-SB @keith-kaplan @sachinmesh

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/blog
/thought-leadership