krl-alfred 2.24.7 → 2.24.8

package/dist/components/RadioButton/layouts/horizontal/Horizontal.styled.js

@@ -40,7 +40,7 @@ var getIndicatorSize = function (size) {
             return '16px';
     }
 };
-exports.HorizontalLabel = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  align-items: stretch;\n  justify-content: center;\n  cursor: inherit;\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  align-items: stretch;\n  justify-content: center;\n  cursor: inherit;\n  ", "\n"])), function (props) { return (0, radioInteraction_1.nonCheckableWrapperStyles)(props); });
+exports.HorizontalLabel = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  flex: 1 1 auto;\n  align-items: stretch;\n  justify-content: flex-start;\n  cursor: inherit;\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  flex: 1 1 auto;\n  align-items: stretch;\n  justify-content: flex-start;\n  cursor: inherit;\n  ", "\n"])), function (props) { return (0, radioInteraction_1.nonCheckableWrapperStyles)(props); });
 exports.Inner = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  padding: 1rem 1.5rem;\n  min-height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n\n  @media only screen and ", " {\n    padding: 0 1rem;\n  }\n"], ["\n  width: 100%;\n  padding: 1rem 1.5rem;\n  min-height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n\n  @media only screen and ", " {\n    padding: 0 1rem;\n  }\n"])), function (props) { return (props.$innerMinHeight === 'initial' ? 'initial' : '70px'); }, devices_1.devices.sm);
 exports.LeftContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: auto;\n  position: relative;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: auto;\n  position: relative;\n"])));
 exports.Indicator = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 0 0 auto;\n  ", "\n  ", "\n  display: block;\n  position: relative;\n  margin: 0 ", " 0 0;\n  width: ", ";\n  height: ", ";\n"], ["\n  flex: 0 0 auto;\n  ", "\n  ", "\n  display: block;\n  position: relative;\n  margin: 0 ", " 0 0;\n  width: ", ";\n  height: ", ";\n"])), RadioIndicator_styled_1.radioIndicatorIconStyles, function (props) { return props.checked && !props.$disabled && !props.$hasError && RadioIndicator_styled_1.radioIndicatorCheckedStyles; }, function (props) { return props.$labelOffset || "0.5rem"; }, function (props) { return getIndicatorSize(props.$size); }, function (props) { return getIndicatorSize(props.$size); });
