krl-alfred 2.23.13 → 2.23.15

package/dist/components/Badges/stories/Badges.stories.js

@@ -14,90 +14,148 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DarkWithPosition = exports.WithResponsive = exports.AllLayouts = exports.AllSizes = exports.AllVariants = exports.Text = exports.Dark = exports.Belt = exports.Light = exports.Disabled = exports.Danger = exports.Secondary = exports.Primary = exports.Default = void 0;
+exports.Complete = exports.OnProductCard = exports.DarkAllSizes = exports.TextAllVariants = exports.AllLayouts = exports.AllSizes = exports.AllVariants = exports.WithResponsive = exports.TextLongTitle = exports.TextLight = exports.TextDisabled = exports.TextDanger = exports.TextSecondary = exports.Text = exports.DarkWithPosition = exports.DarkLarge = exports.DarkSmall = exports.DarkXsmall = exports.Dark = exports.BeltLongTitle = exports.BeltSmall = exports.Belt = exports.Light = exports.Disabled = exports.Danger = exports.Secondary = exports.Primary = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Badges_1 = __importDefault(require("../Badges"));
 var props_1 = require("../props");
 var Wrapper = function (_a) {
-    var children = _a.children, _b = _a.maxWidth, maxWidth = _b === void 0 ? "120px" : _b;
-    return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: maxWidth } }, { children: children })));
+    var children = _a.children, _b = _a.maxWidth, maxWidth = _b === void 0 ? "90px" : _b;
+    return (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: maxWidth } }, { children: children }));
+};
+var baseArgs = {
+    title: "İndirimli",
+    variant: "primary",
+    layout: "belt",
+    size: "medium",
+    hasResponsive: false,
+    left: undefined,
+    top: undefined,
+    text: undefined,
 };
 exports.default = {
-    title: 'Components/Badges',
-    component: function (props) { return ((0, jsx_runtime_1.jsx)(Wrapper, __assign({ maxWidth: props.layout === 'dark' ? "100px" : "120px" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, __assign({}, props)) }))); },
-    tags: ['autodocs'],
+    title: "Components/Badges",
+    component: function (props) { return ((0, jsx_runtime_1.jsx)(Wrapper, __assign({ maxWidth: props.layout === "dark" ? "100px" : "90px" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, __assign({}, props)) }))); },
+    tags: ["autodocs"],
     argTypes: {
-        layout: { control: 'select', options: props_1.layouts },
-        variant: { control: 'select', options: props_1.variants },
-        size: { control: 'select', options: props_1.sizes },
-        title: { control: 'text' },
-        text: { control: 'text' },
-        hasResponsive: { control: 'boolean' },
-        left: { control: 'text' },
-        top: { control: 'text' },
-    }
+        layout: { control: "select", options: props_1.layouts },
+        variant: { control: "select", options: props_1.variants },
+        size: { control: "select", options: props_1.sizes },
+        title: { control: "text" },
+        text: { control: "text" },
+        hasResponsive: { control: "boolean" },
+        left: { control: "text" },
+        top: { control: "text" },
+    },
 };
 exports.Default = {
-    args: {
-        title: "İndirimli",
-        variant: "primary",
-        layout: "belt",
-    },
+    args: __assign({}, baseArgs),
 };
-// Variant stories
 exports.Primary = {
-    args: __assign(__assign({}, exports.Default.args), { variant: "primary", layout: "belt" }),
+    args: __assign(__assign({}, baseArgs), { variant: "primary" }),
 };
 exports.Secondary = {
-    args: __assign(__assign({}, exports.Default.args), { variant: "secondary", layout: "belt" }),
+    args: __assign(__assign({}, baseArgs), { variant: "secondary" }),
 };
 exports.Danger = {
-    args: __assign(__assign({}, exports.Default.args), { variant: "danger", layout: "belt" }),
+    args: __assign(__assign({}, baseArgs), { variant: "danger" }),
 };
 exports.Disabled = {
-    args: __assign(__assign({}, exports.Default.args), { variant: "disabled", layout: "belt" }),
+    args: __assign(__assign({}, baseArgs), { variant: "disabled" }),
 };
 exports.Light = {
-    args: __assign(__assign({}, exports.Default.args), { variant: "light", layout: "belt" }),
+    args: __assign(__assign({}, baseArgs), { variant: "light" }),
 };
