krl-alfred 2.18.13 → 2.18.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/components/ProductCardVertical/ProductCardVertical.d.ts +1 -1
  2. package/dist/components/ProductCardVertical/ProductCardVertical.js +12 -13
  3. package/dist/components/ProductCardVertical/ProductCardVertical.styled.d.ts +24 -0
  4. package/dist/components/ProductCardVertical/ProductCardVertical.styled.js +71 -3
  5. package/dist/components/ProductCardVertical/index.d.ts +2 -1
  6. package/dist/components/ProductCardVertical/index.js +21 -1
  7. package/dist/components/ProductCardVertical/stories/ProductCardVertical.stories.d.ts +265 -251
  8. package/dist/components/ProductCardVertical/stories/ProductCardVertical.stories.js +67 -48
  9. package/package.json +1 -1
package/dist/components/ProductCardVertical/ProductCardVertical.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from "react";
2
- declare const _default: React.MemoExoticComponent<({ title, description, hasDiscount, price, oldPrice, oldPricePeriod, slug, period, discountRate, isResponsive, image, hasCustomBadge, customBadge, hasNewImageType, hasOutOfStock, hasBeltBadge, beltBadgeVariant, beltBadgeTitle, imageInfoText, imageInfoTextVariant, isShowOldPrice, isOldPricePeriodUnderline, hasImageOffset, ...other }: import("./props").ProductCardVertical) => import("react/jsx-runtime").JSX.Element>;
2
+ declare const _default: React.MemoExoticComponent<({ title, description, hasDiscount, price, oldPrice, oldPricePeriod, slug, period, discountRate, isResponsive, image, hasCustomBadge, customBadge, hasNewImageType, hasOutOfStock, hasBeltBadge, beltBadgeVariant, beltBadgeTitle, imageInfoText, imageInfoTextVariant, isShowOldPrice, isOldPricePeriodUnderline, hasImageOffset, }: import("./props").ProductCardVertical) => import("react/jsx-runtime").JSX.Element>;
3
3
  export default _default;
package/dist/components/ProductCardVertical/ProductCardVertical.js CHANGED
@@ -10,17 +10,6 @@ var __assign = (this && this.__assign) || function () {
10
10
  };
11
11
  return __assign.apply(this, arguments);
12
12
  };
13
- var __rest = (this && this.__rest) || function (s, e) {
14
- var t = {};
15
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
- t[p] = s[p];
17
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
- t[p[i]] = s[p[i]];
21
- }
22
- return t;
23
- };
24
13
  var __importDefault = (this && this.__importDefault) || function (mod) {
25
14
  return (mod && mod.__esModule) ? mod : { "default": mod };
26
15
  };
@@ -32,8 +21,18 @@ var ProductCardVertical_styled_1 = require("./ProductCardVertical.styled");
32
21
  var react_i18next_1 = require("react-i18next");
33
22
  var Badges_1 = __importDefault(require("../Badges"));
34
23
  var ProductCardVertical = function (_a) {
35
- var _b = _a.title, title = _b === void 0 ? props_1.ProductCardVerticalDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.ProductCardVerticalDefault.description : _c, _d = _a.hasDiscount, hasDiscount = _d === void 0 ? props_1.ProductCardVerticalDefault.hasDiscount : _d, _e = _a.price, price = _e === void 0 ? props_1.ProductCardVerticalDefault.price : _e, _f = _a.oldPrice, oldPrice = _f === void 0 ? props_1.ProductCardVerticalDefault.oldPrice : _f, _g = _a.oldPricePeriod, oldPricePeriod = _g === void 0 ? props_1.ProductCardVerticalDefault.oldPricePeriod : _g, _h = _a.slug, slug = _h === void 0 ? props_1.ProductCardVerticalDefault.slug : _h, _j = _a.period, period = _j === void 0 ? props_1.ProductCardVerticalDefault.period : _j, _k = _a.discountRate, discountRate = _k === void 0 ? props_1.ProductCardVerticalDefault.discountRate : _k, _l = _a.isResponsive, isResponsive = _l === void 0 ? props_1.ProductCardVerticalDefault.isResponsive : _l, _m = _a.image, image = _m === void 0 ? props_1.ProductCardVerticalDefault.image : _m, _o = _a.hasCustomBadge, hasCustomBadge = _o === void 0 ? props_1.ProductCardVerticalDefault.hasCustomBadge : _o, _p = _a.customBadge, customBadge = _p === void 0 ? props_1.ProductCardVerticalDefault.customBadge : _p, _q = _a.hasNewImageType, hasNewImageType = _q === void 0 ? props_1.ProductCardVerticalDefault.hasNewImageType : _q, _r = _a.hasOutOfStock, hasOutOfStock = _r === void 0 ? props_1.ProductCardVerticalDefault.hasOutOfStock : _r, _s = _a.hasBeltBadge, hasBeltBadge = _s === void 0 ? props_1.ProductCardVerticalDefault.hasBeltBadge : _s, _t = _a.beltBadgeVariant, beltBadgeVariant = _t === void 0 ? props_1.ProductCardVerticalDefault.beltBadgeVariant : _t, _u = _a.beltBadgeTitle, beltBadgeTitle = _u === void 0 ? props_1.ProductCardVerticalDefault.beltBadgeTitle : _u, _v = _a.imageInfoText, imageInfoText = _v === void 0 ? props_1.ProductCardVerticalDefault.imageInfoText : _v, _w = _a.imageInfoTextVariant, imageInfoTextVariant = _w === void 0 ? props_1.ProductCardVerticalDefault.imageInfoTextVariant : _w, _x = _a.isShowOldPrice, isShowOldPrice = _x === void 0 ? props_1.ProductCardVerticalDefault.isShowOldPrice : _x, _y = _a.isOldPricePeriodUnderline, isOldPricePeriodUnderline = _y === void 0 ? props_1.ProductCardVerticalDefault.isOldPricePeriodUnderline : _y, _z = _a.hasImageOffset, hasImageOffset = _z === void 0 ? props_1.ProductCardVerticalDefault.hasImageOffset : _z, other = __rest(_a, ["title", "description", "hasDiscount", "price", "oldPrice", "oldPricePeriod", "slug", "period", "discountRate", "isResponsive", "image", "hasCustomBadge", "customBadge", "hasNewImageType", "hasOutOfStock", "hasBeltBadge", "beltBadgeVariant", "beltBadgeTitle", "imageInfoText", "imageInfoTextVariant", "isShowOldPrice", "isOldPricePeriodUnderline", "hasImageOffset"]);
24
+ var _b = _a.title, title = _b === void 0 ? props_1.ProductCardVerticalDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.ProductCardVerticalDefault.description : _c, _d = _a.hasDiscount, hasDiscount = _d === void 0 ? props_1.ProductCardVerticalDefault.hasDiscount : _d, _e = _a.price, price = _e === void 0 ? props_1.ProductCardVerticalDefault.price : _e, _f = _a.oldPrice, oldPrice = _f === void 0 ? props_1.ProductCardVerticalDefault.oldPrice : _f, _g = _a.oldPricePeriod, oldPricePeriod = _g === void 0 ? props_1.ProductCardVerticalDefault.oldPricePeriod : _g, _h = _a.slug, slug = _h === void 0 ? props_1.ProductCardVerticalDefault.slug : _h, _j = _a.period, period = _j === void 0 ? props_1.ProductCardVerticalDefault.period : _j, _k = _a.discountRate, discountRate = _k === void 0 ? props_1.ProductCardVerticalDefault.discountRate : _k, _l = _a.isResponsive, isResponsive = _l === void 0 ? props_1.ProductCardVerticalDefault.isResponsive : _l, _m = _a.image, image = _m === void 0 ? props_1.ProductCardVerticalDefault.image : _m, _o = _a.hasCustomBadge, hasCustomBadge = _o === void 0 ? props_1.ProductCardVerticalDefault.hasCustomBadge : _o, _p = _a.customBadge, customBadge = _p === void 0 ? props_1.ProductCardVerticalDefault.customBadge : _p, _q = _a.hasNewImageType, hasNewImageType = _q === void 0 ? props_1.ProductCardVerticalDefault.hasNewImageType : _q, _r = _a.hasOutOfStock, hasOutOfStock = _r === void 0 ? props_1.ProductCardVerticalDefault.hasOutOfStock : _r, _s = _a.hasBeltBadge, hasBeltBadge = _s === void 0 ? props_1.ProductCardVerticalDefault.hasBeltBadge : _s, _t = _a.beltBadgeVariant, beltBadgeVariant = _t === void 0 ? props_1.ProductCardVerticalDefault.beltBadgeVariant : _t, _u = _a.beltBadgeTitle, beltBadgeTitle = _u === void 0 ? props_1.ProductCardVerticalDefault.beltBadgeTitle : _u, _v = _a.imageInfoText, imageInfoText = _v === void 0 ? props_1.ProductCardVerticalDefault.imageInfoText : _v, _w = _a.imageInfoTextVariant, imageInfoTextVariant = _w === void 0 ? props_1.ProductCardVerticalDefault.imageInfoTextVariant : _w, _x = _a.isShowOldPrice, isShowOldPrice = _x === void 0 ? props_1.ProductCardVerticalDefault.isShowOldPrice : _x, _y = _a.isOldPricePeriodUnderline, isOldPricePeriodUnderline = _y === void 0 ? props_1.ProductCardVerticalDefault.isOldPricePeriodUnderline : _y, _z = _a.hasImageOffset, hasImageOffset = _z === void 0 ? props_1.ProductCardVerticalDefault.hasImageOffset : _z;
36
25
  var t = (0, react_i18next_1.useTranslation)().t;
37
- return ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.ProductCardVerticalStyled, __assign({ "$isResponsive": isResponsive, "$discountRate": discountRate, "$hasNewImageType": hasNewImageType, "$hasOutOfStock": hasOutOfStock, "$imageInfoTextVariant": imageInfoTextVariant, "$isOldPricePeriodUnderline": isOldPricePeriodUnderline, "$hasImageOffset": hasImageOffset }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [hasBeltBadge && !hasCustomBadge && (0, jsx_runtime_1.jsx)("div", __assign({ className: "cartBadge" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { variant: beltBadgeVariant, size: "medium", left: (isResponsive ? '16px' : '8px'), top: (isResponsive ? '16px' : '8px'), title: beltBadgeTitle }) })), hasCustomBadge && (0, jsx_runtime_1.jsx)("div", __assign({ className: "cartBadge hasInset" }, { children: customBadge })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "img" }, { children: [image, hasOutOfStock && (0, jsx_runtime_1.jsx)("div", __assign({ className: "outOfStock" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "light", title: t("ALL_RENTED") }) })), imageInfoText && (0, jsx_runtime_1.jsx)("div", { className: "imageInfoText", dangerouslySetInnerHTML: { __html: imageInfoText } })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardContent" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: title })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "productCardDescription" }, { children: description })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate" }, { children: ["%", discountRate] })), (0, jsx_runtime_1.jsxs)("div", { children: [oldPrice && isShowOldPrice && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: oldPrice })), oldPricePeriod && (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(oldPricePeriod) }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "newPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: price })), period && (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(period) }))] }))] })] }))] }))] }) })));
26
+ var badgeOffset = isResponsive ? "16px" : "8px";
27
+ var cardProps = {
28
+ $isResponsive: isResponsive,
29
+ $discountRate: discountRate,
30
+ $hasNewImageType: hasNewImageType,
31
+ $hasOutOfStock: hasOutOfStock,
32
+ $imageInfoTextVariant: imageInfoTextVariant,
33
+ $isOldPricePeriodUnderline: isOldPricePeriodUnderline,
34
+ $hasImageOffset: hasImageOffset,
35
+ };
36
+ return ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.ProductCardVerticalStyled, __assign({}, cardProps, { children: (0, jsx_runtime_1.jsxs)(ProductCardVertical_styled_1.CardBody, { children: [hasBeltBadge && !hasCustomBadge && ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.CartBadge, __assign({ "$isResponsive": isResponsive, "$isInset": false }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { variant: beltBadgeVariant, size: "medium", left: badgeOffset, top: badgeOffset, title: beltBadgeTitle }) }))), hasCustomBadge && ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.CartBadge, __assign({ "$isResponsive": isResponsive, "$isInset": true }, { children: customBadge }))), (0, jsx_runtime_1.jsxs)(ProductCardVertical_styled_1.ImageSection, __assign({}, cardProps, { children: [image, hasOutOfStock && ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.OutOfStock, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "light", title: t("ALL_RENTED") }) })), imageInfoText && ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.ImageInfoText, __assign({}, cardProps, { dangerouslySetInnerHTML: { __html: imageInfoText } })))] })), (0, jsx_runtime_1.jsxs)(ProductCardVertical_styled_1.ProductCardContent, __assign({ "$isResponsive": isResponsive }, { children: [(0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.ProductTitle, __assign({ "$hasOutOfStock": hasOutOfStock, "$isResponsive": isResponsive }, { children: title })), (0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.ProductDescription, __assign({ "$isResponsive": isResponsive }, { children: description })), (0, jsx_runtime_1.jsxs)(ProductCardVertical_styled_1.PriceLayout, __assign({}, cardProps, { children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)(ProductCardVertical_styled_1.DiscountPill, __assign({ "$isResponsive": isResponsive }, { children: ["%", discountRate] })), (0, jsx_runtime_1.jsxs)(ProductCardVertical_styled_1.PriceStack, { children: [oldPrice && isShowOldPrice && ((0, jsx_runtime_1.jsxs)(ProductCardVertical_styled_1.OldPrice, { children: [(0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.OldPriceAmount, __assign({ "$isResponsive": isResponsive }, { children: oldPrice })), oldPricePeriod && ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.OldPricePeriod, __assign({ "$isOldPricePeriodUnderline": isOldPricePeriodUnderline }, { children: "/".concat(oldPricePeriod) })))] })), (0, jsx_runtime_1.jsxs)(ProductCardVertical_styled_1.NewPrice, { children: [(0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.NewPriceAmount, __assign({ "$isResponsive": isResponsive }, { children: price })), period && (0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.NewPricePeriod, __assign({ "$isResponsive": isResponsive }, { children: "/".concat(period) }))] })] })] }))] }))] }) })));
38
37
  };
