@frontify/guideline-blocks-settings 0.33.4 → 0.34.0

package/src/settings/background.ts

@@ -1,52 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { Color } from '@frontify/fondue';
-import { BACKGROUND_COLOR_DEFAULT_VALUE } from './defaultValues';
-import { SettingBlock } from '../';
-
-type BackgroundSettingsType = {
-    id?: string;
-    defaultValue?: boolean;
-    defaultColor?: Color;
-    preventDefaultColor?: boolean;
-    switchLabel?: string;
-    label?: string;
-};
-
-/**
- * Returns background settings: background switch, background color
- *
- * @param options Options for the settings
- * @param options.id Custom suffix for the setting ids
- * @param options.defaultValue Default value for the background switch
- * @param options.defaultColor Default value for the background color
- * @param options.preventDefaultColor Whether the background color should be empty by default
- * @param options.label Label for the background input
- * @param options.switchLabel Label for the background switch
- * @returns {SettingBlock} Returns background settings
- */
-
-export const getBackgroundSettings = (options?: BackgroundSettingsType): SettingBlock => {
-    const hasId = options?.id ? `hasBackground${options.id}` : 'hasBackground';
-    const colorId = options?.id ? `backgroundColor${options.id}` : 'backgroundColor';
-    const defaultColor = !!options?.preventDefaultColor
-        ? undefined
-        : options?.defaultColor || BACKGROUND_COLOR_DEFAULT_VALUE;
-    const label = options?.label ? options.label : 'Background';
-    const switchLabel = options?.switchLabel ? options.switchLabel : undefined;
-
-    return {
-        id: hasId,
-        label,
-        type: 'switch',
-        switchLabel,
-        defaultValue: !!options?.defaultValue,
-        on: [
-            {
-                id: colorId,
-                defaultValue: defaultColor,
-                type: 'colorInput',
-            },
-        ],
-    };
-};

package/src/settings/border.spec.ts

