♻️ Refactor quotecomponent #2833

web/components/src/index.ts

@@ -1,7 +1,6 @@
 export * from './Button'
 export * from './Card'
 export * from './Topbar'
-export * from './Quote'
 export * from './Fact'
 export * from './Text'
 export * from './FormattedDateTime'

web/icons/QuoteSymbol.tsx

@@ -0,0 +1,16 @@
+const QuoteSymbol = ({ iconSize }: { iconSize?: string }) => {
+  return (
+    <svg
+      fill="var(--quote-icon-color)"
+      className={`${iconSize}`}
+      viewBox="0 0 48 48"
+      aria-hidden={true}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>Quote symbol</title>
+      <path d="M24.3178 27.4196C24.3178 20.9682 29.485 14.2193 37.5942 12.7059L40.9409 15.5294C38.0002 16.5773 33.3736 20.0696 33.0856 22.5845C36.3927 23.0764 38.9218 25.7807 38.9218 29.046C38.9218 33.0391 35.4912 35.2941 32.0195 35.2941C28.0166 35.2941 24.3178 32.4016 24.3178 27.4196ZM7.05859 27.4196C7.05859 20.9682 12.2257 14.2193 20.3349 12.7059L23.3221 15.5294C20.3814 16.5773 16.1144 20.0696 15.8263 22.5845C19.1334 23.0764 21.6626 25.7807 21.6626 29.046C21.6626 33.0391 18.232 35.2941 14.7602 35.2941C10.7574 35.2941 7.05859 32.4016 7.05859 27.4196Z" />
+    </svg>
+  )
+}
+
+export default QuoteSymbol

web/icons/index.ts

@@ -6,3 +6,4 @@ export { default as Youtube } from './Youtube'
 export { default as ArrowRight } from './ArrowRight'
 export { default as Play } from './Play'
 export { default as Pause } from './Pause'
+export { default as QuoteSymbol } from './QuoteSymbol'

web/pageComponents/shared/Quote.tsx

@@ -1,24 +1,74 @@
-import { PullQuote } from '@components'
-import type { QuoteData } from '../../types/index'
 import Image, { Ratios } from './SanityImage'
+import type { ImageWithAlt, DesignOptions } from '../../types/index'
+import { QuoteSymbol } from '../../icons'
 
-const Quote = ({ data: { quote, authorTitle, author, image, designOptions } }: { data: QuoteData }) => (
-  <PullQuote imagePosition={designOptions?.imagePosition || 'left'}>
-    <PullQuote.Quote>{quote}</PullQuote.Quote>
-
-    {author && <PullQuote.Author title={authorTitle}>{author}</PullQuote.Author>}
-
-    {image?.asset && (
-      <PullQuote.Media>
-        <Image
-          maxWidth={242}
-          aspectRatio={Ratios.ONE_TO_ONE}
-          image={image}
-          sizes="(min-width: 2280px) 242px, (min-width: 800px) calc(3.29vw + 168px), calc(1.67vw + 75px)"
-        />
-      </PullQuote.Media>
-    )}
-  </PullQuote>
-)
+const textBoldLimit = 160
+const textSizeLimit = 50
+
+export type ImagePosition = 'left' | 'right'
+
+type QuoteData = {
+  type: string
+  id: string
+  author: string
+  authorTitle?: string
+  quote: string
+  image?: ImageWithAlt
+  designOptions: DesignOptions & { imagePosition?: ImagePosition }
+}
+
+const Quote = ({ data: { quote, authorTitle, author, image, designOptions } }: { data: QuoteData }) => {
+  if (!quote) return null
+  const imagePosition = designOptions?.imagePosition || 'right'
+  const isImageLeft = imagePosition === 'left'
+
+  const weight = quote.length < textBoldLimit ? 'font-semibold' : 'font-normal'
+  const size = quote.length < textSizeLimit ? 'text-2xl' : 'text-lg'
+  const iconSize = quote.length < textSizeLimit ? 'w-12 h-12' : 'w-9 h-9'
+
+  return (
+    <figure
+      className={`grid items-center gap-4 sm:gap-x-6 text-gray-900 ${
+        isImageLeft ? 'grid-cols-[auto_1fr]' : 'grid-cols-[1fr_auto]'
+      }`}
+    >
+      {image?.asset && isImageLeft && (
+        <div className="row-span-2 flex justify-center">
+          <Image
+            maxWidth={242}
+            aspectRatio={Ratios.ONE_TO_ONE}
+            image={image}
+            sizes="(min-width: 2280px) 242px, (min-width: 800px) calc(3.29vw + 168px), calc(1.67vw + 75px)"
+            className="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover"
+          />
+        </div>
+      )}
+
+      <div className="flex flex-col space-y-3">
+        <QuoteSymbol iconSize={iconSize} />
+        <blockquote className={`italic ${weight} ${size}`}>{quote}</blockquote>
+      </div>
+
+      {image?.asset && !isImageLeft && (
+        <div className="row-span-2 flex justify-center">
+          <Image
+            maxWidth={242}
+            aspectRatio={Ratios.ONE_TO_ONE}
+            image={image}
+            sizes="(min-width: 2280px) 242px, (min-width: 800px) calc(3.29vw + 168px), calc(1.67vw + 75px)"
+            className="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover"
+          />
+        </div>
+      )}
+
+      {author && (
+        <figcaption className="text-sm font-semibold text-gray-700 text-right self-start sm:self-end">
+          <strong>{author}</strong>
+          {authorTitle && <span className="block text-gray-500">{authorTitle}</span>}
+        </figcaption>
+      )}
+    </figure>
+  )
+}
 
 export default Quote