@frontify/guideline-blocks-settings 0.33.4 → 0.34.0

package/src/settings/securityDownloadable.ts

@@ -1,33 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { SettingBlock } from '..';
-import { Security } from './types';
-
-/**
- * Returns the downloadable security settings.
- *
- * @param {string} id custom id for the setting block
- * @param {string} globalControlId custom id for the global control setting block
- *
- * @returns {SettingBlock} Returns downloadable security settings.
- */
-
-type SecurityDownloadableSettingType = {
-    id?: string;
-    globalControlId?: string;
-};
-
-export const getSecurityDownloadableSetting = (options?: SecurityDownloadableSettingType): SettingBlock => {
-    const securityId = getSecurityGlobalControlId(options?.globalControlId);
-    return {
-        id: options?.id ? options.id : 'downloadable',
-        type: 'switch',
-        defaultValue: false,
-        label: 'Downloadable',
-        show: (bundle) => bundle.getBlock(securityId)?.value === Security.Custom,
-    };
-};
-
-export const getSecurityGlobalControlId = (id?: string): string => {
-    return id || 'security';
-};

package/src/settings/securityGlobalControl.ts

@@ -1,42 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { SettingBlock, createFooter } from '..';
-import { Security } from './types';
-import { getSecurityGlobalControlId } from './securityDownloadable';
-
-/**
- * Returns segment controls for global security settings.
- *
- * @param {string} id custom id for the setting block
- *
- * @returns {SettingBlock} Returns
- */
-
-export const getSecurityGlobalControlSetting = (id?: string): SettingBlock[] => {
-    const securityId = getSecurityGlobalControlId(id);
-    return [
-        {
-            id: securityId,
-            type: 'segmentedControls',
-            defaultValue: Security.Global,
-            choices: [
-                {
-                    value: Security.Global,
-                    label: 'Global Settings',
-                },
-                {
-                    value: Security.Custom,
-                    label: 'Custom',
-                },
-            ],
-        },
-        {
-            id: 'globalSettingsInfo',
-            type: 'notification',
-            footer: createFooter({
-                label: 'Change global settings [here].',
-                replace: { here: { event: 'general-settings.open' } },
-            }),
-        },
-    ];
-};

package/src/settings/types.ts

@@ -1,128 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { Color } from '@frontify/sidebar-settings';
-
-export enum BorderStyle {
-    Solid = 'Solid',
-    Dashed = 'Dashed',
-    Dotted = 'Dotted',
-}
-
-export const borderStyleMap: Record<BorderStyle, string> = {
-    [BorderStyle.Solid]: 'solid',
-    [BorderStyle.Dotted]: 'dotted',
-    [BorderStyle.Dashed]: 'dashed',
-};
-
-export enum Radius {
-    None = 'None',
-    Small = 'Small',
-    Medium = 'Medium',
-    Large = 'Large',
-}
-
-export const radiusStyleMap: Record<Radius, string> = {
-    [Radius.None]: '0px',
-    [Radius.Small]: '2px',
-    [Radius.Medium]: '4px',
-    [Radius.Large]: '12px',
-};
-
-export enum Padding {
-    None = 'None',
-    Small = 'Small',
-    Medium = 'Medium',
-    Large = 'Large',
-}
-
-export const paddingStyleMap: Record<Padding, string> = {
-    [Padding.None]: '0px',
-    [Padding.Small]: '24px',
-    [Padding.Medium]: '36px',
-    [Padding.Large]: '60px',
-};
-
-export type PaddingSettings = {
-    paddingChoice: Padding;
-    hasCustomPaddingValue: boolean;
-    paddingValue: string;
-};
-
-export type PaddingExtendedSettings = {
-    hasExtendedCustomPadding: boolean;
-    extendedPaddingChoice: Padding;
-    extendedPaddingTop: string;
-    extendedPaddingRight: string;
-    extendedPaddingBottom: string;
-    extendedPaddingLeft: string;
-};
-
-export type RadiusExtendedSettings = {
-    hasExtendedCustomRadius: boolean;
-    extendedRadiusChoice: Radius;
-    extendedRadiusTopLeft: string;
-    extendedRadiusTopRight: string;
-    extendedRadiusBottomLeft: string;
-    extendedRadiusBottomRight: string;
-};
-
-export type BorderSettings = {
-    hasBorder: boolean;
-    borderStyle: BorderStyle;
-    borderWidth: string;
-    borderColor: Color;
-};
-
-export type RadiusSettings = {
-    hasRadius: boolean;
-    radiusValue: string;
-    radiusChoice: Radius;
-};
-
-export enum Margin {
-    None = 'None',
-    Small = 'Small',
-    Medium = 'Medium',
-    Large = 'Large',
-}
-
-export const marginStyleMap: Record<Margin, string> = {
-    [Margin.None]: '0px',
-    [Margin.Small]: '24px',
-    [Margin.Medium]: '36px',
-    [Margin.Large]: '60px',
-};
-
-export type MarginSettings = {
-    marginChoice: Margin;
-    hasCustomMarginValue: boolean;
-    marginValue: string;
-};
-
-export type MarginExtendedSettings = {
-    hasExtendedCustomMargin: boolean;
-    extendedMarginChoice: Margin;
-    extendedMarginTop: string;
-    extendedMarginRight: string;
-    extendedMarginBottom: string;
-    extendedMarginLeft: string;
-};
-
-export enum Security {
-    Global = 'Global',
-    Custom = 'Custom',
-}
-
-export enum GutterSpacing {
-    Auto = 'Auto',
-    S = 'S',
-    M = 'M',
-    L = 'L',
-}
-
-export const gutterSpacingStyleMap: Record<GutterSpacing, string> = {
-    [GutterSpacing.Auto]: '4px',
-    [GutterSpacing.S]: '10px',
-    [GutterSpacing.M]: '30px',
-    [GutterSpacing.L]: '50px',
-};

