krl-alfred 2.23.11 → 2.23.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/components/CategoryMenu/CategoryMenu.d.ts +1 -1
  2. package/dist/components/CategoryMenu/CategoryMenu.js +2 -2
  3. package/dist/components/CategoryMenu/CategoryMenu.styled.js +1 -1
  4. package/dist/components/CategoryMenu/props.d.ts +2 -0
  5. package/dist/components/CategoryMenu/props.js +1 -0
  6. package/dist/components/CategoryMenu/stories/CategoryMenu.stories.d.ts +8 -1
  7. package/dist/components/CategoryMenu/stories/CategoryMenu.stories.js +3 -0
  8. package/package.json +1 -1
package/dist/components/CategoryMenu/CategoryMenu.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { CategoryMenuProps } from "./props";
3
- declare const CategoryMenu: ({ data, subMenuRowLength, showIcons, }: CategoryMenuProps) => React.JSX.Element;
3
+ declare const CategoryMenu: ({ data, subMenuRowLength, showIcons, leftAlignMaxCount, }: CategoryMenuProps) => React.JSX.Element;
4
4
  export default CategoryMenu;
package/dist/components/CategoryMenu/CategoryMenu.js CHANGED
@@ -33,7 +33,7 @@ var OptionMenu_1 = __importDefault(require("../OptionMenu"));
33
33
  var Badges_1 = __importDefault(require("../Badges"));
34
34
  var CategoryMenu = function (_a) {
35
35
  var _b;
36
- var _c = _a.data, data = _c === void 0 ? props_1.CategoryMenuDefault.data : _c, _d = _a.subMenuRowLength, subMenuRowLength = _d === void 0 ? props_1.CategoryMenuDefault.subMenuRowLength : _d, _e = _a.showIcons, showIcons = _e === void 0 ? props_1.CategoryMenuDefault.showIcons : _e;
36
+ var _c = _a.data, data = _c === void 0 ? props_1.CategoryMenuDefault.data : _c, _d = _a.subMenuRowLength, subMenuRowLength = _d === void 0 ? props_1.CategoryMenuDefault.subMenuRowLength : _d, _e = _a.showIcons, showIcons = _e === void 0 ? props_1.CategoryMenuDefault.showIcons : _e, _f = _a.leftAlignMaxCount, leftAlignMaxCount = _f === void 0 ? props_1.CategoryMenuDefault.leftAlignMaxCount : _f;
37
37
  var ButtonLinkComponent = function (_a) {
38
38
  var item = _a.item, children = _a.children;
39
39
  return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "componentWrapper" }, { children: children })) })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "componentWrapper" }, { children: children })) })));
@@ -42,7 +42,7 @@ var CategoryMenu = function (_a) {
42
42
  var item = __rest(_a, []);
43
43
  return ((0, jsx_runtime_1.jsxs)(CategoryMenu_styled_1.CategoryItem, __assign({ "$isActiveCategory": item.isActive, "$hasCustomItem": item.hasCustomItem }, { children: [(0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: item }, { children: (0, jsx_runtime_1.jsxs)(CategoryMenu_styled_1.CategoryItemButtonInner, { children: [(item === null || item === void 0 ? void 0 : item.badgeTextSm) && ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonBadgeSm, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: item === null || item === void 0 ? void 0 : item.badgeTextSm }) })), showIcons && ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonIcon, __assign({ "$hasAnimation": item === null || item === void 0 ? void 0 : item.badgeText }, { children: (item === null || item === void 0 ? void 0 : item.badgeText) ? ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonBadge, { children: item === null || item === void 0 ? void 0 : item.badgeText })) : ((0, jsx_runtime_1.jsx)(Icon_1.default, { color: ["ElSatis"].includes(item.icon) ? "var(--primary)" : null, name: item.icon, hasColorChanged: !["CampaignColorful", "Lightning", "Flash", "Valentine", "NewYear"].includes(item.icon) })) }))), (0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonTitle, __assign({ "$showIcons": showIcons }, { children: item.name }))] }) })), item.children] })));
44
44
  };
45
- var hasFewCategories = ((_b = data === null || data === void 0 ? void 0 : data.length) !== null && _b !== void 0 ? _b : 0) <= 4;
45
+ var hasFewCategories = ((_b = data === null || data === void 0 ? void 0 : data.length) !== null && _b !== void 0 ? _b : 0) <= leftAlignMaxCount;
46
46
  return ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryMenuWrapper, __assign({ "$hasFewCategories": hasFewCategories }, { children: data === null || data === void 0 ? void 0 : data.map(function (item) {
47
47
  return ((0, jsx_runtime_1.jsx)(MenuButton, __assign({}, item, { children: item.children.length > 0 && ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.SubMenu, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { hasActiveItem: false, data: item.children, rowLength: item.subMenuRowLength || subMenuRowLength }) })) }), item.id));
