Component: Date Picker Display / Launcher

[timmyc]

Child task of #59

The Date Picker will be shown in a variety of situations ( ref the parent task above and linked p2 post for more design background there ), but one recurring use case is it being launched via a drop/down popover selector. For example, this is how it would appear when launched from the Store Performance block:

Closed

Open

Based off the design, it seems the launcher/display needs to be aware of possible props:

• isOpen <Bool> Is the date picker currently open/shown
• label <String/> The active date range, summarized for the label shown

And it seems like it should be aware of the start/end date of both ranges ( the range being shown and the one being compared against ). Though not 💯 certain on that.

Design Needs
I did note this in a prior p2 conversation that thus far most of the designs have always shown "Today vs Yesterday" in the launcher label. I think we need to have some design mocks done for other things like custom date ranges, or "This Quarter vs Last Quarter" - strings that will overflow the minimal space we have to display text. /cc @LevinMedia @jameskoster

[LevinMedia]

@timmyc - @jameskoster and I have been noodling on a lighter version of the date range picker for the store performance card. It's still a bit of a work in progress, but I believe this will be more in line with the final product: p6riRB-3aN-p2

[justinshreve]

Since we need two different date pickers: 1) the Date Picker flow @psealock has been working on - still in use on Analytics pages p6riRB-3ai-p2 and 2) the implementation of a simplified range picker for use on the store performance card, I've created a separate issue over at #69.