krl-alfred 2.23.13 → 2.23.15

package/dist/components/ProductCardCheckbox/stories/ProductCardCheckbox.stories.js

@@ -14,13 +14,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithDropdown = exports.WithContentOffset = exports.Invalid = exports.WithInfoText = exports.Large = exports.Small = exports.WithoutImage = exports.WithoutBadge = exports.WithoutCheckbox = exports.Disabled = exports.Checked = exports.Default = void 0;
+exports.Interactive = exports.Complete = exports.Empty = exports.WithDropdown = exports.WithDescription = exports.WithContentOffset = exports.Invalid = exports.WithInfoText = exports.Large = exports.Small = exports.WithoutContent = exports.WithoutImage = exports.WithoutBadge = exports.WithoutCheckbox = exports.Disabled = exports.Checked = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var ProductCardCheckbox_1 = __importDefault(require("../ProductCardCheckbox"));
 var props_1 = require("../props");
 var props_2 = require("../../Badges/props");
 var defaultImage = (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" });
-var defaultArgs = {
+var baseArgs = {
     title: "Apple İpad Air WİFİ 64GB (2020)",
     content: "Content",
     valid: true,
@@ -29,9 +30,14 @@ var defaultArgs = {
     hasCheckbox: true,
     size: "large",
     hasBadge: true,
+    badgeText: "Badge text",
     badgeVariant: "primary",
     checkboxId: "testCheckboxId",
     infoText: "test",
+    checked: false,
+    disabled: false,
+    isContentOffset: false,
+    isShowDropdown: false,
 };
 exports.default = {
     title: 'Components/ProductCard/ProductCard Checkbox',
@@ -44,46 +50,77 @@ exports.default = {
         hasCheckbox: { control: 'boolean' },
         hasBadge: { control: 'boolean' },
         checked: { control: 'boolean' },
+        valid: { control: 'boolean' },
+        isContentOffset: { control: 'boolean' },
         isShowDropdown: { control: 'boolean' },
         dropdownWidth: { control: 'text' },
+        title: { control: 'text' },
+        description: { control: 'text' },
+        content: { control: 'text' },
+        infoText: { control: 'text' },
+        infoTitle: { control: 'text' },
+        productCardOnChange: { action: 'changed' },
     }
 };
 exports.Default = {
-    args: defaultArgs,
+    args: baseArgs,
 };
 exports.Checked = {
-    args: __assign(__assign({}, defaultArgs), { checked: true, checkboxId: "checkbox_checked" }),
+    args: __assign(__assign({}, baseArgs), { checked: true, checkboxId: "checkbox_checked" }),
 };
 exports.Disabled = {
-    args: __assign(__assign({}, defaultArgs), { disabled: true, checkboxId: "checkbox_disabled" }),
+    args: __assign(__assign({}, baseArgs), { disabled: true, checkboxId: "checkbox_disabled" }),
 };
 exports.WithoutCheckbox = {
-    args: __assign(__assign({}, defaultArgs), { hasCheckbox: false, checkboxId: "checkbox_hidden" }),
+    args: __assign(__assign({}, baseArgs), { hasCheckbox: false, checkboxId: "checkbox_hidden" }),
 };
 exports.WithoutBadge = {
-    args: __assign(__assign({}, defaultArgs), { hasBadge: false, checkboxId: "checkbox_no_badge" }),
+    args: __assign(__assign({}, baseArgs), { hasBadge: false, checkboxId: "checkbox_no_badge" }),
 };
 exports.WithoutImage = {
-    args: __assign(__assign({}, defaultArgs), { image: null, checkboxId: "checkbox_no_image" }),
+    args: __assign(__assign({}, baseArgs), { image: null, checkboxId: "checkbox_no_image" }),
+};
+exports.WithoutContent = {
+    args: __assign(__assign({}, baseArgs), { content: null, checkboxId: "checkbox_no_content" }),
 };
 exports.Small = {
-    args: __assign(__assign({}, defaultArgs), { size: "small", checkboxId: "checkbox_small" }),
+    args: __assign(__assign({}, baseArgs), { size: "small", checkboxId: "checkbox_small" }),
 };
 exports.Large = {
-    args: __assign(__assign({}, defaultArgs), { size: "large", checkboxId: "checkbox_large" }),
+    args: __assign(__assign({}, baseArgs), { size: "large", checkboxId: "checkbox_large" }),
 };
 exports.WithInfoText = {
-    args: __assign(__assign({}, defaultArgs), { infoText: "Bu ürün hakkında ek bilgi", infoTitle: "Bilgi", checkboxId: "checkbox_info" }),
+    args: __assign(__assign({}, baseArgs), { infoText: "Bu ürün hakkında ek bilgi", infoTitle: "Bilgi", checkboxId: "checkbox_info" }),
 };
 exports.Invalid = {
-    args: __assign(__assign({}, defaultArgs), { valid: false, checkboxId: "checkbox_invalid" }),
+    args: __assign(__assign({}, baseArgs), { valid: false, checkboxId: "checkbox_invalid" }),
 };
 exports.WithContentOffset = {
-    args: __assign(__assign({}, defaultArgs), { isContentOffset: true, checkboxId: "checkbox_offset" }),
+    args: __assign(__assign({}, baseArgs), { isContentOffset: true, checkboxId: "checkbox_offset" }),
+};
+exports.WithDescription = {
+    args: __assign(__assign({}, baseArgs), { title: "Etiyopya torres single", description: "SKU-001 - Çekirdek kahve - 3 varyasyon - uzun bir açıklama metni ellipsis ile 2 satırda kesilir", checkboxId: "checkbox_with_description" }),
 };
 exports.WithDropdown = {
-    args: __assign(__assign({}, defaultArgs), { isShowDropdown: true, dropdownWidth: "220px", checkboxId: "checkbox_with_dropdown", dropdownList: [
+    args: __assign(__assign({}, baseArgs), { isShowDropdown: true, dropdownWidth: "220px", checkboxId: "checkbox_with_dropdown", dropdownList: [
             { title: "Özel 1", onClick: function () { return console.log("dropdown 1"); } },
             { title: "Özel 2", onClick: function () { return console.log("dropdown 2"); } },
         ] }),
 };
+exports.Empty = {
+    args: __assign(__assign({}, baseArgs), { title: null, content: null, image: null, hasBadge: false, infoText: null, infoTitle: null, checkboxId: "checkbox_empty" }),
+};
+exports.Complete = {
+    args: __assign(__assign({}, baseArgs), { checked: true, hasBadge: true, badgeText: "Kampanyalı", badgeVariant: "primary", description: "SKU-001 · 3 varyasyon", content: "12 ay taksitli kiralama seçeneği", infoText: "Bu ürün <strong>kampanya</strong> kapsamındadır.", infoTitle: "Bilgilendirme", isShowDropdown: true, dropdownWidth: "220px", checkboxId: "checkbox_complete", dropdownList: [
+            { title: "Düzenle", onClick: function () { return console.log("edit"); } },
+            { title: "Kaldır", onClick: function () { return console.log("remove"); } },
+        ] }),
+};
+var InteractiveStory = function (args) {
+    var _a = react_1.default.useState(Boolean(args.checked)), checked = _a[0], setChecked = _a[1];
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { maxWidth: "634px" } }, { children: [(0, jsx_runtime_1.jsx)(ProductCardCheckbox_1.default, __assign({}, args, { checked: checked, productCardOnChange: function () { return setChecked(function (v) { return !v; }); } })), (0, jsx_runtime_1.jsxs)("p", __assign({ style: { marginTop: 12, font: "var(--caption-medium-11-13)" } }, { children: ["Se\u00E7ili: ", checked ? "evet" : "hayır"] }))] })));
+};
+exports.Interactive = {
+    render: function (args) { return (0, jsx_runtime_1.jsx)(InteractiveStory, __assign({}, args)); },
+    args: __assign(__assign({}, baseArgs), { checkboxId: "checkbox_interactive", hasBadge: false }),
+};

package/dist/components/ProductCardHorizontal/ProductCardHorizontal.styled.d.ts

@@ -1,3 +1,5 @@
 /// <reference types="react" />
 import { ProductCardHorizontalStyledProps } from "./props";
-export declare const ProductCardHorizontalStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalStyledProps> & ProductCardHorizontalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalStyledProps> & ProductCardHorizontalStyledProps, never>>> & string;
+export declare const ProductCardHorizontalStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}, ProductCardHorizontalStyledProps>> & string;

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

@@ -23,6 +23,9 @@ declare const _default: {
         hasLoading: {
             control: string;
         };
+        onClick: {
+            action: string;
+        };
     };
 };
 export default _default;
