Trial Bar: Add component #2025
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`DOM snapshots SLDSTrialBar Default 1`] = ` | ||
| <div | ||
| className="slds-p-around_medium" | ||
| > | ||
| <div> | ||
| <div | ||
| className="slds-trial-header slds-grid" | ||
| > | ||
| <div | ||
| className="slds-grid" | ||
| > | ||
| <button | ||
| className="slds-button slds-button_inverse slds-m-right_small" | ||
| disabled={false} | ||
| onClick={[Function]} | ||
| style={ | ||
| Object { | ||
| "border": 0, | ||
| "padding": 0, | ||
| } | ||
| } | ||
| type="button" | ||
| > | ||
| Take the salesforce tour | ||
| </button> | ||
| <div | ||
| className="slds-dropdown-trigger slds-dropdown-trigger_click slds-grid" | ||
| id="dropdown" | ||
| onClick={[Function]} | ||
| onFocus={null} | ||
| onKeyDown={[Function]} | ||
| onMouseEnter={null} | ||
| onMouseLeave={null} | ||
| > | ||
| <button | ||
| aria-expanded={false} | ||
| aria-haspopup={true} | ||
| className="slds-button slds-button_inverse ignore-click-dropdown" | ||
| disabled={false} | ||
| onClick={[Function]} | ||
| style={ | ||
| Object { | ||
| "border": 0, | ||
| "height": "100%", | ||
| "padding": 0, | ||
| } | ||
| } | ||
| tabIndex="0" | ||
| type="button" | ||
| > | ||
| <svg | ||
| aria-hidden="true" | ||
| className="slds-button__icon slds-button__icon_left" | ||
| > | ||
| <use | ||
| xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#right" | ||
| /> | ||
| </svg> | ||
| Choose your tour | ||
| </button> | ||
| </div> | ||
| </div> | ||
| <div | ||
| className="slds-grid slds-grid_vertical-align-center slds-col_bump-left" | ||
| > | ||
| <span | ||
| className="slds-box slds-box_xx-small slds-theme_default" | ||
| > | ||
| 30 | ||
| </span> | ||
| <span | ||
| className="slds-m-horizontal_x-small" | ||
| > | ||
| days | ||
| left in trial | ||
| </span> | ||
| <button | ||
| className="slds-button slds-button_success" | ||
| disabled={false} | ||
| onClick={[Function]} | ||
| type="button" | ||
| > | ||
| Subscribe Now | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| // This object is imported into the documentation site. An example for the documentation site should be part of the pull request for the component. The object key is the kabob case of the "URL folder". In the case of `http://localhost:8080/components/app-launcher/`, `app-launcher` is the `key`. The folder name is created by `components.component` value in `package.json`. The following uses webpack's raw-loader plugin to get "text files" that will be eval()'d by CodeMirror within the documentation site on page load. | ||
|
|
||
| /* eslint-env node */ | ||
| /* eslint-disable global-require */ | ||
|
|
||
| const siteStories = [ | ||
| require('raw-loader!@salesforce/design-system-react/components/trial-bar/__examples__/default.jsx'), | ||
| ]; | ||
|
|
||
| module.exports = siteStories; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import React from 'react'; | ||
| import { storiesOf } from '@storybook/react'; | ||
| import { TRIAL_BAR } from '../../../utilities/constants'; | ||
| import Default from '../__examples__/default'; | ||
|
|
||
| storiesOf(TRIAL_BAR, module) | ||
| .addDecorator((getStory) => ( | ||
| <div className="slds-p-around_medium">{getStory()}</div> | ||
| )) | ||
| .add('Default', () => <Default />); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import React from 'react'; | ||
| import TrialBar from '~/components/trial-bar'; | ||
| import TrialBarDropdown from '~/components/trial-bar/dropdown'; | ||
| import TrialBarButton from '~/components/trial-bar/button'; | ||
| import IconSettings from '~/components/icon-settings'; | ||
| import Button from '~/components/button'; | ||
|
|
||
| class Example extends React.Component { | ||
| render() { | ||
| return ( | ||
| <IconSettings iconPath="/assets/icons"> | ||
| <div> | ||
| <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: 'upload', category: 'utility' }, | ||
| }, | ||
| ]} | ||
| value={['item1']} | ||
| /> | ||
| </TrialBar> | ||
| </div> | ||
| </IconSettings> | ||
| ); | ||
| } | ||
| } | ||
| Example.displayName = 'TrialBarDefault'; | ||
|
|
||
| export default Example; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import React from 'react'; | ||
| import Button from '~/components/button'; | ||
| import { TRIAL_BAR_BUTTON } from '../../utilities/constants'; | ||
|
|
||
| // This component accepts the same props as Button. | ||
| // eslint-disable-next-line react/forbid-foreign-prop-types | ||
| const { propTypes } = Button; | ||
|
There was a problem hiding this comment. I wonder if we really need this and whether it will break people that are using the There was a problem hiding this comment. I used There was a problem hiding this comment. Ok - let's leave as is then. |
||
|
|
||
| /** | ||
| * A [Button](/components/buttons/) within the Trial Bar. | ||
| */ | ||
| const TrialBarButton = (props) => ( | ||
| <Button | ||
| {...props} | ||
| inverse | ||
| style={{ border: 0, padding: 0 }} | ||
| className="slds-m-right_small" | ||
| /> | ||
| ); | ||
|
|
||
| TrialBarButton.propTypes = propTypes; | ||
| TrialBarButton.displayName = TRIAL_BAR_BUTTON; | ||
|
|
||
| export default TrialBarButton; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "component": "trial-bar", | ||
| "status": "prototype", | ||
| "display-name": "Trial Bars", | ||
| "SLDS-component-path": "/components/trial-bar", | ||
| "url-slug": "trial-bars" | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 runnpm build:docsand 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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I have added multi-line comments right before the components declaration but haven't removed the
propTypes. It is as done inBuilderHeadercomponent that I was using as a reference. Let me know if this needs further updation.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Cool - I'll double check by building the doc site locally.