@frontify/guideline-blocks-settings 0.27.0 → 0.28.0

package/src/settings/defaultValues.ts

@@ -0,0 +1,21 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export const BACKGROUND_COLOR_DEFAULT_VALUE = {
+    red: 241,
+    green: 241,
+    blue: 241,
+    alpha: 1,
+};
+
+export const BORDER_COLOR_DEFAULT_VALUE = {
+    red: 234,
+    green: 235,
+    blue: 235,
+    alpha: 1,
+};
+
+export const BORDER_WIDTH_DEFAULT_VALUE = '1px';
+
+export const PADDING_DEFAULT_PLACEHOLDER = '24px';
+
+export const MARGIN_DEFAULT_PLACEHOLDER = '24px';

package/src/settings/gutter.spec.ts

@@ -0,0 +1,60 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { describe, expect, it } from 'vitest';
+import { GutterSpacing, getGutterSettings } from '.';
+import { SwitchBlock } from '..';
+
+describe('getGutterSettings', () => {
+    it('should return gutter settings without arguments', () => {
+        const gutterSettings = getGutterSettings() as SwitchBlock;
+
+        expect(gutterSettings).toHaveProperty('id', 'hasCustomSpacing');
+        expect(gutterSettings).toHaveProperty('label', 'Gutter');
+        expect(gutterSettings).toHaveProperty('type', 'switch');
+        expect(gutterSettings).toHaveProperty('defaultValue', false);
+        expect(gutterSettings.on?.[0]).toHaveProperty('id', 'spacingCustom');
+        expect(gutterSettings.on?.[0]).toHaveProperty('type', 'input');
+        expect(gutterSettings.off?.[0]).toHaveProperty('id', 'spacingChoice');
+        expect(gutterSettings.off?.[0]).toHaveProperty('type', 'slider');
+        expect(gutterSettings.off?.[0]).toHaveProperty('choices', [
+            {
+                value: GutterSpacing.Auto,
+                label: 'Auto',
+            },
+            {
+                value: GutterSpacing.S,
+                label: 'S',
+            },
+            {
+                value: GutterSpacing.M,
+                label: 'M',
+            },
+            {
+                value: GutterSpacing.L,
+                label: 'L',
+            },
+        ]);
+    });
+
+    it('should return gutter settings with id', () => {
+        expect(getGutterSettings({ id: 'Test' })).toHaveProperty('id', 'Test');
+    });
+
+    it('should return gutter settings with custom spacing choice id', () => {
+        const gutterSettings = getGutterSettings({ spacingChoiceId: 'Choice_ID' }) as SwitchBlock;
+
+        expect(gutterSettings.off?.[0]).toHaveProperty('id', 'Choice_ID');
+    });
+
+    it('should return gutter settings with custom spacing custom id', () => {
+        const gutterSettings = getGutterSettings({ spacingCustomId: 'Custom_ID' }) as SwitchBlock;
+
+        expect(gutterSettings.on?.[0]).toHaveProperty('id', 'Custom_ID');
+    });
+
+    it('should return gutter settings with custom spacing custom id', () => {
+        const gutterSettings = getGutterSettings({ defaultValueChoices: GutterSpacing.L }) as SwitchBlock;
+
+        expect(gutterSettings.off?.[0]).toHaveProperty('defaultValue', GutterSpacing.L);
+    });
+});

package/src/settings/gutter.ts