@@ -35,6 +38,7 @@ export declare const Default: {
         period: string;
         image: React.JSX.Element;
         hasLoading: boolean;
+        size: "medium";
     };
 };
 export declare const Medium: {
@@ -70,6 +74,7 @@ export declare const Loading: {
         component: ({ children }: any) => React.JSX.Element;
         period: string;
         image: React.JSX.Element;
+        size: "medium";
     };
 };
 export declare const WithoutPrice: {
@@ -81,6 +86,7 @@ export declare const WithoutPrice: {
         component: ({ children }: any) => React.JSX.Element;
         image: React.JSX.Element;
         hasLoading: boolean;
+        size: "medium";
     };
 };
 export declare const WithoutDescription: {
@@ -92,6 +98,19 @@ export declare const WithoutDescription: {
         period: string;
         image: React.JSX.Element;
         hasLoading: boolean;
+        size: "medium";
+    };
+};
+export declare const WithoutImage: {
+    args: {
+        image: any;
+        title: string;
+        description: string;
+        price: string;
+        component: ({ children }: any) => React.JSX.Element;
+        period: string;
+        hasLoading: boolean;
+        size: "medium";
     };
 };
 export declare const Minimal: {
@@ -103,5 +122,43 @@ export declare const Minimal: {
         component: ({ children }: any) => React.JSX.Element;
         image: React.JSX.Element;
         hasLoading: boolean;
+        size: "medium";
+    };
+};
+export declare const Empty: {
+    args: {
+        title: any;
+        description: any;
+        price: any;
+        period: any;
+        image: any;
+        component: ({ children }: any) => React.JSX.Element;
+        hasLoading: boolean;
+        size: "medium";
+    };
+};
+export declare const Complete: {
+    args: {
+        size: string;
+        title: string;
+        description: string;
+        price: string;
+        period: string;
+        image: React.JSX.Element;
+        component: ({ children }: any) => React.JSX.Element;
+        hasLoading: boolean;
+    };
+};
+export declare const Interactive: {
+    render: (args: any) => React.JSX.Element;
+    args: {
+        title: string;
+        description: string;
+        price: string;
+        component: ({ children }: any) => React.JSX.Element;
+        period: string;
+        image: React.JSX.Element;
+        hasLoading: boolean;
+        size: "medium";
     };
 };