48
48
  }) })));
package/dist/components/CategoryMenu/CategoryMenu.styled.js CHANGED
@@ -29,7 +29,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
29
29
  Object.defineProperty(exports, "__esModule", { value: true });
30
30
  exports.SubMenu = exports.CategoryItemButtonTitle = exports.CategoryItemButtonBadgeSm = exports.CategoryItemButtonBadge = exports.CategoryItemButtonIcon = exports.CategoryItemButtonInner = exports.CategoryItem = exports.CategoryMenuWrapper = void 0;
31
31
  var styled_components_1 = __importStar(require("styled-components"));
32
- exports.CategoryMenuWrapper = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n width: 100%;\n padding:0;\n margin: 12.5px auto;\n max-width: 1050px;\n a {\n text-decoration:none;\n &:not([href]){\n cursor: initial;\n *{\n cursor: initial;\n }\n }\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: ", ";\n width: 100%;\n padding:0;\n margin: 12.5px auto;\n max-width: 1050px;\n a {\n text-decoration:none;\n &:not([href]){\n cursor: initial;\n *{\n cursor: initial;\n }\n }\n }\n"])), function (props) { return props.$hasFewCategories ? 'flex-start' : 'space-between'; });
32
+ exports.CategoryMenuWrapper = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n gap: ", ";\n width: 100%;\n padding:0;\n margin: 12.5px auto;\n max-width: 1050px;\n a {\n text-decoration:none;\n &:not([href]){\n cursor: initial;\n *{\n cursor: initial;\n }\n }\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: ", ";\n gap: ", ";\n width: 100%;\n padding:0;\n margin: 12.5px auto;\n max-width: 1050px;\n a {\n text-decoration:none;\n &:not([href]){\n cursor: initial;\n *{\n cursor: initial;\n }\n }\n }\n"])), function (props) { return props.$hasFewCategories ? 'flex-start' : 'space-between'; }, function (props) { return props.$hasFewCategories ? '2rem' : '0'; });
33
33
  var hoverAndActive = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: var(--dark);\n &:before{\n border-color: var(--grey-10);\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n color: var(--dark);\n }\n"], ["\n color: var(--dark);\n &:before{\n border-color: var(--grey-10);\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n color: var(--dark);\n }\n"])));
34
34
  exports.CategoryItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n position: relative;\n margin: 0;\n padding-bottom: 8px;\n padding-top: 8px;\n &:not(:last-child):not(:nth-last-child(2)){\n path, circle, rect {\n color : var(--dark-opacity-75);\n }\n }\n &:hover{\n &:not(:last-child):not(:nth-last-child(2)){\n path , circle, rect {\n color : var(--dark);\n }\n }\n > ul{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n transition-delay: 0.3s;\n }\n .componentWrapper {\n > span{\n ", "\n }\n }\n }\n &:last-child , &:nth-last-child(2){\n ul{\n left: auto;\n right: 0;\n }\n }\n ", "\n ", "\n"], ["\n display: block;\n position: relative;\n margin: 0;\n padding-bottom: 8px;\n padding-top: 8px;\n &:not(:last-child):not(:nth-last-child(2)){\n path, circle, rect {\n color : var(--dark-opacity-75);\n }\n }\n &:hover{\n &:not(:last-child):not(:nth-last-child(2)){\n path , circle, rect {\n color : var(--dark);\n }\n }\n > ul{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n transition-delay: 0.3s;\n }\n .componentWrapper {\n > span{\n ", "\n }\n }\n }\n &:last-child , &:nth-last-child(2){\n ul{\n left: auto;\n right: 0;\n }\n }\n ", "\n ", "\n"])), hoverAndActive, function (props) { return props.$isActiveCategory ? "\n .componentWrapper > span{\n ".concat(hoverAndActive, "\n }\n ") : ""; }, function (props) { return props.$hasCustomItem ? "\n display: flex;\n align-items: center;\n justify-content: center;\n &:before{\n content: '';\n background-color:var(--grey-10);\n height: 39px;\n width: 2px;\n display: block;\n vertical-align: middle;\n border-radius: 8px;\n margin-right: 6px;\n margin-left: 6px;\n }\n " : ""; });
35
35
  exports.CategoryItemButtonInner = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n text-decoration: none;\n padding: 12px 16px;\n color: var(--dark-opacity-75);\n margin: 0;\n transition: all 0.2s ease-in-out;\n text-align: center;\n outline: none;\n display: block;\n position: relative;\n border: 0;\n background: transparent;\n outline: 0;\n width: 100%;\n font-family:inherit;\n cursor:pointer;\n box-sizing: border-box;\n &:before{\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n border: 1px solid transparent;\n color: var(--dark-opacity-75);\n background-color: transparent;\n border-radius: 0.5rem;\n z-index: -1;\n transition: all 0.2s ease-in-out;\n }\n"], ["\n text-decoration: none;\n padding: 12px 16px;\n color: var(--dark-opacity-75);\n margin: 0;\n transition: all 0.2s ease-in-out;\n text-align: center;\n outline: none;\n display: block;\n position: relative;\n border: 0;\n background: transparent;\n outline: 0;\n width: 100%;\n font-family:inherit;\n cursor:pointer;\n box-sizing: border-box;\n &:before{\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n border: 1px solid transparent;\n color: var(--dark-opacity-75);\n background-color: transparent;\n border-radius: 0.5rem;\n z-index: -1;\n transition: all 0.2s ease-in-out;\n }\n"])));
package/dist/components/CategoryMenu/props.d.ts CHANGED
@@ -4,6 +4,8 @@ export interface CategoryMenu {
4
4
  isActiveCategory?: boolean;
5
5
  hasCustomItem?: boolean;
6
6
  showIcons?: boolean;
7
+ /** Bu sayı ve altındaysa menü sola yaslanır; üstündeyse space-between */
8
+ leftAlignMaxCount?: number;
7
9
  }
8
10
  export interface CategoryMenuStyled {
9
11
  $subMenuRowLength?: number;
package/dist/components/CategoryMenu/props.js CHANGED
@@ -7,4 +7,5 @@ exports.CategoryMenuDefault = {
7
7
  isActiveCategory: false,
8
8
  hasCustomItem: false,
9
9
  showIcons: true,
10
+ leftAlignMaxCount: 4,
10
11
  };
package/dist/components/CategoryMenu/stories/CategoryMenu.stories.d.ts CHANGED
@@ -1,12 +1,15 @@
1
1
  /// <reference types="react" />
2
2
  declare const _default: {
3
3
  title: string;
4
- component: ({ data, subMenuRowLength, showIcons, }: import("../props").CategoryMenu) => import("react").JSX.Element;
4
+ component: ({ data, subMenuRowLength, showIcons, leftAlignMaxCount, }: import("../props").CategoryMenu) => import("react").JSX.Element;
5
5
  tags: string[];
6
6
  argTypes: {
7
7
  subMenuRowLength: {
8
8
  control: string;
9
9
  };
10
+ leftAlignMaxCount: {
11
+ control: string;
12
+ };
10
13
  showIcons: {
11
14
  control: string;
12
15
  };
@@ -184,6 +187,9 @@ export declare const FourCategories: {
184
187
  subMenuRowLength: {
185
188
  control: string;
186
189
  };
190
+ leftAlignMaxCount: {
191
+ control: string;
192
+ };
187
193
  showIcons: {
188
194
  control: string;
189
195
  };
@@ -193,6 +199,7 @@ export declare const FourCategories: {
193
199
  };
194
200
  args: {
195
201
  subMenuRowLength: number;
202
+ leftAlignMaxCount: number;
196
203
  showIcons: boolean;
197
204
  data: ({
198
205
  id: number;
package/dist/components/CategoryMenu/stories/CategoryMenu.stories.js CHANGED
@@ -12,6 +12,7 @@ exports.default = {
12
12
  tags: ['autodocs'],
13
13
  argTypes: {
14
14
  subMenuRowLength: { control: 'number' },
15
+ leftAlignMaxCount: { control: 'number' },
15
16
  showIcons: { control: 'boolean' },
16
17
  data: { control: 'disabled' }
17
18
  }
@@ -31,11 +32,13 @@ exports.Default = {
31
32
  exports.FourCategories = {
32
33
  argTypes: {
33
34
  subMenuRowLength: { control: 'number' },
35
+ leftAlignMaxCount: { control: 'number' },
34
36
  showIcons: { control: 'boolean' },
35
37
  data: { control: 'disabled' }
36
38
  },
37
39
  args: {
38
40
  subMenuRowLength: 7,
41
+ leftAlignMaxCount: 4,
39
42
  showIcons: true,
40
43
  data: categories_1.default.slice(0, 4),
41
44
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "krl-alfred",
3
- "version": "2.23.11",
3
+ "version": "2.23.12",
4
4
  "files": [
5
5
  "dist"
6
6
  ],