@@ -0,0 +1,75 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { SettingBlock, appendUnit, numericalOrPixelRule, presetCustomValue } from '../';
+import { GutterSpacing, gutterSpacingStyleMap } from './types';
+
+/**
+ * Returns gutter settings: gutter switch, gutter choices or gutter custom input
+ *
+ * @param options Options for the settings
+ * @param options.id Custom id for the gutters switch
+ * @param options.dependentSettingId Id of the dependent setting
+ * @param options.spacingChoiceId Id of the spacing choice
+ * @param options.defaultValueChoices Default value for the spacing choice
+ * @returns {SettingBlock} Returns the gutter settings
+ */
+
+type GutterSettingsType = {
+    id?: string;
+    dependentSettingId?: string;
+    spacingChoiceId?: string;
+    spacingCustomId?: string;
+    defaultValueChoices?: GutterSpacing;
+};
+
+export const getGutterSettings = (options?: GutterSettingsType): SettingBlock => {
+    const id = options?.id ? options.id : 'hasCustomSpacing';
+    const dependentSettingId = options?.dependentSettingId ? options.dependentSettingId : 'columns';
+    const spacingChoiceId = options?.spacingChoiceId ? options.spacingChoiceId : 'spacingChoice';
+    const spacingCustomId = options?.spacingCustomId ? options.spacingCustomId : 'spacingCustom';
+    const defaultValueChoices = options?.defaultValueChoices ? options.defaultValueChoices : GutterSpacing.M;
+
+    return {
+        id,
+        type: 'switch',
+        defaultValue: false,
+        switchLabel: 'Custom',
+        label: 'Gutter',
+        info: 'An official nerds term for ‘gap’',
+        onChange: (bundle) => presetCustomValue(bundle, spacingChoiceId, spacingCustomId, gutterSpacingStyleMap),
+        show: (bundle) => bundle.getBlock(dependentSettingId)?.value !== '1',
+        on: [
+            {
+                id: spacingCustomId,
+                type: 'input',
+                rules: [numericalOrPixelRule],
+                onChange: (bundle) => appendUnit(bundle, spacingCustomId),
+            },
+        ],
+        off: [
+            {
+                id: spacingChoiceId,
+                type: 'slider',
+                defaultValue: defaultValueChoices,
+                choices: [
+                    {
+                        value: GutterSpacing.Auto,
+                        label: 'Auto',
+                    },
+                    {
+                        value: GutterSpacing.S,
+                        label: 'S',
+                    },
+                    {
+                        value: GutterSpacing.M,
+                        label: 'M',
+                    },
+                    {
+                        value: GutterSpacing.L,
+                        label: 'L',
+                    },
+                ],
+            },
+        ],
+    };
+};

package/src/settings/index.ts

@@ -0,0 +1,14 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export * from './background';
+export * from './border';
+export * from './borderRadius';
+export * from './borderRadiusExtended';
+export * from './gutter';
+export * from './margin';
+export * from './marginExtended';
+export * from './padding';
+export * from './paddingExtended';
+export * from './types';
+export * from './securityDownloadable';
+export * from './securityGlobalControl';

package/src/settings/margin.spec.ts

@@ -0,0 +1,42 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { describe, expect, it } from 'vitest';
+import { Margin, getMarginSettings } from '.';
+import { SwitchBlock } from '..';
+
+describe('getMarginSettings', () => {
+    it('should return margin settings without arguments', () => {
+        const marginSettings = getMarginSettings() as SwitchBlock;
+
+        expect(marginSettings).toHaveProperty('id', 'hasCustomMarginValue');
+        expect(marginSettings).toHaveProperty('label', 'Margin');
+        expect(marginSettings).toHaveProperty('type', 'switch');
+        expect(marginSettings).toHaveProperty('defaultValue', false);
+        expect(marginSettings.on?.[0]).toHaveProperty('id', 'marginValue');
+        expect(marginSettings.on?.[0]).toHaveProperty('type', 'input');
+        expect(marginSettings.off?.[0]).toHaveProperty('id', 'marginChoice');
+        expect(marginSettings.off?.[0]).toHaveProperty('type', 'segmentedControls');
+        expect(marginSettings.off?.[0]).toHaveProperty('choices', [
+            {
+                value: Margin.None,
+                label: 'None',
+            },
+            {
+                value: Margin.Small,
+                label: 'S',
+            },
+            {
+                value: Margin.Medium,
+                label: 'M',
+            },
+            {
+                value: Margin.Large,
+                label: 'L',
+            },
+        ]);
+    });
+
+    it('should return margin settings with id', () => {
+        expect(getMarginSettings({ id: 'Test' })).toHaveProperty('id', 'hasCustomMarginValue_Test');
+    });
+});

