@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
284 lines • 11.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.INPUT_DROPDOWN_STYLES = void 0;
const inputTheme_1 = require("../../../../components/input/types/inputTheme");
const breakpoints_1 = require("../../../../types/breakpoints/breakpoints");
const borders_1 = require("../../foundations/borders");
const colors_1 = require("../../foundations/colors");
const sizes_1 = require("../../foundations/sizes");
const spacings_1 = require("../../foundations/spacings");
const typography_1 = require("../../foundations/typography");
const variants_1 = require("../actionBottomSheet/variants");
const variants_2 = require("../input/variants");
const variants_3 = require("../listOptions/variants");
const variants_4 = require("../option/variants");
const variants_5 = require("../popover/variants");
const variants_6 = require("../variants");
const variants_7 = require("./variants");
const commonProps = {
inputVariant: variants_2.InputVariantType.DEFAULT,
popoverVariant: {
[breakpoints_1.DeviceBreakpointsType.DESKTOP]: variants_5.PopoverVariantType.INPUT_DROPDOWN_DEFAULT,
[breakpoints_1.DeviceBreakpointsType.TABLET]: variants_5.PopoverVariantType.INPUT_DROPDOWN_DEFAULT,
[breakpoints_1.DeviceBreakpointsType.MOBILE]: variants_5.PopoverVariantType.INPUT_DROPDOWN_DEFAULT,
},
useActionBottomSheet: {
[breakpoints_1.DeviceBreakpointsType.DESKTOP]: false,
[breakpoints_1.DeviceBreakpointsType.TABLET]: true,
[breakpoints_1.DeviceBreakpointsType.MOBILE]: true,
},
actionBottomSheetVariant: variants_1.ActionBottomSheetVariantType.INPUT_DROPDOWN_DEFAULT,
searchListContainer: {
[breakpoints_1.DeviceBreakpointsType.DESKTOP]: {
background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
border_style: 'solid',
border_width: borders_1.BORDERS.border_100,
border_color: colors_1.COLORS.NEUTRAL.color_neutral_border_50,
margin_top: spacings_1.SPACINGS.spacing_100,
},
[breakpoints_1.DeviceBreakpointsType.TABLET]: {
background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
border_width: borders_1.BORDERS.border_00,
},
[breakpoints_1.DeviceBreakpointsType.MOBILE]: {
background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
border_width: borders_1.BORDERS.border_00,
},
},
inputContainer: {
opacity: '1',
background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
[breakpoints_1.DeviceBreakpointsType.DESKTOP]: {
input_padding_size: spacings_1.SPACINGS.spacing_0,
border_bottom: borders_1.BORDERS.border_00,
background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
margin_top: spacings_1.SPACINGS.spacing_100,
},
[breakpoints_1.DeviceBreakpointsType.TABLET]: {
input_padding_size: spacings_1.SPACINGS.spacing_300,
border_bottom: borders_1.BORDERS.border_00,
margin_top: spacings_1.SPACINGS.spacing_350,
border_bottom_color: 'black',
border_style: 'solid',
border_width: borders_1.BORDERS.border_50,
background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
},
[breakpoints_1.DeviceBreakpointsType.MOBILE]: {
input_padding_size: spacings_1.SPACINGS.spacing_300,
border_bottom: borders_1.BORDERS.border_00,
margin_top: spacings_1.SPACINGS.spacing_350,
border_bottom_color: 'black',
border_style: 'solid',
border_width: borders_1.BORDERS.border_50,
background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
},
},
noResultsTextContainer: {
padding: spacings_1.SPACINGS.spacing_300,
background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
},
noResultsText: {
font_variant: variants_6.TextVariantType.PARAGRAPH_MEDIUM_EXTENDED,
font_weight: typography_1.FONT_WEIGHT.font_weight_400,
color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
},
loadingText: {
font_variant: variants_6.TextVariantType.PARAGRAPH_MEDIUM_EXTENDED,
font_weight: typography_1.FONT_WEIGHT.font_weight_400,
color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
},
loaderExpandedContainer: {
background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
padding: `${spacings_1.SPACINGS.spacing_250} ${spacings_1.SPACINGS.spacing_300}`,
},
loaderContractedContainer: {
background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
padding_top: spacings_1.SPACINGS.spacing_600,
padding_bottom: spacings_1.SPACINGS.spacing_600,
gap: spacings_1.SPACINGS.spacing_150,
},
loader: {
variant: variants_6.LoaderVariantType.PRIMARY_RED,
width: sizes_1.SIZES.size_250,
},
};
const errorCommonProps = {
[breakpoints_1.DeviceBreakpointsType.DESKTOP]: {
...commonProps,
inputContainer: {
opacity: '1',
border_bottom_color: colors_1.COLORS.FEEDBACK.color_feedbackError_border_100,
},
},
};
const testCommonProps = {
...commonProps,
popoverVariant: {
[breakpoints_1.DeviceBreakpointsType.DESKTOP]: variants_5.PopoverVariantType.INPUT_DROPDOWN_LEVEL_ONE,
[breakpoints_1.DeviceBreakpointsType.TABLET]: variants_5.PopoverVariantType.INPUT_DROPDOWN_LEVEL_ONE,
[breakpoints_1.DeviceBreakpointsType.MOBILE]: variants_5.PopoverVariantType.INPUT_DROPDOWN_LEVEL_ONE,
},
useActionBottomSheet: {
[breakpoints_1.DeviceBreakpointsType.DESKTOP]: false,
[breakpoints_1.DeviceBreakpointsType.TABLET]: true,
[breakpoints_1.DeviceBreakpointsType.MOBILE]: true,
},
inputContainer: {
...commonProps.inputContainer,
padding: spacings_1.SPACINGS.spacing_100,
background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
border_width: borders_1.BORDERS.border_00,
},
searchListContainer: {
...commonProps.searchListContainer,
[breakpoints_1.DeviceBreakpointsType.DESKTOP]: {
border_width: borders_1.BORDERS.border_00,
background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
margin_top: spacings_1.SPACINGS.spacing_100,
},
},
};
exports.INPUT_DROPDOWN_STYLES = {
[variants_7.InputDropdownVariant.DEFAULT]: {
[inputTheme_1.InputState.EMPTY]: {
...commonProps,
allowSearch: false,
inputIcon: {
color: colors_1.COLORS.ACCENT.color_accent_default_icon_100,
},
},
[inputTheme_1.InputState.ACTIVE]: {
...commonProps,
allowSearch: false,
},
[inputTheme_1.InputState.FILLED]: {
...commonProps,
allowSearch: false,
inputIcon: {
color: colors_1.COLORS.ACCENT.color_accent_default_icon_100,
},
},
[inputTheme_1.InputState.ERROR_EMPTY]: {
...commonProps,
...errorCommonProps,
allowSearch: false,
},
[inputTheme_1.InputState.ERROR_FILLED]: {
...commonProps,
...errorCommonProps,
allowSearch: false,
},
[inputTheme_1.InputState.ERROR_ACTIVE]: {
...commonProps,
...errorCommonProps,
allowSearch: false,
},
[inputTheme_1.InputState.DISABLED_EMPTY]: {
...commonProps,
allowSearch: false,
},
[inputTheme_1.InputState.DISABLED_FILLED]: {
...commonProps,
allowSearch: false,
},
[inputTheme_1.InputState.DISABLED_FILLED_WITH_INFO]: {
...commonProps,
allowSearch: false,
},
listOptions: {
variant: variants_3.ListOptionsVariantType.INPUT_DROPDOWN_DEFAULT,
optionVariant: variants_4.OptionVariantType.INPUT_OPTION,
hightlightedOptionVariant: variants_4.OptionVariantType.INPUT_OPTION_HIGHTLIGHTED,
},
},
[variants_7.InputDropdownVariant.DEFAULT_SEARCH]: {
[inputTheme_1.InputState.EMPTY]: {
...commonProps,
allowSearch: true,
inputIcon: {
color: colors_1.COLORS.ACCENT.color_accent_default_icon_100,
},
},
[inputTheme_1.InputState.ACTIVE]: {
...commonProps,
allowSearch: true,
},
[inputTheme_1.InputState.FILLED]: {
...commonProps,
allowSearch: true,
inputIcon: {
color: colors_1.COLORS.ACCENT.color_accent_default_icon_100,
},
},
[inputTheme_1.InputState.ERROR_EMPTY]: {
...commonProps,
...errorCommonProps,
allowSearch: true,
},
[inputTheme_1.InputState.ERROR_FILLED]: {
...commonProps,
...errorCommonProps,
allowSearch: true,
},
[inputTheme_1.InputState.ERROR_ACTIVE]: {
...commonProps,
...errorCommonProps,
allowSearch: true,
},
[inputTheme_1.InputState.DISABLED_EMPTY]: {
...commonProps,
allowSearch: true,
},
[inputTheme_1.InputState.DISABLED_FILLED]: {
...commonProps,
allowSearch: true,
},
[inputTheme_1.InputState.DISABLED_FILLED_WITH_INFO]: {
...commonProps,
allowSearch: true,
},
listOptions: {
variant: variants_3.ListOptionsVariantType.INPUT_DROPDOWN_DEFAULT,
optionVariant: variants_4.OptionVariantType.INPUT_OPTION,
hightlightedOptionVariant: variants_4.OptionVariantType.INPUT_OPTION_HIGHTLIGHTED,
},
},
[variants_7.InputDropdownVariant.TEST]: {
[inputTheme_1.InputState.EMPTY]: {
...testCommonProps,
},
[inputTheme_1.InputState.ACTIVE]: {
...testCommonProps,
},
[inputTheme_1.InputState.FILLED]: {
...testCommonProps,
},
[inputTheme_1.InputState.ERROR_EMPTY]: {
...testCommonProps,
...errorCommonProps,
},
[inputTheme_1.InputState.ERROR_FILLED]: {
...testCommonProps,
...errorCommonProps,
},
[inputTheme_1.InputState.ERROR_ACTIVE]: {
...testCommonProps,
...errorCommonProps,
},
[inputTheme_1.InputState.DISABLED_EMPTY]: {
...testCommonProps,
},
[inputTheme_1.InputState.DISABLED_FILLED]: {
...testCommonProps,
},
[inputTheme_1.InputState.DISABLED_FILLED_WITH_INFO]: {
...testCommonProps,
},
listOptions: {
variant: variants_3.ListOptionsVariantType.INPUT_DROPDOWN_SECTION,
optionVariant: variants_4.OptionVariantType.INPUT_DROPDOWN,
hightlightedOptionVariant: variants_4.OptionVariantType.INPUT_DROPDOWN,
},
},
};
//# sourceMappingURL=styles.js.map