UX to highlight selected block

[brynwhyman]

User Story

As a CMS user, I want an indication of which block preview is expected to be selected, so that I can confirm I’m focusing on the correct block preview before clicking it.

Acceptance Criteria

• [x] Mouse-hover and click ( :focus) of a content block gives shadow animation
• [x] If the “:focus” state is moved to a different block then the shadow is removed from the first block to the second block, as per wireframe: https://projects.invisionapp.com/share/ZRL4T2HQAGB#/screens/301920915
• [x] The blocks are keyboard accessible

Pull requests

• [ ] #361

[newleeland]

Update to style guide

https://invis.io/7ZNLP773RSY

Complete blocks style guide

Blocks: https://invis.io/T7NLP7WP3K4 Layout blocks: https://invis.io/BNNLP87VQJU

[raissanorth]

I looked into this for a bit today and have come across a few issues to be aware of. While e.g. adding box-shadow:$z-depth-2; adds a horizontal drop shadow to the element, no vertical shadow is rendered it falls outside the visible React app area:

I tried a workaround of adding a vertical margin, whilst reducing the vertical padding to prevent the content from 'jumping', but the result is far from the design:

Browser compatibility will need to be tested, especially on IE and Edge, as there are some pre-existing issues - e.g. https://github.com/dnadesign/silverstripe-elemental/issues/358 - that not only extend functionality, but also style. Using the pseudo-elements :hover, :focus, and focus:within did not cause the element to change its apparence when tabbed into via keys.

[raissanorth]

Closed via #361