39
38
  exports.default = (0, react_1.memo)(ProductCardVertical);
package/dist/components/ProductCardVertical/ProductCardVertical.styled.d.ts CHANGED
@@ -1,3 +1,27 @@
1
1
  /// <reference types="react" />
2
2
  import { ProductCardVerticalStyledProps } from "./props";
3
+ export declare const ProductCardRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never>>> & string;
4
+ export declare const CardBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
5
+ type CartBadgeProps = {
6
+ $isInset?: boolean;
7
+ $isResponsive?: boolean;
8
+ };
9
+ export declare const CartBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof CartBadgeProps> & CartBadgeProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof CartBadgeProps> & CartBadgeProps, never>>> & string;
10
+ export declare const ImageSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never>>> & string;
11
+ export declare const OutOfStock: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
12
+ export declare const ImageInfoText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never>>> & string;
13
+ export declare const ProductCardContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never>>> & string;
14
+ export declare const ProductTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never>>> & string;
15
+ export declare const ProductDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never>>> & string;
16
+ export declare const PriceLayout: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never>>> & string;
17
+ export declare const DiscountPill: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never>>> & string;
18
+ export declare const PriceStack: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
19
+ export declare const OldPrice: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
20
+ export declare const OldPriceAmount: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never>>> & string;
21
+ export declare const OldPricePeriod: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never>>> & string;
22
+ export declare const NewPrice: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
23
+ export declare const NewPriceAmount: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never>>> & string;
24
+ export declare const NewPricePeriod: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never>>> & string;
25
+ /** Dış tüketimde kullanım için (root ile aynı) */
3
26
  export declare const ProductCardVerticalStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never>>> & string;
27
+ export {};
package/dist/components/ProductCardVertical/ProductCardVertical.styled.js CHANGED
@@ -7,8 +7,76 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
7
7
  return (mod && mod.__esModule) ? mod : { "default": mod };
8
8
  };
9
9
  Object.defineProperty(exports, "__esModule", { value: true });
10
- exports.ProductCardVerticalStyled = void 0;
10
+ exports.ProductCardVerticalStyled = exports.NewPricePeriod = exports.NewPriceAmount = exports.NewPrice = exports.OldPricePeriod = exports.OldPriceAmount = exports.OldPrice = exports.PriceStack = exports.DiscountPill = exports.PriceLayout = exports.ProductDescription = exports.ProductTitle = exports.ProductCardContent = exports.ImageInfoText = exports.OutOfStock = exports.ImageSection = exports.CartBadge = exports.CardBody = exports.ProductCardRoot = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
12
  var devices_1 = require("../../constants/devices");
