@trafilea/afrodita-components 5.0.0-beta.13 → 5.0.0-beta.16

package/build/index.d.ts

@@ -522,6 +522,7 @@ interface BaseButtonProps {
     onClick: () => void;
     className?: string;
     inline?: boolean;
+    uppercase?: boolean;
     testId?: string;
 }
 
@@ -532,8 +533,9 @@ interface TextButtonProps$1 extends BaseProps {
     TrailingIcon?: IconType;
     iconColor?: string;
     size?: ComponentSize;
+    uppercase?: boolean;
 }
-declare const TextButton: ({ text, LeadingIcon, TrailingIcon, iconColor, disabled, type, size, onClick, }: TextButtonProps$1) => _emotion_react_jsx_runtime.JSX.Element;
+declare const TextButton: ({ text, LeadingIcon, TrailingIcon, iconColor, disabled, type, size, uppercase, onClick, }: TextButtonProps$1) => _emotion_react_jsx_runtime.JSX.Element;
 
 interface DiscountTagProps {
     discount: number;

package/build/index.esm.js

@@ -3558,14 +3558,14 @@ function jsxs(type, props, key) {
 }
 
 var BaseButton = function (_a) {
-    var children = _a.children, renderLeading = _a.renderLeading, renderTrailing = _a.renderTrailing, disabled = _a.disabled, _b = _a.type, type = _b === void 0 ? 'button' : _b, onClick = _a.onClick, className = _a.className, inline = _a.inline, _c = _a.testId, testId = _c === void 0 ? 'base-button' : _c;
+    var children = _a.children, renderLeading = _a.renderLeading, renderTrailing = _a.renderTrailing, disabled = _a.disabled, _b = _a.type, type = _b === void 0 ? 'button' : _b, onClick = _a.onClick, className = _a.className, inline = _a.inline, _c = _a.uppercase, uppercase = _c === void 0 ? true : _c, _d = _a.testId, testId = _d === void 0 ? 'base-button' : _d;
     return (jsxs("button", __assign$1({ onClick: onClick, disabled: disabled, className: className, type: type, "data-testid": testId, css: {
             display: inline ? 'inline-flex' : 'flex',
             justifyContent: 'center',
             alignItems: 'center',
             padding: '0.75rem 2rem',
             textDecoration: 'none',
-            textTransform: 'uppercase',
+            textTransform: uppercase ? 'uppercase' : 'unset',
             boxSizing: 'border-box',
             cursor: 'pointer',
         } }, { children: [renderLeading, children, renderTrailing] }), void 0));
@@ -4246,10 +4246,10 @@ var getIconFill = function (theme, disabled, iconColor) {
         return theme.colors.shades['550'].color;
 };
 var TextButton = function (_a) {
-    var text = _a.text, LeadingIcon = _a.LeadingIcon, TrailingIcon = _a.TrailingIcon, iconColor = _a.iconColor, disabled = _a.disabled, type = _a.type, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
+    var text = _a.text, LeadingIcon = _a.LeadingIcon, TrailingIcon = _a.TrailingIcon, iconColor = _a.iconColor, disabled = _a.disabled, type = _a.type, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, _c = _a.uppercase, uppercase = _c === void 0 ? true : _c, onClick = _a.onClick;
     var theme = useTheme();
     var iconFill = getIconFill(theme, disabled, iconColor);
-    return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles$1(theme, size) }, { children: text }), void 0));
+    return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles$1(theme, size), uppercase: uppercase }, { children: text }), void 0));
 };
 var templateObject_1$12;
 
