@frontify/guideline-blocks-settings 0.27.0 → 0.28.0

package/src/settings/security.spec.ts

@@ -0,0 +1,87 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { describe, expect, it } from 'vitest';
+import { getSecurityDownloadableSetting, getSecurityGlobalControlSetting } from './security';
+import { Security } from './types';
+
+describe('getSecurityGlobalControlSetting', () => {
+    it('should return global control setting without id', () => {
+        expect(getSecurityGlobalControlSetting()).toEqual({
+            id: 'security',
+            type: 'segmentedControls',
+            defaultValue: Security.Global,
+            helperText: 'Change global settings here.',
+            choices: [
+                {
+                    value: Security.Global,
+                    label: 'Global Settings',
+                },
+                {
+                    value: Security.Custom,
+                    label: 'Custom',
+                },
+            ],
+        });
+    });
+
+    it('should return global control setting with custom id', () => {
+        expect(getSecurityGlobalControlSetting('customId')).toEqual({
+            id: 'customId',
+            type: 'segmentedControls',
+            defaultValue: Security.Global,
+            helperText: 'Change global settings here.',
+            choices: [
+                {
+                    value: Security.Global,
+                    label: 'Global Settings',
+                },
+                {
+                    value: Security.Custom,
+                    label: 'Custom',
+                },
+            ],
+        });
+    });
+});
+
+describe('getSecurityDownloadableSetting', () => {
+    it('should return downloadable setting without arguments', () => {
+        expect(getSecurityDownloadableSetting()).toEqual({
+            id: 'downloadable',
+            type: 'switch',
+            defaultValue: false,
+            label: 'Downloadable',
+            show: expect.any(Function),
+        });
+    });
+
+    it('should return downloadable setting with custom id', () => {
+        expect(getSecurityDownloadableSetting({ id: 'customId' })).toEqual({
+            id: 'customId',
+            type: 'switch',
+            defaultValue: false,
+            label: 'Downloadable',
+            show: expect.any(Function),
+        });
+    });
+
+    it('should return downloadable setting with custom global control id', () => {
+        expect(getSecurityDownloadableSetting({ globalControlId: 'globalCustomId' })).toEqual({
+            id: 'downloadable',
+            type: 'switch',
+            defaultValue: false,
+            label: 'Downloadable',
+            show: expect.any(Function),
+        });
+    });
+
+    it('should return downloadable setting with custom id and global control id', () => {
+        expect(getSecurityDownloadableSetting({ id: 'customId', globalControlId: 'globalCustomId' })).toEqual({
+            id: 'customId',
+            type: 'switch',
+            defaultValue: false,
+            label: 'Downloadable',
+            show: expect.any(Function),
+        });
+    });
+});

package/src/settings/security.ts

@@ -0,0 +1,61 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { SettingBlock } from '../';
+import { Security } from './types';
+
+/**
+ * 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,
+        helperText: 'Change global settings here.',
+        choices: [
+            {
+                value: Security.Global,
+                label: 'Global Settings',
+            },
+            {
+                value: Security.Custom,
+                label: 'Custom',
+            },
+        ],
+    };
+};
+
+/**
+ * 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,
+    };
+};
+
+const getSecurityGlobalControlId = (id?: string): string => {
+    return id ? id : 'security';
+};

package/src/settings/securityDownloadable.spec.ts

@@ -0,0 +1,46 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { describe, expect, it } from 'vitest';
+import { getSecurityDownloadableSetting } from './securityDownloadable';
+
+describe('getSecurityDownloadableSetting', () => {
+    it('should return downloadable setting without arguments', () => {
+        expect(getSecurityDownloadableSetting()).toEqual({
+            id: 'downloadable',
+            type: 'switch',
+            defaultValue: false,
+            label: 'Downloadable',
+            show: expect.any(Function),
+        });
+    });
+
+    it('should return downloadable setting with custom id', () => {
+        expect(getSecurityDownloadableSetting({ id: 'customId' })).toEqual({
+            id: 'customId',
+            type: 'switch',
+            defaultValue: false,
+            label: 'Downloadable',
+            show: expect.any(Function),
+        });
+    });
+
+    it('should return downloadable setting with custom global control id', () => {
+        expect(getSecurityDownloadableSetting({ globalControlId: 'globalCustomId' })).toEqual({
+            id: 'downloadable',
+            type: 'switch',
+            defaultValue: false,
+            label: 'Downloadable',
+            show: expect.any(Function),
+        });
+    });
+
+    it('should return downloadable setting with custom id and global control id', () => {
+        expect(getSecurityDownloadableSetting({ id: 'customId', globalControlId: 'globalCustomId' })).toEqual({
+            id: 'customId',
+            type: 'switch',
+            defaultValue: false,
+            label: 'Downloadable',
+            show: expect.any(Function),
+        });
+    });
+});

package/src/settings/securityDownloadable.ts

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

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

@@ -0,0 +1,128 @@
+/* (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/utilities/color/getReadableColor.spec.ts

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

@@ -0,0 +1,34 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import tinycolor, { ColorInput, 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 = tinycolor(inputTextColor);
+    const parsedBackgroundColor = 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

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

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

@@ -0,0 +1,29 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import tinycolor, { ColorInput } 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 = 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

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

@@ -0,0 +1,14 @@
+/* (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 tinycolor(color).setAlpha(alpha).toRgbString();
+};

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

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

@@ -0,0 +1,16 @@
+/* (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 } = tinycolor(colorString);
+    return { red: r, green: g, blue: b, alpha: a };
+};

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

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

@@ -0,0 +1,14 @@
+/* (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 => tinycolor(toShortRgba(color)).toHex8String();

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

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