13
- exports.ProductCardVerticalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n background-color: white;\n .cartBadge {\n position: absolute;\n left: 8px;\n top: 8px;\n z-index: 2;\n\n &:is(.hasInset) {\n left: 7px;\n top: 0;\n }\n }\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n &:hover {\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n\n .img {\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n height: 150px;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n ", "\n ", "\n .outOfStock{\n width: 100% !important;\n height: 100% !important;\n background-color: #BABBC280;\n position: absolute;\n inset: 0;\n align-items: center;\n justify-content: center;\n display: flex;\n > div{\n height: 17px !important;\n aspect-ratio: initial !important;\n }\n }\n .imageInfoText{\n position: absolute;\n bottom: 0;\n left: 0;\n top:auto !important;\n width: 100%;\n height: 24px !important;\n align-items: center;\n justify-content: center;\n display: flex;\n ", "\n border-radius: 0;\n top: auto;\n transform: none;\n aspect-ratio: initial !important;\n font:var(--caption-semi-bold-10-12); \n strong{\n font:var(--caption-bold-10-12);\n height: auto !important;\n aspect-ratio: initial !important;\n margin-right: 2px;\n }\n }\n }\n\n .productCardContent {\n padding: 1rem 0 0.5rem 0;\n\n .productCardTitle {\n display: block;\n color: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 38px;\n word-break: break-word;\n font: var(--title-bold-16-19);\n }\n\n .productCardDescription {\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: 1.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 34px;\n word-break: break-word;\n font: var(--body-medium-14-17);\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\n color: ", ";\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font: var(--body-extra-bold-13-16);\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 4px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n \n .price {\n font: var(--caption-semi-bold-12-15);\n text-decoration: line-through;\n }\n\n .period {\n font: var(--caption-regular-12-15);\n ", "\n }\n }\n\n .newPrice {\n .price {\n font: var(--body-extra-bold-14-17);\n }\n\n .period {\n font: var(--body-regular-13-16);\n }\n }\n }\n }\n\n ", "\n"], ["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n background-color: white;\n .cartBadge {\n position: absolute;\n left: 8px;\n top: 8px;\n z-index: 2;\n\n &:is(.hasInset) {\n left: 7px;\n top: 0;\n }\n }\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n &:hover {\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n\n .img {\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n height: 150px;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n ", "\n ", "\n .outOfStock{\n width: 100% !important;\n height: 100% !important;\n background-color: #BABBC280;\n position: absolute;\n inset: 0;\n align-items: center;\n justify-content: center;\n display: flex;\n > div{\n height: 17px !important;\n aspect-ratio: initial !important;\n }\n }\n .imageInfoText{\n position: absolute;\n bottom: 0;\n left: 0;\n top:auto !important;\n width: 100%;\n height: 24px !important;\n align-items: center;\n justify-content: center;\n display: flex;\n ", "\n border-radius: 0;\n top: auto;\n transform: none;\n aspect-ratio: initial !important;\n font:var(--caption-semi-bold-10-12); \n strong{\n font:var(--caption-bold-10-12);\n height: auto !important;\n aspect-ratio: initial !important;\n margin-right: 2px;\n }\n }\n }\n\n .productCardContent {\n padding: 1rem 0 0.5rem 0;\n\n .productCardTitle {\n display: block;\n color: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 38px;\n word-break: break-word;\n font: var(--title-bold-16-19);\n }\n\n .productCardDescription {\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: 1.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 34px;\n word-break: break-word;\n font: var(--body-medium-14-17);\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\n color: ", ";\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font: var(--body-extra-bold-13-16);\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 4px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n \n .price {\n font: var(--caption-semi-bold-12-15);\n text-decoration: line-through;\n }\n\n .period {\n font: var(--caption-regular-12-15);\n ", "\n }\n }\n\n .newPrice {\n .price {\n font: var(--body-extra-bold-14-17);\n }\n\n .period {\n font: var(--body-regular-13-16);\n }\n }\n }\n }\n\n ", "\n"])), function (props) { return props.$hasImageOffset ? "\n padding: 0.5rem;\n " : "\n padding: 0;\n background-color:var(--dark-opacity-5);\n "; }, function (props) { return props.$hasNewImageType ? "\n *{\n height: 100% !important;\n object-fit: ".concat(props.$hasImageOffset ? 'contain' : 'cover', ";\n max-width: 100%;\n }\n ") : "\n > * {\n width: 100%;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n *{ \n height: calc(100% - 0.5rem) !important;\n aspect-ratio: 1 / 1 !important;\n }\n "; }, function (props) { return props.$imageInfoTextVariant === "secondary" ? "\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n " : "\n background: linear-gradient(360deg, #411590 0%, #9760FC 100%);\n color: white;\n "; }, function (props) { return props.$hasOutOfStock ? "var(--dark-opacity-50)" : "var(--dark)"; }, function (props) { return props.$discountRate ? 'center' : 'end'; }, function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.$hasOutOfStock ? "var(--dark-opacity-50)" : "var(--dark)"; }, function (props) { return props.$isOldPricePeriodUnderline ? "text-decoration: line-through;" : ""; }, function (props) { return props.$isResponsive && "\n @media only screen and ".concat(devices_1.devices.sm, " {\n padding: 1.5rem;\n .cartBadge{\n left: 16px;\n top: 16px;\n &:is(.hasInset){\n left: 15px;\n top: 8px;\n }\n }\n .img {\n height: 215px;\n .imageInfoText{\n font:var(--body-semi-bold-13-16);\n height: 32px !important;\n strong{\n font:var(--body-bold-13-16);\n }\n }\n }\n .productCardContent{\n padding: 1.5rem 0 0.5rem 0;\n .productCardTitle{\n height: 44px;\n font: var(--headline-bold-18-22);\n }\n .productCardDescription{\n margin-bottom: 1.5rem;\n height: 37px;\n font: var(--title-medium-16-19);\n }\n .productCardPriceContent{\n height: 48px;\n .discountRate{\n width: 65px;\n height: 48px;\n font: var(--title-extra-bold-16-19);\n }\n \n .oldPrice {\n .price{\n font: var(--body-semi-bold-13-16);\n }\n }\n .newPrice {\n .price{\n font: var(--title-extra-bold-16-19);\n }\n .period{\n font: var(--body-regular-14-17);\n }\n }\n }\n }\n }\n "); });
14
- var templateObject_1;
13
+ var responsiveSm = function (cssBlock) { return "\n @media only screen and ".concat(devices_1.devices.sm, " {\n ").concat(cssBlock, "\n }\n"); };
14
+ exports.ProductCardRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all 0.2s ease;\n position: relative;\n box-sizing: border-box;\n background-color: white;\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n &:hover {\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n\n ", "\n"], ["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all 0.2s ease;\n position: relative;\n box-sizing: border-box;\n background-color: white;\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n &:hover {\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n\n ", "\n"])), function (props) {
15
+ return props.$isResponsive &&
16
+ responsiveSm("padding: 1.5rem;");
17
+ });
18
+ exports.CardBody = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
19
+ exports.CartBadge = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n left: -8px;\n top: -8px;\n z-index: 2;\n\n ", "\n\n ", "\n"], ["\n position: absolute;\n left: -8px;\n top: -8px;\n z-index: 2;\n\n ", "\n\n ", "\n"])), function (p) {
20
+ return p.$isInset &&
21
+ "\n left: 7px;\n top: 0;\n ";
22
+ }, function (p) {
23
+ return p.$isResponsive &&
24
+ responsiveSm("\n ".concat(p.$isInset ? "left: 15px; top: 8px;" : "", "\n "));
25
+ });
26
+ exports.ImageSection = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #fff;\n position: relative;\n overflow: hidden;\n height: 150px;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n\n ", "\n\n ", "\n\n ", "\n"], ["\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #fff;\n position: relative;\n overflow: hidden;\n height: 150px;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n\n ", "\n\n ", "\n\n ", "\n"])), function (props) {
27
+ return props.$hasImageOffset
28
+ ? "\n padding: 0.5rem;\n "
29
+ : "\n padding: 0;\n background-color: var(--dark-opacity-5);\n ";
30
+ }, function (props) {
31
+ return props.$hasNewImageType
32
+ ? "\n * {\n height: 100% !important;\n object-fit: ".concat(props.$hasImageOffset ? "contain" : "cover", ";\n max-width: 100%;\n }\n ")
33
+ : "\n > * {\n width: 100%;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n * {\n height: calc(100% - 0.5rem) !important;\n aspect-ratio: 1 / 1 !important;\n }\n ";
34
+ }, function (props) {
35
+ return props.$isResponsive &&
36
+ responsiveSm("height: 215px;");
37
+ });
38
+ exports.OutOfStock = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: 100% !important;\n height: 100% !important;\n background-color: #babbc280;\n position: absolute;\n inset: 0;\n align-items: center;\n justify-content: center;\n display: flex;\n > div {\n height: 17px !important;\n aspect-ratio: initial !important;\n }\n"], ["\n width: 100% !important;\n height: 100% !important;\n background-color: #babbc280;\n position: absolute;\n inset: 0;\n align-items: center;\n justify-content: center;\n display: flex;\n > div {\n height: 17px !important;\n aspect-ratio: initial !important;\n }\n"])));
39
+ exports.ImageInfoText = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n bottom: 0;\n left: 0;\n top: auto !important;\n width: 100%;\n height: 24px !important;\n align-items: center;\n justify-content: center;\n display: flex;\n border-radius: 0;\n transform: none;\n aspect-ratio: initial !important;\n font: var(--caption-semi-bold-10-12);\n\n ", "\n\n strong {\n font: var(--caption-bold-10-12);\n height: auto !important;\n aspect-ratio: initial !important;\n margin-right: 2px;\n }\n\n ", "\n"], ["\n position: absolute;\n bottom: 0;\n left: 0;\n top: auto !important;\n width: 100%;\n height: 24px !important;\n align-items: center;\n justify-content: center;\n display: flex;\n border-radius: 0;\n transform: none;\n aspect-ratio: initial !important;\n font: var(--caption-semi-bold-10-12);\n\n ", "\n\n strong {\n font: var(--caption-bold-10-12);\n height: auto !important;\n aspect-ratio: initial !important;\n margin-right: 2px;\n }\n\n ", "\n"])), function (props) {
40
+ return props.$imageInfoTextVariant === "secondary"
41
+ ? "\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n "
42
+ : "\n background: var(--dark);\n color: white;\n ";
43
+ }, function (props) {
44
+ return props.$isResponsive &&
45
+ responsiveSm("\n font: var(--body-semi-bold-13-16);\n height: 32px !important;\n strong {\n font: var(--body-bold-13-16);\n }\n ");
46
+ });
47
+ exports.ProductCardContent = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding: 1rem 0 0.5rem 0;\n\n ", "\n"], ["\n padding: 1rem 0 0.5rem 0;\n\n ", "\n"])), function (props) { return props.$isResponsive && responsiveSm("padding: 1.5rem 0 0.5rem 0;"); });
48
+ exports.ProductTitle = styled_components_1.default.strong(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: block;\n color: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 38px;\n word-break: break-word;\n font: var(--title-bold-16-19);\n\n ", "\n"], ["\n display: block;\n color: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 38px;\n word-break: break-word;\n font: var(--title-bold-16-19);\n\n ", "\n"])), function (props) { return (props.$hasOutOfStock ? "var(--dark-opacity-50)" : "var(--dark)"); }, function (props) {
49
+ return props.$isResponsive &&
50
+ responsiveSm("\n height: 44px;\n font: var(--headline-bold-18-22);\n ");
51
+ });
52
+ exports.ProductDescription = styled_components_1.default.p(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: 1.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 34px;\n word-break: break-word;\n font: var(--body-medium-14-17);\n\n ", "\n"], ["\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: 1.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 34px;\n word-break: break-word;\n font: var(--body-medium-14-17);\n\n ", "\n"])), function (props) {
53
+ return props.$isResponsive &&
54
+ responsiveSm("\n margin-bottom: 1.5rem;\n height: 37px;\n font: var(--title-medium-16-19);\n ");
55
+ });
56
+ exports.PriceLayout = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\n color: ", ";\n\n ", "\n"], ["\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\n color: ", ";\n\n ", "\n"])), function (props) { return (props.$discountRate ? "center" : "end"); }, function (props) { return (props.$discountRate ? "auto 1fr" : "1fr"); }, function (props) { return (props.$hasOutOfStock ? "var(--dark-opacity-50)" : "var(--dark)"); }, function (props) {
57
+ return props.$isResponsive &&
58
+ responsiveSm("height: 48px;");
59
+ });
60
+ exports.DiscountPill = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font: var(--body-extra-bold-13-16);\n\n ", "\n"], ["\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font: var(--body-extra-bold-13-16);\n\n ", "\n"])), function (props) {
61
+ return props.$isResponsive &&
62
+ responsiveSm("\n width: 65px;\n height: 48px;\n font: var(--title-extra-bold-16-19);\n ");
63
+ });
64
+ exports.PriceStack = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-end;\n min-width: 0;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-end;\n min-width: 0;\n"])));
65
+ exports.OldPrice = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n display: flex;\n align-items: end;\n justify-content: flex-start;\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n"], ["\n display: flex;\n align-items: end;\n justify-content: flex-start;\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n"])));
66
+ exports.OldPriceAmount = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n margin-right: 4px;\n font: var(--caption-semi-bold-12-15);\n text-decoration: line-through;\n\n ", "\n"], ["\n margin-right: 4px;\n font: var(--caption-semi-bold-12-15);\n text-decoration: line-through;\n\n ", "\n"])), function (props) {
67
+ return props.$isResponsive &&
68
+ responsiveSm("font: var(--body-semi-bold-13-16);");
69
+ });
70
+ exports.OldPricePeriod = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n font: var(--caption-regular-12-15);\n ", "\n"], ["\n font: var(--caption-regular-12-15);\n ", "\n"])), function (props) { return props.$isOldPricePeriodUnderline && "text-decoration: line-through;"; });
71
+ exports.NewPrice = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n display: flex;\n align-items: end;\n justify-content: flex-start;\n"], ["\n display: flex;\n align-items: end;\n justify-content: flex-start;\n"])));
72
+ exports.NewPriceAmount = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n margin-right: 4px;\n font: var(--body-extra-bold-14-17);\n\n ", "\n"], ["\n margin-right: 4px;\n font: var(--body-extra-bold-14-17);\n\n ", "\n"])), function (props) {
73
+ return props.$isResponsive &&
74
+ responsiveSm("font: var(--title-extra-bold-16-19);");
75
+ });
76
+ exports.NewPricePeriod = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n font: var(--body-regular-13-16);\n\n ", "\n"], ["\n font: var(--body-regular-13-16);\n\n ", "\n"])), function (props) {
77
+ return props.$isResponsive &&
78
+ responsiveSm("font: var(--body-regular-14-17);");
79
+ });
80
+ /** Dış tüketimde kullanım için (root ile aynı) */
81
+ exports.ProductCardVerticalStyled = exports.ProductCardRoot;
82
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;
package/dist/components/ProductCardVertical/index.d.ts CHANGED
@@ -1 +1,2 @@
1
- export { default } from './ProductCardVertical';
1
+ export { default } from "./ProductCardVertical";
2
+ export { ProductCardRoot, ProductCardVerticalStyled, CardBody, CartBadge, ImageSection, OutOfStock, ImageInfoText, ProductCardContent, ProductTitle, ProductDescription, PriceLayout, DiscountPill, PriceStack, OldPrice, OldPriceAmount, OldPricePeriod, NewPrice, NewPriceAmount, NewPricePeriod, } from "./ProductCardVertical.styled";
package/dist/components/ProductCardVertical/index.js CHANGED
@@ -3,6 +3,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.default = void 0;
6
+ exports.NewPricePeriod = exports.NewPriceAmount = exports.NewPrice = exports.OldPricePeriod = exports.OldPriceAmount = exports.OldPrice = exports.PriceStack = exports.DiscountPill = exports.PriceLayout = exports.ProductDescription = exports.ProductTitle = exports.ProductCardContent = exports.ImageInfoText = exports.OutOfStock = exports.ImageSection = exports.CartBadge = exports.CardBody = exports.ProductCardVerticalStyled = exports.ProductCardRoot = exports.default = void 0;
7
7
  var ProductCardVertical_1 = require("./ProductCardVertical");