package/src/styles.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/src/utilities/color/getReadableColor.spec.ts

@@ -1,32 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { readability } from '@ctrl/tinycolor';
-import { describe, expect, test } from 'vitest';
-import { getReadableColor } from './getReadableColor';
-
-describe('getReadableColor', () => {
-    const data = [
-        {
-            textColor: { r: 255, g: 255, b: 255 },
-            backgroundColor: { r: 0, g: 0, b: 0 },
-        },
-        {
-            textColor: { r: 255, g: 255, b: 255 },
-            backgroundColor: { r: 255, g: 255, b: 255 },
-        },
-        {
-            textColor: { r: 230, g: 230, b: 0 },
-            backgroundColor: { r: 229, g: 229, b: 10 },
-        },
-        {
-            textColor: { r: 120, g: 120, b: 120 },
-            backgroundColor: { r: 120, g: 120, b: 120, a: 0.1 },
-        },
-    ];
-
-    test.each(data)('validates against expected values', ({ textColor, backgroundColor }) => {
-        const result = getReadableColor(textColor, backgroundColor);
-        const colorReadability = readability(result, backgroundColor);
-        expect(colorReadability).toBeGreaterThan(4.5);
-    });
-});

package/src/utilities/color/getReadableColor.ts

@@ -1,34 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { ColorInput, TinyColor, readability } from '@ctrl/tinycolor';
-import { toShortRgba } from './toShortRgba';
-import { Color } from '@frontify/sidebar-settings';
-
-/**
- * Returns darkened text color for a given background color, so that it is readable and has enough contrast (above 4.5)
- *
- * @param {Object} textColor Object of RGBA values
- * @param {Object} backgroundColor Object of RGBA values
- * @returns {string} To be used as css value
- */
-
-const isRgbaLongFormat = (value: unknown): value is Color => {
-    const requiredKeys = ['red', 'green', 'blue'];
-    return typeof value === 'object' && requiredKeys.every((i) => value?.hasOwnProperty(i));
-};
-
-export const getReadableColor = (textColor: unknown, backgroundColor: unknown): string => {
-    const inputTextColor = isRgbaLongFormat(textColor) ? toShortRgba(textColor) : (textColor as ColorInput);
-    const inputBackgroundColor = isRgbaLongFormat(backgroundColor)
-        ? toShortRgba(backgroundColor)
-        : (backgroundColor as ColorInput);
-    let parsedTextColor = new TinyColor(inputTextColor);
-    const parsedBackgroundColor = new TinyColor(inputBackgroundColor);
-
-    //darken the text color until readability is good
-    while (readability(parsedTextColor, parsedBackgroundColor) < 4.5) {
-        parsedTextColor = parsedTextColor.darken(1);
-    }
-
-    return parsedTextColor.toRgbString();
-};

package/src/utilities/color/index.ts

@@ -1,10 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-export * from './isDark';
-export * from './toHex8String';
-export * from './toHexString';
-export * from './toRgbaString';
-export * from './setAlpha';
-export * from './toColorObject';
-export * from './getReadableColor';
-export * from './toShortRgba';

package/src/utilities/color/isDark.spec.ts

