From dff5174312ebbd33adba240af054227ba70e23fa Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <hire@ilya-artamonov.ru>
Date: Tue, 19 Sep 2023 13:20:42 +0300
Subject: [PATCH] docs: Updated typography docs

---
 docs/components/heading.md                    | 25 +++++++++++++------
 docs/components/paragraph.md                  | 12 +++++++--
 docs/components/typography/heading/H1.vue     |  2 +-
 docs/components/typography/heading/H2.vue     |  2 +-
 docs/components/typography/heading/H3.vue     |  2 +-
 docs/components/typography/heading/H4.vue     |  2 +-
 docs/components/typography/heading/H5.vue     |  2 +-
 docs/components/typography/heading/H6.vue     |  2 +-
 docs/components/typography/heading/HColor.vue |  2 +-
 docs/components/typography/p/P.vue            | 14 ++++++++---
 docs/components/typography/p/PAlign.vue       | 10 +++++---
 docs/components/typography/p/PCustom.vue      | 10 +++++---
 docs/components/typography/p/PWeight.vue      | 14 ++++++++---
 src/components/Typography/Img.vue             | 15 ++++-------
 14 files changed, 71 insertions(+), 43 deletions(-)

diff --git a/docs/components/heading.md b/docs/components/heading.md
index 48ed38e..ae3e840 100644
--- a/docs/components/heading.md
+++ b/docs/components/heading.md
@@ -17,6 +17,8 @@ import HCustom from './typography/heading/HCustom.vue'
 
 Use the `tag="h1"` as the most important text element to indicate the title of your web page.
 
+<H1 />
+
 ```vue
 <template>
   <Heading tag="h1">This is my heading</Heading>
@@ -27,12 +29,13 @@ import Heading from 'flowbite-vue'
 </script>
 ```
 
-<H1 />
 
 ## Heading one (H2)
 
 The H2 tag can be used as subtitles of the page’s sections.
 
+<H2 />
+
 ```vue
 <template>
   <Heading tag="h2">This is my heading</Heading>
@@ -43,12 +46,13 @@ import Heading from 'flowbite-vue'
 </script>
 ```
 
-<H2 />
 
 ## Heading one (H3)
 
 Use the H3 tags inside sections that already have a H2 available.
 
+<H3 />
+
 ```vue
 <template>
   <Heading tag="h3">This is my heading</Heading>
@@ -59,12 +63,13 @@ import Heading from 'flowbite-vue'
 </script>
 ```
 
-<H3 />
 
 ## Heading one (H4)
 
 The H4 can be generally used after H2 and H3 tags are already present and you need a more in-depth hierarchy.
 
+<H4 />
+
 ```vue
 <template>
   <Heading tag="h4">This is my heading</Heading>
@@ -75,12 +80,13 @@ import Heading from 'flowbite-vue'
 </script>
 ```
 
-<H4 />
 
 ## Heading one (H5)
 
 The H5 tag is most often used in longer articles with other heading already available or in sidebars.
 
+<H5 />
+
 ```vue
 <template>
   <Heading tag="h5">This is my heading</Heading>
@@ -91,12 +97,13 @@ import Heading from 'flowbite-vue'
 </script>
 ```
 
-<H5 />
 
 ## Heading one (H6)
 
 Using the H6 tag is quite rare because it means that you’ve already used all heading from H1 to H5, but you can still use it if you have a very complex article with lots of headings.
 
+<H6 />
+
 ```vue
 <template>
   <Heading tag="h6">This is my heading</Heading>
@@ -107,12 +114,13 @@ import Heading from 'flowbite-vue'
 </script>
 ```
 
-<H6 />
 
 ## Color
 
 Use the `color` prop to set the text color.
 
+<HColor />
+
 ```vue
 <template>
   <Heading color="text-green-400" tag="h1">This is my heading</Heading>
@@ -123,12 +131,13 @@ import Heading from 'flowbite-vue'
 </script>
 ```
 
-<HColor />
 
 ## Custom classes
 
 Use the `class` attribute to apply the tailwind classes.
 
