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

amol-anand · 2023-07-14T18:33:07Z

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

This reverts commit eac35e9.

aem-code-sync · 2023-07-14T18:33:10Z

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 · 2023-07-14T18:33:30Z

Page	Scores	Audits	Google
/blog
/thought-leadership

aem-code-sync · 2023-07-14T18:40:49Z

Page	Scores	Audits	Google
/blog
/thought-leadership

proeung · 2023-07-14T18:51:40Z

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 · 2023-07-17T11:48:04Z

@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 · 2023-07-17T14:15:02Z

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 · 2023-07-17T15:01:56Z

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.

sachinmesh · 2023-07-18T06:31:32Z

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 · 2023-07-18T19:10:00Z

Page	Scores	Audits	Google
/blog
/thought-leadership

aem-code-sync · 2023-07-18T19:11:43Z

Page	Scores	Audits	Google
/blog
/thought-leadership

proeung · 2023-07-18T19:21:40Z

@keith-kaplan Just pushed up a commit to render the display-title if it exists and fallback to title (see - comment). bd2f3bf

@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

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.

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.

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)

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

This is fixed.

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.

helms-charity

Looks good to me.

aem-code-sync · 2023-07-18T21:26:21Z

Page	Scores	Audits	Google
/blog
/thought-leadership

sachinmesh · 2023-07-19T10:21:56Z

Hi Team,
Some observations

Thought leadership font should be Alliance No.1 - 21px medium and not regular
Selected tick mark in filter is too big.

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

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

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

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

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

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

sharathmrft · 2023-07-19T10:57:20Z

@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 · 2023-07-19T11:42:31Z

@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 · 2023-07-19T20:13:00Z

Page	Scores	Audits	Google
/blog
/thought-leadership

proeung · 2023-07-19T21:20:22Z

@sachinmesh @sharathmrft Just just pushed up a commit (c156f24 | 872a4e1) 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 · 2023-07-19T21:27:32Z

Page	Scores	Audits	Google
/blog
/thought-leadership

sachinmesh

Checked and its good to go team.

sharathmrft · 2023-07-20T10:23:46Z

@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

sharathmrft

It Looks good to me.

aem-code-sync · 2023-07-20T13:56:46Z

Page	Scores	Audits	Google
/blog
/thought-leadership

