@naturacosmeticos/natds-react
Version:
A collection of components from Natura Design System for React
253 lines • 12.1 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
/* eslint-disable max-lines */
/* eslint-disable complexity */
/* eslint-disable max-lines-per-function */
/* eslint-disable max-len */
var react_jss_1 = require("react-jss");
var ThemeProvider_1 = require("../../ThemeProvider");
var getPaddingStyles = function (theme) { return function (_a) {
var size = _a.size, brand = _a.brand, mode = _a.mode;
var brandTheme = (0, ThemeProvider_1.buildTheme)(brand, mode);
var padding = {
semi: theme.button.paddingX,
medium: theme.button.paddingX,
semiX: theme.button.paddingX
};
var paddingbrand = {
semi: brandTheme.button.paddingX,
medium: brandTheme.button.paddingX,
semiX: brandTheme.button.paddingX
};
if (brand) {
return size && paddingbrand[size];
}
return size && padding[size];
}; };
var getColorBrand = function (theme) { return function (brand, _a) {
var variant = _a.variant, color = _a.color, mode = _a.mode;
var colorTheme = (0, ThemeProvider_1.buildTheme)(brand, mode);
var propBrandsColor = {};
if (variant && color) {
propBrandsColor = {
back: colorTheme.button[variant].color[color].background,
border: colorTheme.button[variant].color[color].border,
color: colorTheme.button[variant].color[color].label,
hover: {
back: colorTheme.button[variant].color.hover[color].background,
boder: colorTheme.button[variant].color.hover[color].border,
label: colorTheme.button[variant].color.hover[color].label
},
focus: {
back: colorTheme.button[variant].color.focus[color].background,
boder: colorTheme.button[variant].color.focus[color].border,
label: colorTheme.button[variant].color.focus[color].label
}
};
}
if (brand) {
return __assign({}, propBrandsColor);
}
return variant && color && {
back: theme.button[variant].color[color].background,
border: theme.button[variant].color[color].border,
color: theme.button[variant].color[color].label,
hover: {
back: theme.button[variant].color.hover[color].background,
boder: theme.button[variant].color.hover[color].border,
label: theme.button[variant].color.hover[color].label
},
focus: {
back: theme.button[variant].color.focus[color].background,
boder: theme.button[variant].color.focus[color].border,
label: theme.button[variant].color.focus[color].label
}
};
}; };
var getLabelMargin = function (theme, side) { return function (_a) {
var showIcon = _a.showIcon, iconPosition = _a.iconPosition;
return (showIcon && iconPosition === side && theme.size.tiny);
}; };
var getIconPosition = function () { return function (_a) {
var showIcon = _a.showIcon, iconPosition = _a.iconPosition;
return (showIcon && iconPosition === 'right' ? 'row' : 'row-reverse');
}; };
var getletterSpacing = function (theme) { return function (_a) {
var textTransform = _a.textTransform;
if (textTransform === 'capitalize' || textTransform === 'lowercase') {
return 1;
}
return theme.button.label.letterSpacing;
}; };
var getTextTransform = function (theme) { return function (_a) {
var brand = _a.brand, mode = _a.mode;
var brandTheme = (0, ThemeProvider_1.buildTheme)(brand, mode);
if (brand) {
return brandTheme.button.textTransform;
}
return theme.button.textTransform;
}; };
var getPropsThemeButton = function (theme) { return function (_a) {
var brand = _a.brand;
if (brand) {
var themeSelectdRipple = (0, ThemeProvider_1.buildTheme)(brand, 'light');
return {
buttonborderRadius: themeSelectdRipple.button.borderRadius
};
}
return {
buttonborderRadius: theme.button.borderRadius
};
}; };
var styles = (0, react_jss_1.createUseStyles)(function (theme) { return ({
gayaButton: {
backgroundColor: function (_a) {
var _b;
var variant = _a.variant, brand = _a.brand, color = _a.color, mode = _a.mode;
return variant && ((_b = getColorBrand(theme)(brand, { variant: variant, color: color, mode: mode })) === null || _b === void 0 ? void 0 : _b.back);
},
border: function (_a) {
var _b;
var variant = _a.variant, brand = _a.brand, color = _a.color, mode = _a.mode;
return variant && "1px solid ".concat(((_b = getColorBrand(theme)(brand, { variant: variant, color: color, mode: mode })) === null || _b === void 0 ? void 0 : _b.border));
},
borderRadius: function (_a) {
var brand = _a.brand;
return getPropsThemeButton(theme)({ brand: brand }).buttonborderRadius;
},
boxShadow: 'none',
color: function (_a) {
var _b;
var variant = _a.variant, brand = _a.brand, color = _a.color, mode = _a.mode;
return variant && ((_b = getColorBrand(theme)(brand, { variant: variant, color: color, mode: mode })) === null || _b === void 0 ? void 0 : _b.color);
},
cursor: 'pointer',
height: function (_a) {
var size = _a.size;
return size && theme.size[size];
},
outline: 0,
overflow: 'hidden',
paddingLeft: getPaddingStyles(theme),
paddingRight: getPaddingStyles(theme),
position: 'relative',
width: function (_a) {
var fullWidth = _a.fullWidth, display = _a.display;
return (fullWidth || (display === 'block') ? '100%' : 'auto');
},
'&:disabled': {
backgroundColor: function (_a) {
var variant = _a.variant;
return variant && theme.color.surfaceDisabled;
},
border: 'none',
boxShadow: theme.elevation.none,
color: function (_a) {
var variant = _a.variant;
return variant && theme.color.onSurfaceDisabled;
},
cursor: 'default'
},
'&:hover:not([disabled])': {
backgroundColor: function (_a) {
var _b, _c;
var variant = _a.variant, brand = _a.brand, color = _a.color, mode = _a.mode;
return variant && ((_c = (_b = getColorBrand(theme)(brand, { variant: variant, color: color, mode: mode })) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c.back);
},
border: function (_a) {
var _b, _c;
var variant = _a.variant, brand = _a.brand, color = _a.color, mode = _a.mode;
return variant && "1px solid ".concat(((_c = (_b = getColorBrand(theme)(brand, { variant: variant, color: color, mode: mode })) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c.boder));
},
color: function (_a) {
var _b, _c;
var variant = _a.variant, brand = _a.brand, color = _a.color, mode = _a.mode;
return variant && ((_c = (_b = getColorBrand(theme)(brand, { variant: variant, color: color, mode: mode })) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c.label);
}
// opacity: ({ variant }) => (variant === 'contained' ? theme.opacity.veryHigh : 'unset')
// opacity: theme.opacity.veryHigh
},
'&:focus-visible:not([disabled])': {
backgroundColor: function (_a) {
var _b, _c;
var variant = _a.variant, brand = _a.brand, color = _a.color, mode = _a.mode;
return variant && ((_c = (_b = getColorBrand(theme)(brand, { variant: variant, color: color, mode: mode })) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.back);
},
border: function (_a) {
var _b, _c;
var variant = _a.variant, brand = _a.brand, color = _a.color, mode = _a.mode;
return variant && "1px solid ".concat(((_c = (_b = getColorBrand(theme)(brand, { variant: variant, color: color, mode: mode })) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.boder));
},
color: function (_a) {
var _b, _c;
var variant = _a.variant, brand = _a.brand, color = _a.color, mode = _a.mode;
return variant && ((_c = (_b = getColorBrand(theme)(brand, { variant: variant, color: color, mode: mode })) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.label);
},
opacity: function (_a) {
var variant = _a.variant;
return (variant === 'contained' && theme.opacity.high);
}
// opacity: theme.opacity.high
},
'&:active:not([disabled])': {
backgroundColor: function (_a) {
var _b, _c;
var variant = _a.variant, brand = _a.brand, color = _a.color, mode = _a.mode;
return variant && ((_c = (_b = getColorBrand(theme)(brand, { variant: variant, color: color, mode: mode })) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.back);
},
border: function (_a) {
var _b, _c;
var variant = _a.variant, brand = _a.brand, color = _a.color, mode = _a.mode;
return variant && "1px solid ".concat(((_c = (_b = getColorBrand(theme)(brand, { variant: variant, color: color, mode: mode })) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.boder));
},
color: function (_a) {
var _b, _c;
var variant = _a.variant, brand = _a.brand, color = _a.color, mode = _a.mode;
return variant && ((_c = (_b = getColorBrand(theme)(brand, { variant: variant, color: color, mode: mode })) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.label);
},
opacity: function (_a) {
var variant = _a.variant;
return (variant === 'contained' && theme.opacity.high);
}
// opacity: theme.opacity.high
}
},
labelContainer: {
alignItems: 'center',
display: 'flex',
flexDirection: getIconPosition(),
justifyContent: 'center'
},
label: {
fontFamily: [theme.button.label.primary.fontFamily, theme.button.label.fallback.fontFamily],
fontSize: theme.button.label.fontSize,
fontWeight: theme.button.label.primary.fontWeight,
letterSpacing: function (_a) {
var textTransform = _a.textTransform;
return getletterSpacing(theme)({ textTransform: textTransform });
},
marginLeft: getLabelMargin(theme, 'left'),
marginRight: getLabelMargin(theme, 'right'),
textAlign: 'center',
textOverflow: 'ellipsis',
textTransform: function (_a) {
var textTransform = _a.textTransform, brand = _a.brand, mode = _a.mode;
return (textTransform || getTextTransform(theme)({ brand: brand, mode: mode }));
},
userSelect: 'none',
whiteSpace: 'nowrap'
}
}); });
exports.default = styles;
//# sourceMappingURL=GayaButton.styles.js.map