[Shopper Experience] ImageTile component

[adamraya]

Description

The PR adds the equivalent SFRA Page designer ImageTile component to the PWA.

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

• Added simple ImageTile component and test.

How to Test-Drive This PR

1. Start the Retail React template

npm run start --prefix packages/template-retail-react-app/

2. Navigate to url http://localhost:3000/experience
3. Verify the component works as expected.
4. Confirm the same SFRA functionality is implemented and tests pass.

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)

[bendvc]

Where did these props come from? Below is what the API returns for a ImageTile component:

            "data": {
              "image": {
                "_type": "Image",
                "focalPoint": {
                  "_type": "Imagefocalpoint",
                  "x": 0.5,
                  "y": 0.5
                },
                "metaData": {
                  "_type": "Imagemetadata",
                  "height": 179,
                  "width": 410
                },
                "url": "https://development-functional38-qa222.demandware.net/on/demandware.static/-/Library-Sites-RefArchSharedLibrary/default/dwd35a6963/placeholder 410x179.4.png"
              }
            },

So ideally we implement those props and nothing else.

[bendvc]

Currently my implementation of the base components will spread the serialized component onto the provided component.

So technically the only prop you'd have now is id, data and typeId. I'm wondering if this is something we should change to make the component implementations look nicer and more reusable.

Lets talk about that tomorrow.

[bendvc]

Lets drop any utility classes if they aren't doing anything. Our convention currently in the template is to use inline styles (I think thats our convention).

Also, I'm guessing the reason why the class name for the sfra component is called photo tile, is because that was it's initial implementation and then it was changed on the surface because someone didn't like the look of it in the page designer.

So if we choose to use classnames for our components we should use the same name as our files. So in this case image-tile not photo-tile

[bendvc]

Do we need this "rest" object? For the most part this component isn't going to be used directly by a developer, it'll only be created by the Page/Region components, so we don't need this ability to passthrough props. Especially when it makes defining your PropTypes impossible.

[bendvc]

From the looks of the components in SFRA they have a pattern where the outermost element of the component is labelled as "-container". Although I'm not saying we need to duplicate this 1-1 I do think that the outermost element should be something other than a "figure" element.

A div with a class name of image-tile would probably suffice.