package/dist/components/ProductCardHorizontal/stories/ProductCardHorizontal.stories.js

@@ -14,12 +14,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Minimal = exports.WithoutDescription = exports.WithoutPrice = exports.Loading = exports.Small = exports.Medium = exports.Default = void 0;
+exports.Interactive = exports.Complete = exports.Empty = exports.Minimal = exports.WithoutImage = exports.WithoutDescription = exports.WithoutPrice = exports.Loading = exports.Small = exports.Medium = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var ProductCardHorizontal_1 = __importDefault(require("../ProductCardHorizontal"));
 var props_1 = require("../props");
 var defaultImage = (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" });
-var defaultArgs = {
+var baseArgs = {
     title: "Apple İpad Air WİFİ 64GB (2020)",
     description: "50Q9900 50'' 126 Ekran QLED Smart 4K Ultra HD TV",
     price: "12.545,24 TL",
@@ -30,6 +31,7 @@ var defaultArgs = {
     period: "hafta",
     image: defaultImage,
     hasLoading: false,
+    size: "medium",
 };
 exports.default = {
     title: 'Components/ProductCard/ProductCard Horizontal',
@@ -42,26 +44,44 @@ exports.default = {
         price: { control: 'text' },
         period: { control: 'text' },
         hasLoading: { control: 'boolean' },
+        onClick: { action: 'clicked' },
     }
 };
 exports.Default = {
-    args: defaultArgs,
+    args: baseArgs,
 };
 exports.Medium = {
-    args: __assign(__assign({}, defaultArgs), { size: 'medium' }),
+    args: __assign(__assign({}, baseArgs), { size: 'medium' }),
 };
 exports.Small = {
-    args: __assign(__assign({}, defaultArgs), { size: 'small' }),
+    args: __assign(__assign({}, baseArgs), { size: 'small' }),
 };
 exports.Loading = {
-    args: __assign(__assign({}, defaultArgs), { hasLoading: true }),
+    args: __assign(__assign({}, baseArgs), { hasLoading: true }),
 };
 exports.WithoutPrice = {
-    args: __assign(__assign({}, defaultArgs), { price: null, period: null }),
+    args: __assign(__assign({}, baseArgs), { price: null, period: null }),
 };
 exports.WithoutDescription = {
-    args: __assign(__assign({}, defaultArgs), { description: null }),
+    args: __assign(__assign({}, baseArgs), { description: null }),
+};
+exports.WithoutImage = {
+    args: __assign(__assign({}, baseArgs), { image: null }),
 };
 exports.Minimal = {
-    args: __assign(__assign({}, defaultArgs), { title: "Ürün başlığı", description: null, price: null, period: null }),
+    args: __assign(__assign({}, baseArgs), { title: "Ürün başlığı", description: null, price: null, period: null }),
+};
+exports.Empty = {
+    args: __assign(__assign({}, baseArgs), { title: null, description: null, price: null, period: null, image: null }),
+};
+exports.Complete = {
+    args: __assign(__assign({}, baseArgs), { size: 'medium', title: "Apple iPad Air WiFi 64GB (2020)", description: "50Q9900 50'' 126 Ekran QLED Smart 4K Ultra HD TV", price: "12.545,24 TL", period: "hafta", image: defaultImage }),
+};
+var InteractiveStory = function (args) {
+    var _a = react_1.default.useState(0), clicks = _a[0], setClicks = _a[1];
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { maxWidth: "700px" } }, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontal_1.default, __assign({}, args, { onClick: function () { return setClicks(function (c) { return c + 1; }); } })), (0, jsx_runtime_1.jsxs)("p", __assign({ style: { marginTop: 12, font: "var(--caption-medium-11-13)" } }, { children: ["T\u0131klama: ", clicks] }))] })));
+};
+exports.Interactive = {
+    render: function (args) { return (0, jsx_runtime_1.jsx)(InteractiveStory, __assign({}, args)); },
+    args: __assign({}, baseArgs),
 };

