Description

In this PR we enhance the ProductTile component to show a selectable attribute in the form of a swatch group. By default this attribute is "color" but can be changed by updating the constant file. This will allow the customer to view different colors of any given master/variant product type before clicking into the product detail page.

Types of Changes

[ ] Bug fix (non-breaking change that fixes an issue)
[x] 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 swatches for selectable attribute
Ensure that links are clickable and user can go directly to variant on the PDP

How to Test-Drive This PR

Checkout code and run npm run start
Visit any PLP (mens ties is a good on), you should see tiles rendered with variation attributes if they are some (when the product is a master/variant)
Hover over the swatch to change the image, click it to go directly to the PLP for the clicked variation

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