feat(nx-dev): add quote component for enterprise articles

(cherry picked from commit 13b9c23)

nx-dev/ui-markdoc/src/index.ts

@@ -54,6 +54,8 @@ import { FenceWrapper } from './lib/nodes/fence-wrapper.component';
 import { VideoPlayer, videoPlayer } from './lib/tags/video-player.component';
 import { TableOfContents } from './lib/tags/table-of-contents.component';
 import { tableOfContents } from './lib/tags/table-of-contents.schema';
+import { Quote } from './lib/tags/quote.component';
+import { quote } from './lib/tags/quote.schema';
 // TODO fix this export
 export { GithubRepository } from './lib/tags/github-repository.component';
 
@@ -84,6 +86,7 @@ export const getMarkdocCustomConfig = (
       personas,
       'project-details': projectDetails,
       pill,
+      quote,
       'short-embeds': shortEmbeds,
       'short-video': shortVideo,
       'side-by-side': sideBySide,
@@ -114,6 +117,7 @@ export const getMarkdocCustomConfig = (
     Personas,
     ProjectDetails,
     Pill,
+    Quote,
     ShortEmbeds,
     ShortVideo,
     SideBySide,

nx-dev/ui-markdoc/src/lib/tags/quote.component.tsx

@@ -0,0 +1,57 @@
+import { cx } from '@nx/nx-dev/ui-primitives';
+
+export interface QuoteProps {
+  quote: string;
+  author: string;
+  title?: string;
+  companyIcon?: string;
+}
+
+export function Quote({
+  quote,
+  author,
+  title,
+  companyIcon,
+}: QuoteProps): JSX.Element {
+  return (
+    <figure className="not-prose relative my-8 rounded-2xl bg-white p-8 shadow-lg ring-1 ring-slate-900/5 dark:bg-slate-800">
+      <svg
+        className="absolute left-6 top-6 h-12 w-12 text-slate-100 dark:text-slate-700"
+        fill="currentColor"
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+      >
+        <path d="M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 01-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179zm10 0C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 01-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179z" />
+      </svg>
+
+      <blockquote className="relative">
+        <p className="pl-12 text-lg font-semibold tracking-tight text-slate-900 dark:text-white">
+          {quote}
+        </p>
+      </blockquote>
+
+      <div className="mt-6 flex items-center gap-x-4 pl-12">
+        <div className="flex-auto">
+          <div className="text-sm font-semibold text-slate-700 dark:text-slate-300">
+            {author}
+          </div>
+          {title && (
+            <div className="text-xs text-slate-500 dark:text-slate-400">
+              {title}
+            </div>
+          )}
+        </div>
+        {companyIcon && (
+          <div className="h-10 w-10 flex-none overflow-hidden">
+            <img
+              src={companyIcon}
+              aria-hidden="true"
+              className="h-full w-full object-contain"
+              alt="Company logo"
+            />
+          </div>
+        )}
+      </div>
+    </figure>
+  );
+}

nx-dev/ui-markdoc/src/lib/tags/quote.schema.ts

@@ -0,0 +1,27 @@
+import { Schema } from '@markdoc/markdoc';
+
+export const quote: Schema = {
+  render: 'Quote',
+  attributes: {
+    quote: {
+      type: 'String',
+      required: true,
+    },
+    author: {
+      type: 'String',
+      required: true,
+    },
+    title: {
+      type: 'String',
+      required: false,
+    },
+    image: {
+      type: 'String',
+      required: false,
+    },
+    companyIcon: {
+      type: 'String',
+      required: false,
+    },
+  },
+};