@@ -4258,7 +4258,7 @@ var P$3 = newStyled.p(templateObject_2$G || (templateObject_2$G = __makeTemplate
 var PercentageSpan = newStyled.span(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n  font-weight: 700;\n  text-decoration-line: underline;\n  cursor: pointer;\n"], ["\n  font-weight: 700;\n  text-decoration-line: underline;\n  cursor: pointer;\n"])));
 var SizeFitGuide = function (_a) {
     var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
-    return (jsxs$1(Container$F, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick }, void 0), !!fitPercentage && (jsxs$1(P$3, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
+    return (jsxs$1(Container$F, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P$3, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
 };
 var templateObject_1$11, templateObject_2$G, templateObject_3$r;
 
@@ -11098,8 +11098,8 @@ var visibleStyle = function (_a) {
     return opened
         ? css(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n        opacity: 1;\n        pointer-events: all;\n        transform: translate(-50%, -50%);\n      "], ["\n        opacity: 1;\n        pointer-events: all;\n        transform: translate(-50%, -50%);\n      "]))) : css(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n        opacity: 0;\n        pointer-events: none;\n        transform: translate(-50%, -40%);\n      "], ["\n        opacity: 0;\n        pointer-events: none;\n        transform: translate(-50%, -40%);\n      "])));
 };
-var Container$4 = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  border: 1px solid var(--colors-pallete-primary-color);\n  border-radius: ", ";\n  padding: 20px;\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  z-index: var(--zIndex-modal);\n  background-color: var(--colors-background-color);\n  transition: transform 0.3s, opacity 0.3s;\n  max-width: ", ";\n  max-height: ", ";\n  width: ", ";\n  height: ", ";\n  ", "\n  ", "\n\n  ", ";\n"], ["\n  border: 1px solid var(--colors-pallete-primary-color);\n  border-radius: ", ";\n  padding: 20px;\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  z-index: var(--zIndex-modal);\n  background-color: var(--colors-background-color);\n  transition: transform 0.3s, opacity 0.3s;\n  max-width: ", ";\n  max-height: ", ";\n  width: ", ";\n  height: ", ";\n  ", "\n  ", "\n\n  ", ";\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.maxFullScreen ? '100vw' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100vh' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100vw' : 'fit-content'); }, function (props) { return "".concat(props.maxFullScreen ? '100vh' : 'inherit'); }, function (props) { return "".concat(props.maxFullScreen ? 'overflow-y: auto;' : ''); }, mediaQueries({
-    minWidth: ['50%', 'var(--component-modal-minWidth)'],
+var Container$4 = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  border: 1px solid var(--colors-pallete-primary-color);\n  border-radius: ", ";\n  padding: 20px;\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  z-index: var(--zIndex-modal);\n  background-color: var(--colors-background-color);\n  transition: transform 0.3s, opacity 0.3s;\n  overflow-y: auto;\n  max-width: ", ";\n  max-height: ", ";\n  width: ", ";\n  height: ", ";\n  ", "\n\n  ", ";\n"], ["\n  border: 1px solid var(--colors-pallete-primary-color);\n  border-radius: ", ";\n  padding: 20px;\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  z-index: var(--zIndex-modal);\n  background-color: var(--colors-background-color);\n  transition: transform 0.3s, opacity 0.3s;\n  overflow-y: auto;\n  max-width: ", ";\n  max-height: ", ";\n  width: ", ";\n  height: ", ";\n  ", "\n\n  ", ";\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.maxFullScreen ? '100vw' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100vh' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100vw' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100vh' : 'inherit'); }, mediaQueries({
+    minWidth: ['90%', 'var(--component-modal-minWidth)'],
 }), visibleStyle);
 var Overlay = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.75);\n  z-index: var(--zIndex-overlay);\n  transition: transform 0.3s, opacity 0.3s;\n\n  ", "\n\n  transform: none;\n"], ["\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.75);\n  z-index: var(--zIndex-overlay);\n  transition: transform 0.3s, opacity 0.3s;\n\n  ", "\n\n  transform: none;\n"])), visibleStyle);
 var Modal = function (_a) {

package/build/index.js

@@ -3584,14 +3584,14 @@ function jsxs(type, props, key) {
 }
 
 var BaseButton = function (_a) {
-    var children = _a.children, renderLeading = _a.renderLeading, renderTrailing = _a.renderTrailing, disabled = _a.disabled, _b = _a.type, type = _b === void 0 ? 'button' : _b, onClick = _a.onClick, className = _a.className, inline = _a.inline, _c = _a.testId, testId = _c === void 0 ? 'base-button' : _c;
+    var children = _a.children, renderLeading = _a.renderLeading, renderTrailing = _a.renderTrailing, disabled = _a.disabled, _b = _a.type, type = _b === void 0 ? 'button' : _b, onClick = _a.onClick, className = _a.className, inline = _a.inline, _c = _a.uppercase, uppercase = _c === void 0 ? true : _c, _d = _a.testId, testId = _d === void 0 ? 'base-button' : _d;
     return (jsxs("button", __assign$1({ onClick: onClick, disabled: disabled, className: className, type: type, "data-testid": testId, css: {
             display: inline ? 'inline-flex' : 'flex',
             justifyContent: 'center',
             alignItems: 'center',
             padding: '0.75rem 2rem',
             textDecoration: 'none',
-            textTransform: 'uppercase',
+            textTransform: uppercase ? 'uppercase' : 'unset',
             boxSizing: 'border-box',
             cursor: 'pointer',
         } }, { children: [renderLeading, children, renderTrailing] }), void 0));
@@ -4272,10 +4272,10 @@ var getIconFill = function (theme, disabled, iconColor) {
         return theme.colors.shades['550'].color;
 };
 var TextButton = function (_a) {
-    var text = _a.text, LeadingIcon = _a.LeadingIcon, TrailingIcon = _a.TrailingIcon, iconColor = _a.iconColor, disabled = _a.disabled, type = _a.type, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
+    var text = _a.text, LeadingIcon = _a.LeadingIcon, TrailingIcon = _a.TrailingIcon, iconColor = _a.iconColor, disabled = _a.disabled, type = _a.type, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, _c = _a.uppercase, uppercase = _c === void 0 ? true : _c, onClick = _a.onClick;
     var theme = useTheme();
     var iconFill = getIconFill(theme, disabled, iconColor);
-    return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles$1(theme, size) }, { children: text }), void 0));
+    return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles$1(theme, size), uppercase: uppercase }, { children: text }), void 0));
 };
 var templateObject_1$12;
 