* feat(podcast): Add podcast iframe block (#249) * Podcast block creation. * Podcast iframe block creation. * Delay js for podcast. * Refactoring of code part - 1. * Refactoring of code part-2. * CSS regactoring changes. * Update scripts/delayed.js Co-authored-by: Putra Bonaccorsi <putra.roeung@gmail.com> * Spotify and apple podcast csp changes. * Apple podcast iframe changes. --------- Co-authored-by: Putra Bonaccorsi <putra.roeung@gmail.com> * feat(podcast): Add podcast iframe block (#249) * Podcast block creation. * Podcast iframe block creation. * Delay js for podcast. * Refactoring of code part - 1. * Refactoring of code part-2. * CSS regactoring changes. * Update scripts/delayed.js Co-authored-by: Putra Bonaccorsi <putra.roeung@gmail.com> * Spotify and apple podcast csp changes. * Apple podcast iframe changes. --------- Co-authored-by: Putra Bonaccorsi <putra.roeung@gmail.com> * feat(related-documents): add purple theme and adjust rendering logic when there's no post (#250) * added card fetching functionality to Linkable cards * fixed lint issue * lint issues fixes * lint issues fixed * Added auto fetching to related documents * lint issues fixed * Update linkable-cards.css * removed commented code --------- Co-authored-by: Putra Bonaccorsi <putra.roeung@gmail.com> * feat(thought-leadership): Add "Hero banner" block (#273) * Podcast block creation. * Podcast iframe block creation. * Delay js for podcast. * Refactoring of code part - 1. * Refactoring of code part-2. * CSS regactoring changes. * Update scripts/delayed.js Co-authored-by: Putra Bonaccorsi <putra.roeung@gmail.com> * feat(thought-leadership): Add "Hero banner" * feat(thought-leadership): Js lint fix for newline. * feat(hero-banner): Css refactoring and lint fixes. * feat(hero-banner): JS refactoring. * feat(hero-banner): Code refactoring changes. --------- Co-authored-by: Putra Bonaccorsi <putra.roeung@gmail.com> * feat(thought-leadership): add sidebar filtering and results (#286) * thought leadership home added * Added content type * Fixed lint issues * Review comments addressed * Lint issues fixed * lint issue fixed * Update blog-home.js * sorting of filters added * Revert "sorting of filters added" This reverts commit eac35e9. * added sorting to side filters * removed console from script.js * Filters selection fixed * removed sorting and fixed solution categories * fixed logic of what should be shown in TL * feat(thought-leadership): change sidebar filter to assettype * feat(thought-leadership): improve the rendering of sidebar title * feat(thought-leadership): enhance getAllBlogs and getThoughtLeadership * feat(thought-leadership): adjust hero block * feat(thought-leadership): rename card classes * feat(thought-leadership): use display-title if it exists * feat(thought-leadership): adjust filter width * feat(thought-leadership): address QA feedback * feat(thought-leadership): fix filter reset count --------- Co-authored-by: Saad Ahmad <sahmed3@merative.com> Co-authored-by: Putra Bonaccorsi <putra.roeung@gmail.com> * fix(thought-leadership): result results for content type filter (#294) * feat(thought-leadership): add URL/query parameter to sidebar filters (#279) * Added query param deep linking to thought leadership * lint issues fixed * feat(thought-leadership): updated latest code * feat(thought-leadership): fixed filter issue * review comments fixed --------- Co-authored-by: Putra Bonaccorsi <putra.roeung@gmail.com> * fix(thought-leadership): render display-title if it exists (#303) * fix(thought-leadership): render display-title if it exists * fix(thought-leadership): fix lint --------- Co-authored-by: nimithshetty17 <111452145+nimithshetty17@users.noreply.github.com> Co-authored-by: sahmad-merative <135624814+sahmad-merative@users.noreply.github.com> Co-authored-by: Amol Anand <amol-anand@users.noreply.github.com> Co-authored-by: Saad Ahmad <sahmed3@merative.com>

sahmad-merative and others added 15 commits July 10, 2023 13:58

thought leadership home added

c25189a

Added content type

5ef78ba

Fixed lint issues

0f22f34

Review comments addressed

dbc955c

Lint issues fixed

b64b10a

lint issue fixed

54a9bf4

Merge branch 'feat/thought-leadership' into 743-sidebar

61ae28e

Update blog-home.js

eaf2834

sorting of filters added

eac35e9

Revert "sorting of filters added"

0a6243e

This reverts commit eac35e9.

added sorting to side filters

866a12b

removed console from script.js

69f8ee8

Filters selection fixed

b52246a

removed sorting and fixed solution categories

c0e90e6

fixed logic of what should be shown in TL

c698f7a

amol-anand requested review from proeung, helms-charity and sahmad-merative July 14, 2023 18:33

proeung changed the title ~~743 sidebar NEW PR~~ feat(thought-leadership): add sidebar filtering and results Jul 14, 2023

proeung self-assigned this Jul 14, 2023

proeung added the Thought Leadership Used for work related to Thought Leadership label Jul 14, 2023

proeung mentioned this pull request Jul 14, 2023

feat(thought-leadership): Add sidebar filtering and results #274

Closed

Merge branch 'feat/thought-leadership' into 743-sidebar

a12f085

sachinmesh closed this Jul 18, 2023

sachinmesh reopened this Jul 18, 2023

proeung added 2 commits July 18, 2023 14:44

feat(thought-leadership): rename card classes

af4dbbc

feat(thought-leadership): use display-title if it exists

bd2f3bf

helms-charity reviewed Jul 18, 2023

View reviewed changes

feat(thought-leadership): adjust filter width

6e640f5

proeung requested a review from keith-kaplan July 18, 2023 21:26

feat(thought-leadership): address QA feedback

c156f24

feat(thought-leadership): fix filter reset count

872a4e1

sachinmesh approved these changes Jul 20, 2023

View reviewed changes

sachinmesh added Ready to merge Label for the pull requests that are ready to merge and removed Needs design QA PRs on feature requests and new components have to get design approval before merge. labels Jul 20, 2023

sharathmrft approved these changes Jul 20, 2023

View reviewed changes

proeung merged commit 4f544aa into feat/thought-leadership Jul 20, 2023
2 checks passed

proeung deleted the 743-sidebar branch July 20, 2023 13:57

proeung mentioned this pull request Jul 20, 2023

feat(thought-leadership): add URL/query parameter to sidebar filters #279

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

amol-anand commented Jul 14, 2023

aem-code-sync bot commented Jul 14, 2023

aem-code-sync bot commented Jul 14, 2023

aem-code-sync bot commented Jul 14, 2023

proeung commented Jul 14, 2023

sharathmrft commented Jul 17, 2023

keith-kaplan commented Jul 17, 2023

proeung commented Jul 17, 2023

sachinmesh commented Jul 18, 2023

aem-code-sync bot commented Jul 18, 2023

aem-code-sync bot commented Jul 18, 2023

proeung commented Jul 18, 2023 •

edited

Loading

helms-charity left a comment

aem-code-sync bot commented Jul 18, 2023

sachinmesh commented Jul 19, 2023 •

edited

Loading

sharathmrft commented Jul 19, 2023

sharathmrft commented Jul 19, 2023

aem-code-sync bot commented Jul 19, 2023

proeung commented Jul 19, 2023 •

edited

Loading

aem-code-sync bot commented Jul 19, 2023

sachinmesh left a comment

sharathmrft commented Jul 20, 2023

sharathmrft left a comment

aem-code-sync bot commented Jul 20, 2023

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

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

Conversation

amol-anand commented Jul 14, 2023

Issue

Description

Design Specs

Test URLs

aem-code-sync bot commented Jul 14, 2023

aem-code-sync bot commented Jul 14, 2023

aem-code-sync bot commented Jul 14, 2023

proeung commented Jul 14, 2023

sharathmrft commented Jul 17, 2023

keith-kaplan commented Jul 17, 2023

proeung commented Jul 17, 2023

sachinmesh commented Jul 18, 2023

aem-code-sync bot commented Jul 18, 2023

aem-code-sync bot commented Jul 18, 2023

proeung commented Jul 18, 2023 • edited Loading

helms-charity left a comment

Choose a reason for hiding this comment

aem-code-sync bot commented Jul 18, 2023

sachinmesh commented Jul 19, 2023 • edited Loading

sharathmrft commented Jul 19, 2023

sharathmrft commented Jul 19, 2023

aem-code-sync bot commented Jul 19, 2023

proeung commented Jul 19, 2023 • edited Loading

aem-code-sync bot commented Jul 19, 2023

sachinmesh left a comment

Choose a reason for hiding this comment

sharathmrft commented Jul 20, 2023

sharathmrft left a comment

Choose a reason for hiding this comment

aem-code-sync bot commented Jul 20, 2023

proeung commented Jul 18, 2023 •

edited

Loading

sachinmesh commented Jul 19, 2023 •

edited

Loading

proeung commented Jul 19, 2023 •

edited

Loading