Trial Bar: Add component

[pulkonet]

Fixes #2006

Also adds an inverse variant to the dropdown menu component, to work with Trial Bar.

Additional description

---

CONTRIBUTOR checklist (do not remove)

Please complete for every pull request

• First-time contributors should sign the Contributor License Agreement. It's a fancy way of saying that you are giving away your contribution to this project. If you haven't before, wait a few minutes and a bot will comment on this pull request with instructions.
• npm run lint:fix has been run and linting passes.
• Mocha, Jest (Storyshots), and components/component-docs.json CI tests pass (npm test).
• Tests have been added for new props to prevent regressions in the future. See readme.
• Review the appropriate Storybook stories. Open http://localhost:9001/.
• Review tests are passing in the browser. Open http://localhost:8001/.
• Review markup conforms to SLDS by looking at DOM snapshot strings.

REVIEWER checklist (do not remove)

• TravisCI tests pass. This includes linting, Mocha, Jest, Storyshots, and components/component-docs.json tests.
• Tests have been added for new props to prevent regressions in the future. See readme.
• Review the appropriate Storybook stories. Open http://localhost:9001/.
• The Accessibility panel of each Storybook story has 0 violations (aXe). Open http://localhost:9001/.
• Review tests are passing in the browser. Open http://localhost:8001/.
• Review markup conforms to SLDS by looking at DOM snapshot strings.

Required only if there are markup / UX changes

• Add year-first date and commit SHA to last-slds-markup-review in package.json and push.
• Request a review of the deployed Heroku app by the Salesforce UX Accessibility Team.
• Add year-first review date, and commit SHA, last-accessibility-review, to package.json and push.
• While the contributor's branch is checked out, run npm run local-update within locally cloned site repo to confirm the site will function correctly at the next release.

[garygong]

Awesome! @davidlygagnon and I will take a look at this PR tomorrow!

[interactivellama]

@garygong @davidlygagnon I would recommend non-custom props for TrailBar's Button and Dropdown link to the Button and Dropdown doc pages in the comment on this line inside a comment which would be the larger type on the component description. This would allow the removal of the prop table from the docs and decrease duplicate lines of code which may not be updated in the future, for instance, when we add props to dropdown.

Something closer to Radio on this page https://react.lightningdesignsystem.com/components/radio-groups/

Source: https://github.com/salesforce/design-system-react/blob/master/components/radio-group/index.jsx#L4

[davidlygagnon]

Looks good Pulkit! Just left a few comments. Thanks

[davidlygagnon]

Is it really necessary to add a new prop inverse on dropdown component since it's only adding a class name? Maybe we can just use className instead?

[pulkonet]

We can use just the className but isn't having an inverse variant of the dropdown worth it?

[davidlygagnon]

I wonder if we really need this and whether it will break people that are using the babel-plugin-transform-react-remove-prop-types plugin to remove props. Would it be sufficient to just have a link pointing to the Dropdown component?

[pulkonet]

I used BuilderHeader for reference, if that's working for the consumers I don't think this is much different. I will update it if need be.

[davidlygagnon]

Ok - let's leave as is then.

[interactivellama]

This is a doc site matter, so it's not very obvious, but this comment should follow the way that component descriptions should to be written to be picked up by react-docgen. I think that requires the comment it to in multi-line quote comment on the line directly before the class/function declaration. A markdown URL to the Button page would be good https://react.lightningdesignsystem.com/components/buttons/ . I think there are other examples in the library. The easiest way to check is to run npm build:docs and make sure this component shows up.

@davidlygagnon I'd recommend running the doc site consuming this branch locally to make sure all the comments and props show up correctly--or maintainers can fix this up, since the doc site isn't public. Either way is fine. As you know, the whole library/doc site can be finicky. Kevin and I spent some time with Setup Assistant yesterday.

[pulkonet]

I have added multi-line comments right before the components declaration but haven't removed the propTypes. It is as done in BuilderHeader component that I was using as a reference. Let me know if this needs further updation.

[interactivellama]

I'm referring to doc comments only. Please see https://github.com/salesforce/design-system-react/blob/master/components/builder-header/nav-dropdown.jsx#L16

which shows up on the doc site here:

Please add a link to the doc site Button there.

[davidlygagnon]

Cool - I'll double check by building the doc site locally.

[davidlygagnon]

Looks good to me!

Will be merging today.

[davidlygagnon]

@pulkonet Before we merge this, we need to fix the docs:

1. add trial-bar to site.stories.jsx.

2. The docs are showing the wrong component.

Please update components/trial-bar/__docs__/site-stories.js to use trial-bar instead of progress-bar.

[davidlygagnon]

@pulkonet I'm still seeing a few console errors on launching the docs site. We need to expose the sub-components of trial-bar as well (TrialBarButton, TrialBarDropdown).

We're almost there!

[davidlygagnon]

@pulkonet I'm ready to merge it now. Doc site shows the component correctly. Can you fix the merge conflicts. Thanks!