@@ -1,33 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { isDark } from './isDark';
-import { describe, expect, test } from 'vitest';
-
-describe('isDark', () => {
-    const data = [
-        { color: { red: 0, green: 0, blue: 0 }, expected: true },
-        { color: { red: 255, green: 255, blue: 255 }, expected: false },
-        { color: { red: 130, green: 95, blue: 255 }, expected: true },
-        { color: '#000000', expected: true },
-        { color: '#FFFFFF', expected: false },
-        { color: 'rgb(0,0,0)', expected: true },
-        { color: 'rgb(255,255,255)', expected: false },
-    ];
-
-    test.each(data)('validate values correctly', ({ color, expected }) => {
-        expect(isDark(color)).toBe(expected);
-    });
-});
-
-describe('isDark with custom threshold', () => {
-    const data = [
-        { color: { red: 0, green: 0, blue: 0 }, threshold: 150, expected: true },
-        { color: { red: 255, green: 102, blue: 0 }, threshold: 150, expected: true },
-        { color: { red: 255, green: 147, blue: 73 }, threshold: 171, expected: true },
-        { color: { red: 255, green: 255, blue: 255 }, threshold: 150, expected: false },
-    ];
-
-    test.each(data)('validate values correctly', ({ color, threshold, expected }) => {
-        expect(isDark(color, threshold)).toBe(expected);
-    });
-});

package/src/utilities/color/isDark.ts

@@ -1,29 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { ColorInput, TinyColor } from '@ctrl/tinycolor';
-import { toShortRgba } from './toShortRgba';
-import { Color } from '@frontify/sidebar-settings';
-
-/**
- * Calculates if text should be in a light color depending on color (e.g. background-color)
- *
- * @param {Object} value Object of RGBA values
- * @param {Number|undefined} threshold Threshold for the brightness
- * @returns {Boolean} Return if the color is dark
- */
-
-const isRgbaLongFormat = (value: unknown): value is Color => {
-    const requiredKeys = ['red', 'green', 'blue'];
-    return typeof value === 'object' && requiredKeys.every((i) => value?.hasOwnProperty(i));
-};
-
-export const isDark = (color: unknown, threshold?: number): boolean => {
-    const inputColor = isRgbaLongFormat(color) ? toShortRgba(color) : (color as ColorInput);
-    const parsedColor = new TinyColor(inputColor);
-
-    if (threshold) {
-        return parsedColor.getBrightness() < threshold;
-    }
-
-    return parsedColor.isDark() || (parsedColor.getAlpha() > 0.25 && parsedColor.getAlpha() < 1);
-};

package/src/utilities/color/setAlpha.spec.ts

@@ -1,28 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { setAlpha } from './setAlpha';
-import { describe, expect, test } from 'vitest';
-
-describe('setAlpha', () => {
-    const data = [
-        {
-            color: 'rgba(255, 255, 255, 0.1)',
-            alpha: 1,
-            expected: 'rgb(255, 255, 255)',
-        },
-        {
-            color: 'rgb(255, 255, 255)',
-            alpha: 0.9,
-            expected: 'rgba(255, 255, 255, 0.9)',
-        },
-        {
-            color: '#00000',
-            alpha: 0.9,
-            expected: 'rgba(0, 0, 0, 0.9)',
-        },
-    ];
-
-    test.each(data)('validates against expected values', ({ color, alpha, expected }) => {
-        expect(setAlpha(alpha, color)).toBe(expected);
-    });
-});

package/src/utilities/color/setAlpha.ts

@@ -1,14 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { TinyColor } from '@ctrl/tinycolor';
-
-/**
- * Sets alpha value and returns rgba string.
- *
- * @param {string} color Rgb or hex string.
- * @returns {String} To be used as css value.
- */
-
-export const setAlpha = (alpha: number, color?: string): string => {
-    return new TinyColor(color).setAlpha(alpha).toRgbString();
-};

package/src/utilities/color/toColorObject.spec.ts

@@ -1,19 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { describe, expect, test } from 'vitest';
-import { toColorObject } from './toColorObject';
-
-describe('toColorObject', () => {
-    const data = [
-        { expected: { red: 255, green: 255, blue: 255, alpha: 1 }, color: '#ffffffff' },
-        { expected: { red: 255, green: 221, blue: 255, alpha: 1 }, color: '#ffddffff' },
-        { expected: { red: 255, green: 255, blue: 15, alpha: 0 }, color: '#ffff0f00' },
-        { expected: { red: 238, green: 35, blue: 84, alpha: 0.4 }, color: '#ee235466' },
-        { expected: { red: 255, green: 0, blue: 0, alpha: 1 }, color: 'rgb(255,0,0)' },
-        { expected: { red: 255, green: 0, blue: 0, alpha: 0.5 }, color: 'rgba(255,0,0,0.5)' },
-    ];
-
-    test.each(data)('validates against expected values', ({ color, expected }) => {
-        expect(toColorObject(color)).toEqual(expected);
-    });
-});