8
8
  Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ProductCardVertical_1).default; } });
9
+ var ProductCardVertical_styled_1 = require("./ProductCardVertical.styled");
10
+ Object.defineProperty(exports, "ProductCardRoot", { enumerable: true, get: function () { return ProductCardVertical_styled_1.ProductCardRoot; } });
11
+ Object.defineProperty(exports, "ProductCardVerticalStyled", { enumerable: true, get: function () { return ProductCardVertical_styled_1.ProductCardVerticalStyled; } });
12
+ Object.defineProperty(exports, "CardBody", { enumerable: true, get: function () { return ProductCardVertical_styled_1.CardBody; } });
13
+ Object.defineProperty(exports, "CartBadge", { enumerable: true, get: function () { return ProductCardVertical_styled_1.CartBadge; } });
14
+ Object.defineProperty(exports, "ImageSection", { enumerable: true, get: function () { return ProductCardVertical_styled_1.ImageSection; } });
15
+ Object.defineProperty(exports, "OutOfStock", { enumerable: true, get: function () { return ProductCardVertical_styled_1.OutOfStock; } });
16
+ Object.defineProperty(exports, "ImageInfoText", { enumerable: true, get: function () { return ProductCardVertical_styled_1.ImageInfoText; } });
17
+ Object.defineProperty(exports, "ProductCardContent", { enumerable: true, get: function () { return ProductCardVertical_styled_1.ProductCardContent; } });
18
+ Object.defineProperty(exports, "ProductTitle", { enumerable: true, get: function () { return ProductCardVertical_styled_1.ProductTitle; } });
19
+ Object.defineProperty(exports, "ProductDescription", { enumerable: true, get: function () { return ProductCardVertical_styled_1.ProductDescription; } });
20
+ Object.defineProperty(exports, "PriceLayout", { enumerable: true, get: function () { return ProductCardVertical_styled_1.PriceLayout; } });
21
+ Object.defineProperty(exports, "DiscountPill", { enumerable: true, get: function () { return ProductCardVertical_styled_1.DiscountPill; } });
22
+ Object.defineProperty(exports, "PriceStack", { enumerable: true, get: function () { return ProductCardVertical_styled_1.PriceStack; } });
23
+ Object.defineProperty(exports, "OldPrice", { enumerable: true, get: function () { return ProductCardVertical_styled_1.OldPrice; } });
24
+ Object.defineProperty(exports, "OldPriceAmount", { enumerable: true, get: function () { return ProductCardVertical_styled_1.OldPriceAmount; } });
25
+ Object.defineProperty(exports, "OldPricePeriod", { enumerable: true, get: function () { return ProductCardVertical_styled_1.OldPricePeriod; } });
26
+ Object.defineProperty(exports, "NewPrice", { enumerable: true, get: function () { return ProductCardVertical_styled_1.NewPrice; } });
27
+ Object.defineProperty(exports, "NewPriceAmount", { enumerable: true, get: function () { return ProductCardVertical_styled_1.NewPriceAmount; } });
28
+ Object.defineProperty(exports, "NewPricePeriod", { enumerable: true, get: function () { return ProductCardVertical_styled_1.NewPricePeriod; } });
package/dist/components/ProductCardVertical/stories/ProductCardVertical.stories.d.ts CHANGED
@@ -1,16 +1,26 @@
1
+ import React from "react";
2
+ import type { ProductCardVerticalProps } from "../props";
3
+ /**
4
+ * Tüm ProductCardVertical propları — Default ve varyantlar için ortak taban.
5
+ * hasDiscount bileşende henüz kullanılmıyor; kontrol paneli ve dokümantasyon için set edilir.
6
+ */
7
+ export declare const allProductCardArgs: ProductCardVerticalProps;
1
8
  declare const _default: {
2
9
  title: string;
3
- component: (props: any) => import("react/jsx-runtime").JSX.Element;
10
+ component: React.MemoExoticComponent<({ title, description, hasDiscount, price, oldPrice, oldPricePeriod, slug, period, discountRate, isResponsive, image, hasCustomBadge, customBadge, hasNewImageType, hasOutOfStock, hasBeltBadge, beltBadgeVariant, beltBadgeTitle, imageInfoText, imageInfoTextVariant, isShowOldPrice, isOldPricePeriodUnderline, hasImageOffset, }: import("../props").ProductCardVertical) => import("react/jsx-runtime").JSX.Element>;
4
11
  tags: string[];
5
12
  argTypes: {
6
13
  title: {
7
14
  control: string;
15
+ description: string;
8
16
  };
9
17
  description: {
10
18
  control: string;
19
+ description: string;
11
20
  };
12
21
  hasDiscount: {
13
22
  control: string;
23
+ description: string;
14
24
  };
15
25
  price: {
16
26
  control: string;
@@ -23,6 +33,7 @@ declare const _default: {
23
33
  };
24
34
  slug: {
25
35
  control: string;
36
+ description: string;
26
37
  };
27
38
  period: {
28
39
  control: string;
@@ -34,13 +45,14 @@ declare const _default: {
34
45
  control: string;
35
46
  };
36
47
  image: {
37
- control: string;
48
+ control: boolean;
49
+ description: string;
38
50
  };
39
51
  hasCustomBadge: {
40
52
  control: string;
41
53
  };
42
54
  customBadge: {
43
- control: string;
55
+ control: boolean;
44
56
  };
45
57
  hasNewImageType: {
46
58
  control: string;
@@ -75,33 +87,35 @@ declare const _default: {
75
87
  control: string;
76
88
  };
77
89
  };
90
+ render: (args: ProductCardVerticalProps) => import("react/jsx-runtime").JSX.Element;
78
91
  };
79
92
  export default _default;
80
93
  export declare const Default: {
94
+ name: string;
81
95
  args: {
82
- title: string;
83
- description: string;
84
- hasDiscount: boolean;
85
- price: string;
86
- oldPrice: string;
87
- oldPricePeriod: string;
88
- slug: string;
89
- period: string;
90
- discountRate: number;
91
- isResponsive: boolean;
92
- image: import("react/jsx-runtime").JSX.Element;
93
- hasCustomBadge: boolean;
94
- customBadge: import("react/jsx-runtime").JSX.Element;
95
- hasNewImageType: boolean;
96
- hasOutOfStock: boolean;
97
- hasBeltBadge: boolean;
98
- beltBadgeVariant: string;
99
- beltBadgeTitle: string;
100
- imageInfoText: string;
101
- imageInfoTextVariant: string;
102
- isShowOldPrice: boolean;
103
- isOldPricePeriodUnderline: boolean;
104
- hasImageOffset: boolean;
96
+ title?: string;
97
+ description?: string;
98
+ hasDiscount?: boolean;
99
+ hasCustomBadge?: boolean;
100
+ price?: string;
101
+ oldPrice?: string;
102
+ oldPricePeriod?: string;
103
+ slug?: string;
104
+ period?: string;
105
+ discountRate?: number;
106
+ isResponsive?: boolean;
107
+ image?: React.ReactNode;
108
+ customBadge?: React.ReactNode;
109
+ hasNewImageType?: boolean;
110
+ hasOutOfStock?: boolean;
111
+ hasBeltBadge?: boolean;
112
+ isShowOldPrice?: boolean;
113
+ beltBadgeVariant?: string;
114
+ beltBadgeTitle?: string;
115
+ imageInfoText?: string;
116
+ imageInfoTextVariant?: string;
117
+ isOldPricePeriodUnderline?: boolean;
118
+ hasImageOffset?: boolean;
105
119
  };
106
120
  };
107
121
  export declare const NoDiscount: {
@@ -110,25 +124,25 @@ export declare const NoDiscount: {
110
124
  discountRate: number;
111
125
  oldPrice: any;
112
126
  isShowOldPrice: boolean;
113
- title: string;
114
- description: string;
115
- price: string;
116
- oldPricePeriod: string;
117
- slug: string;
118
- period: string;
119
- isResponsive: boolean;
120
- image: import("react/jsx-runtime").JSX.Element;
121
- hasCustomBadge: boolean;
122
- customBadge: import("react/jsx-runtime").JSX.Element;
123
- hasNewImageType: boolean;
124
- hasOutOfStock: boolean;
125
- hasBeltBadge: boolean;
126
- beltBadgeVariant: string;
127
- beltBadgeTitle: string;
128
- imageInfoText: string;
129
- imageInfoTextVariant: string;
130
- isOldPricePeriodUnderline: boolean;
131
- hasImageOffset: boolean;
127
+ title?: string;
128
+ description?: string;
129
+ hasCustomBadge?: boolean;
130
+ price?: string;
131
+ oldPricePeriod?: string;
132
+ slug?: string;
133
+ period?: string;
134
+ isResponsive?: boolean;
135
+ image?: React.ReactNode;
136
+ customBadge?: React.ReactNode;
137
+ hasNewImageType?: boolean;
138
+ hasOutOfStock?: boolean;
139
+ hasBeltBadge?: boolean;
140
+ beltBadgeVariant?: string;
141
+ beltBadgeTitle?: string;
142
+ imageInfoText?: string;
143
+ imageInfoTextVariant?: string;
144
+ isOldPricePeriodUnderline?: boolean;
145
+ hasImageOffset?: boolean;
132
146
  };
133
147
  };
134
148
  export declare const OutOfStock: {
@@ -137,25 +151,25 @@ export declare const OutOfStock: {
137
151
  hasDiscount: boolean;
138
152
  discountRate: number;
139
153
  hasBeltBadge: boolean;
140
- title: string;
141
- description: string;
142
- price: string;
143
- oldPrice: string;
144
- oldPricePeriod: string;
145
- slug: string;
146
- period: string;
147
- isResponsive: boolean;
148
- image: import("react/jsx-runtime").JSX.Element;
149
- hasCustomBadge: boolean;
150
- customBadge: import("react/jsx-runtime").JSX.Element;
151
- hasNewImageType: boolean;
152
- beltBadgeVariant: string;
153
- beltBadgeTitle: string;
154
- imageInfoText: string;
155
- imageInfoTextVariant: string;
156
- isShowOldPrice: boolean;
157
- isOldPricePeriodUnderline: boolean;
158
- hasImageOffset: boolean;
154
+ title?: string;
155
+ description?: string;
156
+ hasCustomBadge?: boolean;
157
+ price?: string;
158
+ oldPrice?: string;
159
+ oldPricePeriod?: string;
160
+ slug?: string;
161
+ period?: string;
162
+ isResponsive?: boolean;
163
+ image?: React.ReactNode;
164
+ customBadge?: React.ReactNode;
165
+ hasNewImageType?: boolean;
166
+ isShowOldPrice?: boolean;
167
+ beltBadgeVariant?: string;
168
+ beltBadgeTitle?: string;
169
+ imageInfoText?: string;
170
+ imageInfoTextVariant?: string;
171
+ isOldPricePeriodUnderline?: boolean;
172
+ hasImageOffset?: boolean;
159
173
  };
160
174
  };
161
175
  export declare const WithCustomBadge: {
@@ -163,26 +177,26 @@ export declare const WithCustomBadge: {
163
177
  hasCustomBadge: boolean;
164
178
  hasBeltBadge: boolean;
165
179
  customBadge: import("react/jsx-runtime").JSX.Element;
166
- title: string;
167
- description: string;
168
- hasDiscount: boolean;
169
- price: string;
170
- oldPrice: string;
171
- oldPricePeriod: string;
172
- slug: string;
173
- period: string;
174
- discountRate: number;
175
- isResponsive: boolean;
176
- image: import("react/jsx-runtime").JSX.Element;
177
- hasNewImageType: boolean;
178
- hasOutOfStock: boolean;
179
- beltBadgeVariant: string;
180
- beltBadgeTitle: string;
181
- imageInfoText: string;
182
- imageInfoTextVariant: string;
183
- isShowOldPrice: boolean;
184
- isOldPricePeriodUnderline: boolean;
185
- hasImageOffset: boolean;
180
+ title?: string;
181
+ description?: string;
182
+ hasDiscount?: boolean;
183
+ price?: string;
184
+ oldPrice?: string;
185
+ oldPricePeriod?: string;
186
+ slug?: string;
187
+ period?: string;
188
+ discountRate?: number;
189
+ isResponsive?: boolean;
190
+ image?: React.ReactNode;
191
+ hasNewImageType?: boolean;
192
+ hasOutOfStock?: boolean;
193
+ isShowOldPrice?: boolean;
194
+ beltBadgeVariant?: string;
195
+ beltBadgeTitle?: string;
196
+ imageInfoText?: string;
197
+ imageInfoTextVariant?: string;
198
+ isOldPricePeriodUnderline?: boolean;
199
+ hasImageOffset?: boolean;
186
200
  };
187
201
  };
188
202
  export declare const ResponsiveWithNewImageType: {
@@ -190,107 +204,107 @@ export declare const ResponsiveWithNewImageType: {
190
204
  isResponsive: boolean;
191
205
  hasNewImageType: boolean;
192
206
  hasImageOffset: boolean;
193
- title: string;
194
- description: string;
195
- hasDiscount: boolean;
196
- price: string;
197
- oldPrice: string;
198
- oldPricePeriod: string;
199
- slug: string;
200
- period: string;
201
- discountRate: number;
202
- image: import("react/jsx-runtime").JSX.Element;
203
- hasCustomBadge: boolean;
204
- customBadge: import("react/jsx-runtime").JSX.Element;
205
- hasOutOfStock: boolean;
206
- hasBeltBadge: boolean;
207
- beltBadgeVariant: string;
208
- beltBadgeTitle: string;
209
- imageInfoText: string;
210
- imageInfoTextVariant: string;
211
- isShowOldPrice: boolean;
212
- isOldPricePeriodUnderline: boolean;
207
+ title?: string;
208
+ description?: string;
209
+ hasDiscount?: boolean;
210
+ hasCustomBadge?: boolean;
211
+ price?: string;
212
+ oldPrice?: string;
213
+ oldPricePeriod?: string;
214
+ slug?: string;
215
+ period?: string;
216
+ discountRate?: number;
217
+ image?: React.ReactNode;
218
+ customBadge?: React.ReactNode;
219
+ hasOutOfStock?: boolean;
220
+ hasBeltBadge?: boolean;
221
+ isShowOldPrice?: boolean;
222
+ beltBadgeVariant?: string;
223
+ beltBadgeTitle?: string;
224
+ imageInfoText?: string;
225
+ imageInfoTextVariant?: string;
226
+ isOldPricePeriodUnderline?: boolean;
213
227
  };
214
228
  };
215
229
  export declare const DarkImageInfoText: {
216
230
  args: {
217
231
  imageInfoTextVariant: string;
218
232
  imageInfoText: string;
219
- title: string;
220
- description: string;
221
- hasDiscount: boolean;
222
- price: string;
223
- oldPrice: string;
224
- oldPricePeriod: string;
225
- slug: string;
226
- period: string;
227
- discountRate: number;
228
- isResponsive: boolean;
229
- image: import("react/jsx-runtime").JSX.Element;
230
- hasCustomBadge: boolean;
231
- customBadge: import("react/jsx-runtime").JSX.Element;
232
- hasNewImageType: boolean;
233
- hasOutOfStock: boolean;
234
- hasBeltBadge: boolean;
235
- beltBadgeVariant: string;
236
- beltBadgeTitle: string;
237
- isShowOldPrice: boolean;
238
- isOldPricePeriodUnderline: boolean;
239
- hasImageOffset: boolean;
233
+ title?: string;
234
+ description?: string;
235
+ hasDiscount?: boolean;
236
+ hasCustomBadge?: boolean;
237
+ price?: string;
238
+ oldPrice?: string;
239
+ oldPricePeriod?: string;
240
+ slug?: string;
241
+ period?: string;
242
+ discountRate?: number;
243
+ isResponsive?: boolean;
244
+ image?: React.ReactNode;
245
+ customBadge?: React.ReactNode;
246
+ hasNewImageType?: boolean;
247
+ hasOutOfStock?: boolean;
248
+ hasBeltBadge?: boolean;
249
+ isShowOldPrice?: boolean;
250
+ beltBadgeVariant?: string;
251
+ beltBadgeTitle?: string;
252
+ isOldPricePeriodUnderline?: boolean;
253
+ hasImageOffset?: boolean;
240
254
  };
241
255
  };
242
256
  export declare const WithoutBeltBadge: {
243
257
  args: {
244
258
  hasBeltBadge: boolean;
245
- title: string;
246
- description: string;
247
- hasDiscount: boolean;
248
- price: string;
249
- oldPrice: string;
250
- oldPricePeriod: string;
251
- slug: string;
252
- period: string;
253
- discountRate: number;
254
- isResponsive: boolean;
255
- image: import("react/jsx-runtime").JSX.Element;
256
- hasCustomBadge: boolean;
257
- customBadge: import("react/jsx-runtime").JSX.Element;
258
- hasNewImageType: boolean;
259
- hasOutOfStock: boolean;
260
- beltBadgeVariant: string;
261
- beltBadgeTitle: string;
262
- imageInfoText: string;
263
- imageInfoTextVariant: string;
264
- isShowOldPrice: boolean;
265
- isOldPricePeriodUnderline: boolean;
266
- hasImageOffset: boolean;
259
+ title?: string;
260
+ description?: string;
261
+ hasDiscount?: boolean;
262
+ hasCustomBadge?: boolean;
263
+ price?: string;
264
+ oldPrice?: string;
265
+ oldPricePeriod?: string;
266
+ slug?: string;
267
+ period?: string;
268
+ discountRate?: number;
269
+ isResponsive?: boolean;
270
+ image?: React.ReactNode;
271
+ customBadge?: React.ReactNode;
272
+ hasNewImageType?: boolean;
273
+ hasOutOfStock?: boolean;
274
+ isShowOldPrice?: boolean;
275
+ beltBadgeVariant?: string;
276
+ beltBadgeTitle?: string;
277
+ imageInfoText?: string;
278
+ imageInfoTextVariant?: string;
279
+ isOldPricePeriodUnderline?: boolean;
280
+ hasImageOffset?: boolean;
267
281
  };
268
282
  };
269
283
  export declare const WithoutImageInfoText: {
270
284
  args: {
271
285
  imageInfoText: any;
272
- title: string;
273
- description: string;
274
- hasDiscount: boolean;
275
- price: string;
276
- oldPrice: string;
277
- oldPricePeriod: string;
278
- slug: string;
279
- period: string;
280
- discountRate: number;
281
- isResponsive: boolean;
282
- image: import("react/jsx-runtime").JSX.Element;
283
- hasCustomBadge: boolean;
284
- customBadge: import("react/jsx-runtime").JSX.Element;
285
- hasNewImageType: boolean;
286
- hasOutOfStock: boolean;
287
- hasBeltBadge: boolean;
288
- beltBadgeVariant: string;
289
- beltBadgeTitle: string;
290
- imageInfoTextVariant: string;
291
- isShowOldPrice: boolean;
292
- isOldPricePeriodUnderline: boolean;
293
- hasImageOffset: boolean;
286
+ title?: string;
287
+ description?: string;
288
+ hasDiscount?: boolean;
289
+ hasCustomBadge?: boolean;
290
+ price?: string;
291
+ oldPrice?: string;
292
+ oldPricePeriod?: string;
293
+ slug?: string;
294
+ period?: string;
295
+ discountRate?: number;
296
+ isResponsive?: boolean;
297
+ image?: React.ReactNode;
298
+ customBadge?: React.ReactNode;
299
+ hasNewImageType?: boolean;
300
+ hasOutOfStock?: boolean;
301
+ hasBeltBadge?: boolean;
302
+ isShowOldPrice?: boolean;
303
+ beltBadgeVariant?: string;
304
+ beltBadgeTitle?: string;
305
+ imageInfoTextVariant?: string;
306
+ isOldPricePeriodUnderline?: boolean;
307
+ hasImageOffset?: boolean;
294
308
  };
295
309
  };
296
310
  export declare const Minimal: {
@@ -301,103 +315,103 @@ export declare const Minimal: {
301
315
  isShowOldPrice: boolean;
302
316
  hasBeltBadge: boolean;
303
317
  imageInfoText: any;
304
- title: string;
305
- description: string;
306
- price: string;
307
- oldPricePeriod: string;
308
- slug: string;
309
- period: string;
310
- isResponsive: boolean;
311
- image: import("react/jsx-runtime").JSX.Element;
312
- hasCustomBadge: boolean;
313
- customBadge: import("react/jsx-runtime").JSX.Element;
314
- hasNewImageType: boolean;
315
- hasOutOfStock: boolean;
316
- beltBadgeVariant: string;
317
- beltBadgeTitle: string;
318
- imageInfoTextVariant: string;
319
- isOldPricePeriodUnderline: boolean;
320
- hasImageOffset: boolean;
318
+ title?: string;
319
+ description?: string;
320
+ hasCustomBadge?: boolean;
321
+ price?: string;
322
+ oldPricePeriod?: string;
323
+ slug?: string;
324
+ period?: string;
325
+ isResponsive?: boolean;
326
+ image?: React.ReactNode;
327
+ customBadge?: React.ReactNode;
328
+ hasNewImageType?: boolean;
329
+ hasOutOfStock?: boolean;
330
+ beltBadgeVariant?: string;
331
+ beltBadgeTitle?: string;
332
+ imageInfoTextVariant?: string;
333
+ isOldPricePeriodUnderline?: boolean;
334
+ hasImageOffset?: boolean;
321
335
  };
322
336
  };
323
337
  export declare const WithoutImageOffset: {
324
338
  args: {
325
339
  hasImageOffset: boolean;
326
- title: string;
327
- description: string;
328
- hasDiscount: boolean;
329
- price: string;
330
- oldPrice: string;
331
- oldPricePeriod: string;
332
- slug: string;
333
- period: string;
334
- discountRate: number;
335
- isResponsive: boolean;
336
- image: import("react/jsx-runtime").JSX.Element;
337
- hasCustomBadge: boolean;
338
- customBadge: import("react/jsx-runtime").JSX.Element;
339
- hasNewImageType: boolean;
340
- hasOutOfStock: boolean;
341
- hasBeltBadge: boolean;
342
- beltBadgeVariant: string;
343
- beltBadgeTitle: string;
344
- imageInfoText: string;
345
- imageInfoTextVariant: string;
346
- isShowOldPrice: boolean;
347
- isOldPricePeriodUnderline: boolean;
340
+ title?: string;
341
+ description?: string;
342
+ hasDiscount?: boolean;
343
+ hasCustomBadge?: boolean;
344
+ price?: string;
345
+ oldPrice?: string;
346
+ oldPricePeriod?: string;
347
+ slug?: string;
348
+ period?: string;
349
+ discountRate?: number;
350
+ isResponsive?: boolean;
351
+ image?: React.ReactNode;
352
+ customBadge?: React.ReactNode;
353
+ hasNewImageType?: boolean;
354
+ hasOutOfStock?: boolean;
355
+ hasBeltBadge?: boolean;
356
+ isShowOldPrice?: boolean;
357
+ beltBadgeVariant?: string;
358
+ beltBadgeTitle?: string;
359
+ imageInfoText?: string;
360
+ imageInfoTextVariant?: string;
361
+ isOldPricePeriodUnderline?: boolean;
348
362
  };
349
363
  };
350
364
  export declare const WithoutOldPrice: {
351
365
  args: {
352
366
  isShowOldPrice: boolean;
353
367
  oldPrice: any;
354
- title: string;
355
- description: string;
356
- hasDiscount: boolean;
357
- price: string;
358
- oldPricePeriod: string;
359
- slug: string;
360
- period: string;
361
- discountRate: number;
362
- isResponsive: boolean;
363
- image: import("react/jsx-runtime").JSX.Element;
364
- hasCustomBadge: boolean;
365
- customBadge: import("react/jsx-runtime").JSX.Element;
366
- hasNewImageType: boolean;
367
- hasOutOfStock: boolean;
368
- hasBeltBadge: boolean;
369
- beltBadgeVariant: string;
370
- beltBadgeTitle: string;
371
- imageInfoText: string;
372
- imageInfoTextVariant: string;
373
- isOldPricePeriodUnderline: boolean;
374
- hasImageOffset: boolean;
368
+ title?: string;
369
+ description?: string;
370
+ hasDiscount?: boolean;
371
+ hasCustomBadge?: boolean;
372
+ price?: string;
373
+ oldPricePeriod?: string;
374
+ slug?: string;
375
+ period?: string;
376
+ discountRate?: number;
377
+ isResponsive?: boolean;
378
+ image?: React.ReactNode;
379
+ customBadge?: React.ReactNode;
380
+ hasNewImageType?: boolean;
381
+ hasOutOfStock?: boolean;
382
+ hasBeltBadge?: boolean;
383
+ beltBadgeVariant?: string;
384
+ beltBadgeTitle?: string;
385
+ imageInfoText?: string;
386
+ imageInfoTextVariant?: string;
387
+ isOldPricePeriodUnderline?: boolean;
388
+ hasImageOffset?: boolean;
375
389
  };
376
390
  };
377
391
  export declare const WithoutOldPriceUnderline: {
378
392
  args: {
379
393
  isOldPricePeriodUnderline: boolean;
380
- title: string;
381
- description: string;
382
- hasDiscount: boolean;
383
- price: string;
384
- oldPrice: string;
385
- oldPricePeriod: string;
386
- slug: string;
387
- period: string;
388
- discountRate: number;
389
- isResponsive: boolean;
390
- image: import("react/jsx-runtime").JSX.Element;
391
- hasCustomBadge: boolean;
392
- customBadge: import("react/jsx-runtime").JSX.Element;
393
- hasNewImageType: boolean;
394
- hasOutOfStock: boolean;
395
- hasBeltBadge: boolean;
396
- beltBadgeVariant: string;
397
- beltBadgeTitle: string;
398
- imageInfoText: string;
399
- imageInfoTextVariant: string;
400
- isShowOldPrice: boolean;
401
- hasImageOffset: boolean;
394
+ title?: string;
395
+ description?: string;
396
+ hasDiscount?: boolean;
397
+ hasCustomBadge?: boolean;
398
+ price?: string;
399
+ oldPrice?: string;
400
+ oldPricePeriod?: string;
401
+ slug?: string;
402
+ period?: string;
403
+ discountRate?: number;
404
+ isResponsive?: boolean;
405
+ image?: React.ReactNode;
406
+ customBadge?: React.ReactNode;
407
+ hasNewImageType?: boolean;
408
+ hasOutOfStock?: boolean;
409
+ hasBeltBadge?: boolean;
410
+ isShowOldPrice?: boolean;
411
+ beltBadgeVariant?: string;
412
+ beltBadgeTitle?: string;
413
+ imageInfoText?: string;
414
+ imageInfoTextVariant?: string;
415
+ hasImageOffset?: boolean;
402
416
  };
403
417
  };
package/dist/components/ProductCardVertical/stories/ProductCardVertical.stories.js CHANGED
@@ -14,105 +14,124 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
14
14
  return (mod && mod.__esModule) ? mod : { "default": mod };
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
- exports.WithoutOldPriceUnderline = exports.WithoutOldPrice = exports.WithoutImageOffset = exports.Minimal = exports.WithoutImageInfoText = exports.WithoutBeltBadge = exports.DarkImageInfoText = exports.ResponsiveWithNewImageType = exports.WithCustomBadge = exports.OutOfStock = exports.NoDiscount = exports.Default = void 0;
17
+ exports.WithoutOldPriceUnderline = exports.WithoutOldPrice = exports.WithoutImageOffset = exports.Minimal = exports.WithoutImageInfoText = exports.WithoutBeltBadge = exports.DarkImageInfoText = exports.ResponsiveWithNewImageType = exports.WithCustomBadge = exports.OutOfStock = exports.NoDiscount = exports.Default = exports.allProductCardArgs = void 0;
18
18
  var jsx_runtime_1 = require("react/jsx-runtime");
19
19
  var ProductCardVertical_1 = __importDefault(require("../ProductCardVertical"));
20
+ var props_1 = require("../props");
20
21
  var Badges_1 = __importDefault(require("../../Badges"));
22
+ var props_2 = require("../../Badges/props");
23
+ var DefaultImage = ((0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "\u00DCr\u00FCn g\u00F6rseli", style: { width: "100%", height: "100%", objectFit: "cover" } }));
24
+ var DefaultCustomBadge = (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "light", title: "\u00D6zel" });
25
+ /**
26
+ * Tüm ProductCardVertical propları — Default ve varyantlar için ortak taban.
27
+ * hasDiscount bileşende henüz kullanılmıyor; kontrol paneli ve dokümantasyon için set edilir.
28
+ */
29
+ exports.allProductCardArgs = {
30
+ title: "Apple iPad Air WiFi 64GB (2020)",
31
+ description: "50Q9900 50'' 126 Ekran QLED Smart 4K Ultra HD TV",
32
+ hasDiscount: true,
33
+ hasCustomBadge: false,
34
+ customBadge: DefaultCustomBadge,
35
+ price: "12.545,24 TL",
36
+ oldPrice: "15.000,00 TL",
37
+ oldPricePeriod: "hafta",
38
+ slug: "https://www.kiralarsin.com",
39
+ period: "hafta",
40
+ discountRate: 32,
41
+ isResponsive: false,
42
+ image: DefaultImage,
43
+ hasNewImageType: false,
44
+ hasOutOfStock: false,
45
+ hasBeltBadge: true,
46
+ isShowOldPrice: true,
47
+ beltBadgeVariant: "primary",
48
+ beltBadgeTitle: "İndirimli",
49
+ imageInfoText: "<strong>AĞUST</strong> koduyla sepette 250 TL indirim",
50
+ imageInfoTextVariant: "secondary",
51
+ isOldPricePeriodUnderline: true,
52
+ hasImageOffset: true,
53
+ };
21
54
  exports.default = {
22
55
  title: "Components/ProductCard/ProductCard Vertical",
23
- component: function (props) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "240px" } }, { children: (0, jsx_runtime_1.jsx)(ProductCardVertical_1.default, __assign({}, props)) }))); },
56
+ component: ProductCardVertical_1.default,
24
57
  tags: ["autodocs"],
