feat(form): enable adding rich text as description

in limel-form, we can add a `description` as a prop to form items.
This used to returns a `<p>` element in the DOM.
In this commit, instead of a normal paragraph, we return a `limel-markdown`
component. This enables consumers to use rich text when they write a
`description` in their forms.

Author: Kiarokh

src/components/form/examples/nested-schema.ts

@@ -27,7 +27,7 @@ export const schema: FormSchema<NestedFormData> = {
         address: {
             type: 'object',
             title: 'Location',
-            description: 'Please enter your location',
+            description: 'Please enter your **current** location',
             properties: {
                 city: {
                     type: 'string',

src/components/form/form.scss

@@ -211,10 +211,9 @@ h1 {
     font-weight: 500;
 }
 
-p {
-    margin-top: 0;
-    margin-bottom: 0.75rem;
-    font-size: var(--limel-theme-default-font-size);
+limel-markdown {
+    display: block;
+    margin-bottom: 0.5rem;
 }
 
 .form-group {
@@ -226,8 +225,7 @@ p {
         left: calc(var(--form-column-gap, 1rem) * -0.5);
     }
 
-    h1,
-    p {
+    h1 {
         color: rgb(var(--contrast-1400), 0.8);
     }
 

src/components/form/row/row.tsx

@@ -49,11 +49,10 @@ export class Row extends React.Component<RowProps> {
 
     private renderDescription() {
         if (this.schema?.description) {
-            return React.createElement(
-                'p',
-                { className: 'description' },
-                this.schema.description
-            );
+            return React.createElement('limel-markdown', {
+                class: 'description',
+                value: this.schema.description,
+            });
         }
     }
 

src/components/form/templates/common.ts

@@ -29,11 +29,9 @@ export function renderDescription(description: string) {
         return;
     }
 
-    return React.createElement(
-        'p',
-        { className: 'mdc-typography mdc-typography--body1' },
-        description
-    );
+    return React.createElement('limel-markdown', {
+        value: description,
+    });
 }
 
 /**