package/src/utilities/color/toColorObject.ts

@@ -1,16 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { Color } from '@frontify/fondue';
-import { TinyColor } from '@ctrl/tinycolor';
-
-/**
- * Maps color strings to color objects.
- *
- * @param {String} String representing color
- * @returns {Color} Color object
- */
-
-export const toColorObject = (colorString: string): Color => {
-    const { r, g, b, a } = new TinyColor(colorString);
-    return { red: r, green: g, blue: b, alpha: a };
-};

package/src/utilities/color/toHex8String.spec.ts

@@ -1,17 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { toHex8String } from './toHex8String';
-import { describe, expect, test } from 'vitest';
-
-describe('toHex8String', () => {
-    const data = [
-        { color: { red: 255, green: 255, blue: 255 }, expected: '#ffffffff' },
-        { color: { red: 255, green: 221, blue: 255, alpha: 1 }, expected: '#ffddffff' },
-        { color: { red: 255, green: 255, blue: 15, alpha: 0 }, expected: '#ffff0f00' },
-        { color: { red: 238, green: 35, blue: 84, alpha: 0.4 }, expected: '#ee235466' },
-    ];
-
-    test.each(data)('validates against expected values', ({ color, expected }) => {
-        expect(toHex8String(color)).toBe(expected);
-    });
-});

package/src/utilities/color/toHex8String.ts

@@ -1,14 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { Color } from '@frontify/fondue';
-import { TinyColor } from '@ctrl/tinycolor';
-import { toShortRgba } from './toShortRgba';
-
-/**
- * Maps color object of rgba values to hex alpha string.
- *
- * @param {Object} Color object
- * @returns {String} To be used as css value.
- */
-
-export const toHex8String = (color: Color): string => new TinyColor(toShortRgba(color)).toHex8String();

package/src/utilities/color/toHexString.spec.ts

@@ -1,17 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { toHexString } from './toHexString';
-import { describe, expect, test } from 'vitest';
-
-describe('toHexString', () => {
-    const data = [
-        { color: { red: 255, green: 255, blue: 255 }, expected: '#ffffff' },
-        { color: { red: 255, green: 221, blue: 255 }, expected: '#ffddff' },
-        { color: { red: 255, green: 255, blue: 15 }, expected: '#ffff0f' },
-        { color: { red: 238, green: 35, blue: 84 }, expected: '#ee2354' },
-    ];
-
-    test.each(data)('validates against expected values', ({ color, expected }) => {
-        expect(toHexString(color)).toBe(expected);
-    });
-});

package/src/utilities/color/toHexString.ts

@@ -1,10 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { Color } from '@frontify/fondue';
-import { TinyColor } from '@ctrl/tinycolor';
-import { toShortRgba } from './toShortRgba';
-
-/**
- * Maps color object of rgba values to hex alpha string.
- */
-export const toHexString = (color: Color): string => new TinyColor(toShortRgba(color)).toHexString();

package/src/utilities/color/toRgbaString.spec.ts

@@ -1,12 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { toRgbaString } from './toRgbaString';
-import { describe, expect, test } from 'vitest';
-
-describe('toRgbaString', () => {
-    const data = [{ color: { red: 1, green: 2, blue: 3, alpha: 0.5 }, expected: 'rgba(1, 2, 3, 0.5)' }];
-
-    test.each(data)('validates against expected values', ({ color, expected }) => {
-        expect(toRgbaString(color)).toBe(expected);
-    });
-});

package/src/utilities/color/toRgbaString.ts

@@ -1,14 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { Color } from '@frontify/fondue';
-import { TinyColor } from '@ctrl/tinycolor';
-import { toShortRgba } from './toShortRgba';
-
-/**
- * Maps color object of rgba values to rgba string.
- *
- * @param {Object} Color object
- * @returns {String} To be used as css value.
- */
-
-export const toRgbaString = (color: Color): string => new TinyColor(toShortRgba(color)).toRgbString();

package/src/utilities/color/toShortRgba.spec.ts

