Stats: Update Components to Use StatsTabs / StatsTab

[timmyc]

Part of the great stats cleanup in the sky project - this branch aims to standardize all the "tabs" used throughout stats to utilize the <StatsTabs> and <StatsTab> components.

To Test

Thanks in advance for testing this branch out as it does cover quite a few parts of stats. For your valiant efforts, I will thank you with this.

Each of the following components use either <StatsTabs> and/or <StatsTab> and will need to be verified they still function as they do in production, and visually look the same:

Chart Tabs

Viewed on a site stats page for anytime period. Click on each tab, verify they all function as expected

Summary Chart Tabs

These charts are shown on summary pages for Post Details and Video views, and can be accessed by clicking on an entry in the Post & Pages component. Test that no hover state is shown for this tab, and the cursor does not change on hover.

Latest Post Summary

Accessed via the Insights page, verify the tabs visually look the same, and the Views tab clicks through to the post detail page.

Today's Stats

Also on the Insights Page. Verify it looks the same, and that you can click on each tab, and that when you do so, the corresponding chart is loaded ( tab is active ) on the site stats page

All Time

The last on the insights page, again validate it all looks the same and that there is not any hover state properties on the tabs.

Overview

Accessed from /stats - pretty much identical to "Today's Stats" above as far as testing goes.

[timmyc]

@jancavan or @alternatekev if you wouldn't mind giving the new stats tabs scss file a look that would be great. I have yet to update it, just copied it over.

One known issue that needs to be addressed is to utilize the no-link className to disable the hover state on tabs that don't really link anywhere. This mainly is used on the Insights page, but also holds true on the summary charts.

[alternatekev]

@timmyc Did you rename the .module-tabs classNames to .stats-tabs? If so then a file I created in the branch where I'm updating SCSS can be trashed once we merge this (which looks just like yours here but uses .module instead of .stats).

Are you looking for a full refactor of that new SCSS file or just a once-over that it's not broken?

[jancavan]

Great job @timmyc, I'm cleaning up the css now. One thing I noticed is all tabs everywhere are clickable now, but All-time tabs shouldn't be since they're not supposed to link anywhere hence the no-link class.

[timmyc]

@jancavan I will look into the clicking stuff. Some css issues I have seen is hover-state on "all time" is changing to blue and should not - and the background on the in-active chart tabs.

[timmyc]

@jancavan in bf32da9 I cleaned up the tab logic further to use tags only when there is an href or tabClick function. This fixed the hover state in all time.

[timmyc]

Okay rebased this one again, can we get a quick review on this @jblz or @alternatekev ?

[jancavan]

@timmyc Cleaned up CSS files here: 3a05edb. I think I may have forgotten to commit my changes!

[jblz]

nice catch.

[jblz]

Works well and code looks good. Great job!