krl-alfred 2.23.13 → 2.23.15

package/dist/components/Dropdown/stories/Dropdown.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;
@@ -8,6 +8,31 @@ declare const _default: {
             control: string;
             options: string[];
         };
+        childrenVariant: {
+            control: string;
+            options: string[];
+        };
+        show: {
+            control: string;
+        };
+        isShowTopChevron: {
+            control: string;
+        };
+        right: {
+            control: string;
+        };
+        width: {
+            control: string;
+        };
+        top: {
+            control: string;
+        };
+        list: {
+            control: string;
+        };
+        Toggle: {
+            control: boolean;
+        };
     };
 };
 export default _default;
@@ -17,23 +42,388 @@ export declare const Default: {
             icon: string;
             title: string;
             slug: string;
-            onClick?: undefined;
+            onClick: () => void;
+        } | {
+            title: string;
+            slug: string;
+            onClick: () => void;
+            icon?: undefined;
+        })[];
+        show: boolean;
+        size: string;
+        isShowTopChevron: boolean;
+        childrenVariant: string;
+        right: string;
+        width: any;
+        top: any;
+        Toggle: any;
+    };
+};
+export declare const Open: {
+    args: {
+        show: boolean;
+        list: ({
+            icon: string;
+            title: string;
+            slug: string;
+            onClick: () => void;
         } | {
             title: string;
             slug: string;
+            onClick: () => void;
             icon?: undefined;
-            onClick?: undefined;
+        })[];
+        size: string;
+        isShowTopChevron: boolean;
+        childrenVariant: string;
+        right: string;
+        width: any;
+        top: any;
+        Toggle: any;
+    };
+};
+export declare const Closed: {
+    args: {
+        show: boolean;
+        list: ({
+            icon: string;
+            title: string;
+            slug: string;
+            onClick: () => void;
         } | {
             title: string;
+            slug: string;
+            onClick: () => void;
+            icon?: undefined;
+        })[];
+        size: string;
+        isShowTopChevron: boolean;
+        childrenVariant: string;
+        right: string;
+        width: any;
+        top: any;
+        Toggle: any;
+    };
+};
+export declare const Small: {
+    args: {
+        size: string;
+        show: boolean;
+        list: ({
+            icon: string;
+            title: string;
+            slug: string;
             onClick: () => void;
+        } | {
+            title: string;
             slug: string;
+            onClick: () => void;
             icon?: undefined;
         })[];
         isShowTopChevron: boolean;
         childrenVariant: string;
-        right: any;
+        right: string;
         width: any;
         top: any;
-        toggle: any;
+        Toggle: any;
+    };
+};
+export declare const Medium: {
+    args: {
+        size: string;
+        show: boolean;
+        list: ({
+            icon: string;
+            title: string;
+            slug: string;
+            onClick: () => void;
+        } | {
+            title: string;
+            slug: string;
+            onClick: () => void;
+            icon?: undefined;
+        })[];
+        isShowTopChevron: boolean;
+        childrenVariant: string;
+        right: string;
+        width: any;
+        top: any;
+        Toggle: any;
+    };
+};
+export declare const PrimaryVariant: {
+    args: {
+        childrenVariant: string;
+        show: boolean;
+        list: ({
+            icon: string;
+            title: string;
+            slug: string;
+            onClick: () => void;
+        } | {
+            title: string;
+            slug: string;
+            onClick: () => void;
+            icon?: undefined;
+        })[];
+        size: string;
+        isShowTopChevron: boolean;
+        right: string;
+        width: any;
+        top: any;
+        Toggle: any;
+    };
+};
+export declare const SecondaryVariant: {
+    args: {
+        childrenVariant: string;
+        show: boolean;
+        list: ({
+            icon: string;
+            title: string;
+            slug: string;
+            onClick: () => void;
+        } | {
+            title: string;
+            slug: string;
+            onClick: () => void;
+            icon?: undefined;
+        })[];
+        size: string;
+        isShowTopChevron: boolean;
+        right: string;
+        width: any;
+        top: any;
+        Toggle: any;
+    };
+};
+export declare const WithoutTopChevron: {
+    args: {
+        isShowTopChevron: boolean;
+        show: boolean;
+        list: ({
+            icon: string;
+            title: string;
+            slug: string;
+            onClick: () => void;
+        } | {
+            title: string;
+            slug: string;
+            onClick: () => void;
+            icon?: undefined;
+        })[];
+        size: string;
+        childrenVariant: string;
+        right: string;
+        width: any;
+        top: any;
+        Toggle: any;
+    };
+};
+export declare const CustomPosition: {
+    args: {
+        show: boolean;
+        right: string;
+        top: string;
+        width: string;
+        list: ({
+            icon: string;
+            title: string;
+            slug: string;
+            onClick: () => void;
+        } | {
+            title: string;
+            slug: string;
+            onClick: () => void;
+            icon?: undefined;
+        })[];
+        size: string;
+        isShowTopChevron: boolean;
+        childrenVariant: string;
+        Toggle: any;
+    };
+};
+export declare const WideMenu: {
+    args: {
+        show: boolean;
+        width: string;
+        list: ({
+            icon: string;
+            title: string;
+            slug: string;
+            onClick: () => void;
+        } | {
+            title: string;
+            slug: string;
+            onClick: () => void;
+            icon?: undefined;
+        })[];
+        size: string;
+        isShowTopChevron: boolean;
+        childrenVariant: string;
+        right: string;
+        top: any;
+        Toggle: any;
+    };
+};
+export declare const WithIcons: {
+    args: {
+        list: {
+            icon: string;
+            title: string;
+            slug: string;
+            onClick: () => void;
+        }[];
+        show: boolean;
+        size: string;
+        isShowTopChevron: boolean;
+        childrenVariant: string;
+        right: string;
+        width: any;
+        top: any;
+        Toggle: any;
+    };
+};
+export declare const EmptyList: {
+    args: {
+        list: any[];
+        show: boolean;
+        size: string;
+        isShowTopChevron: boolean;
+        childrenVariant: string;
+        right: string;
+        width: any;
+        top: any;
+        Toggle: any;
+    };
+};
+export declare const SingleItem: {
+    args: {
+        list: {
+            title: string;
+            slug: string;
+            onClick: () => void;
+        }[];
+        show: boolean;
+        size: string;
+        isShowTopChevron: boolean;
+        childrenVariant: string;
+        right: string;
+        width: any;
+        top: any;
+        Toggle: any;
+    };
+};
+export declare const WithCustomItemComponent: {
+    args: {
+        list: ({
+            title: string;
+            onClick: () => void;
+            component: ({ children, onClick }: {
+                children: any;
+                onClick: any;
+            }) => React.JSX.Element;
+            slug?: undefined;
+        } | {
+            title: string;
+            slug: string;
+            onClick: () => void;
+            component?: undefined;
+        })[];
+        show: boolean;
+        size: string;
+        isShowTopChevron: boolean;
+        childrenVariant: string;
+        right: string;
+        width: any;
+        top: any;
+        Toggle: any;
+    };
+};
+export declare const CustomToggle: {
+    args: {
+        show: boolean;
+        Toggle: ({ show }: {
+            show: any;
+        }) => React.JSX.Element;
+        size: string;
+        isShowTopChevron: boolean;
+        right: string;
+        width: string;
+        top: string;
+        childrenVariant: string;
+        list: {
+            icon: string;
+            title: string;
+            slug: string;
+            onClick: () => void;
+        }[];
+    };
+};
+export declare const CustomToggleButton: {
+    args: {
+        show: boolean;
+        Toggle: () => React.JSX.Element;
+        list: ({
+            icon: string;
+            title: string;
+            slug: string;
+            onClick: () => void;
+        } | {
+            title: string;
+            slug: string;
+            onClick: () => void;
+            icon?: undefined;
+        })[];
+        size: string;
+        isShowTopChevron: boolean;
+        childrenVariant: string;
+        right: string;
+        width: any;
+        top: any;
+    };
+};
+export declare const AllSizes: {
+    args: {
+        list: ({
+            icon: string;
+            title: string;
+            slug: string;
+            onClick: () => void;
+        } | {
+            title: string;
+            slug: string;
+            onClick: () => void;
+            icon?: undefined;
+        })[];
+        show: boolean;
+        size: string;
+        isShowTopChevron: boolean;
+        childrenVariant: string;
+        right: string;
+        width: any;
+        top: any;
+        Toggle: any;
+    };
+    render: (args: any) => React.JSX.Element;
+};
+export declare const Complete: {
+    args: {
+        show: boolean;
+        size: string;
+        childrenVariant: string;
+        isShowTopChevron: boolean;
+        width: string;
+        top: string;
+        list: {
+            icon: string;
+            title: string;
+            slug: string;
+            onClick: () => void;
+        }[];
+        Toggle: ({ show }: {
+            show: any;
+        }) => React.JSX.Element;
+        right: string;
     };
 };

