[LOOM-1296][withOpenEvents]: Place openable styling within BpkInput

[mungodewar]

Place openable styling within BpkInput.

• Using data- attribute field we can signal to BpkInput styling that it should be rendered with a cursor: pointer.

Why not use a regular prop?

• I didn't want to add to the public api of BpkInput (it's really only valid with the withOpenEvents HOC)
• I didn't want to make a breaking change (to bring the logic of withOpenEvents inside BpkInput) and control that behaviour through props.

An alternative could be:

• Bring most of the logic inside BpkInput
• Provide a openable prop to BpkINput
• withOpenEvents controls just the openable prop
• BpkInput then controls it's own cursor styling

The above seems like a much larger change, so thought before I'd embark on that to get some feedback on the above first.

Remember to include the following changes:

• Ensure the PR title includes the name of the component you are changing so it's clear in the release notes for consumers of the changes in the version e.g [KOA-123][BpkButton] Updating the colour
• README.md (If you have created a new component)
• Component README.md
• Tests
• Storybook examples created/updated
• Type declaration (.d.ts) files updated
• For breaking changes or deprecating components/properties, migration guides added to the description of the PR. If the guide has large changes, consider creating a new Markdown page inside the component's docs folder and link it here

[github-actions]

	Warnings
⚠️	Package source files (e.g. packages/package-name/src/Component.tsx) were updated, but type files weren't. Have you checked that no types have changed?

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against 360ae5e

[github-actions]

Visit https://backpack.github.io/storybook-prs/3408 to see this build running in a browser.

[metalix2]

What's this being used for?

[mungodewar]

The wrapDisplayName basically will render something like: withOpenEvents(MyCustomComponent) when viewed in the react debug tools.

It's used when defining the displayName.Without it we'd loose the knowledge that the component had been wrapped when debugging.

[metalix2]

Nice I see! That's very cool!

[olliecurtis]

We used to use recompose for this but it was deprecated a long time ago so moved to simple code locally as no other replacement was available

[metalix2]

I think it's going to be a challenge for HOC's where they're purpose is to wrap elements, which can then change anything about them. I'm happy with this solution. The data- attribute is an interesting solution. And it does avoid changing the API.

[metalix2]

Ship it!