-// Layout stories
 exports.Belt = {
-    args: __assign(__assign({}, exports.Default.args), { layout: "belt", title: "İndirimli", size: "medium" }),
+    args: __assign(__assign({}, baseArgs), { layout: "belt", title: "İndirimli", size: "medium" }),
+};
+exports.BeltSmall = {
+    args: __assign(__assign({}, baseArgs), { layout: "belt", size: "small", title: "Yeni" }),
+};
+exports.BeltLongTitle = {
+    args: __assign(__assign({}, baseArgs), { layout: "belt", title: "Süper İndirim" }),
 };
 exports.Dark = {
-    args: {
-        layout: "dark",
-        size: "medium",
-        left: undefined,
-        top: undefined,
-    },
+    args: __assign(__assign({}, baseArgs), { layout: "dark", size: "medium", title: undefined }),
+};
+exports.DarkXsmall = {
+    args: __assign(__assign({}, baseArgs), { layout: "dark", size: "xsmall" }),
+};
+exports.DarkSmall = {
+    args: __assign(__assign({}, baseArgs), { layout: "dark", size: "small" }),
+};
+exports.DarkLarge = {
+    args: __assign(__assign({}, baseArgs), { layout: "dark", size: "large" }),
+};
+exports.DarkWithPosition = {
+    args: __assign(__assign({}, baseArgs), { layout: "dark", size: "large", left: "10px", top: "10px" }),
 };
 exports.Text = {
-    args: __assign(__assign({}, exports.Default.args), { layout: "text", title: "Yeni", variant: "primary" }),
+    args: __assign(__assign({}, baseArgs), { layout: "text", title: "Yeni", variant: "primary" }),
 };
-// All variants together
-exports.AllVariants = {
-    args: __assign({}, exports.Default.args),
-    render: function (args) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { display: 'flex', gap: '12px', flexWrap: 'wrap' } }, { children: props_1.variants.map(function (v) { return ((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, __assign({}, args, { variant: v, title: v, layout: "belt" })) }, v)); }) }))); },
+exports.TextSecondary = {
+    args: __assign(__assign({}, baseArgs), { layout: "text", title: "Kampanyalı", variant: "secondary" }),
 };
-// All sizes together
-exports.AllSizes = {
-    args: __assign({}, exports.Default.args),
-    render: function (args) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { display: 'flex', gap: '12px', flexWrap: 'wrap', alignItems: 'flex-start' } }, { children: props_1.sizes.map(function (s) { return ((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, __assign({}, args, { size: s, title: s, layout: "belt" })) }, s)); }) }))); },
+exports.TextDanger = {
+    args: __assign(__assign({}, baseArgs), { layout: "text", title: "Son", variant: "danger" }),
 };
-// All layouts together
-exports.AllLayouts = {
-    args: __assign({}, exports.Default.args),
-    render: function (args) { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: 'flex', gap: '16px', flexWrap: 'wrap', alignItems: 'flex-start' } }, { children: [(0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, __assign({}, args, { layout: "belt", title: "Belt" })) }), (0, jsx_runtime_1.jsx)(Wrapper, __assign({ maxWidth: "100px" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, __assign({}, args, { layout: "dark", size: "medium" })) })), (0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, __assign({}, args, { layout: "text", title: "Text" })) })] }))); },
+exports.TextDisabled = {
+    args: __assign(__assign({}, baseArgs), { layout: "text", title: "Pasif", variant: "disabled" }),
+};
+exports.TextLight = {
+    args: __assign(__assign({}, baseArgs), { layout: "text", title: "Light", variant: "light" }),
+};
+exports.TextLongTitle = {
+    args: __assign(__assign({}, baseArgs), { layout: "text", title: "Çok uzun badge metni", variant: "primary" }),
 };
 exports.WithResponsive = {
-    args: __assign(__assign({}, exports.Default.args), { layout: "belt", hasResponsive: true, title: "Responsive" }),
+    args: __assign(__assign({}, baseArgs), { layout: "belt", hasResponsive: true, title: "Responsive" }),
 };
