@trafilea/afrodita-components 5.0.0-beta.4 → 5.0.0-beta.5

package/build/index.d.ts

@@ -491,16 +491,16 @@ interface SizeSelectorProps {
     selectedValue: SizeOption;
     onChange: (size: SizeOption) => void;
     inline?: boolean;
+    width?: string;
 }
-declare const SizeSelector: ({ label, sizes, selectedValue, onChange, inline, }: SizeSelectorProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const SizeSelector: ({ label, sizes, selectedValue, onChange, inline, width, }: SizeSelectorProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 interface SizeFitGuideProps {
     title: string;
-    fitPercentageLabel: string;
-    fitPercentage: number;
+    fitPercentage?: number;
     onClick: () => void;
 }
-declare const SizeFitGuide: ({ title, fitPercentageLabel, fitPercentage, onClick }: SizeFitGuideProps) => JSX.Element;
+declare const SizeFitGuide: ({ title, fitPercentage, onClick }: SizeFitGuideProps) => JSX.Element;
 
 interface BaseButtonProps {
     children: React.ReactNode;

package/build/index.esm.js

@@ -4008,13 +4008,13 @@ var getStylesBySize$8 = function (size, theme) {
     }
 };
 var SimpleSelector = function (_a) {
-    var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'base-button' : _e, onClick = _a.onClick;
+    var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'base-button' : _e, _f = _a.width, width = _f === void 0 ? '' : _f, onClick = _a.onClick;
     var theme = useTheme();
     var stylesBySize = getStylesBySize$8(size, theme);
     var activeStyles = active
         ? { fontWeight: theme.component.selector.hover.fontWeight }
         : { fontWeight: theme.component.selector.default.fontWeight };
-    return (jsx(BaseButton, __assign$1({ onClick: onClick, disabled: disabled, className: className, type: "button", testId: testId, css: __assign$1(__assign$1(__assign$1({}, stylesBySize), activeStyles), { boxSizing: 'border-box', fontSize: theme.component.selector.fontSize, '&:hover': {
+    return (jsx(BaseButton, __assign$1({ onClick: onClick, disabled: disabled, className: className, type: "button", testId: testId, css: __assign$1(__assign$1(__assign$1({}, stylesBySize), activeStyles), { width: width, boxSizing: 'border-box', fontSize: theme.component.selector.fontSize, '&:hover': {
                 fontWeight: theme.component.selector.hover.fontWeight,
             }, '&:disabled': {
                 color: theme.colors.shades['250'].color,
@@ -4023,7 +4023,7 @@ var SimpleSelector = function (_a) {
 };
 
 var SelectorSecondary = function (_a) {
-    var text = _a.text, size = _a.size, disabled = _a.disabled, active = _a.active, className = _a.className, testId = _a.testId, onClick = _a.onClick;
+    var text = _a.text, size = _a.size, disabled = _a.disabled, active = _a.active, className = _a.className, testId = _a.testId, width = _a.width, onClick = _a.onClick;
     var theme = useTheme();
     var stylesByActive = active
         ? {
@@ -4038,7 +4038,7 @@ var SelectorSecondary = function (_a) {
             border: theme.component.selector.default.border,
             fontWeight: theme.component.selector.default.fontWeight,
         };
-    return (jsx(SimpleSelector, { text: text, size: size, onClick: onClick, className: className, disabled: disabled, testId: testId, css: __assign$1(__assign$1({}, stylesByActive), { whiteSpace: 'nowrap', '&:hover': {
+    return (jsx(SimpleSelector, { text: text, size: size, onClick: onClick, className: className, disabled: disabled, testId: testId, width: width, css: __assign$1(__assign$1({}, stylesByActive), { whiteSpace: 'nowrap', '&:hover': {
                 background: theme.component.selector.hover.background,
                 color: theme.component.selector.hover.color,
             }, '&:disabled': {
@@ -4181,7 +4181,7 @@ var ButtonsContainer = newStyled.div(templateObject_1$10 || (templateObject_1$10
     return (inline ? '0 0 0 10px' : '8px 0 0 0');
 });
 var SizeSelector = function (_a) {
-    var label = _a.label, sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b;
+    var label = _a.label, sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b, width = _a.width;
     return (jsxs("div", __assign$1({ css: {
             display: 'flex',
             flexDirection: inline ? 'row' : 'column',
@@ -4191,7 +4191,7 @@ var SizeSelector = function (_a) {
                     return (jsx(SelectorSecondary, { css: {
                             padding: '0.75rem 1rem 0.625rem',
                             margin: '0 0.5rem 0.625rem 0',
-                        }, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]) }, size.label));
+                        }, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width }, size.label));
                 }) }), void 0)] }), void 0));
 };
 var templateObject_1$10;
@@ -4245,8 +4245,8 @@ var Container$E = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __ma
 var P$3 = newStyled.p(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 var PercentageSpan = newStyled.span(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n  font-weight: 700;\n  text-decoration-line: underline;\n"], ["\n  font-weight: 700;\n  text-decoration-line: underline;\n"])));
 var SizeFitGuide = function (_a) {
-    var title = _a.title, fitPercentageLabel = _a.fitPercentageLabel, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
-    return (jsxs$1(Container$E, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxs$1(P$3, { children: [fitPercentageLabel, " ", jsxs$1(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0)] }, void 0));
+    var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
+    return (jsxs$1(Container$E, { 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, { children: [fitPercentage, "%"] }, void 0)] }, void 0))] }, void 0));
 };
 var templateObject_1$_, templateObject_2$D, templateObject_3$o;
 

package/build/index.js

@@ -4034,13 +4034,13 @@ var getStylesBySize$8 = function (size, theme) {
     }
 };
 var SimpleSelector = function (_a) {
-    var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'base-button' : _e, onClick = _a.onClick;
+    var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'base-button' : _e, _f = _a.width, width = _f === void 0 ? '' : _f, onClick = _a.onClick;
     var theme = useTheme();
     var stylesBySize = getStylesBySize$8(size, theme);
     var activeStyles = active
         ? { fontWeight: theme.component.selector.hover.fontWeight }
         : { fontWeight: theme.component.selector.default.fontWeight };
-    return (jsx(BaseButton, __assign$1({ onClick: onClick, disabled: disabled, className: className, type: "button", testId: testId, css: __assign$1(__assign$1(__assign$1({}, stylesBySize), activeStyles), { boxSizing: 'border-box', fontSize: theme.component.selector.fontSize, '&:hover': {
+    return (jsx(BaseButton, __assign$1({ onClick: onClick, disabled: disabled, className: className, type: "button", testId: testId, css: __assign$1(__assign$1(__assign$1({}, stylesBySize), activeStyles), { width: width, boxSizing: 'border-box', fontSize: theme.component.selector.fontSize, '&:hover': {
                 fontWeight: theme.component.selector.hover.fontWeight,
             }, '&:disabled': {
                 color: theme.colors.shades['250'].color,
@@ -4049,7 +4049,7 @@ var SimpleSelector = function (_a) {
 };
 
 var SelectorSecondary = function (_a) {
-    var text = _a.text, size = _a.size, disabled = _a.disabled, active = _a.active, className = _a.className, testId = _a.testId, onClick = _a.onClick;
+    var text = _a.text, size = _a.size, disabled = _a.disabled, active = _a.active, className = _a.className, testId = _a.testId, width = _a.width, onClick = _a.onClick;
     var theme = useTheme();
     var stylesByActive = active
         ? {
@@ -4064,7 +4064,7 @@ var SelectorSecondary = function (_a) {
             border: theme.component.selector.default.border,
             fontWeight: theme.component.selector.default.fontWeight,
         };
-    return (jsx(SimpleSelector, { text: text, size: size, onClick: onClick, className: className, disabled: disabled, testId: testId, css: __assign$1(__assign$1({}, stylesByActive), { whiteSpace: 'nowrap', '&:hover': {
+    return (jsx(SimpleSelector, { text: text, size: size, onClick: onClick, className: className, disabled: disabled, testId: testId, width: width, css: __assign$1(__assign$1({}, stylesByActive), { whiteSpace: 'nowrap', '&:hover': {
                 background: theme.component.selector.hover.background,
                 color: theme.component.selector.hover.color,
             }, '&:disabled': {
@@ -4207,7 +4207,7 @@ var ButtonsContainer = newStyled.div(templateObject_1$10 || (templateObject_1$10
     return (inline ? '0 0 0 10px' : '8px 0 0 0');
 });
 var SizeSelector = function (_a) {
-    var label = _a.label, sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b;
+    var label = _a.label, sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b, width = _a.width;
     return (jsxs("div", __assign$1({ css: {
             display: 'flex',
             flexDirection: inline ? 'row' : 'column',
@@ -4217,7 +4217,7 @@ var SizeSelector = function (_a) {
                     return (jsx(SelectorSecondary, { css: {
                             padding: '0.75rem 1rem 0.625rem',
                             margin: '0 0.5rem 0.625rem 0',
-                        }, size: exports.ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]) }, size.label));
+                        }, size: exports.ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width }, size.label));
                 }) }), void 0)] }), void 0));
 };
 var templateObject_1$10;
@@ -4271,8 +4271,8 @@ var Container$E = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __ma
 var P$3 = newStyled.p(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 var PercentageSpan = newStyled.span(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n  font-weight: 700;\n  text-decoration-line: underline;\n"], ["\n  font-weight: 700;\n  text-decoration-line: underline;\n"])));
 var SizeFitGuide = function (_a) {
-    var title = _a.title, fitPercentageLabel = _a.fitPercentageLabel, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
-    return (jsxRuntime.jsxs(Container$E, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxRuntime.jsxs(P$3, { children: [fitPercentageLabel, " ", jsxRuntime.jsxs(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0)] }, void 0));
+    var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
+    return (jsxRuntime.jsxs(Container$E, { 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, { children: [fitPercentage, "%"] }, void 0)] }, void 0))] }, void 0));
 };
 var templateObject_1$_, templateObject_2$D, templateObject_3$o;
 

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.4",
+  "version": "5.0.0-beta.5",
   "private": false,
   "main": "build/index.js",
   "style": "build/index.css",