package/dist/components/Dropdown/stories/Dropdown.stories.js

@@ -14,47 +14,177 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Complete = exports.AllSizes = exports.CustomToggleButton = exports.CustomToggle = exports.WithCustomItemComponent = exports.SingleItem = exports.EmptyList = exports.WithIcons = exports.WideMenu = exports.CustomPosition = exports.WithoutTopChevron = exports.SecondaryVariant = exports.PrimaryVariant = exports.Medium = exports.Small = exports.Closed = exports.Open = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Dropdown_1 = __importDefault(require("../Dropdown"));
 var props_1 = require("../props");
+var Button_1 = __importDefault(require("../../Button"));
+var Icon_1 = __importDefault(require("../../Icon"));
+var defaultList = [
+    {
+        icon: "ArrowDownCircle",
+        title: "Siparişlerim",
+        slug: "/hesabim/kiraladiklarim",
+        onClick: function () { return console.log("siparislerim"); },
+    },
+    {
+        title: "Hesabım",
+        slug: "/hesabim/adres-bilgilerim",
+        onClick: function () { return console.log("hesabim"); },
+    },
+    {
+        title: "Kampanyalarım",
+        slug: "/hesabim/kampanyalarim",
+        onClick: function () { return console.log("kampanyalarim"); },
+    },
+    {
+        title: "Çıkış Yap",
+        onClick: function () { return console.log("logout"); },
+        slug: "",
+    },
+];
+var iconList = [
+    {
+        icon: "Profile",
+        title: "Profil",
+        slug: "/profil",
+        onClick: function () { return console.log("profil"); },
+    },
+    {
+        icon: "Setting",
+        title: "Ayarlar",
+        slug: "/ayarlar",
+        onClick: function () { return console.log("ayarlar"); },
+    },
+    {
+        icon: "Ticket",
+        title: "Kuponlar",
+        slug: "/kuponlar",
+        onClick: function () { return console.log("kuponlar"); },
+    },
+];
+var withCustomComponent = [
+    {
+        title: "Özel bileşen",
+        onClick: function () { return console.log("custom"); },
+        component: function (_a) {
+            var children = _a.children, onClick = _a.onClick;
+            return ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button", onClick: onClick, style: {
+                    border: "none",
+                    background: "transparent",
+                    padding: "12px",
+                    width: "100%",
+                    textAlign: "left",
+                    cursor: "pointer",
+                    font: "inherit",
+                } }, { children: children })));
+        },
+    },
+    {
+        title: "Normal link",
+        slug: "/link",
+        onClick: function () { return console.log("link"); },
+    },
+];
+var IconToggle = function (_a) {
+    var show = _a.show;
+    return ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button", "aria-expanded": show, style: {
+            border: "1px solid var(--dark-opacity-10)",
+            borderRadius: 8,
+            background: "white",
+            padding: 8,
+            cursor: "pointer",
+            display: "inline-flex",
+        } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "MoreCircle" }) })));
+};
+var baseArgs = {
+    list: defaultList,
+    show: false,
+    size: "medium",
+    isShowTopChevron: true,
+    childrenVariant: "secondary",
+    right: "-100px",
+    width: null,
+    top: null,
+    Toggle: null,
+};
+var Frame = function (_a) {
+    var children = _a.children, _b = _a.tall, tall = _b === void 0 ? false : _b;
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
+            display: "inline-block",
+            margin: "8px 0 0 24px",
+            minHeight: tall ? 260 : 80,
+            paddingBottom: tall ? 16 : 0,
+        } }, { children: children })));
+};
 exports.default = {
-    title: 'Components/Dropdown',
-    component: function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ style: { display: "inline-block", margin: "0px 0px 0px 150px" } }, { children: (0, jsx_runtime_1.jsx)(Dropdown_1.default, __assign({}, props)) })); },
-    tags: ['autodocs'],
+    title: "Components/Dropdown",
+    component: function (props) { return ((0, jsx_runtime_1.jsx)(Frame, __assign({ tall: props.show }, { children: (0, jsx_runtime_1.jsx)(Dropdown_1.default, __assign({}, props)) }))); },
+    tags: ["autodocs"],
     argTypes: {
-        size: { control: 'select', options: props_1.sizes },
-    }
+        size: { control: "select", options: props_1.sizes },
+        childrenVariant: { control: "select", options: props_1.variants },
+        show: { control: "boolean" },
+        isShowTopChevron: { control: "boolean" },
+        right: { control: "text" },
+        width: { control: "text" },
+        top: { control: "text" },
+        list: { control: "object" },
+        Toggle: { control: false },
+    },
 };
 exports.Default = {
-    args: {
-        list: [
-            {
-                icon: "ArrowDownCircle",
-                title: "Siparişlerim",
-                slug: "/hesabim/kiraladiklarim",
-            },
-            {
-                title: "Hesabım",
-                slug: "/hesabim/adres-bilgilerim",
-            },
-            {
-                title: "Kampanyalarım",
-                slug: "/hesabim/kampanyalarim",
-                //component: () => <a className='hasNotification' onClick={() => {}}>Kampanyalarım</a>
-            },
-            {
-                title: "Çıkış Yap",
-                onClick: function () { return console.log("logout"); },
-                slug: ""
-            },
-        ],
-        isShowTopChevron: true,
-        childrenVariant: "secondary",
-        right: null,
-        width: null,
-        top: null,
-        toggle: null
-        //toggle : () => <Button size="big" variant="primary">test</Button>
-    },
+    args: __assign({}, baseArgs),
+};
+exports.Open = {
+    args: __assign(__assign({}, baseArgs), { show: true }),
+};
+exports.Closed = {
+    args: __assign(__assign({}, baseArgs), { show: false }),
+};
+exports.Small = {
+    args: __assign(__assign({}, baseArgs), { size: "small", show: true }),
+};
+exports.Medium = {
+    args: __assign(__assign({}, baseArgs), { size: "medium", show: true }),
+};
+exports.PrimaryVariant = {
+    args: __assign(__assign({}, baseArgs), { childrenVariant: "primary", show: true }),
+};
+exports.SecondaryVariant = {
+    args: __assign(__assign({}, baseArgs), { childrenVariant: "secondary", show: true }),
+};
+exports.WithoutTopChevron = {
+    args: __assign(__assign({}, baseArgs), { isShowTopChevron: false, show: true }),
+};
+exports.CustomPosition = {
+    args: __assign(__assign({}, baseArgs), { show: true, right: "0", top: "calc(100% + 8px)", width: "220px" }),
+};
+exports.WideMenu = {
+    args: __assign(__assign({}, baseArgs), { show: true, width: "280px" }),
+};
+exports.WithIcons = {
+    args: __assign(__assign({}, baseArgs), { list: iconList, show: true }),
+};
+exports.EmptyList = {
+    args: __assign(__assign({}, baseArgs), { list: [], show: true }),
+};
+exports.SingleItem = {
+    args: __assign(__assign({}, baseArgs), { list: [{ title: "Tek seçenek", slug: "/tek", onClick: function () { return console.log("tek"); } }], show: true }),
+};
+exports.WithCustomItemComponent = {
+    args: __assign(__assign({}, baseArgs), { list: withCustomComponent, show: true }),
+};
+exports.CustomToggle = {
+    args: __assign(__assign({}, baseArgs), { show: true, Toggle: IconToggle, size: "small", isShowTopChevron: true, right: "-12px", width: "170px", top: "calc(100% + 10px)", childrenVariant: "primary", list: iconList }),
+};
+exports.CustomToggleButton = {
+    args: __assign(__assign({}, baseArgs), { show: true, Toggle: function () { return (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ size: "small", variant: "inverted", icon: "ArrowSmallDown" }, { children: "Men\u00FC" })); }, list: defaultList }),
+};
+exports.AllSizes = {
+    args: baseArgs,
+    render: function (args) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { display: "flex", gap: 48, minHeight: 260, paddingLeft: 24 } }, { children: props_1.sizes.map(function (size) { return ((0, jsx_runtime_1.jsx)(Dropdown_1.default, __assign({}, args, { size: size, show: true, list: defaultList }), size)); }) }))); },
+};
+exports.Complete = {
+    args: __assign(__assign({}, baseArgs), { show: true, size: "medium", childrenVariant: "primary", isShowTopChevron: true, width: "220px", top: "calc(100% + 12px)", list: iconList, Toggle: IconToggle }),
 };

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

@@ -1,5 +1,11 @@
 /// <reference types="react" />
 import { DropdownButtonStyledProps } from "./props";
-export declare const DropdownButtonStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DropdownButtonStyledProps> & DropdownButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DropdownButtonStyledProps> & DropdownButtonStyledProps, never>>> & string;
-export declare const DropdownListStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, keyof DropdownButtonStyledProps> & DropdownButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, keyof DropdownButtonStyledProps> & DropdownButtonStyledProps, never>>> & string;
-export declare const DropdownListItemStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof DropdownButtonStyledProps> & DropdownButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof DropdownButtonStyledProps> & DropdownButtonStyledProps, never>>> & string;
+export declare const DropdownButtonStyled: 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;
+}, DropdownButtonStyledProps>> & string;
+export declare const DropdownListStyled: 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;
+}, DropdownButtonStyledProps>> & string;
+export declare const DropdownListItemStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}, DropdownButtonStyledProps>> & string;