Patch request for Badge component

[pradumangoyal]

Added support for Badge component. @interactivellama @futuremint, can you please review it and suggest some changes. I am up for any changes suggested.

Additional description

I was going through the code base and for better understanding, I add the Badge component from https://www.lightningdesignsystem.com/components/badges/ to SLDS

Props taken

• color - Color of the badge
• className - CSS classes that are applied to the span
• iconCategory - Name of the icon category
• iconClassName - CSS classes to be added to icon
• iconName - Name of the icon
• iconPath - Path to the icon
• iconPosition - Position of the icon
• id - HTML id applied on the badge span
• iconTitle - Description of icon

Preview

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/.
• 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.

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.

[tanhengyeow]

Took a quick look and pointed out some things I've learnt while implementing components as well :)

Also, don't forget to add your component's meta description in package.json, under the "components" key. You can refer to here, point 3 last step.

[pradumangoyal]

@tanhengyeow, I have resolved whatever changes suggested by you. Can you check it out again?

[pradumangoyal]

Hi, @interactivellama I have made the code changes and now is passing all of the 4 checks. Can you review it?

[interactivellama]

This is usually handled by an higher order component called IconSettings

[interactivellama]

Many of the older components do use iconCategory and iconName but the best pattern is to pass in a whole <Icon> so that the Icon props do not have to be duplicated within badge also https://github.com/salesforce/design-system-react/blob/master/docs/codebase-overview.md#reuse-existing-component-props-by-using-component-no-button-iconclassname-

It looks like there are special classnames for badge that are on placed on the icon, so you may want to duplicate the icon passed into a prop and the classNames that way before render.

Please update.

[pradumangoyal]

Thanks for the review. I will push the required changes in 3-4 hours.

[stale]

This issue has been automatically marked as stale, because it has not had recent activity. It will be closed if no further activity occurs. Maintainers are responsible for tech debt and project health. This is most likely a new components or component feature request. Please submit a pull request for or request feedback on this feature. Thank you.

[stale]

This issue has been automatically marked as stale, because it has not had recent activity. It will be closed if no further activity occurs. Maintainers are responsible for tech debt and project health. This is most likely a new components or component feature request. Please submit a pull request for or request feedback on this feature. Thank you.

[aswinshenoy]

I would like to work on this as it could be useful for me in adding Summary Details component.