-exports.DarkWithPosition = {
-    args: {
-        layout: "dark",
-        size: "large",
-        left: "10px",
-        top: "10px",
-    },
+exports.AllVariants = {
+    args: __assign({}, baseArgs),
+    render: function (args) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { display: "flex", gap: "12px", flexWrap: "wrap" } }, { children: props_1.variants.map(function (v) { return ((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, __assign({}, args, { variant: v, title: v, layout: "belt" })) }, v)); }) }))); },
+};
+exports.AllSizes = {
+    args: __assign({}, baseArgs),
+    render: function (args) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
+            display: "flex",
+            gap: "12px",
+            flexWrap: "wrap",
+            alignItems: "flex-start",
+        } }, { children: props_1.sizes.map(function (s) { return ((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, __assign({}, args, { size: s, title: s, layout: "belt" })) }, s)); }) }))); },
+};
+exports.AllLayouts = {
+    args: __assign({}, baseArgs),
+    render: function (args) { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: {
+            display: "flex",
+            gap: "16px",
+            flexWrap: "wrap",
+            alignItems: "flex-start",
+        } }, { children: [(0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, __assign({}, args, { layout: "belt", title: "Belt" })) }), (0, jsx_runtime_1.jsx)(Wrapper, __assign({ maxWidth: "100px" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, __assign({}, args, { layout: "dark", size: "medium" })) })), (0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, __assign({}, args, { layout: "text", title: "Text" })) })] }))); },
+};
+exports.TextAllVariants = {
+    args: __assign(__assign({}, baseArgs), { layout: "text" }),
+    render: function (args) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { display: "flex", gap: "8px", flexWrap: "wrap", alignItems: "center" } }, { children: props_1.variants.map(function (v) { return ((0, jsx_runtime_1.jsx)(Badges_1.default, __assign({}, args, { layout: "text", variant: v, title: v }), v)); }) }))); },
+};
+exports.DarkAllSizes = {
+    args: __assign(__assign({}, baseArgs), { layout: "dark" }),
+    render: function (args) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
+            display: "flex",
+            gap: "16px",
+            flexWrap: "wrap",
+            alignItems: "flex-end",
+        } }, { children: props_1.sizes.map(function (s) { return ((0, jsx_runtime_1.jsx)(Wrapper, __assign({ maxWidth: "100px" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, __assign({}, args, { layout: "dark", size: s })) }), s)); }) }))); },
+};
+exports.OnProductCard = {
+    render: function () { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: {
+            position: "relative",
+            width: 180,
+            height: 220,
+            borderRadius: 8,
+            background: "var(--dark-opacity-3)",
+            border: "1px solid var(--dark-opacity-10)",
+            overflow: "hidden",
+        } }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ style: { position: "absolute", top: 0, left: 0, zIndex: 2 } }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "belt", variant: "primary", title: "\u0130ndirimli", size: "small" }) })), (0, jsx_runtime_1.jsx)("div", __assign({ style: { position: "absolute", top: 8, right: 8, zIndex: 2 } }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "dark", size: "xsmall" }) })), (0, jsx_runtime_1.jsx)("div", __assign({ style: { position: "absolute", bottom: 12, left: 12 } }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "danger", title: "Son 2" }) }))] }))); },
+};
+exports.Complete = {
+    render: function () { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: "flex", flexDirection: "column", gap: 24 } }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ style: { display: "block", marginBottom: 8 } }, { children: "Belt" })), (0, jsx_runtime_1.jsx)("div", __assign({ style: { display: "flex", gap: 12, flexWrap: "wrap" } }, { children: props_1.variants.map(function (v) { return ((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "belt", variant: v, title: v, size: "medium" }) }, v)); }) }))] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ style: { display: "block", marginBottom: 8 } }, { children: "Text" })), (0, jsx_runtime_1.jsx)("div", __assign({ style: { display: "flex", gap: 8, flexWrap: "wrap" } }, { children: props_1.variants.map(function (v) { return ((0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: v, title: v }, v)); }) }))] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ style: { display: "block", marginBottom: 8 } }, { children: "Dark" })), (0, jsx_runtime_1.jsx)("div", __assign({ style: { display: "flex", gap: 16, alignItems: "flex-end" } }, { children: props_1.sizes.map(function (s) { return ((0, jsx_runtime_1.jsx)(Wrapper, __assign({ maxWidth: "100px" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "dark", size: s }) }), s)); }) }))] })] }))); },
 };

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

@@ -1,3 +1,5 @@
 /// <reference types="react" />
 import { BannerCardStyledProps } from "./props";
