fix(732): fix inline drawer behaviour

[mstuartf]

#732

What

1. Background - why this is needed

• Inline drawer shifting sibling content in right and bottom placements

2. What did you do

• Disable the FocuLock and MoveFocusInside components while a transition in in progress. Focussing on an element that is not yet in view causes the browser to attempt to scroll, which is what causes the elements to shift. Store transition state in a local variable and use the CSSTransition onEntered and onExited handlers to update its value.
• Add tests.

3. What does the reviewers should expect

• Inline drawer should no longer shift sibling content

I have done:

• Written unit tests against changes
• Written functional tests against the component and/or NewsKit site
• Updated relevant documentation

I have tested manually:

• The feature's functionality is working as expected on Chrome, Firefox, Safari and Edge
• The screen reader reads and flows through the elements as expected.
• There are no new errors in the browser console coming from this PR.
• When visual test is not added, it renders correctly on different browsers and mobile viewports (Safari, Firefox, small mobile viewport, tablet)
• The Playground feature is working as expected

Before:

After:

Who should review this PR:

How to test:

[pp-serviceaccount]

You can preview these changes on:
Documentation Site: http://ncu-newskit-docs-pr.s3-website-eu-west-1.amazonaws.com/732-inline-drawer
Storybook: http://ncu-newskit-docs-pr.s3-website-eu-west-1.amazonaws.com/732-inline-drawer/storybook