@@ -1,16 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { toShortRgba } from './toShortRgba';
-import { describe, expect, test } from 'vitest';
-
-describe('toShortRgba', () => {
-    const data = [
-        { color: { red: 50, green: 100, blue: 150 }, expected: { r: 50, g: 100, b: 150, a: 1 } },
-        { color: { red: 50, green: 100, blue: 150, alpha: 0.5 }, expected: { r: 50, g: 100, b: 150, a: 0.5 } },
-        { color: { r: 50, g: 100, b: 150, a: 0.5 }, expected: { r: 50, g: 100, b: 150, a: 0.5 } },
-    ];
-
-    test.each(data)('validates against expected values', ({ color, expected }) => {
-        expect(toShortRgba(color)).toStrictEqual(expected);
-    });
-});

package/src/utilities/color/toShortRgba.ts

@@ -1,35 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { Color } from '@frontify/fondue';
-
-type ShortNotationColor = {
-    r: number;
-    g: number;
-    b: number;
-    a?: number;
-};
-
-/**
- * Maps color object from long to short rgba notation.
- *
- * @param {Object} Color object
- * @returns {Object} ShortNotationColor object
- */
-
-export const toShortRgba = (color: unknown): ShortNotationColor => {
-    const isRgbaLongFormat = (value: Color) => {
-        const requiredKeys = ['red', 'green', 'blue'];
-        return typeof value === 'object' && requiredKeys.every((i) => value.hasOwnProperty(i));
-    };
-
-    const mapToShortFormat = (value: Color): ShortNotationColor => {
-        const alpha = typeof value.alpha === 'number' ? value.alpha : 1;
-        return { r: value.red, g: value.green, b: value.blue, a: alpha };
-    };
-
-    if (isRgbaLongFormat(color as Color)) {
-        return mapToShortFormat(color as Color);
-    }
-
-    return color as ShortNotationColor;
-};

package/src/utilities/index.ts

@@ -1,5 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-export * from './color';
-export * from './moveItemInArray';
-export * from './react';

package/src/utilities/moveItemInArray.spec.ts

@@ -1,17 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { describe, expect, it } from 'vitest';
-import { moveItemInArray } from './moveItemInArray';
-
-describe('moveItemInArray', () => {
-    it.each([
-        [[], 0, 0, []],
-        [[1, 2, 3], 0, 0, [1, 2, 3]],
-        [[1, 2, 3], 0, 1, [2, 1, 3]],
-        [[1, 2, 3], 1, 0, [2, 1, 3]],
-        [[1, { a: 1 }, 3], 1, 0, [{ a: 1 }, 1, 3]],
-        [[{ a: 1 }, { b: 1 }, { c: 1 }], 1, 0, [{ b: 1 }, { a: 1 }, { c: 1 }]],
-    ])('move items accordingly', (items, from, to, expected) => {
-        expect(expected).toEqual(moveItemInArray(items as number[], from, to));
-    });
-});

package/src/utilities/moveItemInArray.ts

@@ -1,21 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-/**
- * Moves an item from the 'from' position to the 'to' position and updates the array
- *
- * @param {Array} array Array of items
- * @param {Number} from Initial index of the item
- * @param {Number} to New index of the item
- * @returns {Array} New array with the item moved to the new position
- */
-export const moveItemInArray = <T>(array: T[], from: number, to: number): T[] => {
-    const newArray = [...array];
-    const toIndex = to < 0 ? newArray.length + to : to;
-
-    if (toIndex >= 0 && toIndex < newArray.length) {
-        const slice = newArray.splice(from, 1)[0];
-        newArray.splice(toIndex, 0, slice);
-    }
-
-    return newArray;
-};

package/src/utilities/react/getBackgroundColorStyles.spec.ts

@@ -1,18 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { getBackgroundColorStyles } from './getBackgroundColorStyles';
-import { describe, expect, it } from 'vitest';
-
-describe('getBackgroundColorStyles', () => {
-    it('should return a rgba background color', () => {
-        expect(getBackgroundColorStyles({ red: 0, green: 0, blue: 0, alpha: 0.5 })).toEqual({
-            backgroundColor: 'rgba(0, 0, 0, 0.5)',
-        });
-    });
-
-    it('should return a rgb background color', () => {
-        expect(getBackgroundColorStyles({ red: 255, green: 255, blue: 255 })).toEqual({
-            backgroundColor: 'rgb(255, 255, 255)',
-        });
-    });
-});

package/src/utilities/react/getBackgroundColorStyles.ts

@@ -1,10 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import type { CSSProperties } from 'react';
-import type { Color } from '@frontify/fondue';
-
-import { toRgbaString } from '../color';
-
-export const getBackgroundColorStyles = (backgroundColor: Color): CSSProperties => ({
-    backgroundColor: toRgbaString(backgroundColor),
-});