package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.styled.d.ts

@@ -1,35 +1,66 @@
 /// <reference types="react" />
 import { ProductCardHorizontalMdStyledProps } from "./props";
-export declare const CardLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>>> & string;
-export declare const CardBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never>>> & string;
-export declare const DiscountContentSection: 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;
-export declare const PriceRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never>>> & string;
-export declare const DiscountBadge: 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;
-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;
-export declare const OldPrice: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasLoading"> & {
+export declare const CardLink: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}> & string;
+export declare const CardBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}, ProductCardHorizontalMdStyledProps>> & string;
+export declare const DiscountContentSection: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}> & string;
+export declare const PriceRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}, ProductCardHorizontalMdStyledProps>> & string;
+export declare const DiscountBadge: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}> & string;
+export declare const PriceStack: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}> & string;
+export declare const OldPrice: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}, {
     $hasLoading?: boolean;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasLoading"> & {
+}>> & string;
+export declare const NewPrice: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}, {
     $hasLoading?: boolean;
-}, never>>> & string;
-export declare const NewPrice: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasLoading"> & {
-    $hasLoading?: boolean;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasLoading"> & {
-    $hasLoading?: boolean;
-}, never>>> & string;
-export declare const ImageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never>>> & string;
-export declare const TextSection: 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;
-export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never>>> & string;
-export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never>>> & string;
-export declare const DescriptionList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never>>> & string;
-export declare const DescriptionListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>>> & string;
-export declare const PriceSection: 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;
-export declare const UnitPrice: 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;
-export declare const TotalPrice: 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;
-export declare const PriceLoading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isDiscount" | "$fullRow"> & {
-    $isDiscount?: boolean;
-    $fullRow?: boolean;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isDiscount" | "$fullRow"> & {
+}>> & string;
+export declare const ImageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}, ProductCardHorizontalMdStyledProps>> & string;
+export declare const TextSection: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}> & string;
+export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}, ProductCardHorizontalMdStyledProps>> & string;
+export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}, ProductCardHorizontalMdStyledProps>> & string;
+export declare const DescriptionList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}, ProductCardHorizontalMdStyledProps>> & string;
+export declare const DescriptionListItem: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}> & string;
+export declare const PriceSection: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}> & string;
+export declare const UnitPrice: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}> & string;
+export declare const TotalPrice: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}> & string;
+export declare const PriceLoading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}, {
     $isDiscount?: boolean;
     $fullRow?: boolean;
-}, never>>> & string;
-export declare const ProductCardHorizontalMdStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never>>> & string;
+}>> & string;
+export declare const ProductCardHorizontalMdStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}, ProductCardHorizontalMdStyledProps>> & string;

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