25
58
  argTypes: {
26
- title: { control: "text" },
27
- description: { control: "text" },
28
- hasDiscount: { control: "boolean" },
59
+ title: { control: "text", description: "Ürün başlığı" },
60
+ description: { control: "text", description: "Kısa açıklama" },
61
+ hasDiscount: {
62
+ control: "boolean",
63
+ description: "İndirim bayrağı (gelecek kullanım / API)",
64
+ },
29
65
  price: { control: "text" },
30
66
  oldPrice: { control: "text" },
31
67
  oldPricePeriod: { control: "text" },
32
- slug: { control: "text" },
68
+ slug: {
69
+ control: "text",
70
+ description: "Ürün URL’i — story’de kartı saran link için",
71
+ },
33
72
  period: { control: "text" },
34
73
  discountRate: { control: "number" },
35
74
  isResponsive: { control: "boolean" },
36
- image: { control: "none" },
75
+ image: { control: false, description: "Story’de sabit görsel" },
37
76
  hasCustomBadge: { control: "boolean" },
38
- customBadge: { control: "none" },
77
+ customBadge: { control: false },
39
78
  hasNewImageType: { control: "boolean" },
40
79
  hasOutOfStock: { control: "boolean" },
41
80
  hasBeltBadge: { control: "boolean" },
42
81
  beltBadgeVariant: {
43
82
  control: "select",
44
- options: ["primary", "secondary", "light"],
83
+ options: props_2.variants,
45
84
  },
46
85
  beltBadgeTitle: { control: "text" },
47
86
  imageInfoText: { control: "text" },
48
87
  imageInfoTextVariant: {
49
88
  control: "select",
50
- options: ["secondary", "dark"],
89
+ options: props_1.imageInfoTextVariants,
51
90
  },
52
91
  isShowOldPrice: { control: "boolean" },
53
92
  isOldPricePeriodUnderline: { control: "boolean" },
54
93
  hasImageOffset: { control: "boolean" },
55
94
  },
