Feat/ppdsc 2143 volume control horizontal expand

[baburay23]

PPDSC-2143

What

1. Background - horizontal expandable needed on volume control
2. What did you do- layout prop has been extended to 'horizontal' | 'horizontalCollapsed' | 'horizontalExpandable' | 'vertical'. The default is 'horizontalExpandable' . i have removed the old collapsed prop
   We also created a new transitionPreset 'widthChange' to apply transition to the expandable div. This is now also overridable by the user. I have also added in documentation for this transitionPreset and stories approved by design
3. What does the reviewers should expect-volume control has four layout options, transition is now applied to 'horizontlExpandable'
   http://ncu-newskit-docs.s3-website-eu-west-1.amazonaws.com/ppdsc-2143-volume-control-horizontal-expand/storybook/?path=/story/newskit-light-audio-player-composable--audio-player-volume-control-layout

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:

[newskit-engineering]

You can preview these changes on:
Documentation Site: http://ncu-newskit-docs.s3-website-eu-west-1.amazonaws.com/ppdsc-2143-volume-control-horizontal-expand
Storybook: http://ncu-newskit-docs.s3-website-eu-west-1.amazonaws.com/ppdsc-2143-volume-control-horizontal-expand/storybook