Feature/paragraph updates (#257)

* useMergeClasses accepted types updated - to match twMerge

* fwb-paragraph updated to accept user classes

* docs updated to fix missing tailwind classes

* fwb-p documentation updated

* tailwindcss class wrapper props removed

* Update docs/components/typography/p/FwbPExampleCustom.vue

* Update docs/components/typography/p/FwbPExampleCustom.vue

---------

Co-authored-by: Ilya Artamonov <ilya.sosidka@gmail.com>

src/components/Typography/FwbP.vue

@@ -1,65 +1,25 @@
 <template>
-  <p :class="[color, sizes[size], heights[height], weights[weight], whitespaces[whitespace], aligns[align]]">
+  <p :class="componentClasses">
     <slot />
   </p>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+import { useMergeClasses } from '@/composables/useMergeClasses'
+
 interface ParagraphProps {
-  height?: 'normal' | 'relaxed' | 'loose'
-  color?: string
-  size?: string
-  weight?: string
-  whitespace?: string
-  align?: string
+  class?: string
 }
 
-withDefaults(defineProps<ParagraphProps>(), {
-  height: 'normal',
-  color: 'text-gray-900 dark:text-white',
-  size: '',
-  weight: '',
-  whitespace: '',
-  align: '',
+const props = withDefaults(defineProps<ParagraphProps>(), {
+  class: '',
 })
 
-const sizes: Record<string, string> = {
-  xs: 'text-xs',
-  sm: 'text-sm',
-  base: 'text-base',
-  lg: 'text-lg',
-  xl: 'text-xl',
-}
+const defaultClasses = 'mb-3 last:mb-0 text-gray-900 dark:text-white leading-normal'
 
-const weights: Record<string, string> = {
-  thin: 'font-thin',
-  extralight: 'font-extralight',
-  light: 'font-light',
-  normal: 'font-normal',
-  medium: 'font-medium',
-  semibold: 'font-semibold',
-  bold: 'font-bold',
-  extrabold: 'font-extrabold',
-  black: 'font-black',
-}
-
-const aligns: Record<string, string> = {
-  left: 'text-left',
-  center: 'text-center',
-  right: 'text-right',
-}
-
-const heights: Record<string, string> = {
-  normal: 'leading-normal',
-  relaxed: 'leading-relaxed',
-  loose: 'leading-loose',
-}
-
-const whitespaces: Record<string, string> = {
-  normal: 'whitespace-normal',
-  nowrap: 'whitespace-nowrap',
-  pre: 'whitespace-pre',
-  preline: 'whitespace-pre-line',
-  prewrap: 'whitespace-pre-wrap',
-}
+const componentClasses = computed(() => useMergeClasses([
+  defaultClasses,
+  props.class,
+]))
 </script>