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)
2025-12-12 06:34:32 +00:00
parent 5770147af4
commit 0597b09c08
31 changed files with 1226 additions and 52 deletions
--- a/packages/design-system/lib/components/VideoPlayer/VideoWithCard/VideoCard.tsx
+++ b/packages/design-system/lib/components/VideoPlayer/VideoWithCard/VideoCard.tsx
@@ -0,0 +1,82 @@
+import { VariantProps } from 'class-variance-authority'
+import { Typography } from '../../Typography'
+import { variants } from './variants'
+
+import { VideoPlayer, VideoPlayerProps } from '..'
+import styles from './videoWithCard.module.css'
+
+interface TextCardProps {
+  variant: 'text'
+  heading: string
+  text?: string
+}
+interface QuoteCardProps {
+  variant: 'quote'
+  quote: string
+  author: string
+  authorDescription?: string
+}
+
+type VideoWithCardProps = VariantProps<typeof variants> &
+  (TextCardProps | QuoteCardProps) & {
+    video: Pick<VideoPlayerProps, 'src' | 'captions' | 'focalPoint'>
+  }
+
+export function VideoWithCard(props: VideoWithCardProps) {
+  const { variant, style, video } = props
+  const classNames = variants({
+    variant,
+    style,
+  })
+
+  return (
+    <div className={styles.videoWithCardWrapper}>
+      <div className={styles.videoWithCard}>
+        <VideoPlayer variant="inline" {...video} />
+        <article className={classNames}>
+          <CardContent {...props} />
+        </article>
+      </div>
+    </div>
+  )
+}
+
+function CardContent(props: VideoWithCardProps) {
+  if (props.variant === 'quote') {
+    const { quote, author, authorDescription } = props
+
+    return (
+      <>
+        <Typography variant="Title/smLowCase">
+          <blockquote className={styles.blockquote}>{quote}</blockquote>
+        </Typography>
+
+        <cite className={styles.cite}>
+          <Typography variant="Body/Paragraph/mdBold">
+            <span>{author}</span>
+          </Typography>
+          {authorDescription ? (
+            <Typography variant="Body/Paragraph/mdRegular">
+              <span>{authorDescription}</span>
+            </Typography>
+          ) : null}
+        </cite>
+      </>
+    )
+  }
+
+  const { heading, text } = props
+
+  return (
+    <>
+      <Typography variant="Title/smLowCase">
+        <h3 className={styles.heading}>{heading}</h3>
+      </Typography>
+      {text ? (
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>{text}</p>
+        </Typography>
+      ) : null}
+    </>
+  )
+}