oolib 2.14.3 → 2.15.2

package/dist/components/ActionMenu/index.d.ts

@@ -1,5 +1,5 @@
 export function ActionMenu({ icon, invert, actions, align, buttonText, sideEffect }: {
-    icon: any;
+    icon?: string;
     invert: any;
     actions: any;
     align?: string;

package/dist/components/ActionMenu/index.js

@@ -41,9 +41,9 @@ var Typo_1 = require("../Typo");
 var utils_1 = require("./utils");
 var styled_1 = require("./styled");
 var ActionMenu = function (_a) {
-    var icon = _a.icon, invert = _a.invert, actions = _a.actions, _b = _a.align, align = _b === void 0 ? 'left' : _b, buttonText = _a.buttonText, sideEffect = _a.sideEffect;
+    var _b = _a.icon, icon = _b === void 0 ? 'DotsThree' : _b, invert = _a.invert, actions = _a.actions, _c = _a.align, align = _c === void 0 ? 'left' : _c, buttonText = _a.buttonText, sideEffect = _a.sideEffect;
     var actionMenuRef = (0, react_1.useRef)(null);
-    var _c = (0, react_1.useState)(false), showActions = _c[0], setShowActions = _c[1];
+    var _d = (0, react_1.useState)(false), showActions = _d[0], setShowActions = _d[1];
     (0, utils_1.useTrackFocus)(actionMenuRef, setShowActions);
     (0, react_1.useEffect)(function () {
         // if you want this click to trigger a sideeffect in parent.
@@ -53,7 +53,7 @@ var ActionMenu = function (_a) {
     if (!actions || actions.length === 0)
         return null;
     return (react_1.default.createElement(styled_1.StyledActionMenu, { ref: actionMenuRef },
-        react_1.default.createElement(Buttons_1.ButtonGhost, { icon: icon || 'DotsThree', children: buttonText, invert: invert, onClick: function (e) {
+        react_1.default.createElement(Buttons_1.ButtonGhost, { icon: icon, children: buttonText, invert: invert, onClick: function (e) {
                 e.stopPropagation();
                 setShowActions(!showActions);
             } }),

package/dist/components/ActionMenu/styled.js

@@ -32,7 +32,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var themes_1 = require("../../themes");
 var mixins_1 = require("../../themes/mixins");
 var Buttons_1 = require("../Buttons");
-var greyColor5 = themes_1.colors.greyColor5, white = themes_1.colors.white, greyColor10 = themes_1.colors.greyColor10, greyColor80 = themes_1.colors.greyColor80;
+var greyColor5 = themes_1.colors.greyColor5, white = themes_1.colors.white, greyColor10 = themes_1.colors.greyColor10, greyColor100 = themes_1.colors.greyColor100;
 exports.StyledActionMenu = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: max-content;\n"], ["\n  position: relative;\n  width: max-content;\n"])));
 exports.StyledActionsDropMenu = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  bottom: -2px;\n  z-index: 10;\n  transform-origin: left top; \n  transform: translateY(100%) ", ";\n  ", "\n\n  ", "\n  box-shadow: 2px 2px 10px   rgba(0, 0, 0, 0.05);\n  border: 1px solid ", ";\n  background-color: ", ";\n\n  \n\n  &::after{\n      content: '';\n      width: 0;\n      height: 0;\n      position: absolute;\n      bottom: 100%;\n\n      ", "\n      border: 1rem solid transparent;\n      border-bottom: 1rem solid ", ";\n  }\n"], ["\n  position: absolute;\n  bottom: -2px;\n  z-index: 10;\n  transform-origin: left top; \n  transform: translateY(100%) ", ";\n  ", "\n\n  ", "\n  box-shadow: 2px 2px 10px   rgba(0, 0, 0, 0.05);\n  border: 1px solid ", ";\n  background-color: ", ";\n\n  \n\n  &::after{\n      content: '';\n      width: 0;\n      height: 0;\n      position: absolute;\n      bottom: 100%;\n\n      ", "\n      border: 1rem solid transparent;\n      border-bottom: 1rem solid ", ";\n  }\n"])), function (_a) {
     var unfold = _a.unfold;
@@ -43,18 +43,12 @@ exports.StyledActionsDropMenu = styled_components_1.default.div(templateObject_6
         var unfold = _a.unfold;
         return "scaleY(".concat(Number(unfold), ")");
     }) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["", ": 0;"], ["", ": 0;"])), align);
-}, greyColor5, function (_a) {
-    var invert = _a.invert;
-    return invert ? greyColor80 : white;
-}, function (_a) {
+}, greyColor5, white, function (_a) {
     var align = _a.align;
     return align == 'center' ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          left: 50%;\n          transform: translateX(-50%);\n        "], ["\n          left: 50%;\n          transform: translateX(-50%);\n        "]))) : (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["", ": 1rem;"], ["", ": 1rem;"])), align);
 }, greyColor10);
 exports.StyledActionBtn = (0, styled_components_1.default)(Buttons_1.ButtonGhost)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  white-space: nowrap;\n  width: 100%;\n  text-align: ", ";\n  padding: 1rem 1.6rem;\n  background-color: transparent;\n  color: ", ";\n  ", ";\n  &:hover{\n    background-color: ", ";\n  }\n"], ["\n  white-space: nowrap;\n  width: 100%;\n  text-align: ", ";\n  padding: 1rem 1.6rem;\n  background-color: transparent;\n  color: ", ";\n  ", ";\n  &:hover{\n    background-color: ", ";\n  }\n"])), function (_a) {
     var align = _a.align;
     return align === 'center' ? 'center' : 'left';
-}, function (_a) {
-    var invert = _a.invert;
-    return invert ? white : greyColor80;
-}, (0, mixins_1.transition)('background-color'), greyColor10);
+}, greyColor100, (0, mixins_1.transition)('background-color'), greyColor10);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/Buttons/index.js

@@ -46,10 +46,11 @@ var DisplayIcon = function (_a) {
 };
 var ButtonStyledWrapper = function (_a) {
     var props = _a.props, variant = _a.variant;
-    var id = props.id, link = props.link, children = props.children, value = props.value, submit = props.submit, icon = props.icon, iconAfter = props.iconAfter, onClick = props.onClick, onMouseDown = props.onMouseDown, active = props.active, S = props.S, disabled = props.disabled, invert = props.invert, theme = props.theme, width = props.width, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, color = props.color, style = props.style, className = props.className;
+    var id = props.id, link = props.link, children = props.children, value = props.value, submit = props.submit, icon = props.icon, iconAfter = props.iconAfter, onClick = props.onClick, onMouseDown = props.onMouseDown, active = props.active, SProp = props.S, disabled = props.disabled, invert = props.invert, theme = props.theme, width = props.width, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, color = props.color, style = props.style, className = props.className;
     var displayText = (link === null || link === void 0 ? void 0 : link.displayText) || children || value;
-    var size = (S && "S") || 'M';
     var composition = (icon || iconAfter) && displayText ? 'icon+text' : !displayText && 'iconOnly';
+    var S = composition === 'iconOnly' ? true : SProp;
+    var size = (S && "S") || 'M';
     return (react_1.default.createElement(index_styled_1.ButtonStyled, { id: id, style: style, className: className, variant: variant, size: size, active: active, invert: invert, disabled: disabled, theme: theme, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, type: submit ? 'submit' : 'button', onClick: onClick, onMouseDown: onMouseDown, composition: composition, width: width, color: color },
         icon && react_1.default.createElement(DisplayIcon, { icon: icon, size: S ? 15 : 20 }),
         displayText && react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, displayText),

package/dist/components/Buttons/index.styled.js

@@ -92,7 +92,7 @@ var ButtonSecondary = (0, styled_components_2.css)(templateObject_7 || (template
     var colors = _a.theme.colors;
     return (0, utilsOolib_1.getPrimaryColorText)(colors);
 });
-var ButtonCustom = (0, styled_components_2.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  border: 2px solid\n    ", ";\n  box-shadow: -4px 4px 1px\n    ", "\n    };\n  background-color: ", ";\n\n  color: ", ";\n\n  ", "\n\n  ", "\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  border: 2px solid\n    ", ";\n  box-shadow: -4px 4px 1px\n    ", "\n    };\n  background-color: ", ";\n\n  color: ", ";\n\n  ", "\n\n  ", "\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
+var ButtonCustom = (0, styled_components_2.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  border: 2px solid\n    ", ";\n  box-shadow: -4px 4px 1px\n    ", ";\n    \n  background-color: ", ";\n\n  color: ", ";\n\n  ", "\n\n  ", "\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  border: 2px solid\n    ", ";\n  box-shadow: -4px 4px 1px\n    ", ";\n    \n  background-color: ", ";\n\n  color: ", ";\n\n  ", "\n\n  ", "\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
     var invert = _a.invert, colors = _a.theme.colors;
     return invert
         ? (0, utilsOolib_1.getPrimaryColor40)(colors)

package/dist/components/Loader/index.js

@@ -18,15 +18,17 @@ exports.Loader = void 0;
 var react_1 = __importDefault(require("react"));
 var Typo_1 = require("../Typo");
 var colors_1 = require("../../themes/colors");
+var styled_components_1 = require("styled-components");
 var greyColor100 = colors_1.colors.greyColor100;
 var index_styled_1 = require("./index.styled");
 var LoaderDiv = function (props) {
+    var theme = (0, styled_components_1.useTheme)();
     var SuitableTypo = props.L ? Typo_1.SANS_5_6 : props.M ? Typo_1.SANS_4 : Typo_1.SANS_3;
     return (!props.children ?
         react_1.default.createElement(index_styled_1.StyledLoader, __assign({}, props)) :
         react_1.default.createElement(index_styled_1.StyledLoaderWrapper, __assign({}, props),
             react_1.default.createElement(index_styled_1.StyledLoader, __assign({}, props, { children: null })),
-            react_1.default.createElement(SuitableTypo, __assign({ color: greyColor100, invert: props.invert }, (props.L ? { bold: true } : { semibold: true })), props.children)));
+            react_1.default.createElement(SuitableTypo, __assign({ color: greyColor100, invert: props.invert }, (props.L ? { bold: true } : { semibold: true })), ((theme === null || theme === void 0 ? void 0 : theme._Env) === 'dev' && props.debug) || props.children)));
 };
 var Loader = function (props) {
     return (!props.isBlock ?

package/dist/components/OKELink/comps/AvatarDisplay/styled.js

@@ -41,7 +41,7 @@ exports.StyledAvatarImg = styled_components_1.default.img(templateObject_2 || (t
     var theme = _a.theme, invert = _a.invert, size = _a.size;
     return commonStyle({ theme: theme, invert: invert, size: size });
 });
-exports.StyledAvatarTXT = (0, styled_components_1.default)(index_styled_1.SANS_3_STYLED)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  display: grid;\n  place-items: center;\n"], ["\n  ", "\n  display: grid;\n  place-items: center;\n"])), function (_a) {
+exports.StyledAvatarTXT = (0, styled_components_1.default)(index_styled_1.SANS_3_STYLED)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  display: inline-grid;\n  place-items: center;\n"], ["\n  ", "\n  display: inline-grid;\n  place-items: center;\n"])), function (_a) {
     var theme = _a.theme, invert = _a.invert, size = _a.size;
     return commonStyle({ theme: theme, invert: invert, size: size });
 });

package/dist/components/OKELink/styled.js

@@ -3,31 +3,45 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledLink = void 0;
-var styled_components_1 = __importDefault(require("styled-components"));
+var styled_components_1 = __importStar(require("styled-components"));
 var mixins_1 = require("../../themes/mixins");
 var utils_1 = require("./utils");
-exports.StyledLink = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: pointer;\n  pointer-events: ", ";\n  display: inline-flex;\n  align-items: center;\n  gap: 0.7rem;\n  max-width: calc(100vw - 4rem); //the margin on mobile is 2rem each on both sides \n  text-decoration: none;\n\n  &:hover{\n      .text::after{\n        width: ", ";\n      }\n  }\n\n  & > .text {\n    position: relative;\n    color: ", ";\n\n    & > *:first-child{ // kishan addition\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    \n    &::after{\n        content: '';\n        background-color: ", ";\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: ", ";\n        height: ", ";\n        ", ";\n    }\n  }\n"], ["\n  cursor: pointer;\n  pointer-events: ", ";\n  display: inline-flex;\n  align-items: center;\n  gap: 0.7rem;\n  max-width: calc(100vw - 4rem); //the margin on mobile is 2rem each on both sides \n  text-decoration: none;\n\n  &:hover{\n      .text::after{\n        width: ", ";\n      }\n  }\n\n  & > .text {\n    position: relative;\n    color: ", ";\n\n    & > *:first-child{ // kishan addition\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    \n    &::after{\n        content: '';\n        background-color: ", ";\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: ", ";\n        height: ", ";\n        ", ";\n    }\n  }\n"])), function (_a) {
+exports.StyledLink = styled_components_1.default.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: pointer;\n  pointer-events: ", ";\n  max-width: calc(100vw - 4rem); //the margin on mobile is 2rem each on both sides \n  text-decoration: none;\n  & > * {\n    margin-right: 0.7rem;\n    margin-left: 0.7rem;\n    vertical-align: middle;\n  }\n\n  &:hover{\n    .text {\n      ", ";\n    }\n  }\n\n  & > .text {\n    position: relative;\n    ", ";\n    \n    ", "\n\n    & > *:first-child{ // kishan addition\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    \n  }\n"], ["\n  cursor: pointer;\n  pointer-events: ", ";\n  max-width: calc(100vw - 4rem); //the margin on mobile is 2rem each on both sides \n  text-decoration: none;\n  & > * {\n    margin-right: 0.7rem;\n    margin-left: 0.7rem;\n    vertical-align: middle;\n  }\n\n  &:hover{\n    .text {\n      ", ";\n    }\n  }\n\n  & > .text {\n    position: relative;\n    ", ";\n    \n    ", "\n\n    & > *:first-child{ // kishan addition\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    \n  }\n"])), function (_a) {
     var disabled = _a.disabled;
     return disabled ? 'none' : 'auto';
 }, function (_a) {
-    var invertUnderline = _a.invertUnderline;
-    return invertUnderline ? '100%' : 0;
+    var invertUnderline = _a.invertUnderline, disabled = _a.disabled, invert = _a.invert, theme = _a.theme, color = _a.color;
+    if (!disabled) {
+        return (0, mixins_1.multilineUnderline)((0, utils_1.setLinkColor)({ theme: theme, invert: invert, color: color }), '1px', invertUnderline, true);
+    }
 }, function (_a) {
-    var theme = _a.theme, invert = _a.invert, disabled = _a.disabled, color = _a.color;
-    return (0, utils_1.setLinkColor)({ disabled: disabled, color: color, invert: invert, theme: theme });
-}, function (_a) {
-    var theme = _a.theme, invert = _a.invert, color = _a.color;
-    return (0, utils_1.setLinkColor)({ theme: theme, invert: invert, color: color });
-}, function (_a) {
-    var invertUnderline = _a.invertUnderline;
-    return invertUnderline ? 0 : '100%';
-}, function (_a) {
-    var disabled = _a.disabled;
-    return disabled ? 0 : '1px';
-}, (0, mixins_1.transition)('width'));
-var templateObject_1;
+    var theme = _a.theme, invert = _a.invert, disabled = _a.disabled, color = _a.color, invertUnderline = _a.invertUnderline;
+    var finalColor = (0, utils_1.setLinkColor)({ disabled: disabled, color: color, invert: invert, theme: theme });
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        color: ", ";\n        ", "\n      "], ["\n        color: ", ";\n        ", "\n      "])), finalColor, !disabled && (0, mixins_1.multilineUnderline)(finalColor, '1px', invertUnderline));
+}, (0, mixins_1.transition)('background-size'));
+var templateObject_1, templateObject_2;

