Move AudioLayout to grid

dotcom-rendering/src/components/AudioPlayer.tsx

@@ -0,0 +1,52 @@
+import { css } from '@emotion/react';
+import { space } from '@guardian/source/foundations';
+import { StraightLines } from '@guardian/source-development-kitchen/react-components';
+import { palette } from '../palette';
+import { AppsAudioPlayer } from './AppsAudioPlayer.island';
+import { AudioPlayerWrapper } from './AudioPlayerWrapper.island';
+import { formatAudioDuration } from './ListenToArticle.island';
+
+export const AudioPlayer = ({
+	audioData,
+	isSensitive,
+	isAcastEnabled,
+	isApps,
+}: {
+	audioData: {
+		audioDownloadUrl: string;
+		durationSeconds?: number;
+		mediaId: string;
+	};
+	isSensitive: boolean;
+	isAcastEnabled: boolean;
+	isApps: boolean;
+}) => {
+	return (
+		<>
+			{isApps ? (
+				<AppsAudioPlayer
+					audioDuration={
+						typeof audioData.durationSeconds === 'number'
+							? formatAudioDuration(audioData.durationSeconds)
+							: undefined
+					}
+				/>
+			) : (
+				<AudioPlayerWrapper
+					contentIsNotSensitive={!isSensitive}
+					isAcastEnabled={isAcastEnabled}
+					src={audioData.audioDownloadUrl}
+					mediaId={audioData.mediaId}
+				/>
+			)}
+			<StraightLines
+				cssOverrides={css`
+					display: block;
+					margin-bottom: ${space[2]}px;
+				`}
+				count={1}
+				color={palette('--straight-lines')}
+			/>
+		</>
+	);
+};

dotcom-rendering/src/layouts/AudioLayout.stories.tsx

@@ -5,12 +5,12 @@ import { ArticleDesign } from '../lib/articleFormat';
 import { getCurrentPillar } from '../lib/layoutHelpers';
 import { extractNAV } from '../model/extract-nav';
 import { enhanceArticleType } from '../types/article';
-import { AudioLayout } from './AudioLayout';
+import { StandardLayout } from './StandardLayout';
 
 const meta = {
 	title: 'Layouts/Audio',
-	component: AudioLayout,
-} satisfies Meta<typeof AudioLayout>;
+	component: StandardLayout,
+} satisfies Meta<typeof StandardLayout>;
 
 export default meta;