FOUR-25240:Implement property linkDisplayStyle = [LINK, BUTTON]

src/components/accordions.js

@@ -58,7 +58,7 @@ export default [
   },
   {
     name: 'Design',
-    fields: ['color', 'bgcolor', 'variant', 'toggle', 'height', 'width', 'designerMode', 'bgcolormodern'],
+    fields: ['color', 'bgcolor', 'variant', 'variantStyle', 'toggle', 'height', 'width', 'designerMode', 'bgcolormodern'],
     open: false,
   },
   {

src/components/index.js

@@ -72,6 +72,7 @@ export {
   validationRulesProperty,
   toggleStyleProperty,
   buttonVariantStyleProperty,
+  linkVariantStyleProperty,
   defaultValueProperty,
   buttonTypeEvent,
   tooltipProperty,

src/components/renderer/link-button.vue

@@ -1,13 +1,17 @@
 <template>
   <div class="form-group">
-    <a :class="classColor" :href="inputUrlLink"> {{ label }} </a>
+    <a :class="classColor" :href="inputUrlLink">
+      <i v-if="variantStyle === 'button'" class="fas fa-external-link-alt" />
+      {{ label }}
+    </a>
   </div>
 </template>
 
 <script>
 export default {
   props: [
     "variant",
+    "variantStyle",
     "label",
     "event",
     "eventData",
@@ -18,7 +22,10 @@ export default {
   ],
   computed: {
     classColor() {
-      return `text-${this.variant}`;
+      if (this.variantStyle === "link") {
+        return `text-${this.variant}`;
+      }
+      return `btn btn-${this.variant}`;
     }
   }
 };

src/form-builder-controls.js

@@ -49,6 +49,8 @@ import {
   bgcolorModern,
   bgcolorPropertyRecord,
   colorPropertyRecord,
+  linkVariantStyleProperty,
+  variantStyleProperty
 } from './form-control-common-properties';
 
 export default [
@@ -1080,15 +1082,17 @@ export default [
         label: "New Link",
         icon: "fas fa-link",
         variant: "primary",
+        variantStyle: "link",
         event: "link",
+        value: "link"
       },
       inspector: [
         {
           type: 'FormInput',
           field: 'label',
           config: {
             label: 'Label',
-            helper: 'The label describes the button\'s text',
+            helper: 'The label describes the link\'s text',
           },
         },
         {
@@ -1097,9 +1101,10 @@ export default [
           config: {
             label: 'Link URL',
             helper: 'Type here the URL link. Mustache syntax is supported.',
-          },         
+          },
         },
-        buttonVariantStyleProperty
+        variantStyleProperty,
+        linkVariantStyleProperty
       ]
     }
   },

src/form-control-common-properties.js

@@ -284,53 +284,76 @@ export const toggleStyleProperty = {
   },
 };
 
+const optionsColor = [
+  {
+    value: "primary",
+    content: "Primary"
+  },
+  {
+    value: "secondary",
+    content: "Secondary"
+  },
+  {
+    value: "success",
+    content: "Success"
+  },
+  {
+    value: "danger",
+    content: "Danger"
+  },
+  {
+    value: "warning",
+    content: "Warning"
+  },
+  {
+    value: "info",
+    content: "Info"
+  },
+  {
+    value: "light",
+    content: "Light"
+  },
+  {
+    value: "dark",
+    content: "Dark"
+  },
+  {
+    value: "link",
+    content: "Link"
+  }
+];
+
 export const buttonVariantStyleProperty = {
-  type: 'FormMultiselect',
-  field: 'variant',
+  type: "FormMultiselect",
+  field: "variant",
   config: {
-    label: 'Button Variant Style',
-    helper: 'The variant determines the appearance of the button',
-    options: [
-      {
-        value: 'primary',
-        content: 'Primary',
-      },
-      {
-        value: 'secondary',
-        content: 'Secondary',
-      },
-      {
-        value: 'success',
-        content: 'Success',
-      },
-      {
-        value: 'danger',
-        content: 'Danger',
-      },
-      {
-        value: 'warning',
-        content: 'Warning',
-      },
-      {
-        value: 'info',
-        content: 'Info',
-      },
-      {
-        value: 'light',
-        content: 'Light',
-      },
+    label: "Button Variant Style",
+    helper: "The variant determines the appearance of the button",
+    options: optionsColor
+  }
+};
 
-      {
-        value: 'dark',
-        content: 'Dark',
-      },
+export const linkVariantStyleProperty = {
+  type: "FormMultiselect",
+  field: "variant",
+  config: {
+    label: "Link Variant Style",
+    helper: "The variant determines the appearance of the link",
+    options: optionsColor
+  }
+};
 
-      {
-        value: 'link',
-        content: 'Link',
-      },
-    ],
-  },
+export const variantStyleProperty = {
+  type: "FormMultiselect",
+  field: "variantStyle",
+  config: {
+    label: "Variant Style",
+    helper: "The variant determines the appearance of the link",
+    options: [
+      { value: "link", content: "Link" },
+      { value: "button", content: "Button" }
+    ]
+  }
 };
 
 export const defaultValueProperty = {