-export declare const BannerCardStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BannerCardStyledProps> & BannerCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BannerCardStyledProps> & BannerCardStyledProps, never>>> & string;
+export declare const BannerCardStyled: 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;
+}, BannerCardStyledProps>> & string;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 declare const _default: {
     title: string;
     component: (props: any) => React.JSX.Element;
@@ -13,9 +13,34 @@ declare const _default: {
         hasRightArrow: {
             control: string;
         };
+        title: {
+            control: string;
+        };
+        description: {
+            control: string;
+        };
+        shortDesc: {
+            control: string;
+        };
+        buttonText: {
+            control: string;
+        };
+        customStyle: {
+            control: string;
+        };
+        buttonVariant: {
+            control: string;
+            options: string[];
+        };
         onClick: {
             action: string;
         };
+        img: {
+            control: boolean;
+        };
+        imgMobile: {
+            control: boolean;
+        };
     };
 };
 export default _default;
@@ -27,10 +52,12 @@ export declare const Default: {
         description: string;
         shortDesc: string;
         buttonText: string;
-        onClick: () => Window;
+        onClick: () => void;
         hasRightArrow: boolean;
         hasShadow: boolean;
         hasDarkTheme: boolean;
+        buttonVariant: string;
+        customStyle: string;
     };
 };
 export declare const DarkTheme: {
@@ -42,9 +69,27 @@ export declare const DarkTheme: {
         description: string;
         shortDesc: string;
         buttonText: string;
-        onClick: () => Window;
+        onClick: () => void;
         hasRightArrow: boolean;
         hasShadow: boolean;
+        buttonVariant: string;
+        customStyle: string;
+    };
+};
+export declare const WithoutShadow: {
+    args: {
+        hasShadow: boolean;
+        img: React.JSX.Element;
+        imgMobile: React.JSX.Element;
+        title: string;
+        description: string;
+        shortDesc: string;
+        buttonText: string;
+        onClick: () => void;
+        hasRightArrow: boolean;
+        hasDarkTheme: boolean;
+        buttonVariant: string;
+        customStyle: string;
     };
 };
 export declare const Shadow: {
@@ -56,9 +101,11 @@ export declare const Shadow: {
         description: string;
         shortDesc: string;
         buttonText: string;
-        onClick: () => Window;
+        onClick: () => void;
         hasRightArrow: boolean;
         hasDarkTheme: boolean;
+        buttonVariant: string;
+        customStyle: string;
     };
 };
 export declare const RightArrow: {
@@ -70,8 +117,234 @@ export declare const RightArrow: {
         description: string;
         shortDesc: string;
         buttonText: string;
-        onClick: () => Window;
+        onClick: () => void;
+        hasShadow: boolean;
+        hasDarkTheme: boolean;
+        buttonVariant: string;
+        customStyle: string;
+    };
+};
+export declare const DarkThemeWithRightArrow: {
+    args: {
+        hasDarkTheme: boolean;
+        hasRightArrow: boolean;
+        img: React.JSX.Element;
+        imgMobile: React.JSX.Element;
+        title: string;
+        description: string;
+        shortDesc: string;
+        buttonText: string;
+        onClick: () => void;
+        hasShadow: boolean;
+        buttonVariant: string;
+        customStyle: string;
+    };
+};
+export declare const WithoutButton: {
+    args: {
+        buttonText: string;
+        img: React.JSX.Element;
+        imgMobile: React.JSX.Element;
+        title: string;
+        description: string;
+        shortDesc: string;
+        onClick: () => void;
+        hasRightArrow: boolean;
+        hasShadow: boolean;
+        hasDarkTheme: boolean;
+        buttonVariant: string;
+        customStyle: string;
+    };
+};
+export declare const WithoutDescription: {
+    args: {
+        description: string;
+        title: string;
+        img: React.JSX.Element;
+        imgMobile: React.JSX.Element;
+        shortDesc: string;
+        buttonText: string;
+        onClick: () => void;
+        hasRightArrow: boolean;
+        hasShadow: boolean;
+        hasDarkTheme: boolean;
+        buttonVariant: string;
+        customStyle: string;
+    };
+};
+export declare const TitleOnly: {
+    args: {
+        description: string;
+        buttonText: string;
+        shortDesc: string;
+        hasRightArrow: boolean;
+        img: React.JSX.Element;
+        imgMobile: React.JSX.Element;
+        title: string;
+        onClick: () => void;
+        hasShadow: boolean;
+        hasDarkTheme: boolean;
+        buttonVariant: string;
+        customStyle: string;
+    };
+};
+export declare const WithoutMobileImage: {
+    args: {
+        imgMobile: any;
+        shortDesc: string;
+        hasRightArrow: boolean;
+        img: React.JSX.Element;
+        title: string;
+        description: string;
+        buttonText: string;
+        onClick: () => void;
+        hasShadow: boolean;
+        hasDarkTheme: boolean;
+        buttonVariant: string;
+        customStyle: string;
+    };
+};
+export declare const WithoutDesktopImage: {
+    args: {
+        img: any;
+        title: string;
+        description: string;
+        imgMobile: React.JSX.Element;
+        shortDesc: string;
+        buttonText: string;
+        onClick: () => void;
+        hasRightArrow: boolean;
+        hasShadow: boolean;
+        hasDarkTheme: boolean;
+        buttonVariant: string;
+        customStyle: string;
+    };
+};
+export declare const WithHtmlContent: {
+    args: {
+        title: string;
+        description: string;
+        shortDesc: string;
+        hasRightArrow: boolean;
+        img: React.JSX.Element;
+        imgMobile: React.JSX.Element;
+        buttonText: string;
+        onClick: () => void;
+        hasShadow: boolean;
+        hasDarkTheme: boolean;
+        buttonVariant: string;
+        customStyle: string;
+    };
+};
+export declare const ButtonSecondary: {
+    args: {
+        buttonVariant: string;
+        buttonText: string;
+        img: React.JSX.Element;
+        imgMobile: React.JSX.Element;
+        title: string;
+        description: string;
+        shortDesc: string;
+        onClick: () => void;
+        hasRightArrow: boolean;
+        hasShadow: boolean;
+        hasDarkTheme: boolean;
+        customStyle: string;
+    };
+};
+export declare const ButtonGhost: {
+    args: {
+        buttonVariant: string;
+        buttonText: string;
+        img: React.JSX.Element;
+        imgMobile: React.JSX.Element;
+        title: string;
+        description: string;
+        shortDesc: string;
+        onClick: () => void;
+        hasRightArrow: boolean;
+        hasShadow: boolean;
+        hasDarkTheme: boolean;
+        customStyle: string;
+    };
+};
+export declare const ButtonInverted: {
+    args: {
+        hasDarkTheme: boolean;
+        buttonVariant: string;
+        buttonText: string;
+        img: React.JSX.Element;
+        imgMobile: React.JSX.Element;
+        title: string;
+        description: string;
+        shortDesc: string;
+        onClick: () => void;
+        hasRightArrow: boolean;
+        hasShadow: boolean;
+        customStyle: string;
+    };
+};
+export declare const ButtonSuccess: {
+    args: {
+        buttonVariant: string;
+        buttonText: string;
+        img: React.JSX.Element;
+        imgMobile: React.JSX.Element;
+        title: string;
+        description: string;
+        shortDesc: string;
+        onClick: () => void;
+        hasRightArrow: boolean;
+        hasShadow: boolean;
+        hasDarkTheme: boolean;
+        customStyle: string;
+    };
+};
+export declare const CustomStyle: {
+    args: {
+        customStyle: string;
+        title: string;
+        description: string;
+        img: React.JSX.Element;
+        imgMobile: React.JSX.Element;
+        shortDesc: string;
+        buttonText: string;
+        onClick: () => void;
+        hasRightArrow: boolean;
+        hasShadow: boolean;
+        hasDarkTheme: boolean;
+        buttonVariant: string;
+    };
+};
+export declare const LongContent: {
+    args: {
+        title: string;
+        description: string;
+        shortDesc: string;
+        hasRightArrow: boolean;
+        img: React.JSX.Element;
+        imgMobile: React.JSX.Element;
+        buttonText: string;
+        onClick: () => void;
         hasShadow: boolean;
         hasDarkTheme: boolean;
+        buttonVariant: string;
+        customStyle: string;
+    };
+};
+export declare const Complete: {
+    args: {
+        hasDarkTheme: boolean;
+        hasShadow: boolean;
+        hasRightArrow: boolean;
+        buttonVariant: string;
+        title: string;
+        description: string;
+        shortDesc: string;
+        buttonText: string;
+        customStyle: string;
+        img: React.JSX.Element;
+        imgMobile: React.JSX.Element;
+        onClick: () => void;
     };
 };