95
+ render: function (args) {
96
+ var card = (0, jsx_runtime_1.jsx)(ProductCardVertical_1.default, __assign({}, args));
97
+ var wrapped = args.slug && String(args.slug).trim() !== "" ? ((0, jsx_runtime_1.jsx)("a", __assign({ href: args.slug, style: { textDecoration: "none", color: "inherit", display: "block" } }, { children: card }))) : (card);
98
+ return (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "240px" } }, { children: wrapped }));
99
+ },
56
100
  };
57
- var DefaultImage = ((0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "default", style: { width: "100%", height: "100%", objectFit: "cover" } }));
58
- var DefaultBadge = (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "light", title: "test" });
59
101
  exports.Default = {
60
- args: {
61
- title: "Apple iPad Air WiFi 64GB (2020)",
62
- description: "50Q9900 50'' 126 Ekran QLED Smart 4K Ultra HD TV",
63
- hasDiscount: true,
64
- price: "12.545,24 TL",
65
- oldPrice: "12.545,24 TL",
66
- oldPricePeriod: "hafta",
67
- slug: "https://www.kiralarsin.com",
68
- period: "hafta",
69
- discountRate: 32,
70
- isResponsive: false,
71
- image: DefaultImage,
72
- hasCustomBadge: false,
73
- customBadge: DefaultBadge,
74
- hasNewImageType: false,
75
- hasOutOfStock: false,
76
- hasBeltBadge: true,
77
- beltBadgeVariant: "primary",
78
- beltBadgeTitle: "discount",
79
- imageInfoText: "<strong>AĞUST</strong> koduyla sepette 250 TL indirim",
80
- imageInfoTextVariant: "secondary",
81
- isShowOldPrice: true,
82
- isOldPricePeriodUnderline: true,
83
- hasImageOffset: true,
84
- },
102
+ name: "Tüm proplar (varsayılan)",
103
+ args: __assign({}, exports.allProductCardArgs),
85
104
  };
