Add Trial Bar Component

[pulkonet]

Add Trial Bar Component according to specs https://lightningdesignsystem.com/components/trial-bar/

I am working on this and will send a prop proposal soon.

[pulkonet]

Here is my initial props proposal:

Name	Type	Description
label	string	The main label of the Trial Bar which acts as a heading for it
dropdownLabel	string	Label for dropdown button
dropdownOptions	array	An array of menu item objects
timeLeft	string	Time (hours/days) left in trial period
timeLeftLabel	string	Label for indicating the time (hours/days) left
onSubscribe	func	Function to be called when subscribe button is hit
subscribeButtonLabel	string	Label for Subscribe button

[pulkonet]

@garygong @davidlygagnon Please see if the props are plausible, I will raise a PR for the same tomorrow morning.

[interactivellama]

@garygong We may want this API to look something more like BuilderHeader. https://react.lightningdesignsystem.com/components/builder-header/

[garygong]

If we were to have the API be more like BuilderHeader, here's what it would look like. I actually like this. What do you think?

TrialBar

Name	Type	Description
onRenderActions	function	Renders the actions section of the trial bar.
children	Element[]	<TrialBarButton /> and <TrialBarDropdown />
className	string	CSS classes to be added to the component.
style	string	Customs styles to be applied to the component.
labels.timeLeft	string	Amount of time left in trial, e.g. '30'
labels.timeLeftUnit	string	Unit of the amount of time left, e.g. 'days'

TrialBarButton

Same props as Button.

TrialBarDropdown

Same props as Dropdown.

Example

Here's a sample using the example from the SLDS page.

<TrialBar
  labels={{ timeLeft: '30', timeLeftUnit: 'days' }}
  onRenderActions={() => (
    <Button variant="success" label="Subscribe Now" />
  )}
>
  <TrialBarButton label="Take the salesforce tour" />
  <TrialBarDropdown
    assistiveText={{ icon: 'Dropdown' }}
    id="dropdown"
    label="Choose your tour"
    options={[
      { label: 'Conquer Your Cases', value: 'item1'},
      { label: 'Automate For Speed', value: 'item2'},
      { label: 'Share Your Knowledge', value: 'item3'},
      { label: 'Finish it up in a Flash', value: 'item4'},
      { type: 'divider' },
      { label: 'Import Contacts and Accounts', value: 'item5', leftIcon: { name: 'utility', category: 'upload' } }
    ]}
    value={['item1']}
  />
</TrialBar>

[interactivellama]

Looks good to me.

Two comments

• I think we have a success variant Button, but the text isn't looking right--It's still blue. That might need to be fixed. It looks like it's actually a link though. Should we have a link/button mix of props for Button or maybe a Link component? Feel free to proceed though. This can be added in the future.
• We may want the time left strings in a labels object, so folks don't need to format it.

Our current success button:

[garygong]

Good point. I updated the example above to use time left. I left the success link (button??) in a render function so that consumers can have that additional flexibility.

By "link/button mix of props" do you mean that we'd have something like a <Button link /> prop that would cause <a> to be used instead of <button>? This seems to be consistent with how the SLDS Button page has samples for links, too.

[interactivellama]

Yes. Something like that. We’d deprecate link variant I think so that the link prop could be any of the button variants.

Although link variant may be a visual variant, so we might want to keep it. It needs to be explored.

[interactivellama]

@aswinshenoy might be interested in picking up the button/link issue. The user story still needs to be groomed /spec decides, but props could be proposed. @aswinshenoy would you be interested in working on the missing button options for the first evaluation period?

[davidlygagnon]

@interactivellama Did we file an issue for the button/link? I noticed that when testing the trial bar component.