package/dist/components/BannerCard/stories/BannerCard.stories.js

@@ -14,40 +14,98 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RightArrow = exports.Shadow = exports.DarkTheme = exports.Default = void 0;
+exports.Complete = exports.LongContent = exports.CustomStyle = exports.ButtonSuccess = exports.ButtonInverted = exports.ButtonGhost = exports.ButtonSecondary = exports.WithHtmlContent = exports.WithoutDesktopImage = exports.WithoutMobileImage = exports.TitleOnly = exports.WithoutDescription = exports.WithoutButton = exports.DarkThemeWithRightArrow = exports.RightArrow = exports.Shadow = exports.WithoutShadow = exports.DarkTheme = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var BannerCard_1 = __importDefault(require("../BannerCard"));
+var props_1 = require("../../Button/props");
+var bannerImg = ((0, jsx_runtime_1.jsx)("img", { src: "https://images.kiralarsin.com/banner/turkiyeninilk-karbon-notr-teslimat-yapan-e-ticaret-sitesi.svg", height: "260px", alt: "test" }));
+var baseArgs = {
+    img: bannerImg,
+    imgMobile: bannerImg,
+    title: "ARTAN DİJİTALLEŞME GEZEGENİMİZİ ETKİLİYOR",
+    description: "Birkaç kez kullanacağın cihazları kiralayarak döngüsel ekonomiye katkı sağlayabilir, e-atıklara birlikte çözüm olabiliriz.",
+    shortDesc: "Cihazlarını kiralayarak döngüsel ekonomiye katkı sağla!",
+    buttonText: "Hemen Kirala",
+    onClick: function () { return console.log("banner clicked"); },
+    hasRightArrow: false,
+    hasShadow: true,
+    hasDarkTheme: false,
+    buttonVariant: "primary",
+    customStyle: "",
+};
 exports.default = {
-    title: 'Components/BannerCard',
-    component: function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: '1050px' } }, { children: (0, jsx_runtime_1.jsx)(BannerCard_1.default, __assign({}, props)) })); },
-    tags: ['autodocs'],
+    title: "Components/BannerCard",
+    component: function (props) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "1050px" } }, { children: (0, jsx_runtime_1.jsx)(BannerCard_1.default, __assign({}, props)) }))); },
+    tags: ["autodocs"],
     argTypes: {
-        hasDarkTheme: { control: 'boolean' },
-        hasShadow: { control: 'boolean' },
-        hasRightArrow: { control: 'boolean' },
-        onClick: { action: 'clicked' }
-    }
+        hasDarkTheme: { control: "boolean" },
+        hasShadow: { control: "boolean" },
+        hasRightArrow: { control: "boolean" },
+        title: { control: "text" },
+        description: { control: "text" },
+        shortDesc: { control: "text" },
+        buttonText: { control: "text" },
+        customStyle: { control: "text" },
+        buttonVariant: { control: "select", options: props_1.variants },
+        onClick: { action: "clicked" },
+        img: { control: false },
+        imgMobile: { control: false },
+    },
 };
 exports.Default = {
-    args: {
-        img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/turkiyeninilk-karbon-notr-teslimat-yapan-e-ticaret-sitesi.svg", height: "260px", alt: "test" }),
-        imgMobile: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/turkiyeninilk-karbon-notr-teslimat-yapan-e-ticaret-sitesi.svg", height: "260px", alt: "test" }),
-        title: 'ARTAN DİJİTALLEŞME GEZEGENİMİZİ ETKİLİYOR',
-        description: 'Birkaç kez kullanacağın cihazları kiralayarak döngüsel ekonomiye katkı sağlayabilir, e-atıklara birlikte çözüm olabiliriz.',
-        shortDesc: 'Cihazlarını kiralayarak döngüsel ekonomiye katkı sağla!',
-        buttonText: 'Hemen Kirala',
-        onClick: function () { return window.open('/tum-urunler', '_blank'); },
-        hasRightArrow: false,
-        hasShadow: true,
-        hasDarkTheme: false,
-    },
+    args: __assign({}, baseArgs),
 };
 exports.DarkTheme = {
-    args: __assign(__assign({}, exports.Default.args), { hasDarkTheme: true }),
+    args: __assign(__assign({}, baseArgs), { hasDarkTheme: true }),
+};
+exports.WithoutShadow = {
+    args: __assign(__assign({}, baseArgs), { hasShadow: false }),
 };
 exports.Shadow = {
-    args: __assign(__assign({}, exports.Default.args), { hasShadow: true }),
+    args: __assign(__assign({}, baseArgs), { hasShadow: true }),
 };
 exports.RightArrow = {
-    args: __assign(__assign({}, exports.Default.args), { hasRightArrow: true }),
+    args: __assign(__assign({}, baseArgs), { hasRightArrow: true }),
+};
+exports.DarkThemeWithRightArrow = {
+    args: __assign(__assign({}, baseArgs), { hasDarkTheme: true, hasRightArrow: true }),
+};
+exports.WithoutButton = {
+    args: __assign(__assign({}, baseArgs), { buttonText: "" }),
+};
+exports.WithoutDescription = {
+    args: __assign(__assign({}, baseArgs), { description: "", title: "Sadece başlık ve buton" }),
+};
+exports.TitleOnly = {
+    args: __assign(__assign({}, baseArgs), { description: "", buttonText: "", shortDesc: "Mobil kısa açıklama", hasRightArrow: true }),
+};
+exports.WithoutMobileImage = {
+    args: __assign(__assign({}, baseArgs), { imgMobile: null, shortDesc: "Mobil görsel yok, desktop görsel kullanılır", hasRightArrow: true }),
+};
+exports.WithoutDesktopImage = {
+    args: __assign(__assign({}, baseArgs), { img: null, title: "Görselsiz banner", description: "Sadece metin ve CTA alanı." }),
+};
+exports.WithHtmlContent = {
+    args: __assign(__assign({}, baseArgs), { title: "ARTAN <span style='color:var(--primary)'>DİJİTALLEŞME</span> GEZEGENİMİZİ ETKİLİYOR", description: "Cihazları <b>kiralayarak</b> döngüsel ekonomiye katkı sağlayabilirsin. Detaylar için <a href='#'>buraya</a> tıkla.", shortDesc: "<b>Kiralayarak</b> katkı sağla!", hasRightArrow: true }),
+};
+exports.ButtonSecondary = {
+    args: __assign(__assign({}, baseArgs), { buttonVariant: "secondary", buttonText: "İncele" }),
+};
+exports.ButtonGhost = {
+    args: __assign(__assign({}, baseArgs), { buttonVariant: "ghost", buttonText: "Daha fazla" }),
+};
+exports.ButtonInverted = {
+    args: __assign(__assign({}, baseArgs), { hasDarkTheme: true, buttonVariant: "inverted", buttonText: "Keşfet" }),
+};
+exports.ButtonSuccess = {
+    args: __assign(__assign({}, baseArgs), { buttonVariant: "success", buttonText: "Başla" }),
+};
+exports.CustomStyle = {
+    args: __assign(__assign({}, baseArgs), { customStyle: "background: linear-gradient(135deg, #f5f0ff 0%, #ffffff 60%);", title: "Özel arka plan", description: "customStyle ile banner arka planı özelleştirildi." }),
+};
+exports.LongContent = {
+    args: __assign(__assign({}, baseArgs), { title: "Çok uzun bir banner başlığı: döngüsel ekonomi ve sürdürülebilir tüketim birlikte", description: "Bu açıklama bilerek uzun tutuldu. Birkaç kez kullanacağın cihazları kiralayarak hem bütçeni koruyabilir hem de elektronik atıkları azaltarak gezegene katkı sağlayabilirsin. Kampanya koşulları dönemsel olarak değişiklik gösterebilir.", shortDesc: "Uzun mobil kısa açıklama: cihazlarını kiralayarak döngüsel ekonomiye katkı sağla ve fırsatları kaçırma!", hasRightArrow: true }),
+};
+exports.Complete = {
+    args: __assign(__assign({}, baseArgs), { hasDarkTheme: true, hasShadow: true, hasRightArrow: true, buttonVariant: "inverted", title: "Tüm özellikler <b>aktif</b>", description: "Dark theme, shadow, right arrow ve inverted buton birlikte.", shortDesc: "Tüm özellikler aktif mobil özet", buttonText: "Hemen Git", customStyle: "" }),
 };