From f7f156f424a9d7965d9c8bf2ee568f4caa92ca84 Mon Sep 17 00:00:00 2001 From: Nakul Nagargade Date: Tue, 18 Mar 2025 16:16:04 +0530 Subject: [PATCH] Revamp Link widget --- .../src/AppBuilder/AppCanvas/RenderWidget.jsx | 1 + .../Inspector/Components/DefaultComponent.jsx | 3 + .../RightSideBar/Inspector/Inspector.jsx | 1 + .../AppBuilder/WidgetManager/widgets/link.js | 139 ++++++++++++++++-- frontend/src/Editor/Components/Link.jsx | 110 ++++++++++++-- .../src/Editor/WidgetManager/configs/link.js | 139 ++++++++++++++++-- frontend/src/_styles/theme.scss | 2 - .../apps/services/widget-config/link.js | 139 ++++++++++++++++-- 8 files changed, 478 insertions(+), 56 deletions(-) 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 (
{ event.stopPropagation(); @@ -35,10 +109,22 @@ export const Link = ({ height, properties, styles, fireEvent, setExposedVariable onMouseOver={() => { fireEvent('onHover'); }} - style={{ color: textColor }} + style={{ color: textColor, fontSize: textSize }} ref={clickRef} > - {linkText} + + {iconVisibility && ( + + )} + {linkTextState} +
); 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 }, }, }, };