From 040725262c90f12bac721eb9c20fc43115569a67 Mon Sep 17 00:00:00 2001
From: Ben <3447705+bcabanes@users.noreply.github.com>
Date: Tue, 4 Apr 2023 16:36:34 -0400
Subject: [PATCH] feat(nx-dev): add markdoc title card component

---
 docs/README.md                                     | 13 ++++++++++++-
 nx-dev/ui-markdoc/src/index.ts                     |  6 ++++--
 nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx | 14 ++++++++++++++
 nx-dev/ui-markdoc/src/lib/tags/cards.schema.ts     | 13 +++++++++++++
 4 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/docs/README.md b/docs/README.md
index 0a22efb6959bf9..9f851a475ee868 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -36,7 +36,7 @@ Your content goes here.
 
 #### Cards
 
-Cards allow to show content in a grid system with a title, a description, a type and an url (internal/external).
+Cards allow showing content in a grid system with a title, a description, a type and an url (internal/external).
 
 ```markdown
 {% cards %}
@@ -46,6 +46,17 @@ Cards allow to show content in a grid system with a title, a description, a type
 {% /cards %}
 ```
 
+Title cards allow to only show a title in a card with a title and an url.
+
+```markdown
+{% cards cols="4" %}
+{% title-card title="string" href="string" /%}
+{% title-card title="string" href="string" /%}
+{% title-card title="string" href="string" /%}
+{% title-card title="string" href="string" /%}
+{% /cards %}
+```
+
 #### Code
 
 You can add specific languages and a filename on the code snippet displayed.
diff --git a/nx-dev/ui-markdoc/src/index.ts b/nx-dev/ui-markdoc/src/index.ts
index cbe0e851f60b34..41eaf47386c523 100644
--- a/nx-dev/ui-markdoc/src/index.ts
+++ b/nx-dev/ui-markdoc/src/index.ts
@@ -17,8 +17,8 @@ import { CustomLink } from './lib/nodes/link.component';
 import { link } from './lib/nodes/link.schema';
 import { Callout } from './lib/tags/callout.component';
 import { callout } from './lib/tags/callout.schema';
-import { Card, Cards } from './lib/tags/cards.component';
-import { card, cards } from './lib/tags/cards.schema';
+import { Card, Cards, TitleCard } from './lib/tags/cards.component';
+import { card, cards, titleCard } from './lib/tags/cards.schema';
 import { GithubRepository } from './lib/tags/github-repository.component';
 import { githubRepository } from './lib/tags/github-repository.schema';
 import { Graph } from './lib/tags/graph.component';
@@ -62,6 +62,7 @@ export const getMarkdocCustomConfig = (
       'side-by-side': sideBySide,
       tab,
       tabs,
+      'title-card': titleCard,
       youtube,
     },
   },
@@ -82,6 +83,7 @@ export const getMarkdocCustomConfig = (
     SideBySide,
     Tab,
     Tabs,
+    TitleCard,
     YouTube,
   },
 });
diff --git a/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx
index 2a4efcce826a11..a57709f5b92bc0 100644
--- a/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx
@@ -79,3 +79,17 @@ export function Card({
     </div>
   );
 }
+
+export function TitleCard({ title, url }: { title: string; url: string }) {
+  return (
+    <a
+      key={title}
+      href={'blahblah'}
+      className="relative col-span-1 flex items-center rounded-md border border-slate-200 bg-slate-50/40 p-4 text-left text-lg font-semibold shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-slate-50 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800 lg:justify-center lg:text-center"
+      style={{ textDecorationLine: 'none' }}
+    >
+      <span className="absolute inset-0" />
+      {title}
+    </a>
+  );
+}
diff --git a/nx-dev/ui-markdoc/src/lib/tags/cards.schema.ts b/nx-dev/ui-markdoc/src/lib/tags/cards.schema.ts
index 85b8ec74bbdf57..5d4555d6d89ffe 100644
--- a/nx-dev/ui-markdoc/src/lib/tags/cards.schema.ts
+++ b/nx-dev/ui-markdoc/src/lib/tags/cards.schema.ts
@@ -31,3 +31,16 @@ export const card: Schema = {
     },
   },
 };
+export const titleCard: Schema = {
+  render: 'TitleCard',
+  attributes: {
+    title: {
+      type: 'String',
+      required: true,
+    },
+    url: {
+      type: 'String',
+      required: true,
+    },
+  },
+};