From 860be15d7160c4e5bedc0a77db5d4469c4c75f8a Mon Sep 17 00:00:00 2001
From: Konrad Szwarc <konrad.szwarc.dev@gmail.com>
Date: Mon, 29 Aug 2022 17:34:50 +0200
Subject: [PATCH] Add item-title-suffix typography variant

---
 src/components/atoms/typography.astro | 11 +++++++----
 src/pages/playground/typography.astro |  4 ++++
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/atoms/typography.astro b/src/components/atoms/typography.astro
index 20421e5..fdb12eb 100644
--- a/src/components/atoms/typography.astro
+++ b/src/components/atoms/typography.astro
@@ -1,13 +1,14 @@
 ---
 type TypographyVariant =
-  | 'item-title'
-  | 'item-subtitle'
-  | 'tile-title'
-  | 'tile-subtitle'
   | 'main-title'
   | 'main-subtitle'
   | 'section-title'
   | 'section-subtitle'
+  | 'item-title'
+  | 'item-title-suffix'
+  | 'item-subtitle'
+  | 'tile-title'
+  | 'tile-subtitle'
   | 'paragraph';
 
 const variantToElement = {
@@ -16,6 +17,7 @@ const variantToElement = {
   'section-title': 'h2',
   'section-subtitle': 'h3',
   'item-title': 'h3',
+  'item-title-suffix': 'span',
   'item-subtitle': 'p',
   'tile-title': 'h4',
   'tile-subtitle': 'p',
@@ -28,6 +30,7 @@ const variantToClassName = {
   'section-title': 'text-3xl font-extrabold text-gray-900',
   'section-subtitle': 'text-lg font-extrabold text-gray-900',
   'item-title': 'text-xl font-extrabold text-gray-900',
+  'item-title-suffix': 'text-xl font-medium text-gray-700',
   'item-subtitle': 'text-md font-medium text-gray-700',
   'tile-title': 'text-sm font-medium text-gray-700',
   'tile-subtitle': 'text-sm font-normal text-gray-500',
diff --git a/src/pages/playground/typography.astro b/src/pages/playground/typography.astro
index 68d27ad..e45e9ba 100644
--- a/src/pages/playground/typography.astro
+++ b/src/pages/playground/typography.astro
@@ -29,6 +29,10 @@ const text = 'A quick brown fox jumps over the lazy dog';
     <p class="mb-2 font-mono">item-title</p>
     <Typography variant="item-title">{text}</Typography>
   </div>
+  <div>
+    <p class="mb-2 font-mono">item-title-suffix</p>
+    <Typography variant="item-title-suffix">{text}</Typography>
+  </div>
   <div>
     <p class="mb-2 font-mono">item-subtitle</p>
     <Typography variant="item-subtitle">{text}</Typography>