Carousel: Make controlled component

[kevinparkerson]

Fixes #1958

NOTE: MERGE #1973 FIRST

Just a few notes with this one:

• I changed all "AutoPlay" instances to "Autoplay" to be consistent with the hasAutoplay prop. The assistive text changed to autoplayButton when doing this, otherwise nothing else changed API-wise. Capitalizing the P in autoplay would have changed much more of the API (though this is a prototype component so does it matter?)
• Should it be onRequestPanelChange or onPanelChange? Same for onRequestAutoplayToggle. I wasn't sure but for some reason onRequestPanelChange feels more correct
• I didn't even realize isInfinite was an available prop that was supposed to control whether the carousel can loop back to the first or last panel while navigating. It wasn't working properly, but I have now fixed it so it behaves at it should. Additionally, I made autoplay either stop or loop depending on what the value of that prop is. Would you agree that is appropriate behavior?
• I removed the indicatorStyles prop as it did nothing and seemed pointless

---

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.

[interactivellama]

Here is the lowdown on callback names https://github.com/salesforce/design-system-react/blob/master/docs/codebase-overview.md#prefix-onrequestaction-to-pre-state-change-callbacks-functions

[interactivellama]

Some minor questions/comments.

[interactivellama]

NaNpx seems concerning.

[kevinparkerson]

I believe these are the result of code within canUseDOM / canUseEventListeners conditionals not running. There are actually 56 instances of this in the snapshot, and each one is linked to numbers determined by the stageWidth DOM measurement. Since browser tests and testing the component manually show there is no issue, I think these can be ignored.

[interactivellama]

I'm not sure I know of anything else 1-indexed in the library.

[kevinparkerson]

Changed to 0 indexing

[interactivellama]

Merged! Do you think you could write a jQuery version of this Carousel next week?

[interactivellama]

🤣