Added handling for string prop in component content. (#3433)

* added " for string props

* added switch case for type of the prop

* captialize button

Author: nitzanyiz

docuilib/src/components/pageComponents/ContentItem.tsx

@@ -6,16 +6,20 @@ import ReactLiveScope from '../../theme/ReactLiveScope';
 type ComponentItemProps = {
   componentName: string;
   props: Record<string, unknown>;
-}
+};
 const ComponentItem = (props: ComponentItemProps) => {
   const {componentName, props: componentProps} = props;
   const isComponentExists = !!ReactLiveScope[componentName];
   const propString = Object.keys(componentProps).reduce((acc, key) => {
     const propValue = componentProps[key];
-    if (typeof propValue === 'object') {
-      return `${acc}${key}={${JSON.stringify(propValue)}} `;
+    switch (typeof propValue) {
+      case 'object':
+        return `${acc}${key}={${JSON.stringify(propValue)}} `;
+      case 'string':
+        return `${acc}${key}="${propValue}" `;
+      default:
+        return `${acc}${key}={${propValue}} `;
     }
-    return `${acc}${key}={${propValue}} `;
   }, '');
 
   const code = isComponentExists ? `<${componentName} ${propString} />` : '<Text>Component Not Found</Text>';
@@ -31,13 +35,12 @@ type Item = {
   component?: string;
   props?: any;
   value?: any;
-}
+};
 type ContentItemProps = {
   item: Item;
   componentName: string;
-}
+};
 export const ContentItem = ({item, componentName}: ContentItemProps) => {
-
   const getFigmaEmbed = item => {
     const value = item.value;
     const height = item.height || 450;

src/components/test.api.json

@@ -95,20 +95,20 @@
               {
                 "component": "Text",
                 "props": {
-                  "children": "\"This is a Text\""
+                  "children": "This is a Text"
                 },
                 "background": "yellow"
               },
               {
                 "component": "Button",
                 "props": {
-                  "label": "\"This is a button\""
+                  "label": "This is a Button"
                 }
               },
               {
                 "component": "Chip",
                 "props": {
-                  "label": "\"This is a Chip\""
+                  "label": "This is a Chip"
                 }
               }
             ]