@brizy/ui/es/Typography/utils.js

React elements in Brizy style

import { classNames } from "../classNamesFn";
import { getHexByColorType } from "../utils/colors";
import { BRZ_PREFIX } from "../constants";
export const getAlign = (align) => {
    const aligns = Array.isArray(align) ? align : [align];
    const className = aligns.map((align, key) => {
        const device = key === 0 ? "dsk" : key === 1 ? "tbl" : "mbl";
        switch (align) {
            case "left":
                return `${BRZ_PREFIX}-typography-${device}-al-lf`;
            case "center":
                return `${BRZ_PREFIX}-typography-${device}-al-ct`;
            case "right":
                return `${BRZ_PREFIX}-typography-${device}-al-rt`;
            default:
                return "";
        }
    });
    return classNames(className)();
};
export const getFontSize = (size) => {
    const fontSizes = Array.isArray(size) ? size : [size];
    const className = fontSizes.map((size, key) => {
        const device = key === 0 ? "dsk" : key === 1 ? "tbl" : "mbl";
        switch (size) {
            case "xsmall":
                return `${BRZ_PREFIX}-typography-${device}-size-xsm`;
            case "small":
                return `${BRZ_PREFIX}-typography-${device}-size-sm`;
            case "middle":
                return `${BRZ_PREFIX}-typography-${device}-size-md`;
            case "large":
                return `${BRZ_PREFIX}-typography-${device}-size-lg`;
            case "xlarge":
                return `${BRZ_PREFIX}-typography-${device}-size-xlg`;
            case "xxlarge":
                return `${BRZ_PREFIX}-typography-${device}-size-xxlg`;
            default:
                return "";
        }
    });
    return classNames(className)();
};
export const getTypographyParagraphColor = (color, hoverColor) => {
    if (color || hoverColor) {
        const fontColor = color ? { [`--${BRZ_PREFIX}-typography-paragraph-color`]: getHexByColorType(color) } : {};
        const colorOnHover = hoverColor
            ? { [`--${BRZ_PREFIX}-typography-paragraph-hover-color`]: getHexByColorType(hoverColor) }
            : {};
        return Object.assign(Object.assign({}, fontColor), colorOnHover);
    }
};
export const getTypographyLinkColor = (color, hoverColor) => {
    if (color || hoverColor) {
        const fontColor = color ? { [`--${BRZ_PREFIX}-typography-link-color`]: getHexByColorType(color) } : {};
        const colorOnHover = hoverColor
            ? { [`--${BRZ_PREFIX}-typography-link-hover-color`]: getHexByColorType(hoverColor) }
            : {};
        return Object.assign(Object.assign({}, fontColor), colorOnHover);
    }
};
export const getTypographyTextColor = (color, hoverColor) => {
    if (color || hoverColor) {
        const fontColor = color ? { [`--${BRZ_PREFIX}-typography-text-color`]: getHexByColorType(color) } : {};
        const colorOnHover = hoverColor
            ? { [`--${BRZ_PREFIX}-typography-text-hover-color`]: getHexByColorType(hoverColor) }
            : {};
        return Object.assign(Object.assign({}, fontColor), colorOnHover);
    }
};
export const getTypographyTitleColor = (color, hoverColor) => {
    if (color || hoverColor) {
        const fontColor = color ? { [`--${BRZ_PREFIX}-typography-title-color`]: getHexByColorType(color) } : {};
        const colorOnHover = hoverColor
            ? { [`--${BRZ_PREFIX}-typography-title-hover-color`]: getHexByColorType(hoverColor) }
            : {};
        return Object.assign(Object.assign({}, fontColor), colorOnHover);
    }
};
export const getItalic = (isItalic) => {
    return isItalic ? `${BRZ_PREFIX}-typography__italic` : undefined;
};