Feat/BOOK-257 videoplayer with card

* feat(BOOK-257): Added VideoPlayer with card component
* feat(BOOK-257): Added queries and component for VideoCard block to Content and Collection pages
* fix(BOOK-257): Only setting object-fit: cover on the video if it is not fullscreen
* feat(BOOK-257): Added queries and component for VideoCard block to Startpage
* feat(BOOK-257): Added queries and component for Video block to content/collection/start page

Approved-by: Chuma Mcphoy (We Ahead)

packages/design-system/lib/components/VideoPlayer/VideoWithCard/VideoWithCard.stories.tsx

@@ -0,0 +1,207 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+
+import { VideoWithCard } from '.'
+import { config } from './variants'
+
+const meta: Meta<typeof VideoWithCard> = {
+  title: 'Core Components//🚧 Video 🚧//VideoWithCard',
+  component: VideoWithCard,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A component to display a VideoPlayer and content inside a card connected to the video. The size and gaps are determined by the parent container.',
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: Object.keys(config.variants.variant),
+      table: {
+        defaultValue: {
+          summary: config.defaultVariants.variant,
+        },
+        type: {
+          summary: Object.keys(config.variants.variant).join(' | '),
+        },
+      },
+      description:
+        'The variant of the card, which determines its style of the text and what content is shown.',
+    },
+    style: {
+      control: 'select',
+      options: Object.keys(config.variants.style),
+      table: {
+        defaultValue: {
+          summary: config.defaultVariants.style,
+        },
+        type: {
+          summary: Object.keys(config.variants.style).join(' | '),
+        },
+      },
+      description:
+        'This decides the background color and text color of the card.',
+    },
+    heading: {
+      table: {
+        type: { summary: 'string' },
+      },
+      description: 'The heading text. Only applicable for the text variant.',
+    },
+    text: {
+      table: {
+        type: { summary: 'string' },
+      },
+      description: 'The body text. Only applicable for the text variant.',
+    },
+    quote: {
+      table: {
+        type: { summary: 'string' },
+      },
+      description: 'The quote text. Only applicable for the quote variant.',
+    },
+    author: {
+      table: {
+        type: { summary: 'string' },
+      },
+      description:
+        'The author of the quote. Only applicable for the quote variant.',
+    },
+    authorDescription: {
+      table: {
+        type: { summary: 'string' },
+      },
+      description:
+        'The description of the author. Only applicable for the quote variant.',
+    },
+    video: {
+      control: false,
+      table: {
+        type: {
+          summary:
+            '{ src: string; captions?: Caption[]; focalPoint?: FocalPoint}',
+        },
+      },
+      description:
+        'The video props including source URL, captions and focal point. Please note that not all props from the VideoPlayer component are supported in this wrapper component.',
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof VideoWithCard>
+
+const videoProps = {
+  src: 'https://eu-assets.contentstack.com/v3/assets/bltfd73aa2de3a5c4e3/bltad0fe3c2ce340947/68eced6c14e5a8150ebba18c/Scandic_EB_Master.mp4',
+}
+
+const quoteCardProps = {
+  variant: 'quote' as const,
+  quote: 'Download our membership App for smoother & richer experience',
+  author: 'Hans Christian Andersen',
+  authorDescription: 'The famed Danish storyteller.',
+  video: videoProps,
+}
+
+const textCardProps = {
+  variant: 'text' as const,
+  heading: 'Download our membership App now',
+  text: 'Hans Christian Andersen, the famed Danish storyteller, spent many years of his life in Nyhavn, drawing inspiration from its lively atmosphere and picturesque setting.',
+  video: videoProps,
+}
+
+const smallDecorator = (Story: React.FC) => (
+  <div
+    style={{
+      width: '792px',
+      paddingRight: '2rem',
+    }}
+  >
+    <Story />
+  </div>
+)
+
+const largeDecorator = (Story: React.FC) => (
+  <div
+    style={{
+      width: '1200px',
+      paddingRight: '2rem',
+    }}
+  >
+    <Story />
+  </div>
+)
+
+export const QuotePrimary1Small: Story = {
+  args: {
+    ...quoteCardProps,
+    style: 'primary-1',
+  },
+  decorators: [smallDecorator],
+  render: (args) => <VideoWithCard {...args} />,
+}
+
+export const QuotePrimary2Small: Story = {
+  args: {
+    ...quoteCardProps,
+    style: 'primary-2',
+  },
+  decorators: [smallDecorator],
+  render: (args) => <VideoWithCard {...args} />,
+}
+
+export const TextPrimary1Small: Story = {
+  args: {
+    ...textCardProps,
+    style: 'primary-1',
+  },
+  decorators: [smallDecorator],
+  render: (args) => <VideoWithCard {...args} />,
+}
+
+export const TextPrimary2Small: Story = {
+  args: {
+    ...textCardProps,
+    style: 'primary-2',
+  },
+  decorators: [smallDecorator],
+  render: (args) => <VideoWithCard {...args} />,
+}
+
+export const QuotePrimary1Large: Story = {
+  args: {
+    ...quoteCardProps,
+    style: 'primary-1',
+  },
+  decorators: [largeDecorator],
+  render: (args) => <VideoWithCard {...args} />,
+}
+
+export const QuotePrimary2Large: Story = {
+  args: {
+    ...quoteCardProps,
+    style: 'primary-2',
+  },
+  decorators: [largeDecorator],
+  render: (args) => <VideoWithCard {...args} />,
+}
+
+export const TextPrimary1Large: Story = {
+  args: {
+    ...textCardProps,
+    style: 'primary-1',
+  },
+  decorators: [largeDecorator],
+  render: (args) => <VideoWithCard {...args} />,
+}
+
+export const TextPrimary2Large: Story = {
+  args: {
+    ...textCardProps,
+    style: 'primary-2',
+  },
+  decorators: [largeDecorator],
+  render: (args) => <VideoWithCard {...args} />,
+}