diff --git a/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx b/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx
index b26586dc08..44b5c38069 100644
--- a/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx
@@ -25,6 +25,7 @@ const shouldAddBoxShadowAndVisibility = [
'DaterangePicker',
'DatePickerV2',
'TimePicker',
+ 'Link',
];
const RenderWidget = ({
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/DefaultComponent.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/DefaultComponent.jsx
index d680f21d1e..f5da78fc32 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/DefaultComponent.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/DefaultComponent.jsx
@@ -24,6 +24,7 @@ const SHOW_ADDITIONAL_ACTIONS = [
'RichTextEditor',
'Image',
'ModalV2',
+ 'Link',
];
const PROPERTIES_VS_ACCORDION_TITLE = {
Text: 'Data',
@@ -36,6 +37,7 @@ const PROPERTIES_VS_ACCORDION_TITLE = {
Image: 'Data',
Container: 'Data',
ModalV2: 'Data',
+ Link: 'Data',
};
export const DefaultComponent = ({ componentMeta, darkMode, ...restProps }) => {
@@ -129,6 +131,7 @@ export const baseComponentProperties = (
'DropdownV2',
'MultiselectV2',
'Image',
+ 'Link',
],
Layout: [],
};
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx
index 6a3465403d..ec3aac4309 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx
@@ -80,6 +80,7 @@ const NEW_REVAMPED_COMPONENTS = [
'Image',
'Container',
'ModalV2',
+ 'Link',
];
export const Inspector = ({ componentDefinitionChanged, darkMode, pages, selectedComponentId }) => {
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/link.js b/frontend/src/AppBuilder/WidgetManager/widgets/link.js
index bf419e16c0..be42994124 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/link.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/link.js
@@ -12,14 +12,6 @@ export const linkConfig = {
showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
},
properties: {
- linkTarget: {
- type: 'code',
- displayName: 'Link target',
- validation: {
- schema: { type: 'string' },
- defaultValue: 'https://dev.to/',
- },
- },
linkText: {
type: 'code',
displayName: 'Link text',
@@ -28,6 +20,14 @@ export const linkConfig = {
defaultValue: 'Click here',
},
},
+ linkTarget: {
+ type: 'code',
+ displayName: 'Link target',
+ validation: {
+ schema: { type: 'string' },
+ defaultValue: 'https://dev.to/',
+ },
+ },
targetType: {
type: 'select',
displayName: 'Target type',
@@ -39,6 +39,34 @@ export const linkConfig = {
schema: { type: 'string' },
},
},
+ loadingState: {
+ type: 'toggle',
+ displayName: 'Loading state',
+ validation: { schema: { type: 'boolean' }, defaultValue: false },
+ section: 'additionalActions',
+ },
+ visibility: {
+ type: 'toggle',
+ displayName: 'Visibility',
+ validation: {
+ schema: { type: 'boolean' },
+ defaultValue: true,
+ },
+ section: 'additionalActions',
+ },
+ disabledState: {
+ type: 'toggle',
+ displayName: 'Disable',
+ validation: { schema: { type: 'boolean' }, defaultValue: false },
+ section: 'additionalActions',
+ },
+ tooltip: {
+ type: 'code',
+ displayName: 'Tooltip',
+ validation: { schema: { type: 'string' }, defaultValue: 'Tooltip text' },
+ section: 'additionalActions',
+ placeholder: 'Enter tooltip text',
+ },
},
events: {
onClick: { displayName: 'On click' },
@@ -52,6 +80,7 @@ export const linkConfig = {
schema: { type: 'string' },
defaultValue: '#375FCF',
},
+ accordian: 'Link text',
},
textSize: {
type: 'number',
@@ -60,7 +89,39 @@ export const linkConfig = {
schema: { type: 'number' },
defaultValue: 14,
},
+ accordian: 'Link text',
},
+ horizontalAlignment: {
+ type: 'alignButtons',
+ displayName: 'Alignment',
+ validation: {
+ schema: { type: 'string' },
+ defaultValue: 'left',
+ },
+ accordian: 'Link text',
+ },
+ verticalAlignment: {
+ type: 'switch',
+ displayName: '',
+ validation: { schema: { type: 'string' }, defaultValue: 'center' },
+ showLabel: false,
+ isIcon: true,
+ options: [
+ { displayName: 'alignverticallytop', value: 'top', iconName: 'alignverticallytop' },
+ { displayName: 'alignverticallycenter', value: 'center', iconName: 'alignverticallycenter' },
+ { displayName: 'alignverticallybottom', value: 'bottom', iconName: 'alignverticallybottom' },
+ ],
+ accordian: 'Link text',
+ isFxNotRequired: true,
+ },
+ icon: {
+ type: 'icon',
+ displayName: 'Icon',
+ validation: { schema: { type: 'string' }, defaultValue: 'IconHome2' },
+ accordian: 'Link text',
+ visibility: false,
+ },
+
underline: {
type: 'select',
displayName: 'Underline',
@@ -73,14 +134,30 @@ export const linkConfig = {
schema: { type: 'string' },
defaultValue: 'on-hover',
},
+ accordian: 'Link text',
},
- visibility: {
- type: 'toggle',
- displayName: 'Visibility',
+ boxShadow: {
+ type: 'boxShadow',
+ displayName: 'Box Shadow',
validation: {
- schema: { type: 'boolean' },
- defaultValue: true,
+ schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+ defaultValue: '0px 0px 0px 0px #00000040',
},
+ accordian: 'Link text',
+ },
+ padding: {
+ type: 'switch',
+ displayName: 'Padding',
+ validation: {
+ schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+ defaultValue: 'default',
+ },
+ isFxNotRequired: true,
+ options: [
+ { displayName: 'Default', value: 'default' },
+ { displayName: 'None', value: 'none' },
+ ],
+ accordian: 'container',
},
},
exposedVariables: {},
@@ -89,6 +166,31 @@ export const linkConfig = {
handle: 'click',
displayName: 'Click',
},
+ {
+ handle: 'setLinkTarget',
+ displayName: 'Set link target',
+ params: [{ handle: 'setLinkTargetState', displayName: 'Value', defaultValue: '', type: 'code' }],
+ },
+ {
+ handle: 'setLinkText',
+ displayName: 'Set link text',
+ params: [{ handle: 'setLinkTextState', displayName: 'Value', defaultValue: '', type: 'code' }],
+ },
+ {
+ handle: 'setVisibility',
+ displayName: 'Set visibility',
+ params: [{ handle: 'isVisible', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+ },
+ {
+ handle: 'setDisable',
+ displayName: 'Set disable',
+ params: [{ handle: 'isDisabled', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+ },
+ {
+ handle: 'setLoading',
+ displayName: 'Set loading',
+ params: [{ handle: 'isLoading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+ },
],
definition: {
others: {
@@ -99,13 +201,22 @@ export const linkConfig = {
linkTarget: { value: 'https://dev.to/' },
linkText: { value: 'Click here' },
targetType: { value: 'new' },
+ visibility: { value: '{{true}}' },
+ disabledState: { value: '{{false}}' },
+ tooltip: { value: '' },
+ loadingState: { value: '{{false}}' },
},
events: [],
styles: {
textColor: { value: '#375FCF' },
textSize: { value: '{{14}}' },
underline: { value: 'on-hover' },
- visibility: { value: '{{true}}' },
+ verticalAlignment: { value: 'center' },
+ horizontalAlignment: { value: 'left' },
+ padding: { value: 'default' },
+ boxShadow: { value: '0px 0px 0px 0px #00000040' },
+ icon: { value: 'IconHome2' },
+ iconVisibility: { value: false },
},
},
};
diff --git a/frontend/src/Editor/Components/Link.jsx b/frontend/src/Editor/Components/Link.jsx
index ff993acc17..d20f700e8d 100644
--- a/frontend/src/Editor/Components/Link.jsx
+++ b/frontend/src/Editor/Components/Link.jsx
@@ -1,32 +1,106 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
+import * as Icons from '@tabler/icons-react';
import cx from 'classnames';
+import Loader from '@/ToolJetUI/Loader/Loader';
-export const Link = ({ height, properties, styles, fireEvent, setExposedVariable, dataCy }) => {
- const { linkTarget, linkText, targetType } = properties;
- const { textColor, textSize, underline, visibility, boxShadow } = styles;
+export const Link = ({ height, properties, styles, fireEvent, setExposedVariables, dataCy }) => {
+ const { linkTarget, linkText, targetType, visibility, disabledState, loadingState } = properties;
+ const { textColor, textSize, underline, boxShadow, verticalAlignment, horizontalAlignment, icon, iconVisibility } =
+ styles;
const clickRef = useRef();
+ const [linkTargetState, setLinkTargetState] = useState(linkTarget);
+ const [linkTextState, setLinkTextState] = useState(linkText);
+ const [isVisible, setIsVisible] = useState(visibility);
+ const [isDisabled, setIsDisabled] = useState(disabledState);
+ const [isLoading, setIsLoading] = useState(false);
const computedStyles = {
- fontSize: textSize,
+ display: 'flex',
+ alignItems: verticalAlignment === 'top' ? 'flex-start' : verticalAlignment === 'center' ? 'center' : 'flex-end',
+ justifyContent:
+ horizontalAlignment === 'left' ? 'flex-start' : horizontalAlignment === 'center' ? 'center' : 'flex-end',
height,
boxShadow,
+ cursor: isDisabled ? 'not-allowed' : 'pointer',
+ opacity: isDisabled ? 0.5 : 1,
+ pointerEvents: isDisabled ? 'none' : 'auto',
};
+ // eslint-disable-next-line import/namespace
+ const IconElement = Icons?.[icon] == undefined ? Icons['IconHome2'] : Icons[icon];
+
+ // Update the state when the linkTarget or linkText changes
+ useEffect(() => {
+ setLinkTargetState(linkTarget);
+ setLinkTextState(linkText);
+ }, [linkTarget, linkText]);
+
+ // Update the exposed variables when the linkTarget or linkText changes
+ useEffect(() => {
+ const exposedVariables = {
+ linkTarget: linkTargetState,
+ linkText: linkTextState,
+ };
+ setExposedVariables(exposedVariables);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [linkTargetState, linkTextState]);
useEffect(() => {
- setExposedVariable('click', async function () {
- clickRef.current.click();
- });
+ setIsVisible(visibility);
+ setIsDisabled(disabledState);
+ setIsLoading(loadingState);
+ const exposedVariables = {
+ isLoading: loadingState,
+ isVisible: visibility,
+ isDisabled: disabledState,
+ };
+
+ setExposedVariables(exposedVariables);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [visibility, disabledState, loadingState]);
+
+ // Update the exposed functions on mount
+ useEffect(() => {
+ const exposedVariables = {
+ click: async function () {
+ clickRef.current.click();
+ },
+ setVisibility: async function (value) {
+ setIsVisible(value);
+ },
+ setDisable: async function (value) {
+ setIsDisabled(value);
+ },
+ setLoading: async function (value) {
+ setIsLoading(value);
+ },
+ setLinkTarget: async function (value) {
+ setLinkTargetState(value);
+ },
+ setLinkText: async function (value) {
+ setLinkTextState(value);
+ },
+ };
+ setExposedVariables(exposedVariables);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
+ if (isLoading) {
+ return (
+
+
+
+
+
+ );
+ }
return (
);
diff --git a/frontend/src/Editor/WidgetManager/configs/link.js b/frontend/src/Editor/WidgetManager/configs/link.js
index bf419e16c0..be42994124 100644
--- a/frontend/src/Editor/WidgetManager/configs/link.js
+++ b/frontend/src/Editor/WidgetManager/configs/link.js
@@ -12,14 +12,6 @@ export const linkConfig = {
showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
},
properties: {
- linkTarget: {
- type: 'code',
- displayName: 'Link target',
- validation: {
- schema: { type: 'string' },
- defaultValue: 'https://dev.to/',
- },
- },
linkText: {
type: 'code',
displayName: 'Link text',
@@ -28,6 +20,14 @@ export const linkConfig = {
defaultValue: 'Click here',
},
},
+ linkTarget: {
+ type: 'code',
+ displayName: 'Link target',
+ validation: {
+ schema: { type: 'string' },
+ defaultValue: 'https://dev.to/',
+ },
+ },
targetType: {
type: 'select',
displayName: 'Target type',
@@ -39,6 +39,34 @@ export const linkConfig = {
schema: { type: 'string' },
},
},
+ loadingState: {
+ type: 'toggle',
+ displayName: 'Loading state',
+ validation: { schema: { type: 'boolean' }, defaultValue: false },
+ section: 'additionalActions',
+ },
+ visibility: {
+ type: 'toggle',
+ displayName: 'Visibility',
+ validation: {
+ schema: { type: 'boolean' },
+ defaultValue: true,
+ },
+ section: 'additionalActions',
+ },
+ disabledState: {
+ type: 'toggle',
+ displayName: 'Disable',
+ validation: { schema: { type: 'boolean' }, defaultValue: false },
+ section: 'additionalActions',
+ },
+ tooltip: {
+ type: 'code',
+ displayName: 'Tooltip',
+ validation: { schema: { type: 'string' }, defaultValue: 'Tooltip text' },
+ section: 'additionalActions',
+ placeholder: 'Enter tooltip text',
+ },
},
events: {
onClick: { displayName: 'On click' },
@@ -52,6 +80,7 @@ export const linkConfig = {
schema: { type: 'string' },
defaultValue: '#375FCF',
},
+ accordian: 'Link text',
},
textSize: {
type: 'number',
@@ -60,7 +89,39 @@ export const linkConfig = {
schema: { type: 'number' },
defaultValue: 14,
},
+ accordian: 'Link text',
},
+ horizontalAlignment: {
+ type: 'alignButtons',
+ displayName: 'Alignment',
+ validation: {
+ schema: { type: 'string' },
+ defaultValue: 'left',
+ },
+ accordian: 'Link text',
+ },
+ verticalAlignment: {
+ type: 'switch',
+ displayName: '',
+ validation: { schema: { type: 'string' }, defaultValue: 'center' },
+ showLabel: false,
+ isIcon: true,
+ options: [
+ { displayName: 'alignverticallytop', value: 'top', iconName: 'alignverticallytop' },
+ { displayName: 'alignverticallycenter', value: 'center', iconName: 'alignverticallycenter' },
+ { displayName: 'alignverticallybottom', value: 'bottom', iconName: 'alignverticallybottom' },
+ ],
+ accordian: 'Link text',
+ isFxNotRequired: true,
+ },
+ icon: {
+ type: 'icon',
+ displayName: 'Icon',
+ validation: { schema: { type: 'string' }, defaultValue: 'IconHome2' },
+ accordian: 'Link text',
+ visibility: false,
+ },
+
underline: {
type: 'select',
displayName: 'Underline',
@@ -73,14 +134,30 @@ export const linkConfig = {
schema: { type: 'string' },
defaultValue: 'on-hover',
},
+ accordian: 'Link text',
},
- visibility: {
- type: 'toggle',
- displayName: 'Visibility',
+ boxShadow: {
+ type: 'boxShadow',
+ displayName: 'Box Shadow',
validation: {
- schema: { type: 'boolean' },
- defaultValue: true,
+ schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+ defaultValue: '0px 0px 0px 0px #00000040',
},
+ accordian: 'Link text',
+ },
+ padding: {
+ type: 'switch',
+ displayName: 'Padding',
+ validation: {
+ schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+ defaultValue: 'default',
+ },
+ isFxNotRequired: true,
+ options: [
+ { displayName: 'Default', value: 'default' },
+ { displayName: 'None', value: 'none' },
+ ],
+ accordian: 'container',
},
},
exposedVariables: {},
@@ -89,6 +166,31 @@ export const linkConfig = {
handle: 'click',
displayName: 'Click',
},
+ {
+ handle: 'setLinkTarget',
+ displayName: 'Set link target',
+ params: [{ handle: 'setLinkTargetState', displayName: 'Value', defaultValue: '', type: 'code' }],
+ },
+ {
+ handle: 'setLinkText',
+ displayName: 'Set link text',
+ params: [{ handle: 'setLinkTextState', displayName: 'Value', defaultValue: '', type: 'code' }],
+ },
+ {
+ handle: 'setVisibility',
+ displayName: 'Set visibility',
+ params: [{ handle: 'isVisible', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+ },
+ {
+ handle: 'setDisable',
+ displayName: 'Set disable',
+ params: [{ handle: 'isDisabled', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+ },
+ {
+ handle: 'setLoading',
+ displayName: 'Set loading',
+ params: [{ handle: 'isLoading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+ },
],
definition: {
others: {
@@ -99,13 +201,22 @@ export const linkConfig = {
linkTarget: { value: 'https://dev.to/' },
linkText: { value: 'Click here' },
targetType: { value: 'new' },
+ visibility: { value: '{{true}}' },
+ disabledState: { value: '{{false}}' },
+ tooltip: { value: '' },
+ loadingState: { value: '{{false}}' },
},
events: [],
styles: {
textColor: { value: '#375FCF' },
textSize: { value: '{{14}}' },
underline: { value: 'on-hover' },
- visibility: { value: '{{true}}' },
+ verticalAlignment: { value: 'center' },
+ horizontalAlignment: { value: 'left' },
+ padding: { value: 'default' },
+ boxShadow: { value: '0px 0px 0px 0px #00000040' },
+ icon: { value: 'IconHome2' },
+ iconVisibility: { value: false },
},
},
};
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index 262bfc748e..b323382f6a 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -7142,8 +7142,6 @@ tbody {
}
.link-widget {
- display: flex;
- align-items: center;
overflow: auto;
&.hover {
diff --git a/server/src/modules/apps/services/widget-config/link.js b/server/src/modules/apps/services/widget-config/link.js
index bf419e16c0..be42994124 100644
--- a/server/src/modules/apps/services/widget-config/link.js
+++ b/server/src/modules/apps/services/widget-config/link.js
@@ -12,14 +12,6 @@ export const linkConfig = {
showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
},
properties: {
- linkTarget: {
- type: 'code',
- displayName: 'Link target',
- validation: {
- schema: { type: 'string' },
- defaultValue: 'https://dev.to/',
- },
- },
linkText: {
type: 'code',
displayName: 'Link text',
@@ -28,6 +20,14 @@ export const linkConfig = {
defaultValue: 'Click here',
},
},
+ linkTarget: {
+ type: 'code',
+ displayName: 'Link target',
+ validation: {
+ schema: { type: 'string' },
+ defaultValue: 'https://dev.to/',
+ },
+ },
targetType: {
type: 'select',
displayName: 'Target type',
@@ -39,6 +39,34 @@ export const linkConfig = {
schema: { type: 'string' },
},
},
+ loadingState: {
+ type: 'toggle',
+ displayName: 'Loading state',
+ validation: { schema: { type: 'boolean' }, defaultValue: false },
+ section: 'additionalActions',
+ },
+ visibility: {
+ type: 'toggle',
+ displayName: 'Visibility',
+ validation: {
+ schema: { type: 'boolean' },
+ defaultValue: true,
+ },
+ section: 'additionalActions',
+ },
+ disabledState: {
+ type: 'toggle',
+ displayName: 'Disable',
+ validation: { schema: { type: 'boolean' }, defaultValue: false },
+ section: 'additionalActions',
+ },
+ tooltip: {
+ type: 'code',
+ displayName: 'Tooltip',
+ validation: { schema: { type: 'string' }, defaultValue: 'Tooltip text' },
+ section: 'additionalActions',
+ placeholder: 'Enter tooltip text',
+ },
},
events: {
onClick: { displayName: 'On click' },
@@ -52,6 +80,7 @@ export const linkConfig = {
schema: { type: 'string' },
defaultValue: '#375FCF',
},
+ accordian: 'Link text',
},
textSize: {
type: 'number',
@@ -60,7 +89,39 @@ export const linkConfig = {
schema: { type: 'number' },
defaultValue: 14,
},
+ accordian: 'Link text',
},
+ horizontalAlignment: {
+ type: 'alignButtons',
+ displayName: 'Alignment',
+ validation: {
+ schema: { type: 'string' },
+ defaultValue: 'left',
+ },
+ accordian: 'Link text',
+ },
+ verticalAlignment: {
+ type: 'switch',
+ displayName: '',
+ validation: { schema: { type: 'string' }, defaultValue: 'center' },
+ showLabel: false,
+ isIcon: true,
+ options: [
+ { displayName: 'alignverticallytop', value: 'top', iconName: 'alignverticallytop' },
+ { displayName: 'alignverticallycenter', value: 'center', iconName: 'alignverticallycenter' },
+ { displayName: 'alignverticallybottom', value: 'bottom', iconName: 'alignverticallybottom' },
+ ],
+ accordian: 'Link text',
+ isFxNotRequired: true,
+ },
+ icon: {
+ type: 'icon',
+ displayName: 'Icon',
+ validation: { schema: { type: 'string' }, defaultValue: 'IconHome2' },
+ accordian: 'Link text',
+ visibility: false,
+ },
+
underline: {
type: 'select',
displayName: 'Underline',
@@ -73,14 +134,30 @@ export const linkConfig = {
schema: { type: 'string' },
defaultValue: 'on-hover',
},
+ accordian: 'Link text',
},
- visibility: {
- type: 'toggle',
- displayName: 'Visibility',
+ boxShadow: {
+ type: 'boxShadow',
+ displayName: 'Box Shadow',
validation: {
- schema: { type: 'boolean' },
- defaultValue: true,
+ schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+ defaultValue: '0px 0px 0px 0px #00000040',
},
+ accordian: 'Link text',
+ },
+ padding: {
+ type: 'switch',
+ displayName: 'Padding',
+ validation: {
+ schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+ defaultValue: 'default',
+ },
+ isFxNotRequired: true,
+ options: [
+ { displayName: 'Default', value: 'default' },
+ { displayName: 'None', value: 'none' },
+ ],
+ accordian: 'container',
},
},
exposedVariables: {},
@@ -89,6 +166,31 @@ export const linkConfig = {
handle: 'click',
displayName: 'Click',
},
+ {
+ handle: 'setLinkTarget',
+ displayName: 'Set link target',
+ params: [{ handle: 'setLinkTargetState', displayName: 'Value', defaultValue: '', type: 'code' }],
+ },
+ {
+ handle: 'setLinkText',
+ displayName: 'Set link text',
+ params: [{ handle: 'setLinkTextState', displayName: 'Value', defaultValue: '', type: 'code' }],
+ },
+ {
+ handle: 'setVisibility',
+ displayName: 'Set visibility',
+ params: [{ handle: 'isVisible', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+ },
+ {
+ handle: 'setDisable',
+ displayName: 'Set disable',
+ params: [{ handle: 'isDisabled', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+ },
+ {
+ handle: 'setLoading',
+ displayName: 'Set loading',
+ params: [{ handle: 'isLoading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+ },
],
definition: {
others: {
@@ -99,13 +201,22 @@ export const linkConfig = {
linkTarget: { value: 'https://dev.to/' },
linkText: { value: 'Click here' },
targetType: { value: 'new' },
+ visibility: { value: '{{true}}' },
+ disabledState: { value: '{{false}}' },
+ tooltip: { value: '' },
+ loadingState: { value: '{{false}}' },
},
events: [],
styles: {
textColor: { value: '#375FCF' },
textSize: { value: '{{14}}' },
underline: { value: 'on-hover' },
- visibility: { value: '{{true}}' },
+ verticalAlignment: { value: 'center' },
+ horizontalAlignment: { value: 'left' },
+ padding: { value: 'default' },
+ boxShadow: { value: '0px 0px 0px 0px #00000040' },
+ icon: { value: 'IconHome2' },
+ iconVisibility: { value: false },
},
},
};