style: add block quote styling

AmazeeLabs · Apr 17, 2024 · 00e923e · 00e923e
1 parent a509fc9
commit 00e923e
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 4 deletions.
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx b/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx
@@ -18,7 +18,6 @@ export function BlockMarkup(props: BlockMarkupFragment) {
       className={clsx([
         'mx-auto max-w-3xl prose lg:prose-xl mt-10',
         'prose-a:text-indigo-600',
-        'prose-blockquote:border-indigo-200',
         'prose-em:text-indigo-600',
         'prose-strong:text-indigo-600',
         'marker:text-indigo-600 marker:font-bold',

diff --git a/packages/ui/src/components/Organisms/PageContent/BlockQuote.stories.ts b/packages/ui/src/components/Organisms/PageContent/BlockQuote.stories.ts
@@ -0,0 +1,23 @@
+import { Markup } from '@custom/schema';
+import Portrait from '@stories/portrait.jpg?as=metadata';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { image } from '../../../helpers/image';
+import { BlockQuote } from './BlockQuote';
+
+export default {
+  component: BlockQuote,
+} satisfies Meta<typeof BlockQuote>;
+
+export const Quote = {
+  args: {
+    role: 'test role',
+    author: 'Author name',
+    image: {
+      source: image({ src: Portrait.src, width: 50, height: 50 }),
+      alt: 'Portrait',
+    },
+    quote:
+      '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>' as Markup,
+  },
+} satisfies StoryObj<typeof BlockQuote>;
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx b/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx
@@ -1,7 +1,47 @@
-import { BlockQuoteFragment } from '@custom/schema';
+import { BlockQuoteFragment, Html, Image } from '@custom/schema';
 import React from 'react';
 
 export function BlockQuote(props: BlockQuoteFragment) {
-  console.log('Block quote props:', props);
-  return <></>;
+  return (
+    <div className="prose lg:prose-xl prose-p:text-xl prose-p:font-bold prose-p:leading-8 prose-p:text-gray-900">
+      <blockquote className="border-l-0 relative pl-0">
+        <svg
+          width="32"
+          height="24"
+          viewBox="0 0 32 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          role="img"
+          aria-labelledby="quote-svg-title"
+        >
+          <title id="quote-svg-title">Quote Symbol</title>
+          <path
+            d="M18.6893 24V14.1453C18.6893 6.54 23.664 1.38533 30.6667 0L31.9933 2.868C28.7507 4.09066 26.6667 7.71867 26.6667 10.6667H32V24H18.6893ZM0 24V14.1453C0 6.54 4.99733 1.384 12 0L13.328 2.868C10.084 4.09066 8 7.71867 8 10.6667L13.3107 10.6667V24H0Z"
+            fill="#9CA3AF"
+          />
+        </svg>
+        {props.quote && <Html markup={props.quote} />}
+        <div className="flex not-prose items-center flex-wrap">
+          {props.image && (
+            <Image
+              className="w-6 h-6 rounded-full object-contain"
+              source={props.image.source}
+              alt={props.image.alt || 'Author image'}
+            />
+          )}
+          <div className="ml-2 not-italic text-base">
+            {props.author && <p>{props.author}</p>}
+          </div>
+          {props.role && (
+            <p>
+              <span className="ml-2">/</span>
+              <span className="not-italic text-gray-500 text-sm ml-2">
+                {props.role}
+              </span>
+            </p>
+          )}
+        </div>
+      </blockquote>
+    </div>
+  );
 }
diff --git a/packages/ui/src/tailwind.css b/packages/ui/src/tailwind.css
@@ -7,3 +7,17 @@
   :where(blockquote):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
   padding-left: 0 !important;
 }
+
+.prose
+  :where(blockquote p:first-of-type):not(
+    :where([class~='not-prose'], [class~='not-prose'] *)
+  )::before {
+  content: '' !important;
+}
+
+.prose
+  :where(blockquote p:first-of-type):not(
+    :where([class~='not-prose'], [class~='not-prose'] *)
+  )::after {
+  content: '' !important;
+}