Add popular sources section to Brave News

[fallaciousreasoning]

Resolves brave/brave-browser#24324

Note: This PR doesn't add a new page like the issue and the UX design, it simply adds the same UI as the Suggestions section. I think we need to have a chat with the UX folks about exactly how this should work.

Popular sources, default

Popular sources, more loaded

Submitter Checklist:

• I confirm that no security/privacy review is needed, or that I have requested one
• There is a ticket for my issue
• Used Github auto-closing keywords in the PR description above
• Wrote a good PR/commit description
• Squashed any review feedback or "fixup" commits before merge, so that history is a record of what happened in the repo, not your PR
• Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
• Checked the PR locally: npm run test -- brave_browser_tests, npm run test -- brave_unit_tests, npm run lint, npm run gn_check, npm run tslint
• Ran git rebase master (if needed)

Reviewer Checklist:

• A security review is not needed, or a link to one is included in the PR description
• New files have MPL-2.0 license header
• Adequate test coverage exists to prevent regressions
• Major classes, functions and non-trivial code blocks are well-commented
• Changes in component dependencies are properly reflected in gn
• Code follows the style guide
• Test plan is specified in PR before merging

After-merge Checklist:

• The associated issue milestone is set to the smallest version that the
  changes has landed on
• All relevant documentation has been updated, for instance:
  • https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
  • https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
  • https://github.com/brave/brave-browser/wiki/Fingerprinting-Protections
  • https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
  • https://github.com/brave/brave-browser/wiki/Custom-Headers
  • https://github.com/brave/brave-browser/wiki/Web-Compatibility-Exceptions-in-Brave
  • https://github.com/brave/brave-browser/wiki/QA-Guide
  • https://github.com/brave/brave-browser/wiki/P3A

Test Plan:

1. Enable the Brave News V2 flag
2. In the customize brave news dialog, there should be a popular sources section.

[petemill]

I think the design or spec calls for a single-row "carousel" which has a "view all" button that changes the "page" being viewed to being only all the sources ordered by popularity. However, this version with the "Show more" button will still work well as a first iteration, especially when we remove the "All sources" section at the bottom.

Apart from one small piece of feedback, this works well and seems ready.

[fallaciousreasoning]

Yeah, I deliberately didn't build that new UI because things seemed a little unsettled there and a bit inconsistent. I think now we have a bit more clarity (don't show all feeds on the main page, show all channels, carousels, settled ordering) I think we're ready for an update.

[brave-builds]

A Storybook has been deployed to preview UI for the latest push

[stephendonner]

Verified PASSED using

Brave	1.47.47 Chromium: 107.0.5304.91 (Official Build) nightly (x86_64)
Revision	3d5948960d62418160796d5831a4d2d7d6c90fa8-refs/branch-heads/5304@{#1097}
OS	macOS Version 13.1 (Build 22C5033e)

1. installed 1.47.47
2. launched Brave
3. clicked on Skip welcome tour
4. opened brave://flags
5. set brave://flags/#brave-news-v2 to Enabled
6. clicked on Relaunch
7. opened a new-tab page
8. clicked on Customize
9. clicked on Brave News
10. clicked on Turn on Brave News
11. clicked on Show more beneath Popular

Confirmed clicking on Show more on the Popular sources section expanded to show me them all

Light	Dark