package/src/settings/margin.ts

@@ -0,0 +1,72 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import {
+    SettingBlock,
+    appendUnit,
+    maximumNumericalOrPixelOrAutoRule,
+    numericalOrPixelRule,
+    presetCustomValue,
+} from '../';
+import { MARGIN_DEFAULT_PLACEHOLDER } from './defaultValues';
+import { Margin, marginStyleMap } from './types';
+
+type MarginSettingsType = {
+    id?: string;
+    marginStyleMap?: Record<Margin, string>;
+};
+
+/**
+ * Returns margin settings: margin switch, margin slider, custom margin input
+ *
+ * @param {string} id Custom suffix for the setting ids
+ * @returns {SettingBlock} Returns margin settings
+ */
+export const getMarginSlider = (id: string): SettingBlock => ({
+    id,
+    type: 'segmentedControls',
+    defaultValue: Margin.None,
+    choices: [
+        {
+            value: Margin.None,
+            label: 'None',
+        },
+        {
+            value: Margin.Small,
+            label: 'S',
+        },
+        {
+            value: Margin.Medium,
+            label: 'M',
+        },
+        {
+            value: Margin.Large,
+            label: 'L',
+        },
+    ],
+});
+
+export const getMarginSettings = (options?: MarginSettingsType): SettingBlock => {
+    const hasId = options?.id ? `hasCustomMarginValue_${options?.id}` : 'hasCustomMarginValue';
+    const valueId = options?.id ? `marginValue_${options?.id}` : 'marginValue';
+    const choiceId = options?.id ? `marginChoice_${options?.id}` : 'marginChoice';
+
+    return {
+        id: hasId,
+        label: 'Margin',
+        type: 'switch',
+        switchLabel: 'Custom',
+        defaultValue: false,
+        info: 'The spacing around UI elements to create more space',
+        onChange: (bundle) => presetCustomValue(bundle, choiceId, valueId, options?.marginStyleMap || marginStyleMap),
+        on: [
+            {
+                id: valueId,
+                type: 'input',
+                placeholder: MARGIN_DEFAULT_PLACEHOLDER,
+                rules: [numericalOrPixelRule, maximumNumericalOrPixelOrAutoRule(500)],
+                onChange: (bundle) => appendUnit(bundle, valueId),
+            },
+        ],
+        off: [getMarginSlider(choiceId)],
+    };
+};

package/src/settings/marginExtended.spec.ts