@@ -122,6 +122,48 @@ export declare const WithoutUnitPrice: {
         hasBgColor?: boolean;
     };
 };
+export declare const WithoutDescription: {
+    args: {
+        description: any;
+        listDescription: any;
+        title?: string;
+        image?: React.ReactNode;
+        unitPriceText?: string;
+        totalPrice?: string;
+        oldPrice?: string;
+        newPrice?: string;
+        discountRate?: number;
+        variant?: "discount" | "default";
+        slug?: string;
+        component?: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
+        onClick?(): void;
+        hasLoading?: boolean;
+        hasPriceLoading?: boolean;
+        textSize?: "sm" | "md";
+        hasBgColor?: boolean;
+    };
+};
+export declare const WithoutImage: {
+    args: {
+        image: any;
+        title?: string;
+        description?: string;
+        listDescription?: string[];
+        unitPriceText?: string;
+        totalPrice?: string;
+        oldPrice?: string;
+        newPrice?: string;
+        discountRate?: number;
+        variant?: "discount" | "default";
+        slug?: string;
+        component?: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
+        onClick?(): void;
+        hasLoading?: boolean;
+        hasPriceLoading?: boolean;
+        textSize?: "sm" | "md";
+        hasBgColor?: boolean;
+    };
+};
 export declare const Loading: {
     args: {
         hasLoading: boolean;
@@ -254,3 +296,67 @@ export declare const ListDescription: {
         hasPriceLoading?: boolean;
     };
 };
+export declare const Empty: {
+    args: {
+        title: any;
+        description: any;
+        listDescription: any;
+        image: any;
+        unitPriceText: any;
+        totalPrice: any;
+        slug: any;
+        oldPrice?: string;
+        newPrice?: string;
+        discountRate?: number;
+        variant?: "discount" | "default";
+        component?: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
+        onClick?(): void;
+        hasLoading?: boolean;
+        hasPriceLoading?: boolean;
+        textSize?: "sm" | "md";
+        hasBgColor?: boolean;
+    };
+};
+export declare const Complete: {
+    args: {
+        title: string;
+        description: any;
+        listDescription: string[];
+        variant: string;
+        discountRate: number;
+        oldPrice: string;
+        newPrice: string;
+        unitPriceText: string;
+        totalPrice: string;
+        hasBgColor: boolean;
+        textSize: string;
+        slug: string;
+        image?: React.ReactNode;
+        component?: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
+        onClick?(): void;
+        hasLoading?: boolean;
+        hasPriceLoading?: boolean;
+    };
+};
+export declare const Interactive: {
+    render: (args: ProductCardHorizontalMdProps) => React.JSX.Element;
+    args: {
+        slug: any;
+        title?: string;
+        description?: string;
+        listDescription?: string[];
+        image?: React.ReactNode;
+        unitPriceText?: string;
+        totalPrice?: string;
+        oldPrice?: string;
+        newPrice?: string;
+        discountRate?: number;
+        variant?: "discount" | "default";
+        component?: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
+        onClick?(): void;
+        hasLoading?: boolean;
+        hasPriceLoading?: boolean;
+        textSize?: "sm" | "md";
+        hasBgColor?: boolean;
+    };
+};

package/dist/components/ProductCardHorizontalMd/stories/ProductCardHorizontalMd.stories.js

@@ -14,12 +14,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListDescription = exports.Discount = exports.WithBgColor = exports.TextSizeMd = exports.DiscountPriceLoading = exports.PriceLoadingStory = exports.Loading = exports.WithoutUnitPrice = exports.WithoutLink = exports.Default = void 0;
+exports.Interactive = exports.Complete = exports.Empty = exports.ListDescription = exports.Discount = exports.WithBgColor = exports.TextSizeMd = exports.DiscountPriceLoading = exports.PriceLoadingStory = exports.Loading = exports.WithoutImage = exports.WithoutDescription = exports.WithoutUnitPrice = exports.WithoutLink = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var ProductCardHorizontalMd_1 = __importDefault(require("../ProductCardHorizontalMd"));
 var props_1 = require("../props");
 var DefaultImage = ((0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "\u00C7ekirdek kahve", style: { width: "100%", height: "100%", objectFit: "cover" } }));