@@ -51,13 +51,13 @@ exports.BadgesWrapper = styled_components_1.default.div(templateObject_8 || (tem
 exports.TitleBadgeTopRight = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  display: flex;\n  align-items: center;\n  z-index: 1;\n"], ["\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  display: flex;\n  align-items: center;\n  z-index: 1;\n"])));
 exports.Description = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  color: var(--dark-opacity-50);\n  font: var(--caption-medium-12-15);\n  margin-top: 0.5rem;\n  margin-bottom: 0;\n  width: 100%;\n  display: block;\n\n  p {\n    margin: 0;\n  }\n\n  a {\n    color: inherit;\n  }\n"], ["\n  color: var(--dark-opacity-50);\n  font: var(--caption-medium-12-15);\n  margin-top: 0.5rem;\n  margin-bottom: 0;\n  width: 100%;\n  display: block;\n\n  p {\n    margin: 0;\n  }\n\n  a {\n    color: inherit;\n  }\n"])));
 exports.ErrorMessage = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-top: 8px;\n  color: var(--red);\n\n  svg {\n    margin-right: 8px;\n  }\n\n  p {\n    margin: 0;\n    font: var(--caption-semi-bold-11-13);\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  margin-top: 8px;\n  color: var(--red);\n\n  svg {\n    margin-right: 8px;\n  }\n\n  p {\n    margin: 0;\n    font: var(--caption-semi-bold-11-13);\n  }\n"])));
-exports.HorizontalRoot = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: block;\n  width: 100%;\n"], ["\n  display: block;\n  width: 100%;\n"])));
+exports.HorizontalRoot = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-self: stretch;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-self: stretch;\n  width: 100%;\n"])));
 exports.RightContent = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  flex: 0 0 auto;\n  width: auto;\n  text-align: end;\n  row-gap: 0.25rem;\n  display: grid;\n"], ["\n  flex: 0 0 auto;\n  width: auto;\n  text-align: end;\n  row-gap: 0.25rem;\n  display: grid;\n"])));
 exports.Price = styled_components_1.default.strong(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  color: var(--dark);\n  font: var(--title-bold-16-19);\n"], ["\n  color: var(--dark);\n  font: var(--title-bold-16-19);\n"])));
 exports.TotalPrice = styled_components_1.default.strong(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: block;\n  color: var(--dark-opacity-50);\n  font: var(--caption-semi-bold-12-15);\n"], ["\n  display: block;\n  color: var(--dark-opacity-50);\n  font: var(--caption-semi-bold-12-15);\n"])));
 exports.TotalLabel = styled_components_1.default.span(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  @media only screen and ", " {\n    display: none;\n  }\n"], ["\n  @media only screen and ", " {\n    display: none;\n  }\n"])), devices_1.devices.sm);
 exports.ContentArea = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  width: 100%;\n  padding: 0 1.5rem 1.5rem;\n  box-sizing: border-box;\n  cursor: default;\n\n  @media only screen and ", " {\n    padding: 0 1rem 1rem;\n  }\n"], ["\n  width: 100%;\n  padding: 0 1.5rem 1.5rem;\n  box-sizing: border-box;\n  cursor: default;\n\n  @media only screen and ", " {\n    padding: 0 1rem 1rem;\n  }\n"])), devices_1.devices.sm);
-exports.HorizontalBoxStyled = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  display: block;\n  position: relative;\n  flex: none !important;\n  border-radius: 0.5rem;\n  background-color: var(--theme-bg-color);\n  box-sizing: border-box;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    border: ", ";\n    box-sizing: border-box;\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  ", "\n\n  ", " {\n    cursor: ", ";\n    ", "\n  }\n\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    ", "\n\n    ", "\n\n    ", "\n  }\n"], ["\n  display: block;\n  position: relative;\n  flex: none !important;\n  border-radius: 0.5rem;\n  background-color: var(--theme-bg-color);\n  box-sizing: border-box;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    border: ", ";\n    box-sizing: border-box;\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  ", "\n\n  ", " {\n    cursor: ", ";\n    ", "\n  }\n\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    ", "\n\n    ", "\n\n    ", "\n  }\n"])), function (props) {
+exports.HorizontalBoxStyled = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  flex: 1 1 auto;\n  width: 100%;\n  border-radius: 0.5rem;\n  background-color: var(--theme-bg-color);\n  box-sizing: border-box;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    border: ", ";\n    box-sizing: border-box;\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  ", "\n\n  ", " {\n    cursor: ", ";\n    ", "\n  }\n\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    ", "\n\n    ", "\n\n    ", "\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  flex: 1 1 auto;\n  width: 100%;\n  border-radius: 0.5rem;\n  background-color: var(--theme-bg-color);\n  box-sizing: border-box;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    border: ", ";\n    box-sizing: border-box;\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  ", "\n\n  ", " {\n    cursor: ", ";\n    ", "\n  }\n\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    ", "\n\n    ", "\n\n    ", "\n  }\n"])), function (props) {
     if (props.$disabled)
         return '1px solid var(--grey-10)';
     if (props.$hasError)

package/dist/components/RadioButton/layouts/horizontal/Horizontal.test.js

@@ -68,6 +68,14 @@ describe('RadioButton Horizontal', function () {
         var container = renderHorizontal({ isCheckable: false, checked: true }).container;
         expect(container.querySelector('label')).toHaveStyle({ cursor: 'default' });
     });
+    it('fills parent height so grid cells stay equal', function () {
+        var container = renderHorizontal().container;
+        var root = container.firstChild;
+        var box = root.firstChild;
+        expect(root).toHaveStyle({ display: 'flex' });
+        expect(box).toHaveStyle({ flexGrow: '1' });
+        expect(container.querySelector('label')).toHaveStyle({ flexGrow: '1' });
+    });
     it('does not trigger onChange when isCheckable is false', function () {
         var onChange = jest.fn();
         var container = renderHorizontal({

package/dist/components/RadioGroup/RadioGroup.styled.js

@@ -16,7 +16,7 @@ exports.InfoArea = styled_components_1.default.div(templateObject_3 || (template
 exports.InfoIconWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    color: var(--dark-opacity-50);\n"], ["\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    color: var(--dark-opacity-50);\n"])));
 exports.InfoText = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    margin: 0;\n    flex: 1;\n    font: var(--caption-medium-12-15);\n    color: var(--dark-opacity-50);\n"], ["\n    margin: 0;\n    flex: 1;\n    font: var(--caption-medium-12-15);\n    color: var(--dark-opacity-50);\n"])));
 exports.RadioButtonsWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    gap: ", ";\n    width: 100%;\n\n    ", "\n"], ["\n    gap: ", ";\n    width: 100%;\n\n    ", "\n"])), function (props) { return props.$gap || "0.5rem"; }, function (props) { return props.$gridColumnLength
-    ? "\n        display: grid;\n        grid-template-columns: repeat(".concat(props.$gridColumnLength, ", minmax(0, 1fr));\n        ").concat(props.$isHorizontalOnMobile
+    ? "\n        display: grid;\n        align-items: stretch;\n        grid-template-columns: repeat(".concat(props.$gridColumnLength, ", minmax(0, 1fr));\n        > * {\n            min-width: 0;\n            align-self: stretch;\n        }\n        ").concat(props.$isHorizontalOnMobile
         ? "\n        @media only screen and ".concat(devices_1.devices.md, " {\n            grid-template-columns: 1fr;\n        }\n        ")
         : "", "\n    ")
     : "\n        display: flex;\n        ".concat(props.$isHorizontalOnMobile && props.$layout === "horizontal"

package/dist/components/RadioGroup/RadioGroup.test.js

@@ -50,4 +50,18 @@ describe('RadioGroup', function () {
             ] })).container;
         expect(container.querySelector('label')).toHaveStyle({ cursor: 'default' });
     });
+    it('stretches horizontal options to fill grid cell height', function () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(RadioGroup_1.default, { name: "grid-group", radioLayout: "horizontal", gridColumnLength: 3, options: [
+                __assign(__assign({}, baseOptions[0]), { description: 'Kısa' }),
+                {
+                    id: 'option-b',
+                    label: 'Seçenek B',
+                    value: 'b',
+                    description: 'Daha uzun açıklama, daralınca birden fazla satıra geçer',
+                },
+            ] }));
+        react_1.screen.getAllByRole('radio').forEach(function (radio) {
+            expect(radio.closest('label')).toHaveStyle({ flexGrow: '1' });
+        });
+    });
 });

package/dist/components/RadioGroup/stories/RadioGroup.stories.d.ts

@@ -283,6 +283,60 @@ export declare const GridStackedOnMobile: {
     };
     render: (args: any) => React.JSX.Element;
 };
+export declare const SubscriptionRuleType: {
+    name: string;
+    args: {
+        name: string;
+        label: string;
+        hasInfo: boolean;
+        infoText: string;
+        infoIcon: string;
+        options: {
+            label: string;
+            value: string;
+            description: string;
+        }[];
+        value: string;
+        onChange: (value: any) => void;
+        gap: string;
+        gridColumnLength: number;
+        isFilled: boolean;
+        labelOffset: string;
+        layout: string;
+        radioLayout: string;
+        size: string;
+        textSize: string;
+    };
+    render: (args: any) => React.JSX.Element;
+};
+export declare const SubscriptionRuleTypeWithError: {
+    name: string;
+    args: {
+        name: string;
+        hasError: boolean;
+        value: string;
+        options: {
+            hasError: boolean;
+            label: string;
+            value: string;
+            description: string;
+        }[];
+        label: string;
+        hasInfo: boolean;
+        infoText: string;
+        infoIcon: string;
+        onChange: (value: any) => void;
+        gap: string;
+        gridColumnLength: number;
+        isFilled: boolean;
+        labelOffset: string;
+        layout: string;
+        radioLayout: string;
+        size: string;
+        textSize: string;
+    };
+    render: (args: any) => React.JSX.Element;
+};
 export declare const ColorPicker: {
     args: {
         name: string;

package/dist/components/RadioGroup/stories/RadioGroup.stories.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AllRadioLayouts = exports.VariantPricing = exports.HorizontalInstallmentWithError = exports.HorizontalInstallmentNotCheckable = exports.HorizontalInstallmentWithTitleImage = exports.HorizontalInstallment = exports.BoxedWithIconLayout = exports.WithDescriptions = exports.WithDisabledOptions = exports.ColorPicker = exports.GridStackedOnMobile = exports.GridTwoColumns = exports.WithInfoArea = exports.BoxedMdWithoutIndicator = exports.BoxedMdFilled = exports.BoxedMdLayout = exports.BoxedSmFilled = exports.BoxedSmLayout = exports.BoxedLayout = exports.Horizontal = exports.VerticalHorizontalOnMobile = exports.WithoutIndicator = exports.Default = void 0;
+exports.AllRadioLayouts = exports.VariantPricing = exports.HorizontalInstallmentWithError = exports.HorizontalInstallmentNotCheckable = exports.HorizontalInstallmentWithTitleImage = exports.HorizontalInstallment = exports.BoxedWithIconLayout = exports.WithDescriptions = exports.WithDisabledOptions = exports.ColorPicker = exports.SubscriptionRuleTypeWithError = exports.SubscriptionRuleType = exports.GridStackedOnMobile = exports.GridTwoColumns = exports.WithInfoArea = exports.BoxedMdWithoutIndicator = exports.BoxedMdFilled = exports.BoxedMdLayout = exports.BoxedSmFilled = exports.BoxedSmLayout = exports.BoxedLayout = exports.Horizontal = exports.VerticalHorizontalOnMobile = exports.WithoutIndicator = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
 var RadioGroup_1 = __importDefault(require("../RadioGroup"));
@@ -302,6 +302,49 @@ exports.GridStackedOnMobile = {
         ] }),
     render: exports.GridTwoColumns.render,
 };
+exports.SubscriptionRuleType = {
+    name: "Grid 3 sütun (abonelik tipi, filled + açıklama)",
+    args: {
+        name: "subscriptionRuleType",
+        label: "Abonelik tipi",
+        hasInfo: true,
+        infoText: "Bu kuralda hangi model(ler) sunulacak? Esnek + Taahhütlü seçersen müşteri checkout'ta ikisi arasında seçim yapar — her ikisinin kuralları (sıklık, duraklatma/atlama modülleri ve taahhüt süreleri) birlikte aşağıda yapılandırılır.",
+        infoIcon: "InfoSquare",
+        options: [
+            {
+                label: "Esnek",
+                value: "flexible",
+                description: "Taahhütsüz, gönderim sıklığı seçilebilir, müşteri istediği zaman iptal eder.",
+            },
+            {
+                label: "Taahhütlü",
+                value: "committed",
+                description: "Sadece taahhütlü, süre seçimi (6 ay, 12 ay) ve cayma bedeli bulunur.",
+            },
+            {
+                label: "Esnek+Taahhütlü",
+                value: "hybrid",
+                description: "İkisi birlikte sunulur, müşteri esnek veya taahhütlü seçimi yapar.",
+            },
+        ],
+        value: "flexible",
+        onChange: function (value) { return console.log("Selected value:", value); },
+        gap: "1rem",
+        gridColumnLength: 3,
+        isFilled: true,
+        labelOffset: "1rem",
+        layout: "horizontal",
+        radioLayout: "horizontal",
+        size: "small",
+        textSize: "medium",
+    },
+    render: function (args) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "960px" } }, { children: (0, jsx_runtime_1.jsx)(RadioGroup_1.default, __assign({}, args)) }))); },
+};
+exports.SubscriptionRuleTypeWithError = {
+    name: "Grid 3 sütun (abonelik tipi) — error",
+    args: __assign(__assign({}, exports.SubscriptionRuleType.args), { name: "subscriptionRuleTypeError", hasError: true, value: "", options: exports.SubscriptionRuleType.args.options.map(function (option) { return (__assign(__assign({}, option), { hasError: true })); }) }),
+    render: exports.SubscriptionRuleType.render,
+};
 exports.ColorPicker = {
     args: {
         name: "colorRadioGroup",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "krl-alfred",
-  "version": "2.24.7",
+  "version": "2.24.8",
   "files": [
     "dist"
   ],