package/dist/themes/mixins/index.d.ts

@@ -4,4 +4,5 @@ import { transition } from "./transitions";
 import { multiTransition } from "./transitions";
 export function isElementInViewport(el: any): boolean;
 export const ellipsis: any;
+export function multilineUnderline(color: any, thickness?: string, reverse?: boolean, hovered?: boolean): any;
 export { transition, multiTransition };

package/dist/themes/mixins/index.js

@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ellipsis = exports.isElementInViewport = exports.multiTransition = exports.transition = exports.getBreakPoint = exports.mediaQuery = void 0;
+exports.multilineUnderline = exports.ellipsis = exports.isElementInViewport = exports.multiTransition = exports.transition = exports.getBreakPoint = exports.mediaQuery = void 0;
 var styled_components_1 = require("styled-components");
 var transitions_1 = require("./transitions");
 Object.defineProperty(exports, "transition", { enumerable: true, get: function () { return transitions_1.transition; } });
@@ -44,4 +44,12 @@ var isElementInViewport = function (el) {
 exports.isElementInViewport = isElementInViewport;
 var ellipsis = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
 exports.ellipsis = ellipsis;
-var templateObject_1;
+//works only with inline(ish) elements, you need to call it again at hover state & set transition yourself 'background-size'
+var multilineUnderline = function (color, thickness, reverse, hovered) {
+    if (thickness === void 0) { thickness = '1px'; }
+    if (reverse === void 0) { reverse = false; }
+    if (hovered === void 0) { hovered = false; }
+    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject([" \n  background-image: linear-gradient(", ", ", ");\n  background-repeat: no-repeat;\n  background-position: left bottom;\n  background-size: ", " ", ";\n"], [" \n  background-image: linear-gradient(", ", ", ");\n  background-repeat: no-repeat;\n  background-position: left bottom;\n  background-size: ", " ", ";\n"])), color, color, hovered ? (reverse ? '100%' : '0%') : (reverse ? '0%' : '100%'), thickness);
+};
+exports.multilineUnderline = multilineUnderline;
+var templateObject_1, templateObject_2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.14.3",
+  "version": "2.15.2",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",