-var defaultArgs = {
+var baseArgs = {
     title: "Çekirdek kahve",
     description: "İki ayda bir gönderim",
     image: DefaultImage,
@@ -27,6 +28,10 @@ var defaultArgs = {
     totalPrice: "5.200 TL",
     slug: "/urun/cekirdek-kahve",
     hasLoading: false,
+    hasPriceLoading: false,
+    textSize: "sm",
+    hasBgColor: false,
+    variant: "default",
 };
 exports.default = {
     title: 'Components/ProductCard/ProductCard Horizontal Md',
@@ -53,20 +58,26 @@ exports.default = {
     render: function (args) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "720px" } }, { children: (0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_1.default, __assign({}, args)) }))); },
 };
 exports.Default = {
-    args: __assign({}, defaultArgs),
+    args: __assign({}, baseArgs),
 };
 exports.WithoutLink = {
-    args: __assign(__assign({}, defaultArgs), { slug: null }),
+    args: __assign(__assign({}, baseArgs), { slug: null }),
 };
 exports.WithoutUnitPrice = {
-    args: __assign(__assign({}, defaultArgs), { unitPriceText: null }),
+    args: __assign(__assign({}, baseArgs), { unitPriceText: null }),
+};
+exports.WithoutDescription = {
+    args: __assign(__assign({}, baseArgs), { description: null, listDescription: null }),
+};
+exports.WithoutImage = {
+    args: __assign(__assign({}, baseArgs), { image: null }),
 };
 exports.Loading = {
-    args: __assign(__assign({}, defaultArgs), { hasLoading: true }),
+    args: __assign(__assign({}, baseArgs), { hasLoading: true }),
 };
 exports.PriceLoadingStory = {
     name: 'Price loading',
-    args: __assign(__assign({}, defaultArgs), { hasPriceLoading: true }),
+    args: __assign(__assign({}, baseArgs), { hasPriceLoading: true }),
 };
 exports.DiscountPriceLoading = {
     name: 'Discount price loading',
@@ -83,10 +94,10 @@ exports.DiscountPriceLoading = {
     },
 };
 exports.TextSizeMd = {
-    args: __assign(__assign({}, defaultArgs), { textSize: 'md' }),
+    args: __assign(__assign({}, baseArgs), { textSize: 'md' }),
 };
 exports.WithBgColor = {
-    args: __assign(__assign({}, defaultArgs), { hasBgColor: true, slug: null }),
+    args: __assign(__assign({}, baseArgs), { hasBgColor: true, slug: null }),
 };
 exports.Discount = {
     args: {
@@ -101,5 +112,19 @@ exports.Discount = {
     },
 };
 exports.ListDescription = {
-    args: __assign(__assign({}, defaultArgs), { description: null, listDescription: ['İki ayda bir gönderim', 'Ücretsiz kargo', 'İptal edilebilir'], hasBgColor: true, textSize: 'md', slug: null }),
+    args: __assign(__assign({}, baseArgs), { description: null, listDescription: ['İki ayda bir gönderim', 'Ücretsiz kargo', 'İptal edilebilir'], hasBgColor: true, textSize: 'md', slug: null }),
+};
+exports.Empty = {
+    args: __assign(__assign({}, baseArgs), { title: null, description: null, listDescription: null, image: null, unitPriceText: null, totalPrice: null, slug: null }),
+};
+exports.Complete = {
+    args: __assign(__assign({}, baseArgs), { title: "Çekirdek kahve", description: null, listDescription: ['İki ayda bir gönderim', 'Ücretsiz kargo', 'İptal edilebilir'], variant: 'discount', discountRate: 20, oldPrice: "920 TL", newPrice: "520 TL", unitPriceText: "10 adet x 520 TL", totalPrice: "5.200 TL", hasBgColor: true, textSize: 'md', slug: "/urun/cekirdek-kahve" }),
+};
+var InteractiveStory = function (args) {
+    var _a = react_1.default.useState(0), clicks = _a[0], setClicks = _a[1];
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { maxWidth: "720px" } }, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_1.default, __assign({}, args, { onClick: function () { return setClicks(function (c) { return c + 1; }); } })), (0, jsx_runtime_1.jsxs)("p", __assign({ style: { marginTop: 12, font: "var(--caption-medium-11-13)" } }, { children: ["T\u0131klama: ", clicks] }))] })));
+};
+exports.Interactive = {
+    render: function (args) { return (0, jsx_runtime_1.jsx)(InteractiveStory, __assign({}, args)); },
+    args: __assign(__assign({}, baseArgs), { slug: null }),
 };