+<HCustom />
+
 ```vue
 <template>
   <Heading class="!text-xl italic underline" tag="h1">This is my heading</Heading>
@@ -139,4 +148,4 @@ import Heading from 'flowbite-vue'
 </script>
 ```
 
-<HCustom />
+
diff --git a/docs/components/paragraph.md b/docs/components/paragraph.md
index 41019db..29a7925 100644
--- a/docs/components/paragraph.md
+++ b/docs/components/paragraph.md
@@ -15,8 +15,12 @@ Use this example of a paragraph element to use inside article content or a landi
 
 ```vue
 <template>
+  <P class="mb-2">
+    Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams
+    have richer contextual information to rapidly respond to requests, incidents, and changes.
+  </P>
   <P>
-    Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
+    Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
     audit trail for every change.
   </P>
 </template>
@@ -34,8 +38,12 @@ Use `weight` prop to set the text-weight.
 
 ```vue
 <template>
+  <P class="mb-2" weight="light">
+    Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams
+    have richer contextual information to rapidly respond to requests, incidents, and changes.
+  </P>
   <P weight="light">
-    Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
+    Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
     audit trail for every change.
   </P>
 </template>
diff --git a/docs/components/typography/heading/H1.vue b/docs/components/typography/heading/H1.vue
index ef46945..c21bcb9 100644
--- a/docs/components/typography/heading/H1.vue
+++ b/docs/components/typography/heading/H1.vue
@@ -1,5 +1,5 @@
 <template>
-  <Heading tag="h1">This is my heading</Heading>
+  <Heading tag="h1">Heading 1</Heading>
 </template>
 
 <script setup>
diff --git a/docs/components/typography/heading/H2.vue b/docs/components/typography/heading/H2.vue
index 5fe1f9f..fedeba6 100644
--- a/docs/components/typography/heading/H2.vue
+++ b/docs/components/typography/heading/H2.vue
@@ -1,5 +1,5 @@
 <template>
-  <Heading tag="h2">This is my heading</Heading>
+  <Heading tag="h2">Heading 2</Heading>
 </template>
 
 <script setup>
diff --git a/docs/components/typography/heading/H3.vue b/docs/components/typography/heading/H3.vue
index 8b62b3f..3f97825 100644
--- a/docs/components/typography/heading/H3.vue
+++ b/docs/components/typography/heading/H3.vue
@@ -1,5 +1,5 @@
 <template>
-  <Heading tag="h3">This is my heading</Heading>
+  <Heading tag="h3">Heading 3</Heading>
 </template>
 
 <script setup>
diff --git a/docs/components/typography/heading/H4.vue b/docs/components/typography/heading/H4.vue
index a4cd63e..bc60d69 100644
--- a/docs/components/typography/heading/H4.vue
+++ b/docs/components/typography/heading/H4.vue
@@ -1,5 +1,5 @@
 <template>
-  <Heading tag="h4">This is my heading</Heading>
+  <Heading tag="h4">Heading 4</Heading>
 </template>
 
 <script setup>
diff --git a/docs/components/typography/heading/H5.vue b/docs/components/typography/heading/H5.vue
index 6eb92e9..3504f43 100644
--- a/docs/components/typography/heading/H5.vue
+++ b/docs/components/typography/heading/H5.vue
@@ -1,5 +1,5 @@
 <template>
-  <Heading tag="h5">This is my heading</Heading>
+  <Heading tag="h5">Heading 5</Heading>
 </template>
 
 <script setup>
diff --git a/docs/components/typography/heading/H6.vue b/docs/components/typography/heading/H6.vue
index 600da8f..e2e743e 100644
--- a/docs/components/typography/heading/H6.vue
+++ b/docs/components/typography/heading/H6.vue
@@ -1,5 +1,5 @@
 <template>
-  <Heading tag="h6">This is my heading</Heading>
+  <Heading tag="h6">Heading 6</Heading>
 </template>
 
 <script setup>
diff --git a/docs/components/typography/heading/HColor.vue b/docs/components/typography/heading/HColor.vue
index bd20bd7..e945343 100644
--- a/docs/components/typography/heading/HColor.vue
+++ b/docs/components/typography/heading/HColor.vue
@@ -1,5 +1,5 @@
 <template>
