Config changes

This commit is contained in:
Shaurya Sharma 2025-03-04 02:42:34 +05:30
parent 45c7c60674
commit 07af772bd6
109 changed files with 386 additions and 787 deletions

@ -1 +1 @@
Subproject commit 48b34618a96d70a64fa6579a54da941e457899d0
Subproject commit 8abe6a26910d0e1758f5fa3684c81187afdb2e33

View file

@ -61,7 +61,7 @@ export const buttonConfig = {
accordian: 'button',
},
backgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background',
validation: {
schema: { type: 'string' },
@ -74,7 +74,7 @@ export const buttonConfig = {
accordian: 'button',
},
textColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text color',
validation: {
schema: { type: 'string' },
@ -83,7 +83,7 @@ export const buttonConfig = {
accordian: 'button',
},
borderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border color',
validation: {
schema: { type: 'string' },
@ -92,7 +92,7 @@ export const buttonConfig = {
accordian: 'button',
},
loaderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Loader color',
validation: {
schema: { type: 'string' },
@ -110,7 +110,7 @@ export const buttonConfig = {
visibility: false,
},
iconColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Icon color',
validation: { schema: { type: 'string' } },
accordian: 'button',
@ -219,10 +219,10 @@ export const buttonConfig = {
events: [],
styles: {
textColor: { value: '#FFFFFF' },
borderColor: { value: '#4368E3' },
borderColor: { value: 'var(--primary-brand)' },
loaderColor: { value: '#FFFFFF' },
borderRadius: { value: '{{6}}' },
backgroundColor: { value: '#4368E3' },
backgroundColor: { value: 'var(--primary-brand)' },
iconColor: { value: '#FFFFFF' },
direction: { value: 'left' },
padding: { value: 'default' },

View file

@ -68,7 +68,7 @@ export const buttonGroupConfig = {
},
styles: {
backgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background color',
validation: {
schema: { type: 'string' },
@ -76,7 +76,7 @@ export const buttonGroupConfig = {
},
},
textColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text color',
validation: {
schema: { type: 'string' },
@ -108,7 +108,7 @@ export const buttonGroupConfig = {
},
},
selectedTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Selected text colour',
validation: {
schema: { type: 'string' },
@ -116,11 +116,11 @@ export const buttonGroupConfig = {
},
},
selectedBackgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Selected background color',
validation: {
schema: { type: 'string' },
defaultValue: '#007bff',
defaultValue: 'var(--primary-brand)',
},
},
},
@ -147,7 +147,7 @@ export const buttonGroupConfig = {
borderRadius: { value: '{{4}}' },
disabledState: { value: '{{false}}' },
selectedTextColor: { value: '#FFFFFF' },
selectedBackgroundColor: { value: '#4368E3' },
selectedBackgroundColor: { value: 'var(--primary-brand)' },
},
},
};

View file

@ -39,13 +39,13 @@ export const chartConfig = {
},
},
markerColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Marker color',
validation: {
schema: {
type: 'string',
},
defaultValue: '#CDE1F8',
defaultValue: 'var(--primary-brand)',
},
},
showAxes: {
@ -134,7 +134,7 @@ export const chartConfig = {
},
styles: {
backgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background color',
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
},
@ -192,7 +192,7 @@ export const chartConfig = {
},
properties: {
title: { value: 'This title can be changed' },
markerColor: { value: '#CDE1F8' },
markerColor: { value: 'var(--primary-brand)' },
showAxes: { value: '{{true}}' },
showGridLines: { value: '{{true}}' },
plotFromJson: { value: '{{false}}' },

View file

@ -70,7 +70,7 @@ export const checkboxConfig = {
},
styles: {
textColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text color',
validation: {
schema: { type: 'string' },
@ -78,7 +78,7 @@ export const checkboxConfig = {
accordian: 'label',
},
borderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border color',
validation: {
schema: { type: 'string' },
@ -86,7 +86,7 @@ export const checkboxConfig = {
accordian: 'switch',
},
checkboxColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Checked color',
validation: {
schema: { type: 'string' },
@ -94,7 +94,7 @@ export const checkboxConfig = {
accordian: 'switch',
},
uncheckedColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Unchecked color',
validation: {
schema: { type: 'string' },
@ -102,7 +102,7 @@ export const checkboxConfig = {
accordian: 'switch',
},
handleColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Handle color',
validation: {
schema: { type: 'string' },
@ -183,7 +183,7 @@ export const checkboxConfig = {
styles: {
disabledState: { value: '{{false}}' },
textColor: { value: '#1B1F24' },
checkboxColor: { value: '#4368E3' },
checkboxColor: { value: 'var(--primary-brand)' },
uncheckedColor: { value: '#E4E7EB' },
borderColor: { value: '#CCD1D5' },
handleColor: { value: '#FFFFFF' },

View file

@ -32,15 +32,15 @@ export const circularProgressbarConfig = {
events: {},
styles: {
color: {
type: 'color',
displayName: 'Color',
type: 'colorSwatches',
displayName: 'colorSwatches',
validation: {
schema: { type: 'string' },
defaultValue: '#375FCF',
defaultValue: 'var(--primary-brand)',
},
},
textColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text Color',
validation: {
schema: { type: 'string' },
@ -104,7 +104,7 @@ export const circularProgressbarConfig = {
},
events: [],
styles: {
color: { value: '' },
color: { value: 'var(--primary-brand)' },
textColor: { value: '' },
textSize: { value: '{{16}}' },
strokeWidth: { value: '{{8}}' },

View file

@ -4,7 +4,7 @@ export const colorPickerConfig = {
description: 'Choose colors from a palette',
component: 'ColorPicker',
properties: {
defaultColor: { type: 'color', displayName: 'Default color' },
defaultColor: { type: 'colorSwatches', displayName: 'Default color' },
},
defaultSize: {
width: 9,
@ -14,7 +14,9 @@ export const colorPickerConfig = {
{
displayName: 'Set Color',
handle: 'setColor',
params: [{ handle: 'color', displayName: 'color', defaultValue: '#ffffff', type: 'color' }],
params: [
{ handle: 'colorSwatches', displayName: 'colorSwatches', defaultValue: '#ffffff', type: 'colorSwatches' },
],
},
],
others: {

View file

@ -71,7 +71,7 @@ export const containerConfig = {
events: {},
styles: {
backgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background',
validation: {
schema: { type: 'string' },
@ -80,7 +80,7 @@ export const containerConfig = {
accordian: 'container',
},
headerBackgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background',
validation: {
schema: { type: 'string' },
@ -89,7 +89,7 @@ export const containerConfig = {
accordian: 'header',
},
borderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border color',
validation: {
schema: { type: 'string' },

View file

@ -169,8 +169,8 @@ export const datePickerV2Config = {
],
styles: {
labelColor: {
type: 'color',
displayName: 'Color',
type: 'colorSwatches',
displayName: 'colorSwatches',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'label',
},
@ -220,31 +220,31 @@ export const datePickerV2Config = {
isFxNotRequired: true,
},
fieldBackgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background',
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
accordian: 'field',
},
fieldBorderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border',
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
accordian: 'field',
},
accentColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Accent',
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
accordian: 'field',
},
selectedTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'field',
},
errTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Error text',
validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
accordian: 'field',
@ -257,7 +257,7 @@ export const datePickerV2Config = {
visibility: false,
},
iconColor: {
type: 'color',
type: 'colorSwatches',
displayName: '',
showLabel: false,
validation: {

View file

@ -199,8 +199,8 @@ export const daterangepickerConfig = {
],
styles: {
labelColor: {
type: 'color',
displayName: 'Color',
type: 'colorSwatches',
displayName: 'colorSwatches',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'label',
},
@ -250,31 +250,31 @@ export const daterangepickerConfig = {
isFxNotRequired: true,
},
fieldBackgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background',
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
accordian: 'field',
},
fieldBorderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border',
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
accordian: 'field',
},
accentColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Accent',
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
accordian: 'field',
},
selectedTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'field',
},
errTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Error text',
validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
accordian: 'field',
@ -287,7 +287,7 @@ export const daterangepickerConfig = {
visibility: false,
},
iconColor: {
type: 'color',
type: 'colorSwatches',
displayName: '',
showLabel: false,
validation: {

View file

@ -214,8 +214,8 @@ export const datetimePickerV2Config = {
],
styles: {
labelColor: {
type: 'color',
displayName: 'Color',
type: 'colorSwatches',
displayName: 'colorSwatches',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'label',
},
@ -265,31 +265,31 @@ export const datetimePickerV2Config = {
isFxNotRequired: true,
},
fieldBackgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background',
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
accordian: 'field',
},
fieldBorderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border',
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
accordian: 'field',
},
accentColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Accent',
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
accordian: 'field',
},
selectedTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'field',
},
errTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Error text',
validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
accordian: 'field',
@ -302,7 +302,7 @@ export const datetimePickerV2Config = {
visibility: false,
},
iconColor: {
type: 'color',
type: 'colorSwatches',
displayName: '',
showLabel: false,
validation: {

View file

@ -15,7 +15,7 @@ export const dividerConfig = {
events: {},
styles: {
dividerColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Divider color',
validation: {
schema: { type: 'string' },

View file

@ -128,7 +128,7 @@ export const dropdownConfig = {
defaultValue: true,
},
selectedTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Selected text color',
validation: {
schema: {

View file

@ -101,7 +101,7 @@ export const dropdownV2Config = {
},
styles: {
labelColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Color',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'label',
@ -153,31 +153,31 @@ export const dropdownV2Config = {
},
fieldBackgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background',
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
accordian: 'field',
},
fieldBorderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border',
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
accordian: 'field',
},
accentColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Accent',
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
accordian: 'field',
},
selectedTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'field',
},
errTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Error text',
validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
accordian: 'field',
@ -190,7 +190,7 @@ export const dropdownV2Config = {
visibility: false,
},
iconColor: {
type: 'color',
type: 'colorSwatches',
displayName: '',
showLabel: false,
validation: {

View file

@ -249,7 +249,7 @@ export const formConfig = {
},
styles: {
backgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background color',
validation: {
schema: { type: 'string' },
@ -267,7 +267,7 @@ export const formConfig = {
},
},
borderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border color',
validation: {
schema: { type: 'string' },

View file

@ -61,7 +61,7 @@ export const iconConfig = {
},
styles: {
iconColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Color',
validation: {
schema: { type: 'string' },

View file

@ -144,7 +144,7 @@ export const imageConfig = {
accordian: 'Image',
},
backgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background',
validation: {
schema: { type: 'string' },
@ -153,7 +153,7 @@ export const imageConfig = {
accordian: 'Container',
},
borderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border',
validation: {
schema: { type: 'string' },

View file

@ -77,7 +77,7 @@ export const kanbanConfig = {
styles: {
disabledState: { type: 'toggle', displayName: 'Disable' },
visibility: { type: 'toggle', displayName: 'Visibility' },
accentColor: { type: 'color', displayName: 'Accent color' },
accentColor: { type: 'colorSwatches', displayName: 'Accent color' },
},
actions: [
{
@ -157,7 +157,7 @@ export const kanbanConfig = {
styles: {
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },
accentColor: { value: '#4d72fa' },
accentColor: { value: 'var(--primary-brand)' },
},
},
};

View file

@ -30,7 +30,7 @@ export const kanbanBoardConfig = {
visibility: { type: 'toggle', displayName: 'Visibility' },
width: { type: 'number', displayName: 'Width' },
minWidth: { type: 'number', displayName: 'Min Width' },
accentColor: { type: 'color', displayName: 'Accent color' },
accentColor: { type: 'colorSwatches', displayName: 'Accent color' },
},
exposedVariables: {
columns: {},

View file

@ -46,7 +46,7 @@ export const linkConfig = {
},
styles: {
textColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text color',
validation: {
schema: { type: 'string' },

View file

@ -120,7 +120,7 @@ export const listviewConfig = {
},
styles: {
backgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background color',
validation: {
schema: { type: 'string' },
@ -128,7 +128,7 @@ export const listviewConfig = {
},
},
borderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border color',
validation: {
schema: { type: 'string' },

View file

@ -81,7 +81,7 @@ export const modalConfig = {
},
styles: {
headerBackgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Header background color',
validation: {
schema: { type: 'string' },
@ -89,7 +89,7 @@ export const modalConfig = {
},
},
headerTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Header title color',
validation: {
schema: { type: 'string' },
@ -97,7 +97,7 @@ export const modalConfig = {
},
},
bodyBackgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Body background color',
validation: {
schema: { type: 'string' },
@ -121,7 +121,7 @@ export const modalConfig = {
},
},
triggerButtonBackgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Trigger button background color',
validation: {
schema: { type: 'string' },
@ -129,7 +129,7 @@ export const modalConfig = {
},
},
triggerButtonTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Trigger button text color',
validation: {
schema: { type: 'string' },
@ -175,7 +175,7 @@ export const modalConfig = {
bodyBackgroundColor: { value: '#ffffffff' },
disabledState: { value: '{{false}}' },
visibility: { value: '{{true}}' },
triggerButtonBackgroundColor: { value: '#4D72FA' },
triggerButtonBackgroundColor: { value: 'var(--primary-brand)' },
triggerButtonTextColor: { value: '#ffffffff' },
},
},

View file

@ -165,7 +165,7 @@ export const multiselectV2Config = {
styles: {
labelColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Color',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'label',
@ -218,32 +218,32 @@ export const multiselectV2Config = {
},
fieldBackgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background',
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
accordian: 'field',
},
fieldBorderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border',
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
accordian: 'field',
},
accentColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Accent',
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
accordian: 'field',
},
selectedTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'field',
},
errTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Error Text',
validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
accordian: 'field',
@ -256,7 +256,7 @@ export const multiselectV2Config = {
visibility: false,
},
iconColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Icon color',
validation: {
schema: { type: 'string' },
@ -365,7 +365,7 @@ export const multiselectV2Config = {
icon: { value: 'IconHome2' },
iconVisibility: { value: false },
iconColor: { value: '#6A727C' },
accentColor: { value: '#4368E3' },
accentColor: { value: 'var(--primary-brand)' },
},
},
};

View file

@ -72,7 +72,7 @@ export const numberinputConfig = {
},
styles: {
color: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'label',
@ -124,31 +124,31 @@ export const numberinputConfig = {
},
backgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background',
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
accordian: 'field',
},
borderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border',
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
accordian: 'field',
},
accentColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Accent',
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' },
accordian: 'field',
},
textColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'field',
},
errTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Error text',
validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
accordian: 'field',
@ -161,7 +161,7 @@ export const numberinputConfig = {
visibility: false,
},
iconColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Icon color',
validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
accordian: 'field',
@ -279,7 +279,7 @@ export const numberinputConfig = {
borderRadius: { value: '{{6}}' },
backgroundColor: { value: '#fff' },
borderColor: { value: '#CCD1D5' },
accentColor: { value: '#4368E3' },
accentColor: { value: 'var(--primary-brand)' },
errTextColor: { value: '#D72D39' },
textColor: { value: '#1B1F24' },
color: { value: '#1B1F24' },

View file

@ -84,7 +84,7 @@ export const passinputConfig = {
},
styles: {
color: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'label',
@ -136,31 +136,31 @@ export const passinputConfig = {
},
backgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background',
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
accordian: 'field',
},
accentColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Accent',
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' },
accordian: 'field',
},
borderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border',
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
accordian: 'field',
},
textColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'field',
},
errTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Error text',
validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
accordian: 'field',
@ -173,7 +173,7 @@ export const passinputConfig = {
visibility: false,
},
iconColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Icon color',
validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
accordian: 'field',
@ -278,7 +278,7 @@ export const passinputConfig = {
borderRadius: { value: '{{6}}' },
backgroundColor: { value: '#fff' },
borderColor: { value: '#CCD1D5' },
accentColor: { value: '#4368E3' },
accentColor: { value: 'var(--primary-brand)' },
errTextColor: { value: '#D72D39' },
textColor: { value: '#1B1F24' },
iconColor: { value: '#CFD3D859' },

View file

@ -89,7 +89,7 @@ export const radiobuttonV2Config = {
},
styles: {
labelColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Color',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'label',
@ -139,7 +139,7 @@ export const radiobuttonV2Config = {
isFxNotRequired: true,
},
borderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border',
validation: {
schema: { type: 'string' },
@ -147,7 +147,7 @@ export const radiobuttonV2Config = {
accordian: 'switch',
},
switchOnBackgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Checked background',
validation: {
schema: { type: 'string' },
@ -158,7 +158,7 @@ export const radiobuttonV2Config = {
tooltipPlacement: 'bottom',
},
switchOffBackgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Unchecked background',
validation: {
schema: { type: 'string' },
@ -169,7 +169,7 @@ export const radiobuttonV2Config = {
tooltipPlacement: 'bottom',
},
handleColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Handle color',
validation: {
schema: { type: 'string' },
@ -177,7 +177,7 @@ export const radiobuttonV2Config = {
accordian: 'switch',
},
optionsTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text',
validation: {
schema: { type: 'string' },

View file

@ -53,7 +53,7 @@ export const radiobuttonConfig = {
},
styles: {
textColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text color',
validation: {
schema: { type: 'string' },
@ -61,11 +61,11 @@ export const radiobuttonConfig = {
},
},
activeColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Active color',
validation: {
schema: { type: 'string' },
defaultValue: '#000000',
defaultValue: 'var(--primary-brand)',
},
},
visibility: {
@ -113,7 +113,7 @@ export const radiobuttonConfig = {
events: [],
styles: {
textColor: { value: '' },
activeColor: { value: '' },
activeColor: { value: 'var(--primary-brand)' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },
},

View file

@ -53,7 +53,7 @@ export const rangeSliderConfig = {
},
styles: {
lineColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Line color',
validation: {
schema: { type: 'string' },
@ -61,7 +61,7 @@ export const rangeSliderConfig = {
},
},
handleColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Handle color',
validation: {
schema: { type: 'string' },
@ -69,7 +69,7 @@ export const rangeSliderConfig = {
},
},
trackColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Track color',
validation: {
schema: { type: 'string' },
@ -109,7 +109,7 @@ export const rangeSliderConfig = {
styles: {
lineColor: { value: '' },
handleColor: { value: '' },
trackColor: { value: '' },
trackColor: { value: 'var(--primary-brand)' },
visibility: { value: '{{true}}' },
},
},

View file

@ -23,11 +23,11 @@ export const spinnerConfig = {
},
},
colour: {
type: 'color',
type: 'colorSwatches',
displayName: 'Colour',
validation: {
schema: { type: 'string' },
defaultValue: '#0565ff',
defaultValue: 'var(--primary-brand)',
},
},
size: {
@ -54,7 +54,7 @@ export const spinnerConfig = {
styles: {
visibility: { value: '{{true}}' },
size: { value: 'sm' },
colour: { value: '#0565ff' },
colour: { value: 'var(--primary-brand)' },
},
},
};

View file

@ -58,7 +58,7 @@ export const starratingConfig = {
},
styles: {
textColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Star color',
validation: {
schema: { type: 'string' },
@ -66,7 +66,7 @@ export const starratingConfig = {
},
},
labelColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Label color',
validation: {
schema: { type: 'string' },

View file

@ -55,22 +55,22 @@ export const statisticsConfig = {
events: {},
styles: {
primaryLabelColour: {
type: 'color',
type: 'colorSwatches',
displayName: 'Primary label colour',
validation: { schema: { type: 'string' }, defaultValue: '#8092AB' },
},
primaryTextColour: {
type: 'color',
type: 'colorSwatches',
displayName: 'Primary text colour',
validation: { schema: { type: 'string' }, defaultValue: '#000000' },
},
secondaryLabelColour: {
type: 'color',
type: 'colorSwatches',
displayName: 'Secondary label colour',
validation: { schema: { type: 'string' }, defaultValue: '#8092AB' },
},
secondaryTextColour: {
type: 'color',
type: 'colorSwatches',
displayName: 'Secondary text colour',
validation: { schema: { type: 'string' }, defaultValue: '#36AF8B' },
},

View file

@ -45,15 +45,15 @@ export const stepsConfig = {
},
styles: {
color: {
type: 'color',
displayName: 'Color',
type: 'colorSwatches',
displayName: 'colorSwatches',
validation: {
schema: { type: 'string' },
defaultValue: '#000000',
defaultValue: 'var(--primary-brand)',
},
},
textColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text color',
validation: {
schema: { type: 'string' },
@ -101,7 +101,7 @@ export const stepsConfig = {
styles: {
visibility: { value: '{{true}}' },
theme: { value: 'titles' },
color: { value: '' },
color: { value: 'var(--primary-brand)' },
textColor: { value: '' },
},
},

View file

@ -157,7 +157,7 @@ export const tableConfig = {
defaultValue: 'clientSide',
},
actionButtonBackgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background color',
validation: {
schema: { type: 'string' },
@ -165,7 +165,7 @@ export const tableConfig = {
},
},
actionButtonTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text color',
validation: {
schema: { type: 'string' },
@ -293,7 +293,7 @@ export const tableConfig = {
},
styles: {
textColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text Color',
validation: {
schema: { type: 'string' },
@ -404,7 +404,7 @@ export const tableConfig = {
accordian: 'Container',
},
borderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border',
validation: {
schema: { type: 'string' },

View file

@ -109,11 +109,11 @@ export const tabsConfig = {
events: { onTabSwitch: { displayName: 'On tab switch' } },
styles: {
highlightColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Highlight color',
validation: {
schema: { type: 'string' },
defaultValue: '#375FCF',
defaultValue: 'var(--primary-brand)',
},
},
visibility: {
@ -174,7 +174,7 @@ export const tabsConfig = {
},
events: [],
styles: {
highlightColor: { value: '#375FCF' },
highlightColor: { value: 'var(--primary-brand)' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },
tabWidth: { value: 'auto' },

View file

@ -105,7 +105,7 @@ export const textConfig = {
accordian: 'Text',
},
textColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Color',
validation: {
schema: { type: 'string' },
@ -185,7 +185,7 @@ export const textConfig = {
},
backgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background',
validation: {
schema: { type: 'string' },
@ -195,7 +195,7 @@ export const textConfig = {
colorPickerPosition: 'top',
},
borderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border',
validation: {
schema: { type: 'string' },

View file

@ -80,7 +80,7 @@ export const textinputConfig = {
},
styles: {
color: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'label',
@ -132,13 +132,13 @@ export const textinputConfig = {
},
backgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background',
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
accordian: 'field',
},
borderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border',
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
accordian: 'field',
@ -146,17 +146,17 @@ export const textinputConfig = {
accentColor: {
type: 'colorSwatches',
displayName: 'Accent',
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' },
accordian: 'field',
},
textColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'field',
},
errTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Error text',
validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
accordian: 'field',
@ -169,7 +169,7 @@ export const textinputConfig = {
visibility: false,
},
iconColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Icon color',
validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
accordian: 'field',
@ -283,7 +283,7 @@ export const textinputConfig = {
styles: {
textColor: { value: '#1B1F24' },
borderColor: { value: '#CCD1D5' },
accentColor: { value: '#4368E3' },
accentColor: { value: 'var(--primary-brand)' },
errTextColor: { value: '#D72D39' },
borderRadius: { value: '{{6}}' },
backgroundColor: { value: '#fff' },

View file

@ -48,7 +48,7 @@ export const timelineConfig = {
properties: {
data: {
value:
"{{ [ \n\t\t{ title: 'Product Launched', subTitle: 'First version of our product released to public', date: '20/10/2021', iconBackgroundColor: '#4d72fa'},\n\t\t { title: 'First Signup', subTitle: 'Congratulations! We got our first signup', date: '22/10/2021', iconBackgroundColor: '#4d72fa'}, \n\t\t { title: 'First Payment', subTitle: 'Hurray! We got our first payment', date: '01/11/2021', iconBackgroundColor: '#4d72fa'} \n] }}",
"{{ [ \n\t\t{ title: 'Product Launched', subTitle: 'First version of our product released to public', date: '20/10/2021', iconBackgroundColor: 'var(--primary-brand)'},\n\t\t { title: 'First Signup', subTitle: 'Congratulations! We got our first signup', date: '22/10/2021', iconBackgroundColor: 'var(--primary-brand)'}, \n\t\t { title: 'First Payment', subTitle: 'Hurray! We got our first payment', date: '01/11/2021', iconBackgroundColor: 'var(--primary-brand)'} \n] }}",
},
hideDate: { value: '{{false}}' },
},

View file

@ -164,7 +164,7 @@ export const timePickerConfig = {
],
styles: {
labelColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Color',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'label',
@ -215,31 +215,31 @@ export const timePickerConfig = {
isFxNotRequired: true,
},
fieldBackgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background',
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
accordian: 'field',
},
fieldBorderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border',
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
accordian: 'field',
},
accentColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Accent',
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
accordian: 'field',
},
selectedTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'field',
},
errTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Error text',
validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
accordian: 'field',
@ -252,7 +252,7 @@ export const timePickerConfig = {
visibility: false,
},
iconColor: {
type: 'color',
type: 'colorSwatches',
displayName: '',
showLabel: false,
validation: {

View file

@ -32,14 +32,14 @@ export const toggleswitchConfig = {
},
styles: {
textColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text color',
validation: {
schema: { type: 'string' },
},
},
toggleSwitchColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Toggle switch color',
validation: {
schema: { type: 'string' },
@ -75,7 +75,7 @@ export const toggleswitchConfig = {
events: [],
styles: {
textColor: { value: '' },
toggleSwitchColor: { value: '' },
toggleSwitchColor: { value: 'var(--primary-brand)' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },
},

View file

@ -71,7 +71,7 @@ export const toggleSwitchV2Config = {
},
styles: {
textColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text Color',
validation: {
schema: { type: 'string' },
@ -79,7 +79,7 @@ export const toggleSwitchV2Config = {
accordian: 'label',
},
borderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border color',
validation: {
schema: { type: 'string' },
@ -87,7 +87,7 @@ export const toggleSwitchV2Config = {
accordian: 'switch',
},
toggleSwitchColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Checked color',
validation: {
schema: { type: 'string' },
@ -95,7 +95,7 @@ export const toggleSwitchV2Config = {
accordian: 'switch',
},
uncheckedColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Unchecked color',
validation: {
schema: { type: 'string' },
@ -103,7 +103,7 @@ export const toggleSwitchV2Config = {
accordian: 'switch',
},
handleColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Handle color',
validation: {
schema: { type: 'string' },
@ -181,7 +181,7 @@ export const toggleSwitchV2Config = {
events: [],
styles: {
textColor: { value: '#1B1F24' },
toggleSwitchColor: { value: '#4368E3' }, //keeping same key for backward comopatibility
toggleSwitchColor: { value: 'var(--primary-brand)' }, //keeping same key for backward comopatibility
uncheckedColor: { value: '#E4E7EB' },
borderColor: { value: '#E4E7EB' },
handleColor: { value: '#FFFFFF' },

View file

@ -23,8 +23,8 @@ export const treeSelectConfig = {
onUnCheck: { displayName: 'On uncheck' },
},
styles: {
textColor: { type: 'color', displayName: 'Text Color' },
checkboxColor: { type: 'color', displayName: 'Checkbox color' },
textColor: { type: 'colorSwatches', displayName: 'Text Color' },
checkboxColor: { type: 'colorSwatches', displayName: 'Checkbox color' },
visibility: { type: 'toggle', displayName: 'Visibility' },
disabledState: { type: 'toggle', displayName: 'Disable' },
},
@ -71,7 +71,7 @@ export const treeSelectConfig = {
events: [],
styles: {
textColor: { value: '' },
checkboxColor: { value: '' },
checkboxColor: { value: 'var(--primary-brand)' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },
},

View file

@ -15,7 +15,7 @@ export const verticalDividerConfig = {
events: {},
styles: {
dividerColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Divider color',
validation: {
schema: { type: 'string' },

View file

@ -178,6 +178,7 @@ export const Modal = function Modal({
display: visibility ? '' : 'none',
'--tblr-btn-color-darker': tinycolor(triggerButtonBackgroundColor).darken(8).toString(),
boxShadow,
borderColor: 'var(--primary-brand)',
},
};

View file

@ -236,7 +236,7 @@ export const DropDown = function DropDown({
minWidth: 'max-content',
}
: {
backgroundColor: state.value === currentValue ? '#7A95FB' : 'white',
backgroundColor: state.value === currentValue ? 'var(--primary-brand)' : 'white',
color: state.isDisabled ? '#88909694' : state.value === currentValue ? 'white' : 'black',
':hover': {
backgroundColor: state.isDisabled ? 'transparent' : state.value === currentValue ? '#3650AF' : '#d8dce9',

View file

@ -1,4 +1,5 @@
import React, { useEffect, useMemo, useRef } from 'react';
// eslint-disable-next-line import/no-unresolved
import { useDropzone } from 'react-dropzone';
import { toast } from 'react-hot-toast';
// eslint-disable-next-line import/no-unresolved
@ -311,7 +312,11 @@ export const FilePicker = ({
<section>
<div className="container" {...getRootProps({ style, className: 'dropzone' })} data-cy={dataCy}>
<input {...getInputProps()} />
<FilePicker.Signifiers signifier={accepted} feedback={null} cls="spinner-border text-azure p-0" />
<FilePicker.Signifiers
signifier={accepted}
feedback={null}
cls="spinner-border text-azure p-0 spinner-border-filepicker"
/>
{showSelectedFiles && !accepted ? (
<FilePicker.AcceptedFiles width={width - 10} height={height}>

View file

@ -8,7 +8,7 @@ import { highlightText } from '../DropdownV2/utils';
const CustomOption = (props) => {
return (
<Option {...props}>
<div className="d-flex">
<div className="d-flex multiselct-widget-option">
<FormCheck checked={props.isSelected} disabled={props?.isDisabled} />
<span style={{ marginLeft: '5px' }}>
{highlightText(props.label?.toString(), props.selectProps.inputValue)}

View file

@ -46,7 +46,7 @@ export const TextArea = function TextArea({
setExposedVariable('value', e.target.value);
}}
type="text"
className="form-control textarea"
className="form-control textarea textarea-widget"
placeholder={properties.placeholder}
style={{
height,

View file

@ -164,19 +164,25 @@ export const Timer = function Timer({ height, properties = {}, styles, setExpose
<div className="btn-list justify-content-end">
{state === 'initial' && (
<a
className={`btn btn-primary${styles.disabledState || isStartDisabled() ? ' disabled' : ''}`}
className={`btn btn-primary timer-btn${styles.disabledState || isStartDisabled() ? ' disabled' : ''}`}
onClick={() => onStart()}
>
Start
</a>
)}
{state === 'running' && (
<a className={`btn btn-outline-primary${styles.disabledState ? ' disabled' : ''}`} onClick={onPause}>
<a
className={`btn btn-outline-primary timer-btn-hover ${styles.disabledState ? ' disabled' : ''}`}
onClick={onPause}
>
Pause
</a>
)}
{state === 'paused' && (
<a className={`btn btn-outline-primary${styles.disabledState ? ' disabled' : ''}`} onClick={onResume}>
<a
className={`btn btn-outline-primary timer-btn-hover ${styles.disabledState ? ' disabled' : ''}`}
onClick={onResume}
>
Resume
</a>
)}

View file

@ -1,351 +0,0 @@
export const timePickerConfig = {
name: 'TimePicker',
displayName: 'Time Picker',
description: 'Choose date and time',
component: 'TimePicker',
defaultSize: {
width: 10,
height: 40,
},
validation: {
minTime: {
type: 'timepicker',
placeholder: 'HH:mm',
displayName: 'Min Time',
},
maxTime: {
type: 'timepicker',
placeholder: 'HH:mm',
displayName: 'Max Time',
},
customRule: {
type: 'code',
displayName: 'Custom validation',
},
mandatory: {
type: 'toggle',
displayName: 'Make this field mandatory',
},
},
others: {
showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
},
properties: {
label: {
type: 'code',
displayName: 'Label',
validation: {
schema: { type: 'string' },
defaultValue: 'Label',
},
accordian: 'Data',
},
defaultValue: {
type: 'code',
displayName: 'Default value',
validation: {
schema: { type: 'string' },
defaultValue: '00:00',
},
},
isTimezoneEnabled: {
type: 'toggle',
displayName: 'Manage time zones',
validation: { schema: { type: 'boolean' }, defaultValue: false },
section: 'formatting',
},
loadingState: {
type: 'toggle',
displayName: 'Loading state',
validation: { schema: { type: 'boolean' }, defaultValue: true },
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: true },
section: 'additionalActions',
},
tooltip: {
type: 'code',
displayName: 'Tooltip',
validation: {
schema: { type: 'string' },
defaultValue: 'Enter tooltip text',
},
section: 'additionalActions',
placeholder: 'Enter tooltip text',
},
},
events: {
onSelect: { displayName: 'On select' },
onFocus: { displayName: 'On focus' },
onBlur: { displayName: 'On blur' },
},
actions: [
{
handle: 'setValue',
displayName: 'Set value',
params: [
{ handle: 'value', displayName: 'Value' },
{ handle: 'format', displayName: 'Format' },
],
},
{
handle: 'clearValue',
displayName: 'Clear value',
},
{
handle: 'setTime',
displayName: 'Set time',
params: [
{ handle: 'value', displayName: 'Value' },
{ handle: 'format', displayName: 'Format' },
],
},
{
handle: 'setValueInTimestamp',
displayName: 'Set value in timestamp',
params: [{ handle: 'value', displayName: 'Value' }],
},
{
handle: 'setMinTime',
displayName: 'Set min time',
params: [{ handle: 'value', displayName: 'Value' }],
},
{
handle: 'setMaxTime',
displayName: 'Set max time',
params: [{ handle: 'value', displayName: 'Value' }],
},
{
handle: 'setDisplayTimezone',
displayName: 'Set display timezone',
params: [{ handle: 'value', displayName: 'Value' }],
},
{
handle: 'setStoreTimezone',
displayName: 'Set store timezone',
params: [{ handle: 'value', displayName: 'Value' }],
},
{
handle: 'setVisibility',
displayName: 'Set visibility',
params: [{ handle: 'value', displayName: 'Value', defaultValue: `{{true}}`, type: 'toggle' }],
},
{
handle: 'setLoading',
displayName: 'Set loading',
params: [{ handle: 'value', displayName: 'Value', defaultValue: `{{false}}`, type: 'toggle' }],
},
{
handle: 'setDisable',
displayName: 'Set disable',
params: [{ handle: 'value', displayName: 'Value', defaultValue: `{{false}}`, type: 'toggle' }],
},
{
handle: 'setFocus',
displayName: 'Set focus',
},
{
handle: 'setBlur',
displayName: 'Set blur',
},
],
styles: {
labelColor: {
type: 'color',
displayName: 'Color',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'label',
},
alignment: {
type: 'switch',
displayName: 'Alignment',
validation: { schema: { type: 'string' }, defaultValue: 'top' },
options: [
{ displayName: 'Side', value: 'side' },
{ displayName: 'Top', value: 'top' },
],
accordian: 'label',
},
direction: {
type: 'switch',
displayName: 'Direction',
validation: { schema: { type: 'string' }, defaultValue: 'left' },
showLabel: false,
isIcon: true,
options: [
{ displayName: 'alignleftinspector', value: 'left', iconName: 'alignleftinspector' },
{ displayName: 'alignrightinspector', value: 'right', iconName: 'alignrightinspector' },
],
accordian: 'label',
isFxNotRequired: true,
},
labelWidth: {
type: 'slider',
displayName: 'Width',
accordian: 'label',
conditionallyRender: {
key: 'alignment',
value: 'side',
},
isFxNotRequired: true,
},
auto: {
type: 'checkbox',
displayName: 'auto',
showLabel: false,
validation: { schema: { type: 'boolean' } },
accordian: 'label',
conditionallyRender: {
key: 'alignment',
value: 'side',
},
isFxNotRequired: true,
},
fieldBackgroundColor: {
type: 'color',
displayName: 'Background',
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
accordian: 'field',
},
fieldBorderColor: {
type: 'color',
displayName: 'Border',
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
accordian: 'field',
},
accentColor: {
type: 'color',
displayName: 'Accent',
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
accordian: 'field',
},
selectedTextColor: {
type: 'color',
displayName: 'Text',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'field',
},
errTextColor: {
type: 'color',
displayName: 'Error text',
validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
accordian: 'field',
},
icon: {
type: 'icon',
displayName: 'Icon',
validation: { schema: { type: 'string' }, defaultValue: 'IconHome2' },
accordian: 'field',
visibility: false,
},
iconColor: {
type: 'color',
displayName: '',
showLabel: false,
validation: {
schema: { type: 'string' },
defaultValue: '#6A727C',
},
accordian: 'field',
},
iconDirection: {
type: 'switch',
displayName: '',
validation: { schema: { type: 'string' } },
showLabel: false,
isIcon: true,
options: [
{ displayName: 'alignleftinspector', value: 'left', iconName: 'alignleftinspector' },
{ displayName: 'alignrightinspector', value: 'right', iconName: 'alignrightinspector' },
],
accordian: 'field',
},
fieldBorderRadius: {
type: 'input',
displayName: 'Border radius',
validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 6 },
accordian: 'field',
},
boxShadow: {
type: 'boxShadow',
displayName: 'Box shadow',
validation: {
schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
defaultValue: '0px 0px 0px 0px #121212',
},
accordian: 'field',
},
padding: {
type: 'switch',
displayName: 'Padding',
validation: {
schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
defaultValue: 'default',
},
options: [
{ displayName: 'Default', value: 'default' },
{ displayName: 'None', value: 'none' },
],
accordian: 'container',
},
},
exposedVariables: {
value: '',
},
definition: {
others: {
showOnDesktop: { value: '{{true}}' },
showOnMobile: { value: '{{false}}' },
},
validation: {
minTime: { value: '' },
maxTime: { value: '' },
customRule: { value: '' },
mandatory: { value: '{{false}}' },
},
properties: {
label: { value: 'Label' },
defaultValue: { value: '00:00' },
timeFormat: { value: 'HH:mm' },
isTimezoneEnabled: { value: '{{false}}' },
displayTimezone: { value: 'UTC' },
storeTimezone: { value: 'UTC' },
loadingState: { value: '{{false}}' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },
tooltip: { value: '' },
},
events: [],
styles: {
labelColor: { value: '#1B1F24' },
alignment: { value: 'side' },
direction: { value: 'left' },
labelWidth: { value: '20' },
auto: { value: '{{true}}' },
fieldBackgroundColor: { value: '#fff' },
fieldBorderColor: { value: '#CCD1D5' },
accentColor: { value: '#4368E3' },
selectedTextColor: { value: '#1B1F24' },
errTextColor: { value: '#E54D2E' },
icon: { value: 'IconClock' },
iconVisibility: { value: true },
iconDirection: { value: 'left' },
fieldBorderRadius: { value: '{{6}}' },
boxShadow: { value: '0px 0px 0px 0px #121212' },
padding: { value: 'default' },
iconColor: { value: '#6A727C' },
},
},
};

View file

@ -61,7 +61,7 @@ export const buttonConfig = {
accordian: 'button',
},
backgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background',
validation: {
schema: { type: 'string' },
@ -74,7 +74,7 @@ export const buttonConfig = {
accordian: 'button',
},
textColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text color',
validation: {
schema: { type: 'string' },
@ -83,7 +83,7 @@ export const buttonConfig = {
accordian: 'button',
},
borderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border color',
validation: {
schema: { type: 'string' },
@ -92,7 +92,7 @@ export const buttonConfig = {
accordian: 'button',
},
loaderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Loader color',
validation: {
schema: { type: 'string' },
@ -110,7 +110,7 @@ export const buttonConfig = {
visibility: false,
},
iconColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Icon color',
validation: { schema: { type: 'string' } },
accordian: 'button',
@ -132,10 +132,7 @@ export const buttonConfig = {
borderRadius: {
type: 'numberInput',
displayName: 'Border radius',
validation: {
validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } },
defaultValue: false,
},
validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: false },
accordian: 'button',
},
boxShadow: {
@ -222,10 +219,10 @@ export const buttonConfig = {
events: [],
styles: {
textColor: { value: '#FFFFFF' },
borderColor: { value: '#4368E3' },
borderColor: { value: 'var(--primary-brand)' },
loaderColor: { value: '#FFFFFF' },
borderRadius: { value: '{{6}}' },
backgroundColor: { value: '#4368E3' },
backgroundColor: { value: 'var(--primary-brand)' },
iconColor: { value: '#FFFFFF' },
direction: { value: 'left' },
padding: { value: 'default' },

View file

@ -68,7 +68,7 @@ export const buttonGroupConfig = {
},
styles: {
backgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background color',
validation: {
schema: { type: 'string' },
@ -76,7 +76,7 @@ export const buttonGroupConfig = {
},
},
textColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text color',
validation: {
schema: { type: 'string' },
@ -108,7 +108,7 @@ export const buttonGroupConfig = {
},
},
selectedTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Selected text colour',
validation: {
schema: { type: 'string' },
@ -116,11 +116,11 @@ export const buttonGroupConfig = {
},
},
selectedBackgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Selected background color',
validation: {
schema: { type: 'string' },
defaultValue: '#007bff',
defaultValue: 'var(--primary-brand)',
},
},
},
@ -147,7 +147,7 @@ export const buttonGroupConfig = {
borderRadius: { value: '{{4}}' },
disabledState: { value: '{{false}}' },
selectedTextColor: { value: '#FFFFFF' },
selectedBackgroundColor: { value: '#4368E3' },
selectedBackgroundColor: { value: 'var(--primary-brand)' },
},
},
};

View file

@ -39,13 +39,13 @@ export const chartConfig = {
},
},
markerColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Marker color',
validation: {
schema: {
type: 'string',
},
defaultValue: '#CDE1F8',
defaultValue: 'var(--primary-brand)',
},
},
showAxes: {
@ -134,7 +134,7 @@ export const chartConfig = {
},
styles: {
backgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background color',
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
},
@ -192,7 +192,7 @@ export const chartConfig = {
},
properties: {
title: { value: 'This title can be changed' },
markerColor: { value: '#CDE1F8' },
markerColor: { value: 'var(--primary-brand)' },
showAxes: { value: '{{true}}' },
showGridLines: { value: '{{true}}' },
plotFromJson: { value: '{{false}}' },

View file

@ -70,7 +70,7 @@ export const checkboxConfig = {
},
styles: {
textColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text color',
validation: {
schema: { type: 'string' },
@ -78,7 +78,7 @@ export const checkboxConfig = {
accordian: 'label',
},
borderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border color',
validation: {
schema: { type: 'string' },
@ -86,7 +86,7 @@ export const checkboxConfig = {
accordian: 'switch',
},
checkboxColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Checked color',
validation: {
schema: { type: 'string' },
@ -94,7 +94,7 @@ export const checkboxConfig = {
accordian: 'switch',
},
uncheckedColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Unchecked color',
validation: {
schema: { type: 'string' },
@ -102,7 +102,7 @@ export const checkboxConfig = {
accordian: 'switch',
},
handleColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Handle color',
validation: {
schema: { type: 'string' },
@ -183,7 +183,7 @@ export const checkboxConfig = {
styles: {
disabledState: { value: '{{false}}' },
textColor: { value: '#1B1F24' },
checkboxColor: { value: '#4368E3' },
checkboxColor: { value: 'var(--primary-brand)' },
uncheckedColor: { value: '#E4E7EB' },
borderColor: { value: '#CCD1D5' },
handleColor: { value: '#FFFFFF' },

View file

@ -32,15 +32,15 @@ export const circularProgressbarConfig = {
events: {},
styles: {
color: {
type: 'color',
displayName: 'Color',
type: 'colorSwatches',
displayName: 'colorSwatches',
validation: {
schema: { type: 'string' },
defaultValue: '#375FCF',
defaultValue: 'var(--primary-brand)',
},
},
textColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text Color',
validation: {
schema: { type: 'string' },
@ -104,7 +104,7 @@ export const circularProgressbarConfig = {
},
events: [],
styles: {
color: { value: '' },
color: { value: 'var(--primary-brand)' },
textColor: { value: '' },
textSize: { value: '{{16}}' },
strokeWidth: { value: '{{8}}' },

View file

@ -4,7 +4,7 @@ export const colorPickerConfig = {
description: 'Choose colors from a palette',
component: 'ColorPicker',
properties: {
defaultColor: { type: 'color', displayName: 'Default color' },
defaultColor: { type: 'colorSwatches', displayName: 'Default color' },
},
defaultSize: {
width: 9,
@ -14,7 +14,9 @@ export const colorPickerConfig = {
{
displayName: 'Set Color',
handle: 'setColor',
params: [{ handle: 'color', displayName: 'color', defaultValue: '#ffffff', type: 'color' }],
params: [
{ handle: 'colorSwatches', displayName: 'colorSwatches', defaultValue: '#ffffff', type: 'colorSwatches' },
],
},
],
others: {

View file

@ -71,7 +71,7 @@ export const containerConfig = {
events: {},
styles: {
backgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background',
validation: {
schema: { type: 'string' },
@ -80,7 +80,7 @@ export const containerConfig = {
accordian: 'container',
},
headerBackgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background',
validation: {
schema: { type: 'string' },
@ -89,7 +89,7 @@ export const containerConfig = {
accordian: 'header',
},
borderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border color',
validation: {
schema: { type: 'string' },
@ -153,7 +153,7 @@ export const containerConfig = {
showOnMobile: { value: '{{false}}' },
},
properties: {
showHeader: {value: `{{true}}`},
showHeader: { value: `{{true}}` },
loadingState: { value: `{{false}}` },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },

View file

@ -169,8 +169,8 @@ export const datePickerV2Config = {
],
styles: {
labelColor: {
type: 'color',
displayName: 'Color',
type: 'colorSwatches',
displayName: 'colorSwatches',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'label',
},
@ -220,31 +220,31 @@ export const datePickerV2Config = {
isFxNotRequired: true,
},
fieldBackgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background',
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
accordian: 'field',
},
fieldBorderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border',
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
accordian: 'field',
},
accentColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Accent',
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
accordian: 'field',
},
selectedTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'field',
},
errTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Error text',
validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
accordian: 'field',
@ -257,7 +257,7 @@ export const datePickerV2Config = {
visibility: false,
},
iconColor: {
type: 'color',
type: 'colorSwatches',
displayName: '',
showLabel: false,
validation: {

View file

@ -199,8 +199,8 @@ export const daterangepickerConfig = {
],
styles: {
labelColor: {
type: 'color',
displayName: 'Color',
type: 'colorSwatches',
displayName: 'colorSwatches',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'label',
},
@ -250,31 +250,31 @@ export const daterangepickerConfig = {
isFxNotRequired: true,
},
fieldBackgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background',
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
accordian: 'field',
},
fieldBorderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border',
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
accordian: 'field',
},
accentColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Accent',
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
accordian: 'field',
},
selectedTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'field',
},
errTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Error text',
validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
accordian: 'field',
@ -287,7 +287,7 @@ export const daterangepickerConfig = {
visibility: false,
},
iconColor: {
type: 'color',
type: 'colorSwatches',
displayName: '',
showLabel: false,
validation: {

View file

@ -214,8 +214,8 @@ export const datetimePickerV2Config = {
],
styles: {
labelColor: {
type: 'color',
displayName: 'Color',
type: 'colorSwatches',
displayName: 'colorSwatches',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'label',
},
@ -265,31 +265,31 @@ export const datetimePickerV2Config = {
isFxNotRequired: true,
},
fieldBackgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background',
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
accordian: 'field',
},
fieldBorderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border',
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
accordian: 'field',
},
accentColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Accent',
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
accordian: 'field',
},
selectedTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'field',
},
errTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Error text',
validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
accordian: 'field',
@ -302,7 +302,7 @@ export const datetimePickerV2Config = {
visibility: false,
},
iconColor: {
type: 'color',
type: 'colorSwatches',
displayName: '',
showLabel: false,
validation: {

View file

@ -15,7 +15,7 @@ export const dividerConfig = {
events: {},
styles: {
dividerColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Divider color',
validation: {
schema: { type: 'string' },

View file

@ -128,7 +128,7 @@ export const dropdownConfig = {
defaultValue: true,
},
selectedTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Selected text color',
validation: {
schema: {

View file

@ -101,7 +101,7 @@ export const dropdownV2Config = {
},
styles: {
labelColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Color',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'label',
@ -153,31 +153,31 @@ export const dropdownV2Config = {
},
fieldBackgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background',
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
accordian: 'field',
},
fieldBorderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border',
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
accordian: 'field',
},
accentColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Accent',
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
accordian: 'field',
},
selectedTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'field',
},
errTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Error text',
validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
accordian: 'field',
@ -190,7 +190,7 @@ export const dropdownV2Config = {
visibility: false,
},
iconColor: {
type: 'color',
type: 'colorSwatches',
displayName: '',
showLabel: false,
validation: {

View file

@ -249,7 +249,7 @@ export const formConfig = {
},
styles: {
backgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background color',
validation: {
schema: { type: 'string' },
@ -267,7 +267,7 @@ export const formConfig = {
},
},
borderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border color',
validation: {
schema: { type: 'string' },
@ -317,6 +317,7 @@ export const formConfig = {
value:
"{{ {title: 'User registration form', properties: {firstname: {type: 'textinput',value: 'Maria',label:'First name', validation:{maxLength:6}, styles: {backgroundColor: '#f6f5ff',textColor: 'black'},},lastname:{type: 'textinput',value: 'Doe', label:'Last name', styles: {backgroundColor: '#f6f5ff',textColor: 'black'},},age:{type:'number', label:'Age'},}, submitButton: {value: 'Submit', styles: {backgroundColor: '#3a433b',borderColor:'#595959'}}} }}",
},
buttonToSubmit: { value: '{{"none"}}' },
},
events: [],
styles: {

View file

@ -61,7 +61,7 @@ export const iconConfig = {
},
styles: {
iconColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Color',
validation: {
schema: { type: 'string' },

View file

@ -144,7 +144,7 @@ export const imageConfig = {
accordian: 'Image',
},
backgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background',
validation: {
schema: { type: 'string' },
@ -153,7 +153,7 @@ export const imageConfig = {
accordian: 'Container',
},
borderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border',
validation: {
schema: { type: 'string' },

View file

@ -58,7 +58,7 @@ import { datetimePickerV2Config } from './datetimepickerV2';
import { datePickerV2Config } from './datepickerV2';
import { timePickerConfig } from './timepicker';
const widgets = {
export {
buttonConfig,
tableConfig,
chartConfig,
@ -119,48 +119,3 @@ const widgets = {
iconConfig,
boundedBoxConfig,
};
const universalProps = {
properties: {},
general: {
tooltip: { type: 'code', displayName: 'Tooltip', validation: { schema: { type: 'string' } } },
},
others: {},
events: {},
styles: {},
validate: true,
generalStyles: {
boxShadow: { type: 'boxShadow', displayName: 'Box Shadow' },
},
definition: {
others: {},
events: [],
styles: {},
generalStyles: {
boxShadow: { value: '0px 0px 0px 0px #00000040' },
},
},
};
const combineProperties = (widget, universal, isArray = false) => {
return {
...universal,
...widget,
properties: { ...universal.properties, ...widget.properties },
general: { ...universal.general, ...widget.general },
others: { ...universal.others, ...widget.others },
events: isArray ? [...universal.events, ...widget.events] : { ...universal.events, ...widget.events },
styles: { ...universal.styles, ...widget.styles },
generalStyles: { ...universal.generalStyles, ...widget.generalStyles },
exposedVariables: { ...universal.exposedVariables, ...widget.exposedVariables },
};
};
export const componentTypes = Object.values(widgets).map((widget) => {
return {
...combineProperties(widget, universalProps),
definition: combineProperties(widget.definition, universalProps.definition, true),
};
});
export default widgets;

View file

@ -77,7 +77,7 @@ export const kanbanConfig = {
styles: {
disabledState: { type: 'toggle', displayName: 'Disable' },
visibility: { type: 'toggle', displayName: 'Visibility' },
accentColor: { type: 'color', displayName: 'Accent color' },
accentColor: { type: 'colorSwatches', displayName: 'Accent color' },
},
actions: [
{
@ -157,7 +157,7 @@ export const kanbanConfig = {
styles: {
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },
accentColor: { value: '#4d72fa' },
accentColor: { value: 'var(--primary-brand)' },
},
},
};

View file

@ -30,7 +30,7 @@ export const kanbanBoardConfig = {
visibility: { type: 'toggle', displayName: 'Visibility' },
width: { type: 'number', displayName: 'Width' },
minWidth: { type: 'number', displayName: 'Min Width' },
accentColor: { type: 'color', displayName: 'Accent color' },
accentColor: { type: 'colorSwatches', displayName: 'Accent color' },
},
exposedVariables: {
columns: {},

View file

@ -46,7 +46,7 @@ export const linkConfig = {
},
styles: {
textColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text color',
validation: {
schema: { type: 'string' },

View file

@ -120,7 +120,7 @@ export const listviewConfig = {
},
styles: {
backgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background color',
validation: {
schema: { type: 'string' },
@ -128,7 +128,7 @@ export const listviewConfig = {
},
},
borderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border color',
validation: {
schema: { type: 'string' },

View file

@ -20,19 +20,6 @@ export const modalConfig = {
defaultValue: 'This title can be changed',
},
},
titleAlignment: {
type: 'select',
displayName: 'Title alignment',
options: [
{ name: 'left', value: 'left' },
{ name: 'center', value: 'center' },
{ name: 'right', value: 'right' },
],
validation: {
schema: { type: 'string' },
defaultValue: 'left',
},
},
loadingState: {
type: 'toggle',
displayName: 'Loading state',
@ -94,7 +81,7 @@ export const modalConfig = {
},
styles: {
headerBackgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Header background color',
validation: {
schema: { type: 'string' },
@ -102,7 +89,7 @@ export const modalConfig = {
},
},
headerTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Header title color',
validation: {
schema: { type: 'string' },
@ -110,7 +97,7 @@ export const modalConfig = {
},
},
bodyBackgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Body background color',
validation: {
schema: { type: 'string' },
@ -134,7 +121,7 @@ export const modalConfig = {
},
},
triggerButtonBackgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Trigger button background color',
validation: {
schema: { type: 'string' },
@ -142,7 +129,7 @@ export const modalConfig = {
},
},
triggerButtonTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Trigger button text color',
validation: {
schema: { type: 'string' },
@ -188,7 +175,7 @@ export const modalConfig = {
bodyBackgroundColor: { value: '#ffffffff' },
disabledState: { value: '{{false}}' },
visibility: { value: '{{true}}' },
triggerButtonBackgroundColor: { value: '#4D72FA' },
triggerButtonBackgroundColor: { value: 'var(--primary-brand)' },
triggerButtonTextColor: { value: '#ffffffff' },
},
},

View file

@ -165,7 +165,7 @@ export const multiselectV2Config = {
styles: {
labelColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Color',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'label',
@ -218,32 +218,32 @@ export const multiselectV2Config = {
},
fieldBackgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background',
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
accordian: 'field',
},
fieldBorderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border',
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
accordian: 'field',
},
accentColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Accent',
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
accordian: 'field',
},
selectedTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'field',
},
errTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Error Text',
validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
accordian: 'field',
@ -256,7 +256,7 @@ export const multiselectV2Config = {
visibility: false,
},
iconColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Icon color',
validation: {
schema: { type: 'string' },
@ -365,7 +365,7 @@ export const multiselectV2Config = {
icon: { value: 'IconHome2' },
iconVisibility: { value: false },
iconColor: { value: '#6A727C' },
accentColor: { value: '#4368E3' },
accentColor: { value: 'var(--primary-brand)' },
},
},
};

View file

@ -20,10 +20,7 @@ export const numberinputConfig = {
value: {
type: 'code',
displayName: 'Default value',
validation: {
schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
defaultValue: 0,
},
validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 0 },
},
placeholder: {
type: 'code',
@ -75,7 +72,7 @@ export const numberinputConfig = {
},
styles: {
color: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'label',
@ -127,31 +124,31 @@ export const numberinputConfig = {
},
backgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background',
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
accordian: 'field',
},
borderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border',
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
accordian: 'field',
},
accentColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Accent',
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' },
accordian: 'field',
},
textColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'field',
},
errTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Error text',
validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
accordian: 'field',
@ -164,7 +161,7 @@ export const numberinputConfig = {
visibility: false,
},
iconColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Icon color',
validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
accordian: 'field',
@ -282,7 +279,7 @@ export const numberinputConfig = {
borderRadius: { value: '{{6}}' },
backgroundColor: { value: '#fff' },
borderColor: { value: '#CCD1D5' },
accentColor: { value: '#4368E3' },
accentColor: { value: 'var(--primary-brand)' },
errTextColor: { value: '#D72D39' },
textColor: { value: '#1B1F24' },
color: { value: '#1B1F24' },

View file

@ -84,7 +84,7 @@ export const passinputConfig = {
},
styles: {
color: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'label',
@ -136,31 +136,31 @@ export const passinputConfig = {
},
backgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background',
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
accordian: 'field',
},
accentColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Accent',
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' },
accordian: 'field',
},
borderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border',
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
accordian: 'field',
},
textColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'field',
},
errTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Error text',
validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
accordian: 'field',
@ -173,7 +173,7 @@ export const passinputConfig = {
visibility: false,
},
iconColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Icon color',
validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
accordian: 'field',
@ -278,7 +278,7 @@ export const passinputConfig = {
borderRadius: { value: '{{6}}' },
backgroundColor: { value: '#fff' },
borderColor: { value: '#CCD1D5' },
accentColor: { value: '#4368E3' },
accentColor: { value: 'var(--primary-brand)' },
errTextColor: { value: '#D72D39' },
textColor: { value: '#1B1F24' },
iconColor: { value: '#CFD3D859' },

View file

@ -89,7 +89,7 @@ export const radiobuttonV2Config = {
},
styles: {
labelColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Color',
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
accordian: 'label',
@ -139,7 +139,7 @@ export const radiobuttonV2Config = {
isFxNotRequired: true,
},
borderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border',
validation: {
schema: { type: 'string' },
@ -147,7 +147,7 @@ export const radiobuttonV2Config = {
accordian: 'switch',
},
switchOnBackgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Checked background',
validation: {
schema: { type: 'string' },
@ -158,7 +158,7 @@ export const radiobuttonV2Config = {
tooltipPlacement: 'bottom',
},
switchOffBackgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Unchecked background',
validation: {
schema: { type: 'string' },
@ -169,7 +169,7 @@ export const radiobuttonV2Config = {
tooltipPlacement: 'bottom',
},
handleColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Handle color',
validation: {
schema: { type: 'string' },
@ -177,7 +177,7 @@ export const radiobuttonV2Config = {
accordian: 'switch',
},
optionsTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text',
validation: {
schema: { type: 'string' },

View file

@ -1,6 +1,6 @@
export const radiobuttonConfig = {
name: 'RadioButton',
displayName: 'Radio Button',
name: 'RadioButtonLegacy',
displayName: 'Radio Button (Legacy)',
description: 'Select one from multiple choices',
component: 'RadioButton',
defaultSize: {
@ -53,7 +53,7 @@ export const radiobuttonConfig = {
},
styles: {
textColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text color',
validation: {
schema: { type: 'string' },
@ -61,11 +61,11 @@ export const radiobuttonConfig = {
},
},
activeColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Active color',
validation: {
schema: { type: 'string' },
defaultValue: '#000000',
defaultValue: 'var(--primary-brand)',
},
},
visibility: {
@ -97,9 +97,7 @@ export const radiobuttonConfig = {
],
},
],
exposedVariables: {
value: true,
},
exposedVariables: {},
definition: {
others: {
showOnDesktop: { value: '{{true}}' },
@ -115,7 +113,7 @@ export const radiobuttonConfig = {
events: [],
styles: {
textColor: { value: '' },
activeColor: { value: '' },
activeColor: { value: 'var(--primary-brand)' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },
},

View file

@ -53,7 +53,7 @@ export const rangeSliderConfig = {
},
styles: {
lineColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Line color',
validation: {
schema: { type: 'string' },
@ -61,7 +61,7 @@ export const rangeSliderConfig = {
},
},
handleColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Handle color',
validation: {
schema: { type: 'string' },
@ -69,7 +69,7 @@ export const rangeSliderConfig = {
},
},
trackColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Track color',
validation: {
schema: { type: 'string' },
@ -109,7 +109,7 @@ export const rangeSliderConfig = {
styles: {
lineColor: { value: '' },
handleColor: { value: '' },
trackColor: { value: '' },
trackColor: { value: 'var(--primary-brand)' },
visibility: { value: '{{true}}' },
},
},

View file

@ -23,11 +23,11 @@ export const spinnerConfig = {
},
},
colour: {
type: 'color',
type: 'colorSwatches',
displayName: 'Colour',
validation: {
schema: { type: 'string' },
defaultValue: '#0565ff',
defaultValue: 'var(--primary-brand)',
},
},
size: {
@ -54,7 +54,7 @@ export const spinnerConfig = {
styles: {
visibility: { value: '{{true}}' },
size: { value: 'sm' },
colour: { value: '#0565ff' },
colour: { value: 'var(--primary-brand)' },
},
},
};

View file

@ -58,7 +58,7 @@ export const starratingConfig = {
},
styles: {
textColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Star color',
validation: {
schema: { type: 'string' },
@ -66,7 +66,7 @@ export const starratingConfig = {
},
},
labelColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Label color',
validation: {
schema: { type: 'string' },

View file

@ -55,22 +55,22 @@ export const statisticsConfig = {
events: {},
styles: {
primaryLabelColour: {
type: 'color',
type: 'colorSwatches',
displayName: 'Primary label colour',
validation: { schema: { type: 'string' }, defaultValue: '#8092AB' },
},
primaryTextColour: {
type: 'color',
type: 'colorSwatches',
displayName: 'Primary text colour',
validation: { schema: { type: 'string' }, defaultValue: '#000000' },
},
secondaryLabelColour: {
type: 'color',
type: 'colorSwatches',
displayName: 'Secondary label colour',
validation: { schema: { type: 'string' }, defaultValue: '#8092AB' },
},
secondaryTextColour: {
type: 'color',
type: 'colorSwatches',
displayName: 'Secondary text colour',
validation: { schema: { type: 'string' }, defaultValue: '#36AF8B' },
},

View file

@ -45,15 +45,15 @@ export const stepsConfig = {
},
styles: {
color: {
type: 'color',
type: 'colorSwatches',
displayName: 'Color',
validation: {
schema: { type: 'string' },
defaultValue: '#000000',
defaultValue: 'var(--primary-brand)',
},
},
textColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text color',
validation: {
schema: { type: 'string' },
@ -101,7 +101,7 @@ export const stepsConfig = {
styles: {
visibility: { value: '{{true}}' },
theme: { value: 'titles' },
color: { value: '' },
color: { value: 'var(--primary-brand)' },
textColor: { value: '' },
},
},

View file

@ -157,7 +157,7 @@ export const tableConfig = {
defaultValue: 'clientSide',
},
actionButtonBackgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background color',
validation: {
schema: { type: 'string' },
@ -165,7 +165,7 @@ export const tableConfig = {
},
},
actionButtonTextColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text color',
validation: {
schema: { type: 'string' },
@ -293,7 +293,7 @@ export const tableConfig = {
},
styles: {
textColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Text Color',
validation: {
schema: { type: 'string' },
@ -373,7 +373,6 @@ export const tableConfig = {
},
maxRowHeightValue: {
type: 'tableRowHeightInput',
isFxNotRequired: true,
showLabel: false,
validation: {
schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
@ -405,7 +404,7 @@ export const tableConfig = {
accordian: 'Container',
},
borderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border',
validation: {
schema: { type: 'string' },
@ -517,7 +516,7 @@ export const tableConfig = {
loadingState: { value: '{{false}}' },
data: {
value:
"{{ [ \n\t\t{ id: 1, name: 'Olivia Nguyen', email: 'olivia.nguyen@example.com', date: '15/05/2022', phone: 9876543210, interest: ['Reading', 'Traveling','Photography'], photo: 'https://reqres.in/img/faces/7-image.jpg' }, \n\t\t{ id: 2, name: 'Liam Patel', email: 'liam.patel@example.com', date: '20/09/2021', phone: 8765432109, interest: ['Cooking','Gardening','Hiking'], photo: 'https://reqres.in/img/faces/5-image.jpg' }, \n\t\t{ id: 3, name: 'Sophia Reyes', email: 'sophia.reyes@example.com', date: '01/01/2023', phone: 7654321098, interest: ['Music','Dancing','Crafting'], photo: 'https://reqres.in/img/faces/3-image.jpg' }, \n\t\t{ id: 4, name: 'Jacob Hernandez', email: 'jacob.hernandez@example.com', date: '10/11/2022', phone: 6543210987, interest: ['Reading', 'Traveling', 'Volunteering'], photo: 'https://reqres.in/img/faces/1-image.jpg' }, \n\t\t{ id: 5, name: 'William Sanchez', email: 'william.sanchez@example.com', date: '07/01/2021', phone: 4321098765, interest: ['Music', 'Dancing', 'Hiking'], photo: 'https://reqres.in/img/faces/4-image.jpg' }, \n\t\t{ id: 6, name: 'Ethan Morales', email: 'ethan.morales@example.com', date: '05/11/2021', phone: 2109876543, interest: ['Cooking', 'Traveling', 'Photography'], photo: 'https://reqres.in/img/faces/6-image.jpg' }, \n\t\t{ id: 7, name: 'Mia Tiana', email: 'mia.tiana@example.com', date: '21/11/2022', phone: 1098705217, interest: ['Music', 'Gardening', 'Hiking'], photo: 'https://reqres.in/img/faces/2-image.jpg' }, \n\t\t{ id: 8, name: 'Lucas Ramirez', email: 'lucas.ramirez@example.com', date: '31/03/2023', phone: 9876543210, interest: ['Reading', 'Dancing', 'Crafting'], photo: 'https://reqres.in/img/faces/9-image.jpg' }, \n\t\t{ id: 9, name: 'Alexander Vela', email: 'alexander.vela@example.com', date: '07/09/2022', phone: 7654321098, interest: ['Music','Gardening','Photography'], photo: 'https://reqres.in/img/faces/8-image.jpg' }, \n\t\t{ id: 10, name: 'Michael Reyes', email: 'michael.reyes@example.com', date: '25/12/2021', phone: 5432109876, interest: ['Cooking','Crafting','Volunteering'], photo: 'https://reqres.in/img/faces/10-image.jpg' } \n] }}",
"{{ [ \n\t\t{ id: 1, name: 'Olivia Nguyen', email: 'olivia.nguyen@example.com', date: '15/05/2022', mobile_number: 9876543210, interest: ['Reading', 'Traveling','Photography'], photo: 'https://reqres.in/img/faces/7-image.jpg' }, \n\t\t{ id: 2, name: 'Liam Patel', email: 'liam.patel@example.com', date: '20/09/2021', mobile_number: 8765432109, interest: ['Cooking','Gardening','Hiking'], photo: 'https://reqres.in/img/faces/5-image.jpg' }, \n\t\t{ id: 3, name: 'Sophia Reyes', email: 'sophia.reyes@example.com', date: '01/01/2023', mobile_number: 7654321098, interest: ['Music','Dancing','Crafting'], photo: 'https://reqres.in/img/faces/3-image.jpg' }, \n\t\t{ id: 4, name: 'Jacob Hernandez', email: 'jacob.hernandez@example.com', date: '10/11/2022', mobile_number: 6543210987, interest: ['Reading', 'Traveling', 'Volunteering'], photo: 'https://reqres.in/img/faces/1-image.jpg' }, \n\t\t{ id: 5, name: 'William Sanchez', email: 'william.sanchez@example.com', date: '07/01/2021', mobile_number: 4321098765, interest: ['Music', 'Dancing', 'Hiking'], photo: 'https://reqres.in/img/faces/4-image.jpg' }, \n\t\t{ id: 6, name: 'Ethan Morales', email: 'ethan.morales@example.com', date: '05/11/2021', mobile_number: 2109876543, interest: ['Cooking', 'Traveling', 'Photography'], photo: 'https://reqres.in/img/faces/6-image.jpg' }, \n\t\t{ id: 7, name: 'Mia Tiana', email: 'mia.tiana@example.com', date: '21/11/2022', mobile_number: 1098705217, interest: ['Music', 'Gardening', 'Hiking'], photo: 'https://reqres.in/img/faces/2-image.jpg' }, \n\t\t{ id: 8, name: 'Lucas Ramirez', email: 'lucas.ramirez@example.com', date: '31/03/2023', mobile_number: 9876543210, interest: ['Reading', 'Dancing', 'Crafting'], photo: 'https://reqres.in/img/faces/9-image.jpg' }, \n\t\t{ id: 9, name: 'Alexander Vela', email: 'alexander.vela@example.com', date: '07/09/2022', mobile_number: 7654321098, interest: ['Music','Gardening','Photography'], photo: 'https://reqres.in/img/faces/8-image.jpg' }, \n\t\t{ id: 10, name: 'Michael Reyes', email: 'michael.reyes@example.com', date: '25/12/2021', mobile_number: 5432109876, interest: ['Cooking','Crafting','Volunteering'], photo: 'https://reqres.in/img/faces/10-image.jpg' } \n] }}",
},
useDynamicColumn: { value: '{{false}}' },
columnData: {
@ -591,8 +590,8 @@ export const tableConfig = {
columnSize: 130,
},
{
name: 'phone',
key: 'phone',
name: 'mobile_number',
key: 'mobile_number',
id: '9c2e3c40572a4aefb8e179ee39a0e1ac9dc2b2e6634be56e1c05be13c3d1de56',
autogenerated: true,
fxActiveFields: [],

View file

@ -109,11 +109,11 @@ export const tabsConfig = {
events: { onTabSwitch: { displayName: 'On tab switch' } },
styles: {
highlightColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Highlight color',
validation: {
schema: { type: 'string' },
defaultValue: '#375FCF',
defaultValue: 'var(--primary-brand)',
},
},
visibility: {
@ -174,7 +174,7 @@ export const tabsConfig = {
},
events: [],
styles: {
highlightColor: { value: '#375FCF' },
highlightColor: { value: 'var(--primary-brand)' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },
tabWidth: { value: 'auto' },

View file

@ -105,7 +105,7 @@ export const textConfig = {
accordian: 'Text',
},
textColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Color',
validation: {
schema: { type: 'string' },
@ -185,7 +185,7 @@ export const textConfig = {
},
backgroundColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Background',
validation: {
schema: { type: 'string' },
@ -195,7 +195,7 @@ export const textConfig = {
colorPickerPosition: 'top',
},
borderColor: {
type: 'color',
type: 'colorSwatches',
displayName: 'Border',
validation: {
schema: { type: 'string' },

Some files were not shown because too many files have changed in this diff Show more