@@ -1,76 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { describe, expect, it } from 'vitest';
-import { getBorderSettings } from './border';
-import { MultiInputBlock, MultiInputLayout } from '@frontify/sidebar-settings';
-import { BorderStyle } from '../settings';
-import { BORDER_COLOR_DEFAULT_VALUE } from '../settings/defaultValues';
-import { SwitchBlock } from '../';
-import { AppBridgeBlock } from '@frontify/app-bridge';
-
-describe('getBorderSettings', () => {
-    it('should return border settings without arguments', () => {
-        const borderSettings = getBorderSettings() as SwitchBlock;
-
-        expect(borderSettings).toHaveProperty('id', 'hasBorder');
-        expect(borderSettings).toHaveProperty('label', 'Border');
-        expect(borderSettings).toHaveProperty('type', 'switch');
-        expect(borderSettings).toHaveProperty('defaultValue', false);
-        expect(borderSettings.on?.[0]).toHaveProperty('id', 'borderSelection');
-        expect(borderSettings.on?.[0]).toHaveProperty('type', 'multiInput');
-        expect(borderSettings.on?.[0]).toHaveProperty('lastItemFullWidth', true);
-        expect(borderSettings.on?.[0]).toHaveProperty('layout', MultiInputLayout.Columns);
-        expect((borderSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[0]).toEqual({
-            id: 'borderStyle',
-            type: 'dropdown',
-            defaultValue: BorderStyle.Solid,
-            choices: [
-                {
-                    value: BorderStyle.Solid,
-                    label: BorderStyle.Solid,
-                },
-                {
-                    value: BorderStyle.Dotted,
-                    label: BorderStyle.Dotted,
-                },
-                {
-                    value: BorderStyle.Dashed,
-                    label: BorderStyle.Dashed,
-                },
-            ],
-        });
-        expect((borderSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[1]).toHaveProperty(
-            'id',
-            'borderWidth',
-        );
-        expect((borderSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[1]).toHaveProperty('type', 'input');
-        expect((borderSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[2]).toEqual({
-            id: 'borderColor',
-            type: 'colorInput',
-            defaultValue: BORDER_COLOR_DEFAULT_VALUE,
-        });
-    });
-
-    it('should return border settings with custom id', () => {
-        expect(getBorderSettings({ id: 'Test' })).toHaveProperty('id', 'hasBorder_Test');
-    });
-
-    it('should return border settings with custom color', () => {
-        const borderSettings = getBorderSettings({ defaultColor: { red: 255, green: 0, blue: 0 } }) as SwitchBlock;
-        expect((borderSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[2]).toEqual({
-            id: 'borderColor',
-            type: 'colorInput',
-            defaultValue: { red: 255, green: 0, blue: 0 },
-        });
-    });
-
-    it('should return border settings with custom default value', () => {
-        const borderSettings = getBorderSettings({ defaultValue: true }) as SwitchBlock;
-        expect(borderSettings).toHaveProperty('defaultValue', true);
-    });
-
-    it('should return border settings with custom switch label', () => {
-        const borderSettings = getBorderSettings({ switchLabel: 'mock' }) as SwitchBlock;
-        expect(borderSettings).toHaveProperty('switchLabel', 'mock');
-    });
-});

package/src/settings/border.ts

@@ -1,90 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import {
-    Color,
-    MultiInputLayout,
-    SettingBlock,
-    appendUnit,
-    maximumNumericalOrPixelOrAutoRule,
-    numericalOrPixelRule,
-} from '../';
-import { BORDER_COLOR_DEFAULT_VALUE, BORDER_WIDTH_DEFAULT_VALUE } from './defaultValues';
-import { BorderStyle } from './types';
-
-/**
- * Returns border settings: border switch, border style, border width, border color
- *
- * @param options Options for the settings
- * @param options.id Custom suffix for the setting ids
- * @param options.switchLabel Label for the border switch
- * @param options.defaultValue Default value for the border switch
- * @returns {SettingBlock} Returns border settings
- */
-
-type BorderSettingsType = {
-    id?: string;
-    defaultValue?: boolean;
-    defaultColor?: Color;
-    switchLabel?: string;
-};
-
-export const getBorderSettings = (options?: BorderSettingsType): SettingBlock => {
-    const hasId = options?.id ? `hasBorder_${options.id}` : 'hasBorder';
-    const selectionId = options?.id ? `borderSelection_${options.id}` : 'borderSelection';
-    const styleId = options?.id ? `borderStyle_${options.id}` : 'borderStyle';
-    const widthId = options?.id ? `borderWidth_${options.id}` : 'borderWidth';
-    const colorId = options?.id ? `borderColor_${options.id}` : 'borderColor';
-    const defaultColor = options?.defaultColor || BORDER_COLOR_DEFAULT_VALUE;
-    const switchLabel = options?.switchLabel ? options.switchLabel : undefined;
-
-    return {
-        id: hasId,
-        label: 'Border',
-        type: 'switch',
-        switchLabel,
-        defaultValue: !!options?.defaultValue,
-        on: [
-            {
-                id: selectionId,
-                type: 'multiInput',
-                onChange: (bundle) => appendUnit(bundle, widthId),
-                layout: MultiInputLayout.Columns,
-                lastItemFullWidth: true,
-                blocks: [
-                    {
-                        id: styleId,
-                        type: 'dropdown',
-                        defaultValue: BorderStyle.Solid,
-                        choices: [
-                            {
-                                value: BorderStyle.Solid,
-                                label: BorderStyle.Solid,
-                            },
-                            {
-                                value: BorderStyle.Dotted,
-                                label: BorderStyle.Dotted,
-                            },
-                            {
-                                value: BorderStyle.Dashed,
-                                label: BorderStyle.Dashed,
-                            },
-                        ],
-                    },
-                    {
-                        id: widthId,
-                        type: 'input',
-                        defaultValue: BORDER_WIDTH_DEFAULT_VALUE,
-                        rules: [numericalOrPixelRule, maximumNumericalOrPixelOrAutoRule(500)],
-                        placeholder: 'e.g. 3px',
-                    },
-                    {
-                        id: colorId,
-                        type: 'colorInput',
-                        defaultValue: defaultColor,
-                    },
-                ],
-            },
-        ],
-        off: [],
-    };
-};

package/src/settings/borderRadius.spec.ts

@@ -1,30 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { describe, expect, it } from 'vitest';
-import { Radius, getBorderRadiusSettings } from '.';
-import { SwitchBlock } from '..';
-
-describe('getBorderRadiusSettings', () => {
-    it('should return border radius settings without arguments', () => {
-        const borderRadiusSettings = getBorderRadiusSettings() as SwitchBlock;
-
-        expect(borderRadiusSettings).toHaveProperty('id', 'hasRadius');
-        expect(borderRadiusSettings).toHaveProperty('label', 'Corner radius');
-        expect(borderRadiusSettings).toHaveProperty('type', 'switch');
-        expect(borderRadiusSettings).toHaveProperty('defaultValue', false);
-        expect(borderRadiusSettings.on?.[0]).toHaveProperty('id', 'radiusValue');
-        expect(borderRadiusSettings.on?.[0]).toHaveProperty('type', 'input');
-        expect(borderRadiusSettings.off?.[0]).toHaveProperty('id', 'radiusChoice');
-        expect(borderRadiusSettings.off?.[0]).toHaveProperty('type', 'segmentedControls');
-        expect(borderRadiusSettings.off?.[0]).toHaveProperty('defaultValue', Radius.None);
-    });
-
-    it('should return border radius settings with custom id', () => {
-        expect(getBorderRadiusSettings({ id: 'Test' })).toHaveProperty('id', 'hasRadius_Test');
-    });
-
-    it('should return border settings with custom default radius', () => {
-        const borderRadiusSettings = getBorderRadiusSettings({ defaultRadius: Radius.Large }) as SwitchBlock;
-        expect(borderRadiusSettings.off?.[0]).toHaveProperty('defaultValue', Radius.Large);
-    });
-});

package/src/settings/borderRadius.ts

@@ -1,73 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { SettingBlock, appendUnit, numericalOrPixelRule, presetCustomValue } from '../';
-
-import { Radius, radiusStyleMap } from './types';
-
-/**
- * Returns border radius settings: border radius switch, radius slider, custom radius input
- *
- * @param options Options for the settings
- * @param options.id Custom suffix for the setting ids
- * @param options.dependentSettingId Id of setting which the border radius is dependent on
- * @returns {SettingBlock} Returns border settings
- */
-
-type BorderRadiusSettingsType = {
-    id?: string;
-    dependentSettingId?: string;
-    radiusStyleMap?: Record<Radius, string>;
-    defaultRadius?: Radius;
-};
-
-export const getBorderRadiusSlider = (id: string, defaultValue: Radius = Radius.None): SettingBlock => ({
-    id,
-    type: 'segmentedControls',
-    defaultValue,
-    choices: [
-        {
-            value: Radius.None,
-            label: 'None',
-        },
-        {
-            value: Radius.Small,
-            label: 'S',
-        },
-        {
-            value: Radius.Medium,
-            label: 'M',
-        },
-        {
-            value: Radius.Large,
-            label: 'L',
-        },
-    ],
-});
-
-export const getBorderRadiusSettings = (options?: BorderRadiusSettingsType): SettingBlock => {
-    const hasId = options?.id ? `hasRadius_${options.id}` : 'hasRadius';
-    const valueId = options?.id ? `radiusValue_${options.id}` : 'radiusValue';
-    const choiceId = options?.id ? `radiusChoice_${options.id}` : 'radiusChoice';
-    const defaultValue = options?.defaultRadius || Radius.None;
-
-    return {
-        id: hasId,
-        label: 'Corner radius',
-        type: 'switch',
-        switchLabel: 'Custom',
-        defaultValue: false,
-        info: 'Determining how rounded the corners are.',
-        show: (bundle) => (options?.dependentSettingId ? !!bundle.getBlock(options.dependentSettingId)?.value : true),
-        onChange: (bundle) => presetCustomValue(bundle, choiceId, valueId, options?.radiusStyleMap || radiusStyleMap),
-        on: [
-            {
-                id: valueId,
-                type: 'input',
-                placeholder: 'e.g. 10px',
-                rules: [numericalOrPixelRule],
-                onChange: (bundle) => appendUnit(bundle, valueId),
-            },
-        ],
-        off: [getBorderRadiusSlider(choiceId, defaultValue)],
-    };
-};

package/src/settings/borderRadiusExtended.spec.ts

@@ -1,52 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { describe, expect, it } from 'vitest';
-import { MultiInputBlock, MultiInputLayout } from '@frontify/sidebar-settings';
-import { Radius, getExtendedBorderRadiusSettings } from '.';
-import { SwitchBlock } from '..';
-import { AppBridgeBlock } from '@frontify/app-bridge';
-
-describe('getBorderRadiusExtendedSettings', () => {
-    it('should return extended border radius settings without arguments', () => {
-        const extendedBorderRadiusSettings = getExtendedBorderRadiusSettings() as SwitchBlock;
-
-        expect(extendedBorderRadiusSettings).toHaveProperty('id', 'hasExtendedCustomRadius');
-        expect(extendedBorderRadiusSettings).toHaveProperty('label', 'Corner radius');
-        expect(extendedBorderRadiusSettings).toHaveProperty('type', 'switch');
-        expect(extendedBorderRadiusSettings).toHaveProperty('defaultValue', false);
-        expect(extendedBorderRadiusSettings.on?.[0]).toHaveProperty('id', 'extendedRadiusValue');
-        expect(extendedBorderRadiusSettings.on?.[0]).toHaveProperty('type', 'multiInput');
-        expect(extendedBorderRadiusSettings.on?.[0]).toHaveProperty('layout', MultiInputLayout.Columns);
-
-        expect((extendedBorderRadiusSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[0]).toHaveProperty(
-            'id',
-            'extendedRadiusTopLeft',
-        );
-        expect((extendedBorderRadiusSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[1]).toHaveProperty(
-            'id',
-            'extendedRadiusTopRight',
-        );
-        expect((extendedBorderRadiusSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[2]).toHaveProperty(
-            'id',
-            'extendedRadiusBottomLeft',
-        );
-        expect((extendedBorderRadiusSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[3]).toHaveProperty(
-            'id',
-            'extendedRadiusBottomRight',
-        );
-        expect(extendedBorderRadiusSettings.off?.[0]).toHaveProperty('id', 'extendedRadiusChoice');
-        expect(extendedBorderRadiusSettings.off?.[0]).toHaveProperty('type', 'segmentedControls');
-        expect(extendedBorderRadiusSettings.off?.[0]).toHaveProperty('defaultValue', Radius.None);
-    });
-
-    it('should return extended border radius settings with id', () => {
-        expect(getExtendedBorderRadiusSettings({ id: 'Test' })).toHaveProperty('id', 'hasExtendedCustomRadius_Test');
-    });
-
-    it('should return extended border settings with custom default value', () => {
-        const extendedBorderRadiusSettings = getExtendedBorderRadiusSettings({
-            defaultValue: Radius.Large,
-        }) as SwitchBlock;
-        expect(extendedBorderRadiusSettings.off?.[0]).toHaveProperty('defaultValue', Radius.Large);
-    });
-});

package/src/settings/borderRadiusExtended.ts

@@ -1,84 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { MultiInputLayout, SettingBlock, appendUnit, numericalOrPixelRule, presetCustomValue } from '../';
-import { getBorderRadiusSlider } from './borderRadius';
-import { Radius, radiusStyleMap } from './types';
-
-/**
- * Returns border radius settings: border radius switch, radius slider, custom radius inputs for every corner
- *
- * @param options Options for the settings
- * @param options.id Custom suffix for the setting ids
- * @param options.dependentSettingId Id of setting which the border radius is dependent on
- * @returns {SettingBlock} Returns border settings
- */
-
-type BorderRadiusSettingsType = {
-    id?: string;
-    dependentSettingId?: string;
-    defaultValue?: Radius;
-};
-
-export const getExtendedBorderRadiusSettings = (options?: BorderRadiusSettingsType): SettingBlock => {
-    const hasId = options?.id ? `hasExtendedCustomRadius_${options.id}` : 'hasExtendedCustomRadius';
-    const valueId = options?.id ? `extendedRadiusValue_${options.id}` : 'extendedRadiusValue';
-    const choiceId = options?.id ? `extendedRadiusChoice_${options.id}` : 'extendedRadiusChoice';
-    const topLeftId = options?.id ? `extendedRadiusTopLeft_${options.id}` : 'extendedRadiusTopLeft';
-    const topRightId = options?.id ? `extendedRadiusTopRight_${options.id}` : 'extendedRadiusTopRight';
-    const bottomLeftId = options?.id ? `extendedRadiusBottomLeft_${options.id}` : 'extendedRadiusBottomLeft';
-    const bottomRightId = options?.id ? `extendedRadiusBottomRight_${options.id}` : 'extendedRadiusBottomRight';
-
-    return {
-        id: hasId,
-        label: 'Corner radius',
-        type: 'switch',
-        switchLabel: 'Custom',
-        defaultValue: false,
-        info: 'Determining how rounded the corners are.',
-        show: (bundle) => (options?.dependentSettingId ? !!bundle.getBlock(options.dependentSettingId)?.value : true),
-        onChange: (bundle) => {
-            presetCustomValue(bundle, choiceId, topLeftId, radiusStyleMap);
-            presetCustomValue(bundle, choiceId, topRightId, radiusStyleMap);
-            presetCustomValue(bundle, choiceId, bottomLeftId, radiusStyleMap);
-            presetCustomValue(bundle, choiceId, bottomRightId, radiusStyleMap);
-        },
-        on: [
-            {
-                id: valueId,
-                type: 'multiInput',
-                layout: MultiInputLayout.Columns,
-                blocks: [
-                    {
-                        id: topLeftId,
-                        type: 'input',
-                        label: 'Top Left',
-                        rules: [numericalOrPixelRule],
-                        onChange: (bundle) => appendUnit(bundle, topLeftId),
-                    },
-                    {
-                        id: topRightId,
-                        type: 'input',
-                        label: 'Top Right',
-                        rules: [numericalOrPixelRule],
-                        onChange: (bundle) => appendUnit(bundle, topRightId),
-                    },
-                    {
-                        id: bottomLeftId,
-                        type: 'input',
-                        label: 'Bottom Left',
-                        rules: [numericalOrPixelRule],
-                        onChange: (bundle) => appendUnit(bundle, bottomLeftId),
-                    },
-                    {
-                        id: bottomRightId,
-                        type: 'input',
-                        label: 'Bottom Right',
-                        rules: [numericalOrPixelRule],
-                        onChange: (bundle) => appendUnit(bundle, bottomRightId),
-                    },
-                ],
-            },
-        ],
-        off: [getBorderRadiusSlider(choiceId, options?.defaultValue)],
-    };
-};

package/src/settings/defaultValues.ts

@@ -1,21 +0,0 @@
-/* (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

@@ -1,60 +0,0 @@
-/* (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

@@ -1,75 +0,0 @@
-/* (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

@@ -1,14 +0,0 @@
-/* (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

@@ -1,42 +0,0 @@
-/* (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');
-    });
-});