@@ -0,0 +1,45 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { describe, expect, it } from 'vitest';
+import { MultiInputBlock, MultiInputLayout } from '@frontify/sidebar-settings';
+import { Margin, getMarginExtendedSettings } from '.';
+import { SwitchBlock } from '..';
+import { AppBridgeBlock } from '@frontify/app-bridge';
+
+describe('getMarginExtendedSettings', () => {
+    it('should return extended margin settings without arguments', () => {
+        const extendedMarginSettings = getMarginExtendedSettings() as SwitchBlock;
+
+        expect(extendedMarginSettings).toHaveProperty('id', 'hasExtendedCustomMargin');
+        expect(extendedMarginSettings).toHaveProperty('label', 'Margin');
+        expect(extendedMarginSettings).toHaveProperty('type', 'switch');
+        expect(extendedMarginSettings).toHaveProperty('defaultValue', false);
+        expect(extendedMarginSettings.on?.[0]).toHaveProperty('id', 'extendedMarginValues');
+        expect(extendedMarginSettings.on?.[0]).toHaveProperty('type', 'multiInput');
+        expect(extendedMarginSettings.on?.[0]).toHaveProperty('layout', MultiInputLayout.Spider);
+
+        expect((extendedMarginSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[0]).toHaveProperty(
+            'id',
+            'extendedMarginTop'
+        );
+        expect((extendedMarginSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[1]).toHaveProperty(
+            'id',
+            'extendedMarginLeft'
+        );
+        expect((extendedMarginSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[2]).toHaveProperty(
+            'id',
+            'extendedMarginRight'
+        );
+        expect((extendedMarginSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[3]).toHaveProperty(
+            'id',
+            'extendedMarginBottom'
+        );
+        expect(extendedMarginSettings.off?.[0]).toHaveProperty('id', 'extendedMarginChoice');
+        expect(extendedMarginSettings.off?.[0]).toHaveProperty('type', 'segmentedControls');
+        expect(extendedMarginSettings.off?.[0]).toHaveProperty('defaultValue', Margin.None);
+    });
+
+    it('should return extended margin settings with id', () => {
+        expect(getMarginExtendedSettings({ id: 'Test' })).toHaveProperty('id', 'hasExtendedCustomMargin_Test');
+    });
+});

package/src/settings/marginExtended.ts

@@ -0,0 +1,91 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import {
+    MultiInputLayout,
+    SettingBlock,
+    appendUnit,
+    maximumNumericalOrPixelOrAutoRule,
+    numericalOrPixelRule,
+    presetCustomValue,
+} from '../';
+import { MARGIN_DEFAULT_PLACEHOLDER } from './defaultValues';
+import { getMarginSlider } from './margin';
+import { marginStyleMap } from './types';
+
+type MarginSettingsType = {
+    id?: string;
+};
+
+/**
+ * Returns margin settings: margin switch, margin slider, custom margin input for every direction
+ *
+ * @param options Options for the settings
+ * @param options.id Custom suffix for the setting ids
+ * @returns {SettingBlock} Returns margin settings
+ */
+export const getMarginExtendedSettings = (options?: MarginSettingsType): SettingBlock => {
+    const hasId = options?.id ? `hasExtendedCustomMargin_${options?.id}` : 'hasExtendedCustomMargin';
+    const valueId = options?.id ? `extendedMarginValues_${options?.id}` : 'extendedMarginValues';
+    const choiceId = options?.id ? `extendedMarginChoice_${options?.id}` : 'extendedMarginChoice';
+    const topId = options?.id ? `extendedMarginTop_${options?.id}` : 'extendedMarginTop';
+    const leftId = options?.id ? `extendedMarginLeft_${options?.id}` : 'extendedMarginLeft';
+    const rightId = options?.id ? `extendedMarginRight_${options?.id}` : 'extendedMarginRight';
+    const bottomId = options?.id ? `extendedMarginBottom_${options?.id}` : 'extendedMarginBottom';
+
+    return {
+        id: hasId,
+        label: 'Margin',
+        type: 'switch',
+        switchLabel: 'Custom',
+        defaultValue: false,
+        info: 'The spacing around UI elements to create more negative space',
+        onChange: (bundle) => {
+            presetCustomValue(bundle, choiceId, topId, marginStyleMap);
+            presetCustomValue(bundle, choiceId, leftId, marginStyleMap);
+            presetCustomValue(bundle, choiceId, rightId, marginStyleMap);
+            presetCustomValue(bundle, choiceId, bottomId, marginStyleMap);
+        },
+        on: [
+            {
+                id: valueId,
+                type: 'multiInput',
+                layout: MultiInputLayout.Spider,
+                blocks: [
+                    {
+                        id: topId,
+                        type: 'input',
+                        label: 'Top',
+                        placeholder: MARGIN_DEFAULT_PLACEHOLDER,
+                        onChange: (bundle) => appendUnit(bundle, topId),
+                        rules: [numericalOrPixelRule, maximumNumericalOrPixelOrAutoRule(500)],
+                    },
+                    {
+                        id: leftId,
+                        type: 'input',
+                        label: 'Left',
+                        placeholder: MARGIN_DEFAULT_PLACEHOLDER,
+                        onChange: (bundle) => appendUnit(bundle, leftId),
+                        rules: [numericalOrPixelRule, maximumNumericalOrPixelOrAutoRule(500)],
+                    },
+                    {
+                        id: rightId,
+                        type: 'input',
+                        label: 'Right',
+                        placeholder: MARGIN_DEFAULT_PLACEHOLDER,
+                        onChange: (bundle) => appendUnit(bundle, rightId),
+                        rules: [numericalOrPixelRule, maximumNumericalOrPixelOrAutoRule(500)],
+                    },
+                    {
+                        id: bottomId,
+                        type: 'input',
+                        label: 'Bottom',
+                        placeholder: MARGIN_DEFAULT_PLACEHOLDER,
+                        onChange: (bundle) => appendUnit(bundle, bottomId),
+                        rules: [numericalOrPixelRule, maximumNumericalOrPixelOrAutoRule(500)],
+                    },
+                ],
+            },
+        ],
+        off: [getMarginSlider(choiceId)],
+    };
+};

package/src/settings/padding.spec.ts

@@ -0,0 +1,42 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { describe, expect, it } from 'vitest';
+import { Padding, getPaddingSettings } from '.';
+import { SwitchBlock } from '..';
+
+describe('getPaddingSettings', () => {
+    it('should return padding settings without arguments', () => {
+        const paddingSettings = getPaddingSettings() as SwitchBlock;
+
+        expect(paddingSettings).toHaveProperty('id', 'hasCustomPaddingValue');
+        expect(paddingSettings).toHaveProperty('label', 'Padding');
+        expect(paddingSettings).toHaveProperty('type', 'switch');
+        expect(paddingSettings).toHaveProperty('defaultValue', false);
+        expect(paddingSettings.on?.[0]).toHaveProperty('id', 'paddingValue');
+        expect(paddingSettings.on?.[0]).toHaveProperty('type', 'input');
+        expect(paddingSettings.off?.[0]).toHaveProperty('id', 'paddingChoice');
+        expect(paddingSettings.off?.[0]).toHaveProperty('type', 'segmentedControls');
+        expect(paddingSettings.off?.[0]).toHaveProperty('choices', [
+            {
+                value: Padding.None,
+                label: 'None',
+            },
+            {
+                value: Padding.Small,
+                label: 'S',
+            },
+            {
+                value: Padding.Medium,
+                label: 'M',
+            },
+            {
+                value: Padding.Large,
+                label: 'L',
+            },
+        ]);
+    });
+
+    it('should return padding settings with id', () => {
+        expect(getPaddingSettings({ id: 'Test' })).toHaveProperty('id', 'hasCustomPaddingValue_Test');
+    });
+});

package/src/settings/padding.ts

@@ -0,0 +1,73 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import {
+    SettingBlock,
+    appendUnit,
+    maximumNumericalOrPixelOrAutoRule,
+    numericalOrPixelRule,
+    presetCustomValue,
+} from '../';
+import { PADDING_DEFAULT_PLACEHOLDER } from './defaultValues';
+import { Padding, paddingStyleMap } from './types';
+
+type PaddingSettingsType = {
+    id?: string;
+    paddingStyleMap?: Record<Padding, string>;
+};
+
+/**
+ * Returns padding settings: padding switch, padding slider, custom padding input
+ *
+ * @param options Options for the settings
+ * @param options.id Custom suffix for the setting ids
+ * @returns {SettingBlock} Returns padding settings
+ */
+export const getPaddingSlider = (id: string): SettingBlock => ({
+    id,
+    type: 'segmentedControls',
+    defaultValue: Padding.Small,
+    choices: [
+        {
+            value: Padding.None,
+            label: 'None',
+        },
+        {
+            value: Padding.Small,
+            label: 'S',
+        },
+        {
+            value: Padding.Medium,
+            label: 'M',
+        },
+        {
+            value: Padding.Large,
+            label: 'L',
+        },
+    ],
+});
+
+export const getPaddingSettings = (options?: PaddingSettingsType): SettingBlock => {
+    const hasId = options?.id ? `hasCustomPaddingValue_${options?.id}` : 'hasCustomPaddingValue';
+    const valueId = options?.id ? `paddingValue_${options?.id}` : 'paddingValue';
+    const choiceId = options?.id ? `paddingChoice_${options?.id}` : 'paddingChoice';
+
+    return {
+        id: hasId,
+        label: 'Padding',
+        type: 'switch',
+        switchLabel: 'Custom',
+        defaultValue: false,
+        info: 'The spacing around UI elements to create more negative space',
+        onChange: (bundle) => presetCustomValue(bundle, choiceId, valueId, options?.paddingStyleMap || paddingStyleMap),
+        on: [
+            {
+                id: valueId,
+                type: 'input',
+                placeholder: PADDING_DEFAULT_PLACEHOLDER,
+                rules: [numericalOrPixelRule, maximumNumericalOrPixelOrAutoRule(500)],
+                onChange: (bundle) => appendUnit(bundle, valueId),
+            },
+        ],
+        off: [getPaddingSlider(choiceId)],
+    };
+};

package/src/settings/paddingExtended.spec.ts

@@ -0,0 +1,45 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { describe, expect, it } from 'vitest';
+import { MultiInputBlock, MultiInputLayout } from '@frontify/sidebar-settings';
+import { Padding, getPaddingExtendedSettings } from '.';
+import { SwitchBlock } from '..';
+import { AppBridgeBlock } from '@frontify/app-bridge';
+
+describe('getPaddingExtendedSettings', () => {
+    it('should return extended padding settings without arguments', () => {
+        const extendedPaddingSettings = getPaddingExtendedSettings() as SwitchBlock;
+
+        expect(extendedPaddingSettings).toHaveProperty('id', 'hasExtendedCustomPadding');
+        expect(extendedPaddingSettings).toHaveProperty('label', 'Padding');
+        expect(extendedPaddingSettings).toHaveProperty('type', 'switch');
+        expect(extendedPaddingSettings).toHaveProperty('defaultValue', false);
+        expect(extendedPaddingSettings.on?.[0]).toHaveProperty('id', 'extendedPaddingValues');
+        expect(extendedPaddingSettings.on?.[0]).toHaveProperty('type', 'multiInput');
+        expect(extendedPaddingSettings.on?.[0]).toHaveProperty('layout', MultiInputLayout.Spider);
+
+        expect((extendedPaddingSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[0]).toHaveProperty(
+            'id',
+            'extendedPaddingTop'
+        );
+        expect((extendedPaddingSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[1]).toHaveProperty(
+            'id',
+            'extendedPaddingLeft'
+        );
+        expect((extendedPaddingSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[2]).toHaveProperty(
+            'id',
+            'extendedPaddingRight'
+        );
+        expect((extendedPaddingSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[3]).toHaveProperty(
+            'id',
+            'extendedPaddingBottom'
+        );
+        expect(extendedPaddingSettings.off?.[0]).toHaveProperty('id', 'extendedPaddingChoice');
+        expect(extendedPaddingSettings.off?.[0]).toHaveProperty('type', 'segmentedControls');
+        expect(extendedPaddingSettings.off?.[0]).toHaveProperty('defaultValue', Padding.Small);
+    });
+
+    it('should return extended margin settings with id', () => {
+        expect(getPaddingExtendedSettings({ id: 'Test' })).toHaveProperty('id', 'hasExtendedCustomPadding_Test');
+    });
+});

package/src/settings/paddingExtended.ts

@@ -0,0 +1,91 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import {
+    MultiInputLayout,
+    SettingBlock,
+    appendUnit,
+    maximumNumericalOrPixelOrAutoRule,
+    numericalOrPixelRule,
+    presetCustomValue,
+} from '../';
+import { PADDING_DEFAULT_PLACEHOLDER } from './defaultValues';
+import { getPaddingSlider } from './padding';
+import { paddingStyleMap } from './types';
+
+type PaddingSettingsType = {
+    id?: string;
+};
+
+/**
+ * Returns padding settings: padding switch, padding slider, custom padding input for every direction
+ *
+ * @param options Options for the settings
+ * @param options.id Custom suffix for the setting ids
+ * @returns {SettingBlock} Returns padding settings
+ */
+export const getPaddingExtendedSettings = (options?: PaddingSettingsType): SettingBlock => {
+    const hasId = options?.id ? `hasExtendedCustomPadding_${options?.id}` : 'hasExtendedCustomPadding';
+    const valueId = options?.id ? `extendedPaddingValues_${options?.id}` : 'extendedPaddingValues';
+    const choiceId = options?.id ? `extendedPaddingChoice_${options?.id}` : 'extendedPaddingChoice';
+    const topId = options?.id ? `extendedPaddingTop_${options?.id}` : 'extendedPaddingTop';
+    const leftId = options?.id ? `extendedPaddingLeft_${options?.id}` : 'extendedPaddingLeft';
+    const rightId = options?.id ? `extendedPaddingRight_${options?.id}` : 'extendedPaddingRight';
+    const bottomId = options?.id ? `extendedPaddingBottom_${options?.id}` : 'extendedPaddingBottom';
+
+    return {
+        id: hasId,
+        label: 'Padding',
+        type: 'switch',
+        switchLabel: 'Custom',
+        defaultValue: false,
+        info: 'The spacing around UI elements to create more negative space',
+        onChange: (bundle) => {
+            presetCustomValue(bundle, choiceId, topId, paddingStyleMap);
+            presetCustomValue(bundle, choiceId, leftId, paddingStyleMap);
+            presetCustomValue(bundle, choiceId, rightId, paddingStyleMap);
+            presetCustomValue(bundle, choiceId, bottomId, paddingStyleMap);
+        },
+        on: [
+            {
+                id: valueId,
+                type: 'multiInput',
+                layout: MultiInputLayout.Spider,
+                blocks: [
+                    {
+                        id: topId,
+                        type: 'input',
+                        label: 'Top',
+                        placeholder: PADDING_DEFAULT_PLACEHOLDER,
+                        onChange: (bundle) => appendUnit(bundle, topId),
+                        rules: [numericalOrPixelRule, maximumNumericalOrPixelOrAutoRule(500)],
+                    },
+                    {
+                        id: leftId,
+                        type: 'input',
+                        label: 'Left',
+                        placeholder: PADDING_DEFAULT_PLACEHOLDER,
+                        onChange: (bundle) => appendUnit(bundle, leftId),
+                        rules: [numericalOrPixelRule, maximumNumericalOrPixelOrAutoRule(500)],
+                    },
+                    {
+                        id: rightId,
+                        type: 'input',
+                        label: 'Right',
+                        placeholder: PADDING_DEFAULT_PLACEHOLDER,
+                        onChange: (bundle) => appendUnit(bundle, rightId),
+                        rules: [numericalOrPixelRule, maximumNumericalOrPixelOrAutoRule(500)],
+                    },
+                    {
+                        id: bottomId,
+                        type: 'input',
+                        label: 'Bottom',
+                        placeholder: PADDING_DEFAULT_PLACEHOLDER,
+                        onChange: (bundle) => appendUnit(bundle, bottomId),
+                        rules: [numericalOrPixelRule, maximumNumericalOrPixelOrAutoRule(500)],
+                    },
+                ],
+            },
+        ],
+        off: [getPaddingSlider(choiceId)],
+    };
+};