86
105
  exports.NoDiscount = {
87
- args: __assign(__assign({}, exports.Default.args), { hasDiscount: false, discountRate: 0, oldPrice: null, isShowOldPrice: false }),
106
+ args: __assign(__assign({}, exports.allProductCardArgs), { hasDiscount: false, discountRate: 0, oldPrice: null, isShowOldPrice: false }),
88
107
  };
89
108
  exports.OutOfStock = {
90
- args: __assign(__assign({}, exports.Default.args), { hasOutOfStock: true, hasDiscount: false, discountRate: 0, hasBeltBadge: false }),
109
+ args: __assign(__assign({}, exports.allProductCardArgs), { hasOutOfStock: true, hasDiscount: false, discountRate: 0, hasBeltBadge: false }),
91
110
  };
92
111
  exports.WithCustomBadge = {
93
- args: __assign(__assign({}, exports.Default.args), { hasCustomBadge: true, hasBeltBadge: false, customBadge: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "dark", title: "Yeni" }) }),
112
+ args: __assign(__assign({}, exports.allProductCardArgs), { hasCustomBadge: true, hasBeltBadge: false, customBadge: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "dark", title: "Yeni" }) }),
94
113
  };
95
114
  exports.ResponsiveWithNewImageType = {
96
- args: __assign(__assign({}, exports.Default.args), { isResponsive: true, hasNewImageType: true, hasImageOffset: false }),
115
+ args: __assign(__assign({}, exports.allProductCardArgs), { isResponsive: true, hasNewImageType: true, hasImageOffset: false }),
97
116
  };
