krl-alfred 2.22.0 → 2.22.1

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

@@ -23,7 +23,7 @@ var getIndicatorSize = function (size) {
 };
 exports.HorizontalLabel = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  align-items: stretch;\n  justify-content: center;\n  cursor: inherit;\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  align-items: stretch;\n  justify-content: center;\n  cursor: inherit;\n"])));
 exports.Inner = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  padding: 0 1.5rem;\n  min-height: 70px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n\n  @media only screen and ", " {\n    padding: 0 1rem;\n  }\n"], ["\n  width: 100%;\n  padding: 0 1.5rem;\n  min-height: 70px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n\n  @media only screen and ", " {\n    padding: 0 1rem;\n  }\n"])), devices_1.devices.sm);
-exports.LeftContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex: 0 0 auto;\n  width: auto;\n  position: relative;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex: 0 0 auto;\n  width: auto;\n  position: relative;\n"])));
+exports.LeftContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: auto;\n  position: relative;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: auto;\n  position: relative;\n"])));
 exports.Indicator = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 0 0 auto;\n  background-image: url('", "');\n  background-size: 100% 100%;\n  display: block;\n  position: relative;\n  margin: 0 ", " 0 0;\n  width: ", ";\n  height: ", ";\n"], ["\n  flex: 0 0 auto;\n  background-image: url('", "');\n  background-size: 100% 100%;\n  display: block;\n  position: relative;\n  margin: 0 ", " 0 0;\n  width: ", ";\n  height: ", ";\n"])), function (props) { return props.$disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#C2C3CE", name: "RadioButtonElementDisabled" })) : (props.$valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#FF1F1F", name: "RadioButtonElementInvalid" }))); }, function (props) { return props.$labelOffset || "0.5rem"; }, function (props) { return getIndicatorSize(props.$size); }, function (props) { return getIndicatorSize(props.$size); });
 exports.LabelContent = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: grid;\n  align-items: center;\n  justify-content: flex-start;\n"], ["\n  display: grid;\n  align-items: center;\n  justify-content: flex-start;\n"])));
 exports.LabelWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: ", ";\n  justify-content: flex-start;\n  flex-direction: ", ";\n  font: var(--body-semi-bold-14-17);\n  row-gap: ", ";\n\n  @media only screen and ", " {\n    ", "\n  }\n"], ["\n  display: flex;\n  align-items: ", ";\n  justify-content: flex-start;\n  flex-direction: ", ";\n  font: var(--body-semi-bold-14-17);\n  row-gap: ", ";\n\n  @media only screen and ", " {\n    ", "\n  }\n"])), function (props) { return (props.$titleBadgeBelow ? "flex-start" : "center"); }, function (props) { return (props.$titleBadgeBelow ? "column" : "row"); }, function (props) { return (props.$titleBadgeBelow ? "0.25rem" : "0"); }, devices_1.devices.sm, function (props) { return !props.$titleBadgeBelow && "display: block;"; });

package/dist/components/Tag/Tag.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { TagProps } from './props';
-declare const Tag: ({ label, onRemove, disabled, className, }: TagProps) => React.JSX.Element;
+declare const Tag: ({ label, onRemove, onClick, hasStar, disabled, className, }: TagProps) => React.JSX.Element;
 export default Tag;

package/dist/components/Tag/Tag.js

@@ -19,7 +19,17 @@ var props_1 = require("./props");
 var Tag_styled_1 = require("./Tag.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var Tag = function (_a) {
-    var label = _a.label, onRemove = _a.onRemove, _b = _a.disabled, disabled = _b === void 0 ? props_1.TagDefault.disabled : _b, className = _a.className;
-    return ((0, jsx_runtime_1.jsxs)(Tag_styled_1.TagStyled, __assign({ className: className, "$disabled": disabled }, { children: [(0, jsx_runtime_1.jsx)(Tag_styled_1.TagLabel, { children: label }), onRemove && ((0, jsx_runtime_1.jsx)(Tag_styled_1.TagRemoveButton, __assign({ type: "button", "aria-label": "".concat(label, " etiketini kald\u0131r"), disabled: disabled, onClick: onRemove }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Closemini", width: "1rem", height: "1rem", color: "currentColor" }) })))] })));
+    var label = _a.label, onRemove = _a.onRemove, onClick = _a.onClick, _b = _a.hasStar, hasStar = _b === void 0 ? props_1.TagDefault.hasStar : _b, _c = _a.disabled, disabled = _c === void 0 ? props_1.TagDefault.disabled : _c, className = _a.className;
+    var isClickable = Boolean(onClick) && !disabled;
+    var handleClick = function () {
+        if (!isClickable)
+            return;
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    var handleRemove = function (event) {
+        event.stopPropagation();
+        onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+    };
+    return ((0, jsx_runtime_1.jsxs)(Tag_styled_1.TagStyled, __assign({ className: className, "$disabled": disabled, "$clickable": isClickable, onClick: handleClick }, { children: [hasStar && ((0, jsx_runtime_1.jsx)(Tag_styled_1.TagStar, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Starfull", width: "1rem", height: "1rem", color: "var(--yellowDark)" }) })), (0, jsx_runtime_1.jsx)(Tag_styled_1.TagLabel, { children: label }), onRemove && ((0, jsx_runtime_1.jsx)(Tag_styled_1.TagRemoveButton, __assign({ type: "button", "aria-label": "".concat(label, " etiketini kald\u0131r"), disabled: disabled, onClick: handleRemove }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Closemini", width: "1rem", height: "1rem", color: "currentColor" }) })))] })));
 };
 exports.default = Tag;

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

@@ -1,8 +1,11 @@
 /// <reference types="react" />
-export declare const TagStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled"> & {
+export declare const TagStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled" | "$clickable"> & {
     $disabled?: boolean;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled"> & {
+    $clickable?: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled" | "$clickable"> & {
     $disabled?: boolean;
+    $clickable?: boolean;
 }, never>>> & string;
+export declare const TagStar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
 export declare const TagLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
 export declare const TagRemoveButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;

package/dist/components/Tag/Tag.styled.js

@@ -7,9 +7,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TagRemoveButton = exports.TagLabel = exports.TagStyled = void 0;
+exports.TagRemoveButton = exports.TagLabel = exports.TagStar = exports.TagStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.TagStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    max-width: 100%;\n    padding: 0.5rem 1rem;\n    border-radius: 0.25rem;\n    border: 1px solid var(--grey-10);\n    background-color: var(--dark-opacity-3);\n    box-sizing: border-box;\n"], ["\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    max-width: 100%;\n    padding: 0.5rem 1rem;\n    border-radius: 0.25rem;\n    border: 1px solid var(--grey-10);\n    background-color: var(--dark-opacity-3);\n    box-sizing: border-box;\n"])));
-exports.TagLabel = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font: var(--body-semi-bold-13-16);\n    color: var(--dark);\n    word-break: break-word;\n"], ["\n    font: var(--body-semi-bold-13-16);\n    color: var(--dark);\n    word-break: break-word;\n"])));
-exports.TagRemoveButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: var(--dark);\n    cursor: pointer;\n    flex-shrink: 0;\n\n    &:disabled {\n        cursor: not-allowed;\n        color: var(--dark-opacity-25);\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: var(--dark);\n    cursor: pointer;\n    flex-shrink: 0;\n\n    &:disabled {\n        cursor: not-allowed;\n        color: var(--dark-opacity-25);\n    }\n"])));
-var templateObject_1, templateObject_2, templateObject_3;
+exports.TagStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    max-width: 100%;\n    padding: 0.5rem 1rem;\n    border-radius: 0.25rem;\n    border: 1px solid var(--grey-10);\n    background-color: var(--dark-opacity-3);\n    box-sizing: border-box;\n    cursor: ", ";\n"], ["\n    display: inline-flex;\n    align-items: center;\n    max-width: 100%;\n    padding: 0.5rem 1rem;\n    border-radius: 0.25rem;\n    border: 1px solid var(--grey-10);\n    background-color: var(--dark-opacity-3);\n    box-sizing: border-box;\n    cursor: ", ";\n"])), function (props) { return (props.$disabled ? 'not-allowed' : props.$clickable ? 'pointer' : 'default'); });
+exports.TagStar = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    margin-right: 0.25rem;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    margin-right: 0.25rem;\n"])));
+exports.TagLabel = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font: var(--body-semi-bold-13-16);\n    color: var(--dark);\n    word-break: break-word;\n"], ["\n    font: var(--body-semi-bold-13-16);\n    color: var(--dark);\n    word-break: break-word;\n"])));
+exports.TagRemoveButton = styled_components_1.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: var(--dark);\n    cursor: pointer;\n    flex-shrink: 0;\n    margin-left: 0.5rem;\n    &:disabled {\n        cursor: not-allowed;\n        color: var(--dark-opacity-25);\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: var(--dark);\n    cursor: pointer;\n    flex-shrink: 0;\n    margin-left: 0.5rem;\n    &:disabled {\n        cursor: not-allowed;\n        color: var(--dark-opacity-25);\n    }\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/Tag/props.d.ts

@@ -1,10 +1,13 @@
 export interface TagProps {
     label: string;
     onRemove?: () => void;
+    onClick?: () => void;
+    hasStar?: boolean;
     disabled?: boolean;
     className?: string;
 }
 export declare const TagDefault: {
+    hasStar: boolean;
     disabled: boolean;
 };
 export type TagComponentProps = TagProps;

package/dist/components/Tag/props.js

@@ -2,5 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TagDefault = void 0;
 exports.TagDefault = {
+    hasStar: false,
     disabled: false,
 };

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

@@ -1,18 +1,24 @@
 import React from 'react';
 declare const _default: {
     title: string;
-    component: ({ label, onRemove, disabled, className, }: import("../props").TagProps) => React.JSX.Element;
+    component: ({ label, onRemove, onClick, hasStar, disabled, className, }: import("../props").TagProps) => React.JSX.Element;
     tags: string[];
     argTypes: {
         label: {
             control: string;
         };
+        hasStar: {
+            control: string;
+        };
         disabled: {
             control: string;
         };
         onRemove: {
             control: boolean;
         };
+        onClick: {
+            control: boolean;
+        };
     };
 };
 export default _default;
@@ -27,6 +33,13 @@ export declare const Removable: {
         onRemove: () => any;
     };
 };
+export declare const WithStar: {
+    args: {
+        label: string;
+        hasStar: boolean;
+        onRemove: () => any;
+    };
+};
 export declare const Disabled: {
     args: {
         label: string;
@@ -34,3 +47,7 @@ export declare const Disabled: {
         onRemove: () => any;
     };
 };
+export declare const ToggleStarOnClick: {
+    name: string;
+    render: () => React.JSX.Element;
+};

package/dist/components/Tag/stories/Tag.stories.js

@@ -1,9 +1,22 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Disabled = exports.Removable = exports.Default = void 0;
+exports.ToggleStarOnClick = exports.Disabled = exports.WithStar = exports.Removable = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var Tag_1 = __importDefault(require("../Tag"));
 exports.default = {
     title: 'Components/Tag',
@@ -11,8 +24,10 @@ exports.default = {
     tags: ['autodocs'],
     argTypes: {
         label: { control: 'text' },
+        hasStar: { control: 'boolean' },
         disabled: { control: 'boolean' },
         onRemove: { control: false },
+        onClick: { control: false },
     },
 };
 exports.Default = {
@@ -26,6 +41,13 @@ exports.Removable = {
         onRemove: function () { return undefined; },
     },
 };
+exports.WithStar = {
+    args: {
+        label: 'Haftada bir',
+        hasStar: true,
+        onRemove: function () { return undefined; },
+    },
+};
 exports.Disabled = {
     args: {
         label: '1 Kg',
@@ -33,3 +55,20 @@ exports.Disabled = {
         onRemove: function () { return undefined; },
     },
 };
+var ToggleableStarStory = function () {
+    var _a = (0, react_1.useState)({
+        'Haftada bir': true,
+    }), starredTags = _a[0], setStarredTags = _a[1];
+    var labels = ['Haftada bir', 'İki haftada bir', 'Ayda bir'];
+    var toggleStar = function (label) {
+        setStarredTags(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[label] = !prev[label], _a)));
+        });
+    };
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { display: 'flex', gap: '0.75rem', flexWrap: 'wrap' } }, { children: labels.map(function (label) { return ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: label, hasStar: Boolean(starredTags[label]), onClick: function () { return toggleStar(label); }, onRemove: function () { return undefined; } }, label)); }) })));
+};
+exports.ToggleStarOnClick = {
+    name: 'Tıklayınca yıldız aç/kapa',
+    render: function () { return (0, jsx_runtime_1.jsx)(ToggleableStarStory, {}); },
+};

package/package.json

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