@@ -4284,7 +4284,7 @@ var P$3 = newStyled.p(templateObject_2$G || (templateObject_2$G = __makeTemplate
 var PercentageSpan = newStyled.span(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n  font-weight: 700;\n  text-decoration-line: underline;\n  cursor: pointer;\n"], ["\n  font-weight: 700;\n  text-decoration-line: underline;\n  cursor: pointer;\n"])));
 var SizeFitGuide = function (_a) {
     var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
-    return (jsxRuntime.jsxs(Container$F, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P$3, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
+    return (jsxRuntime.jsxs(Container$F, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P$3, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
 };
 var templateObject_1$11, templateObject_2$G, templateObject_3$r;
 
@@ -11124,8 +11124,8 @@ var visibleStyle = function (_a) {
     return opened
         ? css(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n        opacity: 1;\n        pointer-events: all;\n        transform: translate(-50%, -50%);\n      "], ["\n        opacity: 1;\n        pointer-events: all;\n        transform: translate(-50%, -50%);\n      "]))) : css(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n        opacity: 0;\n        pointer-events: none;\n        transform: translate(-50%, -40%);\n      "], ["\n        opacity: 0;\n        pointer-events: none;\n        transform: translate(-50%, -40%);\n      "])));
 };
-var Container$4 = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  border: 1px solid var(--colors-pallete-primary-color);\n  border-radius: ", ";\n  padding: 20px;\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  z-index: var(--zIndex-modal);\n  background-color: var(--colors-background-color);\n  transition: transform 0.3s, opacity 0.3s;\n  max-width: ", ";\n  max-height: ", ";\n  width: ", ";\n  height: ", ";\n  ", "\n  ", "\n\n  ", ";\n"], ["\n  border: 1px solid var(--colors-pallete-primary-color);\n  border-radius: ", ";\n  padding: 20px;\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  z-index: var(--zIndex-modal);\n  background-color: var(--colors-background-color);\n  transition: transform 0.3s, opacity 0.3s;\n  max-width: ", ";\n  max-height: ", ";\n  width: ", ";\n  height: ", ";\n  ", "\n  ", "\n\n  ", ";\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.maxFullScreen ? '100vw' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100vh' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100vw' : 'fit-content'); }, function (props) { return "".concat(props.maxFullScreen ? '100vh' : 'inherit'); }, function (props) { return "".concat(props.maxFullScreen ? 'overflow-y: auto;' : ''); }, mediaQueries({
-    minWidth: ['50%', 'var(--component-modal-minWidth)'],
+var Container$4 = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  border: 1px solid var(--colors-pallete-primary-color);\n  border-radius: ", ";\n  padding: 20px;\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  z-index: var(--zIndex-modal);\n  background-color: var(--colors-background-color);\n  transition: transform 0.3s, opacity 0.3s;\n  overflow-y: auto;\n  max-width: ", ";\n  max-height: ", ";\n  width: ", ";\n  height: ", ";\n  ", "\n\n  ", ";\n"], ["\n  border: 1px solid var(--colors-pallete-primary-color);\n  border-radius: ", ";\n  padding: 20px;\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  z-index: var(--zIndex-modal);\n  background-color: var(--colors-background-color);\n  transition: transform 0.3s, opacity 0.3s;\n  overflow-y: auto;\n  max-width: ", ";\n  max-height: ", ";\n  width: ", ";\n  height: ", ";\n  ", "\n\n  ", ";\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.maxFullScreen ? '100vw' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100vh' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100vw' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100vh' : 'inherit'); }, mediaQueries({
+    minWidth: ['90%', 'var(--component-modal-minWidth)'],
 }), visibleStyle);
 var Overlay = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.75);\n  z-index: var(--zIndex-overlay);\n  transition: transform 0.3s, opacity 0.3s;\n\n  ", "\n\n  transform: none;\n"], ["\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.75);\n  z-index: var(--zIndex-overlay);\n  transition: transform 0.3s, opacity 0.3s;\n\n  ", "\n\n  transform: none;\n"])), visibleStyle);
 var Modal = function (_a) {

package/package.json

@@ -3,7 +3,7 @@
   "description": "Trafilea's Design System",
   "author": "Trafilea",
   "repository": "https://github.com/trafilea/afrodita-components",
-  "version": "5.0.0-beta.13",
+  "version": "5.0.0-beta.16",
   "private": false,
   "main": "build/index.js",
   "style": "build/index.css",