Update CardCommentCount stories to CSF v3 (#13621)

Component Story Format v3 is the default for Storybook 7+, and
integrates better with some of its features.

Using `satisfies` gives better type safety for args. Replaced the
`Wrapper` component with a decorator. Since both stories were identical,
deleted the second one. As there was then only one story, renamed the
story to have the same name as the component, which allows storybook to
hoist the story in the UI.

Author: JamieB-gu

dotcom-rendering/src/components/CardCommentCount.importable.stories.tsx

@@ -1,49 +1,26 @@
-import { css } from '@emotion/react';
 import { space } from '@guardian/source/foundations';
-import { CardCommentCount } from './CardCommentCount.importable';
-import { Island } from './Island';
+import type { Meta, StoryObj } from '@storybook/react';
+import { CardCommentCount as CardCommentCountComponent } from './CardCommentCount.importable';
 
-export default {
-	component: CardCommentCount,
-	title: 'Components/CardCommentCount',
-};
+const meta = {
+	component: CardCommentCountComponent,
+	title: 'Components/Card Comment Count',
+} satisfies Meta<typeof CardCommentCountComponent>;
 
-const Wrapper = ({ children }: { children: React.ReactNode }) => {
-	return (
-		<div
-			css={css`
-				padding: ${space[6]}px;
-			`}
-		>
-			{children}
-		</div>
-	);
-};
+export default meta;
 
-export const CommentCountStory = () => {
-	return (
-		<Wrapper>
-			<Island priority="critical">
-				<CardCommentCount
-					discussionApiUrl="https://discussion.theguardian.com/discussion-api"
-					discussionId="/p/zemg8"
-				/>
-			</Island>
-		</Wrapper>
-	);
-};
-CommentCountStory.storyName = 'default';
+type Story = StoryObj<typeof meta>;
 
-export const GalleryStory = () => {
-	return (
-		<Wrapper>
-			<Island priority="critical">
-				<CardCommentCount
-					discussionApiUrl="https://discussion.theguardian.com/discussion-api"
-					discussionId="/p/zemg8"
-				/>
-			</Island>
-		</Wrapper>
-	);
-};
-GalleryStory.storyName = 'Gallery';
+export const CardCommentCount = {
+	args: {
+		discussionApiUrl: 'https://discussion.theguardian.com/discussion-api',
+		discussionId: '/p/zemg8',
+	},
+	decorators: [
+		(Story) => (
+			<div css={{ padding: space[6] }}>
+				<Story />
+			</div>
+		),
+	],
+} satisfies Story;