-  <Heading color="text-green-400" tag="h1">This is my heading</Heading>
+  <Heading color="text-green-400" tag="h1">Green heading</Heading>
 </template>
 
 <script setup>
diff --git a/docs/components/typography/p/P.vue b/docs/components/typography/p/P.vue
index c1f0088..f0b73f0 100644
--- a/docs/components/typography/p/P.vue
+++ b/docs/components/typography/p/P.vue
@@ -1,8 +1,14 @@
 <template>
-  <P>
-    Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
-    audit trail for every change.
-  </P>
+  <div class="vp-raw">
+    <P class="mb-2">
+      Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams
+      have richer contextual information to rapidly respond to requests, incidents, and changes.
+    </P>
+    <P>
+      Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
+      audit trail for every change.
+    </P>
+  </div>
 </template>
 
 <script setup>
diff --git a/docs/components/typography/p/PAlign.vue b/docs/components/typography/p/PAlign.vue
index 9689d32..bc769ef 100644
--- a/docs/components/typography/p/PAlign.vue
+++ b/docs/components/typography/p/PAlign.vue
@@ -1,8 +1,10 @@
 <template>
-  <P align="center">
-    Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
-    audit trail for every change.
-  </P>
+  <div class="vp-raw">
+    <P align="center">
+      Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
+      audit trail for every change.
+    </P>
+  </div>
 </template>
 
 <script setup>
diff --git a/docs/components/typography/p/PCustom.vue b/docs/components/typography/p/PCustom.vue
index 5914350..3c78723 100644
--- a/docs/components/typography/p/PCustom.vue
+++ b/docs/components/typography/p/PCustom.vue
@@ -1,8 +1,10 @@
 <template>
-  <P class="!text-green-400 italic">
-    Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
-    audit trail for every change.
-  </P>
+  <div class="vp-raw">
+    <P class="!text-green-400 italic">
+      Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
+      audit trail for every change.
+    </P>
+  </div>
 </template>
 
 <script setup>
diff --git a/docs/components/typography/p/PWeight.vue b/docs/components/typography/p/PWeight.vue
index 36e59cb..19e7a7c 100644
--- a/docs/components/typography/p/PWeight.vue
+++ b/docs/components/typography/p/PWeight.vue
@@ -1,8 +1,14 @@
 <template>
-  <P weight="light">
-    Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
-    audit trail for every change.
-  </P>
+  <div class="vp-raw">
+    <P class="mb-2" weight="light">
+      Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams
+      have richer contextual information to rapidly respond to requests, incidents, and changes.
+    </P>
+    <P weight="light">
+      Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
+      audit trail for every change.
+    </P>
+  </div>
 </template>
 
 <script setup>
diff --git a/src/components/Typography/Img.vue b/src/components/Typography/Img.vue
index a18ccdf..b377a46 100644
--- a/src/components/Typography/Img.vue
+++ b/src/components/Typography/Img.vue
@@ -1,12 +1,9 @@
 <template>
-  <div>
-    <figure v-if="caption" :class="figClass">
-      <img :src="src" :alt="alt" :class="[size, alignment, imgClass]" />
-      <figcaption :class="captionClass">{{ caption }}</figcaption>
-    </figure>
-
-    <img v-else :src="src" :alt="alt" :class="[size, alignment, imgClass]" />
-  </div>
+  <figure v-if="caption" :class="size">
+    <img :src="src" :alt="alt" :class="[size, alignment, imgClass]" />
+    <figcaption :class="captionClass">{{ caption }}</figcaption>
+  </figure>
+  <img v-else :src="src" :alt="alt" :class="[size, alignment, imgClass]" />
 </template>
 
 <script setup lang="ts">
@@ -18,7 +15,6 @@ interface ImageProps {
   imgClass?: string
   alignment?: string
   captionClass?: string
-  figClass?: string
 }
 
 withDefaults(defineProps<ImageProps>(), {
@@ -29,6 +25,5 @@ withDefaults(defineProps<ImageProps>(), {
   imgClass: 'h-auto',
   alignment: '',
   captionClass: 'mt-2 text-sm text-center text-gray-500 dark:text-gray-400',
-  figClass: 'max-w-lg',
 })
 </script>