@naturacosmeticos/natds-react
Version:
A collection of components from Natura Design System for React
524 lines • 28.3 kB
JavaScript
"use strict";
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;
var padding = {
semi: theme.spacing.micro,
medium: theme.spacing.small,
semiX: theme.spacing.tiny
};
return size && padding[size];
}; };
var onColorGet = function (color) {
switch (color) {
case 'primary':
return 'onPrimary';
case 'onPrimary':
return 'primary';
case 'secondary':
return 'onSecondary';
case 'onSecondary':
return 'secondary';
case 'surfaceInverse':
return 'onSurfaceInverse';
case 'onSurfaceInverse':
return 'surfaceInverse';
default:
return 'primary';
}
};
var onColorGetOutlined = function (color) {
switch (color) {
case 'primary':
return 'highEmphasis';
case 'onPrimary':
return 'onPrimary';
case 'secondary':
return 'highEmphasis';
case 'onSecondary':
return 'onSecondary';
case 'surfaceInverse':
return 'surfaceInverse';
case 'onSurfaceInverse':
return 'onSurfaceInverse';
default:
return 'primary';
}
};
var getColorVariant = function (theme, _a) {
var variant = _a.variant, color = _a.color;
switch (variant) {
case 'contained': {
return {
back: color ? theme.color[color] : theme.color.primary,
border: theme.button[variant].color.enable.border,
color: color ? theme.color[onColorGet(color)] : theme.color.onPrimary,
hover: {
primary: {
// back: `${theme.color.primaryDark}`,
// boder: theme.button[variant].color.hover.border,
// label: `${theme.color.onPrimaryDark}`
back: color ? theme.color[color] : theme.color.primary,
border: theme.button[variant].color.enable.border,
color: color ? theme.color[onColorGet(color)] : theme.color.onPrimary
},
onPrimary: {
// back: theme.color.neutralLight,
// boder: theme.button[variant].color.hover.border,
// label: theme.color.primary
back: color ? theme.color[color] : theme.color.primary,
border: theme.button[variant].color.enable.border,
color: color ? theme.color[onColorGet(color)] : theme.color.onPrimary
},
secondary: {
// back: theme.color.secondaryDark,
// boder: theme.button[variant].color.hover.border,
// label: theme.color.onSecondaryDark
back: color ? theme.color[color] : theme.color.primary,
border: theme.button[variant].color.enable.border,
color: color ? theme.color[onColorGet(color)] : theme.color.onPrimary
},
onSecondary: {
// back: theme.color.neutralLight,
// boder: theme.button[variant].color.hover.border,
// label: theme.color.secondary
back: color ? theme.color[color] : theme.color.primary,
border: theme.button[variant].color.enable.border,
color: color ? theme.color[onColorGet(color)] : theme.color.onPrimary
},
surfaceInverse: {
// back: theme.color.neutralDark,
// boder: theme.button[variant].color.hover.border,
// label: theme.color.onSurfaceInverse
back: color ? theme.color[color] : theme.color.primary,
border: theme.button[variant].color.enable.border,
color: color ? theme.color[onColorGet(color)] : theme.color.onPrimary
},
onSurfaceInverse: {
// back: theme.color.neutralLight,
// boder: theme.button[variant].color.hover.border,
// label: theme.color.surfaceInverse
back: color ? theme.color[color] : theme.color.primary,
border: theme.button[variant].color.enable.border,
color: color ? theme.color[onColorGet(color)] : theme.color.onPrimary
}
},
focus: {
primary: {
back: "".concat(theme.color.primaryDarkest),
boder: theme.button[variant].color.hover.border,
label: "".concat(theme.color.onPrimaryDarkest)
},
onPrimary: {
back: theme.color.neutralMedium,
boder: theme.button[variant].color.hover.border,
label: theme.color.primary
},
secondary: {
back: theme.color.secondaryDarkest,
boder: theme.button[variant].color.hover.border,
label: theme.color.onSecondaryDarkest
},
onSecondary: {
back: theme.color.neutralMedium,
boder: theme.button[variant].color.hover.border,
label: theme.color.secondary
},
surfaceInverse: {
back: theme.color.neutralMedium,
boder: theme.button[variant].color.hover.border,
label: theme.color.onSurfaceInverse
},
onSurfaceInverse: {
back: theme.color.neutralMedium,
boder: theme.button[variant].color.hover.border,
label: theme.color.surfaceInverse
}
}
};
}
case 'outlined': {
return {
back: theme.button[variant].color.enable.background,
border: color ? theme.color[color] : theme.color.primary,
color: color ? theme.color[onColorGetOutlined(color)] : theme.color.highlight,
hover: {
primary: {
back: theme.color.neutralMedium,
boder: theme.color.primary,
label: "".concat(theme.color.highEmphasis)
},
onPrimary: {
back: theme.color.neutralMedium,
boder: theme.color.onPrimary,
label: "".concat(theme.color.highEmphasis)
},
secondary: {
back: theme.color.neutralMedium,
boder: theme.color.secondary,
label: "".concat(theme.color.highEmphasis)
},
onSecondary: {
back: theme.color.neutralMedium,
boder: theme.color.onSecondary,
label: "".concat(theme.color.highEmphasis)
},
surfaceInverse: {
back: theme.color.neutralMedium,
boder: theme.color.surfaceInverse,
label: "".concat(theme.color.highEmphasis)
},
onSurfaceInverse: {
back: theme.color.neutralMedium,
boder: theme.color.onSurfaceInverse,
label: "".concat(theme.color.highEmphasis)
}
},
focus: {
primary: {
back: theme.color.neutralDark,
boder: theme.color.primary,
label: "".concat(theme.color.lowLight)
},
onPrimary: {
back: theme.color.neutralDark,
boder: theme.color.onPrimary,
label: "".concat(theme.color.lowLight)
},
secondary: {
back: theme.color.neutralDark,
boder: theme.color.secondary,
label: "".concat(theme.color.lowLight)
},
onSecondary: {
back: theme.color.neutralDark,
boder: theme.color.onSecondary,
label: "".concat(theme.color.lowLight)
},
surfaceInverse: {
back: theme.color.neutralDark,
boder: theme.color.surfaceInverse,
label: "".concat(theme.color.lowLight)
},
onSurfaceInverse: {
back: theme.color.neutralDark,
boder: theme.color.onSurfaceInverse,
label: "".concat(theme.color.lowLight)
}
}
};
}
case 'text': {
return {
back: theme.button[variant].color.enable.background,
border: theme.button[variant].color.enable.border,
color: color ? theme.color[onColorGetOutlined(color)] : theme.color.highEmphasis,
hover: {
primary: {
back: "".concat(theme.color.neutralMedium),
boder: theme.button[variant].color.hover.border,
label: "".concat(theme.color.highEmphasis)
},
onPrimary: {
back: "".concat(theme.color.neutralMedium),
boder: theme.button[variant].color.hover.border,
label: "".concat(theme.color.highEmphasis)
},
secondary: {
back: "".concat(theme.color.neutralMedium),
boder: theme.button[variant].color.hover.border,
label: "".concat(theme.color.highEmphasis)
},
onSecondary: {
back: "".concat(theme.color.neutralMedium),
boder: theme.button[variant].color.hover.border,
label: "".concat(theme.color.highEmphasis)
},
surfaceInverse: {
back: "".concat(theme.color.neutralMedium),
boder: theme.button[variant].color.hover.border,
label: "".concat(theme.color.highEmphasis)
},
onSurfaceInverse: {
back: "".concat(theme.color.neutralMedium),
boder: theme.button[variant].color.hover.border,
label: "".concat(theme.color.highEmphasis)
}
},
focus: {
primary: {
back: "".concat(theme.color.neutralDark),
boder: theme.button[variant].color.hover.border,
label: "".concat(theme.color.lowLight)
},
onPrimary: {
back: "".concat(theme.color.neutralDark),
boder: theme.button[variant].color.hover.border,
label: "".concat(theme.color.lowLight)
},
secondary: {
back: "".concat(theme.color.neutralDark),
boder: theme.button[variant].color.hover.border,
label: "".concat(theme.color.lowLight)
},
onSecondary: {
back: "".concat(theme.color.neutralDark),
boder: theme.button[variant].color.hover.border,
label: "".concat(theme.color.lowLight)
},
surfaceInverse: {
back: "".concat(theme.color.neutralDark),
boder: theme.button[variant].color.hover.border,
label: "".concat(theme.color.lowLight)
},
onSurfaceInverse: {
back: "".concat(theme.color.neutralDark),
boder: theme.button[variant].color.hover.border,
label: "".concat(theme.color.lowLight)
}
}
};
}
default:
return {
back: color && theme.color.primary,
border: theme.button.contained.color.enable.border,
color: color && theme.color[onColorGet('primary')]
};
}
};
var getColorBrand = function (theme) { return function (brand, _a) {
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
var variant = _a.variant, color = _a.color, mode = _a.mode;
var colorTheme = (0, ThemeProvider_1.buildTheme)(brand, mode);
var propBrandsColor = {};
if (variant) {
propBrandsColor = {
back: getColorVariant(colorTheme, { variant: variant, color: color }).back,
border: getColorVariant(colorTheme, { variant: variant, color: color }).border,
color: getColorVariant(colorTheme, { variant: variant, color: color }).color,
hover: {
back: (_b = getColorVariant(colorTheme, { variant: variant, color: color }).hover) === null || _b === void 0 ? void 0 : _b[color !== null && color !== void 0 ? color : 'primary'].back,
boder: (_c = getColorVariant(colorTheme, { variant: variant, color: color }).hover) === null || _c === void 0 ? void 0 : _c[color !== null && color !== void 0 ? color : 'primary'].boder,
label: (_d = getColorVariant(colorTheme, { variant: variant, color: color }).hover) === null || _d === void 0 ? void 0 : _d[color !== null && color !== void 0 ? color : 'primary'].label
},
focus: {
back: (_e = getColorVariant(colorTheme, { variant: variant, color: color }).focus) === null || _e === void 0 ? void 0 : _e[color !== null && color !== void 0 ? color : 'primary'].back,
boder: (_f = getColorVariant(colorTheme, { variant: variant, color: color }).focus) === null || _f === void 0 ? void 0 : _f[color !== null && color !== void 0 ? color : 'primary'].boder,
label: (_g = getColorVariant(colorTheme, { variant: variant, color: color }).focus) === null || _g === void 0 ? void 0 : _g[color !== null && color !== void 0 ? color : 'primary'].label
}
};
}
if (brand) {
return __assign({}, propBrandsColor);
}
return variant && {
back: getColorVariant(theme, { variant: variant, color: color }).back,
border: getColorVariant(theme, { variant: variant, color: color }).border,
color: getColorVariant(theme, { variant: variant, color: color }).color,
hover: {
back: (_h = getColorVariant(theme, { variant: variant, color: color }).hover) === null || _h === void 0 ? void 0 : _h[color !== null && color !== void 0 ? color : 'primary'].back,
boder: (_j = getColorVariant(theme, { variant: variant, color: color }).hover) === null || _j === void 0 ? void 0 : _j[color !== null && color !== void 0 ? color : 'primary'].boder,
label: (_k = getColorVariant(theme, { variant: variant, color: color }).hover) === null || _k === void 0 ? void 0 : _k[color !== null && color !== void 0 ? color : 'primary'].label
},
focus: {
back: (_l = getColorVariant(theme, { variant: variant, color: color }).focus) === null || _l === void 0 ? void 0 : _l[color !== null && color !== void 0 ? color : 'primary'].back,
boder: (_m = getColorVariant(theme, { variant: variant, color: color }).focus) === null || _m === void 0 ? void 0 : _m[color !== null && color !== void 0 ? color : 'primary'].boder,
label: (_o = getColorVariant(theme, { variant: variant, color: color }).focus) === null || _o === void 0 ? void 0 : _o[color !== null && color !== void 0 ? color : 'primary'].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 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 ({
button: {
backgroundColor: function (_a) {
var _b;
var variant = _a.variant, brand = _a.brand, color = _a.color, mode = _a.mode;
return variant && (brand ? (_b = getColorBrand(theme)(brand, { variant: variant, color: color, mode: mode })) === null || _b === void 0 ? void 0 : _b.back : getColorVariant(theme, { variant: variant, color: color }).back);
},
border: function (_a) {
var _b;
var variant = _a.variant, brand = _a.brand, color = _a.color, mode = _a.mode;
return variant && "1px solid ".concat((brand ? (_b = getColorBrand(theme)(brand, { variant: variant, color: color, mode: mode })) === null || _b === void 0 ? void 0 : _b.border : getColorVariant(theme, { variant: variant, color: color }).border));
},
borderRadius: function (_a) {
var brand = _a.brand;
return getPropsThemeButton(theme)({ brand: brand }).buttonborderRadius;
},
boxShadow: function (_a) {
var variant = _a.variant;
return variant && (variant === 'contained' ? theme.elevation.tiny : 'none');
},
color: function (_a) {
var _b;
var variant = _a.variant, brand = _a.brand, color = _a.color, mode = _a.mode;
return variant && (brand ? (_b = getColorBrand(theme)(brand, { variant: variant, color: color, mode: mode })) === null || _b === void 0 ? void 0 : _b.color : getColorVariant(theme, { variant: variant, color: color }).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;
return (fullWidth ? '100%' : 'auto');
},
'&:disabled': {
backgroundColor: function (_a) {
var variant = _a.variant;
return variant && theme.button[variant].color.disable.background;
},
border: function (_a) {
var variant = _a.variant;
return variant && "1px solid ".concat(theme.button[variant].color.disable.border);
},
boxShadow: theme.elevation.none,
color: function (_a) {
var variant = _a.variant;
return variant && theme.button[variant].color.disable.label;
},
cursor: 'default'
},
'&:hover:not([disabled])': {
backgroundColor: function (_a) {
var _b, _c, _d;
var variant = _a.variant, brand = _a.brand, color = _a.color, mode = _a.mode;
return variant && (brand ? (_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 : (_d = getColorVariant(theme, { variant: variant, color: color }).hover) === null || _d === void 0 ? void 0 : _d[color !== null && color !== void 0 ? color : 'primary'].back);
},
border: function (_a) {
var _b, _c, _d;
var variant = _a.variant, brand = _a.brand, color = _a.color, mode = _a.mode;
return variant && "1px solid ".concat((brand ? (_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 : (_d = getColorVariant(theme, { variant: variant, color: color }).hover) === null || _d === void 0 ? void 0 : _d[color !== null && color !== void 0 ? color : 'primary'].boder));
},
color: function (_a) {
var _b, _c, _d;
var variant = _a.variant, brand = _a.brand, color = _a.color, mode = _a.mode;
return variant && (brand ? (_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 : (_d = getColorVariant(theme, { variant: variant, color: color }).hover) === null || _d === void 0 ? void 0 : _d[color !== null && color !== void 0 ? color : 'primary'].label);
},
opacity: function (_a) {
var variant = _a.variant;
return (variant === 'contained' ? theme.opacity.veryHigh : 'unset');
}
// opacity: theme.opacity.veryHigh
},
'&:focus-visible:not([disabled])': {
backgroundColor: function (_a) {
var _b, _c, _d;
var variant = _a.variant, brand = _a.brand, color = _a.color, mode = _a.mode;
return variant && (brand ? (_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 : (_d = getColorVariant(theme, { variant: variant, color: color }).focus) === null || _d === void 0 ? void 0 : _d[color !== null && color !== void 0 ? color : 'primary'].back);
},
border: function (_a) {
var _b, _c, _d;
var variant = _a.variant, brand = _a.brand, color = _a.color, mode = _a.mode;
return variant && "1px solid ".concat((brand ? (_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 : (_d = getColorVariant(theme, { variant: variant, color: color }).focus) === null || _d === void 0 ? void 0 : _d[color !== null && color !== void 0 ? color : 'primary'].boder));
},
color: function (_a) {
var _b, _c, _d;
var variant = _a.variant, brand = _a.brand, color = _a.color, mode = _a.mode;
return variant && (brand ? (_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 : (_d = getColorVariant(theme, { variant: variant, color: color }).focus) === null || _d === void 0 ? void 0 : _d[color !== null && color !== void 0 ? color : 'primary'].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, _d;
var variant = _a.variant, brand = _a.brand, color = _a.color, mode = _a.mode;
return variant && (brand ? (_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 : (_d = getColorVariant(theme, { variant: variant, color: color }).focus) === null || _d === void 0 ? void 0 : _d[color !== null && color !== void 0 ? color : 'primary'].back);
},
border: function (_a) {
var _b, _c, _d;
var variant = _a.variant, brand = _a.brand, color = _a.color, mode = _a.mode;
return variant && "1px solid ".concat((brand ? (_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 : (_d = getColorVariant(theme, { variant: variant, color: color }).focus) === null || _d === void 0 ? void 0 : _d[color !== null && color !== void 0 ? color : 'primary'].boder));
},
color: function (_a) {
var _b, _c, _d;
var variant = _a.variant, brand = _a.brand, color = _a.color, mode = _a.mode;
return variant && (brand ? (_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 : (_d = getColorVariant(theme, { variant: variant, color: color }).focus) === null || _d === void 0 ? void 0 : _d[color !== null && color !== void 0 ? color : 'primary'].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;
return textTransform;
},
userSelect: 'none',
whiteSpace: 'nowrap'
}
}); });
exports.default = styles;
//# sourceMappingURL=Button.styles.js.map