98
117
  exports.DarkImageInfoText = {
99
- args: __assign(__assign({}, exports.Default.args), { imageInfoTextVariant: "dark", imageInfoText: "<strong>ÖZEL</strong> fiyat" }),
118
+ args: __assign(__assign({}, exports.allProductCardArgs), { imageInfoTextVariant: "dark", imageInfoText: "<strong>ÖZEL</strong> fiyat" }),
100
119
  };
101
120
  exports.WithoutBeltBadge = {
102
- args: __assign(__assign({}, exports.Default.args), { hasBeltBadge: false }),
121
+ args: __assign(__assign({}, exports.allProductCardArgs), { hasBeltBadge: false }),
103
122
  };
104
123
  exports.WithoutImageInfoText = {
105
- args: __assign(__assign({}, exports.Default.args), { imageInfoText: null }),
124
+ args: __assign(__assign({}, exports.allProductCardArgs), { imageInfoText: null }),
106
125
  };
107
126
  exports.Minimal = {
108
- args: __assign(__assign({}, exports.Default.args), { hasDiscount: false, discountRate: 0, oldPrice: null, isShowOldPrice: false, hasBeltBadge: false, imageInfoText: null }),
127
+ args: __assign(__assign({}, exports.allProductCardArgs), { hasDiscount: false, discountRate: 0, oldPrice: null, isShowOldPrice: false, hasBeltBadge: false, imageInfoText: null }),
109
128
  };
110
129
  exports.WithoutImageOffset = {
111
- args: __assign(__assign({}, exports.Default.args), { hasImageOffset: false }),
130
+ args: __assign(__assign({}, exports.allProductCardArgs), { hasImageOffset: false }),
112
131
  };
113
132
  exports.WithoutOldPrice = {
114
- args: __assign(__assign({}, exports.Default.args), { isShowOldPrice: false, oldPrice: null }),
133
+ args: __assign(__assign({}, exports.allProductCardArgs), { isShowOldPrice: false, oldPrice: null }),
115
134
  };
116
135
  exports.WithoutOldPriceUnderline = {
117
- args: __assign(__assign({}, exports.Default.args), { isOldPricePeriodUnderline: false }),
136
+ args: __assign(__assign({}, exports.allProductCardArgs), { isOldPricePeriodUnderline: false }),
118
137
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "krl-alfred",
3
- "version": "2.18.13",
3
+ "version": "2.18.14",
4
4
  "files": [
5
5
  "dist"
6
6
  ],