@W-15714251: Show badges on product tile

[unandyala]

Description

Enhance product tile to show product badges.

• Badges are shown based on the product custom properties. Default/out-of-the-box badges that are available are New and Sale which are based on the custom properties c_isSale and c_isNew

• Users can also pass other boolean custom properties to display as badges. For example we can add a new custom property isCloseout and pass it as a badgeLabels to the ProductTile component. (Example: <ProductTile badgeLabels={[{label: 'Closeout', color: 'red'}]} )

• BadgeGroup (it is a group because more than one badge can be displayed) is built as a separate component. It includes all the required data as properties (including product). The intention is that it makes it easy for users to override/extend the implementation

Types of Changes

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Documentation update
• Breaking change (could cause existing functionality to not work as expected)
• Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

• Removing a public function or component or prop
• Adding a required argument to a function
• Changing the data type of a function parameter or return value
• Adding a new peer dependency to package.json

Changes

Render badges on product tile based on the product custom attributes

How to Test-Drive This PR

• Checkout code and run npm run start
• Search for "striped", you should see some of the tiles rendered with badge "SALE" & "NEW"

Checklists

General

• Changes are covered by test cases
• CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

• There are no changes to UI

or...

• Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
• Changes comply with WCAG 2.0 guidelines levels A and AA
• Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

• Changes include a UI text update in the Retail React App (which requires translation)